/* Sistema de diseño de reybian.com (UXI-002): tokens y componentes. Fuente única de la apariencia: la muestra (/ui/muestra/) la enseña y, a partir de UXI-003, el sitio entero la usa.
   Parte de la paleta del Balance de impacto, ajustada para que TODO texto llegue a 4,5:1 (WCAG AA) y los bordes de campo a 3:1. Documentación: contexto_base/ui/SISTEMA.md.
   Convenciones: componentes con prefijo `ui-`; variantes con `--`; fuentes del sistema; móvil primero (objetivos de 48 px, texto base de 16 px);
   el color nunca es el único portador de significado (siempre icono o texto). Los tokens se definen en claro, en oscuro automático (prefers-color-scheme)
   y en oscuro/claro forzado con data-theme en <html>. Una prueba (core/tests_sistema.py) comprueba los contrastes leyendo este mismo archivo. */

/* ---------- Tokens ---------- */
:root, :root[data-theme="light"] {
  --bg: #ECF1F0; --surface: #FFFFFF; --surface2: #E2EAE9; --ink: #102A2E; --muted: #536A6E;
  --line: #BFD0CE;                      /* separadores y borde de tarjeta (decorativo) */
  --edit-line: #8FA7A8;                 /* borde de la superficie de edición (se nota en pantalla grande) */
  --field: #F5F8F8; --field-line: #6E8B8D;   /* campos de formulario: borde de 3:1 o más */
  --accent: #0A717B; --accent-ink: #FFFFFF; --accent-soft: #D3ECEE;
  --good: #217247; --good-soft: #D8EEE0; --warn: #93560A; --warn-soft: #F6E6CC; --bad: #A93E28; --bad-soft: #F6DAD3;
  /* tonos intermedios (UXI-003): sirven al puente con Tailwind; se derivan de los de arriba */
  --ink0: #0A1D20; --ink2: #29444A; --ink3: #3E575B; --muted2: #556C70;
  --accent-faint: #EAF6F7; --accent-line: #B6DEE2; --accent-mid: #8CCBD1; --accent-hi: #0C7B86;
  --accent-hover: #085F68; --accent-strong: #064A52; --good-line: #B5DCC4; --good-strong: #16502F;
  --warn-line: #E8C58E; --warn-strong: #6E3F07; --bad-line: #E5B4A8; --bad-strong: #7E2E1C;
  /* encabezado del sitio (UXI-004): azul verdoso en claro; verde oscuro integrado con la página en oscuro */
  --cab-bg: #0A717B; --cab-hover: #085F68; --cab-hi: #0C7B86; --cab-ink: #FFFFFF; --cab-ink2: #D3ECEE;
  --shadow: 0 1px 2px rgba(16, 42, 46, .08), 0 2px 8px rgba(16, 42, 46, .06);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0C1A1D; --surface: #13262A; --surface2: #1B3236; --ink: #E6F0EF; --muted: #8FA8AB;
    --line: #2F4C4F; --edit-line: #3F6266;
    --field: #0E2024; --field-line: #6B9296;
    --accent: #4CC3CE; --accent-ink: #062226; --accent-soft: #123C41;
    --good: #5CC58A; --good-soft: #163A28; --warn: #E0A04A; --warn-soft: #3C2C12; --bad: #EA8A72; --bad-soft: #40201A;
    /* tonos intermedios (UXI-003) */
    --ink0: #F3F8F8; --ink2: #CBDCDD; --ink3: #B0C4C6; --muted2: #86A0A3;
    --accent-faint: #0F2F33; --accent-line: #1F5A62; --accent-mid: #2E8A94; --accent-hi: #5CD0DB;
    --accent-hover: #46B6C1; --accent-strong: #2E909A; --good-line: #27573C; --good-strong: #8ADBAD;
    --warn-line: #6B4E1E; --warn-strong: #F0BC76; --bad-line: #7A3A2C; --bad-strong: #F2A793;
    --cab-bg: #123C41; --cab-hover: #1A525A; --cab-hi: #20707A; --cab-ink: #E6F0EF; --cab-ink2: #B0C4C6;
    --shadow: none;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0C1A1D; --surface: #13262A; --surface2: #1B3236; --ink: #E6F0EF; --muted: #8FA8AB;
  --line: #2F4C4F; --edit-line: #3F6266;
  --field: #0E2024; --field-line: #6B9296;
  --accent: #4CC3CE; --accent-ink: #062226; --accent-soft: #123C41;
  --good: #5CC58A; --good-soft: #163A28; --warn: #E0A04A; --warn-soft: #3C2C12; --bad: #EA8A72; --bad-soft: #40201A;
  /* tonos intermedios (UXI-003) */
  --ink0: #F3F8F8; --ink2: #CBDCDD; --ink3: #B0C4C6; --muted2: #86A0A3;
  --accent-faint: #0F2F33; --accent-line: #1F5A62; --accent-mid: #2E8A94; --accent-hi: #5CD0DB;
  --accent-hover: #46B6C1; --accent-strong: #2E909A; --good-line: #27573C; --good-strong: #8ADBAD;
  --warn-line: #6B4E1E; --warn-strong: #F0BC76; --bad-line: #7A3A2C; --bad-strong: #F2A793;
  --cab-bg: #123C41; --cab-hover: #1A525A; --cab-hi: #20707A; --cab-ink: #E6F0EF; --cab-ink2: #B0C4C6;
  --shadow: none;
  color-scheme: dark;
}
:root {
  --f-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-pill: 999px;
  --e1: 4px; --e2: 8px; --e3: 12px; --e4: 16px; --e5: 24px; --e6: 32px; --e7: 48px;   /* escala de espaciado */
  --objetivo: 48px;                                                                  /* tamaño mínimo de lo que se toca */
  --ancho-pagina: 1152px;                                                           /* ancho máximo de la página en escritorio (= max-w-6xl) */
}

/* ---------- Puente con Tailwind (UXI-003) ----------
   `assets/tailwind.css` redefine los colores `white`, `slate-*`, `brand-*`, `red-*`, `amber-*`, `green-*` y `emerald-*` como `var(--ui-…, <valor anterior>)`.
   Mientras esta hoja esté cargada (base.html), cada clase de Tailwind toma su color del sistema y cambia sola con el modo claro u oscuro; sin ella (base_minimal.html: dominó y
   pantallas de acceso) vale el respaldo, que es el color de antes. Así las plantillas existentes se re-estilan sin editarlas. */
:root {
  --ui-white: var(--surface);
  --ui-slate-50: var(--bg);
  --ui-slate-100: var(--surface2);
  --ui-slate-200: var(--line);
  --ui-slate-300: var(--field-line);
  --ui-slate-400: var(--muted2);
  --ui-slate-500: var(--muted);
  --ui-slate-600: var(--ink3);
  --ui-slate-700: var(--ink2);
  --ui-slate-800: var(--ink);
  --ui-slate-900: var(--ink0);
  --ui-brand-50: var(--accent-faint);
  --ui-brand-100: var(--accent-soft);
  --ui-brand-200: var(--accent-line);
  --ui-brand-300: var(--accent-mid);
  --ui-brand-400: var(--accent-mid);
  --ui-brand-500: var(--accent-hi);
  --ui-brand-600: var(--accent);
  --ui-brand-700: var(--accent-hover);
  --ui-brand-800: var(--accent-strong);
  --ui-red-50: var(--bad-soft);
  --ui-red-100: var(--bad-soft);
  --ui-red-200: var(--bad-line);
  --ui-red-300: var(--bad-line);
  --ui-red-500: var(--bad);
  --ui-red-600: var(--bad);
  --ui-red-700: var(--bad);
  --ui-red-800: var(--bad-strong);
  --ui-amber-50: var(--warn-soft);
  --ui-amber-100: var(--warn-soft);
  --ui-amber-200: var(--warn-line);
  --ui-amber-300: var(--warn-line);
  --ui-amber-600: var(--warn);
  --ui-amber-700: var(--warn);
  --ui-amber-800: var(--warn-strong);
  --ui-amber-900: var(--warn-strong);
  --ui-green-50: var(--good-soft);
  --ui-green-100: var(--good-soft);
  --ui-green-200: var(--good-line);
  --ui-green-300: var(--good-line);
  --ui-green-500: var(--good);
  --ui-green-600: var(--good);
  --ui-green-700: var(--good);
  --ui-green-800: var(--good-strong);
  --ui-emerald-50: var(--good-soft);
  --ui-emerald-100: var(--good-soft);
  --ui-emerald-200: var(--good-line);
  --ui-emerald-300: var(--good-line);
  --ui-emerald-500: var(--good);
  --ui-emerald-600: var(--good);
  --ui-emerald-700: var(--good);
  --ui-emerald-800: var(--good-strong);
  --ui-emerald-900: var(--good-strong);
  --ui-sky-100: var(--accent-soft);
  --ui-sky-800: var(--accent);
}

