/* ══════════════════════════════════════════════════════════════
   HydroSan · Rediseño de la plataforma
   Capa visual sobre estilos.css (se carga después). Solo afecta
   al login (#platLogin) y a la aplicación (#appShell).
   Lenguaje: el mismo de la landing — modelo CAD oscuro en el menú,
   papel de dibujo en el área de trabajo, turquesa HydroSan,
   Archivo + IBM Plex Mono + Big Shoulders Display.
   Regla de color: neutros para la estructura, turquesa para las
   acciones y AF/AC/ALC/estado solo como acento, nunca de relleno.
   ══════════════════════════════════════════════════════════════ */

:root{
  --hs-paper:#F2F5F4; --hs-paper-2:#E7EEEC; --hs-surface:#FFFFFF;
  --hs-ink:#0D2226; --hs-ink-2:#3E585C;
  --hs-line:#C5D3D0; --hs-line-2:#DCE5E3;
  --hs-teal:#087F79; --hs-teal-ink:#07706B; --hs-teal-soft:#D4EEEB; --hs-on-teal:#FFFFFF;
  --hs-af:#1F66D1; --hs-ac:#CF4129; --hs-alc:#8A5724;
  --hs-ok:#1D7F45; --hs-ok-soft:#DDF1E4; --hs-warn:#9A6400; --hs-warn-soft:#FBEFD5; --hs-bad:#B8372A; --hs-bad-soft:#F8DEDA;
  --hs-st-d:#1F66D1; --hs-st-r:#C07A00; --hs-st-a:#1D7F45; --hs-st-ar:#6B7F82;
  --hs-shadow:0 1px 2px rgba(13,34,38,.05),0 8px 24px rgba(13,34,38,.06);
  --hs-cad:#061316; --hs-cad-2:#0A1C20; --hs-cad-edge:#1D3E45; --hs-cad-text:#DDEFEC; --hs-cad-dim:#8FB0AC; --hs-cad-teal:#38D3C7;
  --hs-display:"Big Shoulders Display","Archivo","Arial Narrow",sans-serif;
  --hs-body:"Archivo","DM Sans","Segoe UI",system-ui,sans-serif;
  --hs-mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;
}
/* Tema único: la plataforma ya no tiene modo día/noche. */

/* ─────────── LOGIN ─────────── */
#platLogin.plat-login{
  background-color:var(--hs-cad);
  background-image:linear-gradient(rgba(56,211,199,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(56,211,199,.07) 1px,transparent 1px);
  background-size:28px 28px;
}
#platLogin .login-card{background:var(--hs-surface);border:1px solid var(--hs-line);border-radius:6px;box-shadow:0 30px 60px rgba(0,0,0,.35);font-family:var(--hs-body);color:var(--hs-ink)}
#platLogin .lc-icon{background:var(--hs-teal);border-radius:6px;color:#fff}
#platLogin .lc-title{font-family:var(--hs-body);font-weight:800;color:var(--hs-ink);letter-spacing:-.01em}
#platLogin .lc-sub-t{font-family:var(--hs-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--hs-teal-ink)}
#platLogin .lc-heading{font-family:var(--hs-display);font-stretch:74%;font-weight:800;font-size:30px;line-height:1.05;color:var(--hs-ink)}
#platLogin .lc-label{font-weight:600;color:var(--hs-ink);font-size:13.5px}
#platLogin .lc-input{border:1px solid var(--hs-line);border-radius:6px;background:var(--hs-paper);color:var(--hs-ink);font:400 15px/1.4 var(--hs-body);min-height:44px}
#platLogin .lc-input:focus{outline:none;border-color:var(--hs-teal);box-shadow:0 0 0 3px var(--hs-teal-soft)}
#platLogin .lc-btn{background:var(--hs-teal);color:var(--hs-on-teal);border-radius:6px;font:600 15px/1 var(--hs-body);min-height:46px;box-shadow:none}
#platLogin .lc-btn:hover{background:var(--hs-teal-ink)}
#platLogin .lc-btn-google{border-radius:6px;border:1px solid var(--hs-line);font-family:var(--hs-body);min-height:44px}
#platLogin .lc-hint{color:var(--hs-teal-ink)!important}

/* ─────────── SHELL ─────────── */
#appShell{font-family:var(--hs-body);color:var(--hs-ink);background:var(--hs-paper)}
#appShell .app-main-content{background:var(--hs-paper)}
#appShell .app-body{background:transparent}

