/* Tokens del sistema de diseño (docs/diseno/DESIGN.md). Ningún color, fuente o radio se escribe suelto en las plantillas. */
:root {
  --rojo: #e42434; --rojo-oscuro: #9d131f; --vino: #4e0a0f;
  --tinta: #2c2020; --gris: #695d5a; --gris-claro: #8b7b77;
  --borde: #e2dedd; --lienzo: #f7f5f4; --tarjeta: #ffffff; --suave: #f1edec; --rosa: #fbe7e9;
  --sem-aldia-bg: #dff3e6; --sem-aldia: #135c35;
  --sem-porvencer-bg: #fbeacb; --sem-porvencer: #6b4300;
  --sem-vencido-bg: #fadcdf; --sem-vencido: #7a1020;
  --sem-sin-bg: #ebe8e7; --sem-sin: #4a4340;
  --info-bg: #e3ebf7; --info: #1f3a6b;
  --fuente-titulos: 'Montserrat', sans-serif;
  --fuente-cuerpo: 'IBM Plex Sans', system-ui, sans-serif;
  --radio-tarjeta: 14px; --radio-control: 10px; --radio-etiqueta: 6px;
  --toque: 44px; --espacio: 4px;
}
/* Las fuentes se autoalojan en static/fonts/ (M1, CRM-633): @font-face aquí, sin llamadas a Google Fonts. */
html { color-scheme: light; }
body { margin: 0; background: var(--lienzo); color: var(--tinta); font-family: var(--fuente-cuerpo); -webkit-font-smoothing: antialiased; }
h1, h2, h3 { font-family: var(--fuente-titulos); font-weight: 700; margin: 0; }
a { color: var(--rojo-oscuro); }
.pantalla { max-width: 360px; margin: 0 auto; padding: 32px 16px; display: flex; flex-direction: column; gap: 16px; }
@media (min-width: 1024px) { .pantalla { max-width: 720px; } }

/* Componentes compartidos (docs/diseno/DESIGN.md #Componentes); toda pantalla de M1+ los reutiliza. */
.icono { width: 18px; height: 18px; display: inline-block; vertical-align: middle; fill: none; stroke: currentColor; }

.tarjeta { background: var(--tarjeta); border: 1px solid var(--borde); border-radius: var(--radio-tarjeta); padding: 20px; }

.boton { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: var(--toque); padding: 0 20px; border-radius: var(--radio-control); font-family: var(--fuente-titulos); font-weight: 700; font-size: 14px; text-decoration: none; border: 1px solid transparent; cursor: pointer; box-sizing: border-box; }
.boton-principal { background: var(--rojo); color: #fff; }
.boton-principal:hover { background: var(--rojo-oscuro); }
.boton-secundario { background: var(--tarjeta); color: var(--tinta); border-color: var(--borde); }
.boton-fantasma { background: transparent; color: var(--rojo-oscuro); border: none; padding: 0; min-height: auto; }
.boton-ancho { width: 100%; }

.campo { display: flex; flex-direction: column; gap: 6px; }
.campo label { font-weight: 700; font-size: 14px; }
.campo input, .campo select { min-height: var(--toque); border: 1px solid var(--borde); border-radius: var(--radio-control); padding: 0 14px; font-family: var(--fuente-cuerpo); font-size: 15px; background: var(--tarjeta); color: var(--tinta); }
/* CRM-752: la regla de arriba nunca alcanzó a `textarea` — toda área de texto fuera de
   `.iniciativas-form`/`.contacto-form` (componentes.css) se quedaba con la fuente monoespaciada
   y el borde recto por omisión del navegador. Mismo aspecto que input/select, más lo propio de
   un área de texto (interlineado, resize solo vertical); la regla de componentes.css es más
   específica y gana en los campos que ya cubría, así que esto no les cambia el aspecto. */
.campo textarea { min-height: var(--toque); border: 1px solid var(--borde); border-radius: var(--radio-control); padding: 10px 14px; font-family: var(--fuente-cuerpo); font-size: 15px; line-height: 1.5; background: var(--tarjeta); color: var(--tinta); resize: vertical; }
.campo .ayuda { font-size: 12px; color: var(--gris); }
/* CRM-698: distinta de .ayuda por algo más que el color (DESIGN.md #Accesibilidad) — negrita
   + icono de alerta, no solo el tono rojo. */
.campo .campo-error { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--sem-vencido); }

