/* Hey Coni · COMPONENTES COMUNES del sistema de diseño Coni (rebranding, FASE 2, paso base; 29-09-2026).
   Las reglas son las de design/DESIGN.md y diseno/rebranding-coni/criterios-fase-2.md (D1-D8 aprobadas; si chocan, manda
   DESIGN.md); los valores, los de tema.css (el único archivo de tema, generado desde design/tokens). Aquí solo se usan: ningún color, tamaño de letra,
   peso, radio ni duración escrito a mano. Lo único fijo es geometría de componente (el interruptor claro/oscuro, los
   íconos de 20 px, los puntos de «pensando», el campo) y las constantes de maquetación de :root, más abajo.

   Capas (cada página, en este orden): tema.css · ESTE ARCHIVO · la capa propia de la superficie (app.css, preparar.css,
   landing.css, entrar.css; el CSS de Tinta vive en app/entregable.py). Sin alcance: cada regla vale en todas las páginas,
   con el menor peso posible, para que la capa propia de cada superficie lo ajuste sin !important. Taller (tokens.css y
   taller.css), que iba antes, se quitó al cerrar la FASE 2 (01-10-2026). Tema: html[data-tema="oscuro"], el mismo atributo
   de siempre, activa la paleta oscura de tema.css.

   Lo que hay: base de página · logo · botones · campos (D6) · tarjetas · pastillas y etiquetas · notas y avisos por
   estado (D2) · plegables · selector de opciones · interruptor e ícono de tema · barra lateral y barra del celular de la
   app · «Coni está pensando» (D5) · objetivos táctiles de 44 px (24 en escritorio). La maquetación de la app (la rejilla
   de .app, la lateral fija, cuándo se ve la barra del celular) vive en app.css.

   Reglas que se cumplen aquí: fondo --coni-fondo y superficies con borde de 1 px, sin sombras, degradados ni
   transparencias de color; Inter en todo (el título de pantalla, .coni-titulo-pantalla, en 700: 40 px o 32 en el
   celular); la mandarina solo en la acción principal, la selección y el foco; el azul solo en el enlace y en lo
   informativo; el deshabilitado con sus colores y sin hover; íconos de Lucide que no giran; solo se anima el color
   (120 ms), el presionar (0,98 en 120 ms), «pensando», la entrada de un mensaje (y la tarjeta que trae, un poco después)
   y la perilla del interruptor. Con reducir movimiento (del sistema o html[data-movimiento="reducido"]) no queda
   desplazamiento, escala ni bucle: el mensaje es un fundido de 120 ms y el color sigue cambiando (DESIGN.md §5). */

/* ---- constantes de maquetación (no son tokens del tema: son geometría de la app) ---- */
:root{
  --coni-tactil:44px;          /* objetivo táctil en celular y con zoom (F1b) */
  --coni-objetivo-min:24px;    /* objetivo mínimo en escritorio (WCAG 2.5.8; criterios de la FASE 2, §5) */
  --coni-columna:680px;        /* ancho máximo de la columna de contenido */
  --coni-logo-alto:28px;       /* nombre «Hey Coni»: nunca bajo 24 px (DESIGN.md §6) */
  /* íconos de Lucide del tema (trazo 2, puntas redondeadas), en línea; se pintan con currentColor por máscara */
  --coni-icono-luna:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z'/%3E%3C/svg%3E");
  --coni-icono-sol:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M6.34 17.66l-1.41 1.41M19.07 4.93l-1.41 1.41'/%3E%3C/svg%3E");
  color-scheme:light}
html[data-tema="oscuro"]{color-scheme:dark}
@media (max-width:820px){:root{--coni-logo-alto:24px}}

/* ---- base de página ---- */
*{box-sizing:border-box}
html,body{margin:0}
html{background:var(--coni-fondo)}
body{background:var(--coni-fondo);color:var(--coni-tinta);
  font:var(--coni-peso-regular) var(--coni-texto-base)/var(--coni-texto-base-interlinea) var(--coni-fuente-ui)}
button,input,textarea,select{font:inherit;color:inherit}
p{margin:0}
/* títulos de interfaz en Inter 600 con −0,015 em (la fila «titulo» de DESIGN.md §2); el tamaño lo pone cada superficie, y
   .coni-titulo-pantalla los lleva a 700 con el tracking de los títulos */