/* ---------- Base ---------- */
.ui-base, .ui-base * { box-sizing: border-box; }
.ui-base { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--f-body); font-size: 16px; line-height: 1.45; -webkit-text-size-adjust: 100%; }
:where(.ui-base) a { color: var(--accent); }
.ui-base :focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: var(--r-sm); }
.ui-h1 { font-size: 28px; line-height: 1.15; font-weight: 700; margin: 0; }
.ui-h2 { font-size: 22px; line-height: 1.2; font-weight: 700; margin: 0; }
.ui-h3 { font-size: 18px; line-height: 1.25; font-weight: 700; margin: 0; }
.ui-meta { font-size: 14px; color: var(--muted); }
.ui-pequeno { font-size: 13px; color: var(--muted); }
.ui-cifra { font-size: 40px; line-height: 1; font-weight: 700; font-variant-numeric: tabular-nums; }
.ui-etiqueta { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); font-weight: 600; }

/* ---------- Iconos ---------- */
.ui-icono { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.ui-icono--grande { width: 24px; height: 24px; }

/* ---------- Botones ---------- */
.ui-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--e2); min-height: var(--objetivo); padding: 0 var(--e4); border-radius: var(--r-md);
  border: 1.5px solid transparent; font: inherit; font-weight: 600; text-decoration: none; cursor: pointer; background: none; color: var(--ink); }
.ui-btn:disabled, .ui-btn[aria-disabled="true"] { opacity: .5; cursor: default; }
.ui-btn--primario { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.ui-btn--secundario { background: var(--surface); color: var(--accent); border-color: var(--field-line); }
.ui-btn--peligro { background: var(--bad-soft); color: var(--bad); border-color: var(--bad); }
.ui-btn--fantasma { color: var(--accent); }
.ui-btn--icono { width: var(--objetivo); padding: 0; background: var(--surface); border-color: var(--line); color: var(--ink); }
.ui-btn--bloque { display: flex; width: 100%; }
.ui-fab { position: fixed; right: var(--e4); bottom: calc(var(--e4) + var(--barra-inf, 0px) + env(safe-area-inset-bottom, 0px)); width: 56px; height: 56px; border-radius: var(--r-pill);
  display: grid; place-items: center; background: var(--accent); color: var(--accent-ink); border: 0; box-shadow: 0 4px 14px rgba(0, 0, 0, .28); text-decoration: none; z-index: 20; }
.ui-base a.ui-fab { color: var(--accent-ink); }

/* ---------- Chips y estados ---------- */
.ui-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 2px 10px; border-radius: var(--r-pill); font-size: 13px; font-weight: 600;
  background: var(--surface2); color: var(--ink); border: 1px solid transparent; }
.ui-chip--acento { background: var(--accent-soft); color: var(--accent); }
.ui-chip--bueno { background: var(--good-soft); color: var(--good); }
.ui-chip--alerta { background: var(--warn-soft); color: var(--warn); }
.ui-chip--malo { background: var(--bad-soft); color: var(--bad); }
.ui-chip--btn { min-height: var(--objetivo); padding: 0 var(--e4); font-size: 15px; border-color: var(--field-line); background: var(--surface); cursor: pointer; font-family: inherit; }
.ui-chip--btn[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }

/* ---------- Tarjeta y fila de lista ---------- */
.ui-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--e4); box-shadow: var(--shadow); }
.ui-lista { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow); }
.ui-fila { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--e3); min-height: 64px; padding: var(--e2) var(--e4); }
.ui-fila + .ui-fila { border-top: 1px solid var(--line); }
.ui-fila__titulo { font-weight: 600; line-height: 1.25; margin: 0; overflow-wrap: anywhere; }
.ui-fila__meta { font-size: 14px; color: var(--muted); margin: 2px 0 0; }
.ui-fila__acciones { display: flex; align-items: center; gap: var(--e1); }
.ui-avatar { width: 44px; height: 44px; border-radius: var(--r-pill); display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); font-weight: 700; font-size: 16px; }
.ui-hora { font-size: 22px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; min-width: 56px; }

/* ---------- Superficie de edición y campos (la nota de contraste del dueño) ---------- */
.ui-edit { background: var(--surface); border: 2px solid var(--edit-line); border-radius: var(--r-lg); padding: var(--e4); display: grid; gap: var(--e4); }
@media (min-width: 760px) { .ui-edit { padding: var(--e5); box-shadow: var(--shadow); } }
.ui-campo { display: grid; gap: 6px; }
.ui-campo label, .ui-campo .ui-campo__rotulo { font-size: 14px; font-weight: 600; }
.ui-campo input, .ui-campo select, .ui-campo textarea { width: 100%; min-height: var(--objetivo); padding: 10px 12px; border-radius: var(--r-md); border: 1.5px solid var(--field-line); background: var(--field); color: var(--ink); font: inherit; }
.ui-campo textarea { min-height: 96px; resize: vertical; }
.ui-campo input:focus-visible, .ui-campo select:focus-visible, .ui-campo textarea:focus-visible { outline: 3px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.ui-campo__ayuda { font-size: 13px; color: var(--muted); margin: 0; }
.ui-campo--error input, .ui-campo--error select, .ui-campo--error textarea { border-color: var(--bad); }
.ui-campo__error { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--bad); margin: 0; }
.ui-check { display: flex; align-items: center; gap: var(--e3); min-height: var(--objetivo); }
.ui-check input { width: 24px; height: 24px; accent-color: var(--accent); }
.ui-acciones { display: flex; flex-wrap: wrap; gap: var(--e3); }

/* ---------- Control segmentado ---------- */
.ui-seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; padding: 4px; background: var(--surface2); border-radius: var(--r-md); }
.ui-seg > * { min-height: var(--objetivo); display: flex; align-items: center; justify-content: center; gap: 6px; border-radius: 9px; border: 0; background: none; color: var(--muted); font: inherit; font-weight: 600; text-decoration: none; cursor: pointer; text-align: center; padding: 0 var(--e3); }
.ui-seg > [aria-selected="true"], .ui-seg > [aria-current="page"] { background: var(--surface); color: var(--ink); box-shadow: var(--shadow); outline: 1px solid var(--line); }

/* ---------- Menú de acciones «⋯» ---------- */
.ui-menu { position: relative; display: inline-block; }
.ui-menu > summary { list-style: none; }
.ui-menu > summary::-webkit-details-marker { display: none; }
.ui-menu__hoja { position: absolute; right: 0; top: calc(100% + 6px); min-width: 220px; z-index: 30; background: var(--surface); border: 1.5px solid var(--edit-line); border-radius: var(--r-md); padding: 6px; box-shadow: 0 8px 24px rgba(0, 0, 0, .22); }
.ui-menu__item { display: flex; align-items: center; gap: var(--e3); width: 100%; min-height: var(--objetivo); padding: 0 var(--e3); border: 0; border-radius: var(--r-sm); background: none; color: var(--ink); font: inherit; text-align: left; text-decoration: none; cursor: pointer; }
.ui-menu__item:hover { background: var(--surface2); }
.ui-menu__separador { height: 1px; margin: 6px 0; background: var(--line); border: 0; }
.ui-menu__item--peligro { color: var(--bad); font-weight: 600; }

/* ---------- Vacío y avisos ---------- */
.ui-vacio { display: grid; justify-items: center; gap: var(--e3); text-align: center; padding: var(--e6) var(--e4); color: var(--muted); border: 2px dashed var(--line); border-radius: var(--r-lg); }
.ui-vacio .ui-icono { width: 36px; height: 36px; }
.ui-aviso { display: flex; gap: var(--e3); align-items: flex-start; padding: var(--e3) var(--e4); border-radius: var(--r-md); background: var(--accent-soft); color: var(--ink); border: 1px solid var(--accent); }
.ui-aviso .ui-icono { margin-top: 2px; color: var(--accent); }
.ui-aviso--bueno { background: var(--good-soft); border-color: var(--good); } .ui-aviso--bueno .ui-icono { color: var(--good); }
.ui-aviso--alerta { background: var(--warn-soft); border-color: var(--warn); } .ui-aviso--alerta .ui-icono { color: var(--warn); }
.ui-aviso--malo { background: var(--bad-soft); border-color: var(--bad); } .ui-aviso--malo .ui-icono { color: var(--bad); }

/* ---------- Encabezado del sitio (UXI-004) ----------
   Dentro de `.ui-cabecera` los colores `brand-*` y `white` de Tailwind valen los tonos del encabezado, para que en oscuro no quede un bloque de acento brillante.
   (Se reasignan las variables `--color-*` de Tailwind: así siguen valiendo las mismas clases `bg-brand-600`, `text-white`, `hover:bg-brand-700`…) */
.ui-cabecera { --color-brand-600: var(--cab-bg); --color-brand-700: var(--cab-hover); --color-brand-500: var(--cab-hi); --color-white: var(--cab-ink); --color-brand-100: var(--cab-ink2); }
.ui-cabecera { border-bottom: 1px solid var(--line); }

/* ---------- Interruptor de modo de color (UXI-004): el icono cambia con data-modo (lo pone static/js/tema.js) ---------- */
.ui-tema__ico { display: none; }
.ui-tema[data-modo="auto"] .ui-tema__ico[data-ico="auto"], .ui-tema[data-modo="light"] .ui-tema__ico[data-ico="light"], .ui-tema[data-modo="dark"] .ui-tema__ico[data-ico="dark"] { display: block; }

