/* =====================================================================
[hidden] { display: none !important; }
   SIGROB 2.0 · Estilo de app nativa macOS Sonoma / iOS
   Fuente y colores de sistema de Apple, barra lateral, listas agrupadas
   como Configuración del Sistema, tablas como Finder y anillos tipo Actividad.
   ===================================================================== */

:root {
  --fondo: #f5f5f7;
  --grupo: #ffffff;
  --lateral: #e8e8ed;
  --barra: rgba(245, 245, 247, 0.8);
  --etiqueta: #1d1d1f;
  --etiqueta-2: #6e6e73;
  --etiqueta-3: #aeaeb2;
  --separador: rgba(60, 60, 67, 0.16);
  --relleno: rgba(120, 120, 128, 0.12);
  --relleno-2: rgba(120, 120, 128, 0.08);
  --fila-alterna: #f9f9fb;
  --seleccion: rgba(0, 0, 0, 0.07);
  --acento: #ff3b30;
  --acento-texto: #d70015;
  --acento-suave: rgba(255, 59, 48, 0.12);
  --verde: #34c759;   --verde-texto: #248a3d;  --verde-suave: rgba(52, 199, 89, 0.14);
  --naranja: #ff9500; --naranja-texto: #c93400; --naranja-suave: rgba(255, 149, 0, 0.15);
  --azul: #007aff;    --azul-texto: #0040dd;    --azul-suave: rgba(0, 122, 255, 0.12);
  --gris-suave: rgba(120, 120, 128, 0.14);
  --sombra-boton: 0 0.5px 1px rgba(0, 0, 0, 0.12), 0 0 0 0.5px rgba(0, 0, 0, 0.1);
  --sombra-ventana: 0 22px 70px rgba(0, 0, 0, 0.28), 0 0 0 0.5px rgba(0, 0, 0, 0.12);
  --foco: 0 0 0 3.5px rgba(0, 122, 255, 0.45);
  --sistema: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", "Segoe UI", Roboto, "Noto Sans", Arial, sans-serif;
  --redondeada: ui-rounded, "SF Pro Rounded", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --r: 10px;
  --r-control: 6px;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fondo: #1e1e1e; --grupo: #2a2a2c; --lateral: #262628; --barra: rgba(30, 30, 30, 0.8);
    --etiqueta: #f5f5f7; --etiqueta-2: #98989d; --etiqueta-3: #636366; --separador: rgba(84, 84, 88, 0.55);
    --relleno: rgba(120, 120, 128, 0.26); --relleno-2: rgba(120, 120, 128, 0.16); --fila-alterna: #2f2f31; --seleccion: rgba(255, 255, 255, 0.1);
    --acento: #ff453a; --acento-texto: #ff6961; --acento-suave: rgba(255, 69, 58, 0.2);
    --verde: #30d158; --verde-texto: #30d158; --verde-suave: rgba(48, 209, 88, 0.18);
    --naranja: #ff9f0a; --naranja-texto: #ffb340; --naranja-suave: rgba(255, 159, 10, 0.18);
    --azul: #0a84ff; --azul-texto: #409cff; --azul-suave: rgba(10, 132, 255, 0.2); --gris-suave: rgba(120, 120, 128, 0.24);
    --sombra-boton: 0 0.5px 1px rgba(0, 0, 0, 0.4), 0 0 0 0.5px rgba(255, 255, 255, 0.12);
    --sombra-ventana: 0 22px 70px rgba(0, 0, 0, 0.6), 0 0 0 0.5px rgba(255, 255, 255, 0.14);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --fondo: #1e1e1e; --grupo: #2a2a2c; --lateral: #262628; --barra: rgba(30, 30, 30, 0.8);
  --etiqueta: #f5f5f7; --etiqueta-2: #98989d; --etiqueta-3: #636366; --separador: rgba(84, 84, 88, 0.55);
  --relleno: rgba(120, 120, 128, 0.26); --relleno-2: rgba(120, 120, 128, 0.16); --fila-alterna: #2f2f31; --seleccion: rgba(255, 255, 255, 0.1);
  --acento: #ff453a; --acento-texto: #ff6961; --acento-suave: rgba(255, 69, 58, 0.2);
  --verde: #30d158; --verde-texto: #30d158; --verde-suave: rgba(48, 209, 88, 0.18);
  --naranja: #ff9f0a; --naranja-texto: #ffb340; --naranja-suave: rgba(255, 159, 10, 0.18);
  --azul: #0a84ff; --azul-texto: #409cff; --azul-suave: rgba(10, 132, 255, 0.2); --gris-suave: rgba(120, 120, 128, 0.24);
  --sombra-boton: 0 0.5px 1px rgba(0, 0, 0, 0.4), 0 0 0 0.5px rgba(255, 255, 255, 0.12);
  --sombra-ventana: 0 22px 70px rgba(0, 0, 0, 0.6), 0 0 0 0.5px rgba(255, 255, 255, 0.14);
  color-scheme: dark;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--fondo); color: var(--etiqueta);
  font: 400 14px/1.43 var(--sistema); letter-spacing: -0.006em;
  -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent;
}
h1, h2, h3 { margin: 0; font-weight: 700; letter-spacing: -0.015em; }
h1 { font-size: 22px; line-height: 1.2; }
h2 { font-size: 17px; font-weight: 600; }
h3 { font-size: 14px; font-weight: 600; }
p { margin: 0; }
a { color: var(--acento-texto); text-decoration: none; }
a:hover { text-decoration: underline; }
img { display: block; max-width: 100%; }
.ico { flex: none; }
.num { font-variant-numeric: tabular-nums; }
.sec { color: var(--etiqueta-2); }
.ter { color: var(--etiqueta-3); }
.pie { font-size: 12px; color: var(--etiqueta-2); }
:focus-visible { outline: none; box-shadow: var(--foco); border-radius: var(--r-control); }
.saltar { position: absolute; left: -999px; top: 8px; z-index: 100; background: var(--grupo); padding: 8px 12px; border-radius: 8px; }
.saltar:focus { left: 8px; }
.solo-lector { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ---------- Arranque y acceso ---------- */
.arranque { min-height: 100dvh; display: grid; place-items: center; }
.arranque img { width: 96px; border-radius: 22px; animation: latido 1.4s ease-in-out infinite; }
@keyframes latido { 50% { opacity: 0.4; } }

.acceso { min-height: 100dvh; display: grid; place-items: center; padding: 24px 16px; }
.acceso-panel { width: min(360px, 100%); display: grid; gap: 18px; text-align: center; }
.icono-app { width: 88px; height: 88px; margin: 0 auto; border-radius: 20px; background: #fff; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.14), 0 0 0 0.5px rgba(0, 0, 0, 0.08); padding: 6px; }
.acceso h1 { font-size: 24px; }
.acceso-panel > p { color: var(--etiqueta-2); margin-top: -10px; }
.acceso .grupo { text-align: left; }
.acceso .ayuda-pie { font-size: 12px; color: var(--etiqueta-2); }

/* ---------- Marco: barra lateral + contenido ---------- */
.marco { min-height: 100dvh; display: grid; grid-template-columns: 236px minmax(0, 1fr); }
.lateral {
  position: sticky; top: 0; height: 100dvh; overflow-y: auto; background: var(--lateral);
  border-right: 0.5px solid var(--separador); display: flex; flex-direction: column; padding: 14px 10px 10px;
}
.lateral-cab { display: flex; align-items: center; gap: 10px; padding: 4px 8px 14px; }
.lateral-cab img { width: 32px; height: 32px; border-radius: 8px; background: #fff; padding: 2px; box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.1); }
.lateral-cab strong { display: block; font-size: 14px; font-weight: 600; }
.lateral-cab select { all: unset; font-size: 12px; color: var(--etiqueta-2); cursor: pointer; max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lateral-cab .sub { font-size: 12px; color: var(--etiqueta-2); }
.seccion-lateral { margin-bottom: 14px; }
.seccion-lateral > span { display: block; font-size: 11px; font-weight: 600; color: var(--etiqueta-2); padding: 0 10px 4px; }
.item-lateral {
  display: flex; align-items: center; gap: 9px; height: 30px; padding: 0 10px; border-radius: var(--r-control);
  color: var(--etiqueta); font-size: 13.5px; text-decoration: none; position: relative;
}
.item-lateral:hover { text-decoration: none; background: var(--relleno-2); }
.item-lateral .ico { color: var(--acento); }
.item-lateral[aria-current="page"] { background: var(--seleccion); font-weight: 500; }
.item-lateral .contador { margin-left: auto; font-size: 12px; color: var(--etiqueta-2); font-variant-numeric: tabular-nums; }
.lateral-pie { margin-top: auto; border-top: 0.5px solid var(--separador); padding-top: 10px; }
.yo { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: var(--r-control); width: 100%; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.yo:hover { background: var(--relleno-2); }
.yo strong { display: block; font-size: 13px; font-weight: 500; line-height: 1.25; }
.yo small { color: var(--etiqueta-2); font-size: 11.5px; }
.avatar { width: 30px; height: 30px; border-radius: 50%; flex: none; display: grid; place-items: center; font: 600 12px/1 var(--redondeada);
  color: #fff; background: linear-gradient(180deg, #a1a1a6, #7c7c80); }
.avatar.grande { width: 64px; height: 64px; font-size: 24px; }

.contenido { min-width: 0; outline: none; }
.contenido:focus-visible { box-shadow: none; }

/* Barra de herramientas superior (unificada, translúcida) */
.barra {
  position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 12px; min-height: 52px;
  padding: 10px 28px; background: var(--barra); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 0.5px solid transparent; transition: border-color 0.2s;
}
.barra.con-borde { border-bottom-color: var(--separador); }
.barra h1 { font-size: 17px; font-weight: 700; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.barra .acciones { margin-left: auto; }
.barra .btn-icono.menu { display: none; }
.atras { display: inline-flex; align-items: center; gap: 2px; color: var(--acento-texto); font-size: 14px; white-space: nowrap; }
.atras:hover { text-decoration: none; opacity: 0.8; }

.pagina { padding: 8px 28px 56px; max-width: 1180px; }
.pagina-ancha { max-width: none; }
.intro { color: var(--etiqueta-2); margin: 0 0 20px; max-width: 70ch; }

.pestanas, .capa { display: none; }

/* ---------- Tablet ---------- */
@media (max-width: 1023px) {
  .marco { grid-template-columns: minmax(0, 1fr); }
  .lateral {
    position: fixed; z-index: 60; inset: 0 auto 0 0; width: 280px; transform: translateX(-104%);
    transition: transform 0.28s cubic-bezier(0.32, 0.72, 0, 1); box-shadow: var(--sombra-ventana);
    padding-top: calc(env(safe-area-inset-top) + 14px);
  }
  .menu-abierto .lateral { transform: none; }
  .menu-abierto .capa { display: block; position: fixed; inset: 0; z-index: 50; background: rgba(0, 0, 0, 0.25); }
  .barra .btn-icono.menu { display: inline-grid; }
  .barra { padding-left: 16px; padding-right: 16px; padding-top: calc(env(safe-area-inset-top) + 8px); }
  .pagina { padding: 8px 20px 56px; }
}

/* ---------- Celular: barra de pestañas estilo iOS ---------- */
@media (max-width: 699px) {
  body { font-size: 16px; }
  h2 { font-size: 20px; }
  .con-pestanas .barra .btn-icono.menu { display: none; }
  .barra { min-height: 44px; }
  .barra h1 { font-size: 17px; text-align: center; font-weight: 600; }
  .barra.con-grande h1 { display: none; }
  .barra { flex-wrap: wrap; row-gap: 8px; }
  .barra .acciones { flex-wrap: wrap; justify-content: flex-end; }
  .barra .acciones .entrada { min-height: 34px; width: auto; }
  .barra .acciones .btn { height: 34px; font-size: 14px; padding: 0 12px; }
  .titulo-grande { display: block !important; font-size: 30px; font-weight: 700; letter-spacing: -0.02em; margin: 2px 0 6px; }
  .pagina { padding: 0 16px calc(96px + env(safe-area-inset-bottom)); }
  .con-pestanas .pestanas {
    display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; position: fixed; z-index: 30; inset: auto 0 0 0;
    background: var(--barra); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
    border-top: 0.5px solid var(--separador); padding: 6px 4px calc(env(safe-area-inset-bottom) + 4px);
  }
  .pestana { display: grid; justify-items: center; gap: 2px; padding: 2px; color: var(--etiqueta-2); font-size: 10.5px; font-weight: 500; text-decoration: none; }
  .pestana:hover { text-decoration: none; }
  .pestana[aria-current="page"] { color: var(--acento); }
}
.titulo-grande { display: none; }

/* ---------- Botones (macOS push buttons / iOS) ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 30px; padding: 0 14px;
  border: 0; border-radius: var(--r-control); background: var(--grupo); color: var(--etiqueta); box-shadow: var(--sombra-boton);
  font: 500 13.5px/1 var(--sistema); cursor: pointer; white-space: nowrap; text-decoration: none;
}
.btn:hover { text-decoration: none; filter: brightness(0.97); }
.btn:active { filter: brightness(0.92); }
.btn:disabled { opacity: 0.5; cursor: default; }
.btn-primario { background: var(--acento); color: #fff; box-shadow: 0 0.5px 1px rgba(0, 0, 0, 0.2); }
.btn-tenue { background: var(--relleno); box-shadow: none; }
.btn-texto { background: none; box-shadow: none; color: var(--acento-texto); padding: 0 6px; }
.btn-texto:hover { filter: none; text-decoration: underline; }
.btn-peligro { color: var(--acento-texto); }
.btn-grande { height: 44px; font-size: 16px; border-radius: 12px; padding: 0 20px; }
.btn-ancho { width: 100%; }
.btn-icono { display: inline-grid; place-items: center; width: 32px; height: 32px; border: 0; background: none; border-radius: var(--r-control); color: var(--acento-texto); cursor: pointer; }
.btn-icono:hover { background: var(--relleno-2); }
.acciones { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
@media (max-width: 699px) {
  .btn { height: 38px; font-size: 15px; border-radius: 10px; }
  .btn-grande { height: 50px; font-size: 17px; border-radius: 14px; }
}

/* ---------- Grupos (Configuración del Sistema / iOS inset grouped) ---------- */
.seccion { margin-bottom: 22px; }
.seccion > .seccion-cab { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 0 4px 6px; }
.seccion > .seccion-cab h2 { font-size: 15px; font-weight: 600; }
.seccion > .seccion-pie { font-size: 12px; color: var(--etiqueta-2); padding: 6px 4px 0; }
.grupo { background: var(--grupo); border-radius: var(--r); box-shadow: 0 0 0 0.5px var(--separador); overflow: hidden; }
.grupo-relleno { padding: 16px; }
.fila { display: flex; align-items: center; gap: 12px; min-height: 40px; padding: 7px 14px; position: relative; }
.fila + .fila::before { content: ""; position: absolute; top: 0; left: 14px; right: 0; border-top: 0.5px solid var(--separador); }
.fila > label, .fila > .etq { flex: 1 1 40%; min-width: 0; }
.fila > .valor { flex: 1 1 60%; text-align: right; color: var(--etiqueta-2); min-width: 0; overflow-wrap: anywhere; }
.fila .ico-fila { width: 26px; height: 26px; border-radius: 6px; display: grid; place-items: center; color: #fff; background: var(--acento); flex: none; }
.fila.enlace { cursor: pointer; text-decoration: none; color: inherit; }
.fila.enlace:hover { background: var(--relleno-2); text-decoration: none; }
.fila.enlace::after { content: "›"; color: var(--etiqueta-3); font-size: 20px; line-height: 1; margin-left: 4px; }
.fila .bloqueo { color: var(--etiqueta-3); font-size: 12px; }
.fila-apilada { flex-direction: column; align-items: stretch; gap: 6px; }

/* Campos dentro de filas: sin borde, alineados a la derecha (como Configuración) */
.fila input:not([type="checkbox"]):not([type="file"]), .fila select {
  flex: 1 1 60%; min-width: 0; border: 0; background: none; text-align: right; font: inherit; color: var(--etiqueta-2);
  padding: 4px 0; min-height: 28px;
}
.fila input:focus, .fila select:focus { color: var(--etiqueta); box-shadow: none; }
.fila input::placeholder { color: var(--etiqueta-3); }
.fila input[readonly] { color: var(--etiqueta-3); }
.fila select {
  appearance: none; -webkit-appearance: none; cursor: pointer; text-align-last: right; padding-right: 18px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='14' viewBox='0 0 10 14'%3E%3Cpath d='M1.5 5 5 1.5 8.5 5M1.5 9 5 12.5 8.5 9' fill='none' stroke='%238e8e93' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right center / 10px 14px no-repeat;
}
.fila textarea { width: 100%; border: 0; background: none; font: inherit; color: var(--etiqueta); resize: vertical; min-height: 80px; padding: 4px 0; }
.fila:focus-within { background: var(--relleno-2); }

/* Campos sueltos */
.campo { display: grid; gap: 5px; }
.campo > label { font-size: 12.5px; font-weight: 500; color: var(--etiqueta-2); }
.entrada, .campo input:not([type="checkbox"]), .campo select, .campo textarea {
  width: 100%; min-height: 30px; padding: 5px 9px; font: inherit; color: var(--etiqueta);
  background: var(--grupo); border: 0; border-radius: var(--r-control); box-shadow: inset 0 0 0 0.5px var(--separador), 0 0.5px 0.5px rgba(0, 0, 0, 0.05);
}
.campo textarea { min-height: 80px; resize: vertical; }
.campo input:focus, .campo select:focus, .campo textarea:focus, .entrada:focus { box-shadow: var(--foco); }
@media (max-width: 699px) {
  .entrada, .campo input:not([type="checkbox"]), .campo select { min-height: 44px; border-radius: 10px; font-size: 16px; }
  .fila { min-height: 46px; }
}
input[type="checkbox"].interruptor {
  appearance: none; width: 38px; height: 22px; border-radius: 11px; background: var(--relleno); position: relative; cursor: pointer; flex: none; transition: background 0.2s;
}
input[type="checkbox"].interruptor::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); transition: transform 0.2s;
}
input[type="checkbox"].interruptor:checked { background: var(--verde); }
input[type="checkbox"].interruptor:checked::after { transform: translateX(16px); }

/* Buscador y control segmentado */
.buscador { position: relative; flex: 1 1 220px; max-width: 320px; }
.buscador .ico { position: absolute; left: 8px; top: 50%; transform: translateY(-50%); color: var(--etiqueta-2); pointer-events: none; }
.buscador input { width: 100%; min-height: 30px; padding: 4px 10px 4px 30px; border: 0; border-radius: 8px; background: var(--relleno); font: inherit; color: var(--etiqueta); }
.buscador input:focus { box-shadow: var(--foco); }
@media (max-width: 699px) { .buscador { max-width: none; } .buscador input { min-height: 38px; border-radius: 10px; } }
.segmentado { display: inline-flex; padding: 2px; border-radius: 8px; background: var(--relleno); gap: 2px; max-width: 100%; overflow-x: auto; }
.segmentado button {
  border: 0; background: none; font: 500 12.5px/1 var(--sistema); color: var(--etiqueta); padding: 6px 12px; border-radius: 6px; cursor: pointer; white-space: nowrap;
}
.segmentado button[aria-pressed="true"] { background: var(--grupo); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 0 0 0.5px rgba(0, 0, 0, 0.04); }
@media (max-width: 699px) { .segmentado { display: flex; } .segmentado button { flex: 1; font-size: 13px; padding: 7px 8px; } }
.filtros { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 14px; }
.filtros select.entrada { width: auto; }

/* ---------- Tabla (lista de Finder) ---------- */
.tabla-env { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th { text-align: left; font-weight: 500; font-size: 11.5px; color: var(--etiqueta-2); padding: 6px 12px; border-bottom: 0.5px solid var(--separador); white-space: nowrap; }
th button { all: unset; cursor: pointer; display: inline-flex; gap: 4px; align-items: center; }
th[aria-sort="ascending"] button::after { content: "⌃"; font-size: 11px; }
th[aria-sort="descending"] button::after { content: "⌄"; font-size: 11px; }
td { padding: 7px 12px; vertical-align: middle; }
tbody tr:nth-child(even) td { background: var(--fila-alterna); }
tbody tr.clic { cursor: default; }
tbody tr.clic:hover td { background: var(--seleccion); }
td.n, th.n { text-align: right; font-variant-numeric: tabular-nums; }
tfoot td { font-weight: 600; border-top: 0.5px solid var(--separador); }
.celda-titulo strong { display: block; font-weight: 500; }
.celda-titulo small { color: var(--etiqueta-2); font-size: 11.5px; }

/* Lista estilo iOS (la tabla en celular) */
.lista { list-style: none; margin: 0; padding: 0; }
.lista li { display: flex; align-items: center; gap: 12px; padding: 10px 14px; min-height: 54px; position: relative; }
.lista li + li::before { content: ""; position: absolute; top: 0; left: 14px; right: 0; border-top: 0.5px solid var(--separador); }
.lista li.clic { cursor: pointer; }
.lista li.clic:active { background: var(--seleccion); }
.lista .li-cuerpo { flex: 1; min-width: 0; }
.lista .li-titulo { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lista .li-sub { font-size: 13px; color: var(--etiqueta-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lista .li-fin { text-align: right; font-size: 13px; color: var(--etiqueta-2); flex: none; }
.lista li.clic::after { content: "›"; color: var(--etiqueta-3); font-size: 22px; line-height: 1; }
.vacio-lista { padding: 28px 16px; text-align: center; color: var(--etiqueta-2); }

/* ---------- Etiquetas de estado ---------- */
.etiqueta { display: inline-flex; align-items: center; gap: 5px; padding: 1px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.etiqueta::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.e-verde { background: var(--verde-suave); color: var(--verde-texto); }
.e-naranja { background: var(--naranja-suave); color: var(--naranja-texto); }
.e-rojo { background: var(--acento-suave); color: var(--acento-texto); }
.e-azul { background: var(--azul-suave); color: var(--azul-texto); }
.e-gris { background: var(--gris-suave); color: var(--etiqueta-2); }

/* ---------- Cifras ---------- */
.cifras { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 22px; }
.cifra { background: var(--grupo); border-radius: var(--r); box-shadow: 0 0 0 0.5px var(--separador); padding: 12px 14px; }
.cifra span { display: block; font-size: 12px; color: var(--etiqueta-2); font-weight: 500; }
.cifra b { display: block; font: 600 26px/1.15 var(--redondeada); margin-top: 2px; font-variant-numeric: tabular-nums; }
.cifra small { color: var(--etiqueta-2); font-size: 12px; }
.cifra.acento b { color: var(--acento-texto); }
@media (max-width: 699px) { .cifras { grid-template-columns: 1fr 1fr; } .cifra b { font-size: 24px; } }

/* ---------- Anillos (estilo Actividad) ---------- */
.anillos-tarjeta { display: grid; grid-template-columns: auto 1fr; gap: 24px; align-items: center; padding: 20px; }
.anillos { width: 168px; height: 168px; }
.anillos circle { fill: none; stroke-linecap: round; }
.anillos .pista-1 { stroke: var(--acento); opacity: 0.18; }
.anillos .arco-1 { stroke: var(--acento); }
.anillos .pista-2 { stroke: var(--verde); opacity: 0.2; }
.anillos .arco-2 { stroke: var(--verde); }
.anillos .arco-1, .anillos .arco-2 { transition: stroke-dashoffset 1.1s cubic-bezier(0.2, 0.8, 0.2, 1); }
.anillos-datos { display: grid; gap: 14px; min-width: 0; }
.dato-anillo > span { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; }
.dato-anillo > span::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--c); }
.dato-anillo b { display: block; font: 600 30px/1.1 var(--redondeada); color: var(--c); font-variant-numeric: tabular-nums; }
.dato-anillo b small { font-size: 16px; font-weight: 600; }
.dato-anillo p { font-size: 12.5px; color: var(--etiqueta-2); }
@media (max-width: 520px) {
  .anillos-tarjeta { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .dato-anillo > span { justify-content: center; }
  .anillos { width: 200px; height: 200px; }
}

/* Barra de progreso fina (filas de tablas y grados) */
.progreso { position: relative; height: 6px; border-radius: 3px; background: var(--relleno); overflow: hidden; min-width: 70px; }
.progreso i { position: absolute; inset: 0 auto 0 0; border-radius: 3px; background: var(--acento); }
.progreso.ok i { background: var(--verde); }
.progreso b { position: absolute; top: -2px; bottom: -2px; width: 2px; background: var(--etiqueta); opacity: 0.55; }

/* ---------- Gráfico de barras (estilo Salud) ---------- */
.grafico { width: 100%; height: auto; display: block; }
/* Control trimestral */
.trim-mini { display: inline-flex; gap: 3px; }
.trim-mini i { font: 600 10px/1 var(--sistema); font-style: normal; padding: 3px 4px; border-radius: 4px; background: var(--relleno); color: var(--etiqueta-2); }
.trim-mini i.e-verde { background: var(--verde-suave); color: var(--verde-texto); }
.trim-mini i.e-rojo { background: var(--acento-suave); color: var(--acento-texto); }
.trim-mini i.e-naranja { background: var(--naranja-suave); color: var(--naranja-texto); }
.trim-mini i.e-azul { background: var(--azul-suave); color: var(--azul-texto); }
.trim-tarjetas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.trim-tarjeta { background: var(--grupo); border-radius: var(--r); box-shadow: 0 0 0 0.5px var(--separador); padding: 12px 14px; display: grid; gap: 6px; }
.trim-cab { display: flex; justify-content: space-between; align-items: baseline; }
.trim-tarjeta > b { font: 600 22px/1.1 var(--redondeada, var(--sistema)); }
.trim-tarjeta > b small { font-size: 13px; color: var(--etiqueta-2); font-weight: 500; }
@media (max-width: 699px) { .trim-tarjetas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Mapa de calor por distrito */
.mapa-bloque { display: grid; gap: 10px; }
.mapa-marco { position: relative; }
.mapa { width: 100%; height: auto; display: block; max-height: 520px; overflow: hidden; }
.mapa path { stroke: var(--grupo); stroke-width: 0.8; stroke-linejoin: round; vector-effect: non-scaling-stroke; transition: fill-opacity 0.15s; }
.mapa path.sin-datos { fill: var(--relleno); }
.mapa path.con-datos { fill: var(--acento); cursor: pointer; outline: none; }
.mapa path.con-datos:hover, .mapa path.con-datos:focus { stroke: var(--etiqueta); stroke-width: 1.6; }
.mapa-etiquetas text { font: 700 var(--fs, 11px) var(--sistema); fill: var(--etiqueta); pointer-events: none; paint-order: stroke; stroke: var(--grupo); stroke-width: calc(var(--fs, 11px) * 0.28); }
.mapa-etiquetas text.claro { fill: #fff; stroke: none; }
.mapa-globo { position: absolute; z-index: 2; pointer-events: none; display: grid; gap: 1px; min-width: 120px; padding: 7px 10px; border-radius: 8px;
  background: var(--grupo); box-shadow: var(--sombra-ventana); font-size: 12px; }
.mapa-globo span { color: var(--etiqueta-2); }
.mapa-leyenda { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 12px; color: var(--etiqueta-2); }
.mapa-escala { width: 120px; height: 8px; border-radius: 4px; background: linear-gradient(90deg, color-mix(in srgb, var(--acento) 18%, transparent), var(--acento)); }
.mapa-cero { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; }
.mapa-cero i { width: 12px; height: 12px; border-radius: 3px; background: var(--relleno); }
.grafico text { fill: var(--etiqueta-2); font: 500 11px var(--sistema); }
.grafico .valor { fill: var(--etiqueta); font-weight: 600; }
.grafico .barra-g { fill: var(--acento); }
.grafico .vacia { fill: var(--relleno); }
.grafico .rejilla { stroke: var(--separador); }
.grafico .guia { stroke: var(--etiqueta-2); stroke-dasharray: 3 3; }

/* ---------- Vista dividida (Mail) ---------- */
.dividida { display: grid; grid-template-columns: minmax(300px, 380px) minmax(0, 1fr); height: calc(100dvh - 52px); border-top: 0.5px solid var(--separador); }
.dividida > .lista-panel { overflow-y: auto; border-right: 0.5px solid var(--separador); background: var(--grupo); }
.dividida > .detalle-panel { overflow-y: auto; padding: 20px 28px 40px; }
.correo { display: grid; gap: 2px; padding: 10px 14px 10px 26px; position: relative; cursor: pointer; border-bottom: 0.5px solid var(--separador); }
.correo:hover { background: var(--relleno-2); }
.correo[aria-current="true"] { background: var(--acento); color: #fff; }
.correo[aria-current="true"] .sec, .correo[aria-current="true"] .ter { color: rgba(255, 255, 255, 0.85); }
.correo .linea1 { display: flex; justify-content: space-between; gap: 8px; }
.correo .linea1 strong { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.correo .linea2 { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.correo .linea3 { font-size: 12px; display: flex; gap: 8px; align-items: center; }
.correo .punto { position: absolute; left: 10px; top: 16px; width: 8px; height: 8px; border-radius: 50%; }
@media (max-width: 1023px) {
  .dividida { display: block; height: auto; border-top: 0; }
  .dividida > .lista-panel { border-right: 0; background: none; overflow: visible; }
  .dividida > .detalle-panel { display: none; }
  .dividida .lista-panel .grupo-lista { background: var(--grupo); border-radius: var(--r); box-shadow: 0 0 0 0.5px var(--separador); overflow: hidden; }
}

/* ---------- Detalle de documento ---------- */
.adjuntos { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.adjunto { display: grid; gap: 6px; padding: 10px; border-radius: var(--r); background: var(--grupo); box-shadow: 0 0 0 0.5px var(--separador); text-align: left; border: 0; color: inherit; font: inherit; cursor: pointer; }
.adjunto:hover { background: var(--relleno-2); }
.adjunto .miniatura { height: 90px; border-radius: 6px; background: var(--relleno) center/cover no-repeat; display: grid; place-items: center; color: var(--etiqueta-2); }
.adjunto small { font-size: 11.5px; color: var(--etiqueta-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.historial { list-style: none; margin: 0; padding: 0; }
.historial li { display: grid; grid-template-columns: 14px 1fr; gap: 10px; padding: 6px 0; }
.historial li::before { content: ""; width: 9px; height: 9px; margin-top: 5px; border-radius: 50%; background: var(--etiqueta-3); }
.historial li:first-child::before { background: var(--acento); }
.historial small { display: block; color: var(--etiqueta-2); font-size: 12px; }
.cita { margin-top: 4px; padding: 6px 10px; border-radius: 6px; background: var(--naranja-suave); color: var(--etiqueta); font-size: 13px; }

/* ---------- Enviar documento (bombero) ---------- */
.zona-envio {
  display: grid; place-items: center; gap: 10px; padding: 36px 16px; text-align: center; border-radius: 14px;
  border: 1.5px dashed var(--etiqueta-3); color: var(--etiqueta-2); cursor: pointer; background: var(--grupo);
}
.zona-envio.encima { border-color: var(--acento); background: var(--acento-suave); }
.zona-envio strong { color: var(--etiqueta); font-size: 16px; }
.miniaturas { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; margin-top: 12px; }
.mini { position: relative; aspect-ratio: 3 / 4; border-radius: 10px; overflow: hidden; background: var(--relleno) center/cover no-repeat; display: grid; place-items: center; color: var(--etiqueta-2); font-size: 12px; text-align: center; padding: 6px; box-shadow: 0 0 0 0.5px var(--separador); }
.mini button { position: absolute; top: 4px; right: 4px; width: 24px; height: 24px; border-radius: 50%; border: 0; background: rgba(0, 0, 0, 0.55); color: #fff; cursor: pointer; display: grid; place-items: center; }
.recibo { text-align: center; display: grid; gap: 10px; justify-items: center; padding: 28px 16px; }
.recibo .check { width: 64px; height: 64px; border-radius: 50%; background: var(--verde); color: #fff; display: grid; place-items: center; }
.recibo .numero { font: 700 34px/1.1 var(--redondeada); letter-spacing: 0.01em; }

/* Pasos de carga */
.pasos { display: flex; gap: 6px; align-items: center; margin-bottom: 14px; font-size: 12.5px; color: var(--etiqueta-2); }
.pasos span[aria-current="step"] { color: var(--etiqueta); font-weight: 600; }
.pasos i { font-style: normal; color: var(--etiqueta-3); }
.zona-archivo { display: grid; place-items: center; gap: 6px; padding: 28px 16px; text-align: center; border: 1.5px dashed var(--etiqueta-3); border-radius: var(--r); color: var(--etiqueta-2); cursor: pointer; }
.zona-archivo strong { color: var(--etiqueta); }
.zona-archivo.encima, .zona-archivo:hover { border-color: var(--acento); }
.zona-archivo input, .zona-envio input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.errores { list-style: none; margin: 0; padding: 0; max-height: 300px; overflow: auto; }
.errores li { padding: 7px 14px; font-size: 13px; border-top: 0.5px solid var(--separador); }
.errores li:first-child { border-top: 0; }
.errores b { color: var(--acento-texto); font-weight: 600; }

/* ---------- Avisos (banner de notificación macOS) ---------- */
.avisos { position: fixed; z-index: 90; top: calc(env(safe-area-inset-top) + 12px); right: 12px; display: grid; gap: 8px; width: min(360px, calc(100vw - 24px)); }
.aviso {
  display: flex; gap: 10px; align-items: flex-start; padding: 11px 14px; border-radius: 14px; font-size: 13px;
  background: var(--barra); -webkit-backdrop-filter: saturate(180%) blur(24px); backdrop-filter: saturate(180%) blur(24px);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.18), 0 0 0 0.5px var(--separador); animation: baja 0.35s cubic-bezier(0.2, 0.9, 0.3, 1.2);
}
.aviso .ico { color: var(--verde); margin-top: 1px; }
.aviso-error .ico { color: var(--acento); }
.aviso strong { display: block; font-weight: 600; }
.aviso.sale { opacity: 0; transform: translateX(20px); transition: 0.35s; }
@keyframes baja { from { opacity: 0; transform: translateY(-12px); } }
@media (max-width: 699px) { .avisos { left: 12px; right: 12px; width: auto; } }

.cargando { display: flex; align-items: center; gap: 10px; color: var(--etiqueta-2); padding: 36px 0; justify-content: center; }
.giro { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--relleno); border-top-color: var(--etiqueta-2); animation: gira 0.8s linear infinite; }
@keyframes gira { to { transform: rotate(360deg); } }
.vacio { text-align: center; padding: 48px 16px; color: var(--etiqueta-2); display: grid; gap: 8px; justify-items: center; }
.vacio .ico { color: var(--etiqueta-3); }
.vacio strong { color: var(--etiqueta); font-size: 17px; }
.vacio p { max-width: 42ch; }
.nota { padding: 10px 14px; border-radius: var(--r); background: var(--azul-suave); color: var(--etiqueta); font-size: 13px; }
.nota-alerta { background: var(--naranja-suave); }
.nota-error { background: var(--acento-suave); }

/* ---------- Hoja (diálogo macOS / sheet iOS) ---------- */
.hoja { border: 0; padding: 0; border-radius: 12px; width: min(460px, calc(100vw - 32px)); background: var(--grupo); color: var(--etiqueta); box-shadow: var(--sombra-ventana); }
.hoja::backdrop { background: rgba(0, 0, 0, 0.2); }
.hoja-cuerpo { padding: 20px; display: grid; gap: 14px; }
.hoja-cuerpo h2 { font-size: 15px; font-weight: 700; }
.hoja-pie { display: flex; justify-content: flex-end; gap: 8px; }
@media (max-width: 699px) {
  .hoja { width: 100vw; max-width: 100vw; margin: auto 0 0; border-radius: 14px 14px 0 0; padding-bottom: env(safe-area-inset-bottom); animation: sube 0.32s cubic-bezier(0.32, 0.72, 0, 1); }
  .hoja-pie { flex-direction: column-reverse; }
  .hoja-pie .btn { width: 100%; height: 46px; }
}
@keyframes sube { from { transform: translateY(100%); } }

/* Rejillas */
.dos-col { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 22px; align-items: start; }
@media (max-width: 1023px) { .dos-col { grid-template-columns: 1fr; } }
.grados-lista .fila { display: grid; grid-template-columns: minmax(120px, 170px) 1fr 56px; }
.grados-lista .fila .valor { text-align: right; }
@media (max-width: 520px) { .grados-lista .fila { grid-template-columns: 1fr 56px; } .grados-lista .fila .progreso { grid-column: 1 / -1; grid-row: 2; } }

/* ---------- Impresión ---------- */
@media print {
  .lateral, .pestanas, .avisos, .no-imprimir, .barra .acciones, .barra .btn-icono { display: none !important; }
  .marco { display: block; }
  body { background: #fff; color: #000; }
  .barra { position: static; background: none; }
  .grupo, .cifra { box-shadow: 0 0 0 1px #ccc; break-inside: avoid; }
  .anillos circle, .progreso i, .etiqueta { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .solo-impresion { display: block !important; }
}
.solo-impresion { display: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Ajustes finos */
.miniaturas:not(:empty) { margin-bottom: 22px; }
.fila textarea:focus { box-shadow: none; outline: none; }