/* ═══ tria-base.css — LAS PIEZAS COMUNES DEL DISEÑO NUEVO DE TRIA (fase 12.2, 19-oct-2026) ═══════════════════

   Dibujo aprobado por el fundador el 19-oct («Sí, apruebo el dibujo 2»): https://claude.ai/artifact/JSvtxKdsvAcXsT9VD2a9Fs
   Norma 2: docs/diseno/sistema-diseno-trasnego.md · Mapa de lo que se viste aquí (fichero:línea de cada pieza de hoy):
   docs/estado/diseno/crm-moderno/mapa-12-2/.

   REGLAS DE ESTE FICHERO (las vigila operador-live/tests/test_tria_base_solo_con_interruptor.mjs):
   1. EL INTERRUPTOR. Todo cuelga de html[data-diseno="nuevo"] (lo pone operator-boot.js, solo a quien el
      servidor da permiso y lo enciende). Fuera de él solo hay DEFINICIONES que nadie usa todavía
      (:root{--t-*}, @font-face, @keyframes t-*): sin el atributo, TRIA no cambia ni un píxel.
   2. POR HERENCIA, NUNCA EN PARALELO. Se re-mapean los tokens viejos (--panel, --text, --fs-*…) y se visten las
      clases que ya existen (.btn, .field, .data-table, .avatar, .tn-toast…). Ninguna clase nueva para una
      pieza que ya existe.
   3. ALCANCE. Letra, esquinas y fuente: las dos páginas. Color y forma de las piezas: el panel de asesores y lo
      que el backoffice ya tiene en claro (.cara-clara). Los 26 paneles oscuros de Dirección llegan en la 12.7
      (pintarles el claro ahora dejaría texto claro sobre claro). La pantalla de entrada (body.auth-open),
      tal cual: tarjeta oscura fija.
   4. MEDIDAS DEL DIBUJO. 8 tamaños de letra (.72 … 1.51rem, +1px desde el 20-oct), esquinas 8 / 11 / redondo, espacios de 4 en 4,
      filas y controles de 32 px en el ordenador y 44 px en el móvil, pesos 400 / 500 / 600.
   5. Va la ÚLTIMA hoja en index.php y admin.php, con el MISMO ?v= en las dos (guardián R4b). Cada cambio de
      este fichero sube su ?v=: el móvil lo guarda por dirección completa.
   ═══════════════════════════════════════════════════════════════════════════════════════════════════════ */


/* ─── 0 · DEFINICIONES (fuera del interruptor: nadie las usa hasta que se enciende) ─────────────────────── */
:root {
  /* Color (d2-00-cabecera.html, tokens de la maqueta) */
  --t-azul: #1E3F80;  --t-azul-hover: #173268;  --t-azul-suave: #E9EEF8;  --t-sobre-azul: #FFFFFF;
  --t-texto: #1F2633;  --t-texto-2: #5B6474;
  /* Tercer gris de TEXTO: el dibujo usa #8A92A0, que se lee mal (3,1:1 sobre blanco; la norma pide 4,5:1).
     #646C7A es casi igual a la vista y pasa también sobre el gris de pasar el ratón y la fila elegida. */
  --t-texto-3: #646C7A;
  --t-linea: #E6E9EE;  --t-linea-2: #D5DAE1;
  --t-fondo: #FFFFFF;  --t-lateral: #F6F7F9;  --t-hover: #F1F3F6;
  --t-ok: #1B7A45;  --t-ok-bg: #E8F5EE;  --t-ok-bd: #BFE3CD;
  --t-am: #8A5A00;  --t-am-bg: #FDF3E1;  --t-am-bd: #F2D6A2;
  --t-ko: #B42318;  --t-ko-bg: #FDECEA;  --t-ko-bd: #F5C2BC;
  --t-in: #1E3F80;  --t-in-bg: #EAF1FC;  --t-in-bd: #C3D6F5;
  --t-gr: #5B6474;  --t-gr-bg: #F1F3F6;  --t-gr-bd: #DDE1E7;
  /* Personas: un color fijo por persona (TriaPersona.tono en operator-boot.js elige 1…6 por el nombre) */
  --t-av1-fg: #1E3F80;  --t-av1-bg: #E9EEF8;
  --t-av2-fg: #1B7A45;  --t-av2-bg: #E8F5EE;
  --t-av3-fg: #8A5A00;  --t-av3-bg: #FDF3E1;
  --t-av4-fg: #6B3FA0;  --t-av4-bg: #F3ECFB;
  --t-av5-fg: #B42318;  --t-av5-bg: #FDECEA;
  --t-av6-fg: #0E6E7A;  --t-av6-bg: #E6F6F8;
  /* Letra: los 8 tamaños de la norma, y ninguno más. Subidos +0.06rem (≈ +1px a 16px de raíz) el
     20-oct-2026 (encargo de Javidan: «subir 1px el tamaño de texto general»); la escala sigue siendo
     la misma, un paso más grande. Las filas (--t-fila) no cambian: 32/44 px aguantan el texto mayor. */
  --t-fs-3xs: .72rem;  --t-fs-2xs: .78rem;  --t-fs-xs: .84rem;  --t-fs-sm: .9rem;
  --t-fs-md: .96rem;   --t-fs-lg: 1.04rem;  --t-fs-xl: 1.18rem; --t-fs-t: 1.51rem;
  /* «Inter Tria» = la misma Inter local, pero con los pesos recortados a 400-600: cualquier 700/800/900 de
     las hojas viejas sale a 600 sin tocar sus 289 reglas (probado en Chromium y WebKit, 19-oct). */
  --t-fuente: "Inter Tria", "Inter Var", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --t-radio-1: 8px;  --t-radio-2: 11px;
  --t-fila: 32px;
  /* El armazón (12.3): la barra lateral del dibujo, 232 de ancho */
  --t-barra-ancho: 232px;
  --t-alto-barra-movil: 64px;
  --t-sombra-flota: 0 8px 24px rgba(16, 24, 40, .12), 0 2px 6px rgba(16, 24, 40, .06);
  /* Movimiento (dibujo, apartado 9): fondos 120 ms, salidas 150, entradas 200, todo con la misma curva */
  --t-dur-0: 120ms;  --t-dur-1: 150ms;  --t-dur-2: 200ms;  --t-curva: cubic-bezier(.23, 1, .32, 1);  --t-desp: 8px;
}
/* Quien pide menos movimiento en su teléfono u ordenador: todo instantáneo (spinners y «pensando» siguen). */
@media (prefers-reduced-motion: reduce) {
  :root { --t-dur-0: .01ms; --t-dur-1: .01ms; --t-dur-2: .01ms; --t-desp: 0px; }
}
@font-face {
  font-family: "Inter Tria";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("/fonts/inter-latin.woff2") format("woff2");
}
@keyframes t-aparece { from { opacity: 0; } }
@keyframes t-sube { from { opacity: 0; translate: 0 var(--t-desp); } }

/* El botón del propio interruptor (solo existe para quien tiene permiso): su sitio en «Más» del móvil,
   justo antes del modo oscuro, con o sin el diseño nuevo. */
body.solo-menu-usuario #diseno-toggle-button { order: 7; }


/* ─── 1 · LETRA, ESQUINAS Y FUENTE: las dos páginas ─────────────────────────────────────────────────────
   Se declara en el <body> (y en .cara-clara, que lleva su propia copia de los tokens claros, admin.css:8879),
   no en :root: así la pantalla de entrada del panel (body.auth-open, tarjeta oscura) se queda tal cual.
   Un token puesto en el <body> pesa más que el de :root sea cual sea su especificidad: está más cerca.
   La escala vieja se re-mapea POR VALOR, no por nombre (--fs-xl valía 1rem; la norma no tiene 1rem). */
html[data-diseno="nuevo"] body:not(.auth-open),
html[data-diseno="nuevo"] .cara-clara {
  --fs-3xs: var(--t-fs-3xs);  --fs-2xs: var(--t-fs-2xs);  --fs-xs: var(--t-fs-xs);  --fs-sm: var(--t-fs-sm);
  --fs-md: var(--t-fs-md);    --fs-lg: var(--t-fs-lg);    --fs-nota: var(--t-fs-lg); --fs-xl: var(--t-fs-lg);
  --fs-2xl: var(--t-fs-xl);
  --radius-sm: var(--t-radio-1);  --radius-md: var(--t-radio-2);  --radius-lg: var(--t-radio-2);  --radius-xl: var(--t-radio-2);
  --font-body: var(--t-fuente);  --font-display: var(--t-fuente);
  --sombra-flota: var(--t-sombra-flota);
}
/* En el ordenador, 32; en el móvil (o con el dedo), 44. Una sola variable para todo lo que se pulsa. */
@media (max-width: 768px), (pointer: coarse) {
  html[data-diseno="nuevo"] { --t-fila: 44px; }
}
/* El backoffice redefine la letra en su propio <body> (más cerca que :root) y la escribe a mano. */
html[data-diseno="nuevo"] body.admin-page {
  --font-body: var(--t-fuente);
  --sombra-flota: var(--t-sombra-flota);
  font-family: var(--t-fuente);
}
html[data-diseno="nuevo"] :is(.v2-body, .v2-overview) { font-family: var(--t-fuente); }
html[data-diseno="nuevo"] body:not(.auth-open) { font-family: var(--t-fuente); }


/* ─── 2 · COLOR: un solo azul y los grises de la norma (panel de asesores + lo claro del backoffice) ───
   También en el <body> y no en :root, por lo mismo: la entrada del panel no cambia (la revisión del 19-oct
   midió el botón «Entrar» pasando a azul marino sobre la tarjeta oscura: 1,5:1). */