/* ---------- Rejilla para escritorio (UXI-042): 1 columna en celular; 2 desde 760 px y, con `ui-rejilla--3`, 3 desde 1100 px. El ancho de página (`--ancho-pagina`) lo comparten la barra superior y el contenido (`max-w-6xl` de base.html). ---------- */
.ui-rejilla { display: grid; gap: var(--e4); grid-template-columns: minmax(0, 1fr); }
.ui-rejilla > * { min-width: 0; }
@media (min-width: 760px) { .ui-rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .ui-rejilla--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---------- Marco: piezas base (la muestra las enseña; el marco real está más abajo, UXI-009 y UXI-010) ---------- */
.ui-barra-sup { display: flex; align-items: center; justify-content: space-between; gap: var(--e3); min-height: 56px; padding: 0 var(--e4); background: var(--surface); border-bottom: 1px solid var(--line); }
.ui-barra-sup__titulo { font-size: 18px; font-weight: 700; margin: 0; }
.ui-barra-inf { display: grid; grid-template-columns: repeat(5, 1fr); gap: 2px; padding: 6px 8px calc(6px + env(safe-area-inset-bottom, 0px)); background: var(--surface); border-top: 1px solid var(--line); }
.ui-barra-inf > * { min-height: 56px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; border-radius: var(--r-md); font-size: 12px; font-weight: 600; color: var(--muted); text-decoration: none; background: none; border: 0; font-family: inherit; }
.ui-barra-inf > [aria-current="page"] { color: var(--accent); background: var(--accent-soft); }

@media (prefers-reduced-motion: reduce) { .ui-base * { transition: none !important; animation: none !important; } }

/* ---------- Encabezado de página y bloque plegable (UXI-007) ---------- */
.ui-encabezado { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e3); margin-bottom: var(--e4); }
.ui-encabezado__sub { margin: var(--e1) 0 0; color: var(--muted); font-size: 14px; }
.ui-detalles { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); }
.ui-detalles > summary { display: flex; align-items: center; justify-content: space-between; gap: var(--e3); min-height: var(--objetivo); padding: 0 var(--e4); cursor: pointer; font-weight: 600; list-style: none; border-radius: var(--r-lg); }
.ui-detalles > summary::-webkit-details-marker { display: none; }
.ui-detalles > summary::after { content: "+"; font-size: 22px; line-height: 1; color: var(--muted); }
.ui-detalles[open] > summary::after { content: "−"; }
.ui-detalles > :not(summary) { padding: 0 var(--e4) var(--e4); }

/* ---------- Marco del sitio (UXI-009 y UXI-010) ----------
   Barra superior de una fila: en celular, el nombre del módulo; en escritorio, la marca y los módulos en línea. La cuenta va en un menú.
   Barra inferior (solo celular): los módulos del núcleo y «Más», que abre una hoja con el resto de módulos y la cuenta. */
.ui-marco-sup { position: sticky; top: 0; z-index: 40; background: var(--cab-bg); color: var(--cab-ink); }
.ui-marco-sup__fila { display: flex; align-items: center; gap: var(--e3); min-height: 56px; max-width: var(--ancho-pagina); margin: 0 auto; padding: 0 var(--e3) 0 var(--e4); }
.ui-marco-marca { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; min-height: var(--objetivo); font-size: 18px; font-weight: 700; letter-spacing: -.01em; color: var(--cab-ink); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-marco-marca__web { display: none; }
.ui-marco-modulos { display: none; }
.ui-marco-btn { display: inline-flex; align-items: center; justify-content: center; width: var(--objetivo); height: var(--objetivo); border: 0; border-radius: var(--r-md); background: transparent; color: var(--cab-ink); cursor: pointer; list-style: none; }
.ui-marco-btn::-webkit-details-marker { display: none; }
.ui-marco-btn:hover { background: var(--cab-hover); }
.ui-marco-btn:focus-visible, .ui-marco-modulos > a:focus-visible, .ui-marco-modulos summary:focus-visible, .ui-marco-marca:focus-visible { outline: 3px solid var(--cab-ink); outline-offset: 2px; }
.ui-con-barra .ui-marco-cuenta { display: none; }
.ui-cuenta-nombre { display: flex; align-items: center; gap: var(--e3); margin: 0; padding: var(--e2) var(--e3); font-weight: 700; color: var(--ink); overflow-wrap: anywhere; }
.ui-menu__item .tema-nombre { font-weight: 700; }
.ui-menu__hoja form { margin: 0; }

/* Barra inferior del celular */
.ui-marco-inf { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 1fr; }
.ui-marco-inf > * { cursor: pointer; }
.ui-marco-inf > :not([aria-current="page"]):hover { background: var(--surface2); }
.ui-marco-inf > :focus-visible, .ui-hoja a:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; }
.ui-con-barra { --barra-inf: 68px; padding-bottom: calc(var(--barra-inf) + env(safe-area-inset-bottom, 0px)); }
/* UXI-028: `h-full` (Tailwind) fija el alto del body y el relleno de abajo quedaba dentro: la barra inferior tapaba el final de la página y no se podía bajar más */
body.ui-con-barra { height: auto; min-height: 100%; }

/* Hoja «Más» */
.ui-hoja { position: fixed; inset: 0; z-index: 60; display: flex; align-items: flex-end; }
.ui-hoja[hidden] { display: none; }
.ui-hoja__fondo { position: absolute; inset: 0; background: rgba(0, 0, 0, .5); }
.ui-hoja__panel { position: relative; width: 100%; max-height: 88vh; overflow-y: auto; background: var(--surface); color: var(--ink); border-radius: var(--r-xl, 20px) var(--r-xl, 20px) 0 0; padding: var(--e3) var(--e4) calc(var(--e4) + env(safe-area-inset-bottom, 0px)); box-shadow: 0 -8px 30px rgba(0, 0, 0, .3); }
.ui-hoja__cabecera { display: flex; align-items: center; justify-content: space-between; min-height: var(--objetivo); font-size: 18px; }
.ui-hoja__cerrar { color: var(--ink); }
.ui-hoja__cerrar:hover { background: var(--surface2); }
.ui-hoja__modulos { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--e2); margin: var(--e2) 0 var(--e3); }
.ui-hoja__modulos a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 84px; padding: var(--e2); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface2); color: var(--ink); font-size: 13px; font-weight: 600; text-align: center; text-decoration: none; }
.ui-hoja__modulos a[aria-current="page"] { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); }
.ui-hoja__cuenta { border-top: 1px solid var(--line); padding-top: var(--e2); }
body:has(.ui-hoja:not([hidden])) { overflow: hidden; }

/* Escritorio: módulos en línea arriba y sin barra inferior */
@media (min-width: 768px) {
  .ui-marco-marca { flex: 0 0 auto; }
  .ui-marco-marca__web { display: inline; }
  .ui-marco-marca__movil { display: none; }
  .ui-marco-modulos { display: flex; flex: 1 1 auto; flex-wrap: wrap; gap: 2px; min-width: 0; }
  .ui-marco-modulos > a, .ui-marco-modulos > details > summary { display: inline-flex; align-items: center; gap: 4px; min-height: 40px; padding: 0 var(--e3); border-radius: var(--r-md); font-size: 15px; font-weight: 600; color: var(--cab-ink); text-decoration: none; cursor: pointer; list-style: none; }
  .ui-marco-modulos > details > summary::-webkit-details-marker { display: none; }
  .ui-marco-modulos > a:hover, .ui-marco-modulos > details > summary:hover { background: var(--cab-hover); }
  .ui-marco-modulos > a[aria-current="page"], .ui-marco-modulos > details > summary[aria-current="page"] { background: var(--cab-hover); box-shadow: inset 0 -3px 0 var(--cab-ink); }
  .ui-marco-modulos > .ui-marco-modulos__discreto { color: var(--cab-ink2); font-weight: 500; }
  .ui-marco-mas .ui-menu__hoja { left: 0; right: auto; }
  .ui-marco-mas .ui-menu__item[aria-current="page"] { background: var(--accent-soft); color: var(--accent); }
  .ui-con-barra .ui-marco-cuenta { display: inline-block; }
  .ui-marco-inf, .ui-hoja { display: none !important; }
  .ui-con-barra { padding-bottom: 0; --barra-inf: 0px; }
}