h1,h2,h3{margin:0;font-weight:var(--coni-peso-semi);letter-spacing:-0.015em}
b,strong{font-weight:var(--coni-peso-medio)}
/* foco: 2 px en --coni-acento-texto, separado 2 px, solo con teclado; aparece al instante */
:focus-visible{outline:var(--coni-foco-ancho) solid var(--coni-acento-texto);outline-offset:var(--coni-foco-separacion)}
::selection{background:var(--coni-info-fondo);color:var(--coni-tinta)}
.oculto{display:none !important}
.visualmente-oculto{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.suave-texto{color:var(--coni-tinta-2)}
/* el correo del canal de soporte (19-10) va entero: partido en el guion («juanpablo@conexion-» / «creativa.com»), en el
   celular se lee como un corte de palabra y se copia mal. Sin cortes, pasa entero a la línea siguiente (mide 217 px: cabe
   a 320). Sigue en línea, como enlace dentro de una frase */
a[href^="mailto:"]{white-space:nowrap}

/* ---- tipografía de pantalla ---- */
/* título de pantalla: Inter 700 de 40 (32 en el celular), con el tracking de los títulos; nunca cursiva sintética */
.coni-titulo-pantalla{font:var(--coni-peso-titulo) var(--coni-marca-3)/var(--coni-marca-3-interlinea) var(--coni-fuente-marca);
  letter-spacing:var(--coni-marca-tracking);font-synthesis:none;color:var(--coni-tinta)}
/* pregunta del onboarding y de la conversación: Inter 28/500, −0,02 em (DESIGN.md §2) */
.coni-pregunta{font:var(--coni-peso-medio) var(--coni-texto-pregunta)/var(--coni-texto-pregunta-interlinea) var(--coni-fuente-ui);
  letter-spacing:-0.02em;color:var(--coni-tinta)}
.coni-entradilla{max-width:var(--coni-ancho-lectura);color:var(--coni-tinta-2);
  font:var(--coni-peso-regular) var(--coni-texto-grande)/var(--coni-texto-grande-interlinea) var(--coni-fuente-ui)}
.coni-meta{color:var(--coni-tinta-2);font:var(--coni-peso-regular) var(--coni-texto-chico)/var(--coni-texto-chico-interlinea) var(--coni-fuente-ui)}
/* etiquetas repetidas del guion (GANCHO, CUERPO, CIERRE) y pasos: 12/600, mayúsculas, +0,08 em, tinta-2 (nunca mandarina) */
.coni-rotulo{display:block;color:var(--coni-tinta-2);text-transform:uppercase;letter-spacing:var(--coni-etiqueta-tracking);
  font:var(--coni-peso-semi) var(--coni-texto-etiqueta)/var(--coni-texto-etiqueta-interlinea) var(--coni-fuente-ui)}

/* ---- logo: el SVG «Hey Coni» tal cual (compacto sobre claro bajo 48 px, oscuro sobre oscuro). Las imágenes van con
   `hidden` y esta hoja las muestra: si no carga, ni se ven ni se leen, y queda el texto de .logo-texto ---- */
.logo{padding:0;border:0;border-radius:var(--coni-radio-s);background:none;color:var(--coni-tinta);text-decoration:none;cursor:pointer}
.logo-marca{height:var(--coni-logo-alto);width:auto}
.logo:has(.logo-marca) .logo-texto{display:none}
.logo-marca.logo-claro{display:block}
html[data-tema="oscuro"] .logo-marca.logo-claro{display:none}
html[data-tema="oscuro"] .logo-marca.logo-oscuro{display:block}

/* ---- botones (DESIGN.md §4): pastilla de 48 (chico, 36); principal en mandarina, uno por pantalla; secundario con borde;
   fantasma (.suave) sin borde; enlace en azul. Presionar: 0,98 en 120 ms, curva de entrada (fase A, 09-10) ---- */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:var(--coni-espacio-2);
  min-height:var(--coni-alto-control);padding:0 var(--coni-espacio-6);border-radius:var(--coni-radio-pastilla);
  border:var(--coni-borde-ancho) solid var(--coni-borde);background:var(--coni-superficie);color:var(--coni-tinta);
  font:var(--coni-peso-medio) var(--coni-texto-base)/1 var(--coni-fuente-ui);text-decoration:none;cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:background-color var(--coni-dur-rapida) var(--coni-curva-suave),border-color var(--coni-dur-rapida) var(--coni-curva-suave),
             color var(--coni-dur-rapida) var(--coni-curva-suave),transform var(--coni-dur-instante) var(--coni-curva-entrada)}
.btn.chico{min-height:var(--coni-alto-control-chico);padding:0 var(--coni-espacio-4);font-size:var(--coni-texto-chico)}
.btn.primario{background:var(--coni-acento);border-color:var(--coni-acento);color:var(--coni-sobre-acento)}
.btn.suave{background:transparent;border-color:transparent;color:var(--coni-tinta);font-weight:var(--coni-peso-medio)}
.btn.enlace{background:transparent;border:0;min-height:0;padding:var(--coni-espacio-1) 0;border-radius:var(--coni-radio-s);
  font:var(--coni-peso-medio) var(--coni-texto-chico)/var(--coni-texto-chico-interlinea) var(--coni-fuente-ui);color:var(--coni-info-texto)}
@media (hover:hover){
  /* el deshabilitado no reacciona al ratón (DESIGN.md §4) */
  .btn:hover:not(:disabled):not([aria-disabled="true"]){border-color:var(--coni-tinta);background:var(--coni-superficie)}
  .btn.primario:hover:not(:disabled):not([aria-disabled="true"]){background:var(--coni-acento-hover);border-color:var(--coni-acento-hover)}
  .btn.suave:hover:not(:disabled):not([aria-disabled="true"]){background:var(--coni-superficie);border-color:transparent;color:var(--coni-tinta)}
  .btn.enlace:hover:not(:disabled):not([aria-disabled="true"]){background:transparent;text-decoration:underline}
}
/* presionado: la transición completa (color y escala) se declara aquí, con la duración del presionar para la escala */
.btn:active:not(:disabled):not([aria-disabled="true"]){transform:scale(var(--coni-escala-presion));
  transition:background-color var(--coni-dur-rapida) var(--coni-curva-suave),border-color var(--coni-dur-rapida) var(--coni-curva-suave),
             color var(--coni-dur-rapida) var(--coni-curva-suave),transform var(--coni-dur-instante) var(--coni-curva-entrada)}
/* deshabilitado: sus colores, nunca opacidad. Con el mismo peso que el hover más fuerte de un botón (.btn.primario:hover),
   para que el ratón nunca lo cambie */
.btn:disabled,.btn[aria-disabled="true"],.btn.primario:disabled,.btn.primario[aria-disabled="true"]{opacity:1;cursor:not-allowed;
  background:var(--coni-deshabilitado);border-color:var(--coni-deshabilitado);color:var(--coni-deshabilitado-texto)}
.btn.suave:disabled,.btn.enlace:disabled,.btn.suave[aria-disabled="true"],.btn.enlace[aria-disabled="true"]{background:transparent;
  border-color:transparent;color:var(--coni-deshabilitado-texto)}