html[data-diseno="nuevo"]:not(.admin-html) body:not(.auth-open),
html[data-diseno="nuevo"] .cara-clara {
  --bg: var(--t-lateral);  --bg-soft: var(--t-lateral);
  --panel: var(--t-fondo);  --panel-2: var(--t-lateral);  --panel-3: var(--t-hover);  --panel-4: var(--t-linea);
  --line: var(--t-linea);  --line-strong: var(--t-linea-2);
  --text: var(--t-texto);  --muted: var(--t-texto-2);  --muted-2: var(--t-texto-3);  --texto-suave: var(--t-texto-2);
  --brand: var(--t-azul);  --brand-strong: var(--t-azul-hover);  --brand-rgb: 30, 63, 128;  --brand-ink: var(--t-azul);
  --link: var(--t-azul);  --link-hover: var(--t-azul-hover);
  --accion: var(--t-azul);  --accion-hover: var(--t-azul-hover);
  --success: var(--t-ok);  --warning: var(--t-am);  --danger: var(--t-ko);
  --ok-text: var(--t-ok);  --ok-bg: var(--t-ok-bg);  --ok-border: var(--t-ok-bd);
  --warn-text: var(--t-am);  --warn-bg: var(--t-am-bg);  --warn-border: var(--t-am-bd);
  --info-text: var(--t-in);  --info-bg: var(--t-in-bg);  --info-border: var(--t-in-bd);
  --danger-text: var(--t-ko);  --danger-bg: var(--t-ko-bg);  --danger-border: var(--t-ko-bd);
  --shadow: var(--t-sombra-flota);
  --shell-sidebar: var(--t-lateral);  --shell-bg: var(--t-lateral);  --shell-chat: var(--t-fondo);
}
/* El lienzo del backoffice lo pinta admin.css con !important (admin.css:9089-9095). */
html.admin-html[data-diseno="nuevo"],
html.admin-html[data-diseno="nuevo"] body.admin-page,
html[data-diseno="nuevo"] body.admin-auth-loading::before {
  background: var(--t-lateral) !important;
  background-color: var(--t-lateral) !important;
}
/* El diseño nuevo es solo claro: su «Modo oscuro» se esconde mientras está encendido (app.js ya fuerza claro). */
html[data-diseno="nuevo"] #theme-toggle-button { display: none; }
/* En «Más» del móvil ese botón abría la tarjeta «Ajustes» (styles.css:18344): ahora la abre el interruptor.
   Y las tarjetas de «Más», con la esquina de la norma (11), arriba y abajo. */
html[data-diseno="nuevo"] body.solo-menu-usuario #diseno-toggle-button {
  border-top-width: 1px; border-radius: var(--t-radio-2) var(--t-radio-2) 0 0;
}
html[data-diseno="nuevo"] body.solo-menu-usuario #install-app-menu-button { border-radius: var(--t-radio-2) var(--t-radio-2) 0 0; }
html[data-diseno="nuevo"] body.solo-menu-usuario :is(#wa-tria-button, #update-app-button, #logout-button) { border-radius: 0 0 var(--t-radio-2) var(--t-radio-2); }
html[data-diseno="nuevo"] body.solo-menu-usuario .sidebar-user-menu:has(#update-app-button[hidden]) #install-app-menu-button { border-radius: var(--t-radio-2); }


/* ─── 3 · BOTONES (.btn y sus variantes; 443 en el marcado) ─────────────────────────────────────────────
   S = html[data-diseno="nuevo"] :is(body:not(.admin-page):not(.auth-open), .cara-clara) → pesa (0,3,2).
   Primario azul, uno por pantalla · secundario blanco con borde · fantasma sin borde · peligro en rojo sin
   relleno. Sin degradados, sin sombras, sin saltar al pasar el ratón: al pulsar se encoge un poco.
   BOTONES DE ICONO: los 6 que tienen tamaño propio (redondos o cuadrados sin relleno, buscados el 19-oct en
   styles.css y admin.css) se quedan con su forma; si no, la ✕ de los avisos se aplastaba a 6 px y los
   botones redondos del correo pasaban a cuadrados. Si se crea otro botón de icono, se añade aquí. */
html[data-diseno="nuevo"] :is(body:not(.admin-page):not(.auth-open), .cara-clara) .btn:not(.mail-compose-btn, .mail-refresh-btn, .mail-adjuntar-btn, .lst-col, .tn-toast-cerrar, .ads-mas) {
  min-height: var(--t-fila);
  padding: 4px 12px;
  border-radius: var(--t-radio-1);
  font-size: var(--t-fs-sm);
  font-weight: 500;
  line-height: 1.25;
}
html[data-diseno="nuevo"] :is(body:not(.admin-page):not(.auth-open), .cara-clara) .btn {
  box-shadow: none;
  filter: none;
  transition: background-color var(--t-dur-0) ease-out, border-color var(--t-dur-0) ease-out,
    color var(--t-dur-0) ease-out, transform var(--t-dur-0) ease-out;
}
html[data-diseno="nuevo"] :is(body:not(.admin-page):not(.auth-open), .cara-clara) :is(a, label).btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}
html[data-diseno="nuevo"] :is(body:not(.admin-page):not(.auth-open), .cara-clara) .btn:hover { transform: none; filter: none; }
html[data-diseno="nuevo"] :is(body:not(.admin-page):not(.auth-open), .cara-clara) .btn:active:not(:disabled) { transform: scale(.97); }
html[data-diseno="nuevo"] :is(body:not(.admin-page):not(.auth-open), .cara-clara) .btn:disabled:not(.is-done) {
  opacity: .5; cursor: not-allowed; border-style: dashed;
}
html[data-diseno="nuevo"] :is(body:not(.admin-page):not(.auth-open), .cara-clara) .btn:focus-visible {
  outline: 2px solid var(--t-azul); outline-offset: 2px;
}
/* Pequeño (dentro de una fila de tabla de 32): 24 en el ordenador; en el móvil, 44 como todo. */
html[data-diseno="nuevo"] :is(body:not(.admin-page):not(.auth-open), .cara-clara) .btn.small:not(.tn-toast-cerrar, .ads-mas, .lst-col) {
  min-height: 24px; padding: 2px 8px; font-size: var(--t-fs-xs);
}
@media (max-width: 768px), (pointer: coarse) {
  html[data-diseno="nuevo"] :is(body:not(.admin-page):not(.auth-open), .cara-clara) .btn.small:not(.tn-toast-cerrar, .ads-mas, .lst-col) {
    min-height: var(--t-fila); padding: 4px 12px;
  }
}
/* Secundario (y el .btn sin variante, que hoy sale con el gris del navegador).
   «✓ Ofrecido» (.is-done) se queda con su verde de hoy (styles.css:15975): el asesor lo distingue así de un
   botón apagado (fundador, 15-jul). Por eso tampoco entra en .btn:disabled de arriba. */
html[data-diseno="nuevo"] :is(body:not(.admin-page):not(.auth-open), .cara-clara) .btn:not(.primary, .ghost, .danger, .wa, .is-done),
html[data-diseno="nuevo"] :is(body:not(.admin-page):not(.auth-open), .cara-clara) .btn.secondary {
  background: var(--t-fondo); color: var(--t-texto); border: 1px solid var(--t-linea-2);
}
@media (hover: hover) {
  html[data-diseno="nuevo"] :is(body:not(.admin-page):not(.auth-open), .cara-clara) .btn:not(.primary, .ghost, .danger, .wa, .is-done):hover:not(:disabled),
  html[data-diseno="nuevo"] :is(body:not(.admin-page):not(.auth-open), .cara-clara) .btn.secondary:hover:not(:disabled) {
    background: var(--t-hover);
  }
}
/* Primario: con !important porque el claro de hoy lo lleva (styles.css:16161 y admin.css:9195). */
html[data-diseno="nuevo"] :is(body:not(.admin-page):not(.auth-open), .cara-clara) .btn.primary {
  background: var(--t-azul) !important; border: 1px solid var(--t-azul) !important; color: var(--t-sobre-azul) !important;
}
html[data-diseno="nuevo"] :is(body:not(.admin-page):not(.auth-open), .cara-clara) .btn.primary:hover:not(:disabled) {
  background: var(--t-azul-hover) !important; border-color: var(--t-azul-hover) !important;
}
/* Fantasma: sin borde; al pasar el ratón, el gris de fondo (si no, parecería texto suelto). */
html[data-diseno="nuevo"] :is(body:not(.admin-page):not(.auth-open), .cara-clara) .btn.ghost {
  background: transparent; color: var(--t-texto-2); border: 1px solid transparent;
}
@media (hover: hover) {
  html[data-diseno="nuevo"] :is(body:not(.admin-page):not(.auth-open), .cara-clara) .btn.ghost:hover:not(:disabled) {
    background: var(--t-hover); color: var(--t-texto);
  }
}
/* Peligro: rojo sin relleno (como ya hacía la cara clara del backoffice). */
html[data-diseno="nuevo"] :is(body:not(.admin-page):not(.auth-open), .cara-clara) .btn.danger {
  background: var(--t-fondo); color: var(--t-ko); border: 1px solid var(--t-ko-bd);
}
@media (hover: hover) {
  html[data-diseno="nuevo"] :is(body:not(.admin-page):not(.auth-open), .cara-clara) .btn.danger:hover:not(:disabled) {
    background: var(--t-ko-bg);
  }
}
/* WhatsApp (.btn.wa) conserva su verde (decisión del 16-oct): solo cambia la forma, arriba. */
/* Sobre la barra oscura de cambios masivos del CRM (app.js:8498, fondo var(--text)) el principal va en
   blanco con letra azul: el azul marino sobre casi negro no se distinguía (1,5:1). Sus botones siguen en 44
   (regla con id de styles.css): se revisan con Clientes en la 12.6. */
html[data-diseno="nuevo"] #contacts-dialog .cqx-lote-barra .btn.primary {
  background: var(--t-fondo) !important; border-color: var(--t-fondo) !important; color: var(--t-azul) !important;
}


/* ─── 4 · CAMPOS (.field y los de la cara clara del backoffice) ─────────────────────────────────────────
   32 de alto, borde fino, esquina 8, fondo blanco; el foco, un anillo azul solo cuando se llega con teclado
   (en un campo, también con ratón: es donde se escribe). Los !important son por los del claro de hoy
   (styles.css:16134 y admin.css:9029), que también los llevan. */
html[data-diseno="nuevo"] :is(body:not(.admin-page):not(.auth-open), .cara-clara) .field :is(input, select, textarea),
html[data-diseno="nuevo"] .cara-clara :is(input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"], [type="hidden"], [type="color"], [type="button"], [type="submit"], [type="image"]), select, textarea):not(.finance-cp-input, .finance-note-input, [id="v2-topbar-search"]) {
  border: 1px solid var(--t-linea-2);
  border-radius: var(--t-radio-1);
  background-color: var(--t-fondo) !important;
  border-color: var(--t-linea-2) !important;
  color: var(--t-texto) !important;
  font-size: var(--t-fs-sm);
  font-weight: 400;
  box-shadow: none;
}
html[data-diseno="nuevo"] :is(body:not(.admin-page):not(.auth-open), .cara-clara) .field input,
html[data-diseno="nuevo"] .cara-clara input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"], [type="hidden"], [type="color"], [type="button"], [type="submit"], [type="image"]):not(.finance-cp-input, [id="v2-topbar-search"]) {
  height: var(--t-fila);
  min-height: var(--t-fila);
  padding: 0 8px;
}
/* El select, con sitio a la derecha para su flecha. En la cara clara iba en una regla aparte que perdía
   contra la de arriba (pesaba menos) y la flecha se montaba sobre el texto: ahora va todo en una. */
