/* =====================================================================
   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.
   ===================================================================== */
[hidden] { display: none !important; }

: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; grid-template-rows: 1fr auto; place-items: center; padding: 24px 16px calc(28px + env(safe-area-inset-bottom)); text-align: center; }
.arranque-centro { display: grid; justify-items: center; gap: 6px; }
.arranque img { width: 96px; border-radius: 22px; margin-bottom: 10px; animation: latido 1.4s ease-in-out infinite; }
.arranque strong { font: 700 26px/1.1 var(--redondeada, inherit); letter-spacing: 0.5px; color: var(--etiqueta); }
.arranque span { font-size: 14px; color: var(--etiqueta-2); max-width: 260px; }
.arranque-marca, .marca-pie { font-size: 12px; color: var(--etiqueta-2); letter-spacing: 0.2px; }
.arranque-marca b, .marca-pie b { color: var(--etiqueta); font-weight: 600; }
.arranque-marca { animation: aparecer 0.6s ease 0.3s both; }
@keyframes aparecer { from { opacity: 0; transform: translateY(6px); } }
.marca-pie { text-align: center; margin-top: 18px; }
.lista-privacidad { display: grid; gap: 10px; }
@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; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .segmentado::-webkit-scrollbar { display: none; }
  .segmentado button { flex: 1 0 auto; font-size: 13px; padding: 7px 10px; white-space: nowrap; }
  .segmentado.desborda { -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); }
  .segmentado.desborda.al-final { -webkit-mask-image: none; mask-image: none; }
}
.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 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; }