/* ---- campos (DESIGN.md §4 con la excepción D6): 48 de alto, relleno 16, radio 14, superficie, placeholder tinta-2; el foco
   es el anillo, no el borde; error con borde --coni-error y un mensaje (.campo-error) que dice qué hacer.
   D6 (aprobada el 29-09): el borde de los campos es --coni-tinta-2, no --coni-borde, para llegar a 3:1 contra el fondo
   (WCAG 1.4.11). Es la única excepción a DESIGN.md §4; todo otro borde va en --coni-borde. ---- */
textarea,select,input[type=text],input[type=email],input[type=password],input[type=number],input[type=date],input[type=tel],
input[type=search],input[type=url]{width:100%;background:var(--coni-superficie);color:var(--coni-tinta);
  border:var(--coni-borde-ancho) solid var(--coni-tinta-2);border-radius:var(--coni-radio-m);
  font:var(--coni-peso-regular) var(--coni-texto-base)/var(--coni-texto-base-interlinea) var(--coni-fuente-ui);
  transition:border-color var(--coni-dur-rapida) var(--coni-curva-suave)}
select,input[type=text],input[type=email],input[type=password],input[type=number],input[type=date],input[type=tel],
input[type=search],input[type=url]{min-height:var(--coni-alto-control);padding:0 var(--coni-espacio-4)}
textarea{padding:var(--coni-espacio-3) var(--coni-espacio-4);resize:vertical}
textarea::placeholder,input::placeholder{color:var(--coni-tinta-2)}
textarea[aria-invalid="true"],select[aria-invalid="true"],input[aria-invalid="true"]{border-color:var(--coni-error)}
.campo-error{color:var(--coni-error-texto);font:var(--coni-peso-medio) var(--coni-texto-chico)/var(--coni-texto-chico-interlinea) var(--coni-fuente-ui)}
.campo-etiqueta{color:var(--coni-tinta);font:var(--coni-peso-medio) var(--coni-texto-chico)/var(--coni-texto-chico-interlinea) var(--coni-fuente-ui)}
textarea:disabled,select:disabled,input:disabled{background:var(--coni-deshabilitado);border-color:var(--coni-deshabilitado);
  color:var(--coni-deshabilitado-texto)}
@media (hover:hover){
  textarea:hover:not(:disabled):not([aria-invalid="true"]),select:hover:not(:disabled):not([aria-invalid="true"]),
  input:hover:not(:disabled):not([aria-invalid="true"]){border-color:var(--coni-tinta)}
}

/* ---- tarjetas (DESIGN.md §4): superficie, borde de 1 px, radio 28, relleno 24, sin sombra; la chica, radio 20 ---- */
.coni-tarjeta{background:var(--coni-superficie);color:var(--coni-tinta);border:var(--coni-borde-ancho) solid var(--coni-borde);
  border-radius:var(--coni-radio-xl);padding:var(--coni-espacio-6)}
.coni-tarjeta.chica{border-radius:var(--coni-radio-l);padding:var(--coni-espacio-4) var(--coni-espacio-5)}
.coni-tarjeta-titulo{color:var(--coni-tinta);font:var(--coni-peso-semi) var(--coni-texto-titulo)/var(--coni-texto-titulo-interlinea) var(--coni-fuente-ui)}

/* ---- pastillas y etiquetas: la neutra con borde; las de estado con su fondo y su texto, siempre con palabras ---- */
.chip{display:inline-flex;align-items:center;gap:var(--coni-espacio-1);padding:var(--coni-espacio-1) var(--coni-espacio-3);
  border:var(--coni-borde-ancho) solid var(--coni-borde);border-radius:var(--coni-radio-pastilla);background:transparent;
  color:var(--coni-tinta-2);font:var(--coni-peso-medio) var(--coni-texto-chico)/var(--coni-texto-chico-interlinea) var(--coni-fuente-ui)}
.chip.info{background:var(--coni-info-fondo);border-color:var(--coni-info-fondo);color:var(--coni-info-texto)}
.chip.exito{background:var(--coni-exito-fondo);border-color:var(--coni-exito-fondo);color:var(--coni-exito-texto)}
.chip.pendiente{background:var(--coni-aviso-fondo);border-color:var(--coni-aviso-fondo);color:var(--coni-aviso-texto)}   /* D2 */
.chip.error{background:var(--coni-error-fondo);border-color:var(--coni-error-fondo);color:var(--coni-error-texto)}
/* etiqueta chica en mayúsculas dentro de una línea (DEMO, NUEVO) */
.etiqueta{display:inline-block;vertical-align:middle;padding:var(--coni-espacio-1) var(--coni-espacio-2);
  border:var(--coni-borde-ancho) solid var(--coni-borde);border-radius:var(--coni-radio-pastilla);background:transparent;
  color:var(--coni-tinta-2);text-transform:uppercase;letter-spacing:var(--coni-etiqueta-tracking);
  font:var(--coni-peso-semi) var(--coni-texto-etiqueta)/1 var(--coni-fuente-ui)}

/* ---- notas y avisos por estado. La nota informativa va en el azul de apoyo; la de estado lleva el fondo de su estado y la
   palabra del estado en <b> con su color de texto. Pendiente (D2): el amarillo de aviso, siempre con la palabra
   «Pendiente» o equivalente; el rojo, solo para errores. Nada aparece con animación. ---- */
.nota{background:var(--coni-info-fondo);color:var(--coni-tinta);border-radius:var(--coni-radio-l);padding:var(--coni-espacio-4) var(--coni-espacio-5);
  margin-bottom:var(--coni-espacio-4);font:var(--coni-peso-regular) var(--coni-texto-chico)/var(--coni-texto-chico-interlinea) var(--coni-fuente-ui)}