html[data-diseno="nuevo"] :is(body:not(.admin-page):not(.auth-open), .cara-clara) .field select:not([multiple], [size]),
html[data-diseno="nuevo"] .cara-clara select:not([multiple], [size], .finance-cp-input) {
  height: var(--t-fila);
  min-height: var(--t-fila);
  padding: 0 28px 0 8px;
}
html[data-diseno="nuevo"] :is(body:not(.admin-page):not(.auth-open), .cara-clara) .field textarea,
html[data-diseno="nuevo"] .cara-clara textarea:not(.finance-note-input) { padding: 8px; line-height: 1.4; }
html[data-diseno="nuevo"] :is(body:not(.admin-page):not(.auth-open), .cara-clara) .field :is(input, textarea)::placeholder,
html[data-diseno="nuevo"] .cara-clara :is(input:not([id="v2-topbar-search"]), textarea)::placeholder { color: var(--t-texto-2) !important; opacity: 1; }
html[data-diseno="nuevo"] :is(body:not(.admin-page):not(.auth-open), .cara-clara) .field :is(input, select, textarea):disabled {
  background-color: var(--t-hover) !important; opacity: .6;
}
/* La etiqueta del campo: hoy en MAYÚSCULAS y peso 800; la norma, frase normal en 500. */
html[data-diseno="nuevo"] :is(body:not(.admin-page):not(.auth-open), .cara-clara) .field > span {
  font-size: var(--t-fs-xs); font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--t-texto-2);
}
/* La tabla que se edita en la celda: compacta (24) solo con ratón; con el dedo se queda con su alto de hoy. */
html[data-diseno="nuevo"] :is(body:not(.admin-page):not(.auth-open), .cara-clara) .data-table.editable :is(select, input:not([type="checkbox"], [type="radio"])) {
  border-color: var(--t-linea-2); border-radius: var(--t-radio-1); background-color: var(--t-fondo);
}
@media (min-width: 769px) and (pointer: fine) {
  html[data-diseno="nuevo"] :is(body:not(.admin-page):not(.auth-open), .cara-clara) .data-table.editable :is(select, input:not([type="checkbox"], [type="radio"])) {
    height: 24px; padding-block: 0;
  }
}
/* Foco: un solo anillo azul (había seis distintos). */
html[data-diseno="nuevo"] :is(body:not(.admin-page):not(.auth-open), .cara-clara) .field :is(input, select, textarea):focus,
html[data-diseno="nuevo"] .cara-clara :is(input:not([id="v2-topbar-search"]), select, textarea):focus { box-shadow: none !important; border-color: var(--t-azul) !important; }
/* Solo en los campos de formulario: la caja de escribir a TRIA y los buscadores tienen su propio marco al
   escribir, y con este anillo encima salía una caja dentro de otra (foto del 19-oct). */
html[data-diseno="nuevo"] :is(body:not(.admin-page):not(.auth-open), .cara-clara) .field :is(input, select, textarea):focus-visible,
html[data-diseno="nuevo"] :is(body:not(.admin-page):not(.auth-open), .cara-clara) .data-table.editable :is(input, select):focus-visible,
html[data-diseno="nuevo"] .cara-clara :is(input:not([id="v2-topbar-search"]), select, textarea):focus-visible {
  outline: 2px solid var(--t-azul); outline-offset: 0;
}
/* Casillas y botones de opción del navegador: el azul de la casa (había 10 colores). */
html[data-diseno="nuevo"] :is(body:not(.admin-page):not(.auth-open), .cara-clara) :is(input[type="checkbox"], input[type="radio"], input[type="range"], progress) {
  accent-color: var(--t-azul);
}
/* En el móvil: 44 de alto y letra de 16 px en los campos (con menos, el iPhone agranda la pantalla al tocar). */
@media (max-width: 768px), (pointer: coarse) {
  html[data-diseno="nuevo"] :is(body:not(.admin-page):not(.auth-open), .cara-clara) .field :is(input, select, textarea),
  html[data-diseno="nuevo"] .cara-clara :is(input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"], [type="hidden"], [type="color"], [type="button"], [type="submit"], [type="image"]), select, textarea):not(.finance-cp-input, .finance-note-input, [id="v2-topbar-search"]) {
    font-size: 16px;
  }
}


/* ─── 5 · FILTROS Y CHIPS: esquina 8, peso 500; puesto = azul suave con letra azul ─────────────────────── */
html[data-diseno="nuevo"] :is(body:not(.admin-page):not(.auth-open), .cara-clara) .agenda-chip {
  border-color: var(--t-linea-2); border-radius: var(--t-radio-1); font-weight: 500;
}
html[data-diseno="nuevo"] :is(body:not(.admin-page):not(.auth-open), .cara-clara) :is(.agenda-chip.is-on:not(.agenda-chip-overdue, .agenda-chip-hechas), .agenda-quitar-tipo) {
  border-color: var(--t-azul-suave); background: var(--t-azul-suave); color: var(--t-azul);
}
html[data-diseno="nuevo"] #contacts-dialog.contacts-qbx .pl-filtro {
  min-height: var(--t-fila); border: 1px dashed var(--t-linea-2); border-radius: var(--t-radio-1);
  background: var(--t-fondo); color: var(--t-texto-2); font-weight: 500;
}
html[data-diseno="nuevo"] #contacts-dialog.contacts-qbx .pl-filtro.is-puesto {
  border-style: solid; border-color: var(--t-azul-suave); background: var(--t-azul-suave); color: var(--t-azul);
}
html[data-diseno="nuevo"] .cara-clara :is(.admin-filter-chip, .finance-filtro-pastilla) { border-radius: var(--t-radio-1); font-weight: 500; }
/* Los filtros del CRM («Mostrar filtros»): sus reglas llevan el id de la ventana, así que aquí también. */
html[data-diseno="nuevo"] #contacts-dialog.contacts-qbx :is(.contacts-searchbar input, .cf-pill .contacts-filter, .cf-pill > input, .tria-ms-btn, .contacts-sort, .tria-ms-search, .contacts-filters-toggle, .contacts-fav-filter, .contacts-filter-clear) {
  height: var(--t-fila); min-height: var(--t-fila); padding-block: 0;
  border: 1px solid var(--t-linea-2); border-radius: var(--t-radio-1);
  background-color: var(--t-fondo); color: var(--t-texto); font-size: var(--t-fs-sm); font-weight: 400; box-shadow: none;
}
html[data-diseno="nuevo"] #contacts-dialog.contacts-qbx .cf-pill > label { background: var(--t-fondo); }
html[data-diseno="nuevo"] #contacts-dialog.contacts-qbx :is(.tria-ms.has-value .tria-ms-btn, .cf-pill.has-value .contacts-filter, .cf-pill.has-value > input) {
  border-color: var(--t-azul); color: var(--t-azul);
}
@media (max-width: 768px), (pointer: coarse) {
  /* Pesa lo mismo que la regla de arriba (la lleva .cf-pill .contacts-filter) y va después: gana. */
  html[data-diseno="nuevo"] #contacts-dialog.contacts-qbx :is(.contacts-searchbar input, .cf-pill .contacts-filter, .cf-pill > input, .contacts-sort, .tria-ms-search) { font-size: 16px; }
  html[data-diseno="nuevo"] #contacts-dialog.contacts-qbx .pl-filtro { height: auto; }
}


/* ─── 6 · TABLAS: filas de 32, sin rayas, cabecera discreta, cifras alineadas ───────────────────────────
   Solo en el ordenador (≥ 721 px): en el móvil varias de estas tablas son tarjetas y no se tocan. */