/* Sidebar: vista de modelo CAD, igual al hero de la landing */
#appShell .app-sidebar{
  --sb-bg:var(--hs-cad);
  background-color:var(--hs-cad);
  background-image:linear-gradient(rgba(56,211,199,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(56,211,199,.05) 1px,transparent 1px);
  background-size:24px 24px;
  color:var(--hs-cad-dim);
  border-right:1px solid var(--hs-cad-edge);
}
#appShell .app-sidebar-header{border-bottom:1px solid var(--hs-cad-edge)}
#appShell .sb-logo-icon{width:32px;height:32px;background:none!important;box-shadow:none!important;color:var(--hs-cad-teal);display:flex;align-items:center;justify-content:center;font-size:0}
#appShell .sb-logo-icon svg{width:30px;height:30px}
#appShell .sb-logo-text{font-family:var(--hs-body);font-weight:800;font-size:18px;color:#fff;letter-spacing:-.01em}
#appShell .sb-logo-sub{font-family:var(--hs-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--hs-cad-teal)}
#appShell .sb-collapse-btn{background:rgba(56,211,199,.06);border:1px solid var(--hs-cad-edge);color:var(--hs-cad-dim);border-radius:5px}
#appShell .sb-collapse-btn:hover{border-color:var(--hs-cad-teal);color:#fff}
#appShell .app-sidebar-user{border-bottom:1px solid var(--hs-cad-edge)}
#appShell .app-sidebar-user:hover{background:rgba(56,211,199,.06)}
#appShell .sb-avatar{background:var(--hs-cad-teal)!important;color:#03201E!important;font-family:var(--hs-mono);font-weight:600;border-radius:6px}
#appShell .sb-name{color:#fff;font-weight:600}
#appShell .sb-role{color:var(--hs-cad-dim)}
#appShell .sb-section-label{font-family:var(--hs-mono);font-size:10.5px;letter-spacing:.12em;color:#5E7F7B}
#appShell .sb-divider{background:var(--hs-cad-edge)}
#appShell .sb-nav-item{color:#B7CDC9;border-radius:5px;font-weight:500;font-size:14px;border-left:0}
#appShell .sb-nav-item:hover{background:rgba(56,211,199,.07);color:#fff}
#appShell .sb-nav-item.active{background:rgba(56,211,199,.12);color:#fff;box-shadow:inset 2px 0 0 var(--hs-cad-teal)}
#appShell .sb-nav-item.active .sb-icon{color:var(--hs-cad-teal)}
#appShell .sb-icon{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;font-size:0}
#appShell .sb-svg{width:19px;height:19px}
#appShell .app-sidebar-footer{border-top:1px solid var(--hs-cad-edge)}
#appShell .sb-logout-btn{color:var(--hs-cad-dim);font-family:var(--hs-body)}
#appShell .sb-logout-btn:hover{color:#fff;background:rgba(255,110,82,.1)}

/* ─────────── PÁGINAS DE GESTIÓN ─────────── */
#appShell .hs-page{max-width:1180px;margin:0 auto;padding:32px clamp(16px,3vw,40px) 56px;font-size:15px}
#appShell .hs-narrow{max-width:760px}
#appShell .hs-page-hdr{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:22px}
#appShell .hs-eyebrow{font:500 12px/1.4 var(--hs-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--hs-teal-ink);margin:0 0 6px}
#appShell .hs-h1{font-family:var(--hs-display);font-stretch:74%;font-weight:800;font-size:clamp(30px,3.4vw,42px);line-height:1;letter-spacing:.005em;color:var(--hs-ink);margin:0}
#appShell .hs-count{font:600 .45em/1 var(--hs-mono);color:var(--hs-ink-2);vertical-align:.35em;margin-left:6px;border:1px solid var(--hs-line);padding:3px 7px;border-radius:3px}
#appShell .hs-lede{color:var(--hs-ink-2);margin-top:8px}
#appShell .hs-mono{font-family:var(--hs-mono);font-variant-numeric:tabular-nums}