.nota.pendiente{background:var(--coni-aviso-fondo)}
.nota.pendiente b{color:var(--coni-aviso-texto)}
.nota.exito{background:var(--coni-exito-fondo)}
.nota.exito b{color:var(--coni-exito-texto)}
.nota.error{background:var(--coni-error-fondo)}
.nota.error b{color:var(--coni-error-texto)}
/* el aviso de un fallo (role=alert): el error en su pastilla, siempre con texto que dice qué hacer */
.aviso{display:flex;gap:var(--coni-espacio-3);align-items:flex-start;justify-content:space-between;max-width:var(--coni-columna);
  margin-bottom:var(--coni-espacio-4);background:var(--coni-error-fondo);color:var(--coni-tinta);border-radius:var(--coni-radio-l);
  padding:var(--coni-espacio-3) var(--coni-espacio-5)}
.aviso p{color:var(--coni-tinta)}
.aviso b{color:var(--coni-error-texto);font-weight:var(--coni-peso-semi)}
.aviso.pendiente{background:var(--coni-aviso-fondo)}
.aviso.pendiente b{color:var(--coni-aviso-texto)}
.aviso .btn{color:var(--coni-tinta);min-height:var(--coni-alto-control-chico);padding:0 var(--coni-espacio-4);font-size:var(--coni-texto-chico)}

/* ---- plegables: el chevron de Lucide (20 px, currentColor) NO gira: al abrir se cambia el ícono (chevron-down →
   chevron-up), sin animar, y la altura del contenido tampoco se anima. El ícono es el contorno exacto del trazo de Lucide
   (m6 9 6 6 6-6 y m18 15-6-6-6 6 en 24 × 24, trazo 2, puntas y unión redondeadas, llevado a 20 px) recortado con
   clip-path sobre currentColor. No va con máscara: en Chrome, una máscara en la página le quita el suavizado de subpíxel
   al texto de toda su capa (se midió en la pantalla principal a 1440 px). ---- */
details>summary{cursor:pointer;list-style:none;display:inline-flex;align-items:center;gap:var(--coni-espacio-1);
  min-height:var(--coni-objetivo-min);border-radius:var(--coni-radio-s);color:var(--coni-tinta);font-weight:var(--coni-peso-medio)}
details>summary::-webkit-details-marker{display:none}
/* la flecha de los plegables (26-10-2026, prueba del fundador: al revés no se entendía): a la derecha cerrado y hacia abajo
   abierto, como en Notion y en las listas de Apple; apunta a donde va a aparecer lo de adentro. Son dos dibujos y cambia de
   una vez: no gira */
summary::after{content:"";display:inline-block;flex:none;width:20px;height:20px;margin-left:0;border:0;transform:none;transition:none;
  background:currentColor;
  clip-path:path("M6.9107 14.4107L11.3215 10L6.9107 5.5893A0.8333 0.8333 0 0 1 8.0893 4.4107L13.0893 9.4107A0.8333 0.8333 0 0 1 13.0893 10.5893L8.0893 15.5893A0.8333 0.8333 0 0 1 6.9107 14.4107Z")}
details[open]>summary::after{transform:none;
  clip-path:path("M5.5893 6.9107L10 11.3215L14.4107 6.9107A0.8333 0.8333 0 0 1 15.5893 8.0893L10.5893 13.0893A0.8333 0.8333 0 0 1 9.4107 13.0893L4.4107 8.0893A0.8333 0.8333 0 0 1 5.5893 6.9107Z")}
details::details-content{transition:none}
details[open]::details-content{transition:none}
@media (hover:hover){details>summary:hover{color:var(--coni-tinta)}}
@media (forced-colors:active){summary::after{forced-color-adjust:none;background:CanvasText}}

/* ---- selector de opciones (preguntas; DESIGN.md §4): tarjetas role=radio con indicador circular de 20. Seleccionada: borde
   de 2 px en mandarina (el relleno baja 1 px para que nada salte) e indicador con anillo de 6 px y un punto central en
   --coni-sobre-acento (19-10: el anillo solo, #FF6B00 sobre blanco, daba 2,86:1 y un indicador de estado pide 3:1; con el
   punto, 6,37:1 en claro). Al elegir, borde y círculo cambian de una vez (sin transición). Presionada (dedo apoyado o clic
   en curso): el borde pasa a tinta en --coni-dur-instante con --coni-curva-entrada, como el presionar de los botones, sin
   escala ni cambio de fondo; al soltar sin elegir, vuelve con la transición de siempre. Segmentado para ajustes
   cortos: pista pastilla, segmentos de 36, el elegido relleno en mandarina con borde de 1 px en tinta (en claro). Las
   flechas del teclado las mueve el JS. ---- */
.coni-opciones{display:grid;gap:var(--coni-espacio-3)}
.coni-opcion{display:flex;gap:var(--coni-espacio-3);align-items:flex-start;width:100%;min-height:var(--coni-alto-control);text-align:left;
  cursor:pointer;-webkit-tap-highlight-color:transparent;background:var(--coni-superficie);color:var(--coni-tinta);border:var(--coni-borde-ancho) solid var(--coni-borde);
  border-radius:var(--coni-radio-l);padding:var(--coni-espacio-4) var(--coni-espacio-5);
  font:var(--coni-peso-regular) var(--coni-texto-base)/var(--coni-texto-base-interlinea) var(--coni-fuente-ui);
  transition:border-color var(--coni-dur-rapida) var(--coni-curva-suave)}
.coni-opcion::before{content:"";flex:none;box-sizing:border-box;width:20px;height:20px;margin-top:2px;border-radius:var(--coni-radio-pastilla);
  border:var(--coni-seleccion-ancho) solid var(--coni-tinta-2)}
.coni-opcion-titulo{display:block;font-weight:var(--coni-peso-semi)}
.coni-opcion-texto{display:block;color:var(--coni-tinta-2);font-size:var(--coni-texto-chico);line-height:var(--coni-texto-chico-interlinea)}
.coni-opcion:active:not(:disabled):not([aria-disabled="true"]):not([aria-checked="true"]){border-color:var(--coni-tinta);
  transition:border-color var(--coni-dur-instante) var(--coni-curva-entrada)}