/* ---------- Inicio (UXI-011) ---------- */
.ui-h3 { font-size: 18px; line-height: 1.25; font-weight: 700; margin: 0; }
.ui-seccion__cab { display: flex; align-items: baseline; justify-content: space-between; gap: var(--e3); margin: 0 0 var(--e2); }
.ui-seccion__cab a { font-weight: 600; font-size: 14px; }
.ui-inicio__aviso { margin-top: var(--e4); align-items: center; flex-wrap: wrap; }
.ui-inicio__aviso > span { flex: 1 1 200px; }
.ui-inicio__listas { margin-top: var(--e5); align-items: start; }
.ui-inicio__titulo { margin: var(--e5) 0 var(--e2); }
.ui-inicio__otros { margin-top: var(--e4); }
.ui-inicio__otros > .ui-tiles { padding-top: 0; }
a.ui-fila--enlace { color: inherit; text-decoration: none; }
a.ui-fila--enlace:hover { background: var(--surface2); }
a.ui-fila--enlace > .ui-icono:first-child { color: var(--accent); }
a.ui-fila--enlace > .ui-icono:last-child { color: var(--muted); }
.ui-fila--enlace > span:nth-child(2) { display: grid; min-width: 0; }
.ui-racha { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--e3); margin-top: var(--e4); color: var(--ink); text-decoration: none; }
a.ui-racha:hover { background: var(--surface2); }
.ui-racha__icono { display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--r-pill); background: var(--accent-soft); color: var(--accent); }
.ui-racha__cifra { font-size: 28px; font-weight: 700; line-height: 1; }
.ui-racha > .ui-icono { color: var(--muted); }
.ui-racha .ui-fila__meta { display: block; }
.ui-tiles { display: grid; gap: var(--e3); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 640px) { .ui-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .ui-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.ui-tile { display: grid; align-content: start; gap: 6px; min-height: 96px; padding: var(--e3) var(--e4); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow); color: var(--ink); text-decoration: none; }
.ui-tile:hover { background: var(--surface2); }
.ui-tile > .ui-icono { color: var(--accent); }
.ui-tile__nombre { font-weight: 700; line-height: 1.2; }
.ui-tile__dato { font-size: 14px; color: var(--muted); }
.ui-tile__dato b { color: var(--ink); }
.ui-detalles > .ui-tiles { padding: 0 var(--e4) var(--e4); }
@media (max-width: 639px) { .ui-inicio__listas .ui-lista > .ui-fila:nth-child(n+3) { display: none; } }   /* en el celular, dos filas por lista: lo demás está en «Ver todo» */

/* ---------- Agenda (UXI-030) y piezas que comparten otras pantallas ---------- */
.ui-solo-escritorio { display: none; }
@media (min-width: 768px) { .ui-solo-escritorio { display: inline-block; } .ui-solo-movil { display: none !important; } }
.ui-dos-columnas { display: grid; gap: var(--e5); margin-top: var(--e4); grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 900px) { .ui-dos-columnas { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); } }
.ui-agenda__lista { display: grid; gap: var(--e5); }
.ui-seccion__titulo { display: flex; align-items: center; gap: 6px; margin: 0 0 var(--e2); font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.ui-seccion__titulo--malo { color: var(--bad); }
.ui-fila--evento { grid-template-columns: auto minmax(0, 1fr) auto; }
.ui-fila__cuerpo { display: grid; min-width: 0; color: inherit; text-decoration: none; }
.ui-fila__cuerpo .ui-fila__meta { display: flex; align-items: center; gap: 6px; }
.ui-fila__meta .ui-icono { width: 16px; height: 16px; }
.ui-fila__cuando { display: grid; justify-items: end; text-align: right; line-height: 1.15; }
.ui-fila__cuando > span { font-size: 13px; color: var(--muted); }
.ui-fila__cuando .ui-hora { min-width: 0; font-size: 20px; }
.ui-fila--hecha .ui-fila__titulo { text-decoration: line-through; color: var(--muted); }
/* casilla de «completar»: toque de 48 px con un círculo de 28 px dentro */
.ui-marca { width: var(--objetivo); height: var(--objetivo); display: grid; place-items: center; border: 0; background: none; cursor: pointer; padding: 0; border-radius: var(--r-md); }
.ui-marca > span { width: 28px; height: 28px; border-radius: var(--r-pill); display: grid; place-items: center; border: 2px solid var(--field-line); color: transparent; }
.ui-marca:hover > span { border-color: var(--accent); }
.ui-marca--hecha > span { background: var(--good); border-color: var(--good); color: var(--surface); }
.ui-marca:focus-visible { outline: 3px solid var(--accent); outline-offset: 0; }
.ui-zona-peligro { margin-top: var(--e5); padding-top: var(--e4); border-top: 1px solid var(--line); }

/* ---------- Contactos, lista (UXI-031) ---------- */
.ui-contactos__filtros { display: grid; gap: var(--e3); }
.ui-contactos__buscar { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--e2); align-items: start; }
.ui-contactos__limpiar { justify-self: start; min-height: 32px; font-weight: 600; font-size: 14px; }
.ui-contactos__etiquetas { display: grid; gap: var(--e3); }
.ui-contactos__checks { display: flex; flex-wrap: wrap; gap: 0 var(--e4); }
.ui-contactos__checks--aparte { border-top: 1px solid var(--line); padding-top: var(--e2); }
.ui-punto { width: 12px; height: 12px; border-radius: var(--r-pill); border: 1px solid var(--line); flex: none; }
.ui-contactos__total { display: flex; align-items: center; justify-content: space-between; gap: var(--e3); margin: var(--e3) 0; color: var(--muted); font-size: 14px; }
.ui-contactos__total p { margin: 0; }
.ui-contactos__bulk { margin-bottom: var(--e3); }
.ui-contactos__bulk[hidden] { display: none; }
.ui-contactos__bulk-cab { display: flex; align-items: center; justify-content: space-between; gap: var(--e3); color: var(--muted); font-size: 14px; }
.ui-contactos__etiqueta-bulk { display: grid; gap: var(--e3); }
.ui-fila--contacto { grid-template-columns: auto minmax(0, 1fr) auto; }
.ui-contactos__avatar { display: grid; place-items: center; width: var(--objetivo); height: var(--objetivo); cursor: pointer; }
.ui-contactos__avatar > * { grid-area: 1 / 1; }
.ui-contactos__avatar input { display: none; width: 28px; height: 28px; accent-color: var(--accent); }
.ui-seleccion .ui-contactos__avatar .ui-avatar { display: none; }
.ui-seleccion .ui-contactos__avatar input { display: block; }
.ui-contactos__chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.ui-fila__meta--aviso { color: var(--warn); font-weight: 600; }
.ui-contactos__paginas { display: flex; align-items: center; justify-content: space-between; gap: var(--e3); margin-top: var(--e4); color: var(--muted); font-size: 14px; }

