/* nucleo_apps — estilos comunes de todas las apps (colores de amperio.es/pro).
   Tema: claro por defecto; oscuro con data-theme="dark" en <html> (preferencia por usuario y app).
   Cada app añade solo su propio CSS. */

:root {
  --paper:#F7F8F7; --surface:#FFFFFF; --ink:#262A2B; --muted:#5C6361; --rule:#D6DBD8;
  --forest:#1E5631; --sage:#8CC49A; --mist:#E6EFE8; --graphite:#23282A;
  --rojo:#A3302A; --rojo-fondo:#FBE9E7; --ambar:#8A5A00; --ambar-fondo:#FFF4DC;
  --azul:#1F5A8A; --azul-fondo:#E3EEF7; --texto-boton:#FFFFFF;
  --barra-navegador:#1E5631;   /* color de la barra del navegador (theme-color): nucleo.js lo aplica al <meta>; 1.19 */
  color-scheme: light;
}
/* Kit de componentes (núcleo 1.6). Un módulo ajusta estas variables; no reescribe los componentes.
   Puntos de ruptura únicos: 40rem (móvil) y 60rem (pantalla ancha). */
:root {
  --ctl-alto: 36px;            /* botones, campos y selects; 40 px en móvil */
  --ctl-zona: 44px;            /* zona táctil mínima de los botones-icono */
  --ctl-icono: 24px;           /* icono dentro de un botón-icono */
  --ctl-radio: 999px;          /* píldora */
  --ctl-radio-caja: 20px;      /* áreas de texto y listas: redondeadas, sin llegar a píldora */
  --dlg-radio: 16px;           /* diálogos */
  --ctl-fuente: .9375rem;      /* 15 px */
  --ancho-estrecho: 52rem;     /* anchos de página normalizados */
  --ancho-ancho: 78rem;
}
/* Se declaran también en las zonas de tema forzado: un var() se resuelve donde se define, no donde se usa. */
:root, .tema-claro, .tema-oscuro {
  --ctl-fondo: var(--mist);    /* fondo de campos; al enfocar, var(--surface) */
  --acento: var(--forest);     /* color de resalte: siempre verde */
  accent-color: var(--forest); /* checkbox, radio, range y progress: verde, sin definirlo en cada módulo */
}
@media (max-width: 40rem) { :root { --ctl-alto: 40px; } }
/* Tema oscuro, paleta «A · negro puro» (1.19, RFC-T01): cuerpo negro, tarjetas y campos casi negros, franja de cabecera casi negra.
   Texto principal ≥ 15:1, secundario ≥ 7:1. La barra del navegador sigue a la franja. */
:root[data-theme="dark"], .tema-oscuro {
  --paper:#000000; --surface:#101313; --ink:#E6E9E7; --muted:#A3ABA8; --rule:#2B3132;
  --forest:#8CC49A; --sage:#8CC49A; --mist:#15221A; --graphite:#0A0C0C;
  --rojo:#F08C84; --rojo-fondo:#3A2220; --ambar:#F2C46B; --ambar-fondo:#3A2F17;
  --azul:#9CC7EA; --azul-fondo:#1D2E3D; --texto-boton:#16191A;
  --barra-navegador:#0A0C0C;
  color-scheme: dark;
}
/* Fuerzan un tema dentro de una zona (galería de componentes: claro y oscuro a la vez). */
.tema-claro {
  --paper:#F7F8F7; --surface:#FFFFFF; --ink:#262A2B; --muted:#5C6361; --rule:#D6DBD8;
  --forest:#1E5631; --sage:#8CC49A; --mist:#E6EFE8; --graphite:#23282A;
  --rojo:#A3302A; --rojo-fondo:#FBE9E7; --ambar:#8A5A00; --ambar-fondo:#FFF4DC;
  --azul:#1F5A8A; --azul-fondo:#E3EEF7; --texto-boton:#FFFFFF; --ins-fondo:#2E7D4F; --ins-trazo:#FFFFFF;
  color-scheme: light;
}
.tema-oscuro { --ins-fondo:#8CC49A; --ins-trazo:#16191A; }
.tema-claro, .tema-oscuro { background: var(--paper); color: var(--ink); }

/* Base */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink);
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
a { color: var(--forest); }
h1 { font-size: 1.45rem; margin: .4rem 0 .8rem; line-height: 1.25; }
h2 { font-size: 1.15rem; margin: 0 0 .4rem; }
code { background: var(--mist); padding: 0 .3rem; border-radius: 4px; }
code, main a, .ayuda { overflow-wrap: anywhere; }           /* rutas, líneas de código y enlaces largos no ensanchan la página en móvil */
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--sage); outline-offset: 2px; }
.cuerpo { max-width: var(--ancho-estrecho); margin: 0 auto; padding: 1rem; }
.cuerpo-ancho { max-width: var(--ancho-ancho); }
.cuerpo-completo { max-width: none; }          /* mismo relleno lateral que los demás */
.ayuda, .fila-meta { color: var(--muted); font-size: .9rem; }
.vacio { color: var(--muted); font-style: italic; }
.centrado { text-align: center; }
.oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Controles que solo funcionan con JavaScript (nucleo.js añade la clase .js a <html>) */
.solo-js { display: none !important; }
.js .solo-js { display: inline-flex !important; }

