/*
  IDBOX EN PERLA — EL MODO CLARO (2026-10-18)
  apps/idbox/shared/perla.css, servida en /perla.css, despues de /linea-c.css en la Caja y en la Cabina del dueño.

  El fundador: *«hazme una propuesta para Cabina, paneles, empresa, contactos, chat y agenda en modo claro»*, y sobre
  diseno/maquetas/idbox-modo-claro.html: *«Vamonos con A»* — Perla: el perlado de la Caja llevado a todo. Fondo perla
  con sus luces azul y durazno, superficies de vidrio blanco, texto casi negro, el cian de Nix oscurecido para leerse
  en claro (#0891B2), lo escogido en negro con letra blanca (el reves del blanco de la C en oscuro), y lo que flota
  sigue siendo vidrio, ahora blanco.

  CUANDO: con la piel en claro (`data-modo="perlado"`). En la Caja la pone el sol (Auto · Claro · Oscuro) o la
  camara; en la Cabina del dueño, la que el escogio con ese mismo sol (index.html, «IDBOX EN PERLA»).
  TODO CUELGA DE `html.perla[data-modo="perlado"]`: sin la marca, esta hoja no cambia nada.
  PRIMERO SOLO EN VALERIA (la marca la ponen las dos cabeceras solo alli).

  COMO ESTA HECHA: es el ESPEJO de la linea C (linea-c.css) y del pozo de la Cabina (cabin.css, «EL POZO DE ERMINE»).
  Cada regla oscura de alla tiene aqui la suya en claro, con su mismo selector y la marca delante (dos escalones mas de
  peso y cargada despues: gana sin !important). La escala, de lo oscuro a lo claro:
     #131313 pozo ............ el fondo perla (con sus luces)
     #232323 cuadro .......... vidrio blanco  rgba(255,255,255,.72), filo blanco, sombra azulada suave
     #2C2C2C encima .......... rgba(15,20,40,.06)   (al tocarlo, .10)
     #383838 dialogo ......... rgba(15,20,40,.12)
     #F5F5F5 / #A6A6A6 ....... #0B0D14 / #5A5F6E
     lo escogido en blanco ... en #0B0D14 con letra blanca
     lo que flota (A) ........ vidrio blanco rgba(255,255,255,.72), filo blanco, sombra rgba(40,50,90,.16)
*/

/* ===== 0 · LAS FICHAS ===== */
html.perla[data-modo="perlado"] {
  --perla-fondo: radial-gradient(60% 30% at 12% 6%, rgba(120, 140, 255, .30), transparent 70%),
                 radial-gradient(55% 32% at 92% 58%, rgba(150, 140, 255, .22), transparent 70%),
                 radial-gradient(55% 28% at 25% 102%, rgba(255, 175, 135, .28), transparent 70%), #eef0f6;
  --perla-sup: rgba(255, 255, 255, .72);
  --perla-sup-solido: #fbfbfd;
  --perla-borde: rgba(255, 255, 255, .95);
  --perla-sombra: 0 10px 30px rgba(40, 50, 90, .10);
  --perla-sombra-flota: 0 18px 40px rgba(40, 50, 90, .16);
  --perla-sup2: rgba(15, 20, 40, .06);
  --perla-sup2-toque: rgba(15, 20, 40, .10);
  --perla-dialogo: rgba(15, 20, 40, .12);
  --perla-linea: rgba(15, 20, 40, .08);
  --perla-tx: #0b0d14;
  --perla-tx2: #5a5f6e;
  --perla-tx3: #8a8f9c;
  --perla-ac: #0891b2;
}
/* Los grises de la C (#F5F5F5 · #A6A6A6) y el pozo en las fichas que leen todas las pantallas, en claro.
   🔴 EL ESCANEO Y LA CORTINA NO SE ACLARAN (fundador, 2026-10-18, con su captura del escaneo en claro: «desliguemos el
   escaneo del modo claro» y «la cortina de la animación también»). #s0 y #s1 (el escaneo) y #cortina («Tu IDBox»)
   llevan .obsidiana para conservar su negro en cualquier piel (370704d, «la pantalla de escaneo no debe cambiar
   jamás»); esta regla los aclaraba por llevar esa marca. La cortina de IDBox (cortina-idbox.js) pinta su propio suelo. */
