/* Activos Flow — hoja de estilos.
   Tokens verbatim de presupuesto (D26); la escala de estados de ejecucion
   reinterpretada como escala de existencia. Las piezas (.btn, .card, .conteo,
   .chip, .insig, .tabla, .arbol) salen del wireframe, que es el contrato.
   Dos disposiciones, una aplicacion (D28): telefono con barra inferior a
   menos de 900 px; escritorio con barra lateral desde 900 px. */

:root {
  --nf-azul-profundo: #0671c6; --nf-azul-oscuro: #033863; --nf-azul-xoscuro: #020C14;
  --nf-aqua: #03cdd3; --nf-aqua-texto: #067b80; --nf-blanco: #fff;
  --superficie: #fff; --superficie-alt: #f4f7fa; --superficie-pag: #eef2f6;
  --borde: #dbe3ec; --borde-suave: #e9eef3; --texto: #0f1b26; --texto-suave: #5a6b7b;
  --exist-normal: var(--nf-aqua); --exist-normal-bg: #e6f8f8;
  --exist-atencion: #e8a33d; --exist-atencion-bg: #fdf3e3; --exist-atencion-texto: #8a5a12;
  --exist-problema: #d64550; --exist-problema-bg: #fbe9eb; --exist-problema-texto: #a2303a;
  --exist-sin-datos: #c3ccd6;
  --fuente-titulo: 'Kanit', system-ui, sans-serif; --fuente-texto: 'Nunito', system-ui, sans-serif;
  --txt-cifra-hero: 2.5rem; --txt-titulo: 1.5rem; --txt-subtitulo: 1.125rem;
  --txt-cuerpo: .9375rem; --txt-tabla: .875rem; --txt-etiqueta: .75rem;
  --e1: 4px; --e2: 8px; --e3: 12px; --e4: 16px; --e5: 24px; --e6: 32px; --e7: 48px; --e8: 64px;
  --radio: 10px; --sombra: 0 1px 2px rgba(3,56,99,.06), 0 4px 16px rgba(3,56,99,.06);
  --toque: 44px; --foto-campo: 96px; --foto-lista: 64px;
  /* Tokens SEMANTICOS, no de marca: son los que cambian con el tema. Un azul
     de marca puesto directo en un color de texto se vuelve ilegible en
     oscuro, y el token de marca no se puede tocar porque tambien es fondo. */
  --titulo: var(--nf-azul-oscuro); --enlace: var(--nf-azul-profundo); --codigo: var(--nf-aqua-texto);
  --aviso-bg: #eef5fc; --aviso-borde: #cfe1f3; --sel-bg: #eef5fc;
  --lateral: 220px; --inferior: 72px;
}
:root[data-tema="oscuro"] {
  --superficie: var(--nf-azul-xoscuro); --superficie-alt: #0a1826; --superficie-pag: #06111c;
  --borde: #16293b; --borde-suave: #12212f; --texto: #e8eef4; --texto-suave: #94a6b8;
  --exist-normal-bg: #0b2b2d; --exist-atencion-bg: #2e2210; --exist-problema-bg: #33161a;
  --exist-atencion-texto: #f0bd6a; --exist-problema-texto: #f28b95;
  --titulo: #e8eef4; --enlace: #6db9f2; --codigo: #46d7dc;
  --aviso-bg: #0b1e30; --aviso-borde: #1c3a55; --sel-bg: #10293f;
  --sombra: 0 1px 2px rgba(0,0,0,.4), 0 4px 16px rgba(0,0,0,.35);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--superficie-pag); color: var(--texto); font-family: var(--fuente-texto); font-size: var(--txt-cuerpo); line-height: 1.4; min-height: 100dvh; }
h1, h2, h3, .k { font-family: var(--fuente-titulo); font-weight: 600; color: var(--titulo); margin: 0; }
a { color: var(--enlace); }
button, input, select, textarea { font: inherit; }
[hidden] { display: none !important; }
.num { font-variant-numeric: tabular-nums; text-align: right; }
.suave-t { color: var(--texto-suave); font-size: var(--txt-etiqueta); }
.enlace { background: none; border: 0; padding: 0; color: inherit; text-decoration: underline; cursor: pointer; }
.visualmente-oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* --- Entrada --- */
.entrada { min-height: 100dvh; display: flex; align-items: center; justify-content: center; padding: var(--e5); }
.entrada-caja { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); box-shadow: var(--sombra); padding: var(--e6); max-width: 420px; text-align: center; }
.entrada-caja h1 { font-size: var(--txt-titulo); margin-top: var(--e3); }
.entrada-caja p { color: var(--texto-suave); }

