/* SIV Tecno Blinds
   ─────────────────────────────────────────────────────────────────────────
   Los tokens de marca vienen de la plataforma (Manual de Uso de Marca V25).
   SIV es el mismo sistema visto desde la fábrica: no inventa un mundo nuevo.

   Lo que sí añade son las señales de estado. Un tablero de producción tiene
   que decir "esto va tarde" sin que nadie lo lea. */

@font-face {
  font-family: "Frutiger TB";
  src: url("/fuentes/frutiger-regular.ttf") format("truetype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Frutiger TB";
  src: url("/fuentes/frutiger-bold.ttf") format("truetype");
  font-weight: 700; font-style: normal; font-display: swap;
}

:root {
  /* --- marca --- */
  --violeta:       #522D72;   /* Pantone 269 C */
  --violeta-vivo:  #6B3C93;
  --violeta-hondo: #2E1740;
  --lila:          #A78BC4;
  --bruma:         #EDE7F2;
  --plata:         #8C8A93;
  --luz:           #F0C27B;   /* solo en degradados, nunca sólido */

  /* --- superficie: neutros con sesgo al violeta, nunca gris puro --- */
  --fondo:       #FAF8FB;
  --fondo-alt:   #F2EEF6;
  --panel:       #FFFFFF;
  --borde:       #E1D8EA;
  --borde-fuerte:#CDBDDC;
  --tinta:       #24152F;
  --tinta-suave: #5E5169;

  --acento:       var(--violeta);
  --acento-hover: var(--violeta-vivo);
  --sobre-acento: #FFFFFF;

  /* --- señales de estado ---
     Derivadas para convivir con el violeta, no tomadas de otra paleta.
     Nunca van solas: siempre con texto. Aquí también trabaja gente que no
     distingue el rojo del verde. */
  --bien:        #2F7A5B;
  --bien-fondo:  #E6F2EC;
  --atender:     #B06E12;
  --atender-fondo:#FBF0DD;
  --urge:        #A32C3E;
  --urge-fondo:  #FBE9EC;

  --texto: "Frutiger TB", "Avenir Next", "Avenir", "Segoe UI", system-ui, -apple-system, sans-serif;
  --dato:  ui-monospace, "SF Mono", "Cascadia Mono", Menlo, monospace;

  --t-xs: .75rem;  --t-sm: .875rem;  --t-base: 1rem;
  --t-md: 1.25rem; --t-lg: 1.5625rem; --t-xl: 1.953rem;

  --radio: 12px;
  --radio-control: 8px;
  --barra: 232px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --fondo: #150C1D;  --fondo-alt: #1D1128;  --panel: #241634;
    --borde: #392548;  --borde-fuerte: #4C3462;
    --tinta: #F3EDF8;  --tinta-suave: #B7A6C6;
    --bruma: #2B1B3A;  --plata: #948EA0;
    --acento: #B98FE0; --acento-hover: #CFB0EC; --sobre-acento: #1A0F24;
    --bien: #6BC79C;   --bien-fondo: #16302A;
    --atender: #E0A54A;--atender-fondo: #352713;
    --urge: #E8798A;   --urge-fondo: #38161E;
  }
}
:root[data-tema="oscuro"] {
  --fondo: #150C1D;  --fondo-alt: #1D1128;  --panel: #241634;
  --borde: #392548;  --borde-fuerte: #4C3462;
  --tinta: #F3EDF8;  --tinta-suave: #B7A6C6;
  --bruma: #2B1B3A;  --plata: #948EA0;
  --acento: #B98FE0; --acento-hover: #CFB0EC; --sobre-acento: #1A0F24;
  --bien: #6BC79C;   --bien-fondo: #16302A;
  --atender: #E0A54A;--atender-fondo: #352713;
  --urge: #E8798A;   --urge-fondo: #38161E;
}

*, *::before, *::after { box-sizing: border-box; }

html { color-scheme: light dark; }
:root[data-tema="claro"]  { color-scheme: light; }
:root[data-tema="oscuro"] { color-scheme: dark; }

body {
  margin: 0;
  font-family: var(--texto);
  font-size: var(--t-base);
  line-height: 1.5;
  color: var(--tinta);
  background: var(--fondo);
  -webkit-font-smoothing: antialiased;
}