/* cuentas/_campo_secciones.html (CRM-811): fieldset propio, cada opción de 44px o más con su
   <label> envolviendo la casilla (DESIGN.md #Accesibilidad). */
.campo-secciones { display: flex; flex-direction: column; gap: 8px; border: 1px solid var(--borde); border-radius: var(--radio-control); padding: 12px 14px; margin: 0; }
.campo-secciones legend { font-weight: 700; font-size: 14px; padding: 0 4px; }
.campo-secciones-opcion { display: flex; align-items: center; gap: 8px; min-height: var(--toque); }
.campo-secciones .ayuda { font-size: 12px; color: var(--gris); }
.campo-secciones .campo-error { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--sem-vencido); }

.etiqueta-rol { display: inline-block; border-radius: var(--radio-etiqueta); padding: 4px 10px; font-size: 12.5px; font-weight: 600; }
.etiqueta-rol--presidente { background: var(--sem-porvencer-bg); color: var(--sem-porvencer); }
.etiqueta-rol--enlace { background: var(--info-bg); color: var(--info); }
.etiqueta-rol--equipo { background: var(--sem-aldia-bg); color: var(--sem-aldia); }
.etiqueta-rol--vicepresidente { background: var(--rosa); color: var(--vino); }
.etiqueta-rol--baja { background: var(--sem-sin-bg); color: var(--sem-sin); }

/* componentes/etiqueta.html: etapa, categoría, estatus, estado de invitado, nivel de enfoque. */
.etiqueta { display: inline-block; border-radius: var(--radio-etiqueta); padding: 4px 10px; font-size: 12.5px; font-weight: 600; background: var(--suave); color: var(--tinta); }
.etiqueta--aldia { background: var(--sem-aldia-bg); color: var(--sem-aldia); }
.etiqueta--porvencer { background: var(--sem-porvencer-bg); color: var(--sem-porvencer); }
.etiqueta--vencido { background: var(--sem-vencido-bg); color: var(--sem-vencido); }
.etiqueta--sin { background: var(--sem-sin-bg); color: var(--sem-sin); }
.etiqueta--info { background: var(--info-bg); color: var(--info); }

/* componentes/boton_icono.html: 44×44px, sin texto, con aria-label. */
.boton-icono { width: var(--toque); height: var(--toque); display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radio-control); border: 1px solid var(--borde); background: var(--tarjeta); color: var(--tinta); cursor: pointer; padding: 0; }

/* componentes/entrada_bitacora.html: icono del canal, canal, fecha y autor; nota del Presidente con fondo rosa, estrella y texto vino. */
.entrada-bitacora { display: flex; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--borde); }
.entrada-bitacora-meta { font-size: 12.5px; color: var(--gris); margin: 0 0 4px; display: flex; align-items: center; gap: 6px; }
.entrada-bitacora--nota { background: var(--rosa); color: var(--vino); border-radius: var(--radio-control); padding: 12px; border-bottom: none; }
.entrada-bitacora--nota .entrada-bitacora-meta { color: var(--vino); }
.entrada-bitacora-compromiso { margin: 4px 0 0; font-size: 13.5px; }

/* componentes/buscador.html: campo de 46px con lupa y <label> oculta. */
.buscador { display: flex; align-items: center; gap: 8px; height: 46px; border: 1px solid var(--borde); border-radius: var(--radio-control); padding: 0 14px; background: var(--tarjeta); }
.buscador input { flex: 1; border: none; background: transparent; font-family: var(--fuente-cuerpo); font-size: 15px; color: var(--tinta); height: 100%; }
.buscador input:focus { outline: none; }
/* Auditoría sobre CRM-654: el `outline: none` de arriba (para que Chrome no dibuje un
   rectángulo recto sobre esta caja redondeada) dejaba el buscador SIN foco visible al
   tabular — incumple la lista de accesibilidad de DESIGN.md ("foco visible del navegador").
   `:focus-visible` es más específico que `:focus` para el mismo elemento y gana por venir
   DESPUÉS en la hoja: mouse/tap siguen sin anillo (mismo aspecto de siempre en Hoy y en el
   directorio), teclado sí lo tiene, con un token existente, sin hex nuevo. */