/* --- Disposicion --- */
.aplicacion { min-height: 100dvh; display: flex; flex-direction: column; }
.cabecera { background: var(--superficie); border-bottom: 1px solid var(--borde); padding: 14px 16px 10px; display: flex; justify-content: space-between; align-items: baseline; gap: 8px; position: sticky; top: 0; z-index: 5; }
.cabecera h2 { font-size: var(--txt-subtitulo); }
.cabecera small { color: var(--texto-suave); font-size: var(--txt-etiqueta); display: block; }
.cabecera-texto { margin-right: auto; }
.cabecera-acciones { display: flex; gap: 8px; flex: none; }
.contenido { flex: 1; padding: 12px 12px calc(var(--inferior) + 24px); display: flex; flex-direction: column; gap: 10px; width: 100%; }
.lateral { display: none; }
.inferior { position: fixed; left: 0; right: 0; bottom: 0; height: var(--inferior); background: var(--superficie); border-top: 1px solid var(--borde); display: grid; grid-template-columns: 1fr 1fr 1.3fr 1fr 1fr; align-items: center; text-align: center; font-size: 11px; color: var(--texto-suave); padding-bottom: env(safe-area-inset-bottom); z-index: 6; }
.inferior a { color: inherit; text-decoration: none; min-height: var(--toque); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
.inferior a.act { color: var(--nf-azul-profundo); font-weight: 800; }
.inferior .ico { width: 22px; height: 22px; border: 2px solid currentColor; border-radius: 6px; display: block; }
.inferior .ico-inicio { border-radius: 6px 6px 3px 3px; }
.inferior .ico-buscar { border-radius: 50%; }
.inferior .ico-jornada { border-radius: 4px; }
.inferior .ico-mas { border-style: dotted; }
.inferior .cam { width: 56px; height: 56px; border-radius: 50%; background: var(--nf-azul-profundo); color: #fff; display: flex; align-items: center; justify-content: center; margin-top: -22px; box-shadow: var(--sombra); font-weight: 800; font-size: 11px; font-style: normal; }

@media (min-width: 900px) {
  .aplicacion { margin-left: var(--lateral); }
  .lateral { display: flex; flex-direction: column; position: fixed; top: 0; bottom: 0; left: 0; width: var(--lateral); background: var(--nf-azul-oscuro); color: #dbe8f5; padding: 14px 0; z-index: 7; }
  .lateral-marca { font-family: var(--fuente-titulo); color: #fff; font-size: 15px; padding: 0 16px 14px; border-bottom: 1px solid rgba(255,255,255,.12); margin-bottom: 8px; }
  .lateral-menu { overflow: auto; }
  .lateral-menu .seccion { font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: #7f9cb6; padding: 14px 16px 6px; }
  .lateral-menu a { display: flex; align-items: center; gap: 11px; padding: 9px 16px; color: #cfe1f3; text-decoration: none; }
  .lateral-menu a .ico { flex: none; }
  .lateral-menu a.act { background: rgba(255,255,255,.12); color: #fff; font-weight: 800; border-left: 3px solid var(--acento, var(--nf-aqua)); }
  .lateral-marca img { display: block; max-width: 100%; max-height: 40px; margin-bottom: 8px; }
  .lateral-pie { margin-top: auto; padding: 12px 16px; border-top: 1px solid rgba(255,255,255,.12); font-size: 11px; color: #9fb8cf; }
  .lateral-pie .enlace { color: #cfe1f3; }
  .inferior { display: none; }
  .cabecera { height: 56px; padding: 0 20px; align-items: center; }
  .cabecera h2 { display: inline; }
  .cabecera small { display: inline; margin-left: 10px; font-weight: 400; }
  .contenido { padding: 16px 20px 32px; gap: 12px; }
  .solo-telefono { display: none !important; }
  .flow-panel { position: fixed; top: 0; right: 0; bottom: 0; width: 380px; border-left: 1px solid var(--borde); box-shadow: var(--sombra); z-index: 6; }
  body.flow-abierto .aplicacion { margin-right: 380px; }
}
.solo-escritorio { display: none; }
@media (min-width: 900px) { .solo-escritorio { display: inline-flex; } }

/* Flow (content spec §12): la conversacion, igual en el panel y en la vista. */
.flow-panel { background: var(--superficie); display: flex; flex-direction: column; }
.flow-caja { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.flow-cabecera { display: flex; justify-content: space-between; align-items: center; padding: 12px 14px; border-bottom: 1px solid var(--borde); }
.flow-mensajes { flex: 1; overflow-y: auto; padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; min-height: 240px; }
.flow-burbuja { max-width: 92%; padding: 10px 12px; border-radius: 12px; font-size: 13.5px; line-height: 1.45; }
.flow-burbuja.persona { align-self: flex-end; background: var(--nf-azul-profundo); color: #fff; }
.flow-burbuja.flow { align-self: flex-start; background: var(--superficie-alt); }
.flow-burbuja.flow.pensando { color: var(--texto-suave); font-style: italic; }
.flow-burbuja.flow.error { background: var(--exist-problema-bg); color: var(--exist-problema-texto); }
.flow-burbuja p { margin: 0 0 6px; } .flow-burbuja p:last-child { margin-bottom: 0; }
.flow-burbuja table { border-collapse: collapse; font-size: 12.5px; margin: 6px 0; } .flow-burbuja td, .flow-burbuja th { border: 1px solid var(--borde); padding: 3px 6px; }
.flow-burbuja ul, .flow-burbuja ol { margin: 4px 0; padding-left: 18px; }
.flow-bienvenida { padding: 4px 0; } .flow-bienvenida b { font-family: var(--fuente-titulo); font-size: 15px; display: block; margin-bottom: 4px; }
.flow-sugerencias { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.flow-sugerencias .btn { justify-content: flex-start; text-align: left; }
.flow-entrada { display: flex; gap: 8px; padding: 10px 14px; border-top: 1px solid var(--borde); }
.flow-entrada textarea { flex: 1; resize: none; padding: 8px 10px; border: 1px solid var(--borde); border-radius: 9px; font: inherit; min-height: 44px; }
.guia h1 { font-size: 20px; margin: 0 0 12px; } .guia h2 { font-size: 15px; margin: 18px 0 6px; } .guia p, .guia li { font-size: 13.5px; line-height: 1.5; } .guia code { background: var(--superficie-alt); padding: 1px 4px; border-radius: 4px; }
.flow-pie { padding: 6px 14px 10px; font-size: 11px; color: var(--texto-suave); text-align: center; }
@media (max-width: 899px) { .solo-escritorio { display: none !important; } }

/* --- Piezas (del wireframe) --- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-weight: 700; padding: 9px 16px; border-radius: var(--radio); border: 1px solid transparent; background: var(--nf-azul-profundo); color: #fff; min-height: var(--toque); font-size: var(--txt-cuerpo); cursor: pointer; text-decoration: none; }
.btn.suave { background: var(--superficie); color: var(--titulo); border-color: var(--borde); }
.btn.peligro { background: var(--superficie); color: var(--exist-problema-texto); border-color: var(--borde); }
.btn.ancho { width: 100%; }
.btn.grande { min-height: 64px; font-size: var(--txt-subtitulo); justify-content: flex-start; padding-left: 18px; }
.btn.chico { min-height: 36px; padding: 6px 12px; font-size: var(--txt-tabla); }
.btn:disabled { opacity: .55; cursor: default; }
@media (min-width: 900px) { .btn { min-height: 36px; padding: 6px 14px; font-size: 13px; } .btn.grande { min-height: 48px; } }
.card { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); box-shadow: var(--sombra); padding: 14px; }
.card.vencida { border-left: 4px solid var(--exist-problema); }
.card.por-vencer { border-left: 4px solid var(--exist-atencion); }
.foto { background: #c9d3dd; border-radius: 8px; flex: none; display: flex; align-items: center; justify-content: center; color: #5a6b7b; font-size: 10px; font-weight: 800; letter-spacing: .04em; overflow: hidden; }
.foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.foto.sin { background: var(--superficie-alt); border: 1px dashed var(--borde); }
.foto.sin::before { content: "SIN FOTO"; }
.cod { font-weight: 800; letter-spacing: .04em; color: var(--codigo); font-size: var(--txt-etiqueta); }
.insig { display: inline-block; font-size: 10px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; padding: 2px 7px; border-radius: 5px; background: var(--superficie-alt); color: var(--texto-suave); }
.insig.ok { background: var(--exist-normal-bg); color: var(--codigo); }
.insig.at { background: var(--exist-atencion-bg); color: var(--exist-atencion-texto); }
.insig.pr { background: var(--exist-problema-bg); color: var(--exist-problema-texto); }
.insig.az { background: var(--sel-bg); color: var(--enlace); }
.aviso { background: var(--aviso-bg); border: 1px solid var(--aviso-borde); color: var(--titulo); border-radius: var(--radio); padding: 10px 14px; font-size: 12.5px; }
.aviso.at { background: var(--exist-atencion-bg); border-color: #f0d3a3; }
.aviso.pr { background: var(--exist-problema-bg); border-color: #f0b8bd; color: var(--exist-problema-texto); }
.hero { font-family: var(--fuente-titulo); font-size: var(--txt-cifra-hero); line-height: 1; color: var(--titulo); }
.fila { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--borde-suave); min-height: var(--toque); }
.fila:last-child { border-bottom: 0; }
.fila.chica { min-height: 0; padding: 6px 0; font-size: 13px; }
.chip { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--borde); border-radius: 99px; padding: 4px 12px; font-size: var(--txt-tabla); background: var(--superficie); color: var(--texto); cursor: pointer; min-height: 36px; }
.chip b { font-variant-numeric: tabular-nums; }
.chip.act { background: var(--sel-bg); border-color: var(--enlace); font-weight: 800; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.vacio { border: 1px dashed var(--borde); border-radius: var(--radio); padding: 24px; text-align: center; color: var(--texto-suave); }
.vacio b { display: block; color: var(--texto); font-family: var(--fuente-titulo); font-size: var(--txt-subtitulo); }
.progreso { height: 6px; background: var(--borde); border-radius: 99px; overflow: hidden; }
.progreso i { display: block; height: 100%; background: var(--exist-normal); transition: width .2s; }
.campo { display: flex; flex-direction: column; gap: 4px; }
.campo label { font-size: var(--txt-etiqueta); color: var(--texto-suave); font-weight: 700; }
.campo input, .campo select, .campo textarea { padding: 10px 12px; border: 1px solid var(--borde); border-radius: 9px; background: var(--superficie); color: var(--texto); min-height: var(--toque); }
.campo textarea { min-height: 80px; }
.formulario { display: flex; flex-direction: column; gap: 12px; }
.ayuda { font-size: var(--txt-etiqueta); color: var(--texto-suave); }

/* --- Listas de articulos (telefono) --- */
.item-fila { display: flex; gap: 12px; align-items: center; background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); padding: 8px; min-height: 80px; text-decoration: none; color: inherit; }
.item-fila .foto { width: var(--foto-lista); height: var(--foto-lista); }
.item-fila .info { flex: 1; min-width: 0; }
.item-fila .n { font-weight: 700; line-height: 1.2; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.item-fila .cant { font-family: var(--fuente-titulo); font-size: var(--txt-titulo); font-variant-numeric: tabular-nums; text-align: right; min-width: 56px; line-height: 1; }
.item-fila .cant small { display: block; font-family: var(--fuente-texto); font-size: 10px; color: var(--texto-suave); font-weight: 700; }

/* --- Fila de conteo: la pieza mas importante (D10b, D24) --- */
.conteo { display: flex; gap: 12px; align-items: center; background: var(--superficie); border: 2px solid var(--borde); border-radius: var(--radio); padding: 8px; min-height: 112px; position: relative; cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent; }
.conteo .foto { width: var(--foto-campo); height: var(--foto-campo); }
.conteo .info { flex: 1; min-width: 0; }
.conteo .info .n { font-weight: 700; line-height: 1.2; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.conteo .cant { font-family: var(--fuente-titulo); font-size: var(--txt-titulo); font-variant-numeric: tabular-nums; text-align: right; min-width: 64px; line-height: 1; padding: 8px 4px; border-radius: 8px; }
.conteo .cant small { display: block; font-family: var(--fuente-texto); font-size: 10px; color: var(--texto-suave); font-weight: 700; }
.conteo.ok { border-color: var(--exist-normal); background: var(--exist-normal-bg); }
.conteo.dif { border-color: var(--exist-atencion); background: var(--exist-atencion-bg); }
.conteo.editando { border-color: var(--nf-azul-profundo); }
.conteo .marca { position: absolute; right: 12px; top: 8px; font-size: 11px; font-weight: 800; }
.conteo.ok .marca { color: var(--codigo); }
.conteo.dif .marca { color: var(--exist-atencion-texto); }
.teclado { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); padding: 8px; margin-top: 6px; }
.teclado button { display: flex; align-items: center; justify-content: center; height: 36px; background: var(--superficie-alt); border: 0; border-radius: 8px; font-weight: 700; color: var(--texto); cursor: pointer; }
.teclado button.ok { background: var(--nf-azul-profundo); color: #fff; }
.pie-fijo { position: sticky; bottom: calc(var(--inferior) + 12px); z-index: 4; }
@media (min-width: 900px) { .pie-fijo { bottom: 12px; } }

/* --- Camara (M2) --- */
.camara { flex: 1; min-height: 60dvh; background: #1b2733; position: relative; border-radius: var(--radio); overflow: hidden; color: #fff; }
.camara video { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.camara .recuadro { position: absolute; left: 50%; top: 38%; width: 200px; height: 200px; transform: translate(-50%, -50%); border: 3px solid var(--nf-aqua); border-radius: 14px; }
.camara .ayuda-cam { position: absolute; left: 0; right: 0; top: calc(38% + 116px); text-align: center; font-size: 13px; color: #cfe1f3; padding: 0 16px; }
.hoja { position: absolute; left: 0; right: 0; bottom: 0; background: var(--superficie); border-radius: 18px 18px 0 0; padding: 10px 14px 14px; box-shadow: 0 -8px 30px rgba(0,0,0,.25); color: var(--texto); }
.hoja::before { content: ""; display: block; width: 44px; height: 4px; background: var(--borde); border-radius: 99px; margin: 0 auto 10px; }

/* --- Escritorio --- */
.cifras { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (min-width: 900px) { .cifras { grid-template-columns: repeat(4, 1fr); } }
.cifras .card { padding: 12px 14px; }
.cifras .hero { font-size: 2rem; }
.dos { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 900px) { .dos { grid-template-columns: 1fr 1fr; } .dos.ficha { grid-template-columns: 360px 1fr; } }
.grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
@media (min-width: 700px) { .grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1100px) { .grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); } }
.grid .card { padding: 8px; text-decoration: none; color: inherit; display: block; }
.grid .foto { width: 100%; height: 92px; margin-bottom: 6px; }
.tabla { width: 100%; border-collapse: collapse; font-size: var(--txt-tabla); background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); }
.tabla th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--texto-suave); padding: 6px 10px; border-bottom: 1px solid var(--borde); background: var(--superficie-alt); }
.tabla td { padding: 7px 10px; border-bottom: 1px solid var(--borde-suave); }
.tabla td.num, .tabla th.num { text-align: right; font-variant-numeric: tabular-nums; }
.tabla td.centro, .tabla th.centro { text-align: center; }
.tabla td.cod { font-size: var(--txt-tabla); }
/* Los campos editables de una tabla: el mismo borde y radio que los del
   formulario de abajo, mas bajos para que la fila no crezca. */
.tabla input:not([type=checkbox]):not([type=color]), .tabla select { padding: 6px 10px; border: 1px solid var(--borde); border-radius: 9px; background: var(--superficie); color: var(--texto); min-height: 36px; }
.tabla tr:last-child td { border-bottom: 0; }
.pest { display: flex; gap: 4px; border-bottom: 1px solid var(--borde); overflow-x: auto; }
.pest button { padding: 8px 12px; color: var(--texto-suave); background: none; border: 0; border-bottom: 2px solid transparent; cursor: pointer; white-space: nowrap; }
.pest button.act { color: var(--titulo); font-weight: 800; border-bottom-color: var(--enlace); }
.filtros { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.filtros input:not([type=checkbox]), .filtros select { padding: 8px 10px; border: 1px solid var(--borde); border-radius: 9px; background: var(--superficie); color: var(--texto); min-height: 40px; }
.arbol { list-style: none; margin: 0; padding: 0; }
.arbol li { padding: 12px 16px; border-bottom: 1px solid var(--borde-suave); display: flex; justify-content: space-between; align-items: center; gap: 8px; min-height: var(--toque); }
.arbol li:last-child { border-bottom: 0; }
.arbol li.h { padding-left: 40px; }
.arbol li.hh { padding-left: 64px; }
.arbol .nombre { display: block; }
.arbol .meta { display: block; margin-top: 2px; }
.arbol .der { display: flex; gap: 6px; align-items: center; }

/* --- Avisos flotantes --- */
.avisos { position: fixed; left: 12px; right: 12px; bottom: calc(var(--inferior) + 12px); z-index: 20; display: flex; flex-direction: column; gap: 8px; pointer-events: none; }
@media (min-width: 900px) { .avisos { left: auto; right: 20px; bottom: 20px; width: 360px; } }
.avisos .aviso { box-shadow: var(--sombra); pointer-events: auto; }

/* --- Dialogo --- */
dialog.dialogo { border: 1px solid var(--borde); border-radius: var(--radio); padding: 0; max-width: 420px; width: calc(100% - 32px); background: var(--superficie); color: var(--texto); }
dialog.dialogo::backdrop { background: rgba(3,56,99,.35); }
dialog.dialogo .cuerpo-d { padding: 20px; display: flex; flex-direction: column; gap: 12px; }
dialog.dialogo .botones { display: flex; gap: 8px; justify-content: flex-end; }
.qr-caja { display: flex; justify-content: center; padding: 8px; background: #fff; border-radius: var(--radio); }
.qr-caja svg { width: 240px; height: 240px; }

/* --- Configuracion: pestañas en alternador (D-4), personas (D-5) y roles --- */
.pestanas { display: flex; flex-wrap: wrap; gap: 6px; }
.pestanas button { border: 1px solid var(--borde); background: var(--superficie); border-radius: 99px; padding: 6px 14px; font-weight: 700; font-size: var(--txt-etiqueta); color: var(--titulo); cursor: pointer; }
.pestanas button:hover { border-color: var(--enlace); }
.pestanas button[aria-selected="true"] { background: var(--nf-azul-oscuro); border-color: var(--nf-azul-oscuro); color: #fff; }
.sub + .sub { margin-top: 28px; }
.sub > h3 { font-size: var(--txt-subtitulo); color: var(--titulo); margin-bottom: 8px; }
.fila-cabecera { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 8px; }
.fila-cabecera > .btn { flex: none; white-space: nowrap; }
.plegado { margin-top: 16px; border-top: 1px solid var(--borde); padding-top: 12px; }
.plegado > summary { cursor: pointer; font-weight: 700; color: var(--texto-suave); }
.plegado > summary:hover { color: var(--enlace); }
dialog.dialogo.ancho { max-width: 560px; }
.lista-casillas { border: 1px solid var(--borde); border-radius: 9px; padding: 8px 12px 10px; margin: 0; }
.lista-casillas legend { font-weight: 700; padding: 0 4px; }
.lc-columnas { columns: 2 180px; column-gap: 16px; }
.casilla { display: flex; gap: 8px; align-items: center; padding: 4px 0; break-inside: avoid; }
.dos-paneles { display: grid; grid-template-columns: 1fr; gap: 16px; align-items: start; margin-top: 8px; }
@media (min-width: 900px) { .dos-paneles { grid-template-columns: 240px 1fr; } }
.lista-roles { display: flex; flex-direction: column; gap: 6px; align-items: stretch; }
.item-rol { display: flex; flex-direction: column; gap: 2px; text-align: left; background: var(--superficie); border: 1px solid var(--borde); border-radius: 9px; padding: 8px 12px; color: var(--texto); cursor: pointer; }
.item-rol.act { border-color: var(--enlace); box-shadow: inset 3px 0 0 var(--nf-aqua); }