/* ---------- Contactos, ficha (UXI-032) ---------- */
.ui-volver { display: inline-flex; align-items: center; gap: 4px; min-height: var(--objetivo); margin-bottom: 0; font-size: 14px; font-weight: 600; color: var(--muted); text-decoration: none; }
.ui-volver:hover { color: var(--accent); }
.ui-ficha__cab { align-items: flex-start; }
.ui-ficha__nombre { display: flex; align-items: center; gap: var(--e3); min-width: 0; flex: 1 1 220px; }
.ui-ficha__nombre h1 { overflow-wrap: anywhere; }
.ui-avatar--grande { width: 56px; height: 56px; font-size: 22px; flex: none; }
.ui-ficha__datos { display: grid; gap: var(--e2); margin-bottom: var(--e4); }
.ui-ficha__circulo { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e2); margin: 0; color: var(--muted); font-size: 14px; }
.ui-chip-select { appearance: none; -webkit-appearance: none; min-height: var(--objetivo); padding: 0 28px 0 14px; border: 1px solid var(--accent); border-radius: var(--r-pill); background: var(--accent-soft) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%230A717B' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>") no-repeat right 10px center; color: var(--accent); font: inherit; font-weight: 700; cursor: pointer; }
:root[data-theme="dark"] .ui-chip-select { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%234CC3CE' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>"); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .ui-chip-select { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%234CC3CE' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>"); } }
.ui-chip-select:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.ui-ficha__bloque { margin-top: var(--e5); }
.ui-ficha__etiquetas { margin-top: var(--e4); }
.ui-ficha__notas { margin-top: var(--e4); white-space: pre-line; }
.ui-ficha__filtros { display: flex; flex-wrap: wrap; gap: var(--e2); margin: var(--e3) 0; }
.ui-ficha__filtros .ui-chip--btn { text-decoration: none; }
.ui-ficha__mas { margin: var(--e2) 0 0; font-size: 14px; }
.ui-seccion__subtitulo { margin: var(--e3) 0 var(--e1); font-size: 13px; font-weight: 700; color: var(--muted); }
.ui-seccion__cab .ui-seccion__titulo { margin-bottom: 0; }
.ui-seccion__cab { align-items: center; margin-bottom: var(--e2); }
.ui-fila--dato { grid-template-columns: minmax(0, 1fr) auto; }
.ui-fila--bitacora { grid-template-columns: minmax(0, 1fr) auto; align-items: start; }
.ui-fila--comentario { background: var(--surface2); }
.ui-fila__texto { white-space: pre-line; color: var(--ink); font-size: 15px; }
.ui-fila__fecha { white-space: nowrap; text-align: right; }
.ui-fila__titulo--normal { font-weight: 400; }
.ui-tachado { text-decoration: line-through; color: var(--muted); }
.ui-btn--quitar { color: var(--muted); }
.ui-btn--quitar:hover { color: var(--bad); border-color: var(--bad); }
.ui-detalles--agregar { margin-top: var(--e2); }
.ui-detalles--agregar > summary { justify-content: flex-start; gap: var(--e2); color: var(--accent); }
.ui-detalles--agregar > summary::after { content: none; }
.ui-edit--plano { margin: 0 var(--e3) var(--e3); }
.ui-menu__hoja--ancha { min-width: 280px; }
.ui-menu__form { display: grid; gap: var(--e2); padding: var(--e2) var(--e3); }
.ui-menu__form label { font-size: 13px; font-weight: 600; color: var(--muted); }
.ui-menu__form input { width: 100%; min-height: var(--objetivo); padding: 10px 12px; border-radius: var(--r-md); border: 1.5px solid var(--field-line); background: var(--field); color: var(--ink); font: inherit; }
.ui-fila a { overflow-wrap: anywhere; }

/* ---------- Contactos, A quién contactar y Repaso rápido (UXI-033) ---------- */
.ui-contactar { display: grid; gap: var(--e4); }
@media (min-width: 900px) { .ui-contactar { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; } }
.ui-contactar__tarjeta { display: grid; gap: var(--e3); }
.ui-contactar__cab { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--e3); align-items: start; }
.ui-contactar__fila { display: flex; align-items: center; gap: var(--e2); }
.ui-contactar__fila > form { flex: 1 1 auto; min-width: 0; }
.ui-contactar__fila > .ui-btn--icono, .ui-contactar__fila .ui-menu { flex: none; }
.ui-contactar__motivos { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 2px; color: var(--muted); font-size: 14px; }
.ui-repaso { display: grid; gap: var(--e4); }
.ui-fila--repaso { grid-template-columns: auto minmax(0, 1fr) minmax(130px, 40%); min-height: 64px; }
.ui-repaso__circulo { width: 100%; min-height: var(--objetivo); padding: 8px 10px; border-radius: var(--r-md); border: 1.5px solid var(--field-line); background: var(--field); color: var(--ink); font: inherit; }
.ui-repaso__circulo:focus-visible { outline: 3px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.ui-repaso__pie { margin: 0; }

/* ---------- Contactos, formularios y administración (UXI-034) ---------- */
.ui-grupo { margin: 0; padding: var(--e3) var(--e4) var(--e4); border: 1.5px solid var(--edit-line); border-radius: var(--r-md); display: grid; gap: var(--e3); min-width: 0; }
.ui-grupo > legend { padding: 0 var(--e2); font-size: 14px; font-weight: 700; }
.ui-grupo__fila { display: grid; gap: var(--e3); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 520px) { .ui-grupo__fila { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) minmax(0, 1.4fr); } }
.ui-grupo__checks { display: flex; flex-wrap: wrap; gap: 0 var(--e4); }
.ui-campo input[type="color"] { width: 72px; padding: 4px; cursor: pointer; }
.ui-campo input[type="file"] { padding: 8px; }
.ui-campo input[type="file"]::file-selector-button { margin-right: var(--e3); min-height: 36px; padding: 0 var(--e3); border: 0; border-radius: var(--r-sm); background: var(--accent); color: var(--accent-ink); font: inherit; font-weight: 600; cursor: pointer; }
.ui-campo input[type="radio"], .ui-campo input[type="checkbox"] { width: auto; min-height: 0; }
.ui-etiquetas__nueva { margin-bottom: var(--e4); }
.ui-etiquetas__campos { display: grid; gap: var(--e3); grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
.ui-etiquetas__nombre { display: flex; align-items: center; gap: var(--e3); }
.ui-punto--grande { width: 20px; height: 20px; }
.ui-h1--medio { font-size: 22px; }
.ui-fila__titulo--tenue { color: var(--muted); font-weight: 500; }
.ui-duplicados { display: grid; gap: var(--e4); }
.ui-duplicados__grupo { margin-top: var(--e3); box-shadow: none; }
.ui-fila--duplicado { grid-template-columns: auto minmax(0, 1fr); align-items: start; padding-block: var(--e3); }
.ui-duplicados__unir { display: flex; flex-wrap: wrap; gap: var(--e2); margin-top: var(--e2); }
.ui-duplicados__unir .ui-btn { text-align: left; }
.ui-unir ul { margin: var(--e2) 0 0; padding-left: 20px; display: grid; gap: 4px; }
.ui-unir p { margin: 0; }
.ui-unir + .ui-aviso { margin-top: var(--e3); }
.ui-unir__form { margin-top: var(--e3); }
.ui-importar__formato { margin-bottom: var(--e3); }
.ui-importar__formato p { margin: 0 0 var(--e2); }
.ui-importar__formato pre { margin: 0 0 var(--e2); padding: var(--e3); overflow-x: auto; border-radius: var(--r-sm); background: var(--surface2); font-size: 14px; }
.ui-importar__reglas { margin: 0; padding: 0 var(--e4) var(--e4) 36px; display: grid; gap: 6px; font-size: 14px; color: var(--muted); }
.ui-importar__form { margin-top: var(--e4); }
.ui-resultado { display: grid; gap: var(--e3); grid-template-columns: minmax(0, 1fr); margin-bottom: var(--e3); }
@media (min-width: 640px) { .ui-resultado { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ui-resultado__dato { display: grid; gap: 2px; }
.ui-resultado__dato b { font-size: 32px; line-height: 1; }
.ui-resultado__dato span { font-size: 14px; color: var(--muted); }
.ui-resultado__dato--bueno { background: var(--good-soft); border-color: var(--good); } .ui-resultado__dato--bueno b { color: var(--good); }
.ui-resultado__dato--alerta { background: var(--warn-soft); border-color: var(--warn); } .ui-resultado__dato--alerta b { color: var(--warn); }
.ui-resultado__nota { margin: 0 0 var(--e3); }
.ui-tabla { overflow-x: auto; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); }
.ui-tabla table { width: 100%; border-collapse: collapse; font-size: 14px; }
.ui-tabla th { padding: var(--e2) var(--e3); text-align: left; font-size: 12px; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); background: var(--surface2); }
.ui-tabla td { padding: var(--e2) var(--e3); border-top: 1px solid var(--line); vertical-align: top; }
.ui-tabla__aviso { color: var(--warn); font-weight: 600; }

/* ---------- Conocimiento: lista de temas y Qué estudiar hoy (UXI-035; las barras y el pie los comparte la pantalla del macrotema) ---------- */
.ui-chip--solido { background: var(--good); color: var(--surface); border-color: var(--good); }
.ui-tema { display: grid; gap: var(--e3); align-content: start; }
.ui-tema__cab { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--e3); }
.ui-tema__titulo { min-width: 0; }
.ui-tema__titulo h2 a { color: var(--ink); text-decoration: none; overflow-wrap: anywhere; }
.ui-tema__titulo h2 a:hover { color: var(--accent); text-decoration: underline; }
.ui-tema__desc { margin: 2px 0 0; color: var(--muted); font-size: 14px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ui-tema__dominio { display: grid; justify-items: end; gap: 4px; flex: none; }
.ui-tema__cifra { font-size: 36px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.ui-tema__pie { display: flex; flex-wrap: wrap; align-items: center; gap: 4px var(--e4); font-size: 13px; color: var(--muted); }
.ui-progreso { display: grid; gap: var(--e2); }
.ui-progreso__rotulo { display: flex; justify-content: space-between; font-size: 13px; color: var(--muted); }
.ui-progreso__pista { height: 10px; margin-top: 2px; border-radius: var(--r-pill); background: var(--surface2); border: 1px solid var(--line); overflow: hidden; }
.ui-progreso__relleno { height: 100%; border-radius: var(--r-pill); }
.ui-progreso__relleno--teoria { background: var(--accent); }
.ui-progreso__relleno--aplicacion { background: var(--good); }
.ui-orden { display: none; align-items: center; gap: var(--e2); padding-top: var(--e2); border-top: 1px solid var(--line); font-size: 13px; color: var(--muted); }
.ui-orden form { margin: 0; }
.ui-estudio { margin-top: var(--e5); }
.ui-estudio ul { list-style: none; padding: 0; margin: 0; }
.ui-seccion__titulo--alerta { color: var(--warn); }
.ui-fila--estudio { grid-template-columns: minmax(0, 1fr) auto; }
@media (max-width: 520px) { .ui-fila--estudio .ui-btn { width: var(--objetivo); padding: 0; } .ui-fila--estudio .ui-btn__texto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } }   /* en el celular el botón es solo el icono (su nombre accesible sigue en aria-label) */
.ui-contactar__alt { text-align: center; }

/* ---------- Conocimiento: macrotema y hoja (UXI-036) ---------- */
[data-ordenable].ui-ordenando .ui-orden { display: flex; }
.ui-seccion__cab--fin { justify-content: flex-end; margin: 0 0 var(--e2); }
.ui-migas { display: flex; flex-wrap: wrap; align-items: center; column-gap: 6px; font-size: 14px; color: var(--muted); margin-bottom: var(--e3); overflow-wrap: anywhere; }
.ui-migas a { display: inline-flex; align-items: center; min-height: var(--objetivo); color: var(--accent); font-weight: 600; text-decoration: none; }
.ui-migas a:hover { text-decoration: underline; }
.ui-migas__actual { color: var(--ink); font-weight: 600; }
.ui-tema-pagina { margin-top: 0; }
.ui-tema-pagina__principal { display: grid; gap: var(--e4); min-width: 0; }
.ui-subtemas { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e3); }
.ui-tema--chico { padding: var(--e3) var(--e4); }
.ui-tema__cifra--chica { font-size: 26px; }
.ui-tema--chico .ui-fila__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px var(--e2); }
.ui-detalles__cuerpo { display: grid; gap: var(--e5); padding: var(--e2) var(--e4) var(--e4); }
.ui-detalles > summary .ui-fila__meta { margin: 0; flex: 1; text-align: right; padding-right: var(--e2); }
.ui-form-linea { display: grid; gap: var(--e2); margin-top: var(--e3); align-items: end; }
@media (min-width: 640px) { .ui-form-linea { grid-template-columns: minmax(0, 1fr) auto; } .ui-form-linea--recurso { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) minmax(0, 2fr) auto; } }
.ui-chip--quitable { gap: 2px; padding-right: 2px; margin: 0; }
.ui-chip--quitable button { display: inline-grid; place-items: center; width: 28px; height: 28px; border: 0; background: none; color: var(--muted); border-radius: var(--r-pill); cursor: pointer; padding: 0; }
.ui-chip--quitable button:hover { background: var(--surface2); color: var(--bad); }
.ui-indice ul { list-style: none; margin: 0; padding: 0; }
.ui-nodo { display: flex; align-items: center; justify-content: space-between; gap: var(--e2); min-height: var(--objetivo); padding: 0 var(--e2); border-radius: var(--r-sm); cursor: pointer; list-style: none; }
.ui-nodo::-webkit-details-marker { display: none; }
.ui-nodo:hover { background: var(--surface2); }
.ui-nodo a { display: flex; align-items: center; min-height: var(--objetivo); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); text-decoration: none; }
.ui-nodo a:hover { text-decoration: underline; }
.ui-nodo > span { flex: none; font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.ui-nodo--actual { background: var(--accent-soft); font-weight: 700; }
.ui-nodo__hijos { margin-left: var(--e3) !important; padding-left: var(--e1) !important; border-left: 1px solid var(--line); }
@media (min-width: 900px) { .ui-tema-pagina > aside { position: sticky; top: 72px; align-self: start; } }
.ui-sesiones { list-style: none; padding: 0; }
.ui-fila--sesion { grid-template-columns: minmax(0, 1fr); }
.ui-fila--sesion .ui-fila__cuerpo { display: grid; gap: 4px; }

/* ---------- Conocimiento, formularios (UXI-037) ---------- */
.ui-grupo__fila--dos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ui-detalles__texto { margin: 0; padding: 0 var(--e4) var(--e4); font-size: 14px; color: var(--muted); }
.ui-previa { margin-top: var(--e4); background: var(--good-soft); border-color: var(--good); display: grid; gap: var(--e3); }
.ui-previa__titulo { display: flex; align-items: flex-start; gap: var(--e2); margin: 0; font-size: 16px; font-weight: 700; color: var(--ink); }
.ui-previa__titulo .ui-icono { margin-top: 2px; color: var(--good); }
.ui-previa__cuerpo { display: grid; gap: var(--e3); font-size: 15px; }
.ui-previa__arbol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; font-size: 15px; }
.ui-importar__ejemplo { margin: var(--e2) var(--e4) var(--e4); padding: var(--e3); overflow-x: auto; border-radius: var(--r-sm); background: var(--surface2); font-size: 13px; }
.ui-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important; font-size: 14px !important; }
.ui-exportar { margin-top: var(--e4); }
.ui-exportar__modo { margin: 0 0 var(--e3); }
.ui-chip[hidden] { display: none; }
p.ui-fila__meta > .ui-icono:first-child { margin-right: 6px; vertical-align: -3px; }   /* un icono suelto delante de texto en un párrafo (el cumpleaños de la ficha) */
.ui-detalles + .ui-edit, .ui-detalles + form.ui-edit { margin-top: var(--e3); }