.buscador input:focus-visible { outline: 2px solid var(--rojo); outline-offset: 2px; }

/* .directorio-chip-select y .directorio-chips: desplegables e inputs de filtro del directorio
   (CRM-636), su base vive en el <style> de cada plantilla; SOLO el acotamiento de ancho va
   aquí (CRM-685), porque es la clase compartida y el patrón afecta a toda pantalla con
   desplegables poblados de datos reales — no solo personas.html, también la lista de
   organismos hereda los mismos ~224 nombres. Un <select> sin restricción toma el ancho de su
   OPCIÓN MÁS LARGA, no el de su contenedor: con nombres ficticios cortos esto no se nota (así
   se verificó de buena fe en CRM-636), pero un organismo real de 98 caracteres estira el
   desplegable a más de 800px dentro de una vista de 360px, y lo mismo desborda la fila de
   filtros en computadora, porque nada de esa fila tiene overflow:hidden que lo confine — a
   diferencia de la tabla, que sí lo tiene en .lista-tabla-envoltura.

   Dos correcciones, no una, porque max-width: 100% por sí solo NO basta: en celular
   .directorio-chips es cross-axis de un flex en columna y se estira (stretch) al ancho de su
   padre, así que ya tiene un ancho definido contra el que resolver el porcentaje. En
   computadora .directorio-filtros cambia a flex en fila y .directorio-chips deja de estirarse:
   su propio ancho pasa a depender del contenido (shrink-to-fit), así que el max-width: 100%
   del <select> queda resolviendo contra un padre que se agranda para caber ÉL MISMO — sin
   límite real. Por eso .directorio-chips necesita SU PROPIO min-width: 0 (mismo patrón que
   .fila-lista-contenido): así encoge de verdad dentro de .directorio-filtros y le entrega al
   desplegable un ancho definido contra el que su max-width: 100% sí puede acotar.

   El texto de la opción seleccionada se recorta con puntos suspensivos en la caja cerrada; el
   nombre completo sigue disponible al abrir el desplegable (comportamiento nativo del
   navegador) y para lectores de pantalla, porque el <option> no se toca. */