html.perla.linea-c[data-modo="perlado"],
html.perla[data-modo="perlado"] .obsidiana:not(#s0):not(#s1):not(#cortina),
html.perla[data-modo="perlado"] .perlado,
html.perla.linea-c[data-modo="perlado"] #dentro, html.perla.linea-c[data-modo="perlado"] #dentro .obsidiana,
html.perla.linea-c[data-modo="perlado"] #ficha, html.perla.linea-c[data-modo="perlado"] #ficha .obsidiana,
html.perla.linea-c[data-modo="perlado"] #charlas, html.perla.linea-c[data-modo="perlado"] #charla,
html.perla[data-modo="perlado"] #empresa {
  --fondo: #eef0f6; --fondo-2: #f7f9fc; --superficie: rgba(255, 255, 255, .72);
  --texto: #0b0d14; --texto-suave: rgba(11, 13, 20, .78); --texto-2: #5a5f6e; --texto-3: #8a8f9c;
  --panel: rgba(255, 255, 255, .72); --panel-solido: #fbfbfd; --borde: rgba(255, 255, 255, .95); --filo: rgba(15, 20, 40, .08);
  --linea: rgba(15, 20, 40, .08); --line-2: rgba(15, 20, 40, .08); --humo: #eef0f6;
  --fondo-luz: radial-gradient(58% 38% at 14% 4%, rgba(120, 140, 255, .22), transparent 62%);
}

/* ===== 1 · EL SUELO: el pozo se vuelve perla ===== */
html.perla[data-modo="perlado"][data-pozo="ermine"],
html.perla[data-modo="perlado"][data-pozo="ermine"].en-empresa { background: #eef0f6; }
html.perla[data-modo="perlado"][data-pozo="ermine"]:not(.perla-nada) body { background: var(--perla-fondo); background-attachment: fixed; }
html.perla[data-modo="perlado"][data-pozo="ermine"] #empresa.empresa { background: var(--perla-fondo); }

/* ===== 2 · LOS CUADROS (#232323): vidrio blanco ===== */
html.perla.linea-c[data-modo="perlado"] #dentro .panel,
html.perla.linea-c[data-modo="perlado"] #ficha .ficha-cuerpo,
html.perla.linea-c[data-modo="perlado"] .tab-tarjeta,
html.perla.linea-c[data-modo="perlado"] .esg-bloque,
html.perla.linea-c[data-modo="perlado"] .cz-bloque,
html.perla.linea-c[data-modo="perlado"][data-pozo] #empresa .cajon-vacio,
html.perla.linea-c[data-modo="perlado"][data-pozo] #empresa .emp-resumen,
html.perla.linea-c[data-modo="perlado"][data-pozo] #empresa .emp-pregunta,
html.perla.linea-c[data-modo="perlado"][data-pozo] #empresa .emp-prox,
html.perla.linea-c[data-modo="perlado"][data-pozo] #empresa .emp-desplegar,
html.perla[data-modo="perlado"][data-pozo="ermine"] #empresa .cajon {
  background: var(--perla-sup);
  border-color: var(--perla-borde);
  color: var(--perla-tx);
}
html.perla.linea-c[data-modo="perlado"] #dentro .panel,
html.perla.linea-c[data-modo="perlado"] #ficha .ficha-cuerpo,
html.perla.linea-c[data-modo="perlado"] .tab-tarjeta,
html.perla.linea-c[data-modo="perlado"] .esg-bloque,
html.perla.linea-c[data-modo="perlado"] .cz-bloque,
html.perla.linea-c[data-modo="perlado"][data-pozo] #empresa .cajon-vacio,
html.perla.linea-c[data-modo="perlado"][data-pozo] #empresa .emp-resumen,
html.perla.linea-c[data-modo="perlado"][data-pozo] #empresa .emp-pregunta,
html.perla.linea-c[data-modo="perlado"][data-pozo] #empresa .emp-prox,
html.perla.linea-c[data-modo="perlado"][data-pozo] #empresa .emp-desplegar,
html.perla.linea-c[data-modo="perlado"][data-pozo] #empresa .cajon:not(.recien):not(.agarrado) { box-shadow: var(--perla-sombra); }
html.perla[data-modo="perlado"][data-pozo="ermine"] #empresa .cajon:active { background: #f6f7fa; border-color: var(--perla-borde); }
html.perla[data-modo="perlado"][data-pozo="ermine"] #empresa .cajon.agarrado,
html.perla[data-modo="perlado"] #empresaTarjetas .cajon.tp-alzada { background: #ffffff; border-color: var(--perla-borde); box-shadow: 0 24px 56px rgba(40, 50, 90, .22); }