.coni-opcion[aria-checked="true"]{border:var(--coni-seleccion-ancho) solid var(--coni-acento);transition:none;
  padding:calc(var(--coni-espacio-4) - var(--coni-borde-ancho)) calc(var(--coni-espacio-5) - var(--coni-borde-ancho))}
.coni-opcion[aria-checked="true"]::before{border:6px solid var(--coni-acento);background:var(--coni-sobre-acento)}
/* la selección se mueve sin redibujar (el cierre de la propuesta): durante un cuadro el grupo lleva data-eligiendo y ninguna
   opción hace transición, así la que se suelta y la nueva cambian juntas (revisión del 19-10, hallazgo 24) */
[role="radiogroup"][data-eligiendo] .coni-opcion{transition:none}
.coni-opcion:disabled,.coni-opcion[aria-disabled="true"]{cursor:not-allowed;background:var(--coni-deshabilitado);
  border-color:var(--coni-deshabilitado);color:var(--coni-deshabilitado-texto)}
.coni-segmentado{display:inline-flex;gap:var(--coni-espacio-1);padding:var(--coni-espacio-1);background:var(--coni-superficie);
  border:var(--coni-borde-ancho) solid var(--coni-borde);border-radius:var(--coni-radio-pastilla)}
.coni-segmento{min-height:var(--coni-alto-control-chico);padding:0 calc(var(--coni-espacio-4) - var(--coni-borde-ancho));
  border:var(--coni-borde-ancho) solid transparent;border-radius:var(--coni-radio-pastilla);
  background:transparent;color:var(--coni-tinta);cursor:pointer;
  font:var(--coni-peso-medio) var(--coni-texto-chico)/1 var(--coni-fuente-ui);
  transition:background-color var(--coni-dur-rapida) var(--coni-curva-suave),color var(--coni-dur-rapida) var(--coni-curva-suave),
    border-color var(--coni-dur-rapida) var(--coni-curva-suave)}
/* el elegido: relleno mandarina y, en claro, un borde de 1 px en tinta. El relleno solo, #FF6B00 sobre la pista blanca, da
   2,86:1, y un indicador de estado pide 3:1; el borde en tinta da 18,2:1 contra la pista. Todos los segmentos llevan el
   borde (transparente) y el relleno baja 1 px: elegir no cambia el tamaño. En oscuro el relleno ya da 6,5:1 y el borde no
   se ve (revisión del 19-10, hallazgo 11; DESIGN.md §1 y §4) */
.coni-segmento[aria-checked="true"],.coni-segmento[aria-pressed="true"]{background:var(--coni-acento);color:var(--coni-sobre-acento);
  border-color:var(--coni-tinta)}
html[data-tema="oscuro"] .coni-segmento[aria-checked="true"],html[data-tema="oscuro"] .coni-segmento[aria-pressed="true"]{border-color:transparent}
@media (hover:hover){
  .coni-opcion:hover:not(:disabled):not([aria-disabled="true"]):not([aria-checked="true"]){border-color:var(--coni-tinta)}
  .coni-segmento:hover:not(:disabled):not([aria-checked="true"]):not([aria-pressed="true"]){background:var(--coni-fondo)}
}

/* ---- interruptor claro/oscuro: encendido en tinta, no en mandarina (la mandarina es solo de la acción principal) ---- */
.tema-boton{color:var(--coni-tinta-2);font-size:var(--coni-texto-chico);border-radius:var(--coni-radio-s)}
.tema-interruptor{position:relative;flex:none;width:36px;height:20px;border-radius:var(--coni-radio-pastilla);
  border:var(--coni-borde-ancho) solid var(--coni-borde);background:var(--coni-superficie);
  transition:background-color var(--coni-dur-rapida) var(--coni-curva-suave),border-color var(--coni-dur-rapida) var(--coni-curva-suave)}
.tema-interruptor::after{content:"";position:absolute;top:3px;left:3px;width:12px;height:12px;border-radius:var(--coni-radio-pastilla);
  background:var(--coni-tinta-2);transition:transform var(--coni-dur-base) var(--coni-curva-suave)}
/* el dibujo sale del tema ya fijado en el <head>, no de aria-pressed: al recargar en oscuro no se desliza */
html[data-tema="oscuro"] .tema-interruptor{background:var(--coni-tinta);border-color:var(--coni-tinta)}
html[data-tema="oscuro"] .tema-interruptor::after{transform:translateX(16px);background:var(--coni-fondo)}
/* reducir movimiento (del sistema o de la app): la perilla cambia de lado sin deslizarse */
@media (prefers-reduced-motion:reduce){.tema-interruptor,.tema-interruptor::after{transition:none}}
[data-movimiento="reducido"] .tema-interruptor,[data-movimiento="reducido"] .tema-interruptor::after{transition:none}
/* al cambiar el tema (fase A, fila 4): durante el cuadro en que Mov.cambiarTema cambia html[data-tema], nada hace transición
   y todo toma los colores nuevos junto con el fondo; solo la perilla del interruptor se desliza (con reducir movimiento,
   tampoco: arriba). !important solo en ese cuadro, para ganarle a las transiciones de cada componente (.btn:active…) */
html[data-tema-cambiando] *,html[data-tema-cambiando] *::before,html[data-tema-cambiando] :not(.tema-interruptor)::after{transition:none !important}
/* en el celular, el botón compacto muestra el ícono de Lucide (luna en claro, sol en oscuro), 20 px, en currentColor */
.tema-compacto{width:var(--coni-tactil);height:var(--coni-tactil);border-radius:var(--coni-radio-pastilla);color:var(--coni-tinta)}
.tema-icono{width:20px;height:20px;border:0;border-radius:0;background:currentColor;
  -webkit-mask:var(--coni-icono-luna) center/contain no-repeat;mask:var(--coni-icono-luna) center/contain no-repeat}