/* Íconos y botones */
#appShell .hs-ico{width:17px;height:17px;flex:none}
#appShell .hs-ico-lg{width:28px;height:28px;flex:none}
#appShell .hs-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:42px;padding:9px 16px;border-radius:6px;border:1px solid transparent;font:600 14.5px/1.2 var(--hs-body);cursor:pointer;text-decoration:none;white-space:nowrap;transition:background-color .15s,border-color .15s}
#appShell .hs-btn-primary{background:var(--hs-teal);color:var(--hs-on-teal)}
#appShell .hs-btn-primary:hover{background:var(--hs-teal-ink)}
#appShell .hs-btn-ghost{background:var(--hs-surface);color:var(--hs-ink);border-color:var(--hs-line)}
#appShell .hs-btn-ghost:hover{border-color:var(--hs-ink-2)}
#appShell .hs-btn-dark{background:var(--hs-ink);color:var(--hs-paper)}
#appShell .hs-btn-danger{background:var(--hs-bad-soft);color:var(--hs-bad);border-color:transparent}
#appShell .hs-btn-danger:hover{border-color:var(--hs-bad)}
#appShell .hs-btn-light{background:#fff;color:#03201E}
#appShell .hs-btn-warn{background:var(--hs-warn);color:#fff}
#appShell .hs-link{background:none;border:0;padding:4px 0;color:var(--hs-teal-ink);font:600 14px/1 var(--hs-body);cursor:pointer}
#appShell .hs-link:hover{text-decoration:underline;text-underline-offset:3px}
#appShell .hs-icon-btn{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border:0;background:none;color:var(--hs-ink-2);border-radius:4px;cursor:pointer}
#appShell .hs-icon-btn:hover{background:var(--hs-paper-2);color:var(--hs-ink)}
#appShell :focus-visible{outline:3px solid var(--hs-teal);outline-offset:2px}

/* Banner de plan / perfil */
#appShell .hs-banner{display:flex;align-items:center;gap:16px;padding:14px 18px;margin-bottom:16px;border-radius:4px;background:var(--hs-cad);color:var(--hs-cad-text);border:1px solid var(--hs-cad-edge)}
#appShell .hs-banner>svg{color:var(--hs-cad-teal)}
#appShell .hs-banner>div{flex:1;min-width:0;display:grid;gap:2px}
#appShell .hs-banner b{font-weight:600;color:#fff}
#appShell .hs-banner span{font-size:13.5px;color:var(--hs-cad-dim)}
#appShell .hs-banner .hs-mono{color:var(--hs-cad-teal);font-size:inherit}
#appShell .hs-banner-warn{background:var(--hs-warn-soft);border-color:transparent;color:var(--hs-ink)}
#appShell .hs-banner-warn b{color:var(--hs-ink)}#appShell .hs-banner-warn span{color:var(--hs-ink-2)}
#appShell .hs-profile{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:14px 18px;margin-bottom:16px;background:var(--hs-surface);border:1px solid var(--hs-line);border-radius:4px}
#appShell .hs-avatar{width:44px;height:44px;border-radius:6px;background:var(--hs-teal);color:var(--hs-on-teal);display:grid;place-items:center;font:600 16px/1 var(--hs-mono);flex:none}
#appShell .hs-profile-txt{flex:1;min-width:180px}
#appShell .hs-profile-name{font-weight:700}
#appShell .hs-profile-sub{font-size:13.5px;color:var(--hs-ink-2)}
#appShell .hs-callout{display:flex;align-items:center;gap:14px;width:100%;text-align:left;padding:16px 18px;margin-bottom:16px;border-radius:4px;border:1px dashed var(--hs-teal);background:var(--hs-teal-soft);color:var(--hs-ink);font-family:var(--hs-body);cursor:pointer}
#appShell .hs-callout>svg{color:var(--hs-teal-ink)}
#appShell .hs-callout>span:nth-child(2){flex:1;display:grid;gap:2px}
#appShell .hs-callout b{font-weight:700}#appShell .hs-callout span span{font-size:13.5px;color:var(--hs-ink-2)}
#appShell .hs-callout-cta{font-weight:700;color:var(--hs-teal-ink)}

