/* Panel de FARO (N8, paso 4): la maqueta aprobada docs/maquetas/panel-v1.html ya conectada a la API. Celular primero: barra abajo, acciones
   al alcance del pulgar y el detalle a pantalla completa; en PC, la barra a la izquierda y lista y detalle lado a lado. Solo letras del
   sistema: la política de seguridad de la página no deja cargar nada externo. */
/* Letras del panel (licencia OFL, en fuentes/): se sirven desde el mismo servidor, sin pedirle nada a Google (decisión 14, aprobada el 2026-10-30). */
@font-face { font-family: "Atkinson Hyperlegible"; font-style: normal; font-weight: 400; font-display: swap; src: url("fuentes/atkinson-400.woff2") format("woff2"); }
@font-face { font-family: "Atkinson Hyperlegible"; font-style: normal; font-weight: 700; font-display: swap; src: url("fuentes/atkinson-700.woff2") format("woff2"); }
@font-face { font-family: "Bricolage Grotesque"; font-style: normal; font-weight: 600 700; font-display: swap; src: url("fuentes/bricolage-variable.woff2") format("woff2"); }

:root {
  --bg: #F1F5F4; --surface: #FFFFFF; --soft: #E5EEEC; --ink: #12212A; --muted: #56676E; --line: #D5E0DE;
  --accent: #0D6A64; --accent-ink: #FFFFFF; --beam: #EFAE34; --sel: #D9EFEA; --deep: #0A3F3B; --on-deep: #E4EDEC; --on-deep-muted: #B8CBC8;
  --urgent: #B83A0A; --urgent-bg: #FCE9DF; --warn: #8D5B00; --warn-bg: #FAEFD6; --cold: #2F5D8A; --cold-bg: #E3ECF6;
  --hot: #A8245A; --hot-bg: #FBE4EE; --ok: #1F6B3A; --ok-bg: #E2F2E7; --scrim: rgba(8, 18, 22, 0.5);
  --display: "Bricolage Grotesque", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --body: "Atkinson Hyperlegible", "Segoe UI", system-ui, -apple-system, sans-serif;
  --r: 14px; --tap: 52px; --nav: 64px;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --bg: #0D161A; --surface: #14222A; --soft: #1B2D34; --ink: #E4EDEC; --muted: #9AACB0; --line: #25373E;
  --accent: #46BDB2; --accent-ink: #052220; --beam: #F2B847; --sel: #123630; --deep: #0A2A27;
  --urgent: #FF8E61; --urgent-bg: #3A1C10; --warn: #F2BA55; --warn-bg: #33260C; --cold: #8DB8E6; --cold-bg: #15263A;
  --hot: #FF8DB8; --hot-bg: #3A1426; --ok: #7FD69B; --ok-bg: #12301D; --scrim: rgba(0, 0, 0, 0.6); color-scheme: dark } }
:root[data-theme="dark"] {
  --bg: #0D161A; --surface: #14222A; --soft: #1B2D34; --ink: #E4EDEC; --muted: #9AACB0; --line: #25373E;
  --accent: #46BDB2; --accent-ink: #052220; --beam: #F2B847; --sel: #123630; --deep: #0A2A27;
  --urgent: #FF8E61; --urgent-bg: #3A1C10; --warn: #F2BA55; --warn-bg: #33260C; --cold: #8DB8E6; --cold-bg: #15263A;
  --hot: #FF8DB8; --hot-bg: #3A1426; --ok: #7FD69B; --ok-bg: #12301D; --scrim: rgba(0, 0, 0, 0.6); color-scheme: dark }

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { height: 100%; }
body { min-height: 100%; margin: 0; background: var(--bg); color: var(--ink); font-family: var(--body); font-size: 16px; line-height: 1.45; -webkit-font-smoothing: antialiased; }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 10; background: var(--surface); }
button, textarea, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 3px solid var(--beam); outline-offset: 2px; }
.num { font-variant-numeric: tabular-nums; }
.marca { width: 28px; height: 28px; flex: none; }