.tema-icono::after{content:none}
html[data-tema="oscuro"] .tema-icono{-webkit-mask-image:var(--coni-icono-sol);mask-image:var(--coni-icono-sol)}
/* alto contraste de Windows: el fondo forzado borraría el ícono; se dibuja con el color de texto del sistema */
@media (forced-colors:active){.tema-icono{forced-color-adjust:none;background:CanvasText}}
@media (hover:hover){
  .tema-boton:hover,.tema-compacto:hover{color:var(--coni-tinta);background:transparent}
  .tema-compacto:hover{background:var(--coni-superficie)}
}

/* ---- barra lateral y barra del celular de la app ---- */
.lateral{background:var(--coni-fondo);border-right:var(--coni-borde-ancho) solid var(--coni-borde);
  padding:var(--coni-espacio-6) var(--coni-espacio-4) var(--coni-espacio-5);gap:var(--coni-espacio-1)}
.lateral .logo{margin:0 0 var(--coni-espacio-8) var(--coni-espacio-3)}
.lateral nav{gap:var(--coni-espacio-1)}
.nav-item{display:flex;align-items:center;min-height:var(--coni-tactil);padding:0 var(--coni-espacio-3);
  border:var(--coni-borde-ancho) solid transparent;border-radius:var(--coni-radio-pastilla);
  font:var(--coni-peso-medio) var(--coni-texto-chico)/var(--coni-texto-chico-interlinea) var(--coni-fuente-ui);color:var(--coni-tinta-2);
  transition:background-color var(--coni-dur-rapida) var(--coni-curva-suave),color var(--coni-dur-rapida) var(--coni-curva-suave),
             border-color var(--coni-dur-rapida) var(--coni-curva-suave)}
.nav-item.activo{background:var(--coni-superficie);border-color:var(--coni-borde);color:var(--coni-tinta);font-weight:var(--coni-peso-medio)}
.nav-item.activo::before{content:none}
.lateral-pie{gap:var(--coni-espacio-2);padding:0 var(--coni-espacio-3);color:var(--coni-tinta-2);
  font:var(--coni-peso-regular) var(--coni-texto-chico)/var(--coni-texto-chico-interlinea) var(--coni-fuente-ui)}
.lateral-pie .lateral-salir{min-height:var(--coni-tactil);padding:0 var(--coni-espacio-2);margin-left:calc(-1 * var(--coni-espacio-2));
  font:var(--coni-peso-medio) var(--coni-texto-chico)/1 var(--coni-fuente-ui);color:var(--coni-tinta-2)}
.lateral-pie .chip{border:var(--coni-borde-ancho) solid var(--coni-borde);border-radius:var(--coni-radio-pastilla);
  padding:var(--coni-espacio-1) var(--coni-espacio-3);color:var(--coni-tinta-2);background:transparent;
  font:var(--coni-peso-semi) var(--coni-texto-etiqueta)/var(--coni-texto-etiqueta-interlinea) var(--coni-fuente-ui);
  letter-spacing:var(--coni-etiqueta-tracking);text-transform:uppercase}
.barra-movil .btn.suave{min-height:var(--coni-tactil);padding:0 var(--coni-espacio-4);font-size:var(--coni-texto-chico)}
@media (hover:hover){
  .nav-item:hover:not(:disabled){background:var(--coni-superficie);color:var(--coni-tinta)}
}
@media (max-width:820px){
  .barra-movil{background:var(--coni-fondo);border-bottom:var(--coni-borde-ancho) solid var(--coni-borde);padding:var(--coni-espacio-2) var(--coni-espacio-4)}
  .barra-movil .logo{display:inline-flex;align-items:center;min-height:var(--coni-tactil);margin:0}
  .lateral{border-right:0;border-bottom:var(--coni-borde-ancho) solid var(--coni-borde);padding:var(--coni-espacio-3) var(--coni-espacio-4) var(--coni-espacio-4)}
}

/* ---- «Coni está pensando» (D5; DESIGN.md §4 y §5): la burbuja de Coni con tres puntos que se encienden en secuencia
   (ciclo de 1200 ms, desfase de 160 ms). El tiempo lo agrega el JS solo pasados 20 s. Con reducir movimiento: tres puntos
   fijos al 60 % (DESIGN.md §5, la única opacidad permitida) y el texto visible «Pensando…». Marca esperada:
   <div class="coni-pensando" role="status">
     <span class="coni-avatar" aria-hidden="true"></span>
     <span class="coni-burbuja"><span class="coni-puntos" aria-hidden="true"><span class="coni-punto"></span><span
       class="coni-punto"></span><span class="coni-punto"></span></span><span class="coni-pensando-texto"
       aria-hidden="true">Pensando…</span><span class="visualmente-oculto">Coni está pensando</span></span>
   </div> ---- */
.coni-avatar{flex:none;display:inline-block;width:var(--coni-avatar-chat);height:var(--coni-avatar-chat);
  background:url("/static/coni/marca/coni-avatar-circular-positivo.svg") center/contain no-repeat}
html[data-tema="oscuro"] .coni-avatar{background-image:url("/static/coni/marca/coni-avatar-circular-negativo.svg")}
/* burbujas del chat: la de Coni en superficie con la cola abajo a la izquierda; la de la persona, a la derecha en azul */
.coni-burbuja{max-width:78%;background:var(--coni-superficie);color:var(--coni-tinta);border:var(--coni-borde-ancho) solid var(--coni-borde);
  border-radius:var(--coni-radio-l) var(--coni-radio-l) var(--coni-radio-l) var(--coni-radio-xs);padding:var(--coni-espacio-3) var(--coni-espacio-4);
  font:var(--coni-peso-regular) var(--coni-texto-base)/var(--coni-texto-base-interlinea) var(--coni-fuente-ui)}