/* KPIs por estado (se leen como la carátula de un plano) */
#appShell .a-stats.hs-kpis{grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--hs-line);border:1px solid var(--hs-line);border-radius:4px;overflow:hidden;margin-bottom:12px}
#appShell .hs-kpi{display:grid;gap:6px;text-align:left;padding:16px 18px 14px;background:var(--hs-surface);border:0;cursor:pointer;font-family:var(--hs-body);color:var(--hs-ink)}
#appShell .hs-kpi:hover{background:var(--hs-paper)}
#appShell .hs-kpi-lbl{display:flex;align-items:center;gap:8px;font:500 12px/1.3 var(--hs-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--hs-ink-2)}
#appShell .hs-kpi-num{font:600 34px/1 var(--hs-mono);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
#appShell .hs-kpi-bar{height:4px;background:var(--hs-paper-2);border-radius:2px;overflow:hidden}
#appShell .hs-kpi-bar span{display:block;height:100%;border-radius:2px}
#appShell .hs-dot{display:inline-block;width:8px;height:8px;border-radius:50%;flex:none}
#appShell .st-d.hs-dot,#appShell .hs-kpi-bar .st-d{background:var(--hs-st-d)}
#appShell .st-r.hs-dot,#appShell .hs-kpi-bar .st-r{background:var(--hs-st-r)}
#appShell .st-a.hs-dot,#appShell .hs-kpi-bar .st-a{background:var(--hs-st-a)}
#appShell .st-ar.hs-dot,#appShell .hs-kpi-bar .st-ar{background:var(--hs-st-ar)}
#appShell .hs-meta{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--hs-line);border:1px solid var(--hs-line);border-radius:4px;overflow:hidden;margin-bottom:28px}
#appShell .hs-meta>div{background:var(--hs-surface);padding:12px 18px;display:grid;gap:3px;min-width:0}
#appShell .hs-k{font:500 11.5px/1.3 var(--hs-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--hs-ink-2)}
#appShell .hs-v{font-size:14.5px}
#appShell .hs-v b{font-weight:600}
#appShell .hs-v-last{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline}
#appShell .hs-v-last span{font:500 12.5px/1.2 var(--hs-mono);color:var(--hs-ink-2)}
#appShell .hs-sec-hdr{display:flex;align-items:baseline;justify-content:space-between;margin:0 0 12px}
#appShell .hs-sec-hdr .a-sec-title{font-size:18px;font-weight:700;color:var(--hs-ink)}

/* Barra de búsqueda y filtros */
#appShell .hs-toolbar{display:flex;flex-wrap:wrap;gap:12px 16px;align-items:center;margin-bottom:14px}
#appShell .search-bar.hs-search{flex:1 1 320px;display:flex;align-items:center;gap:10px;margin:0;padding:0 8px 0 14px;min-height:44px;background:var(--hs-surface);border:1px solid var(--hs-line);border-radius:6px;box-shadow:none;color:var(--hs-ink-2)}
#appShell .hs-search:focus-within{border-color:var(--hs-teal);box-shadow:0 0 0 3px var(--hs-teal-soft)}
#appShell .hs-search input{flex:1;min-width:0;border:0;outline:none;background:transparent;font:400 15px/1.4 var(--hs-body);color:var(--hs-ink)}
#appShell .hs-filters{display:flex;flex-wrap:wrap;gap:6px}
#appShell .hs-filter{display:inline-flex;align-items:center;gap:8px;min-height:36px;padding:6px 12px;border-radius:999px;border:1px solid var(--hs-line);background:var(--hs-surface);color:var(--hs-ink);font:500 13.5px/1 var(--hs-body);cursor:pointer}
#appShell .hs-filter .hs-mono{font-size:12px;color:var(--hs-ink-2)}
#appShell .hs-filter.on{background:var(--hs-ink);border-color:var(--hs-ink);color:var(--hs-paper)}
#appShell .hs-filter.on .hs-mono{color:inherit;opacity:.75}