html[data-diseno="nuevo"] :is(body:not(.admin-page):not(.auth-open), .cara-clara) :is(.data-table, .chat-data-table, .wesign-tabla) {
  --table-zebra: transparent;
  --table-head-bg: var(--t-fondo);
}
@media (min-width: 721px) {
  html[data-diseno="nuevo"] :is(body:not(.admin-page):not(.auth-open), .cara-clara) :is(.data-table:not(.locales-encajan, .pl-tabla), .admin-table, .admin-data-table, .chat-data-table, .abogado-stats-table, .admin-abogado-dashboard-table, .admin-agenda-table, .cmatch-table) tr > :is(th, td) {
    height: 32px;
    padding: 7px 12px;
    padding-block: calc((32px - 1lh - 1px) / 2);
    border: 0;
    border-bottom: 1px solid var(--t-linea);
    box-sizing: border-box;
    font-size: var(--t-fs-sm);
    font-weight: 400;
    line-height: 1.25;
    letter-spacing: normal;
    text-transform: none;
    font-variant-numeric: tabular-nums;
    color: var(--t-texto);
  }
  html[data-diseno="nuevo"] :is(body:not(.admin-page):not(.auth-open), .cara-clara) :is(.data-table:not(.locales-encajan, .pl-tabla), .admin-table, .admin-data-table, .chat-data-table, .abogado-stats-table, .admin-abogado-dashboard-table, .admin-agenda-table, .cmatch-table) tr > th {
    padding-block: 0;
    font-size: var(--t-fs-xs);
    font-weight: 500;
    color: var(--t-texto-3);
    background: var(--t-fondo);
  }
  /* Celdas con un botón, un desplegable o una foto: sin relleno vertical, para que la fila siga en 32. */
  html[data-diseno="nuevo"] :is(body:not(.admin-page):not(.auth-open), .cara-clara) :is(.data-table:not(.locales-encajan, .pl-tabla), .admin-table, .admin-data-table, .chat-data-table, .abogado-stats-table, .admin-abogado-dashboard-table, .admin-agenda-table, .cmatch-table) tr > :is(th, td):has(> :is(select, button, input, .btn, .pill, img)) {
    padding-block: 0;
  }
  html[data-diseno="nuevo"] .wesign-tabla tr > :is(th, td) {
    border: 0; border-bottom: 1px solid var(--t-linea); height: 32px; padding: 0 12px;
    font-size: var(--t-fs-sm); color: var(--t-texto); font-variant-numeric: tabular-nums;
  }
  html[data-diseno="nuevo"] .wesign-tabla tr > th { font-size: var(--t-fs-xs); font-weight: 500; color: var(--t-texto-3); background: var(--t-fondo); }
  /* Locales (CRM): fila de 32 (las que llevan la pila «Le falta» siguen más altas hasta la 12.6). */
  html[data-diseno="nuevo"] #contacts-dialog.contacts-qbx .pl-tabla th {
    height: 32px; padding: 0 12px; font-size: var(--t-fs-xs); font-weight: 500; color: var(--t-texto-3);
    background: var(--t-fondo); border-bottom: 1px solid var(--t-linea);
  }
  html[data-diseno="nuevo"] #contacts-dialog.contacts-qbx .pl-fila td { height: 32px; padding: 0 12px; border-top: 0; border-bottom: 1px solid var(--t-linea); }
  /* La pila «Le falta» ocupa dos o tres líneas: sin este respiro tocaba las rayas de la fila. */
  html[data-diseno="nuevo"] #contacts-dialog.contacts-qbx .pl-fila td:has(.pl-falta-pila) { padding-block: 6px; }
  html[data-diseno="nuevo"] #contacts-dialog.contacts-qbx .pl-foto { width: 24px; height: 24px; border-radius: var(--t-radio-1); }
  html[data-diseno="nuevo"] #contacts-dialog.contacts-qbx .pl-nom { line-height: 1.15; }
  html[data-diseno="nuevo"] #contacts-dialog.contacts-qbx :is(.pl-c-precio, .pl-c-renta) { text-align: right; font-variant-numeric: tabular-nums; }
  /* Oportunidades (CRM): la «tabla» hecha con filas */
  html[data-diseno="nuevo"] #contacts-dialog.contacts-qbx :is(.cqx-thead, .cqx-row) { gap: 12px; padding: 0 12px; min-height: 32px; }
  html[data-diseno="nuevo"] #contacts-dialog.contacts-qbx :is(.cqx-thead, .cqx-row) > :not(:first-child) { border-left: 0; padding-left: 0; }
  /* 4 + 24 (sus desplegables) + 4 = 32; si el texto pasa a dos líneas, no toca las rayas. */
  html[data-diseno="nuevo"] #contacts-dialog.contacts-qbx .cqx-row { padding-block: 4px; border-bottom-color: var(--t-linea); }
  html[data-diseno="nuevo"] #contacts-dialog.contacts-qbx .cqx-thead { background: var(--t-fondo); border-bottom-color: var(--t-linea); --qbx-muted: var(--t-texto-3); }
  html[data-diseno="nuevo"] #contacts-dialog.contacts-qbx .cqx-th { font-size: var(--t-fs-xs); font-weight: 500; }
  html[data-diseno="nuevo"] #contacts-dialog.contacts-qbx :is(.cqx-estado-select, .cqx-advisor-select) { height: 24px; padding-block: 0; }
}
/* Pasar el ratón por una fila: el gris claro de la norma. Cifras marcadas como número, a la derecha. */
@media (hover: hover) {
  html[data-diseno="nuevo"] :is(body:not(.admin-page):not(.auth-open), .cara-clara) :is(.data-table, .admin-table, .admin-data-table, .chat-data-table, .cmatch-table) tbody tr:hover > td {
    background: var(--t-hover);
  }
}
html[data-diseno="nuevo"] :is(body:not(.admin-page):not(.auth-open), .cara-clara) tr > :is(th, td):is(.num, .admin-table-number) {
  text-align: right; font-variant-numeric: tabular-nums;
}


/* ─── 7 · CÍRCULOS DE INICIALES: redondos, peso 600, el mismo color para la misma persona ───────────────
   El color lo pone data-av="1…6" (TriaPersona.attr en operator-boot.js; solo con el interruptor). Sin él,
   el gris neutro de la norma. 22 en las filas de la agenda, 32 normal, 40 en la ficha. */
html[data-diseno="nuevo"] :is(body:not(.admin-page):not(.auth-open), .cara-clara) :is(.avatar, .agenda-fila-avatar, .share-user-avatar, .sidebar-footer-avatar, .admin-user-avatar, .v2-topbar-avatar, .seg-avatar) {
  width: 32px; height: 32px; border-radius: 999px; border: 0; box-shadow: none;
  font-size: var(--t-fs-xs); font-weight: 600; font-style: normal; line-height: 1; letter-spacing: 0;
  background: var(--t-gr-bg); color: var(--t-gr);
}
html[data-diseno="nuevo"] :is(body:not(.admin-page):not(.auth-open), .cara-clara) .agenda-fila-avatar {
  width: 22px; height: 22px; font-size: var(--t-fs-3xs);
}
html[data-diseno="nuevo"] :is(body:not(.admin-page):not(.auth-open), .cara-clara) :is(.fd-avatar, .sidebar-user-menu-avatar, .admin-user-avatar) {
  width: 40px; height: 40px; font-size: var(--t-fs-sm);
}
/* El color, con el MISMO alcance delante que el gris de arriba: si no, el gris pesa más y gana siempre
   (pasó en la primera foto del 19-oct: todos los círculos salían grises con su data-av puesto). */
html[data-diseno="nuevo"] :is(body:not(.admin-page):not(.auth-open), .cara-clara) :is(.avatar, .agenda-fila-avatar, .share-user-avatar, .sidebar-footer-avatar, .admin-user-avatar, .v2-topbar-avatar, .seg-avatar)[data-av="1"] { background: var(--t-av1-bg); color: var(--t-av1-fg); }
html[data-diseno="nuevo"] :is(body:not(.admin-page):not(.auth-open), .cara-clara) :is(.avatar, .agenda-fila-avatar, .share-user-avatar, .sidebar-footer-avatar, .admin-user-avatar, .v2-topbar-avatar, .seg-avatar)[data-av="2"] { background: var(--t-av2-bg); color: var(--t-av2-fg); }
html[data-diseno="nuevo"] :is(body:not(.admin-page):not(.auth-open), .cara-clara) :is(.avatar, .agenda-fila-avatar, .share-user-avatar, .sidebar-footer-avatar, .admin-user-avatar, .v2-topbar-avatar, .seg-avatar)[data-av="3"] { background: var(--t-av3-bg); color: var(--t-av3-fg); }
html[data-diseno="nuevo"] :is(body:not(.admin-page):not(.auth-open), .cara-clara) :is(.avatar, .agenda-fila-avatar, .share-user-avatar, .sidebar-footer-avatar, .admin-user-avatar, .v2-topbar-avatar, .seg-avatar)[data-av="4"] { background: var(--t-av4-bg); color: var(--t-av4-fg); }
html[data-diseno="nuevo"] :is(body:not(.admin-page):not(.auth-open), .cara-clara) :is(.avatar, .agenda-fila-avatar, .share-user-avatar, .sidebar-footer-avatar, .admin-user-avatar, .v2-topbar-avatar, .seg-avatar)[data-av="5"] { background: var(--t-av5-bg); color: var(--t-av5-fg); }
html[data-diseno="nuevo"] :is(body:not(.admin-page):not(.auth-open), .cara-clara) :is(.avatar, .agenda-fila-avatar, .share-user-avatar, .sidebar-footer-avatar, .admin-user-avatar, .v2-topbar-avatar, .seg-avatar)[data-av="6"] { background: var(--t-av6-bg); color: var(--t-av6-fg); }
/* Seguimiento pinta sus avatares con el id del panel delante (admin.css:10139): aquí también. */
html[data-diseno="nuevo"] #admin-pane-followup.seg .seg-avatar { border-radius: 999px; font-weight: 600; font-size: var(--t-fs-xs); }
html[data-diseno="nuevo"] #admin-pane-followup.seg .seg-avatar[data-av="1"] { background: var(--t-av1-bg); color: var(--t-av1-fg); }
html[data-diseno="nuevo"] #admin-pane-followup.seg .seg-avatar[data-av="2"] { background: var(--t-av2-bg); color: var(--t-av2-fg); }
html[data-diseno="nuevo"] #admin-pane-followup.seg .seg-avatar[data-av="3"] { background: var(--t-av3-bg); color: var(--t-av3-fg); }
html[data-diseno="nuevo"] #admin-pane-followup.seg .seg-avatar[data-av="4"] { background: var(--t-av4-bg); color: var(--t-av4-fg); }
html[data-diseno="nuevo"] #admin-pane-followup.seg .seg-avatar[data-av="5"] { background: var(--t-av5-bg); color: var(--t-av5-fg); }
html[data-diseno="nuevo"] #admin-pane-followup.seg .seg-avatar[data-av="6"] { background: var(--t-av6-bg); color: var(--t-av6-fg); }


/* ─── 8 · AVISOS Y ESQUELETO ─────────────────────────────────────────────────────────────────────────── */
/* El aviso del panel: oscuro, esquina 11, entra subiendo en 200 ms y sale en 150 (en el móvil sigue arriba,
   donde no tapa la caja de escribir: decisión del 15-sep). Los de «hecho» y «error» conservan su color. */
html[data-diseno="nuevo"] .tn-toast:not(.tn-toast-panel) {
  padding: 8px 12px; border-radius: var(--t-radio-2);
  background: var(--t-texto); color: var(--t-fondo);
  font-size: var(--t-fs-sm); font-weight: 500;
  box-shadow: var(--t-sombra-flota);
  transition: opacity var(--t-dur-1) ease-in, transform var(--t-dur-1) ease-in;
}
html[data-diseno="nuevo"] .tn-toast:not(.tn-toast-panel).show {
  transition: opacity var(--t-dur-2) var(--t-curva), transform var(--t-dur-2) var(--t-curva);
}
html[data-diseno="nuevo"] .tn-toast:not(.tn-toast-panel).is-ok { background: var(--t-ok); color: var(--t-fondo); }
html[data-diseno="nuevo"] .tn-toast:not(.tn-toast-panel).is-error { background: var(--t-ko); color: var(--t-fondo); }
@media (prefers-reduced-motion: reduce) {
  html[data-diseno="nuevo"] .tn-toast:not(.tn-toast-panel),
  html[data-diseno="nuevo"] .tn-toast:not(.tn-toast-panel).show { transform: none; }
}
/* Esqueleto de carga: barras finas y redondas en los grises de la norma. */
html[data-diseno="nuevo"] .tn-skeleton-bar {
  height: 8px; border-radius: 999px;
  background: linear-gradient(90deg, var(--t-linea) 25%, var(--t-hover) 50%, var(--t-linea) 75%);
  background-size: 200% 100%;
}
html[data-diseno="nuevo"] .tn-skeleton-bar-b { height: 8px; }