/* ---------- Fichas (E102) ---------- */
.acciones-ficha { display: flex; flex-wrap: wrap; gap: 8px; }
.enlace-boton { display: inline-flex; align-items: center; color: var(--ink); text-decoration: none; }
.grupo-ficha { margin: 8px 0 0; color: var(--muted); font-size: 0.85rem; font-weight: 700; }
.fila .chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.fila .fila-texto + .chips { margin-top: 6px; }
.dato .valor.normal { font-weight: 400; }
.cuerpo-ficha { display: flex; flex-direction: column; gap: 12px; }
.embudo { display: flex; flex-direction: column; gap: 8px; }
.clave-app { background: var(--soft); border-radius: 10px; padding: 12px; font-size: 1.05rem; font-weight: 700; letter-spacing: 0.04em; overflow-wrap: anywhere; user-select: all; text-align: center; }
.enlace-boton.centrado { justify-content: center; }
.opciones-etapa { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cuerpo-ficha > * { flex-shrink: 0; }
.rapido { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.rapido .btn { padding: 0 6px; }
.aviso-ficha { background: var(--warn-bg); color: var(--ink); border-radius: 12px; padding: 10px 12px; }
.aviso-ficha.urg { background: var(--urgent-bg); }
.aviso-ficha p { margin: 4px 0 0; }
.aviso-cuenta { margin-bottom: 12px; }
.aviso-cuenta .btn { margin-top: 8px; }
.aviso-ficha ul, .problemas { margin: 6px 0 0; padding-left: 20px; overflow-wrap: anywhere; }
.acciones-grupo { display: flex; flex-wrap: wrap; gap: 8px; padding: 10px 0 12px; }
.mini { min-height: 36px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); padding: 0 10px; font-size: 0.88rem; font-weight: 700; }
.mini[aria-pressed="true"] { background: var(--sel); border-color: var(--accent); }
.fotos { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 8px; padding-top: 8px; }
.foto { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.foto img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 10px; background: var(--soft); display: block; }
.foto-enlace { display: grid; place-items: center; aspect-ratio: 4 / 3; border-radius: 10px; background: var(--soft); color: var(--muted); font-size: 0.85rem; text-align: center; padding: 6px; }
.prueba-ficha { background: var(--sel); border-color: transparent; padding-bottom: 12px; }
.prueba-ficha .chips { display: flex; flex-wrap: wrap; gap: 6px; }
.prueba-ficha p { margin: 10px 0 0; }
.caja-ficha { width: 100%; min-height: var(--tap); border-radius: 12px; border: 1px solid var(--line); background: var(--bg); padding: 10px 14px; font-size: 1.05rem; color: var(--ink); }
textarea.caja-ficha { resize: vertical; }

/* ---------- Comunes ---------- */
.btn { min-height: var(--tap); border-radius: 12px; border: 1px solid var(--line); background: var(--surface); padding: 0 14px; font-weight: 700; font-size: 1rem; }
.btn.primario { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.btn.peligro { background: var(--urgent); color: var(--surface); border-color: var(--urgent); }
.btn.chico { min-height: 44px; padding: 0 12px; font-size: 0.93rem; }
.btn.ancho { width: 100%; }
.btn.flex1 { flex: 1; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
a.btn { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; color: var(--ink); }
.chip { display: inline-flex; align-items: center; gap: 4px; border-radius: 999px; padding: 3px 10px; font-size: 0.82rem; font-weight: 700; }
.chip.motivo { background: var(--warn-bg); color: var(--warn); }
.chip.urg { background: var(--urgent-bg); color: var(--urgent); }
.chip.suave { background: var(--soft); color: var(--muted); }
.chip.frio { background: var(--cold-bg); color: var(--cold); }
.chip.caliente { background: var(--hot-bg); color: var(--hot); }
.chip.ok { background: var(--ok-bg); color: var(--ok); }
.vacio { text-align: center; color: var(--muted); padding: 40px 16px; }
.vacio strong { display: block; font-family: var(--display); font-size: 1.3rem; color: var(--ink); }
.nota { font-size: 0.88rem; color: var(--muted); margin: 0; }
.advertencias { background: var(--warn-bg); color: var(--warn); border-radius: 12px; padding: 10px 12px; font-size: 0.93rem; }
.advertencias.bloqueo { background: var(--urgent-bg); color: var(--urgent); }
.advertencias ul { margin: 4px 0 0; padding-left: 18px; }
.mensaje { border-radius: 12px; padding: 10px 12px; font-size: 0.95rem; }
.mensaje.error { background: var(--urgent-bg); color: var(--urgent); }
.mensaje.ok { background: var(--ok-bg); color: var(--ok); }
.mensaje strong { display: block; }
.casilla { display: flex; gap: 10px; align-items: flex-start; min-height: 44px; }
.casilla input { width: 22px; height: 22px; flex: none; margin-top: 2px; accent-color: var(--accent); }
.casilla small { display: block; color: var(--muted); font-size: 0.85rem; }

/* ---------- Acceso ---------- */
.acceso { min-height: 100vh; min-height: 100dvh; display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: 16px;
  padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); padding-block: 28px 32px; }
.acceso > * { max-width: 440px; width: 100%; margin-inline: auto; }
.lado { display: flex; align-items: center; gap: 12px; }
.lado .marca { width: 44px; height: 44px; }
.lado .nombre { font-family: var(--display); font-weight: 700; font-size: 1.6rem; letter-spacing: -0.01em; line-height: 1; }
.lado .lema { color: var(--muted); font-size: 0.92rem; }
.lado .lema-pc { display: none; }
.tarjeta-acceso { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 20px; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.tarjeta-acceso h1 { font-family: var(--display); font-weight: 700; font-size: 1.45rem; margin: 0; text-wrap: balance; }
.tarjeta-acceso p { margin: 0; }
.explica { color: var(--muted); font-size: 0.95rem; }
form { display: flex; flex-direction: column; gap: 14px; }
.campo { display: flex; flex-direction: column; gap: 6px; }
.campo label { font-weight: 700; }
.campo small { color: var(--muted); font-size: 0.85rem; }
.entrada { position: relative; display: flex; }
.entrada input { width: 100%; min-height: var(--tap); border-radius: 12px; border: 1px solid var(--line); background: var(--bg); padding: 0 14px; font-size: 1.05rem; }
.entrada .ver { position: absolute; right: 4px; top: 4px; bottom: 4px; min-width: 64px; border: 0; border-radius: 9px; background: var(--soft); font-weight: 700; font-size: 0.9rem; }
.entrada input.con-ver { padding-right: 76px; }
.enlaces { display: flex; flex-direction: column; gap: 2px; }
.enlace { min-height: 44px; border: 0; background: none; color: var(--accent); font-weight: 700; text-align: left; padding: 0; }
.reglas { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; font-size: 0.9rem; }
.reglas li { display: flex; gap: 8px; align-items: center; color: var(--muted); }
.reglas li::before { content: ""; width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--line); flex: none; }
.reglas li.cumple { color: var(--ok); }
.reglas li.cumple::before { background: var(--ok); border-color: var(--ok); }
.codigos { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0; padding: 12px; list-style: none; background: var(--soft); border-radius: 12px;
  font-family: var(--display); font-size: 1.1rem; letter-spacing: 0.06em; text-align: center; user-select: all; }

/* ---------- Panel ---------- */
.app { min-height: 100%; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; padding-bottom: calc(var(--nav) + env(safe-area-inset-bottom, 0px)); }
.barra { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 5; background: var(--surface); border-bottom: 1px solid var(--line);
  padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); padding-block: 12px 0; }
.barra-fila { display: flex; align-items: center; gap: 10px; padding-bottom: 10px; }
.barra h1 { font-family: var(--display); font-weight: 700; font-size: 1.35rem; margin: 0; letter-spacing: -0.01em; white-space: nowrap; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.pausa { margin-left: auto; flex: none; min-height: 44px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); padding: 0 14px; font-weight: 700; }
.pausa[aria-pressed="true"] { background: var(--urgent); border-color: var(--urgent); color: var(--surface); }
.en-pausa { margin-bottom: 10px; background: var(--urgent-bg); color: var(--urgent); border-radius: 8px; padding: 8px 10px; font-weight: 700; font-size: 0.9rem; }
.pestanas { display: flex; gap: 4px; }
.pestana { flex: 1; min-height: 46px; border: 0; background: none; border-bottom: 3px solid transparent; font-weight: 700; color: var(--muted); }
.pestana[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--accent); }
.pestana .n { font-weight: 400; color: var(--muted); }
.indice { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 10px; scrollbar-width: none; }
.indice a { flex: none; min-height: 40px; display: inline-flex; align-items: center; border-radius: 999px; border: 1px solid var(--line); padding: 0 12px;
  color: var(--ink); text-decoration: none; font-weight: 700; font-size: 0.9rem; background: var(--surface); }

.nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 6; display: grid; grid-template-columns: repeat(5, 1fr); background: var(--surface); border-top: 1px solid var(--line);
  padding-left: max(8px, env(safe-area-inset-left, 0px)); padding-right: max(8px, env(safe-area-inset-right, 0px)); padding-bottom: env(safe-area-inset-bottom, 0px); }
.nav button { position: relative; min-height: var(--nav); border: 0; background: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  font-size: 0.78rem; font-weight: 700; color: var(--muted); }
.nav button[aria-current="page"] { color: var(--accent); }
.nav button[aria-current="page"] svg { background: var(--sel); }
.nav svg { width: 44px; height: 28px; padding: 3px 11px; border-radius: 999px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.insignia { position: absolute; top: 5px; left: calc(50% + 8px); min-width: 20px; height: 20px; border-radius: 999px; background: var(--urgent); color: var(--surface);
  font-size: 0.72rem; display: grid; place-items: center; padding: 0 5px; }

.cuerpo { display: grid; grid-template-columns: minmax(0, 1fr); min-height: 0; }
.lista { padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); padding-block: 16px 28px;
  display: flex; flex-direction: column; gap: 12px; max-width: 640px; width: 100%; min-width: 0; margin-inline: auto; }
.cuerpo.una .lista { max-width: 720px; }
.lista > * { flex-shrink: 0; } /* en PC la lista tiene alto fijo: sin esto, las tarjetas se encogen */
.filas-conv { display: contents; }
.resumen { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.resumen::before { content: "Hoy"; position: absolute; top: -8px; left: 10px; z-index: 1; padding: 0 6px; font-size: 0.68rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; line-height: 1.3; color: var(--muted); background: linear-gradient(var(--bg) 50%, var(--surface) 50%); }
.cifra { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 8px 10px; min-width: 0; }
.cifra strong { display: block; font-family: var(--display); font-size: 1.45rem; line-height: 1.1; }
.cifra span { font-size: 0.8rem; color: var(--muted); }
.separador { font-size: 0.85rem; font-weight: 700; color: var(--muted); letter-spacing: 0.04em; text-transform: uppercase; padding-top: 6px; }
.tarjeta { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 14px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.tarjeta.urgente { border-left: 6px solid var(--urgent); }
.tarjeta.cerrada { border-left: 6px solid var(--muted); }
.tarjeta.fria { border-left: 6px solid var(--cold); }
.tarjeta.caliente { border-left: 6px solid var(--hot); }
.tarjeta.caliente.tarde { border-left-color: var(--urgent); }
.tarjeta.tetoca { border-left: 6px solid var(--warn); }
.tarjeta[aria-current="true"], .fila[aria-current="true"] { outline: 2px solid var(--accent); }
.meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 0.9rem; color: var(--muted); }
.quien { font-weight: 700; color: var(--ink); font-size: 1rem; }
.pregunta { margin: 0; font-size: 0.98rem; overflow-wrap: anywhere; }
.pregunta::before { content: "“"; } .pregunta::after { content: "”"; }
.acuse { margin: 0; background: var(--soft); border-radius: 10px; padding: 10px 12px; font-size: 0.95rem; overflow-wrap: anywhere; }
.acuse b { font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); display: block; margin-bottom: 2px; }
.acciones-tarjeta { display: flex; flex-wrap: wrap; gap: 8px; }
.acciones-tarjeta .btn.primario { flex: 1; }
.buscar { width: 100%; min-height: 48px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); padding: 0 14px; }
.fila { display: flex; flex-direction: column; gap: 4px; width: 100%; text-align: left; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 12px 14px; min-width: 0; }
.fila-arriba { display: flex; align-items: baseline; gap: 8px; }
.fila-arriba .hora { margin-left: auto; color: var(--muted); font-size: 0.85rem; }
.fila-texto { display: block; color: var(--muted); font-size: 0.93rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.fotos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin-top: 6px; }
.foto { aspect-ratio: 1; max-width: 100%; border-radius: 6px; background: linear-gradient(135deg, var(--line), var(--surface)); }

