/*
  IDBOX · LA LINEA C (LUZ), CON SU INTERRUPTOR — bloque C-1, Empresa (2026-10-17)
  apps/idbox/shared/linea-c.css, servida en /contacts-linea.css (bajo /contacts para que el service worker no la guarde)

  El fundador, sobre diseno/maquetas/idbox-linea-fusion.html: *«Vámonos con la C - Luz»*, con sus reglas:
    · antes, una copia de lo de hoy → la etiqueta de git `respaldo-antes-linea-c` (a121017);
    · la barra de Nix se queda tal cual está hoy en Empresa (`.empresa-cabecera`), igual en todo el ecosistema;
    · la barra de abajo es la de hoy en mensajes (la oscura de Chats): nunca más blanca en la pestaña Empresa;
    · el + de la barra es el de la C: un destino más de la isla, sin su círculo aparte;
    · lo que se sobrepone (el menú de Nix, el +, los avisos, la hoja de la agenda) es lo que flota en la A:
      el esmerilado oscuro de la casa (graphic_system §10.11), filo de 1 px al 14 % y sombra honda;
    · el escaneo no se toca; los Paneles no se tocan («los paneles no los toques por favor»), tampoco «Ver paneles»;
    · y quedan vivos sus tres efectos: el KITT, el verde de la tarjeta que se activa y la D.

  TODO VIVE BAJO `html.linea-c`, que pone el interruptor de la cabecera de /contacts: `?linea=c` la enciende en ese
  celular y `?linea=hoy` la apaga. Sin la clase, esta hoja no cambia nada: lo de hoy sigue tal cual para todos.
  ⚠️ La especificidad se escribe a proposito por encima de las reglas del pozo (`html[data-pozo="ermine"] #empresa …`,
  1-2-1): por eso cada regla de Empresa lleva `html.linea-c[data-pozo] #empresa` (1-3-1), y va despues en la cascada.
*/

/* ===== LO QUE FLOTA: EL DE LA A ===== */
html.linea-c .nix-menu,
html.linea-c #nixMenuEmpresa,
html.linea-c .mas-menu {
  background: rgba(26, 26, 26, .5);
  -webkit-backdrop-filter: blur(40px) saturate(150%);
          backdrop-filter: blur(40px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 16px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .45);
}
/* Las dos capas de abajo que les ponian el color (panel solido al 55-60 %): el esmerilado ya es el color. */
html.linea-c #nixMenuEmpresa::before,
html.linea-c .mas-menu::before { display: none; }
html.linea-c #nixMenuEmpresa .nix-item { background: rgba(255, 255, 255, .06); }
html.linea-c #nixMenuEmpresa .nix-item:active { background: rgba(255, 255, 255, .12); }
/*
  ⚠️ EL AVISO VA SOLIDO Y NO ESMERILADO, Y NO ES UN DESCUIDO: entra con un fundido de opacidad, y un fundido sobre un
  `backdrop-filter` destella en el telefono (§7g, la ley de las tres curas del 2026-08-10). Sobre el pozo el esmerilado
  de la A compone casi este mismo #1A1A1A, asi que se ve igual sin pagar el destello. Su punto de color no se toca.
*/
html.linea-c .pancarta {
  background: #1a1a1a;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 16px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .45);
}

/* ===== LA BARRA DE ABAJO: LA DE MENSAJES, Y EL + DE LA C =====
   La barra deja de vestirse de blanco en Empresa desde cabin.js (vestirBarra mira esta misma clase). Aqui solo el +:
   se vuelve un destino mas, del mismo ancho, sin circulo ni filo; abierto lleva la pastilla del que esta activo. */
/* ⚠️ El relleno de 4 px de cada lado no es adorno: los destinos son `flex: 1` CON su relleno, y el flex reparte el
   ancho y le suma encima el relleno de cada uno. Sin esto el + salia 8 px mas angosto que sus hermanos (medido). */