/* ---------- Ejercicio (UXI-038) ---------- */
.ui-ejercicio__lista { margin-top: var(--e4); }
.ui-estado { display: inline-grid; place-items: center; width: 24px; height: 24px; margin-right: var(--e2); border-radius: var(--r-pill); background: var(--surface2); color: var(--muted); vertical-align: middle; }
.ui-estado--bueno { background: var(--good-soft); color: var(--good); }
.ui-ejercicio__registrar { margin-bottom: 0; }
.ui-grupo__fila > * { min-width: 0; }
@media (max-width: 479px) { .ui-grupo__fila--apila { grid-template-columns: minmax(0, 1fr); } }
.ui-detalles--agregar[open] > summary::after { content: none; }
.ui-campo { min-width: 0; }
.ui-campo input, .ui-campo select, .ui-campo textarea { min-width: 0; max-width: 100%; box-sizing: border-box; }
.ui-campo input[type="date"], .ui-campo input[type="time"], .ui-campo input[type="datetime-local"] { display: block; -webkit-appearance: none; appearance: none; }

/* ---------- Consumo eléctrico, resumen (UXI-039) ---------- */
.ui-consumo__total { display: grid; gap: var(--e2); margin-bottom: var(--e2); }
.ui-consumo__total .ui-seccion__titulo { margin: 0; }
.ui-consumo__total-fila { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--e3); }
.ui-consumo__total-fila > div { display: grid; gap: 2px; }
.ui-consumo__cifra { font-size: 34px; font-weight: 700; line-height: 1.05; font-variant-numeric: tabular-nums; }
.ui-consumo__cifra--media { font-size: 26px; }
.ui-contrato { display: grid; gap: var(--e3); align-content: start; color: var(--ink); text-decoration: none; border-left-width: 6px; }
.ui-contrato:hover { background: var(--surface2); }
.ui-contrato--sobre { border-left-color: var(--bad); }
.ui-contrato--dentro { border-left-color: var(--good); }
.ui-contrato--elegido { outline: 3px solid var(--accent); outline-offset: -1px; }
.ui-contrato__cab { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--e3); }
.ui-contrato__monto { display: grid; justify-items: end; gap: 4px; text-align: right; }
.ui-contrato__texto { margin: 0; font-size: 15px; }
.ui-texto--bueno { color: var(--good); font-weight: 600; }
.ui-texto--malo { color: var(--bad); font-weight: 600; }
.ui-rejilla--tarjetas { gap: var(--e3); }
.ui-rejilla--tarjetas .ui-contrato { gap: var(--e1); }