/* Tabla de proyectos */
#appShell .a-table{background:var(--hs-surface);border:1px solid var(--hs-line);border-radius:4px;box-shadow:none}
#appShell .a-th{background:var(--hs-paper-2);border-bottom:1px solid var(--hs-line);font:600 11.5px/1.3 var(--hs-mono);letter-spacing:.07em;color:var(--hs-ink-2);grid-template-columns:2fr 1.4fr .8fr 1fr 1.6fr;padding:11px 18px}
#appShell .a-tr{grid-template-columns:2fr 1.4fr .8fr 1fr 1.6fr;border-bottom:1px solid var(--hs-line-2);padding:14px 18px}
#appShell .a-tr:hover{background:var(--hs-paper)}
#appShell .a-pname{font-size:15px;font-weight:600;color:var(--hs-ink)}
#appShell .a-pid{display:flex;align-items:center;gap:8px;margin-top:3px;font:500 12.5px/1.3 var(--hs-body);color:var(--hs-ink-2)}
#appShell .hs-code{font:600 11px/1 var(--hs-mono);background:var(--hs-ink);color:var(--hs-paper);padding:3px 6px;border-radius:2px;letter-spacing:.03em}
#appShell .nota-badge{display:inline-flex;align-items:center;gap:5px;margin-top:6px;font:600 12px/1 var(--hs-body);color:var(--hs-teal-ink);background:var(--hs-teal-soft);padding:4px 7px;border-radius:3px}
#appShell .nota-badge .hs-ico{width:13px;height:13px}
#appShell .a-owner{font-size:14.5px;color:var(--hs-ink)}
#appShell .a-date{font-size:13.5px;color:var(--hs-ink-2)}
#appShell .hs-sub{font:500 12px/1.4 var(--hs-mono);color:var(--hs-ink-2)}
#appShell .hs-san{font:600 12px/1.4 var(--hs-mono);color:var(--hs-af);margin-top:2px}
#appShell .hs-status{position:relative;display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border-radius:999px;border:1px solid var(--hs-line);background:var(--hs-surface);cursor:pointer}
#appShell .hs-status select{appearance:none;-webkit-appearance:none;border:0;background:transparent;font:600 13px/1 var(--hs-body);color:var(--hs-ink);cursor:pointer;padding-right:14px;background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);background-position:calc(100% - 5px) 55%,100% 55%;background-size:5px 5px,5px 5px;background-repeat:no-repeat}
#appShell .hs-status select:focus{outline:none}
#appShell .hs-status:focus-within{border-color:var(--hs-teal);box-shadow:0 0 0 3px var(--hs-teal-soft)}
#appShell .hs-acts{display:flex;flex-wrap:wrap;gap:6px}
#appShell .a-act{display:inline-flex;align-items:center;gap:6px;min-height:34px;padding:6px 10px;border-radius:5px;border:1px solid var(--hs-line)!important;background:var(--hs-surface)!important;color:var(--hs-ink)!important;font:600 13px/1 var(--hs-body);cursor:pointer}
#appShell .a-act:hover{border-color:var(--hs-ink-2)!important}
#appShell .a-act .hs-ico{width:15px;height:15px}
#appShell .a-act.hs-act-main{background:var(--hs-teal)!important;color:var(--hs-on-teal)!important;border-color:var(--hs-teal)!important}
#appShell .a-act.hs-act-main:hover{background:var(--hs-teal-ink)!important}
#appShell .a-act.hs-act-del{color:var(--hs-bad)!important;padding:6px 8px}
#appShell .a-act.hs-act-del:hover{background:var(--hs-bad-soft)!important;border-color:var(--hs-bad)!important}
#appShell .hs-empty{padding:48px 20px;text-align:center;color:var(--hs-ink-2);display:grid;justify-items:center;gap:10px}

/* Configuración */
#appShell .hs-card{background:var(--hs-surface);border:1px solid var(--hs-line);border-radius:4px;padding:18px 20px;margin-bottom:14px}
#appShell .hs-card-k{font:500 11.5px/1.3 var(--hs-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--hs-ink-2);margin:0 0 12px}
#appShell .hs-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px}
#appShell .hs-row>div{display:grid;gap:2px}
#appShell .hs-row b{font-weight:600}
#appShell .hs-row span{font-size:13.5px;color:var(--hs-ink-2)}
#appShell .hs-foot{text-align:center;margin-top:22px;font:500 12px/1.6 var(--hs-mono);color:var(--hs-ink-2)}

