/* =====================================================================
   ATLAS Solar Support · identidad visual del sistema
   Fuente: Manual de Identidad Corporativa ATLAS SS 2026.
   Se carga AL FINAL en todas las páginas: aquí se cambian colores,
   letra y formas de todo el sistema en un solo lugar.
   ===================================================================== */

/* Tipografía: el manual pide Technica (de paga, sin licencia web).
   Montserrat es la equivalente gratuita más cercana. Si se consigue
   Technica en .woff2 con licencia web, solo se cambia --font aquí. */
@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,400..900;1,800..900&display=swap");
/* Íconos: Google Material Symbols, redondeados y con relleno (manual, pág. 18) */
@import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..24,500,1,0&icon_names=apps,badge,build,calendar_month,cloud_download,construction,description,design_services,event_available,folder_open,group,history,home,input,inventory_2,key,local_shipping,lock,logout,manage_accounts,precision_manufacturing,receipt_long,refresh,request_quote,sell,space_dashboard,summarize,trending_up,verified&display=block");

:root{
  /* Primarios (pág. 13) */
  --atlas-oscuro:#3F7652;
  --atlas-claro:#689962;
  --atlas-degradado:linear-gradient(180deg,#689962 0%,#3F7652 100%);
  /* Secundarios: marcas de estructuras (pág. 14) */
  --fortia:#007197;--fortia-2:#008DC0;
  --dorico:#008080;--dorico-2:#739D8B;
  --suma:#9B8C4B;--suma-2:#5E5124;
  /* Neutros (pág. 15) */
  --n-claro:#D9D9D9;--n-azul:#94A8AA;--n-medio:#737373;--n-oscuro:#1A1A1A;

  /* Tokens que usan las páginas */
  --ink:#1A1A1A;--ink-2:#262626;--ink-3:#363636;
  --bg:#F2F4F3;--card:#FFFFFF;--line:#D9D9D9;--line-2:#ECEEED;
  --fg:#1A1A1A;--muted:#737373;
  --accent:#3F7652;--accent-h:#33613F;
  --brand:#689962;--sun:#689962;--sol:#9B8C4B;
  --ok:#3F7652;--ok-soft:#E8F1EA;
  --r:10px;--r-s:6px;
  --shadow:0 1px 2px rgba(26,26,26,.06),0 8px 24px -14px rgba(26,26,26,.22);
  --font:"Montserrat",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --chaflan:10px;
}
body{font-family:var(--font);letter-spacing:-.005em}
b,strong{font-weight:700}
input,select,textarea,button{font-family:var(--font)}
input:focus,select:focus,textarea:focus{box-shadow:0 0 0 3px rgba(63,118,82,.18)}
:focus-visible{outline-color:var(--atlas-claro)}

/* Formas del manual (pág. 19): rectángulo con esquinas en chaflán */
.chaflan{clip-path:polygon(0 0,calc(100% - var(--chaflan)) 0,100% var(--chaflan),100% calc(100% - var(--chaflan)),calc(100% - var(--chaflan)) 100%,0 100%)}
.chaflan-4{clip-path:polygon(var(--chaflan) 0,calc(100% - var(--chaflan)) 0,100% var(--chaflan),100% calc(100% - var(--chaflan)),calc(100% - var(--chaflan)) 100%,var(--chaflan) 100%,0 calc(100% - var(--chaflan)),0 var(--chaflan))}

/* Íconos */
.ico{font-family:"Material Symbols Rounded";font-weight:normal;font-style:normal;font-size:20px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;direction:ltr;-webkit-font-smoothing:antialiased;font-feature-settings:"liga";flex:none;width:1em;overflow:hidden;vertical-align:-4px}

/* Lema "SMART N SIMPLE" (Technica Black Italic → Montserrat 900 itálica) */
.sns{font-weight:900;font-style:italic;letter-spacing:.01em;text-transform:uppercase;white-space:nowrap}
.sns i{font-style:italic;color:var(--atlas-claro)}
.pie-marca{text-align:center;padding:8px 16px 28px;font-size:15px;color:var(--n-oscuro)}
.pie-marca .muted{display:block;font-style:normal;font-weight:500;font-size:12px;margin-top:4px;letter-spacing:0;text-transform:none}

/* Botones */
.btn{font-weight:600}
.btn.pri,.pri{background:var(--accent);border-color:var(--accent)}
.btn.pri:hover:not(:disabled){background:var(--accent-h);border-color:var(--accent-h)}
.btn .ico{font-size:18px;margin-right:2px}

/* Etiquetas */
.tag.sku{background:#E8F1EA;color:var(--atlas-oscuro);font-weight:700}

/* Indicador oscuro (como las piezas de redes del manual) */
.kpi.osc,.kpis .kpi:first-child{background:var(--n-oscuro);border-color:var(--n-oscuro)}
.kpi.osc .t,.kpis .kpi:first-child .t{color:var(--n-azul)}
.kpi.osc .n,.kpis .kpi:first-child .n{color:var(--atlas-claro)}
.kpi .n{font-weight:800;letter-spacing:-.02em}

/* ---------- Barra superior y encabezado (Ventas, Admin, Ingeniería, Panel) ---------- */
.top{background:var(--n-oscuro)}
.top .logo{display:block;height:34px;width:auto}
.marca{gap:0}
.top .btn{display:inline-flex;align-items:center;gap:4px}
.hero{position:relative;overflow:hidden;background:var(--n-oscuro)}
.hero::after{content:"";position:absolute;right:-40px;top:-30px;width:300px;height:380px;background:url("isotipo.svg") no-repeat center/contain;opacity:.09;pointer-events:none;transform:rotate(-8deg)}
.hero-in{position:relative;z-index:1}
.hero h1{font-weight:900;text-transform:uppercase;letter-spacing:.01em}
.hero h1::before{content:"";display:inline-block;width:10px;height:.8em;margin-right:12px;background:var(--atlas-degradado);vertical-align:-.04em;clip-path:polygon(0 0,100% 0,100% calc(100% - 4px),calc(100% - 4px) 100%,0 100%)}
.hero p{color:var(--n-azul)}
.tabs button{display:inline-flex;align-items:center;gap:7px;font-weight:600;color:#BDBDBD}
.tabs button .ico{font-size:19px;color:var(--atlas-claro)}
.tabs button.on{background:var(--bg);color:var(--n-oscuro);font-weight:700}
.tabs button.on .ico{color:var(--atlas-oscuro)}

/* ---------- Operaciones: barra lateral ---------- */
.side{background:var(--n-oscuro)}
.side .brand{padding:6px 10px 24px}
.side .brand .logo{display:block;width:100%;max-width:188px;height:auto}
.side button.nav{display:flex;align-items:center;gap:10px;font-weight:500}
.side button.nav .ico{font-size:20px;color:var(--n-medio);transition:color .2s}
.side button.nav:hover .ico,.side button.nav.on .ico{color:var(--atlas-claro)}
.side button.nav.on{font-weight:700}
.side button.nav.on::before{background:var(--atlas-degradado)}
.side .sns{display:block;font-size:12.5px;color:#E6E6E6;padding:16px 12px 2px}
.topbar h1{font-weight:900;text-transform:uppercase;letter-spacing:.01em;color:var(--n-oscuro)}
.topbar h1::before{content:"";display:inline-block;width:9px;height:.8em;margin-right:12px;background:var(--atlas-degradado);vertical-align:-.04em;clip-path:polygon(0 0,100% 0,100% calc(100% - 4px),calc(100% - 4px) 100%,0 100%)}

/* ---------- Panel central ---------- */

.mod .ico-box{background:#E8F1EA;color:var(--atlas-oscuro)}
.mod .ico-box .ico{font-size:26px;vertical-align:0}
.mod.destacado{background:var(--n-oscuro);border-color:var(--n-oscuro)}
.mod.destacado .ico-box{background:var(--ink-3);color:var(--atlas-claro)}
.mod.destacado .pie,.mod.destacado .chip-estado{color:var(--atlas-claro)}
.mod h2{font-weight:800}
.mod.destacado{clip-path:polygon(0 0,calc(100% - 18px) 0,100% 18px,100% 100%,0 100%)}

/* ---------- Inicio de sesión (portada del manual) ---------- */
.login .panel{position:relative;overflow:hidden;background:var(--atlas-degradado);justify-content:center;align-items:flex-start;gap:28px}
.login .panel::before{content:"";position:absolute;left:44px;top:0;bottom:0;width:58px;background:rgba(26,26,26,.18)}
.login .panel::after{content:"";position:absolute;right:-90px;bottom:-60px;width:420px;height:560px;background:url("isotipo.svg") no-repeat center/contain;filter:brightness(.55);opacity:.45;transform:rotate(-10deg);pointer-events:none}
.login .panel>*{position:relative;z-index:1}
.login .panel .logo{display:block;width:min(440px,78%);height:auto;margin-left:58px;animation:sube .8s var(--ease) both}
.login .panel .s{margin:0 0 0 58px;color:rgba(255,255,255,.86);font-size:16.5px;max-width:34ch;animation:sube .8s .12s var(--ease) both}
.login .panel .sns{position:absolute;left:0;right:0;bottom:30px;text-align:center;font-size:20px;color:#fff}
.login .panel .sns i{color:var(--n-oscuro)}
.login .areas{margin-left:58px}
.login .areas span{border-color:rgba(255,255,255,.35);color:#fff;background:rgba(26,26,26,.12)}
.login h2{font-weight:900;text-transform:uppercase;letter-spacing:.01em}
.login .forma .isotipo-movil{display:none}

@media (max-width:860px){
  .login .panel{min-height:240px;padding:28px 22px 64px}
  .login .panel::before{display:none}
  .login .panel .logo,.login .panel .s,.login .areas{margin-left:0}
  .login .panel::after{width:220px;height:290px;right:-60px;bottom:-40px}
  .login .panel .sns{bottom:18px;font-size:16px}
  .side .brand .logo{width:118px}
  .side .sns{display:none}
  .top .logo{height:28px}
  .hero::after{width:180px;height:230px}
}
@media (max-width:760px){.top .btn .txt{display:none}}

/* ---------- Documentos impresos: cotización y ficha técnica ---------- */
.membrete{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;padding-bottom:14px;border-bottom:4px solid transparent;border-image:var(--atlas-degradado) 1}
.membrete .logo{height:58px;width:auto;display:block}
.membrete .dato{text-align:right;font-size:12px;color:var(--n-medio);line-height:1.5}
.membrete h2{margin:0 0 4px;font-weight:900;font-size:21px;text-transform:uppercase;color:var(--atlas-oscuro);letter-spacing:.01em}
.doc-pie{margin-top:30px;padding-top:12px;border-top:2px solid var(--atlas-oscuro);display:flex;justify-content:space-between;align-items:center;gap:16px;font-size:11.5px;color:var(--n-medio);flex-wrap:wrap}
.doc-pie .sns{font-size:14px;color:var(--n-oscuro)}
.doc table th{background:var(--atlas-oscuro)!important;color:#fff!important;border-color:var(--atlas-oscuro)!important}
@media print{
  .doc table th{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .membrete{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}
.hero .sol{display:none}
.mod.prox .ico-box{background:var(--line-2);color:var(--muted)}

/* ---------- Operaciones: etiquetas de movimientos y calendario con la paleta oficial ---------- */
.b.p{background:var(--atlas-oscuro)}.b.e{background:var(--fortia)}.b.v{background:var(--suma)}
.m-ent{background:#E1EEF3;color:var(--fortia)}
.m-prod{background:#E8F1EA;color:var(--atlas-oscuro)}
.m-sal{background:#F2EEDF;color:var(--suma-2)}
.chip.on{background:var(--n-oscuro);border-color:var(--n-oscuro)}
.chip.m-ent.on{background:var(--fortia);border-color:var(--fortia)}
.chip.m-prod.on{background:var(--atlas-oscuro);border-color:var(--atlas-oscuro)}
.chip.m-sal.on{background:var(--suma-2);border-color:var(--suma-2)}
.cant.mas{color:var(--atlas-oscuro)}.cant.menos{color:var(--suma-2)}
.side .usuario{color:var(--n-medio)}