/* ---------- Consumo eléctrico, página de contrato (UXI-040) ---------- */
.ui-contrato-pagina { display: grid; gap: var(--e4); margin-top: var(--e3); }
.ui-contrato-pagina > .ui-card { display: grid; gap: var(--e3); align-content: start; }
.ui-contrato-pagina > .ui-card > .ui-seccion__titulo { margin: 0; }
.ui-contrato-pagina__tarjetas { margin-bottom: var(--e3); }
.ui-contrato-pagina .ui-card > .ui-edit--plano, .ui-contrato-pagina .ui-card > .ui-form-linea { margin: 0; }
.ui-contrato-pagina p { margin: 0; }
.ui-contrato__nota { padding: var(--e3); border-radius: var(--r-md); background: var(--surface2); color: var(--ink); }
.ui-contrato__cifra-fila { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e3); }
.ui-consumo__cifra--grande { font-size: 44px; }
.ui-contrato__linea { font-size: 16px; }
.ui-contrato__lectura { gap: var(--e3); }
.ui-contrato__plegable { margin: 0; }
.ui-contrato__plegable > summary .ui-fila__meta { margin: 0 var(--e3) 0 auto; }
.ui-fila--medida { grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: var(--e2) var(--e3); padding-block: var(--e3); }
.ui-fila--en-plan { border-left: 4px solid var(--accent); background: var(--accent-soft); }
.ui-medida__casilla { width: 24px; height: 24px; margin-top: 2px; accent-color: var(--accent); }
.ui-medida__nombre { font-weight: 600; line-height: 1.3; cursor: pointer; }
.ui-medida__nombre .ui-fila__meta { display: block; font-weight: 400; }
.ui-medida__ahorro { display: flex; align-items: center; gap: 4px; white-space: nowrap; font-size: 13px; color: var(--muted); }
.ui-medida__ahorro input { width: 72px; min-height: 40px; padding: 4px 8px; border-radius: var(--r-sm); border: 1.5px solid var(--field-line); background: var(--field); color: var(--ink); font: inherit; }
.ui-medida__efecto { grid-column: 2 / 4; }
.ui-medida-aplicada { display: grid; gap: var(--e2); margin-bottom: var(--e3); box-shadow: none; }
.ui-tabla--numeros td, .ui-tabla--numeros th { text-align: right; white-space: nowrap; }
.ui-tabla--numeros td:first-child, .ui-tabla--numeros th:first-child { text-align: left; }
.ui-tabla__estimado { font-style: italic; color: var(--muted); }
.ui-solo-lector { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (min-width: 900px) { .ui-contrato-pagina { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; } .ui-contrato-pagina > .ui-contrato__plegable { grid-column: 1 / -1; } }
.ui-rejilla--tarjetas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ui-rejilla--tarjetas .ui-contrato { padding: var(--e3); }
.ui-rejilla--tarjetas .ui-consumo__cifra--media { font-size: 22px; }
.ui-contrato__plegable > summary .ui-fila__meta { white-space: nowrap; flex: none; }
.ui-contrato__plegable > summary { gap: var(--e2); }

/* UXI-045: Cuentas (lista, detalle y nueva) */
.ui-fila--cuenta { align-items: start; padding-top: var(--e3); padding-bottom: var(--e3); }
.ui-fila--cuenta > .ui-icono:last-child { align-self: center; }
.ui-fila--cuenta .ui-fila__titulo { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ui-ficha__datos-cuenta { margin: var(--e2) 0 var(--e3); overflow-wrap: anywhere; }
.ui-clave-temporal { display: grid; gap: var(--e3); margin: var(--e4) 0; background: var(--accent-soft); border-color: var(--accent); }
.ui-clave-temporal__titulo { display: flex; align-items: center; gap: var(--e2); margin: 0; font-weight: 600; }
.ui-clave-temporal__clave { margin: 0; font: 700 24px/1.2 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .06em; overflow-wrap: anywhere; user-select: all; color: var(--ink); }
.ui-grupo__checks--columna { flex-direction: column; gap: var(--e2); }
.ui-cuenta-pagina { margin-top: var(--e4); }
.ui-check-fila { display: flex; align-items: center; justify-content: space-between; gap: var(--e3); }
.ui-check-fila a { text-decoration: underline; }

/* UXI-046: Perfiles (lista, detalle y nuevo) */
.ui-check--modulo { align-items: flex-start; padding: var(--e2) 0; }
.ui-check--modulo input { margin-top: 2px; flex: none; }
.ui-check__texto { display: grid; gap: 2px; min-width: 0; }
.ui-check__nombre { display: flex; align-items: center; gap: var(--e2); font-weight: 600; }
.ui-menu__nota { margin: 0; padding: var(--e2) var(--e3); max-width: 280px; }
.ui-menu__item:disabled { opacity: .5; cursor: not-allowed; }
a.ui-chip { text-decoration: none; }

/* UXI-047: Direcciones (solo adaptada) */
.ui-direcciones__leyenda { margin: var(--e3) 0; }
.ui-direcciones__leyenda-cuerpo { display: grid; gap: var(--e2); padding: 0 var(--e4) var(--e4); }
.ui-direcciones__simbolos { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e2); }
.ui-direcciones__simbolos li { display: flex; align-items: center; gap: var(--e2); }
.ui-direcciones__filtro { margin: var(--e3) 0; display: grid; gap: var(--e3); align-items: end; }
@media (min-width: 760px) { .ui-direcciones__filtro { grid-template-columns: repeat(3, minmax(0, 1fr)) auto; } }
.ui-direcciones__tabla { max-height: 70vh; overflow: auto; overscroll-behavior: contain; }
.ui-direcciones__tabla table { min-width: 760px; }
.ui-direcciones__tabla thead th { position: sticky; top: 0; z-index: 1; }
.ui-direcciones__ruta { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px; overflow-wrap: anywhere; }
a.ui-direcciones__ruta { color: var(--accent); text-decoration: underline; }
.ui-direcciones__modulo, .ui-direcciones__que { font-size: 13px; color: var(--muted); }
.ui-direcciones__actor { text-align: center !important; width: 44px; }
.ui-direcciones__marca { display: inline-block; min-width: 24px; padding: 2px 6px; border-radius: var(--r-pill); background: var(--surface2); color: var(--muted); font-weight: 700; }
.ui-direcciones__marca--si { background: var(--good-soft); color: var(--good); }
.ui-direcciones__marca--parcial { background: var(--warn-soft); color: var(--warn); }

/* UXI-048: Entrar y pantallas de cuenta */
.ui-entrar { display: grid; gap: var(--e4); }
.ui-entrar__titulo { text-align: center; margin: var(--e4) 0 0; }
.ui-entrar__nota { text-align: center; margin: 0; }
.ui-vacio--tarjeta { background: var(--surface); border-style: solid; box-shadow: var(--shadow); margin-top: var(--e5); }
.ui-vacio--tarjeta .ui-h2 { color: var(--ink); margin: 0; }

/* UXI-050: objetivos de 48 px en pantallas concretas */
a.ui-fila__titulo { display: flex; align-items: center; min-height: var(--objetivo); }
a.ui-fila__cuerpo { align-self: stretch; align-content: center; min-height: var(--objetivo); }
.ui-seccion__cab a { display: inline-flex; align-items: center; min-height: var(--objetivo); }
/* formularios de pantallas que aún usan clases de Tailwind (Catastro, Herramientas, Comidas, Consumo…): campos y botones de envío de 48 px */
main :is(input:not([type=checkbox], [type=radio], [type=hidden], [type=file], [type=range], [type=color]), select, textarea):not([class*="ui-"]) { min-height: var(--objetivo); }
main :is(button[type=submit], .bg-brand-600):not([class*="ui-"]) { min-height: var(--objetivo); }

/* CAT-023: dos campos lado a lado en la búsqueda por campos */
.ui-campos-fila { display: grid; gap: var(--e3); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ui-edit > section { display: grid; gap: var(--e4); }
.ui-edit > section[hidden] { display: none; }
.ui-lecturas { margin-top: var(--e3); }
.ui-campos-detalle { margin-top: var(--e4); }
.ui-campos-detalle__cuerpo { padding: 0 var(--e4) var(--e4); }
.ui-campos-detalle .ui-edit { border: 0; padding: var(--e3) 0 0; box-shadow: none; }

/* CAT-025: portada de Catastro (la búsqueda como llamada a la acción) */
.ui-catastro { display: grid; gap: var(--e5); max-width: 720px; margin: 0 auto; padding-top: var(--e3); }
.ui-catastro__titulo { text-align: center; }
.ui-catastro__buscar { display: grid; gap: var(--e3); }
.ui-catastro__caja { display: flex; gap: var(--e2); }
.ui-catastro__entrada { flex: 1 1 auto; min-width: 0; min-height: 56px; padding: 0 var(--e4); font: inherit; font-size: 18px; border-radius: var(--r-md); border: 2px solid var(--field-line); background: var(--field); color: var(--ink); }
.ui-catastro__entrada:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.ui-catastro__boton { min-height: 56px; }
@media (max-width: 520px) { .ui-catastro__boton span { display: none; } .ui-catastro__boton { width: 56px; padding: 0; } }
.ui-catastro__parte { display: flex; align-items: center; gap: var(--e2); margin: 0; padding: var(--e2) var(--e3); border-radius: var(--r-md); background: var(--warn-soft); color: var(--warn); font-size: 14px; font-weight: 600; }
.ui-catastro__fichas { display: flex; flex-wrap: wrap; gap: var(--e2); }
.ui-catastro__fichas:empty { display: none; }
.ui-catastro__ficha { gap: 6px; padding-right: 4px; min-height: 36px; }
.ui-catastro__ficha-etiqueta { font-weight: 500; opacity: .85; }
.ui-catastro__quitar { width: 28px; height: 28px; margin-left: 2px; border: 0; border-radius: var(--r-pill); background: transparent; color: inherit; font-size: 18px; line-height: 1; cursor: pointer; }
.ui-catastro__quitar:hover { background: rgba(0, 0, 0, .12); }
.ui-catastro__aviso { margin: 0; color: var(--warn); font-size: 14px; font-weight: 600; }
.ui-catastro__sugerencia { padding: 0 4px; border: 0; background: none; color: var(--accent); font: inherit; font-weight: 700; text-decoration: underline; cursor: pointer; min-height: 32px; }
.ui-catastro__ejemplos .ui-chip--btn { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 14px; }
.ui-catastro__botones { display: grid; gap: var(--e2); }
@media (min-width: 640px) { .ui-catastro__botones { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ui-catastro__recientes { display: grid; gap: var(--e2); }
.ui-catastro__recientes .ui-seccion__cab { margin: 0; align-items: center; }
.ui-catastro__reciente { text-decoration: none; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 14px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-catastro__borrar { color: var(--muted); }
.ui-catastro__cab { display: grid; grid-template-columns: var(--objetivo) 1fr var(--objetivo); align-items: center; }
.ui-catastro__cab .ui-menu { justify-self: end; }

/* CAT-028: resultados de Catastro (lista, mapa y exportación) con el sistema de diseño */
.ui-resultados__cuenta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e2); margin: var(--e4) 0 var(--e2); }
.ui-resultados__aviso { margin-top: var(--e2); }
.ui-resultados__acciones { margin-top: var(--e3); align-items: center; }
.ui-resultados__ayuda { margin: var(--e2) 0 var(--e3); }
.ui-resultados { display: grid; gap: var(--e4); }
.ui-resultados__lienzo { height: 24rem; width: 100%; border-radius: var(--r-lg); border: 1px solid var(--line); overflow: hidden; isolation: isolate; }
.ui-resultados__leyenda { display: flex; flex-wrap: wrap; gap: var(--e1) var(--e4); margin: var(--e2) 0; font-size: 13px; color: var(--muted); }
.ui-resultados__etiqueta { display: inline-flex; align-items: center; gap: 6px; }
.ui-resultados__fila { grid-template-columns: auto minmax(0, 1fr) auto; cursor: pointer; }
.ui-resultados__fila:hover { background: var(--surface2); }
.ui-resultados__fila:focus-visible { outline-offset: -3px; }
.tarjeta--activa { background: var(--accent-soft); box-shadow: inset 4px 0 0 var(--accent); }
.ui-resultados__designacion { font-weight: 700; overflow-wrap: anywhere; }
.ui-resultados__marca { width: var(--objetivo); min-height: var(--objetivo); justify-content: center; }
.ui-resultados__detalle { padding: 0 var(--e3); }
.ui-resultados__vacio { margin-top: var(--e4); }
.ui-resultados__relajadas { display: grid; gap: var(--e2); width: 100%; max-width: 440px; }
@media (min-width: 1024px) {
  .ui-resultados { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); align-items: start; }
  .ui-resultados__mapa { position: sticky; top: var(--e4); }
  .ui-resultados__lienzo { height: 34rem; }
  .ui-resultados__lista { max-height: 38rem; overflow-y: auto; }
}
.ui-lectura--vacia { color: var(--muted); }
.ui-resultados__lienzo.leaflet-container .leaflet-control-zoom a { width: var(--objetivo); height: var(--objetivo); line-height: var(--objetivo); font-size: 22px; }
.ui-resultados__lienzo .leaflet-control-layers-list label { display: flex; align-items: center; gap: var(--e2); min-height: var(--objetivo); padding: 0 var(--e2); font-size: 15px; }
.ui-resultados__lienzo .leaflet-control-layers-selector { width: 22px; height: 22px; margin: 0; }

/* CAT-029: ficha de una parcela */
.ui-detalle__titulo { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; overflow-wrap: anywhere; }
.ui-detalle__chips { margin-top: var(--e2); }
.ui-detalle__chips a { color: inherit; font-weight: 700; }
.ui-detalle__acciones { margin: var(--e3) 0 var(--e1); align-items: center; }
.ui-detalle__hermanas { margin-top: var(--e3); }
.ui-detalle__datos { display: grid; gap: var(--e2); margin-top: var(--e4); }
.ui-detalle__datos > .ui-seccion__titulo { margin: 0; }
.ui-detalle__lista { margin: 0; display: grid; }
.ui-detalle__lista > div { display: flex; justify-content: space-between; gap: var(--e3); min-height: var(--objetivo); align-items: center; border-top: 1px solid var(--line); }
.ui-detalle__lista > div:first-child { border-top: 0; }
.ui-detalle__lista dt { color: var(--muted); }
.ui-detalle__lista dd { margin: 0; font-weight: 600; text-align: right; overflow-wrap: anywhere; }
.ui-detalle__mapa { height: 28rem; margin-top: var(--e4); }

/* CAT-030: grupos de DC */
.ui-grupos__resumen { margin: var(--e3) 0 var(--e4); }
.ui-grupos { display: grid; gap: var(--e4); }
.ui-grupos__mapa { height: 24rem; }
.ui-grupos__punto { display: inline-block; width: 14px; height: 14px; margin-right: var(--e2); border-radius: var(--r-pill); vertical-align: -1px; }
@media (min-width: 1024px) { .ui-grupos { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); align-items: start; } .ui-grupos__mapa { height: 30rem; position: sticky; top: var(--e4); } }

/* CAT-035: una sola barra de búsqueda (caja, ayuda, Buscar), barra compacta de resultados y cuadro de ayuda */
.ui-busqueda { display: flex; gap: var(--e2); align-items: center; margin: var(--e2) 0 var(--e3); }
.ui-busqueda input[type="text"] { flex: 1; min-width: 0; min-height: var(--objetivo); padding: 10px 12px; font: inherit; color: var(--ink); background: var(--field); border: 1.5px solid var(--field-line); border-radius: var(--r-md); }
.ui-busqueda input[type="text"]:focus-visible { outline: 3px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.ui-busqueda__ayuda { flex: none; width: var(--objetivo); padding: 0; justify-content: center; }
.ui-busqueda__buscar { flex: none; }
.ui-busqueda__aviso { margin: var(--e2) 0; }
.ui-busqueda__incluye { margin: var(--e2) 0 0; }
@media (max-width: 479px) { .ui-busqueda__buscar { width: var(--objetivo); padding: 0; justify-content: center; } .ui-busqueda__buscar span { display: none; } }
.ui-resultados__barra { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e2) var(--e4); margin: var(--e3) 0 var(--e3); }
.ui-resultados__barra .ui-resultados__cuenta { margin: 0; }
.ui-resultados__herramientas { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e2) var(--e3); }
.ui-resultados__todas { min-height: var(--objetivo); }
.ui-dialogo { margin: auto; width: min(32rem, calc(100vw - 2 * var(--e4))); max-height: calc(100vh - 2 * var(--e4)); overflow-y: auto; padding: var(--e4); color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); }
.ui-dialogo::backdrop { background: rgba(0, 0, 0, 0.45); }
.ui-dialogo__cabeza { display: flex; align-items: center; justify-content: space-between; gap: var(--e3); margin-bottom: var(--e3); }
.ui-dialogo__cabeza .ui-seccion__titulo { margin: 0; }
.ui-dialogo .ui-detalle__lista > div { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: var(--e3); }
.ui-dialogo .ui-detalle__lista dd { text-align: left; }