/* Las superficies que no dibujamos también llevan la marca. Dejarlas en su
   valor por omisión es la señal más barata de que una página se ensambló. */
::selection { background: var(--bruma); color: var(--tinta); }
:root[data-tema="oscuro"] ::selection { background: var(--violeta-vivo); color: #fff; }
* { caret-color: var(--acento); }
* { scrollbar-width: thin; scrollbar-color: var(--borde-fuerte) transparent; }
*::-webkit-scrollbar { width: 11px; height: 11px; }
*::-webkit-scrollbar-thumb {
  background: var(--borde-fuerte); border-radius: 99px;
  border: 3px solid var(--fondo);
}
*::-webkit-scrollbar-thumb:hover { background: var(--lila); }
*::-webkit-scrollbar-track { background: transparent; }

:focus-visible {
  outline: 2px solid var(--acento);
  outline-offset: 2px;
  border-radius: 4px;
}

a { color: var(--acento); text-underline-offset: 3px; text-decoration-thickness: 1px; }

h1, h2, h3 { margin: 0; font-weight: 700; letter-spacing: -.02em; text-wrap: balance; }
h1 { font-size: var(--t-lg); }
h2 { font-size: var(--t-md); }
h3 { font-size: var(--t-base); }
p  { margin: 0; }

/* ══ armazón ══════════════════════════════════════════════════════════════ */

.armazon { display: grid; grid-template-columns: var(--barra) 1fr; min-height: 100vh; }

.barra {
  background: var(--violeta-hondo);
  color: #EFE7F5;
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh;
}
.barra__marca {
  padding: 22px 20px 18px;
  display: flex; align-items: center; gap: 10px;
  border-bottom: 1px solid rgba(255,255,255,.1);
}
.barra__marca img { height: 26px; width: auto; }
.barra__etiqueta {
  font-size: var(--t-xs); letter-spacing: .14em; text-transform: uppercase;
  color: var(--lila); font-weight: 700;
}
.barra nav { padding: 12px 10px; display: grid; gap: 2px; }
.barra a {
  display: flex; align-items: center; gap: 11px;
  padding: 9px 11px; border-radius: var(--radio-control);
  color: #DCCFE8; text-decoration: none; font-size: var(--t-sm);
  transition: background .12s ease, color .12s ease;
}
.barra a:hover { background: rgba(255,255,255,.07); color: #fff; }
.barra a[aria-current="page"] { background: var(--violeta); color: #fff; font-weight: 700; }
.barra a svg { width: 18px; height: 18px; flex: none; }
.barra__pie {
  margin-top: auto; padding: 14px 16px;
  border-top: 1px solid rgba(255,255,255,.1);
  font-size: var(--t-xs); color: var(--lila);
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.barra__pie a { padding: 0; color: var(--lila); }
.barra__pie a:hover { background: none; text-decoration: underline; }

.lienzo { min-width: 0; display: flex; flex-direction: column; }

.encabezado {
  padding: 26px 32px 18px;
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 20px; flex-wrap: wrap;
}
.encabezado p { color: var(--tinta-suave); font-size: var(--t-sm); margin-top: 3px; }
.contenido { padding: 0 32px 56px; }

/* ══ paneles y tablas ═════════════════════════════════════════════════════
   La pantalla de trabajo es una tabla. Tarjetas iguales de icono + título
   esconden la comparación, que es justo para lo que se entra aquí. */

.panel {
  background: var(--panel);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  overflow: hidden;
}
.panel + .panel { margin-top: 20px; }
.panel__cabeza {
  padding: 15px 18px;
  border-bottom: 1px solid var(--borde);
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
}
.panel__cabeza p { color: var(--tinta-suave); font-size: var(--t-sm); }
.panel__cuerpo { padding: 18px; }

table { width: 100%; border-collapse: collapse; font-size: var(--t-sm); }
thead th {
  text-align: left; padding: 10px 14px;
  font-size: var(--t-xs); font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase;
  color: var(--tinta-suave); background: var(--fondo-alt);
  border-bottom: 1px solid var(--borde);
  position: sticky; top: 0; z-index: 1;
}
tbody td { padding: 11px 14px; border-bottom: 1px solid var(--borde); vertical-align: middle; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: var(--fondo-alt); }

/* Una columna de importes que no alinea es una columna que no se lee. */
.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.clave { font-family: var(--dato); font-size: .8125rem; color: var(--tinta-suave); }
.principal { font-weight: 700; }
.apagado { color: var(--tinta-suave); }

/* ══ estado ═══════════════════════════════════════════════════════════════ */

.estado {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 9px 3px 7px; border-radius: 99px;
  font-size: var(--t-xs); font-weight: 700; white-space: nowrap;
  background: var(--bruma); color: var(--violeta-hondo);
}
:root[data-tema="oscuro"] .estado { color: var(--lila); }
.estado::before { content: ""; width: 6px; height: 6px; border-radius: 99px; background: currentColor; }
.estado--bien    { background: var(--bien-fondo);    color: var(--bien); }
.estado--atender { background: var(--atender-fondo); color: var(--atender); }
.estado--urge    { background: var(--urge-fondo);    color: var(--urge); }

/* ══ controles ════════════════════════════════════════════════════════════ */

.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 9px 17px; border: 1px solid transparent; border-radius: var(--radio-control);
  font: 700 var(--t-sm)/1 var(--texto); cursor: pointer;
  background: var(--acento); color: var(--sobre-acento);
  transition: background .12s ease, transform .06s ease;
}
/* El hover sale del acento del tema, no de un violeta fijo: en oscuro el
   texto del botón es oscuro, y sobre violeta-vivo daba 2.4:1. */
.boton:hover { background: var(--acento-hover); }
.boton:active { transform: translateY(1px); }
.boton:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.boton svg { width: 16px; height: 16px; }
.boton--tenue {
  background: var(--panel); color: var(--tinta); border-color: var(--borde-fuerte);
}
.boton--tenue:hover { background: var(--fondo-alt); }

label { display: block; font-size: var(--t-xs); font-weight: 700; color: var(--tinta-suave);
        letter-spacing: .05em; text-transform: uppercase; margin-bottom: 6px; }

input, select, textarea {
  width: 100%; padding: 9px 11px;
  font: 400 var(--t-base)/1.4 var(--texto); color: var(--tinta);
  background: var(--panel); border: 1px solid var(--borde-fuerte);
  border-radius: var(--radio-control);
}
input[type="number"] { font-variant-numeric: tabular-nums; }
input:hover, select:hover { border-color: var(--lila); }
input::placeholder { color: var(--plata); }

.campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; }
.campos--anchos { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

/* ══ cifras que encabezan una pantalla ════════════════════════════════════
   No son tarjetas: es una tira de datos con separador. Cuatro tarjetas
   iguales con un número grande son la plantilla de siempre. */

.cifras { display: flex; flex-wrap: wrap; gap: 0; margin-bottom: 20px;
          border: 1px solid var(--borde); border-radius: var(--radio); background: var(--panel); }
.cifra { padding: 15px 22px; flex: 1 1 150px; border-right: 1px solid var(--borde); }
.cifra:last-child { border-right: 0; }
.cifra dt { font-size: var(--t-xs); color: var(--tinta-suave); letter-spacing: .05em;
            text-transform: uppercase; font-weight: 700; }
.cifra dd { margin: 4px 0 0; font-size: var(--t-md); font-weight: 700;
            font-variant-numeric: tabular-nums; }
.cifra--urge dd { color: var(--urge); }

/* ══ vacío, carga, error ══════════════════════════════════════════════════ */

.vacio { padding: 52px 24px; text-align: center; color: var(--tinta-suave); }
.vacio svg { width: 34px; height: 34px; color: var(--borde-fuerte); margin-bottom: 12px; }
.vacio h3 { margin-bottom: 5px; color: var(--tinta); }
.vacio p { font-size: var(--t-sm); max-width: 44ch; margin: 0 auto; }

.aviso {
  padding: 13px 16px; border-radius: var(--radio-control);
  font-size: var(--t-sm); display: flex; gap: 10px; align-items: flex-start;
  background: var(--urge-fondo); color: var(--urge);
}
.aviso svg { width: 17px; height: 17px; flex: none; margin-top: 2px; }
.aviso--atender { background: var(--atender-fondo); color: var(--atender); }
.aviso strong { display: block; }

.cargando { display: inline-block; width: 15px; height: 15px; border-radius: 99px;
            border: 2px solid currentColor; border-top-color: transparent;
            animation: gira .7s linear infinite; }
@keyframes gira { to { transform: rotate(360deg); } }

/* El único momento de movimiento: la fila que acaba de cambiar se marca para
   que el ojo la encuentre. Nada de entradas escalonadas en una tabla que
   alguien consulta cien veces al día. */
@keyframes asoma { from { background: var(--bruma); } to { background: transparent; } }
.recien { animation: asoma 1.1s cubic-bezier(.16,1,.3,1); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ══ entrar ═══════════════════════════════════════════════════════════════ */

.entrar {
  min-height: 100vh; display: grid; place-items: center; padding: 24px;
  background:
    radial-gradient(120% 80% at 50% -20%, rgba(240,194,123,.16), transparent 60%),
    linear-gradient(170deg, var(--violeta-hondo), #1B0E26 70%);
}
.entrar__caja { width: 100%; max-width: 372px; }
.entrar__marca { text-align: center; margin-bottom: 26px; }
.entrar__marca img { height: 40px; width: auto; }
.entrar__panel {
  background: var(--panel); border-radius: var(--radio); padding: 28px;
  box-shadow: 0 18px 44px -12px rgba(20,8,32,.5);
}
.entrar__panel h1 { font-size: var(--t-md); margin-bottom: 4px; }
.entrar__panel > p { color: var(--tinta-suave); font-size: var(--t-sm); margin-bottom: 22px; }
.entrar__panel label { margin-top: 15px; }
.entrar__panel label:first-of-type { margin-top: 0; }
.entrar__panel .boton { width: 100%; margin-top: 22px; padding: 11px; }
.entrar__pie { text-align: center; margin-top: 18px; font-size: var(--t-xs); color: var(--lila); }

/* ══ celular ══════════════════════════════════════════════════════════════
   En el taller se consulta con una mano. La barra baja, la tabla se vuelve
   fichas: una tabla de ocho columnas en 375px no se lee, se adivina. */

@media (max-width: 860px) {
  .armazon { grid-template-columns: 1fr; }
  .barra {
    position: fixed; bottom: 0; top: auto; height: auto; width: 100%;
    z-index: 20; flex-direction: row;
    border-top: 1px solid rgba(255,255,255,.12);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .barra__marca, .barra__pie { display: none; }
  .barra nav { flex: 1; display: flex; padding: 6px 4px; }
  .barra a {
    flex: 1; flex-direction: column; gap: 3px; padding: 7px 2px;
    font-size: 11px; text-align: center; min-height: 50px; justify-content: center;
  }
  .lienzo { padding-bottom: 68px; }
  .encabezado { padding: 18px 16px 12px; }
  .contenido { padding: 0 16px 24px; }
  /* En columna, `flex: 1 1 150px` estira cada cifra hasta llenar el alto.
     Aquí son cuatro datos, no cuatro paneles. */
  .cifras { flex-direction: column; }
  .cifra { flex: none; padding: 12px 16px;
           border-right: 0; border-bottom: 1px solid var(--borde);
           display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
  .cifra:last-child { border-bottom: 0; }
  .cifra dd { margin: 0; }

  /* Lado a lado en 375px, el título y su explicación se parten en tres
     renglones cada uno y ninguno se lee. */
  .panel__cabeza { flex-direction: column; align-items: flex-start; gap: 3px; }

  table, thead, tbody, tr, td { display: block; }
  thead { display: none; }
  tbody tr {
    border: 1px solid var(--borde); border-radius: var(--radio-control);
    padding: 11px 13px; margin-bottom: 9px; background: var(--panel);
  }
  tbody td { border: 0; padding: 4px 0; display: flex; justify-content: space-between; gap: 14px; }
  tbody td::before {
    content: attr(data-col); font-size: var(--t-xs); font-weight: 700;
    letter-spacing: .05em; text-transform: uppercase; color: var(--tinta-suave);
  }
  tbody td.num { text-align: right; }
}