/* ============================================================================
   MARCA «TINTA» — capa de tokens scoped (portal / backoffice de la flota)
   ============================================================================

   Gemela de instance/public/marca/tinta.css. Misma mecánica: redefine los
   tokens que portal/public/brand.css declara en :root, todo dentro de
   `html[data-marca="tinta"]`, cero selectores de componente. Sin el atributo
   en <html> esta hoja no aplica nada.

   POR QUÉ NO ES UN COPY-PASTE. El brand.css del portal es un subconjunto del
   de instance: NO declara --ch-whatsapp / --ch-instagram, --warn-dot,
   --origen-* ni la escala --mvp-*, porque el backoffice no tiene bandeja de
   canales, agenda ni vistas clínicas. Redefinir acá un token que su brand.css
   nunca declaró sería inventar API: el día que portal.css lo consumiera
   heredaría un valor que en modo clásico no existe, y el toggle dejaría de
   ser reversible. Así que esta hoja cubre exactamente los tokens que el
   portal ya tiene. Los --adm-* propios de portal.css tampoco se tocan: si
   alguno lleva un hex literal, se tokeniza allá (fase 2 del plan), no acá.

   Otra diferencia real: el .btn del portal se pinta con var(--o), no con
   --action-grad. Redefinimos --action-* igual —existen y los lee el resto de
   la hoja— pero el botón primario del portal seguirá siendo el color de
   Giraffos hasta que la fase 2 lo mueva a grafito. Es intencional: esta capa
   no cambia reglas, solo valores.

   REGLA DURA DE LIMA (idéntica a instance): #C6FF4D sobre claro da 1.18:1.
   Nunca texto ni icono fino sobre claro. Solo relleno de bloque/chip/punto
   con Tinta encima, o chispa dentro del botón Tinta. No hay «lima oscuro»
   para texto: la variante oliva no pega con la base.
   ========================================================================== */

/* Geist (SIL OFL) — autohospedada; la CSP prohíbe CDNs. Rango 100-900 porque
   el diseño usa el peso intermedio 650 y una fuente estática lo redondearía a
   700. Fuera del scope porque @font-face no admite selector: declarar la
   familia no la aplica a nadie. */
@font-face {
  font-family: "Geist";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/fonts/geist-variable.woff2") format("woff2");
}