/* Cabecera: línea 1 (marca, tema, menú, salir) y línea 2 opcional de la app */
.cabecera { position: sticky; top: 0; z-index: 5; color: #fff; }
.barra-sup { display: flex; align-items: center; gap: .5rem; padding: .55rem 1rem; background: var(--graphite); }
.marca { display: flex; align-items: center; gap: .6rem; margin-right: auto; color: #fff; font-weight: 700;
  font-size: 1.35rem; line-height: 1.2; text-decoration: none; min-width: 0; }
.logo { height: 2.2rem; width: auto; flex: none; }
.barra-sec { display: flex; align-items: center; gap: 1rem; padding: .5rem 1rem; background: var(--surface);
  border-bottom: 1px solid var(--rule); color: var(--ink); }
.form-icono { margin: 0; }
/* Botón-icono circular (núcleo 1.6): el de la cabecera (tema, menú, salir) y el de todas las apps.
   36 px (40 en móvil, con zona táctil de 44), icono de 24 px, tooltip y aria-label obligatorios.
   (Desde la 1.16 ya no existen los alias .icono-boton, .boton.boton-ico y .at-ibtn.) */
.boton-icono, .menu-hamb > summary {
  position: relative; display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: var(--ctl-alto); height: var(--ctl-alto); padding: 0; border-radius: 50%; box-sizing: border-box;
  background: var(--surface); color: var(--forest); border: 1.5px solid var(--rule);
  font: inherit; text-decoration: none; cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.boton-icono::before, .menu-hamb > summary::before {     /* zona táctil de 44 px */
  content: ""; position: absolute; inset: calc((var(--ctl-alto) - var(--ctl-zona)) / 2); }
.boton-icono:hover, .boton-icono:focus-visible,
.menu-hamb > summary:hover, .menu-hamb > summary:focus-visible, .menu-hamb[open] > summary {
  border-color: var(--forest); box-shadow: 0 0 0 1px var(--forest), 0 0 8px rgba(140,196,154,.45); outline: none; }
.boton-icono svg, .menu-hamb > summary svg { width: var(--ctl-icono); height: var(--ctl-icono); flex: none; }
.boton-icono-principal { background: var(--forest); color: var(--texto-boton); border-color: var(--forest); }
.boton-icono-activo, .boton-icono[aria-pressed="true"] { background: var(--mist); border-color: var(--forest); }
.boton-icono-peligro { background: var(--rojo-fondo); color: var(--rojo); border-color: var(--rojo); }
.boton-icono-peligro:hover, .boton-icono-peligro:focus-visible { border-color: var(--rojo); box-shadow: 0 0 0 1px var(--rojo); }
.boton-icono:disabled, .boton-icono[aria-disabled="true"] { opacity: .45; cursor: default; box-shadow: none; border-color: var(--rule); }
/* Marca de estado: punto sobre cualquier botón-icono (filtro aplicado, notificación…); con número si data-marca lo lleva */
.boton-icono[data-marca]::after {
  content: attr(data-marca); position: absolute; top: -2px; right: -2px; min-width: .6rem; height: .6rem; padding: 0 .2rem;
  border-radius: 99px; border: 2px solid var(--surface); box-sizing: content-box; background: var(--forest); color: var(--texto-boton);
  font-size: .625rem; font-weight: 700; line-height: .6rem; text-align: center; }
.boton-icono[data-marca=""]::after { min-width: 0; width: .55rem; height: .55rem; padding: 0; }
/* Control segmentado: grupo de botones-icono con uno activo (aria-pressed="true") */
.segmentado { display: inline-flex; gap: 2px; padding: 2px; border-radius: var(--ctl-radio); background: var(--mist); }
.segmentado .boton-icono { width: calc(var(--ctl-alto) - 4px); height: calc(var(--ctl-alto) - 4px); background: transparent; border-color: transparent; }
.segmentado .boton-icono[aria-pressed="true"] { background: var(--surface); border-color: var(--forest); }
/* Opciones del segmentado con texto, icono o ambos (núcleo 1.12): <button class="segmentado-op" data-valor aria-pressed>; solo icono = .segmentado-op-ico */
.segmentado-op { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .35rem; flex: none;
  min-width: calc(var(--ctl-alto) - 4px); height: calc(var(--ctl-alto) - 4px); padding: 0 .7rem; box-sizing: border-box;
  border-radius: var(--ctl-radio); background: transparent; color: var(--forest); border: 1.5px solid transparent;
  font: inherit; font-size: var(--ctl-fuente); font-weight: 600; line-height: 1; white-space: nowrap; cursor: pointer;
  transition: border-color .15s, box-shadow .15s; }
.segmentado-op-ico { width: calc(var(--ctl-alto) - 4px); padding: 0; border-radius: 50%; }
.segmentado-op::before { content: ""; position: absolute; inset: calc((var(--ctl-alto) - 4px - var(--ctl-zona)) / 2) 0; }   /* zona táctil de 44 px de alto */
.segmentado-op svg { width: var(--ctl-icono); height: var(--ctl-icono); flex: none; }
.segmentado-op:hover, .segmentado-op:focus-visible { border-color: var(--forest); box-shadow: 0 0 0 1px var(--forest), 0 0 8px rgba(140,196,154,.45); outline: none; }
.segmentado-op[aria-pressed="true"] { background: var(--surface); border-color: var(--forest); }
.segmentado-op:disabled { opacity: .45; cursor: default; box-shadow: none; border-color: transparent; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
/* Menú ☰ */
.menu-hamb { position: relative; }
.menu-hamb > summary { list-style: none; }
.menu-hamb > summary::-webkit-details-marker { display: none; }
.menu-desp { position: absolute; right: 0; top: calc(100% + .4rem); z-index: 10; min-width: 15rem;
  width: max-content; max-width: calc(100vw - 1.5rem);
  background: var(--surface); border: 1px solid var(--rule); border-radius: var(--dlg-radius); box-shadow: 0 8px 24px rgba(0,0,0,.2);
  display: grid; padding: .3rem 0; overflow: hidden; }
.menu-desp a, .menu-item, .desplegable-panel a, .desplegable-item { padding: .65rem 1rem; font-size: 14.4px;   /* texto del menú ☰: en px, no cambia con la densidad */
  color: var(--ink); text-decoration: none;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }   /* una línea por entrada: el menú se ensancha */
.menu-item, .desplegable-item { background: none; border: 0; font: inherit; font-size: 14.4px; text-align: left; cursor: pointer; }
.js .menu-desp .menu-item.solo-js { display: block !important; }
.menu-desp a:hover, .menu-desp a:focus-visible, .menu-item:hover, .menu-item:focus-visible,
.desplegable-panel a:hover, .desplegable-panel a:focus-visible, .desplegable-item:hover, .desplegable-item:focus-visible { background: var(--mist); outline: none; }
.desplegable-panel a[aria-current], .desplegable-panel a.activo, .desplegable-item.activo { background: var(--mist); font-weight: 700; }
.menu-sep { border: 0; border-top: 1px solid var(--rule); margin: .3rem 0; }

/* Desplegable (núcleo 1.8): <details class="desplegable"> con un botón (summary) y un panel flotante con el estilo del menú ☰.
   Se cierra al pulsar fuera o con Escape; al abrir uno se cierran los demás. En móvil, el panel ocupa el ancho de la pantalla. */
.desplegable { position: relative; display: inline-block; margin: 0; }
.desplegable > summary { list-style: none; }
.desplegable > summary::-webkit-details-marker { display: none; }
.desplegable[open] > summary.boton-icono { border-color: var(--forest); background: var(--mist); }
.desplegable[open] > summary.boton-icono-principal { background: var(--forest); }
.desplegable-panel { position: absolute; right: 0; top: calc(100% + .4rem); z-index: 50; min-width: 15rem; max-width: min(64rem, 92vw);
  background: var(--surface); color: var(--ink); border: 1px solid var(--rule); border-radius: var(--dlg-radius); box-shadow: 0 8px 24px rgba(0,0,0,.2);
  display: grid; gap: .1rem; padding: .3rem 0; font-size: 14.4px; overflow: auto; max-height: 80vh; }
.desplegable-izq > .desplegable-panel { right: auto; left: 0; }
.desplegable-panel.desplegable-form { padding: .7rem .8rem; gap: .6rem; }
@media (max-width: 40rem) { .desplegable { position: static; } .desplegable > .desplegable-panel, .desplegable-izq > .desplegable-panel { position: fixed; left: .5rem; right: .5rem; top: 7rem; max-width: none; } }

/* Plegable (núcleo 1.8): sección que se despliega, con el mismo título y flecha en todas las apps. Con .tarjeta se ve como caja. */
.plegable > summary { display: flex; align-items: center; gap: .5rem; min-height: 2rem; cursor: pointer; list-style: none; font-weight: 600; }
.plegable > summary::-webkit-details-marker { display: none; }
.plegable > summary::before { content: "▸"; color: var(--muted); font-size: .8em; width: .8rem; flex: none; }
.plegable[open] > summary::before { content: "▾"; }
.plegable > summary:hover, .plegable > summary:focus-visible { color: var(--forest); outline: none; }
.plegable > :not(summary) { margin-top: .4rem; }

/* Avisos */
.aviso { padding: .6rem .8rem; border-radius: 6px; margin: 0 0 .8rem; }
.aviso ul { margin: 0; padding-left: 1.2rem; }
.aviso-ok { background: var(--mist); color: var(--forest); }
.aviso-error { background: var(--rojo-fondo); color: var(--rojo); }
.aviso-rev { background: var(--ambar-fondo); color: var(--ambar); }
.aviso-info { background: var(--azul-fondo); color: var(--azul); }
/* Chip (núcleo 1.7): un solo estilo; en la 1.17 se retiró el alias .etiqueta (y .etiqueta-*) */
.chip { display: inline-flex; align-items: center; gap: .3rem; min-height: 1.5rem; padding: 0 .65rem; box-sizing: border-box;
  background: var(--mist); color: var(--forest); border: 1.5px solid transparent; border-radius: var(--ctl-radio);
  font: inherit; font-size: .8rem; font-weight: 600; line-height: 1; white-space: nowrap; vertical-align: middle; text-decoration: none; }
a.chip, button.chip { cursor: pointer; }
a.chip:hover, a.chip:focus-visible, button.chip:hover, button.chip:focus-visible { border-color: var(--forest); outline: none; }
.chip[aria-pressed="true"], .chip-activo { background: var(--forest); color: var(--texto-boton); border-color: var(--forest); }
.chip svg { width: 14px; height: 14px; flex: none; }
.chip-quitar { display: inline-flex; align-items: center; justify-content: center; width: 1.1rem; height: 1.1rem; margin-right: -.4rem; padding: 0;
  border: 0; border-radius: 50%; background: none; color: inherit; cursor: pointer; }
.chip-quitar:hover, .chip-quitar:focus-visible { background: rgba(0,0,0,.12); outline: none; }
.chips { display: inline-flex; flex-wrap: wrap; gap: .3rem; vertical-align: middle; }          /* varios chips seguidos (p. ej. el estado en una tabla) */
.fila-nombre .chip { margin-left: .4rem; }
.chip-gris { background: var(--rule); color: var(--muted); }
.chip-rojo { background: var(--rojo-fondo); color: var(--rojo); }
.chip-ambar { background: var(--ambar-fondo); color: var(--ambar); }
.chip-azul { background: var(--azul-fondo); color: var(--azul); }

/* Botones */
.boton { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; background: var(--forest); color: var(--texto-boton);
  border: 1.5px solid var(--forest); border-radius: var(--ctl-radio); min-height: var(--ctl-alto); padding: 0 1.1rem;
  font: inherit; font-size: var(--ctl-fuente); font-weight: 600; line-height: 1.2; text-decoration: none; cursor: pointer; }
.boton:hover, .boton:focus-visible { box-shadow: 0 0 0 1px var(--forest), 0 0 8px rgba(140,196,154,.45); outline: none; }
.boton svg { width: 20px; height: 20px; flex: none; }
.boton-sec { background: var(--surface); color: var(--forest); border-color: var(--rule); }
.boton-peligro { background: var(--surface); color: var(--rojo); border-color: var(--rule); }
.boton-peligro:hover, .boton-peligro:focus-visible { border-color: var(--rojo); box-shadow: 0 0 0 1px var(--rojo); }
.boton:disabled, .boton[aria-disabled="true"] { opacity: .45; cursor: default; box-shadow: none; }
.boton-mini { min-height: 0; padding: .2rem .7rem; font-size: .85rem; }
.boton-ancho { width: 100%; }
.enlace { background: none; border: 0; padding: 0; font: inherit; color: var(--forest); text-decoration: underline; cursor: pointer; }
.acciones { display: flex; flex-wrap: wrap; gap: .5rem; margin: .8rem 0; }
.acciones form { margin: 0; }

/* Tarjetas y formularios */
.tarjeta { background: var(--surface); border: 1px solid var(--rule); border-radius: 8px; padding: 1rem; margin-bottom: 1rem; }
.formulario label { display: block; margin-bottom: var(--form-sep, .8rem); font-weight: 600; font-size: var(--etq-fuente, .95rem); }
/* Campos y selects: píldora sin borde, fondo suave; al enfocar, fondo de superficie y aro verde.
   Áreas de texto y selects múltiples: caja redondeada (no píldora). Fuera de .formulario, clase .campo. */
.formulario input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=color]), .formulario select, .formulario textarea,
.en-linea input, .en-linea select, .campo, .permiso-fila select, .tabla select {
  display: block; width: 100%; margin-top: .25rem; min-height: var(--ctl-alto); padding: 0 1rem; font: inherit; font-size: var(--ctl-fuente); font-weight: 400;
  color: var(--ink); background: var(--ctl-fondo); border: 1.5px solid transparent; border-radius: var(--ctl-radio); }
.formulario textarea, textarea.campo, .formulario select[multiple], select[multiple].campo {
  padding: .6rem 1rem; border-radius: var(--ctl-radio-caja); min-height: 0; }
.formulario input:focus-visible, .formulario select:focus-visible, .formulario textarea:focus-visible, .campo:focus-visible,
.en-linea input:focus-visible, .en-linea select:focus-visible {
  background: var(--surface); border-color: var(--forest); outline: none; box-shadow: 0 0 0 2px var(--sage); }
.formulario input:disabled, .formulario select:disabled, .formulario textarea:disabled, .campo:disabled { opacity: .55; }
.formulario textarea { resize: vertical; }
/* Campo con icono integrado: <span class="campo-con-icono"><svg …/><input class="campo"></span> */
.campo-con-icono { position: relative; display: block; }
.campo-con-icono > svg { position: absolute; left: .8rem; top: 50%; width: 20px; height: 20px; margin-top: .125rem; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.campo-con-icono > .campo, .campo-con-icono > input { padding-left: 2.6rem !important; }
.check { display: flex !important; align-items: center; gap: .5rem; font-weight: 400 !important; }
.check input { width: 1.2rem; height: 1.2rem; accent-color: var(--forest); }
.dos { display: grid; grid-template-columns: 1fr; gap: 0 1rem; }
@media (min-width: 40rem) { .dos { grid-template-columns: 1fr 1fr; align-items: end; } }
.en-linea { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin: 0; }
.en-linea input, .en-linea select { width: auto; flex: 1 1 10rem; margin: 0; }
.rotulo { display: block; flex: 1 1 100%; font-weight: 600; font-size: .95rem; }
.datos { display: grid; grid-template-columns: max-content 1fr; gap: .25rem 1rem; margin: .4rem 0 .8rem; }
.datos dt { color: var(--muted); }
.datos dd { margin: 0; overflow-wrap: anywhere; }

/* Acceso y pantallas sin cabecera */
.login { max-width: 24rem; margin: 10vh auto 0; }
.login-marca { display: flex; align-items: center; justify-content: center; gap: .6rem; text-align: center; }
.login .logo { height: 2.6rem; }

/* Listas */
.lista { list-style: none; padding: 0; margin: 0; background: var(--surface); border: 1px solid var(--rule); border-radius: 8px; overflow: hidden; }
.fila + .fila { border-top: 1px solid var(--rule); }
.fila a { display: block; padding: .65rem .9rem; color: var(--ink); text-decoration: none; }
.fila a:hover, .fila a:focus-visible { background: var(--mist); }
.fila-nombre { display: block; font-weight: 600; }
.fila .fila-meta { display: block; font-size: .85rem; }

/* Ventanas */
.dialogo { border: 1px solid var(--rule); border-radius: var(--dlg-radius); padding: 1.2rem; width: min(26rem, calc(100vw - 2rem));
  background: var(--surface); color: var(--ink); box-shadow: 0 10px 30px rgba(0,0,0,.25); }
.dialogo::backdrop { background: rgba(0,0,0,.45); }
.dialogo h2 { margin-bottom: .8rem; }
/* Diálogo único (núcleo 1.8): cabecera, cuerpo con desplazamiento y acciones como botones-icono. Variantes de ancho: -estrecho, -ancho. */
.dialogo-cab { display: flex; align-items: center; gap: .6rem; margin-bottom: .8rem; }
.dialogo-cab h2, .dialogo-titulo { flex: 1; margin: 0; }
.dialogo-cuerpo { overflow: auto; max-height: min(70vh, 40rem); }
.dialogo-acciones { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: .6rem; margin: 1rem 0 0; }
.dialogo-acciones .dialogo-izq { margin-right: auto; }
.dialogo-estrecho { width: min(20rem, calc(100vw - 2rem)); }
.dialogo-ancho { width: min(40rem, calc(100vw - 2rem)); }
.dialogo form { margin: 0; }
.dialogo .acciones { justify-content: flex-end; margin-bottom: 0; }
.dlg-texto { margin-top: 0; }
.dialogo .campo { margin-bottom: .8rem; }
.dialogo-acerca { text-align: center; }
.dialogo-acerca h2 { margin: .4rem 0 .2rem; }
.dialogo-acerca .acciones { justify-content: center; }
.logo-acerca { height: 3.5rem; width: auto; }

/* Navegación secundaria */
.migas { font-size: .9rem; color: var(--muted); margin: 0 0 .3rem; }
/* Pestañas (núcleo 1.7): enlaces (aria-current="page") o botones de un tablist (aria-selected="true"); en móvil se desplazan en horizontal */
.pestanas { display: flex; gap: .3rem; margin: 0 0 1rem; border-bottom: 1px solid var(--rule); overflow-x: auto; scrollbar-width: none; }
.pestanas::-webkit-scrollbar { display: none; }
.pestanas a, .pestanas button { display: inline-flex; align-items: center; flex: none; min-height: var(--ctl-alto); padding: 0 .8rem; background: none; border: 0;
  border-bottom: 2px solid transparent; margin-bottom: -1px; color: var(--muted); font: inherit; font-weight: 600; text-decoration: none; cursor: pointer; white-space: nowrap; }
.pestanas a:hover, .pestanas a:focus-visible, .pestanas button:hover, .pestanas button:focus-visible { color: var(--forest); outline: none; }
.pestanas a[aria-current="page"], .pestanas [aria-selected="true"] { color: var(--forest); border-bottom-color: var(--forest); }
.titulo-con-boton { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .8rem; }
.titulo-con-boton h1 { margin: 0; }
.fila-nombre .en-linea-txt { display: inline; font-weight: 400; }

/* Formularios: grupos, permisos y tablas */
.grupo { border: 1px solid var(--rule); border-radius: 8px; padding: .6rem 1rem .2rem; margin: 0 0 1rem; }
.grupo legend { font-weight: 700; padding: 0 .3rem; }
.permiso-fila { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .35rem 0; border-top: 1px solid var(--rule); }
.permiso-fila:first-of-type { border-top: 0; }
.tabla-desliza { overflow-x: auto; background: var(--surface); border: 1px solid var(--rule); border-radius: 8px; }
.tabla { border-collapse: collapse; width: 100%; font-size: .95rem; }
.tabla th, .tabla td { padding: .5rem .7rem; text-align: left; border-top: 1px solid var(--rule); white-space: nowrap; }
.tabla thead th { border-top: 0; color: var(--muted); font-weight: 600; }
/* Selector en árbol (núcleo 1.18): botón que sustituye al <select> y diálogo único con el árbol (nucleo.js, Nucleo.selectorArbol) */
/* El select oculto debe ganar a `.campo` y a `.formulario select` (que le dan ancho completo y relleno): de ahí el !important (1.18.1) */
.selarb-oculto { position: absolute !important; left: 0 !important; width: 1px !important; height: 1px !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important;
  border: 0 !important; opacity: 0; overflow: hidden; clip-path: inset(50%); pointer-events: none; }
.selarb-boton { display: flex; align-items: center; justify-content: space-between; gap: .5rem; text-align: left; cursor: pointer; }
.selarb-boton > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.selarb-boton svg { width: 18px; height: 18px; flex: none; color: var(--muted); }
.dialogo-selarb .selarb-buscar { margin-bottom: .6rem; }
.dialogo-selarb .dialogo-cuerpo { max-height: min(60vh, 28rem); }
.selarb-arbol, .selarb-arbol ul { list-style: none; margin: 0; padding: 0; }
.selarb-arbol ul { padding-left: 1.2rem; }
.selarb-arbol [hidden] { display: none !important; }
.selarb-arbol li { outline: none; }
.selarb-fila { display: flex; align-items: center; min-height: 2.25rem; border-radius: 6px; cursor: pointer; }
.selarb-fila:hover, .selarb-arbol li:focus-visible > .selarb-fila { background: var(--mist); }
.selarb-arbol li:focus-visible > .selarb-fila { box-shadow: 0 0 0 2px var(--sage); }
.selarb-flecha { flex: none; width: 1.8rem; align-self: stretch; display: flex; align-items: center; justify-content: center; color: var(--muted); }
li[aria-expanded] > .selarb-fila > .selarb-flecha::before { content: "▸"; }
li[aria-expanded="true"] > .selarb-fila > .selarb-flecha::before { content: "▾"; }
.selarb-nombre { flex: 1; padding: .2rem .5rem .2rem 0; overflow-wrap: anywhere; }
li[aria-selected="true"] > .selarb-fila { background: var(--mist); font-weight: 700; }
li[aria-disabled="true"] > .selarb-fila { opacity: .55; cursor: default; }
li[aria-disabled="true"][aria-expanded] > .selarb-fila { cursor: pointer; }
.selarb-extra > .selarb-fila { font-style: italic; }

/* Tablas (núcleo 1.7): densidad, orden, filtros, estado vacío y cabecera fija. Nucleo.tabla() añade orden y filtros persistentes. */
.tabla tbody tr:hover { background: var(--mist); }
.tabla .num { text-align: right; font-variant-numeric: tabular-nums; }
.tabla-densa th, .tabla-densa td { padding: .25rem .5rem; font-size: .88rem; }
.tabla-fija thead th { position: sticky; top: 0; background: var(--surface); z-index: 1; }
.tabla th[data-orden] { cursor: pointer; user-select: none; }
.tabla th[data-orden]:hover, .tabla th[data-orden]:focus-visible { color: var(--forest); outline: none; }
.tabla th[aria-sort="ascending"]::after { content: " ▲"; font-size: .7em; }
.tabla th[aria-sort="descending"]::after { content: " ▼"; font-size: .7em; }
/* Campo de búsqueda sobre la tabla (núcleo 1.15): el mismo campo que el resto de formularios */
.tabla-buscar { margin: 0 0 .6rem; }
.tabla-buscar .campo { width: 100%; max-width: 22rem; margin: 0; }
.tabla .tabla-vacia td { text-align: center; color: var(--muted); font-style: italic; white-space: normal; padding: 1rem; }
.tabla tr.inactivo th { color: var(--muted); }
.permiso-fila select, .tabla select { min-width: 9.5rem; width: auto; margin: 0; }
@media (max-width: 40rem) { .pestanas a, .pestanas button { padding: 0 .55rem; } }

/* ---------- Módulos (núcleo 1.2) ---------- */
/* Insignia: círculo verde con el icono del módulo; el mismo verde para todos (los distingue el icono y el nombre). */
:root { --ins-fondo: #2E7D4F; --ins-trazo: #FFFFFF; --rail-ancho: 5.5rem; }
:root[data-theme="dark"] { --ins-fondo: #8CC49A; --ins-trazo: #16191A; }
.insignia { display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--ins-fondo); color: var(--ins-trazo); }
.insignia svg { width: 28px; height: 28px; }   /* 70 % de la insignia (núcleo 1.3.2) */

/* Cabecera: «App · Módulo»; la insignia abre y cierra la botonera */
.marca-ins { display: flex; cursor: pointer; border-radius: 50%; transition: box-shadow .15s; }
.marca-ins:hover, .rail-check:focus-visible + .rail + .rail-fondo + .cabecera .marca-ins { box-shadow: 0 0 0 2px var(--graphite), 0 0 0 4px var(--sage); }
.con-modulos .marca { gap: .35rem; flex-wrap: wrap; }
.marca-app { font-weight: 400; opacity: .75; }
.marca-mod { font-weight: 700; }

/* Botonera lateral */
.rail-check { position: absolute; opacity: 0; pointer-events: none; }
.rail { position: fixed; top: 0; bottom: 0; left: 0; z-index: 30; width: var(--rail-ancho);
  display: flex; flex-direction: column; align-items: center; gap: .35rem; padding: .6rem .3rem 1rem;
  background: var(--surface); border-right: 1px solid var(--rule); box-shadow: 4px 0 18px rgba(0,0,0,.18);
  overflow-y: auto; transform: translateX(-105%); transition: transform .18s ease-out; }
.rail-check:checked ~ .rail { transform: none; }
.rail-fondo { display: none; position: fixed; inset: 0; z-index: 25; background: rgba(0,0,0,.35); }
.rail-check:checked ~ .rail-fondo { display: block; }
.rail-item { display: flex; flex-direction: column; align-items: center; gap: .2rem; width: 100%; padding: .35rem .1rem;
  border-radius: 10px; color: var(--ink); text-decoration: none; font-size: .72rem; line-height: 1.15; text-align: center; }
.rail-item span:last-child { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rail-item:hover, .rail-item:focus-visible { background: var(--mist); outline: none; }
.rail-item.activo { font-weight: 700; color: var(--forest); }
.rail-item.activo .insignia { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--forest); }
.rail-pin { display: none !important; align-self: flex-end; width: 1.9rem; height: 1.9rem; margin-bottom: .2rem; padding: 0;
  border-radius: 50%; border: 1.5px solid var(--rule); background: var(--surface); color: var(--muted); cursor: pointer;
  align-items: center; justify-content: center; }
.rail-pin:hover, .rail-pin:focus-visible { border-color: var(--forest); color: var(--forest); outline: none; }
.rail-pin[aria-pressed="true"] { color: var(--forest); border-color: var(--forest); background: var(--mist); }

/* Pantallas anchas: la chincheta fija la botonera; el contenido se desplaza a la derecha */
@media (min-width: 60rem) {
  .js .rail-pin { display: inline-flex !important; }
  .rail-fija .rail { transform: none; box-shadow: none; }
  .rail-fija .rail-fondo { display: none !important; }
  .rail-fija body { padding-left: var(--rail-ancho); }
}

/* «Mis aplicaciones»: accesos directos a los módulos */
.fila-con-modulos > a { padding-bottom: .3rem; }
/* «Mis aplicaciones»: insignia de la app a la izquierda (núcleo 1.5) */
.fila a.fila-app { display: flex; align-items: center; gap: .75rem; }
.fila-textos { min-width: 0; }
.accesos { display: flex; flex-wrap: wrap; gap: .25rem .4rem; padding: 0 .7rem .7rem; }
.fila .acceso { display: inline-flex; align-items: center; gap: .35rem; padding: .2rem .55rem .2rem .2rem; border-radius: 99px;
  border: 1px solid var(--rule); color: var(--ink); text-decoration: none; font-size: .85rem; }
.fila .acceso:hover, .fila .acceso:focus-visible { border-color: var(--forest); background: var(--mist); outline: none; }
/* Nombre de app con su insignia delante (núcleo 1.15): lista y ficha de Aplicaciones */
.nombre-app { display: inline-flex; align-items: center; gap: .6rem; }
td > .nombre-app { display: flex; }
/* Insignia grande (núcleo 1.15): «Acerca de» de las apps sin módulos que declaran icono; sustituye a .logo-acerca (3,5 rem) */
.insignia-grande { width: 3.5rem; height: 3.5rem; }
.insignia-grande svg { width: 40px; height: 40px; }
.insignia-grande.insignia-amplio svg { width: 48px; height: 48px; }
.dialogo-acerca > .insignia { display: flex; margin: 0 auto; }
.insignia-mini { width: 1.6rem; height: 1.6rem; }
.insignia-mini svg { width: 18px; height: 18px; }
/* Ajuste «amplio» (núcleo 1.4.1): SVG completo al 85 % del círculo */
.insignia.insignia-amplio svg { width: 34px; height: 34px; }
.insignia-mini.insignia-amplio svg { width: 22px; height: 22px; }

/* «Acerca de»: versión de cada módulo (núcleo 1.3); el activo, destacado */
.acerca-modulos { list-style: none; margin: .6rem auto .8rem; padding: 0; display: grid; gap: .3rem; text-align: left; width: max-content; max-width: 100%; }
.acerca-modulos li { display: flex; align-items: center; gap: .5rem; padding: .2rem .6rem .2rem .25rem; border-radius: 99px; border: 1px solid transparent; }
.acerca-modulos li.activo { border-color: var(--forest); background: var(--mist); font-weight: 700; }
.acerca-mod-nombre { flex: 1; }
.acerca-mod-ver { color: var(--muted); font-size: .9rem; font-variant-numeric: tabular-nums; }
.acerca-modulos li.activo .acerca-mod-ver { color: var(--forest); }

/* Menú ☰: grupos plegables (entradas con «items»; núcleo 1.3.3). */
.menu-grupo > summary { list-style: none; cursor: pointer; font-weight: 700; }
.menu-grupo > summary::-webkit-details-marker { display: none; }
.menu-grupo > summary::after { content: "▾"; float: right; color: var(--muted); }
.menu-grupo[open] > summary::after { content: "▴"; }
.menu-sub { display: grid; border-left: 3px solid var(--rule); margin-left: 1rem; }

/* ---------- Aviso emergente, menú contextual y arrastre (núcleo 1.6) ---------- */
/* Un solo aviso emergente: Nucleo.aviso(texto, {error, deshacer}). */
.avisos { position: fixed; left: 50%; bottom: 1.2rem; transform: translateX(-50%); z-index: 80; display: grid; gap: .4rem; justify-items: center;
  width: max-content; max-width: calc(100vw - 2rem); pointer-events: none; }
.aviso-flotante { display: flex; align-items: center; gap: .8rem; background: var(--graphite); color: #fff; padding: .45rem 1rem; border-radius: var(--ctl-radio);
  box-shadow: 0 6px 18px rgba(0,0,0,.3); pointer-events: auto; }
.aviso-flotante.aviso-flotante-error { background: var(--rojo); color: var(--texto-boton); }
:root[data-theme="dark"] .aviso-flotante, .tema-oscuro .aviso-flotante { border: 1px solid var(--rule); }   /* sobre el cuerpo negro el fondo de la franja no se distingue (1.19) */
.aviso-flotante button { background: none; border: 0; padding: 0; font: inherit; font-weight: 700; color: var(--sage); text-decoration: underline; cursor: pointer; }
.aviso-flotante-error button { color: inherit; }
/* Menú contextual (clic derecho o pulsación larga): Nucleo.menuContextual(x, y, entradas) */
.menu-ctx { position: fixed; z-index: 70; display: grid; min-width: 11rem; padding: .3rem 0; background: var(--surface); border: 1px solid var(--rule);
  border-radius: 12px; box-shadow: 0 6px 18px rgba(0,0,0,.2); }
.menu-ctx[hidden] { display: none; }
.menu-ctx button { display: block; width: 100%; background: none; border: 0; padding: .45rem .9rem; text-align: left; font: inherit; font-size: 14.4px; color: var(--ink); cursor: pointer; white-space: nowrap; }
.menu-ctx button:hover, .menu-ctx button:focus-visible { background: var(--mist); outline: none; }
.menu-ctx button.peligro { color: var(--rojo); }
.menu-ctx-sub { position: relative; }
.menu-ctx-sub > button::after { content: "▸"; float: right; margin-left: 1rem; color: var(--muted); }
.menu-ctx-sub > .menu-ctx { display: none; position: absolute; left: 100%; top: -.3rem; }
.menu-ctx-sub:hover > .menu-ctx, .menu-ctx-sub:focus-within > .menu-ctx { display: grid; }
.menu-ctx.menu-ctx-izq .menu-ctx-sub > .menu-ctx { left: auto; right: 100%; }
/* Arrastre: el elemento arrastrado, el destino válido y el asa */
.arrastrando { opacity: .5; }
.soltar { outline: 2px dashed var(--forest); outline-offset: -2px; background: var(--mist); }
.agarre { cursor: grab; touch-action: none; }
.agarre:active { cursor: grabbing; }

/* ---------- Galería de componentes (gestion-apps) ---------- */
.galeria-zona { padding: 1rem; margin: 1rem 0; border: 1px solid var(--rule); border-radius: var(--dlg-radius); }
.galeria-zona h3 { margin: 1.2rem 0 .4rem; font-size: 1rem; }
.galeria-fila { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin: .4rem 0; }
.galeria-campos { max-width: 26rem; }
.galeria-ctx { text-align: center; color: var(--muted); }
.galeria-dialogo { position: static; display: block; margin: .8rem 0; box-shadow: none; }
.galeria-iconos { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr)); gap: .5rem; margin: 0; padding: 0; }
.galeria-iconos li { display: flex; flex-direction: column; align-items: center; gap: .2rem; padding: .5rem .2rem; border: 1px solid var(--rule); border-radius: 12px; background: var(--surface); color: var(--forest); }
.galeria-iconos span { font-size: .72rem; color: var(--muted); max-width: 100%; overflow: hidden; text-overflow: ellipsis; }

/* Galería (1.7) */
.galeria-tabla { max-width: 36rem; }
.desplegable-form label { display: grid; gap: .2rem; margin: 0; font-weight: 600; font-size: .85rem; }

/* Fichero y color (núcleo 1.8.1): el selector de fichero es un botón píldora estándar; el de color, un círculo. */
input[type="file"] { max-width: 100%; font: inherit; font-size: var(--ctl-fuente); color: var(--muted); }
input[type="file"]::file-selector-button { min-height: var(--ctl-alto); margin-right: .7rem; padding: 0 1.1rem; background: var(--surface); color: var(--forest);
  border: 1.5px solid var(--rule); border-radius: var(--ctl-radio); font: inherit; font-size: var(--ctl-fuente); font-weight: 600; cursor: pointer; }
input[type="file"]::file-selector-button:hover { border-color: var(--forest); box-shadow: 0 0 0 1px var(--forest), 0 0 8px rgba(140,196,154,.45); }
input[type="color"] { width: var(--ctl-alto); height: var(--ctl-alto); padding: 0; background: none; border: 1.5px solid var(--rule); border-radius: 50%; cursor: pointer; overflow: hidden; }
input[type="color"]:hover, input[type="color"]:focus-visible { border-color: var(--forest); outline: none; box-shadow: 0 0 0 1px var(--forest); }
input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
input[type="color"]::-webkit-color-swatch { border: 0; border-radius: 50%; }
input[type="color"]::-moz-color-swatch { border: 0; border-radius: 50%; }

/* Formulario denso (núcleo 1.10): modificador para fichas y formularios largos (muchos campos seguidos). Se aplica a un <form> o a cualquier
   contenedor; dentro, controles de 30 px (36 en móvil), fuente y espaciado más pequeños. Solo tamaño y espaciado: la forma (píldora, caja) y los
   colores no cambian. No usar en formularios cortos de uno o dos campos. La zona táctil de 44 px de los botones-icono se adapta sola. */
.formulario-denso { --ctl-alto: 30px; --ctl-icono: 20px; --ctl-fuente: .9rem; --etq-fuente: .85rem; --form-sep: .5rem; }
@media (max-width: 40rem) { .formulario-denso { --ctl-alto: 36px; --ctl-icono: 22px; } }
.formulario-denso textarea, .formulario-denso textarea.campo { padding-top: .35rem; padding-bottom: .35rem; }
.formulario-denso .chip { min-height: 1.3rem; }
.formulario-denso .acciones, .formulario-denso .dialogo-acciones { gap: .4rem; margin-top: .5rem; margin-bottom: .4rem; }
.formulario-denso .dos { gap: 0 .8rem; }
.formulario-denso .datos { gap: .15rem .8rem; }
.galeria-denso { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1rem; align-items: start; }
.galeria-denso .tarjeta { margin-bottom: 0; }

/* Densidad de la página (núcleo 1.11): densidad_pagina('densa') pone la clase .densa en <html>; todo lo que va en rem se reduce un 12,5 %.
   Lo que va en px (controles, botones-icono, píldoras, menús, texto del cuerpo) no cambia. */
html.densa { font-size: 14px; --rail-ancho: 88px; }
/* Galería: marco del ejemplo de parte sin conexión (1.13) */
.galeria-marco { display: block; width: 100%; height: 34rem; border: 1px solid var(--rule); border-radius: var(--dlg-radio); background: var(--paper); }

/* Campo de fecha ISO (núcleo 1.19, N02): <input data-fecha-iso> + botón-icono + calendario. Todo con variables del kit (claro y oscuro). */
.campo-fecha { position: relative; display: inline-flex; align-items: center; gap: .4rem; max-width: 100%; }
.campo-fecha-texto { width: 9.5rem; font-variant-numeric: tabular-nums; }
.fecha-popup { position: absolute; z-index: 60; top: calc(100% + .35rem); left: 0; width: 19.5rem; max-width: calc(100vw - 1rem); padding: .6rem;
  background: var(--surface); color: var(--ink); border: 1px solid var(--rule); border-radius: var(--dlg-radius, 12px); box-shadow: 0 8px 24px rgba(0,0,0,.28); }
.fecha-cab { display: flex; align-items: center; justify-content: space-between; gap: .4rem; margin-bottom: .4rem; }
.fecha-titulo { flex: 1; text-align: center; font-weight: 600; text-transform: capitalize; }
.fecha-rejilla { display: grid; gap: 2px; }
.fecha-fila { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.fecha-dia-nombre { text-align: center; color: var(--muted); font-size: .8rem; text-transform: uppercase; padding: .2rem 0; }
.fecha-dia { height: 2.75rem; min-width: 0; padding: 0; border: 1px solid transparent; border-radius: 8px; background: transparent; color: var(--ink);
  font: inherit; font-variant-numeric: tabular-nums; cursor: pointer; }
.fecha-dia:hover, .fecha-dia:focus-visible { border-color: var(--forest); background: var(--mist); outline: none; box-shadow: 0 0 0 1px var(--forest); }
.fecha-otro-mes { color: var(--muted); }
.fecha-hoy { border-color: var(--rule); font-weight: 700; }
.fecha-elegido, .fecha-elegido:hover, .fecha-elegido:focus-visible { background: var(--forest); color: var(--texto-boton); border-color: var(--forest); }
.fecha-dia:disabled { opacity: .35; cursor: default; }
.fecha-pie { display: flex; justify-content: space-between; margin-top: .5rem; }
@media (max-width: 40rem) {
  .campo-fecha { display: flex; }
  .fecha-popup { position: fixed; left: .5rem; right: .5rem; top: auto; bottom: .5rem; width: auto; max-width: none; }
}

/* Atajos de teclado (núcleo 1.19, N04): fila activa de Nucleo.filas() y ayuda «?» */
.fila-activa, tr.fila-activa > td { background: var(--mist); }
.fila-activa { outline: 2px solid var(--sage); outline-offset: -2px; }
.atajos-lista { display: grid; grid-template-columns: max-content 1fr; gap: .45rem 1rem; margin: 0; align-items: center; }
.atajos-lista dt { margin: 0; }
.atajos-lista dd { margin: 0; }
kbd { font: inherit; font-size: .85rem; padding: .1rem .45rem; border: 1px solid var(--rule); border-bottom-width: 2px; border-radius: 6px; background: var(--paper); color: var(--ink); }