/* ===== 3 · LO DE ADENTRO (#2C2C2C): un velo de tinta ===== */
html.perla.linea-c[data-modo="perlado"] .tab-fila,
html.perla.linea-c[data-modo="perlado"] .camp-panel,
html.perla.linea-c[data-modo="perlado"] .camp-hora,
html.perla.linea-c[data-modo="perlado"] .coti-hoja,
html.perla.linea-c[data-modo="perlado"] #ficha .nota,
html.perla.linea-c[data-modo="perlado"] .tab-seg,
html.perla.linea-c[data-modo="perlado"] .cz-input,
html.perla.linea-c[data-modo="perlado"] #esgPersonas,
html.perla.linea-c[data-modo="perlado"] .bc-campo,
html.perla.linea-c[data-modo="perlado"] .nix-campo,
html.perla.linea-c[data-modo="perlado"][data-pozo] #empresa .cajon-icono { background: var(--perla-sup2); border-color: transparent; }
html.perla[data-modo="perlado"][data-pozo="ermine"] #empresa .cajon-icono { background: var(--perla-sup2); color: #2a2e3a; }
/* Los botones y los chips, rellenos de tinta; el escogido en negro. */
html.perla.linea-c[data-modo="perlado"] .accion,
html.perla.linea-c[data-modo="perlado"] .control,
html.perla.linea-c[data-modo="perlado"] .pastilla,
html.perla.linea-c[data-modo="perlado"] .lupa,
html.perla.linea-c[data-modo="perlado"] .cz-agregar button,
html.perla.linea-c[data-modo="perlado"][data-pozo] #empresa .emp-accion { background: var(--perla-sup2); border-color: transparent; color: var(--perla-tx); }
html.perla.linea-c[data-modo="perlado"] .accion:active,
html.perla.linea-c[data-modo="perlado"] .control:active,
html.perla.linea-c[data-modo="perlado"][data-pozo] #empresa .emp-accion:active,
html.perla.linea-c[data-modo="perlado"][data-pozo] #empresa .emp-campo:active { background: var(--perla-sup2-toque); }
html.perla.linea-c[data-modo="perlado"] .pastilla[aria-pressed="true"],
html.perla.linea-c[data-modo="perlado"] .tab-seg button.puesto { background: var(--perla-tx); color: #ffffff; }
html.perla.linea-c[data-modo="perlado"] i.feria,
html.perla.linea-c[data-modo="perlado"] .evento,
html.perla.linea-c[data-modo="perlado"] .voz-crms span,
html.perla.linea-c[data-modo="perlado"] .camp-nuevo,
html.perla.linea-c[data-modo="perlado"] .copi-chip { background: var(--perla-sup2); border-color: transparent; color: var(--perla-tx2); }
html.perla.linea-c[data-modo="perlado"][data-pozo] #empresa .emp-campo { background: var(--perla-sup2); border-color: transparent; color: var(--perla-tx2); }
/* El logo de la empresa sigue en su cuadro oscuro: el logosimbolo es blanco. */
html.perla.linea-c[data-modo="perlado"][data-pozo] #empresa .emp-icono { background: #0b0d14; }

/* ===== 4 · LA LETRA QUE LA C ESCRIBIO A MANO ===== */
html.perla.linea-c[data-modo="perlado"][data-pozo] #empresa .emp-quien h2,
html.perla.linea-c[data-modo="perlado"][data-pozo] #empresa .emp-prox-que,
html.perla.linea-c[data-modo="perlado"][data-pozo] #empresa .emp-dice,
html.perla.linea-c[data-modo="perlado"][data-pozo] #empresa .emp-desplegar-nombre,
html.perla.linea-c[data-modo="perlado"][data-pozo] #empresa .cajon-nombre,
html.perla[data-modo="perlado"][data-pozo="ermine"] #empresa .cajon-nombre { color: var(--perla-tx); }
html.perla.linea-c[data-modo="perlado"][data-pozo] #empresa .emp-quien p,
html.perla.linea-c[data-modo="perlado"][data-pozo] #empresa .emp-de,
html.perla.linea-c[data-modo="perlado"][data-pozo] #empresa .emp-ultima,
html.perla.linea-c[data-modo="perlado"][data-pozo] #empresa .emp-titulo,
html.perla.linea-c[data-modo="perlado"][data-pozo] #empresa .emp-prox-cuando,
html.perla.linea-c[data-modo="perlado"][data-pozo] #empresa .emp-prox-donde,
html.perla.linea-c[data-modo="perlado"][data-pozo] #empresa .emp-desplegar-que,
html.perla.linea-c[data-modo="perlado"][data-pozo] #empresa .emp-desplegar-icono,
html.perla.linea-c[data-modo="perlado"][data-pozo] #empresa .cajon-que,
html.perla[data-modo="perlado"][data-pozo="ermine"] #empresa .cajon-que { color: var(--perla-tx2); }
html.perla.linea-c[data-modo="perlado"] .cabecera.obsidiana,
html.perla.linea-c[data-modo="perlado"] #orden.obsidiana { border-color: var(--perla-borde); border-top-color: var(--perla-borde); }
html.perla[data-modo="perlado"][data-pozo="ermine"] #empresa .empresa-cabecera { border-color: var(--perla-borde); border-top-color: var(--perla-borde); box-shadow: var(--perla-sombra); }

/* ===== 5 · LO QUE FLOTA (la A): vidrio blanco ===== */
html.perla.linea-c[data-modo="perlado"] .nix-menu,
html.perla.linea-c[data-modo="perlado"] #nixMenuEmpresa,
html.perla.linea-c[data-modo="perlado"] .mas-menu,
html.perla.linea-c[data-modo="perlado"] .ll-menu,
html.perla.linea-c[data-modo="perlado"] .ag-hoja,
html.perla.linea-c[data-modo="perlado"] .ag-lente .ag-hoja,
html.perla[data-modo="perlado"] .tp-menu,
html.perla[data-modo="perlado"] .eventos-menu {
  background: var(--perla-sup);
  border: 1px solid var(--perla-borde);
  box-shadow: var(--perla-sombra-flota);
  color: var(--perla-tx);
}
html.perla.linea-c[data-modo="perlado"] #nixMenuEmpresa .nix-item,
html.perla[data-modo="perlado"] .tp-item { background: rgba(15, 20, 40, .05); color: var(--perla-tx); }
html.perla.linea-c[data-modo="perlado"] #nixMenuEmpresa .nix-item:active,
html.perla[data-modo="perlado"] .tp-item:active,
html.perla[data-modo="perlado"] .tp-item:focus-visible,
html.perla[data-modo="perlado"] .tm-menu .tm-primera { background: var(--perla-sup2-toque); }
html.perla[data-modo="perlado"] .tp-item svg { color: #3a3f4c; }
html.perla[data-modo="perlado"] .tm-texto small,
html.perla[data-modo="perlado"] .tp-titulo,
html.perla[data-modo="perlado"] .tp-volver,
html.perla[data-modo="perlado"] .tm-etiqueta,
html.perla[data-modo="perlado"] .ll-texto { color: var(--perla-tx2); }
html.perla[data-modo="perlado"] .ll-titulo { color: var(--perla-tx); }
html.perla[data-modo="perlado"] .tp-campo { background: var(--perla-sup2); color: var(--perla-tx); }
html.perla[data-modo="perlado"] .tp-campo:focus { outline-color: rgba(15, 20, 40, .24); }
html.perla[data-modo="perlado"] .tp-no { background: var(--perla-sup2); color: var(--perla-tx); }
html.perla[data-modo="perlado"] .tp-si { background: var(--perla-tx); color: #ffffff; }
html.perla[data-modo="perlado"] .tm-interruptor { background: var(--perla-dialogo); }
html.perla[data-modo="perlado"] .tm-interruptor::after { background: #ffffff; box-shadow: 0 1px 3px rgba(15, 20, 40, .25); }
html.perla[data-modo="perlado"] [aria-checked="true"] > .tm-interruptor { background: var(--perla-tx); }
html.perla[data-modo="perlado"] [aria-checked="true"] > .tm-interruptor::after { background: #ffffff; }
html.perla[data-modo="perlado"] .tm-flecha { color: var(--perla-tx2); }
html.perla[data-modo="perlado"] .tp-pista { background: rgba(255, 255, 255, .6); border-color: var(--perla-linea); color: var(--perla-tx2); }
html.perla[data-modo="perlado"] .tp-pista-x { color: var(--perla-tx3); }
/* El velo detras de lo sostenido y de la agenda: una sombra azulada leve, no una noche. */
html.perla[data-modo="perlado"] .tp-velo,
html.perla[data-modo="perlado"] .ag-capa { background: rgba(10, 12, 20, .18); }
/* El aviso: solido (el fundido sobre un vidrio destella, §7g), en blanco. */
html.perla.linea-c[data-modo="perlado"] .pancarta,
html.perla[data-modo="perlado"] .pancarta { background: var(--perla-sup-solido); border-color: var(--perla-linea); box-shadow: var(--perla-sombra-flota); }
/* La barra de Nix en Empresa, abierta. */
html.perla[data-modo="perlado"][data-pozo="ermine"].en-empresa .nix-barra { background: rgba(255, 255, 255, .92); }
/* La agenda por dentro: los chips de la C en tinta; el escogido en negro. */
html.perla.linea-c[data-modo="perlado"] .ag-v,
html.perla.linea-c[data-modo="perlado"] .ag-x { background: var(--perla-sup2); border-color: transparent; color: var(--perla-tx); }
html.perla.linea-c[data-modo="perlado"] .ag-si { background: var(--perla-tx); color: #ffffff; }
html.perla.linea-c[data-modo="perlado"] .ag-si b { color: #ffffff; }
html.perla.linea-c[data-modo="perlado"] .ag-prox + .ag-prox { border-top-color: var(--perla-linea); }
html.perla[data-modo="perlado"] .ag-aviso { background: var(--perla-sup-solido); color: var(--perla-tx); }

/* ===== 6 · LA CAJA: CABINA Y PANELES ===== */
/* Las cuatro tarjetas: vidrio blanco, letra casi negra y el cian de Nix oscurecido. El verde de Nix al aterrizar
   (access-granted-card) trae su !important y sigue mandando encima. */
html.perla.linea-c-caja[data-modo="perlado"] .tile {
  background-color: var(--perla-sup);
  -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%);
  border-color: var(--perla-borde);
  box-shadow: var(--perla-sombra);
  color: var(--perla-tx);
}
html.perla.linea-c-caja[data-modo="perlado"] .tile svg { color: var(--perla-ac); }
html.perla.linea-c-caja[data-modo="perlado"] .ch-barra,
html.perla.linea-c-caja[data-modo="perlado"] .ch-campo,
html.perla.linea-c-caja[data-modo="perlado"] #leadName,
html.perla.linea-c-caja[data-modo="perlado"] #leadEmail,
html.perla.linea-c-caja[data-modo="perlado"] #leadPhone,
html.perla.linea-c-caja[data-modo="perlado"] #leadNote,
html.perla.linea-c-caja[data-modo="perlado"] .priv-cerrar,
html.perla.linea-c-caja[data-modo="perlado"] .ag2-x { background: var(--perla-sup2); border-color: transparent; }
html.perla.linea-c-caja[data-modo="perlado"] .ch-flecha { background: var(--perla-dialogo); color: var(--perla-tx2); }
html.perla.linea-c-caja[data-modo="perlado"] #nixMenu,
html.perla.linea-c-caja[data-modo="perlado"] .priv-caja,
html.perla.linea-c-caja[data-modo="perlado"] .ch-chat,
html.perla.linea-c-caja[data-modo="perlado"] .ch-hoja,
html.perla.linea-c-caja[data-modo="perlado"] .ag2-hoja,
html.perla.linea-c-caja[data-modo="perlado"] .ag2-lente .ag2-hoja { background-color: var(--perla-sup); border-color: var(--perla-borde); color: var(--perla-tx); }
html.perla.linea-c-caja[data-modo="perlado"] #nixMenu .nix-item { background: rgba(15, 20, 40, .05); }
html.perla.linea-c-caja[data-modo="perlado"] .ag2-v { background: var(--perla-sup2); border-color: transparent; color: var(--perla-tx); }
html.perla.linea-c-caja[data-modo="perlado"] .ag2-si { background: var(--perla-tx); color: #ffffff; }
html.perla.linea-c-caja[data-modo="perlado"] .ag2-si b { color: #ffffff; }

/* ===== 7 · LO QUE LA PRIMERA FOTO DEJO VER (2026-10-18, sonda bandeja/perla.mjs) ===== */
/* La etiqueta del evento en cada contacto: su gris fijo (#333 con letra #B4B4B4, cabin.css «#dentro .feria»). */
html.perla[data-modo="perlado"] #dentro .feria { background: var(--perla-sup2); color: var(--perla-tx2); }
/* Los logos blancos sobre las bandas blancas: en negro. */
html.perla[data-modo="perlado"] .marca-casa,
html.perla[data-modo="perlado"] .cabecera .marca { filter: brightness(0); }
/* El cajon vacio: su gris fijo. */
html.perla[data-modo="perlado"][data-pozo="ermine"] #empresa .cajon-vacio p { color: var(--perla-tx2); }
/* El cursor de Nix en la Caja: el cian oscurecido de lo claro. */
html.perla[data-modo="perlado"] .caret { color: var(--perla-ac); }
/* La agenda escribe su letra a mano (agenda.js, blanca a distintos pesos): en tinta. */
html.perla[data-modo="perlado"] .ag-capa { color: var(--perla-tx); }
html.perla[data-modo="perlado"] .ag-dia b { color: var(--perla-tx); }
html.perla[data-modo="perlado"] .ag-p,
html.perla[data-modo="perlado"] .ag-et,
html.perla[data-modo="perlado"] .ag-fila small,
html.perla[data-modo="perlado"] .ag-horario,
html.perla[data-modo="perlado"] .ag-leyenda,
html.perla[data-modo="perlado"] .ag-vacio,
html.perla[data-modo="perlado"] .ag-cuenta,
html.perla[data-modo="perlado"] .ag-prox small { color: var(--perla-tx2); }
html.perla[data-modo="perlado"] .ag-guardado { color: var(--perla-tx3); }
html.perla[data-modo="perlado"] .ag-dia .ag-punto { background: var(--perla-tx2); }
html.perla[data-modo="perlado"] .ag-x { border-color: transparent; color: var(--perla-tx); }
/* Lo agendado y lo silenciado traen su !important (no los pisa nadie): aqui, sus dos tonos en claro. */
html.perla[data-modo="perlado"] .ag-agendada { background: rgba(8, 145, 178, .16) !important; color: #0e7490 !important; border-color: transparent !important; }
html.perla[data-modo="perlado"] .ag-callada { background: repeating-linear-gradient(135deg, rgba(15, 20, 40, .10) 0 5px, transparent 5px 10px) !important; border-color: rgba(15, 20, 40, .10) !important; color: var(--perla-tx3) !important; }
/* Los Paneles: el velo de atras, la tarjeta del frente y su cuadro, en claro (las de los lados ya son claras). */
html.perla[data-modo="perlado"] .paneles { background: rgba(10, 12, 20, .18); }
html.perla[data-modo="perlado"] .panel-tarjeta:not(.lejos) { background: var(--perla-sup); border-color: var(--perla-borde); box-shadow: var(--perla-sombra-flota); }
html.perla[data-modo="perlado"] .panel-cuadro { background: var(--perla-sup2); }
/* El interruptor de la agenda (agenda.js, .ag-sw): apagado en tinta con su boton blanco; encendido en negro. */
html.perla[data-modo="perlado"] .ag-sw { background: var(--perla-dialogo); border-color: transparent; }
html.perla[data-modo="perlado"] .ag-sw i { background: #ffffff; box-shadow: 0 1px 3px rgba(15, 20, 40, .25); }
html.perla[data-modo="perlado"] .ag-sw[aria-checked=true] { background: var(--perla-tx); }
html.perla[data-modo="perlado"] .ag-sw[aria-checked=true] i { background: #ffffff; }

/* ===== 8 · EL BUSINESS CHAT™ (clientes.js escribe su hoja con colores fijos de la C) ===== */
/* El interruptor Clientes | Nix: la pastilla en tinta y el pulgar en negro (el reves del blanco de la C). */
html.perla[data-modo="perlado"] .bc-modo { background: var(--perla-sup2-toque); box-shadow: none; }
html.perla[data-modo="perlado"] .bc-pulgar { background: var(--perla-tx); box-shadow: 0 4px 12px -4px rgba(15, 20, 40, .4); }
html.perla[data-modo="perlado"] .bc-modo button { color: var(--perla-tx2); }
html.perla[data-modo="perlado"] .bc-modo button[aria-pressed=true] { color: #ffffff; }
html.perla[data-modo="perlado"] .bc-fila:active { background: rgba(15, 20, 40, .04); }
html.perla[data-modo="perlado"] .bc-cuenta { background: var(--perla-tx); color: #ffffff; }
html.perla[data-modo="perlado"] .bc-punto { background: var(--perla-tx); }
/* El chat abierto: el suelo perla, la isla de vidrio blanco, la cotizacion como tarjeta blanca. */
html.perla[data-modo="perlado"] .bc-chat { background: var(--perla-fondo); }
html.perla[data-modo="perlado"] .bc-isla { background: rgba(255, 255, 255, .85); border-color: var(--perla-borde); box-shadow: var(--perla-sombra); }
html.perla[data-modo="perlado"] .bc-iniciales { background: var(--perla-sup2); border-color: transparent; color: var(--perla-tx); }
html.perla[data-modo="perlado"] .bc-sello strong { color: var(--perla-tx); }
html.perla[data-modo="perlado"] .bc-cotizar,
html.perla[data-modo="perlado"] .bc-enviar { background: var(--perla-sup2); color: var(--perla-tx); }
html.perla[data-modo="perlado"] .bc-coti { background: var(--perla-sup); border-color: var(--perla-borde); box-shadow: var(--perla-sombra); }
html.perla[data-modo="perlado"] .bc-coti small,
html.perla[data-modo="perlado"] .bc-hilo .nix-dicho small,
html.perla[data-modo="perlado"] .bc-aviso { color: var(--perla-tx3); }
html.perla[data-modo="perlado"] .bc-nix { color: var(--perla-tx2); }
html.perla[data-modo="perlado"] .bc-campo { background: var(--perla-sup); border-color: var(--perla-borde); }
/* El aviso trae sus propias fichas de oscuro (--texto #F5F5F8 sobre el): en claro, las de tinta. */
html.perla[data-modo="perlado"] .pancarta { --texto: #0b0d14; --texto-2: #5a5f6e; --texto-3: #8a8f9c; }

/* ===== 9 · LOS DOCUMENTOS (2026-10-18, cabin.css «LOS DOCUMENTOS») ===== */
html.perla[data-modo="perlado"] .docs-agregar { background: var(--perla-tx); color: #ffffff; }
html.perla[data-modo="perlado"] .doc-fila { background: var(--perla-sup); color: var(--perla-tx); box-shadow: var(--perla-sombra); }
html.perla[data-modo="perlado"] .doc-fila.recien { box-shadow: 0 0 0 1.5px rgba(8, 145, 178, .7), 0 0 24px rgba(8, 145, 178, .22); }
html.perla[data-modo="perlado"] .doc-tipo { background: var(--perla-sup2); color: var(--perla-tx2); }
html.perla[data-modo="perlado"] .doc-tipo::before { background: linear-gradient(225deg, #eef0f6 50%, rgba(15, 20, 40, .12) 50%); }
html.perla[data-modo="perlado"] .doc-tipo.con-mini { background: #e6e8ee; }

/* ===== 10 · AJUSTES A MANO (2026-10-18, cabin.css «AJUSTES A MANO») ===== */
html.perla[data-modo="perlado"] .aj-fila.aj-editable:active { background: rgba(15, 20, 40, .05); }
html.perla[data-modo="perlado"] .aj-lapiz { color: var(--perla-tx2); }
html.perla[data-modo="perlado"] .aj-est { background: rgba(15, 20, 40, .06); color: var(--perla-tx); }
html.perla[data-modo="perlado"] .aj-campo { background: rgba(255, 255, 255, .8); border-color: rgba(15, 20, 40, .14); color: var(--perla-tx); }
html.perla[data-modo="perlado"] .aj-campo:focus { border-color: var(--perla-ac); }
html.perla[data-modo="perlado"] .aj-ayuda { color: var(--perla-tx2); }
html.perla[data-modo="perlado"] .aj-error { color: #b45309; }
html.perla[data-modo="perlado"] .doc-txt small,
html.perla[data-modo="perlado"] .docs-opc small { color: var(--perla-tx2); }
html.perla[data-modo="perlado"] .doc-avance { background: var(--perla-ac); }
html.perla[data-modo="perlado"] .docs-acc { background: rgba(15, 20, 40, .05); color: var(--perla-tx); }