/* ─── 9 · ENTRADA SUAVE de ventanas, velos, menús y paneles ─────────────────────────────────────────────
   Solo opacidad y un desplazamiento corto (nunca escala: hay menús que se miden al abrirse). Entra en 200 ms
   y sale en 150, por debajo de los 220-260 ms que el código espera en algunos sitios. Sin @starting-style o
   allow-discrete (navegadores viejos), todo sigue apareciendo de golpe, como hoy. */
/* a · Las ventanas de pantalla (CRM, Mis valoraciones, Mi agenda, WeSign) — ya se funden; solo el tiempo */
html[data-diseno="nuevo"] .agenda-dialog {
  translate: 0 var(--t-desp);
  transition: opacity var(--t-dur-1) ease-in, translate var(--t-dur-1) ease-in, transform var(--t-dur-1) ease-in,
    visibility 0s linear var(--t-dur-1);
}
html[data-diseno="nuevo"] .agenda-dialog.active {
  translate: none;
  transition: opacity var(--t-dur-2) var(--t-curva), translate var(--t-dur-2) var(--t-curva), transform var(--t-dur-2) var(--t-curva),
    visibility 0s;
}
/* Las que ocupan toda la pantalla, solo fundido; y dentro del backoffice (pantalla sola), sin nada. */
html[data-diseno="nuevo"] :is(#agenda-dialog, #wesign-dialog, #contacts-dialog) { translate: none; }
html[data-diseno="nuevo"].pantalla-sola :is(#agenda-dialog, #wesign-dialog, #contacts-dialog, #misval-dialog) { transition: none; }
/* b · Las ventanas pequeñas (info del chat, modos, cuenta, recuperar acceso, avisos) */
html[data-diseno="nuevo"] :is(.chat-info-dialog, .mode-explorer-dialog, .mode-picker-dialog, .account-dialog, .recovery-dialog, .notification-center-panel) {
  visibility: hidden;
  translate: 0 var(--t-desp);
  transition: opacity var(--t-dur-1) ease-in, translate var(--t-dur-1) ease-in, transform var(--t-dur-1) ease-in,
    visibility 0s linear var(--t-dur-1);
}
html[data-diseno="nuevo"] :is(.chat-info-dialog, .mode-explorer-dialog, .mode-picker-dialog, .account-dialog, .recovery-dialog, .notification-center-panel)[aria-hidden="false"] {
  visibility: visible;
  translate: none;
  transition: opacity var(--t-dur-2) var(--t-curva), translate var(--t-dur-2) var(--t-curva), transform var(--t-dur-2) var(--t-curva),
    visibility 0s;
}
html[data-diseno="nuevo"] .notification-center-panel { translate: none; }
/* c · Los velos de detrás: se funden, y mientras salen no reciben clics */
html[data-diseno="nuevo"] :is(.dialog-backdrop, .drawer-backdrop, .mobile-sidebar-backdrop, .admin-nav-fondo) {
  animation: none;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-dur-0) ease-in, display var(--t-dur-0) allow-discrete;
}
html[data-diseno="nuevo"] :is(.dialog-backdrop, .drawer-backdrop, .mobile-sidebar-backdrop, .admin-nav-fondo):not([hidden]) {
  opacity: 1;
  pointer-events: auto;
  transition: opacity var(--t-dur-2) var(--t-curva), display var(--t-dur-2) allow-discrete;
}
@starting-style {
  html[data-diseno="nuevo"] :is(.dialog-backdrop, .drawer-backdrop, .mobile-sidebar-backdrop, .admin-nav-fondo):not([hidden]) { opacity: 0; }
}
/* d · Los menús («Más», adjuntar, tu cuenta del backoffice): fundido y 4 px */
html[data-diseno="nuevo"] :is(.sidebar-user-menu, .composer-tools-menu, .admin-menu-cuenta) {
  animation: none;
  opacity: 0;
  translate: 0 calc(var(--t-desp) / 2);
  pointer-events: none;
  transition: opacity var(--t-dur-1) ease-in, translate var(--t-dur-1) ease-in, display var(--t-dur-1) allow-discrete;
}
html[data-diseno="nuevo"] :is(.sidebar-user-menu, .composer-tools-menu, .admin-menu-cuenta):not([hidden]) {
  opacity: 1;
  translate: none;
  pointer-events: auto;
  transition: opacity var(--t-dur-2) var(--t-curva), translate var(--t-dur-2) var(--t-curva), display var(--t-dur-2) allow-discrete;
}
@starting-style {
  html[data-diseno="nuevo"] :is(.sidebar-user-menu, .composer-tools-menu, .admin-menu-cuenta):not([hidden]) {
    opacity: 0; translate: 0 calc(var(--t-desp) / 2);
  }
}
/* En el «Más» del móvil ya se desliza el cajón entero: el menú de dentro, quieto. */
html[data-diseno="nuevo"] body.solo-menu-usuario .sidebar-user-menu { translate: none; transition: none; }
/* e · Los paneles del backoffice al cambiar de pestaña: solo fundido (el de TRIA, nada: se mide al abrirse).
   Solo los claros: un panel oscuro que arranca transparente deja ver el lienzo claro de debajo y da un
   destello blanco en cada cambio de pestaña (revisión del 19-oct). Los 26 oscuros, en la 12.7. */
html[data-diseno="nuevo"] .admin-pane.cara-clara:not([hidden]):not(.tria-dentro) { animation: t-aparece var(--t-dur-1) ease-out; }
/* f · Las ventanas que el código crea al vuelo (confirmar, nota de estado, firma, vista previa…): entran suaves.
   El velo de «confirmar» y el de los avisos de TRIA no se funden: se quitan de golpe y a menudo uno abre el
   siguiente (confirmar → resultado); fundido, la pantalla se aclaraba y se volvía a oscurecer. Su tarjeta sí sube. */
html[data-diseno="nuevo"] :is(.estado-note-overlay, .contacts-confirm-overlay, .contacts-new-overlay, .contacts-match-overlay, .tria-signature-backdrop, .docx-preview-backdrop, .opp-confirm-overlay, .system-idea-overlay, .val-modal-overlay, .contenido-lb-overlay, .admin-abogado-modal-overlay, .inicio-ventana-fondo) {
  animation: t-aparece var(--t-dur-2) var(--t-curva);
}
html[data-diseno="nuevo"] :is(.operator-dialog, .app-confirm-dialog, .opp-confirm-panel, .system-idea-panel, .val-modal-panel, .contenido-lb-box, .admin-abogado-modal, .inicio-ventana) {
  animation: t-sube var(--t-dur-2) var(--t-curva);
}
/* g · Los cajones laterales */
html[data-diseno="nuevo"] .side-drawer {
  visibility: hidden;
  transition: transform var(--t-dur-2) var(--t-curva), visibility 0s linear var(--t-dur-2);
}
html[data-diseno="nuevo"] body.drawer-open .side-drawer {
  visibility: visible;
  transition: transform var(--t-dur-2) var(--t-curva), visibility 0s;
}
@media (max-width: 1100px) {
  html[data-diseno="nuevo"] .sidebar { transition: transform var(--t-dur-2) var(--t-curva) !important; }
}


/* ─── 9 · EL ARMAZÓN (fase 12.3): barra lateral, secciones en su sitio y barra de abajo del móvil ───────────
   Lo monta tria-armazon.js (pone la clase .tria-armazon en el <html>) cuando el servidor confirma el permiso.
   Las secciones son LAS MISMAS ventanas de hoy (#contacts-dialog, #agenda-dialog, #wesign-dialog, #misval-dialog,
   #mail-overlay): aquí solo se colocan a la derecha de la barra, sin velo, sin X y sin entrar «como ventana».
   Las ~1.100 reglas que cuelgan de sus ids siguen valiendo (estudio técnico, A.2). */

/* a · La barra lateral (dibujo 2, d2-00-cabecera.html: .side, .marca, .buscar-g, .nav-i, .nav-g, .pie) */
html[data-diseno="nuevo"].tria-armazon #tria-barra {
  position: fixed; top: 0; bottom: 0; left: 0; z-index: 70;
  width: var(--t-barra-ancho);
  display: flex; flex-direction: column; gap: 4px;
  padding: 12px 8px 8px;
  background: var(--t-lateral); border-right: 1px solid var(--t-linea);
  color: var(--t-texto); font-family: var(--t-fuente); font-size: var(--t-fs-sm); line-height: 1.4;
}
html[data-diseno="nuevo"].tria-armazon #tria-barra .t-ico { width: 16px; height: 16px; fill: currentColor; flex: none; }
html[data-diseno="nuevo"].tria-armazon #tria-barra .t-ico-vacio { display: inline-block; }
html[data-diseno="nuevo"].tria-armazon .t-barra-cab { display: flex; align-items: center; gap: 8px; padding: 4px 8px 8px; font-weight: 600; font-size: var(--t-fs-lg); }
/* El logo es el archivo original /icons/icon-source.svg (trae su propio fondo redondeado): nunca redibujado (Javidan 24-oct). */
html[data-diseno="nuevo"].tria-armazon .t-logo {
  width: 24px; height: 24px; flex: none;
  display: grid; place-items: center;
}
html[data-diseno="nuevo"].tria-armazon .t-logo img { width: 24px; height: 24px; display: block; }
html[data-diseno="nuevo"].tria-armazon .t-hoja-cerrar { display: none; }
html[data-diseno="nuevo"].tria-armazon .t-buscar {
  display: flex; align-items: center; gap: 8px; width: 100%; height: 32px; margin: 0 0 8px; padding: 0 8px;
  border: 1px solid var(--t-linea); border-radius: var(--t-radio-1); background: var(--t-fondo);
  color: var(--t-texto-3); font: 400 var(--t-fs-sm) var(--t-fuente); text-align: left; cursor: pointer;
}
html[data-diseno="nuevo"].tria-armazon .t-buscar-tx { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html[data-diseno="nuevo"].tria-armazon :is(.t-buscar, .t-buscador-campo) kbd {
  font: 500 var(--t-fs-3xs) var(--t-fuente); color: var(--t-texto-3);
  border: 1px solid var(--t-linea); border-radius: var(--t-radio-1); padding: 0 4px; background: var(--t-fondo);
}
html[data-diseno="nuevo"].tria-armazon .t-barra-cuerpo { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; margin: 0 -8px; padding: 0 8px; }
html[data-diseno="nuevo"].tria-armazon .t-grupo { display: flex; flex-direction: column; gap: 2px; }
html[data-diseno="nuevo"].tria-armazon :is(.t-nav, .t-pleg) {
  display: flex; align-items: center; gap: 8px; height: 32px; padding: 0 8px; flex: none;
  border: 1px solid transparent; border-radius: var(--t-radio-1); background: transparent;
  color: var(--t-texto-2); font: 500 var(--t-fs-sm) var(--t-fuente); text-decoration: none; text-align: left;
  cursor: pointer; transition: background-color var(--t-dur-0) ease-out, color var(--t-dur-0) ease-out;
}
html[data-diseno="nuevo"].tria-armazon .t-nav[hidden] { display: none; }
html[data-diseno="nuevo"].tria-armazon .t-nav-tx { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (hover: hover) {
  html[data-diseno="nuevo"].tria-armazon :is(.t-nav, .t-pleg):hover { background: var(--t-hover); color: var(--t-texto); }
}
html[data-diseno="nuevo"].tria-armazon .t-nav.act {
  background: var(--t-fondo); color: var(--t-texto); border-color: var(--t-linea);
  box-shadow: 0 1px 2px rgba(16, 24, 40, .06);
}
html[data-diseno="nuevo"].tria-armazon .t-nav:focus-visible,
html[data-diseno="nuevo"].tria-armazon :is(.t-pleg, .t-buscar, .t-pie-ajustes):focus-visible { outline: 2px solid var(--t-azul); outline-offset: 1px; }
html[data-diseno="nuevo"].tria-armazon .t-nav-n { margin-left: auto; font-size: var(--t-fs-2xs); color: var(--t-texto-3); font-variant-numeric: tabular-nums; }
html[data-diseno="nuevo"].tria-armazon .t-nav-n.rojo { color: var(--t-ko); font-weight: 600; }
html[data-diseno="nuevo"].tria-armazon .t-nav-n[hidden] { display: none; }
html[data-diseno="nuevo"].tria-armazon .t-grupo-tit { margin: 0; padding: 12px 8px 4px; font-size: var(--t-fs-2xs); font-weight: 500; color: var(--t-texto-3); }
html[data-diseno="nuevo"].tria-armazon .t-pleg { width: 100%; color: var(--t-texto-3); font-size: var(--t-fs-xs); }
html[data-diseno="nuevo"].tria-armazon .t-pleg .t-ico { width: 12px; height: 12px; transition: rotate var(--t-dur-1) var(--t-curva); }
html[data-diseno="nuevo"].tria-armazon .t-pleg[aria-expanded="true"] .t-ico { rotate: 90deg; }
html[data-diseno="nuevo"].tria-armazon .t-pleg-cuerpo { display: flex; flex-direction: column; gap: 2px; }
html[data-diseno="nuevo"].tria-armazon .t-pleg-cuerpo[hidden] { display: none; }
/* El pie: tu nombre (el botón de cuenta de siempre, movido aquí) y el engranaje, que abre el mismo menú */
html[data-diseno="nuevo"].tria-armazon .t-barra-pie {
  position: relative; display: flex; align-items: center; gap: 4px;
  margin: 4px -8px 0; padding: 8px 8px 0; border-top: 1px solid var(--t-linea);
}
html[data-diseno="nuevo"].tria-armazon .t-pie-ajustes {
  flex: none; width: 32px; height: 32px; display: grid; place-items: center; padding: 0;
  border: 0; border-radius: var(--t-radio-1); background: transparent; color: var(--t-texto-3); cursor: pointer;
}
@media (hover: hover) {
  html[data-diseno="nuevo"].tria-armazon .t-pie-ajustes:hover { background: var(--t-hover); color: var(--t-texto); }
}
/* Panel: la tarjeta del pie de las conversaciones, vestida como el pie del dibujo.
   Es una rejilla (styles.css): su columna, sin tamaño, crecía hasta el nombre entero y un nombre largo («Administrador
   Trasnego Dirección») se salía de la barra y tapaba el engranaje (detalle 1 del lote 3, 25-oct-2026). Con la columna
   minmax(0, 1fr) el nombre se corta con «…» y el engranaje recibe el clic. */
html[data-diseno="nuevo"].tria-armazon #tria-barra .sidebar-footer-card {
  position: relative; flex: 1; min-width: 0; margin: 0; padding: 0; border: 0; background: transparent; box-shadow: none;
  grid-template-columns: minmax(0, 1fr);
}
html[data-diseno="nuevo"].tria-armazon #tria-barra .sidebar-footer-agent {
  display: flex; align-items: center; gap: 8px; width: 100%; min-height: 40px; padding: 4px; margin: 0;
  border: 0; border-radius: var(--t-radio-1); background: transparent; color: var(--t-texto); text-align: left;
}
@media (hover: hover) {
  html[data-diseno="nuevo"].tria-armazon #tria-barra .sidebar-footer-agent:hover { background: var(--t-hover); }
}
html[data-diseno="nuevo"].tria-armazon #tria-barra .sidebar-footer-agent .sidebar-footer-avatar {
  display: grid; place-items: center; width: 32px; height: 32px; flex: none; border-radius: 999px; font-size: var(--t-fs-xs); font-weight: 600;
}
/* styles.css lo esconde en el ordenador con !important (allí tus iniciales iban en la cabecera del chat, que el armazón quita) */
html[data-diseno="nuevo"].tria-armazon #tria-barra #sidebar-user-avatar { display: grid !important; }
html[data-diseno="nuevo"].tria-armazon #tria-barra .sidebar-footer-copy { min-width: 0; display: flex; flex-direction: column; }
html[data-diseno="nuevo"].tria-armazon #tria-barra .sidebar-footer-copy strong { font-size: var(--t-fs-sm); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html[data-diseno="nuevo"].tria-armazon #tria-barra .sidebar-footer-copy small { display: none; }
/* Su menú se abre hacia arriba, por encima de todo (también de una sección abierta) */
html[data-diseno="nuevo"].tria-armazon #tria-barra #sidebar-footer-actions {
  position: absolute; left: 0; right: auto; top: auto; bottom: calc(100% + 8px);
  width: 264px; max-height: calc(100vh - 96px); overflow-y: auto; z-index: 2;
}
/* …y como es más ancho que la barra, mientras está abierto la barra sube por encima de las secciones (van a z 10060-10150):
   si no, la sección tapa la parte del menú que sobresale. Solo en el ordenador: en el móvil el menú va dentro de la hoja. */