/* ─────────── CALCULADORA (diseño de proyecto) ─────────── */
#appShell #calc-container{background:var(--hs-paper)}
#appShell #calc-container .app{background:var(--hs-paper)!important;font-family:var(--hs-body)}
#appShell #calc-container .hs-export{background:var(--hs-cad);border-bottom:1px solid var(--hs-cad-edge);padding:10px 20px;gap:14px}
#appShell #calc-container .hs-export-label{font:600 11.5px/1 var(--hs-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--hs-cad-teal)}
#appShell #calc-container .hs-divider{background:var(--hs-cad-edge)}
#appShell #calc-container .gen-btn{background:transparent!important;color:var(--hs-cad-text)!important;border:1px solid #2F5A62!important;border-radius:5px;font:600 12.5px/1 var(--hs-body);padding:8px 11px;box-shadow:none!important}
#appShell #calc-container .gen-btn:hover{border-color:var(--hs-cad-teal)!important;background:rgba(56,211,199,.1)!important}
#appShell #calc-container .gen-btn.btn-ambos,#appShell #calc-container .gen-btn.btn-ap-ambos{background:var(--hs-cad-teal)!important;color:#03201E!important;border-color:var(--hs-cad-teal)!important}
#appShell #calc-container .top-tabs{background:var(--hs-surface);border-bottom:1px solid var(--hs-line);padding:0 20px;gap:0}
#appShell #calc-container .top-tab{border-radius:0;padding:14px 18px;font:600 14px/1 var(--hs-body);color:var(--hs-ink-2);border-bottom:2px solid transparent;box-shadow:none;background:transparent}
#appShell #calc-container .top-tab:hover{color:var(--hs-ink);background:var(--hs-paper)}
#appShell #calc-container .top-tab.active{color:var(--hs-ink);border-bottom-color:var(--hs-teal);background:transparent}
#appShell #calc-container .panel{background:var(--hs-paper);padding:24px clamp(16px,2.5vw,32px)}
#appShell #calc-container .sec{background:var(--hs-surface);border:1px solid var(--hs-line);border-radius:4px;box-shadow:none;margin-bottom:20px;transform:none}
#appShell #calc-container .sec:hover{transform:none;box-shadow:var(--hs-shadow)}
#appShell #calc-container .sec-h{background:var(--hs-surface);border-bottom:1px solid var(--hs-line);color:var(--hs-ink);font:700 14.5px/1.3 var(--hs-body);letter-spacing:.01em;padding:14px 20px}
#appShell #calc-container .sec-h::before{width:auto;height:auto;background:none;box-shadow:none;border-radius:2px;content:"LÁMINA";font:600 10px/1 var(--hs-mono);letter-spacing:.08em;color:var(--hs-paper);background:var(--hs-ink);padding:4px 6px}
#appShell #calc-container .sec-b{padding:18px 20px}
#appShell #calc-container .lbl{color:var(--hs-ink-2);font:600 13px/1.3 var(--hs-body);letter-spacing:0}
#appShell #calc-container .inp,#appShell #calc-container .sel,#appShell #calc-container .add-sel{background:var(--hs-paper);border:1px solid var(--hs-line);border-radius:5px;color:var(--hs-ink);font:400 14px/1.3 var(--hs-body);min-height:38px;box-shadow:none}
#appShell #calc-container input[type=number].inp,#appShell #calc-container td .inp{font-family:var(--hs-mono);font-variant-numeric:tabular-nums}
#appShell #calc-container .inp:focus,#appShell #calc-container .sel:focus,#appShell #calc-container .add-sel:focus{outline:none;border-color:var(--hs-teal);box-shadow:0 0 0 3px var(--hs-teal-soft)}
#appShell #calc-container .add-bar{background:var(--hs-paper-2);border-bottom:1px solid var(--hs-line)}
#appShell #calc-container .add-btn{background:var(--hs-teal)!important;color:var(--hs-on-teal)!important;border:0!important;border-radius:5px;font:600 13px/1 var(--hs-body)}
#appShell #calc-container .fbox{background:var(--hs-paper);border:1px solid var(--hs-line);border-left:3px solid var(--hs-teal);border-radius:3px;font-family:var(--hs-mono);color:var(--hs-ink)}
#appShell #calc-container table{font-variant-numeric:tabular-nums}
#appShell #calc-container th{font-family:var(--hs-mono);letter-spacing:.04em}
#appShell #calc-container .tot-val{font-family:var(--hs-mono)}