/* --- Mi espacio: trámites, formatos y Mis documentos ------------------------------ */
.texto-libre { white-space: pre-wrap; }
.fila.archivo .ext { flex: none; min-width: 38px; height: 26px; padding: 0 5px; border-radius: 6px; display: grid; place-items: center;
  font-size: 10.5px; font-weight: 700; letter-spacing: .02em; color: #fff; background: var(--azul, #0a84ff); }
.fila.archivo .ext-pdf { background: var(--acento); }
.fila.archivo .ext-xls, .fila.archivo .ext-xlsx { background: var(--verde-texto); }
.fila.archivo .ext-ppt, .fila.archivo .ext-pptx { background: var(--naranja, #ff9500); }
.fila.archivo > svg { flex: none; color: var(--etiqueta-2); margin-left: auto; }
.btn-whatsapp { background: #25d366; color: #fff; box-shadow: none; }
.btn-whatsapp:hover { background: #1ebe5b; }
ol.pasos-doc { list-style: none; margin: 0; padding: 0; display: flex; gap: 0; counter-reset: paso; }
ol.pasos-doc li { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 12px; color: var(--etiqueta-2); position: relative; text-align: center; }
ol.pasos-doc li > span { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 600;
  background: var(--relleno); color: var(--etiqueta-2); position: relative; z-index: 1; }
ol.pasos-doc li + li::before { content: ""; position: absolute; top: 12px; right: 50%; width: 100%; height: 2px; background: var(--relleno); }
ol.pasos-doc li.hecho { color: var(--etiqueta); }
ol.pasos-doc li.hecho > span { background: var(--verde); color: #fff; }
ol.pasos-doc li.hecho + li.hecho::before { background: var(--verde); }
.fila.enlace.archivo::after { display: none; }

/* --- UBO actual: logo, selector y franja ------------------------------------------ */
button.lateral-cab { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 10px; padding: 6px 8px; margin: -2px 0 12px; border-radius: var(--r-control); cursor: pointer; width: 100%; }
button.lateral-cab:hover { background: var(--relleno-2); }
button.lateral-cab:focus-visible { outline: 2px solid var(--azul); }
.lateral-cab strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lateral-cab .sub { display: block; }
.lateral-cab > svg { flex: none; color: var(--etiqueta-2); }
.lateral-cab img { object-fit: contain; }
.franja-ubo { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 8px; padding: 6px 16px; font-size: 13px;
  background: var(--naranja-suave, rgba(255,149,0,.16)); color: var(--etiqueta); }
.franja-ubo span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* --- Documentos emitidos: editor y vista A4 ---------------------------------------- */
.emitido-dividido { display: grid; grid-template-columns: minmax(320px, 440px) 1fr; gap: 24px; align-items: start; }
.vista-cont { position: sticky; top: 64px; overflow: auto; max-height: calc(100vh - 80px); background: var(--relleno-2); border-radius: var(--r); padding: 16px; }
.vista-a4 { width: 210mm; transform: scale(var(--escala-a4, .72)); transform-origin: top left; margin-bottom: calc(-297mm * (1 - var(--escala-a4, .72))); box-shadow: 0 2px 14px rgba(0,0,0,.18); }
.vista-a4 .a4 { min-height: 297mm; }
@media (max-width: 1100px) { .emitido-dividido { grid-template-columns: 1fr; } .vista-cont { position: static; max-height: none; } .vista-a4 { --escala-a4: .45; } }
@media (max-width: 520px) { .vista-a4 { --escala-a4: .4; } .vista-cont { padding: 8px; } }
.form-emitido textarea, .form-emitido input:not([type=checkbox]) { width: 100%; }
.editor { border: 0.5px solid var(--separador); border-radius: var(--r); background: var(--grupo); overflow: hidden; }
.barra-editor { display: flex; flex-wrap: wrap; gap: 4px; padding: 6px; border-bottom: 0.5px solid var(--separador); background: var(--relleno-2); }
.barra-editor .btn { padding: 2px 8px; min-height: 28px; font-size: 13px; }
.editor-cuerpo { min-height: 240px; max-height: 60vh; overflow: auto; padding: 12px 14px; font-size: 14px; line-height: 1.5; outline: none; text-align: justify; }
.editor-cuerpo p { margin: 0 0 10px; }
.editor-cuerpo[contenteditable=false] { background: var(--relleno-2); }
/* Menú para cambiar de UBO */
.menu-ubo { position: fixed; z-index: 200; width: 290px; max-height: min(420px, 70vh); display: flex; flex-direction: column; padding: 6px;
  background: var(--grupo); border-radius: 12px; box-shadow: 0 10px 34px rgba(0,0,0,.22), 0 0 0 0.5px var(--separador); animation: aparece .14s ease-out; }
@keyframes aparece { from { opacity: 0; transform: translateY(-4px); } }
.menu-ubo-tit { font-size: 11px; font-weight: 600; color: var(--etiqueta-2); padding: 6px 10px 4px; }
.menu-ubo-buscar { margin: 2px 4px 6px; padding: 6px 10px; border-radius: 8px; border: 0; background: var(--relleno); font: inherit; font-size: 13px; color: var(--etiqueta); }
.menu-ubo-lista { overflow: auto; display: grid; gap: 1px; }
.opcion-ubo { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 8px; cursor: pointer; }
.opcion-ubo:hover, .opcion-ubo:focus-visible { background: var(--azul); color: #fff; }
.opcion-ubo:hover small, .opcion-ubo:focus-visible small { color: rgba(255,255,255,.8); }
.opcion-ubo img { width: 26px; height: 26px; border-radius: 6px; object-fit: contain; background: #fff; flex: none; box-shadow: 0 0 0 0.5px rgba(0,0,0,.1); }
.opcion-ubo .txt { flex: 1; min-width: 0; }
.opcion-ubo strong { display: block; font-size: 13px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.opcion-ubo small { font-size: 11px; color: var(--etiqueta-2); }
/* Modo superusuario visible en el menú */
.item-lateral.modo-super { cursor: pointer; }
.item-lateral.modo-super span { flex: 1; }
.interruptor.mini { transform: scale(.72); transform-origin: right center; margin: 0; }
.insignia-super { display: inline-block; margin-left: 6px; padding: 0 6px; border-radius: 6px; font-size: 10px; font-weight: 600; background: var(--acento-suave); color: var(--acento-texto); }
.item-lateral.modo-super span { white-space: nowrap; }
.seccion-lateral.sin-titulo { margin-bottom: 10px; }
/* Menú más compacto, nombre de la UBO en dos líneas y la cuenta arriba a la derecha */
.seccion-lateral { margin-bottom: 8px; }
.seccion-lateral > span { padding-top: 2px; }
.item-lateral { height: 28px; }
.lateral-cab strong { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.2; }
.lateral-pie { border-top: 0; padding-top: 6px; text-align: center; }
.lateral-pie small { font-size: 10.5px; color: var(--etiqueta-3); }
.yo-barra { display: flex; align-items: center; gap: 10px; margin-left: 12px; padding: 3px 4px 3px 10px; border: 0; border-radius: 999px;
  background: none; color: inherit; font: inherit; cursor: pointer; text-align: right; flex: none; }
.yo-barra:hover { background: var(--relleno-2); }
.yo-barra .yo-txt strong { display: block; font-size: 13px; font-weight: 600; line-height: 1.2; }
.yo-barra .yo-txt small { font-size: 11px; color: var(--etiqueta-2); }
@media (max-width: 699px) { .yo-barra .yo-txt { display: none; } .yo-barra { padding: 2px; margin-left: 6px; } .yo-barra .avatar { width: 28px; height: 28px; } }
/* Foto de perfil */
.avatar { overflow: hidden; }
.avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cab-foto { display: flex; gap: 16px; align-items: center; margin: 4px 0 18px; }
.cab-foto h2 { font-size: 19px; margin-bottom: 6px; }

/* --- Legajo y resoluciones (celular, tablet y escritorio) -------------------------- */
.titulo-legajo { font-size: 20px; margin: 22px 0 8px; }
.form-grid { display: grid; gap: 12px; }
.form-grid .dos, .linea-res .dos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 560px) { .form-grid .dos, .linea-res .dos { grid-template-columns: 1fr; } }
.form-grid input, .form-grid select, .form-grid textarea, .linea-res input, .linea-res select { width: 100%; box-sizing: border-box; }
.form-resolucion { max-width: 720px; }
.form-resolucion > .btn-grande { margin-top: 10px; }
.fila-archivo { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.busqueda-res { position: relative; }
.busqueda-res input { width: 100%; box-sizing: border-box; font-size: 16px; }
.resultados-busqueda:not(:empty) { margin-top: 6px; border-radius: var(--r); background: var(--grupo); box-shadow: 0 4px 18px rgba(0,0,0,.12), 0 0 0 0.5px var(--separador); overflow: hidden; }
.opcion-busqueda { all: unset; box-sizing: border-box; display: flex; justify-content: space-between; gap: 10px; width: 100%; padding: 11px 14px; cursor: pointer; border-bottom: 0.5px solid var(--separador); }
.opcion-busqueda:last-child { border-bottom: 0; }
.opcion-busqueda:hover, .opcion-busqueda:focus-visible { background: var(--relleno-2); }
.lineas-res { display: grid; gap: 8px; }
.linea-res { display: grid; gap: 8px; padding: 10px 12px; border-radius: var(--r); background: var(--grupo); box-shadow: 0 0 0 0.5px var(--separador); }
.linea-cab { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.fila-legajo .etq { min-width: 0; }
.acciones-fila { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 4px; }
.btn.chico { font-size: 12.5px; padding: 0 6px; min-height: 26px; }
.sub-legajo { min-height: 0; padding-top: 6px; padding-bottom: 6px; }
.boton-fila { width: 100%; border: 0; background: none; font: inherit; color: inherit; text-align: left; align-items: flex-start; }
@media (max-width: 699px) { .form-resolucion input, .form-resolucion select, .form-resolucion textarea { font-size: 16px; } }

.linea-res input, .linea-res select, .busqueda-res input {
  min-height: 34px; padding: 5px 10px; font: inherit; color: var(--etiqueta); background: var(--fondo, var(--relleno-2)); border: 0;
  border-radius: var(--r-control); box-shadow: inset 0 0 0 0.5px var(--separador); }
.busqueda-res input { background: var(--grupo); min-height: 38px; }
.linea-res input:focus, .linea-res select:focus, .busqueda-res input:focus { outline: none; box-shadow: var(--foco); }
@media (max-width: 699px) { .linea-res input, .linea-res select, .busqueda-res input { min-height: 44px; font-size: 16px; } }
/* Ficha de legajo */
.ficha-cab { display: flex; gap: 16px; align-items: center; padding: 16px; margin-bottom: 18px; border-radius: var(--r); background: var(--grupo); box-shadow: 0 0 0 0.5px var(--separador); }
.ficha-cab .avatar.grande { width: 76px; height: 76px; font-size: 26px; }
.ficha-id { flex: 1; min-width: 0; }
.ficha-id h2 { font-size: 19px; line-height: 1.25; margin-bottom: 2px; }
.datos-ficha { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); border-radius: var(--r); overflow: hidden; background: var(--grupo); box-shadow: 0 0 0 0.5px var(--separador); }
.datos-ficha .dato { padding: 10px 14px; display: grid; gap: 2px; box-shadow: inset -0.5px -0.5px 0 var(--separador); }
.datos-ficha .dato small { font-size: 11.5px; color: var(--etiqueta-2); }
.datos-ficha .dato span { font-size: 14.5px; overflow-wrap: anywhere; }
.linea-tiempo { list-style: none; margin: 0; padding: 12px 16px; border-radius: var(--r); background: var(--grupo); box-shadow: 0 0 0 0.5px var(--separador); }
.linea-tiempo li { position: relative; padding: 0 0 12px 20px; display: grid; gap: 1px; }
.linea-tiempo li:last-child { padding-bottom: 0; }
.linea-tiempo li::before { content: ""; position: absolute; left: 3px; top: 6px; width: 9px; height: 9px; border-radius: 50%; background: var(--acento); }
.linea-tiempo li:not(:last-child)::after { content: ""; position: absolute; left: 7px; top: 16px; bottom: 0; width: 1px; background: var(--separador); }
.linea-tiempo li:not(:first-child)::before { background: var(--etiqueta-3); }
.cab-legajo { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin: 22px 0 8px; }
.cab-legajo .titulo-legajo { margin: 0; }
@media (max-width: 699px) { .ficha-cab { flex-wrap: wrap; padding: 14px; gap: 12px; } .ficha-cab .avatar.grande { width: 60px; height: 60px; font-size: 22px; } .ficha-id { flex: 1 1 calc(100% - 76px); } .ficha-id h2 { font-size: 17px; } .ficha-pdf { flex: 1 1 100%; justify-content: center; } .datos-ficha { grid-template-columns: 1fr 1fr; } }
/* Acerca de SIGROB */
.acerca { max-width: 720px; margin-inline: auto; }
.acerca-cab { text-align: center; padding: 18px 12px 22px; }
.acerca-cab img { width: 76px; height: 76px; border-radius: 18px; background: #fff; padding: 6px; box-shadow: 0 2px 12px rgba(0,0,0,.12); }
.acerca-cab h2 { font-size: 28px; margin: 12px 0 4px; letter-spacing: -.01em; }
.acerca-cab p { font-size: 15px; margin-bottom: 6px; }
.texto-acerca { padding: 14px 16px; border-radius: var(--r); background: var(--grupo); box-shadow: 0 0 0 0.5px var(--separador); }
.texto-acerca { padding: 18px 20px; }
.texto-acerca p { margin: 0 0 12px; line-height: 1.6; text-align: justify; hyphens: auto; -webkit-hyphens: auto; text-wrap: pretty; }
.texto-acerca p:last-child { margin-bottom: 0; }
.pilares { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.pilar { display: flex; gap: 12px; padding: 14px; border-radius: var(--r); background: var(--grupo); box-shadow: 0 0 0 0.5px var(--separador); }
.pilar p { margin: 4px 0 0; font-size: 13px; line-height: 1.45; }
.acerca-pie { text-align: center; margin: 24px 0 8px; font-size: 12px; }
a.lateral-pie { display: block; color: inherit; text-decoration: none; border-radius: var(--r-control); }
a.lateral-pie:hover small { color: var(--etiqueta-2); }
.acerca-cab img { display: block; margin: 0 auto; }
.pilar .ico-fila { width: 28px; height: 28px; border-radius: 7px; display: grid; place-items: center; background: var(--acento); color: #fff; flex: none; }
/* Celular: UBO en la barra superior y listas de cada pestaña */
.barra .ubo-barra { display: none; }
@media (max-width: 699px) {
  .barra:not(.con-atras) .ubo-barra { display: inline-flex; align-items: center; gap: 6px; border: 0; background: var(--grupo); color: var(--etiqueta);
    font: 600 13px/1 inherit; padding: 4px 10px 4px 4px; border-radius: 999px; box-shadow: 0 0 0 0.5px var(--separador); margin-right: auto; }
  .barra .ubo-barra img { width: 24px; height: 24px; border-radius: 6px; object-fit: contain; background: #fff; }
}
.fila-hub { min-height: 58px; }
.fila-hub .ico-fila { width: 32px; height: 32px; border-radius: 8px; }
.contador-hub { min-width: 22px; height: 22px; padding: 0 7px; border-radius: 11px; background: var(--acento); color: #fff; font-size: 12px; font-weight: 600; display: grid; place-items: center; }
.menu-ubo-pie { border-top: 0.5px solid var(--separador); margin-top: 4px; border-radius: 0 0 8px 8px; }
/* Primeros pasos de la compañía */
.primeros-pasos .barra-progreso { height: 4px; background: var(--relleno); }
.primeros-pasos .barra-progreso span { display: block; height: 100%; background: var(--verde); border-radius: 0 2px 2px 0; transition: width .3s; }
.primeros-pasos .paso { width: 100%; border: 0; background: none; font: inherit; color: inherit; text-align: left; }
.primeros-pasos .paso.hecho { opacity: .55; }
.primeros-pasos .paso.hecho::after { display: none; }
.primeros-pasos .paso.hecho .etq > div { text-decoration: line-through; }
.check-paso { width: 22px; height: 22px; border-radius: 50%; flex: none; display: grid; place-items: center; box-shadow: inset 0 0 0 1.5px var(--etiqueta-3); color: #fff; }
.paso.hecho .check-paso { background: var(--verde); box-shadow: none; }
/* Búsqueda general */
.buscar-barra { margin-left: 8px; color: var(--etiqueta-2); }
dialog.hoja.busqueda { width: min(560px, 100vw); }
.busqueda-input { width: 100%; box-sizing: border-box; font: inherit; font-size: 16px; padding: 10px 12px; border: 0; border-radius: var(--r-control); background: var(--relleno); color: var(--etiqueta); }
.busqueda-input:focus { outline: none; box-shadow: var(--foco); }
.busqueda-res { max-height: 60vh; overflow: auto; }
.busqueda-tit { font-size: 12px; font-weight: 600; color: var(--etiqueta-2); margin: 10px 4px 4px; text-transform: uppercase; letter-spacing: .03em; }
/* Bienvenida */
.paso-bienvenida { display: flex; gap: 12px; align-items: flex-start; }
.paso-bienvenida p { margin: 2px 0 0; font-size: 13.5px; }
/* Invitación a instalar */
.invitar-app { display: flex; align-items: center; gap: 10px; margin: 8px 12px 0; padding: 10px 12px; border-radius: 14px; background: var(--grupo); box-shadow: 0 2px 12px rgba(0,0,0,.08), 0 0 0 0.5px var(--separador); }
.invitar-app img { width: 38px; height: 38px; border-radius: 9px; }
.invitar-app .txt { flex: 1; min-width: 0; display: grid; gap: 2px; }
.invitar-app .txt strong { font-size: 14px; }
.invitar-app .txt small { font-size: 12px; color: var(--etiqueta-2); line-height: 1.3; }
.linea-res.faltante { background: var(--relleno-2); box-shadow: inset 0 0 0 0.5px var(--separador); opacity: .9; }
/* Leyenda de los anillos de horas */
.anillos-col { display: grid; justify-items: center; gap: 6px; }
.leyenda-anillos { font-size: 11.5px; text-align: center; max-width: 170px; }
.etq-anillo { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.etq-anillo small { font-weight: 400; color: var(--etiqueta-2); }
.etq-anillo em { font-style: normal; font-weight: 600; font-size: 12px; padding: 1px 7px; border-radius: 10px; color: #fff; background: var(--c); margin-left: auto; }
.punto-anillo { width: 14px; height: 14px; border-radius: 50%; border: 4px solid var(--c); background: color-mix(in srgb, var(--c) 20%, transparent); flex: none; }
.aviso-trim { margin: 0; font-size: 12.5px; }
/* Biblioteca de escudos */
.rejilla-escudos { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 10px; max-height: 56vh; overflow: auto; padding: 2px; }
.rejilla-escudos .escudo { all: unset; box-sizing: border-box; position: relative; display: grid; justify-items: center; gap: 4px; padding: 10px 8px; border-radius: 12px; background: var(--grupo); box-shadow: 0 0 0 0.5px var(--separador); cursor: pointer; text-align: center; }
.rejilla-escudos button.escudo:hover, .rejilla-escudos button.escudo:focus-visible { box-shadow: 0 0 0 2px var(--azul); }
.rejilla-escudos .escudo.sugerido { box-shadow: 0 0 0 2px var(--verde); }
.rejilla-escudos .escudo img { width: 64px; height: 64px; object-fit: contain; }
.rejilla-escudos .escudo small { font-weight: 600; font-size: 11.5px; }
.rejilla-escudos .escudo span { font-size: 11.5px; color: var(--etiqueta-2); line-height: 1.25; }
.rejilla-escudos .escudo .quitar { all: unset; position: absolute; top: 4px; right: 4px; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: var(--acento); color: #fff; cursor: pointer; }
.rejilla-escudos.revision .escudo { cursor: default; }
.rejilla-escudos.revision input { width: 100%; box-sizing: border-box; font: inherit; font-size: 12px; padding: 3px 6px; border: 0; border-radius: 6px; background: var(--relleno); color: var(--etiqueta); text-align: center; }
.rejilla-escudos .escudo.quitado { opacity: .35; }
.rejilla-escudos .escudo.quitado .quitar { background: var(--verde); }

/* ---- Enlaces útiles ---- */
.ico-externo { display: grid; place-items: center; }
.accesos-rapidos { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 16px; }
.acceso-rapido { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border-radius: 10px; background: var(--grupo);
  box-shadow: 0 0 0 0.5px var(--separador); color: var(--etiqueta); text-decoration: none; font-size: 13.5px; font-weight: 500; }
.acceso-rapido .ico-fila { width: 26px; height: 26px; border-radius: 7px; display: grid; place-items: center; background: var(--acento); color: #fff; }
.acceso-rapido > .ico:last-child { color: var(--etiqueta-2); }
.acceso-rapido.mas { padding: 6px 12px; color: var(--acento-texto); }
.acceso-rapido:hover { background: var(--relleno, var(--grupo)); filter: brightness(0.98); }
@media (max-width: 699px) { .accesos-rapidos { flex-wrap: nowrap; overflow-x: auto; margin-inline: -16px; padding: 2px 16px; scrollbar-width: none; } .acceso-rapido { flex: none; } }
.elegir-icono { display: flex; flex-wrap: wrap; gap: 8px; }
.elegir-icono .ico-fila { width: 38px; height: 38px; border-radius: 9px; border: 0; display: grid; place-items: center; background: var(--grupo); color: var(--etiqueta-2);
  box-shadow: 0 0 0 0.5px var(--separador); cursor: pointer; }
.elegir-icono .ico-fila.elegido { background: var(--acento); color: #fff; box-shadow: 0 0 0 2px var(--acento); }

/* ---- Asistente de redacción ---- */
.btn-ia { margin-left: auto; color: var(--acento-texto); font-weight: 600; }
.ia-panel { display: grid; gap: 10px; width: min(620px, 100%); }
.ia-etq { display: grid; gap: 6px; font-size: 13px; font-weight: 600; }
.ia-etq textarea { font: inherit; font-weight: 400; font-size: 14.5px; line-height: 1.5; width: 100%; }
.ia-resultado { background: color-mix(in srgb, var(--acento) 6%, var(--grupo)); }
.cargando-ia { animation: latido 1.2s ease-in-out infinite; }
.ia-aviso { font-size: 12px; display: flex; gap: 4px; align-items: flex-start; }
.ia-quedan { margin-left: auto; }
.girando { width: 14px; height: 14px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; display: inline-block; animation: girar 0.8s linear infinite; }
@keyframes girar { to { transform: rotate(360deg); } }

/* ---- Laboratorio de IA ---- */
.lab-resultados { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px; margin: 14px 0; }
.lab-tarjeta { display: grid; gap: 10px; align-content: start; padding: 14px; border-radius: var(--r); background: var(--grupo); box-shadow: 0 0 0 0.5px var(--separador); }
.lab-cab { display: flex; justify-content: space-between; align-items: baseline; }
.lab-texto { white-space: pre-wrap; font-size: 14px; line-height: 1.55; }
.tabla-simple { width: 100%; border-collapse: collapse; font-size: 14px; }
.tabla-simple th, .tabla-simple td { text-align: left; padding: 6px 8px; border-bottom: 0.5px solid var(--separador); }
.fila.enlace[target=_blank]::after { content: none; }

/* ---- Ajustes móviles (2.15.1) ---- */
.acciones-pagina { margin: 4px 0 14px; flex-wrap: wrap; }
.acciones-pagina .btn { flex: 1 1 auto; justify-content: center; }
.num-editable, .fila input.num-editable:not([type="checkbox"]) { width: 76px; text-align: right; padding: 6px 10px; border-radius: 8px; border: 1px solid var(--separador); background: var(--relleno-2); font: inherit; color: var(--etiqueta); flex: none; }
@media (max-width: 699px) {
  .accesos-rapidos { -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); padding-right: 40px; }
}

/* ---- Permisos de gestión ---- */
.fila-permiso { gap: 12px; }
.fila-permiso .etq small { display: block; }
.fila-permiso select.entrada { max-width: 210px; flex: none; text-align: left; border: 1px solid var(--separador); border-radius: 8px; padding: 6px 10px; background: var(--grupo); color: var(--etiqueta); }
.grupo-permisos { margin-bottom: 14px; }
.subtitulo-grupo { font-size: 13px; font-weight: 600; color: var(--etiqueta-2); margin: 0 4px 6px; text-transform: uppercase; letter-spacing: .3px; }
.avatar.chico { width: 32px; height: 32px; font-size: 12px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--relleno); color: var(--etiqueta-2); font-weight: 600; }
.permisos-resumen { display: grid; justify-items: end; gap: 3px; white-space: nowrap; font-size: 13px; }
.permisos-resumen .etiqueta { font-size: 11px; }
@media (max-width: 699px) {
  .fila-apilada-movil { flex-wrap: wrap; }
  .fila-apilada-movil select.entrada { max-width: none; flex: 1 1 100%; margin-left: 38px; }
}

/* ---- Respaldo y errores ---- */
.error-fila { display: block; padding: 10px 14px; }
.error-fila summary { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; list-style: none; }
.error-fila summary::-webkit-details-marker { display: none; }
.error-detalle { display: grid; gap: 6px; margin-top: 8px; }
.error-detalle pre { font-size: 11.5px; white-space: pre-wrap; word-break: break-word; background: var(--relleno-2); padding: 8px; border-radius: 8px; max-height: 220px; overflow: auto; margin: 0; }

/* ---- Tutorial guiado ---- */
.tour { position: fixed; inset: 0; z-index: 1000; }
.tour-velo { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.5); }
.tour-foco { position: fixed; border-radius: 12px; box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.5), 0 0 0 3px var(--acento); pointer-events: none;
  transition: top .25s ease, left .25s ease, width .25s ease, height .25s ease; }
.tour-globo { position: fixed; z-index: 1001; background: var(--grupo); color: var(--etiqueta); border-radius: 16px; padding: 16px 16px 12px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3); display: grid; gap: 10px; transition: opacity .15s ease; max-height: calc(100dvh - 24px); overflow: auto; }
.tour-globo.cambiando { opacity: 0; }
.tour-globo.centrado { left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(420px, calc(100vw - 24px)); }
.tour-globo.centrado.ancho { width: min(560px, calc(100vw - 24px)); }
.tour-globo.destacado { border: 2px solid var(--acento); }
.tour-globo p { margin: 0; font-size: 14.5px; line-height: 1.5; }
.tour-cab { display: flex; align-items: center; gap: 10px; }
.tour-cab strong { font-size: 17px; flex: 1; }
.tour-x { border: 0; background: var(--relleno); color: var(--etiqueta-2); width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; flex: none; }
.tour-puntos { display: flex; gap: 5px; justify-content: center; }
.tour-puntos i { width: 6px; height: 6px; border-radius: 50%; background: var(--relleno); }
.tour-puntos i.on { background: var(--acento); width: 16px; border-radius: 3px; }
.tour-pie { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.tour-nav { display: flex; gap: 8px; margin-left: auto; }
.tour-ocultar { font-size: 13px; padding-left: 0; }
.tour-ia { display: grid; gap: 10px; }
.tour-pasos { margin: 0; padding-left: 20px; display: grid; gap: 6px; font-size: 14px; line-height: 1.45; }
.tour-boton { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; border-radius: 8px; background: var(--relleno); color: var(--acento-texto); font-weight: 600; font-size: 13px; white-space: nowrap; }
.tour-ejemplo { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tour-ejemplo > div { display: grid; gap: 4px; align-content: start; }
.tour-ejemplo small { font-size: 11.5px; color: var(--etiqueta-2); font-weight: 600; }
.tour-ejemplo p { font-size: 13px !important; padding: 8px 10px; border-radius: 10px; }
.tour-ejemplo .antes { background: var(--relleno-2); color: var(--etiqueta-2); font-style: italic; }
.tour-ejemplo .despues { background: color-mix(in srgb, var(--acento) 10%, var(--grupo)); }
@media (max-width: 699px) {
  .tour-ejemplo { grid-template-columns: 1fr; }
  .tour-globo.centrado { top: auto; bottom: calc(12px + env(safe-area-inset-bottom)); transform: translateX(-50%); }
}

/* ---- Resoluciones (2.18) ---- */
.mini-campo { display: grid; gap: 3px; }
.mini-campo small { font-size: 11.5px; color: var(--etiqueta-2); font-weight: 600; }
.linea-res.otra-ubo { border-left: 3px solid var(--azul); }
.acciones-form { justify-content: flex-end; margin-top: 18px; position: sticky; bottom: 0; padding: 10px 0; background: linear-gradient(transparent, var(--fondo) 30%); }
.acciones-form .btn-grande { min-width: 140px; }
.segmentado.deshabilitado { opacity: .55; pointer-events: none; }
.pendiente-res .fila-pendiente { flex-wrap: wrap; gap: 8px; }
.pendiente-res .fila-pendiente input:not([type="checkbox"]) { flex: 1 1 160px; max-width: 220px; border: 1px solid var(--separador); border-radius: 8px; padding: 6px 10px; background: var(--grupo); text-align: left; color: var(--etiqueta); }
@media (max-width: 699px) {
  .acciones-form { position: static; padding: 6px 0 0; background: none; }
  .acciones-form .btn-grande { flex: 1; min-width: 0; }
  .pendiente-res .fila-pendiente input:not([type="checkbox"]) { max-width: none; flex-basis: 100%; }
}

/* ---- Insignia IA ---- */
.insignia-ia { display: inline-flex; align-items: center; gap: 2px; margin-left: 6px; padding: 1px 6px 1px 4px; border-radius: 6px; font-size: 10px; font-weight: 700; letter-spacing: .3px;
  color: #fff; background: linear-gradient(135deg, #ff375f, #bf5af2); vertical-align: middle; line-height: 15px; flex: none; }
.item-lateral > span:not(.contador):not(.insignia-ia) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.item-lateral .insignia-ia { margin-left: -2px; padding: 0 5px 0 3px; font-size: 9.5px; line-height: 15px; border-radius: 5px; }
.item-lateral[aria-current] .insignia-ia { box-shadow: 0 0 0 1.5px var(--grupo); }

/* Celular: los nombres largos se leen completos en las listas */
@media (max-width: 699px) { .lista .li-titulo { white-space: normal; overflow-wrap: anywhere; } }
/* Barra de acciones del documento emitido */
.acciones-doc { flex-wrap: wrap; margin-bottom: 16px; }
@media (max-width: 699px) { .acciones-doc .btn { flex: 1 1 auto; justify-content: center; } }