@media (min-width: 769px) {
  html[data-diseno="nuevo"].tria-armazon #tria-barra:has(#sidebar-footer-actions:not([hidden]), #admin-menu-cuenta:not([hidden])) { z-index: 10170; }
}
/* Backoffice: tu nombre y su menú, de la barra de arriba al pie */
html[data-diseno="nuevo"].tria-armazon #tria-barra .v2-topbar-cuenta { position: relative; flex: 1; min-width: 0; }
html[data-diseno="nuevo"].tria-armazon #tria-barra .v2-topbar-user {
  width: 100%; min-height: 40px; justify-content: flex-start; gap: 8px; padding: 4px; margin: 0;
  border: 0; border-radius: var(--t-radio-1); background: transparent; color: var(--t-texto); text-align: left;
}
@media (hover: hover) {
  html[data-diseno="nuevo"].tria-armazon #tria-barra .v2-topbar-user:hover { background: var(--t-hover); }
}
/* Venía de la barra oscura de arriba con la letra casi blanca: aquí, la letra de la barra y sin el cargo (como en el panel) */
html[data-diseno="nuevo"].tria-armazon #tria-barra .v2-topbar-user-info { display: flex; flex-direction: column; min-width: 0; }
html[data-diseno="nuevo"].tria-armazon #tria-barra .v2-topbar-user-info strong {
  color: var(--t-texto); font-size: var(--t-fs-sm); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
html[data-diseno="nuevo"].tria-armazon #tria-barra .v2-topbar-user-info small { display: none; }
html[data-diseno="nuevo"].tria-armazon #tria-barra #admin-menu-cuenta { left: 0; right: auto; top: auto; bottom: calc(100% + 8px); }
html[data-diseno="nuevo"].tria-armazon #tria-barra #admin-refresh { order: 2; flex: none; }
html[data-diseno="nuevo"].tria-armazon #tria-barra .t-pie-ajustes { order: 3; }