.coni-burbuja.persona{margin-left:auto;background:var(--coni-info-fondo);border-color:var(--coni-info-fondo);
  border-radius:var(--coni-radio-l) var(--coni-radio-l) var(--coni-radio-xs) var(--coni-radio-l)}
/* entrada de un mensaje nuevo: fundido y 8 px, 300 ms (con reducir movimiento, los tokens la dejan en un fundido de 120 ms) */
.coni-entra{animation:coni-mensaje-entra var(--coni-dur-mensaje) var(--coni-curva-entrada) both}
/* lo que entra después de su mensaje (la tarjeta de pregunta que trae): un mensaje a la vez (fase A, fila 7); con «both»
   queda invisible mientras espera */
.coni-entra.coni-entra-despues{animation-delay:calc(var(--coni-dur-mensaje) / 6)}
.coni-pensando{display:flex;align-items:flex-end;gap:10px}          /* 10 px entre el avatar y la burbuja (DESIGN.md §4) */
.coni-pensando .coni-burbuja{display:inline-flex;align-items:center;gap:var(--coni-espacio-2)}
.coni-puntos{display:inline-flex;align-items:center;gap:6px}
.coni-punto{width:8px;height:8px;border-radius:var(--coni-radio-pastilla);background:var(--coni-tinta-2);
  animation:coni-pensando var(--coni-dur-pensando) var(--coni-curva-suave) infinite}
.coni-punto:nth-child(2){animation-delay:calc(var(--coni-dur-pensando) * 2 / 15)}     /* 160 ms */
.coni-punto:nth-child(3){animation-delay:calc(var(--coni-dur-pensando) * 4 / 15)}     /* 320 ms */
.coni-pensando-texto{display:none;color:var(--coni-tinta-2);font-size:var(--coni-texto-chico)}
@media (prefers-reduced-motion:reduce){
  .coni-punto{animation:none;opacity:.6}
  .coni-pensando-texto{display:inline}
}
[data-movimiento="reducido"] .coni-punto{animation:none;opacity:.6}
[data-movimiento="reducido"] .coni-pensando-texto{display:inline}

/* ---- Coni animada (DESIGN.md §5; fase D, 14-10-2026): la escena de la ilustración (coni-animada.js). La pose va en su
   capa, del color de la placa; al cambiar de pose, la nueva reemplaza a la anterior de una vez (corte seco). En claro la placa es del color de lo que tiene detrás (el fondo de la página o, en «Videos pedidos», la superficie de
   su tarjeta: no se ve); en oscuro, el papel del ícono (DESIGN.md §6, la excepción de la espera y de «Videos pedidos»),
   con el radio de las tarjetas, sin borde ni sombra. Y el avatar de la burbuja «Coni está pensando», en su pose
   «pensando» ---- */
.coni-escena{display:block}
.coni-escena-placa{position:relative;aspect-ratio:1/1;background:var(--coni-fondo);border-radius:var(--coni-radio-xl);overflow:hidden}
/* 26-10-2026 (decisión del fundador tras su prueba): en oscuro, Coni sin la placa clara. Con el criterio del avatar y el ícono
   negativos de la marca: conserva su pelo negro y su cara de papel; las masas negras que tocan el fondo (pelo, torso, brazos,
   la taza) llevan un contorno del color del papel que las separa de la pantalla, y los blancos pasan al papel cálido para no
   encandilar. No se invierte: invertida dejaba de ser Coni */
html[data-tema="oscuro"] .coni-escena-placa{background:transparent}
html[data-tema="oscuro"] .coni-pose :is(.torso,.pelo,.brazo-izquierdo,.brazo-derecho,.taza) [fill$="000"]{stroke:var(--coni-icono-papel);stroke-width:9px}
html[data-tema="oscuro"] .coni-pose [fill$="fff"]{fill:var(--coni-icono-papel)}
html[data-tema="oscuro"] .coni-pose [stroke$="fff"]{stroke:var(--coni-icono-papel)}
.coni-capa-pose{position:absolute;inset:0;background:inherit}
.coni-pose{display:block;width:100%;height:100%}
/* Coni viva (decisión del fundador del 23-10-2026, DESIGN.md §5; como la Coni de escritorio): mientras se ve, el dibujo
   entero respira desde abajo y las pupilas parpadean desde su centro (coni-animada.js pone .coni-viva y, fuera de la
   pantalla o con la pestaña oculta, .coni-quieta). Con «reducir movimiento» no hay .coni-viva: queda quieta */
.coni-escena .coni-pose{transform-origin:50% 100%}
.coni-escena.coni-viva:not(.coni-quieta) .coni-pose{animation:coni-respirar var(--coni-dur-respirar) var(--coni-curva-suave) infinite}
@keyframes coni-respirar{0%,100%{transform:scaleY(1)}50%{transform:scaleY(var(--coni-escala-respirar))}}
.coni-pose .pupilas{transform-box:fill-box;transform-origin:50% 50%}
@media (prefers-reduced-motion:reduce){.coni-escena .coni-pose{animation:none}}
[data-movimiento="reducido"] .coni-escena .coni-pose{animation:none}
.coni-pensando .coni-avatar{background-image:url("/static/coni/animada/coni-avatar-pensando-positivo.svg")}
html[data-tema="oscuro"] .coni-pensando .coni-avatar{background-image:url("/static/coni/animada/coni-avatar-pensando-negativo.svg")}

/* ---- objetivos táctiles de 44 px en celular (y en escritorio con zoom al 200 %): relleno, sin cambio de dibujo. Van al
   final para ganarle a la regla base de cada componente ---- */