/* ─────────── Celular: el menú pasa a riel de íconos ─────────── */
@media (max-width:760px){
  #appShell .app-sidebar,#appShell .app-sidebar.collapsed{width:60px;min-width:60px}
  #appShell .sb-logo-text,#appShell .sb-logo-sub,#appShell .sb-user-info,#appShell .sb-item-text,#appShell .sb-section-label,#appShell .sb-collapse-btn{display:none!important}
  #appShell .app-sidebar-header{padding:16px 0;justify-content:center}
  #appShell .app-sidebar-user{justify-content:center;padding:12px 0}
  #appShell .sb-nav-item,#appShell .sb-logout-btn{justify-content:center;padding:12px 0}
  #appShell .hs-page{padding:20px 14px 40px}
  #appShell .a-stats.hs-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  #appShell .hs-kpi-num{font-size:28px}
  #appShell .hs-meta{grid-template-columns:1fr}
  #appShell .a-th{display:none}
  #appShell .a-tr{grid-template-columns:1fr;gap:10px;padding:14px}
  #appShell .hs-c-date{display:flex;gap:10px;align-items:baseline}
  #appShell #calc-container .sec-b{grid-template-columns:1fr}
  #appShell #calc-container .lbl{text-align:left}
  #appShell #calc-container .hs-export{flex-wrap:wrap}
  #appShell #calc-container .top-tabs{overflow-x:auto}
}
@media (prefers-reduced-motion:reduce){#appShell *{transition:none!important}}
#appShell #calc-container .hs-export-group{background:transparent!important;border:0!important;box-shadow:none!important;padding:0}
#appShell .btn-save{background:var(--hs-teal)!important;color:var(--hs-on-teal)!important;border:0!important;border-radius:6px!important;font:600 14.5px/1 var(--hs-body)!important;box-shadow:0 8px 24px rgba(8,127,121,.3)!important}
#appShell .btn-save:hover{background:var(--hs-teal-ink)!important}

/* ─────────── Calculadora · sistema de color de un solo tono ─────────── */
/* Leyenda de estados */
#appShell #calc-container .hs-legend{display:flex;flex-wrap:wrap;gap:6px 18px;padding:9px 20px;background:var(--hs-paper);border-bottom:1px solid var(--hs-line);font:500 12.5px/1.3 var(--hs-body);color:var(--hs-ink-2)}
#appShell #calc-container .hs-legend span{display:inline-flex;align-items:center;gap:7px}
#appShell #calc-container .hs-legend i{width:14px;height:14px;border-radius:3px;border:1px solid var(--hs-line)}
#appShell #calc-container .hs-legend .lg-edit{background:var(--hs-surface);border-color:var(--hs-ink-2)}
#appShell #calc-container .hs-legend .lg-auto{background:var(--hs-paper-2)}
#appShell #calc-container .hs-legend .lg-mod{background:var(--hs-warn-soft);border-color:var(--hs-warn)}
#appShell #calc-container .hs-legend .lg-res{background:var(--hs-teal-soft);border-color:var(--hs-teal)}

/* Tablas: cabeceras neutras; el color técnico queda como raya de 3 px */
#appShell #calc-container .tbl{border-radius:0;box-shadow:none;border:1px solid var(--hs-line);border-style:solid}
#appShell #calc-container .tbl th,#appShell #calc-container .tbl thead tr,#appShell #calc-container .tbl-h{background:var(--hs-paper-2)!important;color:var(--hs-ink)!important;font:600 11.5px/1.3 var(--hs-mono)!important;letter-spacing:.05em;border-color:var(--hs-line)!important}
#appShell #calc-container .tbl th{border-bottom:1px solid var(--hs-line)!important;border-right:1px solid var(--hs-line-2)}
#appShell #calc-container th[style*="1565C0" i],#appShell #calc-container th[style*="1976D2" i]{box-shadow:inset 0 3px 0 var(--hs-af)}
#appShell #calc-container th[style*="C62828" i],#appShell #calc-container th[style*="c0392b" i],#appShell #calc-container th[style*="B71C1C" i]{box-shadow:inset 0 3px 0 var(--hs-ac)}
#appShell #calc-container th[style*="8B4513" i]{box-shadow:inset 0 3px 0 var(--hs-alc)}
#appShell #calc-container .tbl td{border-bottom:1px solid var(--hs-line-2);font-size:13.5px;color:var(--hs-ink)}
#appShell #calc-container .tbl tr:hover td{background:var(--hs-paper)}

/* Rellenos de color en línea (verdes, celestes, rosados) → neutros */
#appShell #calc-container [style*="background:#e8f5e9" i],#appShell #calc-container [style*="background:#f0fdf4" i],
#appShell #calc-container [style*="background:#e8f0fe" i],#appShell #calc-container [style*="background:#e3f2fd" i],
#appShell #calc-container [style*="background:#e0f2fe" i],#appShell #calc-container [style*="background:#f0f9ff" i],
#appShell #calc-container [style*="background:#fce4ec" i]{background:var(--hs-paper-2)!important;border-color:var(--hs-line)!important}
#appShell #calc-container [style*="background:#2255aa" i],#appShell #calc-container [style*="background:#444" i],#appShell #calc-container [style*="background:#555" i]{background:var(--hs-paper-2)!important;color:var(--hs-ink)!important}
#appShell #calc-container [style*="color:#1b5e20" i],#appShell #calc-container [style*="color:#1a3a5c" i],#appShell #calc-container [style*="color:#0c4a6e" i]{color:var(--hs-ink)!important}
#appShell #calc-container [style*="color:#217346" i],#appShell #calc-container [style*="color:#15803d" i]{color:var(--hs-teal-ink)!important}
#appShell #calc-container div[style*="border-left:3px solid #1565C0" i]{background:transparent!important;border-left-color:var(--hs-af)!important;color:var(--hs-ink)!important}

/* Celdas: editable en blanco, calculado en turquesa suave */
#appShell #calc-container .vi,#appShell #calc-container .vs{background:var(--hs-surface);border:1px solid var(--hs-line);border-radius:4px;color:var(--hs-ink);font-family:var(--hs-mono);font-variant-numeric:tabular-nums}
#appShell #calc-container .vi:focus,#appShell #calc-container .vs:focus{outline:none;border-color:var(--hs-teal);box-shadow:0 0 0 3px var(--hs-teal-soft)}
#appShell #calc-container .vc{background:var(--hs-teal-soft)!important;border:1px solid transparent!important;border-radius:4px;color:var(--hs-ink)!important;font-family:var(--hs-mono);font-variant-numeric:tabular-nums;box-shadow:none}

/* Totales QI: tarjetas blancas; el color solo en la marca del título */
#appShell #calc-container .tot-bar{background:var(--hs-paper);border-top:1px solid var(--hs-line)}
#appShell #calc-container .tot-af,#appShell #calc-container .tot-ac{background:var(--hs-surface);border:1px solid var(--hs-line);border-radius:4px;box-shadow:none}
#appShell #calc-container .tot-lbl{display:flex;align-items:center;gap:8px;font:500 11.5px/1.3 var(--hs-mono);letter-spacing:.06em;color:var(--hs-ink-2)}
#appShell #calc-container .tot-lbl::before{content:"";width:14px;height:3px;border-radius:2px;background:var(--hs-af)}
#appShell #calc-container .tot-ac .tot-lbl::before{background:var(--hs-ac)}
#appShell #calc-container .tot-val,#appShell #calc-container .tot-val.af,#appShell #calc-container .tot-val.ac{color:var(--hs-ink)!important;font:600 26px/1.1 var(--hs-mono)}
#appShell #calc-container .tot-qmp{color:var(--hs-teal-ink)!important;font:500 12.5px/1.3 var(--hs-mono)}

/* Un solo botón principal por barra */
#appShell #calc-container .add-btn.btn-cus{background:var(--hs-surface)!important;color:var(--hs-ink)!important;border:1px solid var(--hs-line)!important}
#appShell #calc-container .add-btn.btn-cus:hover{border-color:var(--hs-ink-2)!important}

/* Todas las cabeceras de la calculadora (incluye tablas sin .tbl) → neutras */
#appShell #calc-container thead th,#appShell #calc-container table th{background:var(--hs-paper-2)!important;color:var(--hs-ink)!important;font:600 11.5px/1.3 var(--hs-mono)!important;letter-spacing:.05em;border-color:var(--hs-line)!important}
#appShell #calc-container tfoot tr,#appShell #calc-container tfoot td{background:var(--hs-paper-2)!important;color:var(--hs-ink)!important;border-top-color:var(--hs-line)!important}
#appShell #calc-container tfoot span[id]{background:var(--hs-surface)!important;border:1px solid var(--hs-line)!important;font-family:var(--hs-mono)}
/* Filas de artefactos */
#appShell #calc-container .td-name{color:var(--hs-ink)!important;font-weight:600}
#appShell #calc-container .td-sym{color:var(--hs-ink-2)!important;font-family:var(--hs-mono)}
#appShell #calc-container .td-lmin{background:var(--hs-paper)!important;color:var(--hs-ink-2)!important;font-family:var(--hs-mono)}
#appShell #calc-container .a-vi{background:var(--hs-surface)!important;border:1px solid var(--hs-line)!important;border-radius:4px;color:var(--hs-ink)!important;font-family:var(--hs-mono)}
#appShell #calc-container .a-vi:focus{outline:none;border-color:var(--hs-teal)!important;box-shadow:0 0 0 3px var(--hs-teal-soft)}
#appShell #calc-container .a-vc{background:var(--hs-teal-soft)!important;border:1px solid transparent!important;border-radius:4px;color:var(--hs-ink)!important;font-family:var(--hs-mono);font-weight:600}
#appShell #calc-container .rm-btn{background:transparent!important;color:var(--hs-ink-2)!important;border:1px solid var(--hs-line)!important;border-radius:4px}
#appShell #calc-container .rm-btn:hover{color:var(--hs-bad)!important;border-color:var(--hs-bad)!important;background:var(--hs-bad-soft)!important}
#appShell #calc-container #rec-tbody td:first-child,#appShell #calc-container #rec-tbody td:first-child *{color:var(--hs-ink)!important}
#platLogin .lc-legal{font-size:13px;line-height:1.5;color:var(--hs-ink-2);margin:4px 0 10px}
#platLogin .lc-legal a{color:var(--hs-teal-ink)}