.directorio-chip-select { min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.directorio-chips { min-width: 0; }

/* Oculta visualmente sin quitar del árbol de accesibilidad (DESIGN.md #Accesibilidad: <label> siempre real). */
.visualmente-oculto { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* componentes/chip_semaforo.html: píldora de 12px de icono y texto en mayúsculas de 11px.
   white-space: nowrap — defecto encontrado en verificación visual de CRM-637: sin esta regla
   el texto de la píldora envuelve a dos o tres líneas incluso en estados cortos como "SIN
   CONTACTO" (dos palabras) o cuando se añade el dato de días, rompiendo la forma de píldora de
   DESIGN.md. El componente y sus 4 estados no cambian, solo se corrige que el texto se salga
   de una sola línea. */
.chip-semaforo { display: inline-flex; align-items: center; gap: 4px; border-radius: 999px; padding: 3px 10px; font-family: var(--fuente-cuerpo); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; white-space: nowrap; }
.chip-semaforo--al_dia { background: var(--sem-aldia-bg); color: var(--sem-aldia); }
.chip-semaforo--por_vencer { background: var(--sem-porvencer-bg); color: var(--sem-porvencer); }
.chip-semaforo--vencido { background: var(--sem-vencido-bg); color: var(--sem-vencido); }
.chip-semaforo--sin_contacto { background: var(--sem-sin-bg); color: var(--sem-sin); }
.chip-semaforo .icono-chip { width: 12px; height: 12px; stroke: currentColor; fill: none; flex-shrink: 0; }
.chip-semaforo-dato { font-weight: 600; margin-left: 2px; }

/* componentes/fila_lista.html: en celular, tarjeta compacta (título, línea secundaria, chip,
   dato); en computadora, fila de tabla con las columnas adicionales que traiga `columnas`,
   alineada a un encabezado .lista-tabla-encabezado con las mismas celdas en el mismo orden.

   Auditoría de CRM-658 (MAYOR): el <a> real envuelve SOLO el título (.fila-lista-titulo),
   nunca toda la fila. Antes envolvía punto+contenido+chip+dato+columnas y necesitaba
   `display: contents` a 1024px+ para no romper la tabla (un <a> con varias celdas de tabla
   como hijas exige contents o el navegador inserta cajas anónimas que desalinean la fila del
   encabezado) — pero un elemento con display:contents no genera caja propia: Tab nunca
   llegaba al enlace principal de NINGUNA lista con columnas (Hoy, /personas/, /organismos/,
   /iniciativas/, /eventos/, el panel), sin anillo de foco posible. Patrón "enlace estirado"
   (stretched link): el <a> es una caja real y pequeña sobre el título, enfocable de verdad;
   su ::after (position:absolute + inset:0 contra .fila-lista, que ancla con
   position:relative) cubre TODA la fila para que el clic con mouse siga funcionando en
   cualquier punto, exactamente como antes. .fila-lista-acciones necesita su propio
   position:relative con z-index por encima del enlace estirado — si no, sus botones (marcar
   hecha, nota, etc.) quedarían atrapados debajo del área clicable de la fila entera. */
.fila-lista { border-bottom: 1px solid var(--borde); padding: 12px 0; position: relative; display: grid; grid-template-columns: auto 1fr auto auto; column-gap: 10px; row-gap: 0; align-items: center; }
.fila-lista-punto { width: 10px; height: 10px; border-radius: 999px; background: currentColor; }
.fila-lista-contenido { display: flex; flex-direction: column; min-width: 0; gap: 2px; }
.fila-lista-titulo { font-weight: 600; color: var(--tinta); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fila-lista-enlace { text-decoration: none; color: inherit; }
.fila-lista-enlace::after { content: ""; position: absolute; inset: 0; }
/* CRM-809: un enlace secundario (el nombre de un responsable) dentro de una fila con enlace
   estirado — sin position:relative + z-index por encima del ::after de .fila-lista-enlace,
   el clic caería siempre sobre el enlace principal de la fila, nunca sobre este. */
.fila-lista-enlace-secundario { position: relative; z-index: 1; }
.fila-lista-subtitulo { font-size: 12.5px; color: var(--gris); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* .fila-lista-dato con elipsis + max-width: 40vw (como .fila-lista-titulo/-subtitulo) RECORTA
   un dato que puede no existir en ningún otro lugar de la pantalla — CRM-642 lo detectó con el
   nombre de un representante, invisible mientras solo hubo datos cortos (fechas). Mismo
   defecto y mismo arreglo que CRM-696: min-width: 0 (ya estaba) más overflow-wrap: anywhere
   dejan que la pista de la rejilla se encoja y el texto PARTA LA LÍNEA en vez de escapar la
   pantalla o esconderse tras "…" — nunca ocultar un dato sin otro lugar donde leerlo completo. */
.fila-lista-dato { font-size: 12.5px; color: var(--gris); min-width: 0; overflow-wrap: anywhere; }
.fila-lista-columnas { display: none; }
.fila-lista-acciones { display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px; grid-column: 1 / -1; position: relative; z-index: 1; }
@media (min-width: 1024px) {
  .lista-tabla-envoltura { overflow-x: auto; }
  .lista-tabla { display: table; width: 100%; border-collapse: collapse; font-size: 13.5px; }
  .lista-tabla-encabezado { display: table-row; }
  .lista-tabla-encabezado > span { display: table-cell; padding: 10px 12px; text-align: left; text-transform: uppercase; font-size: 11px; letter-spacing: 0.4px; font-weight: 700; color: var(--gris-claro); border-bottom: 1px solid var(--borde); }
  .fila-lista { display: table-row; border-bottom: none; padding: 0; }
  .fila-lista-punto, .fila-lista-columna { display: table-cell; padding: 10px 12px; border-bottom: 1px solid var(--borde); vertical-align: middle; }
  .fila-lista-contenido { display: table-cell; padding: 10px 12px; border-bottom: 1px solid var(--borde); vertical-align: middle; }
  .fila-lista-titulo { font-weight: 600; }
  .fila-lista-subtitulo, .fila-lista-chip, .fila-lista-dato { display: none; }
  .fila-lista-columnas { display: contents; }
  .fila-lista-acciones { display: table-cell; border-bottom: 1px solid var(--borde); margin-top: 0; }
}

/* componentes/cifra.html: rótulo en mayúsculas, número de 30px en Montserrat, nota opcional. */
.cifra { display: flex; flex-direction: column; gap: 2px; }
.cifra-rotulo { font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--gris-claro); font-weight: 700; margin: 0; }
.cifra-numero { font-family: var(--fuente-titulos); font-weight: 700; font-size: 30px; color: var(--tinta); margin: 0; }
.cifra-numero--aldia { color: var(--sem-aldia); }
.cifra-numero--porvencer { color: var(--sem-porvencer); }
.cifra-numero--vencido { color: var(--sem-vencido); }
.cifra-numero--sin { color: var(--sem-sin); }
.cifra-numero--info { color: var(--info); }
.cifra-nota { font-size: 12px; color: var(--gris); margin: 0; }

/* componentes/interes_influencia.html: valor «n / 5» con cinco puntos; "Sin evaluar" es el caso por omisión, no la excepción. */
.interes-influencia { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--tinta); }
.interes-influencia-puntos { display: inline-flex; gap: 3px; }
.interes-influencia-punto { width: 8px; height: 8px; border-radius: 999px; background: var(--borde); display: inline-block; }
.interes-influencia-punto--lleno { background: var(--rojo-oscuro); }
.interes-influencia--sin-evaluar { color: var(--gris-claro); }

.avatar { width: 44px; height: 44px; border-radius: 999px; background: var(--rosa); color: var(--vino); display: flex; align-items: center; justify-content: center; font-family: var(--fuente-titulos); font-weight: 700; flex-shrink: 0; }

/* Cascarón de navegación (componentes/navegacion.html): barra de pestañas en celular, barra lateral en computadora. */
.cascaron { display: flex; flex-direction: column; min-height: 100vh; }
.cascaron-contenido { flex: 1; padding: 24px 14px 88px; max-width: 1280px; margin: 0 auto; width: 100%; box-sizing: border-box; }
.barra-pestanas { position: fixed; bottom: 0; left: 0; right: 0; display: flex; background: var(--tarjeta); border-top: 1px solid var(--borde); height: 56px; }
.barra-pestanas > a, .barra-pestanas > span { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font-size: 11px; color: var(--gris-claro); text-decoration: none; }
.barra-pestanas .activa { color: var(--rojo-oscuro); border-top: 2px solid var(--rojo); }
.barra-lateral { display: none; }
@media (min-width: 1024px) {
  .cascaron { flex-direction: row; }
  .cascaron-contenido { padding: 32px 32px 32px 24px; margin: 0; max-width: none; min-width: 0; }
  .barra-pestanas { display: none; }
  .barra-lateral { display: flex; flex-direction: column; width: 232px; flex-shrink: 0; background: var(--vino); color: #fff; padding: 24px 16px; box-sizing: border-box; gap: 24px; }
  .barra-lateral > a, .barra-lateral > span { display: flex; align-items: center; gap: 10px; color: var(--suave); text-decoration: none; padding: 10px 12px; border-radius: var(--radio-control); font-weight: 600; }
  .barra-lateral .activa { background: rgba(255,255,255,0.08); color: #fff; }
  .barra-lateral-usuario { margin-top: auto; display: flex; align-items: center; gap: 10px; color: #fff; }
  .barra-lateral-usuario .avatar { color: var(--vino); flex-shrink: 0; }
  .barra-lateral-usuario > span { min-width: 0; }
  .barra-lateral-usuario > span > div { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}