/* CAT-038: en el celular el control de capas va plegado en un botón de 48 px (con su icono, que Leaflet no trae) y sin botones de zoom */
.ui-resultados__lienzo.leaflet-container .leaflet-control-layers-toggle { width: var(--objetivo); height: var(--objetivo); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23102A2E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12.83 2.18a2 2 0 0 0-1.66 0L2.6 6.08a1 1 0 0 0 0 1.83l8.58 3.91a2 2 0 0 0 1.66 0l8.58-3.9a1 1 0 0 0 0-1.83Z'/%3E%3Cpath d='m22 17.65-9.17 4.16a2 2 0 0 1-1.66 0L2 17.65'/%3E%3Cpath d='m22 12.65-9.17 4.16a2 2 0 0 1-1.66 0L2 12.65'/%3E%3C/svg%3E"); background-size: 26px 26px; background-repeat: no-repeat; background-position: center; }
.ui-resultados__lienzo .leaflet-control-layers-expanded { max-width: calc(100% - 2 * var(--e2)); }

/* PAB-052 a PAB-057: la app de ponche. Dos botones grandes, el estado y el cronómetro; pensada para una sola mano en el celular. */
.ponche { display: grid; gap: var(--e4); }
.ponche__cabecera { display: flex; align-items: center; justify-content: space-between; gap: var(--e3); }
.ponche__cabecera .ui-h1 { margin: 0; }
.ponche__estado { text-align: center; padding: var(--e5) var(--e4); }
.ponche__titulo { margin: 0; font-size: 22px; font-weight: 700; }
.ponche__reloj { margin: var(--e2) 0 0; font-size: 48px; line-height: 1.1; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--accent); }
.ponche__estado .ui-fila__meta { margin: var(--e2) 0 0; }
.ponche__botones { display: grid; gap: var(--e3); }
.ponche__boton { min-height: 88px; justify-content: center; gap: var(--e3); font-size: 22px; }
.ponche__mensaje { min-height: 1.5em; margin: 0; text-align: center; font-weight: 600; color: var(--muted); }
.ponche__mensaje--mala { color: var(--bad); }
.ponche__pendientes p { margin: 0 0 var(--e2); }
.ponche__rechazados { display: grid; gap: var(--e2); margin: 0; padding: 0; list-style: none; }
.ponche__fila { grid-template-columns: minmax(0, 1fr); }
.ponche__tardio .ui-edit { margin-top: var(--e3); }
.ponche__pie { margin: 0; text-align: center; }
.ponche__pie a { display: inline-flex; align-items: center; min-height: var(--objetivo); color: var(--muted); text-decoration: underline; }

/* PAB-031: el letrero de la demo pública */
.ui-demo { padding: var(--e2) var(--e4); background: var(--warn-soft); color: var(--warn-strong); text-align: center; font-size: 14px; font-weight: 600; }
.ui-demo a { color: inherit; text-decoration: underline; }
.ui-demo__tarjetas { display: grid; gap: var(--e3); margin: var(--e4) 0; }
@media (min-width: 768px) { .ui-demo__tarjetas { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ui-demo__tarjeta { display: grid; gap: var(--e3); align-content: start; }
.ui-demo__tarjeta h2 { margin: 0; }
.ui-demo__tarjeta p { margin: 0; color: var(--muted); }