@media (max-width:820px){
  .btn.enlace,.btn.chico,.aviso .btn,details>summary,.coni-segmento{min-height:var(--coni-tactil)}
  /* y el título de pantalla baja un escalón: 32 px, con el mismo tracking (los títulos lo llevan desde 32 px) */
  .coni-titulo-pantalla{font-size:var(--coni-marca-4);line-height:var(--coni-marca-4-interlinea)}
  /* y la pregunta: 22 px con peso 500 (--coni-texto-titulo y su interlínea; DESIGN.md §2, fila del 20-10), en la
     preparación y en la tarjeta de la conversación; en escritorio sigue en 28 */
  .coni-pregunta{font-size:var(--coni-texto-titulo);line-height:var(--coni-texto-titulo-interlinea)}
}

/* ================================ Calma (23-10-2026) ================================
   La dirección que eligió el fundador para toda la app (variante A del prototipo diseno/plataforma-v3, sobre sus referentes
   Mercury OS y Dot de New Computer): calma, casi monocromo y sin bordes. La página es blanca (en oscuro, --coni-fondo) y
   todo lo que antes era una tarjeta con borde es un relleno suave de papel (en oscuro, --coni-superficie): tarjetas,
   opciones, campos, la burbuja de la persona y las pastillas. Coni habla en texto limpio, sin burbuja. Títulos en peso
   medio (--coni-peso-titulo), etiquetas en minúscula. La mandarina, solo en la acción principal y en lo elegido. La barra
   lateral no tiene fondo ni raya propios. Solo tokens: --calma-* son alias de tokens según el tema. */
:root{--coni-pagina:var(--coni-superficie);--coni-suave:var(--coni-fondo)}
html[data-tema="oscuro"]{--coni-pagina:var(--coni-fondo);--coni-suave:var(--coni-superficie)}
html,body{background:var(--coni-pagina)}

/* la barra lateral: sin fondo ni raya; el ítem activo, en papel */
.lateral{background:var(--coni-pagina);border-right-color:transparent}
.nav-item{border-radius:var(--coni-radio-s);border-color:transparent}
.nav-item.activo{background:var(--coni-suave);border-color:transparent;color:var(--coni-tinta)}
@media (hover:hover){.nav-item:hover:not(:disabled){background:var(--coni-suave)}}
.lateral-pie .chip{border-color:transparent;background:var(--coni-suave)}
/* los videos recientes en la barra lateral (app.js, pintarRecientes): una línea cada uno; el abierto, en papel */
.lateral-recientes{display:grid;gap:var(--coni-espacio-1);margin-top:var(--coni-espacio-8);min-width:0}
.lateral-recientes[hidden]{display:none}
.recientes{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:2px;min-width:0}
.recientes>li{min-width:0}
.reciente{display:block;width:100%;min-height:var(--coni-alto-control-chico);padding:0 var(--coni-espacio-3);border:0;border-radius:var(--coni-radio-s);
  background:transparent;color:var(--coni-tinta-2);text-align:left;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  font:var(--coni-peso-regular) var(--coni-texto-chico)/var(--coni-alto-control-chico) var(--coni-fuente-ui);
  transition:background-color var(--coni-dur-rapida) var(--coni-curva-suave),color var(--coni-dur-rapida) var(--coni-curva-suave)}
.reciente.activo{background:var(--coni-suave);color:var(--coni-tinta)}
@media (hover:hover){.reciente:hover{background:var(--coni-suave);color:var(--coni-tinta)}}

/* etiquetas en minúscula, chicas y en gris: dicen lo que hay debajo sin gritar */
.coni-rotulo,.etiqueta,.lateral-rotulo,.lateral-pie .chip{text-transform:none;letter-spacing:0;font-weight:var(--coni-peso-medio)}
.lateral-rotulo{padding:0 var(--coni-espacio-3) var(--coni-espacio-1);color:var(--coni-tinta-2);
  font:var(--coni-peso-regular) var(--coni-texto-etiqueta)/var(--coni-texto-etiqueta-interlinea) var(--coni-fuente-ui)}

/* sin bordes: lo que era tarjeta, opción, pastilla o campo es un relleno suave */
.coni-tarjeta{background:var(--coni-suave);border-color:transparent}
.chip,.etiqueta{border-color:transparent;background:var(--coni-suave)}
.coni-tarjeta .chip,.coni-tarjeta .etiqueta{background:var(--coni-pagina)}
.coni-opcion{background:var(--coni-suave);border-color:transparent;border-radius:var(--coni-radio-m)}
.coni-opcion::before{background:var(--coni-pagina)}
.coni-opcion-titulo{font-weight:var(--coni-peso-regular)}
textarea,select,input[type=text],input[type=email],input[type=password],input[type=number],input[type=date],input[type=tel],
input[type=search],input[type=url]{background:var(--coni-suave);border-color:transparent}
textarea[aria-invalid="true"],select[aria-invalid="true"],input[aria-invalid="true"]{border-color:var(--coni-error)}

/* la conversación: Coni habla en texto limpio (sin burbuja), con su avatar arriba; la persona, en una pastilla suave */
.coni-burbuja{background:transparent;border-color:transparent;padding:var(--coni-espacio-1) 0 0;max-width:100%;
  font-size:var(--coni-texto-grande);line-height:var(--coni-texto-grande-interlinea)}
.coni-burbuja.persona{max-width:82%;background:var(--coni-suave);border-color:transparent;border-radius:var(--coni-radio-l);
  padding:var(--coni-espacio-3) var(--coni-espacio-5);font-size:var(--coni-texto-base);line-height:var(--coni-texto-base-interlinea)}
.coni-pensando{align-items:center}
.coni-pregunta,.tarjeta h3,.pregunta>legend{font-weight:var(--coni-peso-medio);letter-spacing:-0.02em}