html[data-marca="tinta"] {
  /* ---- BASE ---------------------------------------------------------------
     Papel cálido neutro en lugar del celeste clínico. El lienzo sigue siendo
     el único degradado a pantalla completa. Se conserva la GEOMETRÍA propia
     del portal (el halo del portal siempre fue más ancho que el de instance
     porque el backoffice tiene menos chrome y más superficie vacía), pero con
     una sola capa de acento: el glow de Lima arriba a la derecha. Es relleno
     ambiental al 22%, no texto: uso válido de Lima. */
  --bg: #F4F4F2;
  --bg-grad:
    radial-gradient(95% 90% at 100% 0%, color-mix(in srgb, #C6FF4D 22%, transparent), transparent 70%),
    linear-gradient(180deg, #FFFFFF 0%, #F4F4F2 100%);
  --surface: #FFFFFF;
  --paper: #F4F4F2;
  --line: #DCDCD8;
  --rail: linear-gradient(180deg, #FFFFFF 0%, #F8F8F6 100%);
  --rail-line: #DCDCD8;
  --navy: #0D1117;      /* Tinta: títulos y cifras — 17.2:1 sobre el papel */
  --slate: #4B5563;     /* cuerpo secundario — 6.9:1 sobre papel */
  --sl: #6E7781;        /* terciario y etiquetas, temperatura fría */

  /* ---- ACCIÓN -------------------------------------------------------------
     Grafito del manual: del panel oscuro secundario (#161B22) a Tinta pura.
     La chispa pasa a Lima — única Lima «fina» permitida, y va sobre oscuro
     (16:1). */
  --action: #0D1117;
  --action-grad: linear-gradient(135deg, #161B22 0%, #0D1117 100%);
  --action-text: #FFFFFF;
  --action-spark: #C6FF4D;
  --switch-off: #D6D6D6;

  /* ---- CLARA · EL AGENTE --------------------------------------------------
     NO SE TOCAN:
       --o / --od / --o-soft → los sobreescribe el client pack en caliente;
         acá además pintan el botón primario del portal. Redefinirlos sería
         pisar la marca del cliente con la nuestra.
       --ac / --sf / --tx → alias; heredan solos.
       --agent-grad / --agent-ink → la piel de Clara.
     --o-soft se deriva con color-mix sobre var(--surface), así que al mover
     --surface a blanco puro se recalcula solo. */

  /* ---- ESTADOS ------------------------------------------------------------
     Verde confirma, ámbar espera, rojo es urgencia: los ejes de estado no se
     reemplazan por Lima (son información distinta). Solo se recalibran hacia
     una temperatura más fría que conviva con Tinta, y se verifican como texto
     sobre su propio -soft, que es como los usan las pills.
     OJO fase 2: las .pill del brand.css del portal todavía llevan hex
     literales para su fondo y borde (#f0fdf4, #bbf0cd, #fffbeb…), así que
     hasta que se tokenicen, esos fondos NO siguen a esta capa. El color de
     texto sí. Los -soft de acá quedan calibrados para cuando se arregle. */
  --ok: #1F6B45;    --ok-soft: #E6F4EA;   /* 5.7:1 */
  --ok-bar: linear-gradient(90deg, #A8DCC2 0%, #4E9E76 100%);
  --ok-dot: #2E8B5C;   /* punto de 7 px: necesita más luz que el verde de texto */
  --warn: #8A5A16;  --warn-soft: #FBF0D8; /* 5.2:1 */
  --err: #B02A2E;   --err-soft: #FCE7E7;  /* 5.5:1 */
  /* --err-spark no se redefine: vive sobre el botón grafito y con Tinta como
     base queda aún más contrastado. */

  /* ---- TILES ---------------------------------------------------------------
     El manual es minimalista: los cuatro pastel de la paleta anterior se ven
     de juguete junto a Tinta. Se bajan a una familia sobria conservando el
     orden de lectura (urgente → tranquilo).
       1 cálido leve · 2 lima (relleno pálido con texto Tinta: 18:1, el uso
       canónico del acento) · 3 gris frío · 4 papel
     Los -deco neutros van con ≥4.5:1 sobre blanco por si el portal los usa
     como color de texto en una leyenda. */
  --tile-1: linear-gradient(135deg, #FFFAF7 0%, #F2DCD2 100%); --tile-1-deco: #9E6047;
  --tile-2: linear-gradient(135deg, #F2FFD6 0%, #DDF5A6 100%); --tile-2-deco: #C6FF4D;
  --tile-3: linear-gradient(135deg, #F7F8F9 0%, #D9DEE4 100%); --tile-3-deco: #6B7480;
  --tile-4: linear-gradient(135deg, #FFFFFF 0%, #EAE7DF 100%); --tile-4-deco: #7A7368;

  /* ---- WALLPAPER ----------------------------------------------------------
     --wall-1/2/3 son alias de los -deco y heredan solos; se verificó que los
     tres sigan distinguibles por tono Y luminancia (terracota / gris frío /
     Lima), que era el riesgo de bajar los tiles a neutros. Tampoco se tocan
     --accent-teal ni --c-*: son alias de --navy / --slate / --paper. */

  /* ---- RADII --------------------------------------------------------------
     Esquinas contenidas: 20px sobre una tarjeta densa de backoffice se lee
     blando. Baja toda la escala en bloque para no alterar la relación entre
     tarjeta / inset / chip. --radius-pill se queda: una pill a 14px deja de
     ser pill. */
  --radius: 14px;
  --radius-sm: 10px;
  --radius-xs: 6px;
  --radius-lg: 18px;

  /* ---- TIPOGRAFÍA ---------------------------------------------------------
     Geist variable; el fallback repite el de brand.css. --ls-label baja de
     .124em a .10em porque Geist ya tiene la caja más ancha y las etiquetas de
     10px del portal se abrían tanto que dejaban de leerse como palabra. */
  --font: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ls-label: .10em;

  /* ---- ELEVACIÓN ----------------------------------------------------------
     Más planas: con --navy en #0D1117 puro, el mismo porcentaje de sombra
     pesa mucho más que sobre #212328 y las tarjetas quedaban sucias. */
  --shadow-sm: 0 1px 2px color-mix(in srgb, var(--navy) 10%, transparent);
  --shadow: 0 1px 2px color-mix(in srgb, var(--navy) 6%, transparent),
            0 8px 24px color-mix(in srgb, var(--navy) 8%, transparent);
  --shadow-lg: 0 1px 2px color-mix(in srgb, var(--navy) 6%, transparent),
               0 16px 40px color-mix(in srgb, var(--navy) 12%, transparent);
  /* Foco: hueco de la superficie + anillo de Tinta. NO Lima: un anillo fino
     de Lima sobre blanco es el caso que la regla dura prohíbe, y el foco es
     accesibilidad, no adorno. */
  --focus-ring: 0 0 0 2px var(--surface), 0 0 0 4px var(--navy);
}

/* Única regla que no es un token, documentada por eso: `font-variant-numeric`
   no tiene token en brand.css. El manual pide cifras tabulares (las columnas
   de la flota tienen que alinearse verticalmente) y Geist trae la variante.
   Se aplica una vez en <body> y se hereda; no toca ningún componente. */
html[data-marca="tinta"] body { font-variant-numeric: tabular-nums; }

/* ============================================================================
   FASE 2 — TOKENS DEL BACKOFFICE (--adm-*)
   ============================================================================
   La cabecera de arriba decía: «Los --adm-* propios de portal.css tampoco se
   tocan: si alguno lleva un hex literal, se tokeniza allá (fase 2 del plan),
   no acá». Eso ya se hizo — portal.css no tiene un solo hex fuera de un
   comentario y los valores viven en el :root de brand.css. Este bloque es la
   otra mitad: darles su valor Tinta.

   Sigue siendo redefinición de tokens, no de reglas. Lo que hay más abajo, en
   la sección de OVERRIDES, es la excepción acordada y va aparte.
   ========================================================================== */
html[data-marca="tinta"] {
  /* Tiles de «Instancias»: se enganchan a la familia sobria que esta hoja ya
     definió para --tile-1..4, en vez de repetir sus hex. El reparto sigue el
     SIGNIFICADO de cada tile, no el nombre heredado del color:
       activas   → Lima pálido con cifra Tinta (17.9:1). Es el único positivo
                   de la fila y el uso canónico del acento: relleno, no letra.
       usuarios  → gris frío (dato neutro)
       conexiones→ papel (dato neutro y de menor peso)
       pausadas  → cálido leve (llama la atención sin ser un estado de error;
                   el rojo sigue reservado a --err).
     Los nombres de clase quedan «rosa/menta/lila/ámbar» a propósito: los emite
     views/clientes.js y renombrarlos es un cambio de JS que no aporta nada. */
  --adm-tile-menta: var(--tile-2);
  --adm-tile-lila:  var(--tile-3);
  --adm-tile-ambar: var(--tile-4);
  --adm-tile-rosa:  var(--tile-1);

  /* Tintes del avatar de cliente. Se conservan CINCO tintes distinguibles
     porque tintClass() los reparte por hash del nombre: si se colapsan a un
     gris único, el mismo cliente deja de tener «su» color y se pierde la
     única ayuda de reconocimiento que tiene la lista de la flota. Lo que
     cambia es la familia: el arcoíris saturado (violeta #7c5cff, azul #4b7bec,
     rosa #eb3b5a, verde #20bf6b) baja a grises fríos y tierras del manual, y
     cada -ink se eligió para dar ≥4.5:1 SOBRE SU PROPIO RELLENO al 12-18%,
     que es el fondo real de la inicial (no sobre blanco puro).
       azul 7.0:1 · violeta→gris frío 8.1:1 · rojo→terracota 6.7:1 ·
       verde→verde azulado 6.9:1
     Lima no entra acá: sería un sexto tinte que como letra está prohibido y
     como relleno se confundiría con el chip de «activo». */
  --adm-av-azul: #5B7A99;                  --adm-av-azul-ink: #33506E;
  --adm-av-violeta: var(--tile-3-deco);    --adm-av-violeta-ink: #3D4650;
  --adm-av-rojo: var(--tile-1-deco);       --adm-av-rojo-ink: #7A4433;
  --adm-av-verde: #3E7A68;                 --adm-av-verde-ink: #22574C;
  /* El ámbar de texto del portal (#b7791f) daba 2.81:1 sobre su propio relleno
     —ilegible, y era además el único ámbar de la casa que no salía de --warn.
     Bajo Tinta se unifica con el token de estado: 4.57:1 sobre el mismo
     fondo. No se arregla en portal.css porque eso movería la vista clásica. */
  --adm-ambar-ink: var(--warn);

  /* Velo y sombras: negro puro sobre una base Tinta ensucia (satura el gris a
     azul-verdoso). Se derivan de --navy como el resto de la elevación de esta
     hoja, y bajan de peso por la misma razón que --shadow. */
  --adm-scrim: color-mix(in srgb, var(--navy) 55%, transparent);
  --adm-sombra-modal: color-mix(in srgb, var(--navy) 12%, transparent);
  --adm-sombra-panel: color-mix(in srgb, var(--navy) 8%, transparent);
}

/* ============================================================================
   FASE 2 — OVERRIDES DE COMPONENTE (excepción acordada)
   ============================================================================
   Mismo contrato que la sección homónima de instance/public/marca/tinta.css:
   cuando portal.css o brand.css consumen un token de una forma que la REGLA
   DURA DE LIMA prohíbe, o cuando la regla clásica es correcta para la marca
   clásica y equivocada para ésta, la corrección vive ACÁ y no allá.

   Reglas de la sección:
   - Cada bloque repite el selector original con el prefijo del scope. Gana por
     especificidad; ningún `!important`.
   - Ningún hex nuevo sale de esta sección (los hex viven en el bloque de
     tokens de arriba).
   - Cada bloque dice qué regla corrige y por qué falla.
   ========================================================================== */

/* --- 1. BOTÓN PRIMARIO: de magenta a grafito -------------------------------
   brand.css:.btn pinta el fondo con var(--o) y la letra en blanco. En la
   instancia --o dejó de ser el botón hace tiempo (es la voz de Clara); en el
   portal quedó así porque nadie lo movió. Bajo Tinta se alinea con el resto:
   accionable = grafito, y --o vuelve a ser solo identidad. El token no se
   toca — el client pack lo sigue mandando —, cambia quién lo consume.

   Se listan `.ghost` y `.danger` aparte porque este selector es más
   específico que `.btn.ghost` y si no, se los comería. */
html[data-marca="tinta"] .btn,
html[data-marca="tinta"] button.btn {                            /* brand.css:.btn */
  background: var(--action-grad);
  color: var(--action-text);
}
html[data-marca="tinta"] .btn:hover { background: var(--action); }
html[data-marca="tinta"] .btn.ghost {
  background: var(--surface);
  color: var(--navy);
}
html[data-marca="tinta"] .btn.ghost:hover { background: var(--paper); }
html[data-marca="tinta"] .btn.danger {
  background: var(--surface);
  color: var(--err);
}
html[data-marca="tinta"] .btn.danger:hover { background: var(--err-soft); }

/* --- 2. EL ISOTIPO «D» -----------------------------------------------------
   Es la única marca gráfica del portal (no hay archivo de isotipo servido:
   index.html y login.js escriben la letra a mano). Clásico: cuadrado de
   --o-soft con la D en magenta. Bajo Tinta pasa a ser el bloque del manual:
   superficie Tinta con la letra en Lima. Éste es el caso (b) de la regla dura
   —Lima sobre oscuro, 16.05:1— y además a 18px, muy por encima del umbral de
   trazo fino. El radio se toma de --radius-xs (6px sobre 32px ≈ 19%), que es
   la misma proporción que el rx del isotipo del manual.

   `.sidebar` y `.sidebar-product-card` no necesitan override: ya se pintan
   con --surface / --line / --radius-sm y bajaron solos con los tokens. */
html[data-marca="tinta"] .product-icon {                         /* portal.css:.product-icon */
  background: var(--action);
  color: var(--action-spark);
  border-radius: var(--radius-xs);
  font-size: 18px;
}
/* El logo del login es la misma D. Ya tenía --action-grad de fondo, así que
   pasó a Tinta sola; lo que faltaba era la letra, que era blanca. */
html[data-marca="tinta"] .login-logo {                           /* portal.css:.login-logo */
  color: var(--action-spark);
  border-radius: var(--radius-xs);
}

/* --- 3. BADGES DE «TIPO/INFO»: fuera la lavanda ----------------------------
   .stat-icon.info y .stat-icon.violet se pintan con --agent-ink, que es la
   piel de Clara. En el backoffice Clara no habla: ahí no hay agente, hay
   flota. Sobre Tinta esa lavanda lee como el morado de la paleta anterior y
   es lo único que delata la marca vieja en la fila de estadísticas. Pasa a la
   familia neutra que pide el manual: chip de superficie con letra Tinta. */
html[data-marca="tinta"] .stats-row .stat-icon.info,
html[data-marca="tinta"] .stats-row .stat-icon.violet {          /* portal.css:.stats-row .stat-icon.info */
  background: var(--surface);
  color: var(--navy);
}

/* --- 4. CHIP DE «ACTIVO»: el único positivo lleva Lima ---------------------
   .chip-estado--activo se pintaba con --o (identidad) y eso mezclaba dos
   idiomas: el mismo magenta decía «Giraffos» en el avatar y «este usuario
   está activo» dos columnas más allá. Bajo Tinta el positivo toma Lima como
   RELLENO con la letra en Tinta (17.9:1): el uso canónico del acento y el
   único chip del portal que lo lleva, así que sigue siendo señal y no adorno.

   NO se toca `.chip-plan.pro`, que también usa --o: «Pro» es plan comercial,
   no estado, y ahí --o sí es la identidad hablando. */
html[data-marca="tinta"] .chip-estado--activo {                  /* portal.css:.chip-estado--activo */
  background: color-mix(in srgb, var(--action-spark) 28%, var(--surface));
  color: var(--navy);
}

/* --- 5. RADIO LITERAL ------------------------------------------------------
   `.stat-tile` es el único componente del portal que escribe su radio a mano
   (16px) y por eso no bajó con la escala del tema. Son cuatro bloques grandes
   arriba de todo: es donde más se nota el borde blando. */
html[data-marca="tinta"] .stat-tile { border-radius: var(--radius); }  /* portal.css:.stat-tile (16px) */