/* b · Ordenador: todo lo de la app empieza donde acaba la barra */
@media (min-width: 769px) {
  html[data-diseno="nuevo"].tria-armazon #app-shell { margin-left: var(--t-barra-ancho); }
  html[data-diseno="nuevo"].tria-armazon :is(#contacts-dialog, #agenda-dialog, #wesign-dialog, #misval-dialog, #mail-overlay) {
    left: var(--t-barra-ancho) !important; right: 0 !important; top: 0 !important; bottom: 0 !important;
    width: auto !important; max-width: none !important; height: auto !important; max-height: none !important;
    margin: 0 !important; translate: none !important; transform: none !important;
    border-radius: 0 !important; border-width: 0 !important; box-shadow: none !important;
  }
  /* Las conversaciones, como segunda columna de TRIA: sin su marca ni su pie (los dos están ya en la barra) */
  html[data-diseno="nuevo"].tria-armazon #app-shell .sidebar .sidebar-topbar { display: none; }
  /* En la cabecera del chat, lo que ya está en la barra: los atajos, el backoffice y tus iniciales */
  html[data-diseno="nuevo"].tria-armazon :is(#chat-header-agenda, #contacts-header-button, #chat-header-mail, #chat-header-wesign, #chat-backoffice-link, #chat-header-avatar) { display: none !important; }
  /* Backoffice: sin la barra de arriba ni el menú viejo; el contenido, a la derecha de la barra */
  html[data-diseno="nuevo"].tria-armazon .admin-shell { margin-left: var(--t-barra-ancho); }
}
/* El pie de las conversaciones se queda vacío: tu nombre está ahora en la barra (en el móvil, en «Más») */
html[data-diseno="nuevo"].tria-armazon #app-shell .sidebar .sidebar-footer { display: none; }
/* Las secciones no son ventanas: sin velo, sin X para cerrar (para ir a otro sitio está la barra) */
html[data-diseno="nuevo"].tria-armazon :is(#contacts-backdrop, #agenda-backdrop, #wesign-backdrop, #misval-backdrop) { display: none !important; }
html[data-diseno="nuevo"].tria-armazon :is(#close-contacts-dialog, #close-agenda-dialog, #close-wesign-dialog, #close-misval-dialog, #mail-overlay .mail-x) { display: none !important; }
html[data-diseno="nuevo"].tria-armazon :is(.admin-topbar, #admin-nav-panel, #admin-nav-fondo) { display: none !important; }
/* Una sola «CRM» (tarea 62, 24-oct-2026): en el ordenador y en el móvil, el CRM enseña sus 4 pestañas siempre
   (Oportunidades, Locales, Clientes, Captaciones). Antes, en el ordenador, «Clientes» escondía la de Locales y
   «Locales» escondía todas, porque eran dos entradas de la barra. */
html[data-diseno="nuevo"].tria-armazon .admin-layout { grid-template-columns: minmax(0, 1fr) !important; }
html[data-diseno="nuevo"].tria-armazon .admin-stage { grid-column: 1 / -1; min-width: 0; }

html[data-diseno="nuevo"].tria-armazon #tria-barra .t-solo-movil { display: none; }
/* c · Móvil: la barra lateral es la hoja de «Más»; abajo, Hoy · Agenda · CRM · TRIA · Correo · Más */
@media (max-width: 768px) {
  html[data-diseno="nuevo"].tria-armazon #tria-barra { display: none; }
  html[data-diseno="nuevo"].tria-armazon body.t-hoja-abierta #tria-barra {
    display: flex; right: 0; width: auto; bottom: var(--t-alto-barra-movil); z-index: 10180;
    padding: 12px 16px 8px; border-right: 0; background: var(--t-fondo);
    animation: t-aparece var(--t-dur-2) var(--t-curva);
  }
  /* En «Más» solo lo que no está abajo (Correo, Valoraciones, Mensajes y Dirección; Agenda y Firmas ya están abajo) y tu cuenta arriba */
  html[data-diseno="nuevo"].tria-armazon #tria-barra :is(.t-barra-cab, .t-buscar, [data-seccion="hoy"], [data-seccion="agenda"], [data-seccion="clientes"], [data-seccion="locales"], [data-seccion="tria"], [data-seccion="firmas"]) { display: none; }
  html[data-diseno="nuevo"].tria-armazon #tria-barra .t-barra-pie { order: -1; margin: 0 -16px 8px; padding: 0 16px 8px; border-top: 0; border-bottom: 1px solid var(--t-linea); }
  html[data-diseno="nuevo"].tria-armazon #tria-barra .t-barra-cuerpo { margin: 0 -16px; padding: 0 16px; }
  html[data-diseno="nuevo"].tria-armazon #tria-barra :is(.t-nav, .t-pleg) { height: 44px; font-size: var(--t-fs-md); }
  html[data-diseno="nuevo"].tria-armazon #tria-barra .t-pie-ajustes { width: 44px; height: 44px; }
  html[data-diseno="nuevo"].tria-armazon #tria-barra #sidebar-footer-actions,
  html[data-diseno="nuevo"].tria-armazon #tria-barra #admin-menu-cuenta { position: absolute; top: calc(100% + 4px); bottom: auto; left: 0; right: 0; width: auto; z-index: 3; }
  html[data-diseno="nuevo"].tria-armazon :is(#chat-backoffice-link, #chat-header-avatar) { display: none !important; }
  html[data-diseno="nuevo"].tria-armazon #tria-barra .t-solo-movil { display: block; }
  /* El cajón de las conversaciones, cerrado, dejaba asomar su sombra por el borde izquierdo */
  html[data-diseno="nuevo"].tria-armazon:not(.sidebar-mobile-open) #app-shell .sidebar { box-shadow: none; }
}
/* La barra de abajo: la misma pieza de siempre (styles.css .barra-movil), con seis sitios (como la vieja) */
@media (max-width: 768px) {
  html[data-diseno="nuevo"].tria-armazon #barra-movil.t-barra-movil { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  html[data-diseno="nuevo"].tria-armazon #barra-movil.t-barra-movil .barra-movil-item { position: relative; text-decoration: none; }
  html[data-diseno="nuevo"].tria-armazon #barra-movil.t-barra-movil .t-ico { width: 24px; height: 24px; fill: currentColor; }
  html[data-diseno="nuevo"].tria-armazon #barra-movil.t-barra-movil .t-nav-n {
    position: absolute; top: 4px; left: calc(50% + 6px); min-width: 16px; height: 16px; padding: 0 4px;
    display: grid; place-items: center; border-radius: 999px;
    background: var(--t-texto-3); color: var(--t-sobre-azul); font-size: var(--t-fs-3xs); font-weight: 600;
  }
  html[data-diseno="nuevo"].tria-armazon #barra-movil.t-barra-movil .t-nav-n.rojo { background: var(--t-ko); color: var(--t-sobre-azul); }
}

/* ═══ «Tu cuenta y ajustes»: el menú de cuenta deja de estar SOLO tras el engranaje (dibujo aprobado 24-oct-2026) ═══
   Queja de Javidan: en «Más» solo quedaban 2 entradas y lo del engranaje estaba escondido. Se baja a «Más» lo que
   había tras el engranaje, en dos grupos con título: «Secciones» (ya existía, t-solo-movil) y «Tu cuenta y ajustes».
   En el ORDENADOR el menú sigue siendo el desplegable del pie (ahora con su título arriba); en el MÓVIL baja EN LÍNEA
   a la hoja, como segundo grupo tras «Secciones» (y antes de «Dirección»). El engranaje se queda como atajo.
   TODO gateado al diseño nuevo (#tria-barra solo existe con él): el diseño clásico de los asesores NO se toca. */

/* «Valoraciones» ya es una sección de la barra (21-oct): el menú de cuenta no la repite. SOLO en el diseño nuevo
   (dentro de #tria-barra, donde se mueve la tarjeta de cuenta). En el clásico #misval-button sigue siendo el ÚNICO
   acceso a Valoraciones y por eso NO se añade a las reglas compartidas de styles.css (habría roto el clásico). */
html[data-diseno="nuevo"].tria-armazon #tria-barra #misval-button { display: none !important; }

/* El título del grupo vive DENTRO del propio menú: así sale igual en el desplegable del engranaje (ordenador) y en
   línea en la hoja «Más» (móvil). Mismo estilo que los demás títulos de grupo (.t-grupo-tit). */
html[data-diseno="nuevo"].tria-armazon #tria-barra .t-cuenta-tit { padding-top: 4px; }

@media (max-width: 768px) {
  /* En la hoja «Más», el menú de cuenta va EN LÍNEA dentro del grupo «Tu cuenta y ajustes» (.t-cuenta), no como
     desplegable del pie: ocupa el ancho de la hoja y se ve siempre (anula el position:absolute y el [hidden]). */
  html[data-diseno="nuevo"].tria-armazon #tria-barra .t-cuenta :is(#sidebar-footer-actions, #admin-menu-cuenta) {
    display: flex !important; flex-direction: column; position: static; inset: auto;
    width: auto; max-height: none; overflow: visible; z-index: auto;
    margin: 0; padding: 0; border: 0; background: transparent; box-shadow: none;
    /* En línea siempre se ve y se pulsa: el menú conserva su atributo [hidden] (el engranaje lo alterna y en el móvil
       no hace falta), y la regla de fundido de arriba lo dejaba a opacity:0 / pointer-events:none. Aquí se anula. */
    opacity: 1; translate: none; pointer-events: auto; animation: none; transition: none;
  }
  /* Tu nombre y tu avatar ya están arriba, en el pie de la hoja: dentro del grupo no se repiten. */
  html[data-diseno="nuevo"].tria-armazon #tria-barra .t-cuenta :is(.sidebar-user-menu-head, .sidebar-user-menu-head + .sidebar-user-menu-divider, .admin-menu-cuenta-quien) { display: none; }

  /* El engranaje (.t-pie-ajustes) SOBRA en la hoja «Más» del móvil: «Configuración» ya está en «Tu cuenta y
     ajustes» (OK de Javidan, 24-oct, viendo despues-asesor-movil-mas.png). Se oculta SOLO aquí (móvil). En el pie
     de la barra de ESCRITORIO se queda como atajo que abre el menú de cuenta: ese caso es otra media query
     (min-width ≥ 769) y NO lo toca esta regla. La tarjeta (avatar + nombre) es flex:1, así que al irse el engranaje
     ocupa todo el ancho, sin hueco raro a la derecha. */
  html[data-diseno="nuevo"].tria-armazon #tria-barra .t-pie-ajustes { display: none; }

  /* Las filas del menú de cuenta se visten IGUAL que las secciones de la hoja (.t-nav): mismo tamaño (--t-fs-md),
     peso (500), color (--t-texto-2), alto (44 px), hueco (8 px) e icono (16 px). Antes salían más grandes, en
     negrita y con iconos más gruesos (estilo del desplegable del escritorio, que SÍ se queda como está). */
  html[data-diseno="nuevo"].tria-armazon #tria-barra .t-cuenta :is(.sidebar-user-menu-item, .admin-menu-cuenta-salir, .sidebar-user-menu-back) {
    grid-template-columns: 16px minmax(0, 1fr) auto;
    min-height: 44px; gap: 8px; padding: 0 8px;
    font-size: var(--t-fs-md); font-weight: 500; color: var(--t-texto-2);
  }
  /* El icono del menú de cuenta es un fondo (SVG con trazo blanco que el claro invierte a oscuro): a 16 px y con la
     misma claridad gris que el icono de línea de las secciones (--t-texto-2 ≈ negro al 60 %). */
  html[data-diseno="nuevo"].tria-armazon #tria-barra .t-cuenta .sidebar-user-menu-icon {
    width: 16px; height: 16px; background-size: 16px 16px; opacity: .6;
  }
  html[data-diseno="nuevo"].tria-armazon #tria-barra .t-cuenta :is(.admin-menu-cuenta-salir .ph, .sidebar-user-menu-back-arrow) { width: 16px; height: 16px; font-size: var(--t-fs-md); }
  /* La flecha «›» de Configuración: discreta y del tamaño de la fila (era muy grande). */
  html[data-diseno="nuevo"].tria-armazon #tria-barra .t-cuenta .sidebar-user-menu-chevron { font-size: var(--t-fs-md); opacity: .55; color: var(--t-texto-3); }
  /* «Notificaciones» con el MISMO color que Perfil y las demás filas también cuando está bloqueada o activa (ver la
     regla de debajo, fuera del móvil). */
  html[data-diseno="nuevo"].tria-armazon #tria-barra .t-cuenta #notifications-button:is(.has-push-denied, .has-push-active):not(:disabled) { color: var(--t-texto-2) !important; }
}