/* Detalle: a pantalla completa en el celular (tapa la barra de abajo); a la derecha en PC. */
.detalle { display: none; flex-direction: column; min-height: 0; background: var(--bg); }
.detalle.abierto { display: flex; position: fixed; inset: 0; z-index: 8; padding-top: env(safe-area-inset-top, 0px); }
.detalle-cab { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; background: var(--surface); border-bottom: 1px solid var(--line);
  padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); padding-block: 8px; }
.volver { min-height: 44px; border: 0; background: none; font-weight: 700; color: var(--accent); padding: 0 8px 0 0; }
.detalle-cab .quien { font-size: 1.1rem; }
.de-donde { font-size: 0.8rem; color: var(--muted); }
.segmentos { display: flex; gap: 4px; background: var(--surface); border-bottom: 1px solid var(--line);
  padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.segmento { flex: 1; min-height: 46px; border: 0; background: none; border-bottom: 3px solid transparent; font-weight: 700; color: var(--muted); }
.segmento[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--accent); }
.detalle-scroll { overflow-y: auto; flex: 1; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); padding-block: 14px 24px; }
.cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.col { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.col[data-oculta="true"] { display: none; }
.contacto { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 12px; }
.tel { font-size: 1.1rem; font-weight: 700; user-select: all; }
.linea { margin: 0; font-size: 0.93rem; color: var(--muted); }
.linea.urg { color: var(--urgent); font-weight: 700; }
.estado-faro { margin: 0; border-radius: 12px; padding: 10px 12px; font-size: 0.95rem; background: var(--soft); }
.estado-faro.pausa-c { background: var(--urgent-bg); color: var(--urgent); font-weight: 700; }
.estado-faro.baja { background: var(--cold-bg); color: var(--cold); font-weight: 700; }
.espera { background: var(--warn-bg); border-radius: var(--r); padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.espera.caliente { background: var(--hot-bg); }
.espera.fria { background: var(--cold-bg); }
.espera h2 { font-family: var(--display); font-size: 1rem; margin: 0; color: var(--warn); }
.espera.caliente h2 { color: var(--hot); }
.espera.fria h2 { color: var(--cold); }
.espera-item { background: var(--surface); border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; }
.espera-item p { margin: 0; }
.espera-item .que { font-weight: 700; }
.espera-botones { display: flex; flex-wrap: wrap; gap: 8px; }
.chat { display: flex; flex-direction: column; gap: 8px; }
.burbuja { max-width: 88%; border-radius: 14px; padding: 8px 12px; font-size: 0.97rem; overflow-wrap: anywhere; }
.texto-burbuja { white-space: pre-wrap; }
.burbuja.p { background: var(--surface); border: 1px solid var(--line); align-self: flex-start; }
.burbuja.f { background: var(--soft); align-self: flex-end; }
.burbuja.a { background: var(--sel); align-self: flex-end; border: 1px solid var(--accent); }
.burbuja small { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; color: var(--muted); font-size: 0.78rem; margin-top: 4px; }
.etq { border-radius: 999px; padding: 0 7px; background: var(--surface); font-weight: 700; }
.audio { display: inline-flex; align-items: center; min-height: 40px; border-radius: 999px; border: 1px solid var(--line); background: var(--soft); padding: 0 14px; font-weight: 700; }
.porque-btn { border: 0; background: none; color: var(--accent); font-weight: 700; font-size: 0.8rem; padding: 6px 2px; min-height: 32px; }
.porque { margin: 6px 0 0; padding: 8px 10px; border-radius: 10px; background: var(--surface); font-size: 0.86rem; list-style: none; display: flex; flex-direction: column; gap: 4px; }
.porque li span { display: block; color: var(--muted); font-size: 0.8rem; }
.sistema { align-self: center; text-align: center; font-size: 0.8rem; color: var(--muted); background: var(--surface); border: 1px dashed var(--line); border-radius: 999px; padding: 4px 12px; max-width: 92%; }
.grupo { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 4px 12px; }
.grupo h3 { font-family: var(--display); font-weight: 600; font-size: 1rem; margin: 10px 0 2px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.dato { display: grid; grid-template-columns: minmax(7.5rem, 38%) minmax(0, 1fr); gap: 2px 10px; padding: 10px 0; border-top: 1px solid var(--line); }
.grupo h3 + .dato { border-top: 0; }
.dato .campo-d { color: var(--muted); font-size: 0.9rem; }
.dato .valor { font-weight: 700; min-width: 0; overflow-wrap: anywhere; }
.dato .valor.sin { font-weight: 400; color: var(--muted); font-style: italic; }
.dato .valor.alerta { color: var(--urgent); }
.dato .cita { grid-column: 2; font-size: 0.85rem; color: var(--muted); margin: 0; overflow-wrap: anywhere; }
.dato .acciones-dato { grid-column: 2; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.editor { display: flex; flex-direction: column; gap: 8px; }
.seccion-t { font-family: var(--display); font-weight: 600; font-size: 1rem; margin: 0; }
.editor select { width: 100%; min-height: 44px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); padding: 8px 12px; }
.editor textarea { width: 100%; min-height: 130px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); padding: 10px 12px; resize: vertical; }
.propuesta { background: var(--surface); border: 2px solid var(--accent); border-radius: var(--r); padding: 12px; display: flex; flex-direction: column; gap: 6px; }
.propuesta.tetoca { border-color: var(--warn); }
.propuesta p { margin: 0; }
.motivos { display: flex; flex-wrap: wrap; gap: 8px; }
.motivo-r { min-height: 44px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); padding: 0 14px; font-weight: 700; }
.motivo-r[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.dock { background: var(--surface); border-top: 1px solid var(--line); display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
  padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px));
  padding-top: 10px; padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)); }