html.linea-c .mas-casa { flex: 1; display: flex; padding: 0 4px; }
html.linea-c .mas {
  flex: 1; width: auto; margin: 0 -4px; height: auto; min-height: 44px; padding: 9px 4px;
  border: 0; border-radius: var(--r-pildora, 999px);
  background: transparent; color: var(--ash);
}
html.linea-c .mas[aria-expanded="true"] { background: rgba(var(--toque-rgb), .10); color: var(--snow); }

/* ===== LA HOJA DE LA AGENDA: EL VIDRIO DE LA A, LOS CHIPS DE LA C =====
   Sale el cristal C+ con la luz 3 (la luz que giraba por el borde era de la B, y la B se fue). Por dentro, los
   bloques y los botones son los de la C: rellenos en #2C2C2C sin filo, y el escogido en blanco con letra oscura.
   Lo silenciado (rayado) y lo agendado (blanco) traen su !important y no cambian. */
html.linea-c .ag-hoja,
html.linea-c .ag-lente .ag-hoja {
  background: rgba(26, 26, 26, .5);
  -webkit-backdrop-filter: blur(40px) saturate(150%);
          backdrop-filter: blur(40px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 16px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .45);
}
html.linea-c .ag-hoja::before,
html.linea-c .ag-hoja::after,
html.linea-c .ag-viso { display: none; }
html.linea-c .ag-v { background: #2c2c2c; border-color: transparent; box-shadow: none; color: #f5f5f5; }
html.linea-c .ag-si { background: #f5f5f5; border-color: transparent; box-shadow: none; color: #0a0a0a; }
html.linea-c .ag-si b { color: #0a0a0a; }
html.linea-c .ag-x { background: #2c2c2c; border-color: transparent; }
html.linea-c .ag-prox + .ag-prox { border-top-color: rgba(255, 255, 255, .10); }

/* ===== EMPRESA: LOS BLOQUES DE FOCO DE LA C =====
   Radio 24, sin filo, con su sombra y una linea de luz arriba. El relleno #232323 ya lo pone el pozo y no se repite
   aqui, para no pisar el escalon #2C2C2C que dan al tocarlos. ⚠️ El filo se vuelve transparente y no se quita: el
   pixel se queda y nada se corre. Lo recien nacido (`.recien`) y lo que se arrastra (`.agarrado`) guardan su sombra. */
html.linea-c[data-pozo] #empresa .emp-resumen,
html.linea-c[data-pozo] #empresa .emp-pregunta,
html.linea-c[data-pozo] #empresa .emp-prox,
html.linea-c[data-pozo] #empresa .emp-desplegar,
html.linea-c[data-pozo] #empresa .cajon:not(.recien):not(.agarrado) {
  border-color: transparent;
  border-radius: 24px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .06);
}
html.linea-c[data-pozo] #empresa .cajon.recien,
html.linea-c[data-pozo] #empresa .cajon.agarrado { border-radius: 24px; }
/* Los cajones se encienden con el filo de Nix al nacer (`.recien`, transition .6s): su sombra va sin la `inset` para
   que el navegador pueda mezclarla con la del filo y se encienda suave (ver «las cuatro tarjetas» de la Cabina). */
html.linea-c[data-pozo] #empresa .cajon:not(.recien):not(.agarrado) { box-shadow: 0 10px 30px rgba(0, 0, 0, .35); }
html.linea-c[data-pozo] #empresa .emp-icono { border-color: transparent; border-radius: 18px; background: #2c2c2c; }

/* Lo que mira el dueño: el halo tornasol de la C, uno solo, EN EL POZO. Lo monta y lo mueve linea-c.js.
   🔴 Vivio dentro de la tira y salia cortado en raya recta arriba y abajo (captura del fundador, 2026-10-17): la tira
   es un desplazador y recorta todo lo que se sale, el resplandor incluido. Ahora es hijo de `#empresa` —que ya es su
   propio escenario por ser fijo— con z -1: encima del pozo, debajo de todo lo demas, y libre de ir a cualquier
   tarjeta del cuarto (*«no sube ni baja a acompañar las otras tarjetas»*). Solo lo corta el borde de la pantalla.
   Mide 400×240 y linea-c.js lo estira con `scale` al tamaño de la tarjeta que mira: se mueve y cambia de tamaño sin
   repintar el difuminado. */
/*
  🔴 Y EL RECTANGULO NEGRO TRANSPARENTE ERA LA SOMBRA CORTADA (fundador, 2026-10-17: *«mira el rectángulo que aparece
  dentro del círculo rojo entre las tarjetas»*). Las tarjetas de la tira llevan la sombra de la C (0 10px 30px), y la
  tira —que es un desplazador— la recortaba a 2 px arriba y 4 px abajo: dentro quedaba la sombra y afuera el halo, y
  la raya entre los dos dibujaba un rectangulo oscuro de tarjeta a tarjeta. Medido: un escalon de 37 a 47 justo en el
  borde de la tira. La tira recibe el aire que la sombra necesita para apagarse sola (20 arriba, 40 abajo) y se le
  devuelve con margen negativo: nada se corre.
*/
html.linea-c[data-pozo] #empresa .emp-tira { padding-top: 24px; padding-bottom: 44px; margin-top: -22px; margin-bottom: -40px; }
/*
  🔴 OVALADO Y NO RECTANGULAR (fundador, 2026-10-17, con cinco circulos sobre su captura): *«parece una tira
  rectangular que va de tarjeta a tarjeta… ensucia lo pro del efecto»*. Medido pixel a pixel: no habia corte; era la
  FORMA del halo — un rectangulo del tamaño de la tarjeta, difuminado, encendia parejo la rendija entre tarjetas y la
  franja de abajo, y se leia como una placa. Ahora es un ovalo mas grande que la tarjeta que se apaga hacia afuera
  (la mascara radial): fuerte a mitad de cada lado, casi nada en las esquinas, sin una sola recta. Luz, no placa.
*/
html.linea-c .lc-halo {
  position: absolute; left: 0; top: 0; z-index: -1; pointer-events: none;
  width: 400px; height: 240px; transform-origin: 0 0;
  background: linear-gradient(100deg, #12ecff 0%, #8fc8ff 34%, #c9b8ff 52%, #6fe3c8 74%, #0dff8a 100%);
  -webkit-mask-image: radial-gradient(closest-side, #000 42%, rgba(0, 0, 0, .55) 66%, transparent 100%);
          mask-image: radial-gradient(closest-side, #000 42%, rgba(0, 0, 0, .55) 66%, transparent 100%);
  filter: blur(14px); opacity: .34;
  will-change: transform;
}
/* EL HALO BLANCO DE LA TARJETA VACIA (fundador, 2026-10-18: «Cuando la tarjeta está vacía el Halo debe salir blanco»
   · «Todos los Halos en las tarjetas vacías deben salir abajo y blancos, sí ya hay datos o está lleno sale el Halo
   tornasol detrás común y corriente»). Una capa blanca encima del tornasol, con la MISMA forma (la mascara del halo la
   recorta) y el mismo difuminado, que entra y sale con un fundido: el halo no cambia de golpe. Lo pone linea-c.js. */
html.linea-c .lc-halo::after { content: ""; position: absolute; inset: 0; background: #ffffff; opacity: 0; transition: opacity .45s ease; }
html.linea-c .lc-halo.lc-blanco::after { opacity: 1; }
@media (prefers-reduced-motion: reduce) { html.linea-c .lc-halo::after { transition: none; } }

/* Los botones de la C: pildora rellena #2C2C2C, letra blanca. El KITT sigue girando por su borde al tocarla. */
html.linea-c[data-pozo] #empresa .emp-accion {
  min-height: 44px; padding: 0 18px; font-size: 15px;
  color: #f5f5f5; background: #2c2c2c; border-color: transparent;
}
html.linea-c[data-pozo] #empresa .emp-accion:active { background: #353535; }
html.linea-c[data-pozo] #empresa .emp-campo { min-height: 52px; background: #2c2c2c; border-color: transparent; color: #a6a6a6; }
html.linea-c[data-pozo] #empresa .emp-campo:active { background: #353535; }

/*
  LA PALABRA «Nix» CON LA D, DE UN SOLO TAMAÑO (fundador, 2026-10-17): *«el tamaño de Nix con el efecto D dejémoslo de
  un solo tamaño. El que está en la barra de "pregúntale a Nix sobre tu negocio" me parece ideal… que ese tamaño sea el
  mismo siempre donde aparezca la palabra Nix»*. Medido: ese mide 16 px; las otras iban en 14 (el resumen, el cajon
  vacio, el chat con un cliente) y en 15 o 13 (el chat del cliente en la Caja). Solo cambia el tamaño: el peso y el
  color de cada una se quedan. No entran la palabra de la barra de Nix (sin D, y la barra «se queda tal cual») ni la
  etiqueta «Nix» del interruptor Clientes | Nix (es el nombre de un lado, del tamaño de su pareja).
  En la Caja la marca es `linea-c-caja` (ver la cabecera de idbox_nix_v1.html): ahi solo entra esto, el Business Chat
  del cliente.
*/
html.linea-c .emp-nix,
html.linea-c .bc-nix b,
html.linea-c-caja .ch-dicho.nix b,
html.linea-c-caja .ch-quien { font-size: 16px; }

/* La letra: la escala de la casa (13 · 15 · 17 · 20 · 24 · 32) y los grises sin azul (#F5F5F5 · #A6A6A6). */
html.linea-c[data-pozo] #empresa .emp-quien h2 { font-size: 24px; font-weight: 600; color: #f5f5f5; }
html.linea-c[data-pozo] #empresa .emp-quien p { font-size: 15px; }
html.linea-c[data-pozo] #empresa .emp-prox-que { font-size: 20px; color: #f5f5f5; }
html.linea-c[data-pozo] #empresa .emp-dice,
html.linea-c[data-pozo] #empresa .emp-desplegar-nombre,
html.linea-c[data-pozo] #empresa .cajon-nombre { color: #f5f5f5; }
html.linea-c[data-pozo] #empresa .emp-quien p,
html.linea-c[data-pozo] #empresa .emp-de,
html.linea-c[data-pozo] #empresa .emp-ultima,
html.linea-c[data-pozo] #empresa .emp-titulo,
html.linea-c[data-pozo] #empresa .emp-prox-cuando,
html.linea-c[data-pozo] #empresa .emp-prox-donde,
html.linea-c[data-pozo] #empresa .emp-desplegar-que,
html.linea-c[data-pozo] #empresa .emp-desplegar-icono,
html.linea-c[data-pozo] #empresa .cajon-que { color: #a6a6a6; }

/* =====================================================================================================================
   BLOQUE C-2 · LA C EN TODO EL ECOSISTEMA, MENOS PANELES (fundador, 2026-10-17: «Listo Soci, está genial. Montémoslo
   en todo el ecosistema (Menos paneles)»).
   · EMPRESA (/contacts, marca `linea-c`): la C entera en lo que faltaba — la puerta, la lista, la ficha, los chats y
     su conversacion, la cotizacion, los cajones y las pantallas del +.
   · LA CABINA (la Caja, marca `linea-c-caja`): SOLO COLOR, como el mandó. Las cuatro tarjetas, la barra para
     escribirle, el formulario y lo que se sobrepone. Ni una forma, ni un tamaño, ni un sitio.
   · NO SE TOCAN: los Paneles (ni «Ver paneles»), el escaneo, la barra de arriba de Nix, el KITT, el verde que da Nix
     al aterrizar y la D. Por eso en la Caja no se cambian fichas de color de la raiz: Paneles las lee.
   Las medidas de la C, las mismas de Empresa: cuadro #232323 radio 24 sin filo y con su sombra; lo de adentro #2C2C2C
   radio 16; botones en pildora #2C2C2C; chips rellenos #2C2C2C y el escogido en blanco; lo que flota, el de la A.
   ===================================================================================================================== */

/* ---------- EMPRESA: los grises sin azul, en las fichas que leen todas las pantallas ---------- */
html.linea-c, html.linea-c .obsidiana,
html.linea-c #dentro, html.linea-c #dentro .obsidiana,
html.linea-c #ficha, html.linea-c #ficha .obsidiana { --texto: #f5f5f5; --texto-2: #a6a6a6; --texto-suave: rgba(245, 245, 245, .75); }
/* ⚠️ Y EL COLOR SE VUELVE A LEER AQUI (2026-10-18, el modo claro). El `color` lo pone el body con el --texto de su
   nivel, y en modo claro (perlado, tokens.css) ese es #0B0D14: la lista y la ficha lo heredaban ya resuelto, oscuro
   sobre sus filas oscuras —los nombres de los contactos median 1,24 de contraste—, aunque aqui el --texto sea claro.
   Pedirlo otra vez en su caja lo resuelve con el de aqui. Solo las pantallas de la Cabina del dueño (la lista, la
   ficha y los chats), no la Caja, que tiene su propio modo claro. Los chats no tenian el --texto claro: lo llevan. */
html.linea-c #charlas, html.linea-c #charla { --texto: #f5f5f5; --texto-2: #a6a6a6; --texto-suave: rgba(245, 245, 245, .75); }
html.linea-c #dentro, html.linea-c #ficha, html.linea-c #charlas, html.linea-c #charla { color: var(--texto); }

/* La barra de arriba de la lista y de la ficha, igual a la de Empresa (su pinta, no su contenido). */
html.linea-c .cabecera.obsidiana,
html.linea-c #orden.obsidiana { border-color: #232323; border-top-color: #2c2c2c; }

/* ---------- EMPRESA: los cuadros, bloques de foco ---------- */
html.linea-c #dentro .panel,
html.linea-c #ficha .ficha-cuerpo,
html.linea-c .tab-tarjeta,
html.linea-c .esg-bloque,
html.linea-c .cz-bloque,
html.linea-c[data-pozo] #empresa .cajon-vacio {
  background-color: #232323;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  border-color: transparent; border-radius: 24px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .06);
}
/* Lo de adentro: un escalon arriba, con el radio de afuera menos su aire. */
html.linea-c .tab-fila,
html.linea-c .camp-panel,
html.linea-c .camp-hora,
html.linea-c .coti-hoja { background: #2c2c2c; border-color: transparent; border-radius: 16px; }
html.linea-c #ficha .nota { background: #2c2c2c; }

/* ---------- EMPRESA: los botones, pildoras de la C (oscuras: sobre ellas se ve el KITT y el verde) ---------- */
html.linea-c .accion,
html.linea-c .control {
  min-height: 52px; border-color: transparent; border-radius: 999px;
  background: #2c2c2c; -webkit-backdrop-filter: none; backdrop-filter: none; color: #f5f5f5;
}
html.linea-c .accion:active,
html.linea-c .control:active { background: #353535; }

/* ---------- EMPRESA: los chips, rellenos; el escogido en blanco ---------- */
html.linea-c .pastilla,
html.linea-c .lupa { background: #2c2c2c; border-color: transparent; color: #f5f5f5; }
html.linea-c .pastilla[aria-pressed="true"] { background: #f5f5f5; border-color: transparent; color: #0a0a0a; }
html.linea-c .tab-seg { background: #2c2c2c; border-color: transparent; }
html.linea-c .tab-seg button.puesto { background: #f5f5f5; color: #0a0a0a; }
html.linea-c .cz-agregar button { background: #2c2c2c; border: 1px solid transparent; color: #f5f5f5; }
html.linea-c i.feria,
html.linea-c .evento,
html.linea-c .voz-crms span,
html.linea-c .camp-nuevo,
html.linea-c .copi-chip { background: #2c2c2c; border-color: transparent; color: #a6a6a6; }

/* ---------- EMPRESA: los campos, como la barra de «Pregúntale a Nix» ---------- */
html.linea-c .cz-input,
html.linea-c #esgPersonas { background: #2c2c2c; border-color: transparent; border-radius: 16px; }
html.linea-c .bc-campo,
html.linea-c .nix-campo { background: #2c2c2c; border-color: transparent; }

/* ---------- LO QUE FLOTA, EL DE LA A: el menu del telefono (Empresa y Caja) ---------- */
html.linea-c .ll-menu,
html.linea-c-caja .ll-menu {
  background: rgba(26, 26, 26, .5);
  -webkit-backdrop-filter: blur(40px) saturate(150%); backdrop-filter: blur(40px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, .14);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .45);
}
html.linea-c .ll-menu { border-radius: 16px; }

/* ---------- LA CABINA: SOLO COLOR ---------- */
/* Las cuatro tarjetas: el relleno del cuadro de la C, sin filo y con su sombra. La forma, el tamaño y el sitio, los
   de hoy. El verde de Nix al aterrizar (`access-granted-card`) va con !important y sigue mandando encima. */
/* ⚠️ SU SOMBRA VA SIN LA LINEA DE LUZ DE ADENTRO, y es para cuidar el efecto de la tarjeta que se activa: la tarjeta
   pasa al verde con `transition: box-shadow .25s` (styles.css), y el navegador solo puede mezclar dos sombras si son
   del mismo tipo. Con una `inset` en la lista el verde saltaba de golpe en vez de encenderse; sin ella entra suave. */
/* ⚠️ Y SU TEXTO VA CLARO TAMBIEN EN MODO CLARO (perlado), y no es un descuido (fundador, 2026-10-18: «hay que arreglar
   las tarjetas de cabina en modo claro»): el texto tomaba el --texto del perlado (#0B0D14) sobre este #232323 y medía
   1,24 de contraste, ilegible. Con el del oscuro (#F5F5F8) mide 14,44 en los dos modos. */
html.linea-c-caja .tile {
  background-color: #232323;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  border-color: transparent;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
  color: #f5f5f8;
}
/* La barra para escribirle y los campos del formulario: el color de la barra de «Pregúntale a Nix». */
html.linea-c-caja .ch-barra { background: #2c2c2c; border-color: transparent; }
html.linea-c-caja .ch-flecha { background: #383838; color: #a6a6a6; }
html.linea-c-caja .ch-campo { background: #2c2c2c; border-color: transparent; }
html.linea-c-caja #leadName,
html.linea-c-caja #leadEmail,
html.linea-c-caja #leadPhone,
html.linea-c-caja #leadNote { background: #2c2c2c; border-color: transparent; }
/* Lo que se sobrepone, el de la A, con el radio de hoy: el menu de Nix, «Tus datos», el chat y su hoja de permiso,
   «Programar reunión». */
html.linea-c-caja #nixMenu,
html.linea-c-caja .priv-caja,
html.linea-c-caja .ch-chat,
html.linea-c-caja .ch-hoja,
html.linea-c-caja .ag2-hoja,
html.linea-c-caja .ag2-lente .ag2-hoja {
  background-color: rgba(26, 26, 26, .5);
  -webkit-backdrop-filter: blur(40px) saturate(150%); backdrop-filter: blur(40px) saturate(150%);
  border-color: rgba(255, 255, 255, .14);
}
html.linea-c-caja #nixMenu .nix-item { background: rgba(255, 255, 255, .06); }
html.linea-c-caja .priv-cerrar { background: #2c2c2c; border-color: transparent; }
/* «Programar reunión» deja el cristal de la B (su luz que gira) por el de la A, y sus chips son los de la C: igual
   que «Tu agenda» del dueño. */
html.linea-c-caja .ag2-hoja::before,
html.linea-c-caja .ag2-hoja::after,
html.linea-c-caja .ag2-viso { display: none; }
html.linea-c-caja .ag2-v { background: #2c2c2c; border-color: transparent; box-shadow: none; color: #f5f5f5; }
html.linea-c-caja .ag2-si { background: #f5f5f5; border-color: transparent; box-shadow: none; color: #0a0a0a; }
html.linea-c-caja .ag2-si b { color: #0a0a0a; }
html.linea-c-caja .ag2-x { background: #2c2c2c; border-color: transparent; }