/* «Notificaciones» sin negrita (OK de Javidan, 24-oct 22:47). Con los avisos bloqueados, styles.css le pone
   color:#fff y el tema claro lo invierte con !important a var(--text) (casi negro), así que salía más oscura que
   Perfil y el resto. En el diseño nuevo se queda del color de las demás filas del menú de cuenta (var(--w92) en el
   desplegable del escritorio; en la hoja «Más» del móvil, la regla de arriba). El clásico no cambia. */
html[data-diseno="nuevo"] .sidebar-user-menu #notifications-button:is(.has-push-denied, .has-push-active):not(:disabled) { color: var(--w92) !important; }

/* d · El buscador único (⌘K) */
html[data-diseno="nuevo"].tria-armazon #tria-buscador { position: fixed; inset: 0; z-index: 2147483000; font-family: var(--t-fuente); }
html[data-diseno="nuevo"].tria-armazon #tria-buscador[hidden] { display: none; }
html[data-diseno="nuevo"].tria-armazon .t-buscador-velo { position: absolute; inset: 0; background: rgba(16, 24, 40, .32); animation: t-aparece var(--t-dur-2) var(--t-curva); }
html[data-diseno="nuevo"].tria-armazon .t-buscador-caja {
  position: relative; margin: 12vh auto 0; width: min(640px, calc(100% - 32px));
  display: flex; flex-direction: column; max-height: 72vh; overflow: hidden;
  background: var(--t-fondo); color: var(--t-texto);
  border: 1px solid var(--t-linea); border-radius: var(--t-radio-2); box-shadow: var(--t-sombra-flota);
  animation: t-sube var(--t-dur-2) var(--t-curva);
}
html[data-diseno="nuevo"].tria-armazon .t-buscador-campo { display: flex; align-items: center; gap: 8px; height: 48px; padding: 0 12px; border-bottom: 1px solid var(--t-linea); color: var(--t-texto-3); }
html[data-diseno="nuevo"].tria-armazon .t-buscador-campo .t-ico { width: 16px; height: 16px; fill: currentColor; flex: none; }
html[data-diseno="nuevo"].tria-armazon .t-buscador-campo input {
  flex: 1; min-width: 0; height: 40px; border: 0; outline: 0; background: transparent; box-shadow: none;
  color: var(--t-texto); font: 400 var(--t-fs-md) var(--t-fuente);
}
html[data-diseno="nuevo"].tria-armazon .t-buscador-campo input::-webkit-search-cancel-button { display: none; }
html[data-diseno="nuevo"].tria-armazon .t-buscador-lista { overflow-y: auto; padding: 4px; }
html[data-diseno="nuevo"].tria-armazon .t-buscador-grupo { margin: 0; padding: 8px 8px 4px; font-size: var(--t-fs-2xs); font-weight: 500; color: var(--t-texto-3); }
html[data-diseno="nuevo"].tria-armazon .t-buscador-nada { margin: 0; padding: 12px 8px; font-size: var(--t-fs-sm); color: var(--t-texto-2); }
html[data-diseno="nuevo"].tria-armazon .t-buscador-fila {
  display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 4px 8px;
  border-radius: var(--t-radio-1); cursor: pointer; color: var(--t-texto);
}
html[data-diseno="nuevo"].tria-armazon .t-buscador-fila .t-ico { width: 16px; height: 16px; fill: var(--t-texto-3); flex: none; }
html[data-diseno="nuevo"].tria-armazon .t-buscador-fila[aria-selected="true"] { background: var(--t-hover); }
@media (hover: hover) {
  html[data-diseno="nuevo"].tria-armazon .t-buscador-fila:hover { background: var(--t-hover); }
}
html[data-diseno="nuevo"].tria-armazon .t-bf-tx { min-width: 0; display: flex; flex-direction: column; }
html[data-diseno="nuevo"].tria-armazon .t-bf-tit { font-size: var(--t-fs-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html[data-diseno="nuevo"].tria-armazon .t-bf-sub { font-size: var(--t-fs-xs); color: var(--t-texto-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 768px) {
  html[data-diseno="nuevo"].tria-armazon .t-buscador-caja { margin-top: 16px; max-height: calc(100% - 32px); }
  html[data-diseno="nuevo"].tria-armazon .t-buscador-fila { min-height: 44px; }
  html[data-diseno="nuevo"].tria-armazon .t-buscador-campo input { font-size: 16px; }
}

/* «Actualizar» de cada pestaña (28-oct-2026): botón flotante abajo a la derecha (arriba tapaba las pestañas del CRM,
   la campana y «+ Nueva»); en el móvil, encima de la barra de abajo. Con id para ganar al .btn.ghost transparente. */
html[data-diseno="nuevo"] #t-actualizar { position: fixed; top: auto; bottom: 20px; right: 20px; z-index: 10150; display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 6px 14px; background: var(--t-fondo, #fff); color: var(--t-texto-2, #3D4553); border: 1px solid var(--t-linea-2, #D5DAE1); border-radius: 999px; box-shadow: 0 2px 8px rgba(16,24,40,.12); }
html[data-diseno="nuevo"] #t-actualizar svg { width: 16px; height: 16px; fill: currentColor; }
@media (hover: hover) { html[data-diseno="nuevo"] #t-actualizar:hover:not(:disabled) { background: var(--t-hover, #F1F3F6); } }
html[data-diseno="nuevo"] #t-actualizar[hidden] { display: none; }
html[data-diseno="nuevo"] #t-actualizar:disabled { opacity: .6; }
/* Tarea 166: si «Actualizar» quedaría encima de un botón (p. ej. «Revisar y crear» al bajar), se aparta (tria-armazon.js). */
html[data-diseno="nuevo"] #t-actualizar.t-actualizar-apartado { opacity: 0; visibility: hidden; pointer-events: none; }
@media (max-width: 760px) { html[data-diseno="nuevo"] #t-actualizar { bottom: calc(var(--t-alto-barra-movil, 64px) + 12px + env(safe-area-inset-bottom, 0px)); right: 12px; } }
/* Con contactos marcados en el CRM sale abajo la barra de acciones: el «Actualizar» se aparta para no tapar «Quitar la selección» (solo con el CRM a la vista y sin ficha: la selección sigue al cambiar de pestaña). */
html[data-diseno="nuevo"]:has(#contacts-dialog:not([aria-hidden="true"]):not(.showing-detail) #cqx-lote-barra:not([hidden])) #t-actualizar { display: none; }

/* Tarea 166 · cuenta «prueba» (solo_lectura): lo ve todo como dirección, pero SIN botones de escribir ni la contraseña
   del formulario (además, el servidor ya no se la manda: codigo_formulario va en tn_solo_lectura_campo_prohibido).
   Solo con html[data-diseno="nuevo"] body.tn-cuenta-solo-lectura (app.js / admin.js): dirección y Javidan lo ven igual que antes. */
html[data-diseno="nuevo"] body.tn-cuenta-solo-lectura .misval-codigo,
html[data-diseno="nuevo"] body.tn-cuenta-solo-lectura .val-codigo,
html[data-diseno="nuevo"] body.tn-cuenta-solo-lectura .misval-create-btn,
html[data-diseno="nuevo"] body.tn-cuenta-solo-lectura .misval-discard-btn,
html[data-diseno="nuevo"] body.tn-cuenta-solo-lectura .misval-reabrir-btn,
html[data-diseno="nuevo"] body.tn-cuenta-solo-lectura .misval-asignar-sel,
html[data-diseno="nuevo"] body.tn-cuenta-solo-lectura .misval-asignar-btn,
html[data-diseno="nuevo"] body.tn-cuenta-solo-lectura [data-accion-crm],
html[data-diseno="nuevo"] body.tn-cuenta-solo-lectura .t-cv-botones,
html[data-diseno="nuevo"] body.tn-cuenta-solo-lectura [data-t-cv-resp],
html[data-diseno="nuevo"] body.tn-cuenta-solo-lectura [data-t-cv-escribir],
/* 166 (30-oct, juez en vivo): decisiones de Inicio («Ya se lo he mandado», «No mandarlo», respuestas, «Ya está hecho»),
   mejoras («Confirmar para construir», «Descartar») y el chat de dirección («Guardar como propuesta», «Borrar la conversación»). */
html[data-diseno="nuevo"] body.tn-cuenta-solo-lectura [data-inicio-listado],
html[data-diseno="nuevo"] body.tn-cuenta-solo-lectura [data-inicio-responder],
html[data-diseno="nuevo"] body.tn-cuenta-solo-lectura [data-inicio-hecho],
html[data-diseno="nuevo"] body.tn-cuenta-solo-lectura [data-improve-confirm],
html[data-diseno="nuevo"] body.tn-cuenta-solo-lectura [data-improve-dismiss],
html[data-diseno="nuevo"] body.tn-cuenta-solo-lectura #admin-director-chat-capture,
html[data-diseno="nuevo"] body.tn-cuenta-solo-lectura #admin-director-chat-clear,
/* 166 bis (30-oct): «Enviar» de Captación y «Confirmar»/«Descartar» de pendientes. */
html[data-diseno="nuevo"] body.tn-cuenta-solo-lectura [data-cap2-dec],
html[data-diseno="nuevo"] body.tn-cuenta-solo-lectura [data-pending-confirm],
html[data-diseno="nuevo"] body.tn-cuenta-solo-lectura [data-pending-dismiss],
html[data-diseno="nuevo"] body.tn-cuenta-solo-lectura [data-t-te-nueva] { display: none !important; }