.dock .btn { width: 100%; padding: 0 8px; font-size: 0.95rem; line-height: 1.15; }
.dock .btn.primario, .dock .btn.ultimo { grid-column: 1 / -1; }
.dock.dos { grid-template-columns: 1fr 1.4fr; }
.dock.dos .btn.primario, .dock.dos .btn.ultimo { grid-column: auto; }
.dock.uno { grid-template-columns: 1fr; }
.dock .nota { grid-column: 1 / -1; }

/* Ajustes */
.seccion { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 16px; display: flex; flex-direction: column; gap: 12px; scroll-margin-top: 170px; min-width: 0; }
.seccion.alerta { border: 2px solid var(--urgent); }
.seccion h2 { font-family: var(--display); font-weight: 700; font-size: 1.15rem; margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.seccion p { margin: 0; }
.estado-grande { display: flex; align-items: center; gap: 12px; border-radius: 12px; padding: 12px; background: var(--ok-bg); color: var(--ok); }
.estado-grande.pausado { background: var(--urgent-bg); color: var(--urgent); }
.estado-grande strong { font-family: var(--display); font-size: 1.15rem; display: block; }
.punto { width: 14px; height: 14px; border-radius: 50%; background: currentColor; flex: none; }
.lista-simple { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 4px; }
.cita-texto { background: var(--soft); border-radius: 10px; padding: 10px 12px; font-size: 0.95rem; margin: 0; }
.subtitulo { font-family: var(--display); font-weight: 600; font-size: 1rem; margin: 4px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.modos { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.modo { display: flex; flex-direction: column; gap: 4px; text-align: left; border: 2px solid var(--line); border-radius: 12px; padding: 12px 14px; background: var(--surface); min-height: var(--tap); }
.modo[aria-checked="true"] { border-color: var(--accent); background: var(--sel); }
.modo .nombre { display: flex; align-items: center; gap: 8px; font-family: var(--display); font-weight: 700; font-size: 1.1rem; }
.modo .marca-sel { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--muted); flex: none; display: grid; place-items: center; }
.modo[aria-checked="true"] .marca-sel { border-color: var(--accent); }
.modo[aria-checked="true"] .marca-sel::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); }
.modo .desc { color: var(--muted); font-size: 0.93rem; }
.modo:disabled { cursor: default; }
.registro { font-size: 0.9rem; color: var(--muted); }
.registro strong { color: var(--ink); }
.filas { display: flex; flex-direction: column; }
.fila-c { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line); }
.fila-c:first-child { border-top: 0; }
.fila-c .campo-c { min-width: 0; }
.fila-c .campo-c small { display: block; color: var(--muted); font-size: 0.85rem; }
.fila-c .valor { font-weight: 700; text-align: right; }
details { border-top: 1px solid var(--line); padding-top: 8px; }
summary { min-height: 44px; display: flex; align-items: center; font-weight: 700; cursor: pointer; color: var(--accent); }
.horario-grande { font-family: var(--display); font-size: 1.6rem; font-weight: 700; line-height: 1.1; }
.editor-horario { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.editor-horario label { display: flex; flex-direction: column; gap: 4px; font-size: 0.9rem; color: var(--muted); }
.editor-horario .todo { grid-column: 1 / -1; }
.editor-horario input, .editor-horario select { min-height: 48px; border-radius: 10px; border: 1px solid var(--line); background: var(--bg); padding: 0 10px; color: var(--ink); width: 100%; }
.botones { display: grid; grid-template-columns: 1fr 1.4fr; gap: 8px; }
.barra-uso { height: 10px; border-radius: 999px; background: var(--soft); overflow: hidden; }
.barra-uso span { display: block; height: 100%; background: var(--accent); border-radius: 999px; }
.usuario { display: flex; flex-direction: column; gap: 6px; padding: 12px 0; border-top: 1px solid var(--line); }
.usuario:first-child { border-top: 0; }
.usuario .arriba { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }

.hoja-fondo { position: fixed; inset: 0; z-index: 30; background: var(--scrim); display: flex; align-items: flex-end; justify-content: center; }
.hoja { width: 100%; max-width: 540px; max-height: 92vh; overflow-y: auto; background: var(--surface); border-radius: 18px 18px 0 0; display: flex; flex-direction: column; gap: 12px;
  padding-left: max(18px, env(safe-area-inset-left, 0px)); padding-right: max(18px, env(safe-area-inset-right, 0px));
  padding-top: 20px; padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }
.hoja h2 { font-family: var(--display); font-size: 1.25rem; margin: 0; }
.hoja p { margin: 0; }
.aviso-flotante { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(var(--nav) + 16px + env(safe-area-inset-bottom, 0px)); z-index: 40;
  background: var(--ink); color: var(--bg); border-radius: 12px; padding: 8px 8px 8px 16px; font-weight: 700; max-width: calc(100% - 32px); display: flex; align-items: center; gap: 12px; }
.aviso-flotante button { min-height: 40px; border: 0; border-radius: 10px; background: var(--bg); color: var(--ink); font-weight: 700; padding: 0 12px; }

@media (min-width: 960px) {
  .acceso { grid-template-columns: minmax(0, 400px) minmax(0, 440px); justify-content: center; align-content: center; column-gap: 56px; }
  .acceso > * { margin: 0; max-width: none; }
  .lado { grid-row: 1; flex-direction: column; align-items: flex-start; justify-content: center; gap: 16px; background: var(--deep); color: var(--on-deep);
    border-radius: 22px; padding: 36px; align-self: stretch; }
  .lado .marca { width: 64px; height: 64px; }
  .lado .nombre { font-size: 2.6rem; }
  .lado .lema { color: var(--on-deep-muted); }
  .lado .lema-pc { display: block; color: var(--on-deep-muted); max-width: 30ch; }
  .app { height: 100vh; height: 100dvh; padding-bottom: 0; grid-template-columns: 96px minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  .nav { position: static; grid-column: 1; grid-row: 1 / span 2; grid-template-columns: 1fr; grid-auto-rows: 76px; align-content: start; border-top: 0;
    border-right: 1px solid var(--line); padding: 12px 0 0; }
  .barra, .cuerpo { grid-column: 2; }
  .cuerpo { grid-template-columns: minmax(330px, 420px) minmax(0, 1fr); min-height: 0; }
  .cuerpo.una { grid-template-columns: minmax(0, 1fr); }
  .lista { overflow-y: auto; min-height: 0; max-width: none; margin: 0; border-right: 1px solid var(--line); }
  .cuerpo.una .lista { border-right: 0; margin-inline: auto; width: 100%; }
  .detalle { display: flex; position: static; }
  .detalle.abierto { position: static; padding-top: 0; }
  .volver { display: none; }
  .detalle-scroll { padding-inline: 28px; }
  .dock { padding-inline: 28px; grid-template-columns: 1fr 1fr 1.4fr; }
  .dock .btn.primario, .dock .btn.ultimo { grid-column: auto; }
  .modos { grid-template-columns: 1fr 1fr; }
  .hoja-fondo { align-items: center; }
  .hoja { border-radius: 18px; }
  .aviso-flotante { bottom: 24px; }
}
@media (min-width: 1280px) {
  .segmentos { display: none; }
  .cols { grid-template-columns: minmax(0, 1.35fr) minmax(300px, 1fr); align-items: start; }
  .col[data-oculta="true"] { display: flex; }
}
@media (prefers-reduced-motion: no-preference) { .btn { transition: transform 120ms ease; } .btn:active { transform: scale(0.98); } }