/* ═══════════════════════════════════════════════════════════════════════════════════════════
   MAIA · el estilo de la pantalla interna.

   🔴 SALIÓ DEL LAYOUT EL 02-09-2026, y la decisión tiene historia. Estaba embebido con un motivo
      escrito: «la página se llena en la calle, desde un teléfono con red mala — un CSS que tarda
      deja el formulario ilegible». Ese comentario lo escribí yo el 29-08 y lo cité después como si
      fuera una decisión ajena y medida. La premisa de fondo —el vendedor está en la calle, entre
      visitas— sí es del proyecto; el «con red mala» lo agregué yo y NADIE lo midió.

   ⭐ Con el número a la vista la decisión se dio vuelta: eran 10.168 bytes viajando en CADA carga
      de CADA pantalla. Ahora se descargan una vez y quedan cacheados; el costo es un viaje extra
      en la primera carga de `/alta`, y eso se aceptó a sabiendas.

   ⚠️ Lo propio de una pantalla NO va acá: va en su sección `Estilos`. Este archivo es el shell.
   ═══════════════════════════════════════════════════════════════════════════════════════════ */

:root {
    --tinta: #16202e;
    --tinta-2: #3d4d63;
    --tinta-3: #6b7a8f;
    --verde: #0f5132;
    --linea: #d7dfe7;
    --linea-2: #eaeff4;
    --suave: #f7f9fb;
    --aviso: #b45309;
    --aviso-fondo: #fdf6ec;
    --ok: #14663c;
    --ok-fondo: #eef7f1;
    --mal: #b3261e;
    --mal-fondo: #fdf0ef;

    /* ── LA BARRA, que es verde hondo y tiene su propia familia ────────────────────────────
       ⚠️ Los velos venían en SEIS alfas distintos —.10 .12 .14 .16 .18 .22— porque nadie los
       comparó. Se reducen a tres: la diferencia entre .12 y .14 no la ve nadie, y seis nombres
       para lo mismo es cómo empieza la próxima deriva. */
    --barra: #0b3d26;
    --barra-texto: #cfe6da;
    --barra-tenue: #a9cdba;
    --barra-suave: #b9e8cf;
    --barra-foco: #7ee2a8;
    --barra-punto: #ffd166;
    --velo-suave: rgba(255,255,255,.10);
    --velo: rgba(255,255,255,.14);
    --velo-fuerte: rgba(255,255,255,.22);

    /* ── Papeles y sombras ─────────────────────────────────────────────────────────────── */
    --papel: #fff;
    --suave-2: #f2f5f8;
    --verde-suave: #eaf6ef;
    --sombra: rgba(0,0,0,.28);
    --velo-fondo: rgba(15,32,46,.42);

    /* ⚠️ `--acento` se REFERENCIABA sin estar declarado: `var(--acento, #0f5c8c)` usaba siempre
       el respaldo, y la hoja parecía tener un token que no existía. Ahora existe. */
    --acento: #0f5c8c;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    padding: 16px;
    background: var(--suave);
    color: var(--tinta);
    font-family: "Segoe UI", -apple-system, Roboto, Arial, sans-serif;
    font-size: 16px;
    line-height: 1.45;
}

/* ⭐⭐ UN SOLO ANCHO PARA TODAS LAS PANTALLAS. Antes cada página declaraba el suyo y había
   SEIS distintos —34, 44, 46, 48 y 50rem—: nadie los había comparado, y navegar entre
   pantallas hacía saltar la caja. El pie, además, estaba clavado en 34rem, así que en nueve
   de las trece quedaba más angosto que el contenido. */
.ancho {
    width: 100%;
    max-width: 96rem;
    margin: 0 auto;
    padding: 0 clamp(10px, 1.6vw, 22px);
}

.hoja {
    background: var(--papel);
    border: 1px solid var(--linea);
    border-radius: 10px;
    margin: 14px auto 0;
    overflow: hidden;
}

main { padding: 18px 20px 24px; }

/* 🔴🔴 EL ANCHO POR OMISIÓN ES SUELTO, Y HASTA EL 04-09-2026 ERA AL REVÉS.

   La regla decía `main p, main li, main dd, main .ayuda { max-width: 68ch }` — la medida de
   lectura para TODO—. Contado ese día: de 193 párrafos del producto, **26 son prosa de lectura**
   (13%). O sea que la regla acotaba al 87% para proteger al 13%, y cada párrafo nuevo nacía
   angosto sin que nadie lo decidiera.

   ⚠️ Y la unidad empeoraba el reparto: `ch` mide el '0' EN EL CUERPO DEL PROPIO ELEMENTO, así que
   un `<p>` a 16px cortaba en ~544px y `.ayuda` —a .85rem— en ~462px, dentro de una tarjeta de
   ~1300. CUANTO MÁS CHICO EL TEXTO, MÁS ANGOSTA LA COLUMNA.

   ⭐ Ahora el valor por omisión es el caso común —una nota de una o dos frases arriba de una
   tabla, que se CONSULTA— y la medida de lectura se pide explícitamente con `.lectura`, en las
   tres pantallas que son PROSA: la política de privacidad, la eliminación de datos y el manual.
   Ahí sí un párrafo a 1300px haría perder el renglón.

   ⚠️ La distinción NO es el tamaño de la letra: es si el texto se LEE o se CONSULTA. */
main p, main li, main dd { max-width: none; }

main.lectura p, main.lectura li, main.lectura dd { max-width: 68ch; }

main table p, main table li, main td, main th { max-width: none; }

h1 { font-size: 1.15rem; margin: 0 0 4px; }

p { margin: 0 0 12px; }

label { display: block; font-weight: 600; font-size: .92rem; margin: 14px 0 4px; }
label .opcional { font-weight: 400; color: var(--tinta-3); }

input[type=text], input[type=email], input[type=tel], input[type=password] {
    width: 100%;
    padding: 11px 12px;
    font-size: 1rem;
    font-family: inherit;
    color: var(--tinta);
    background: var(--papel);
    border: 1px solid var(--linea);
    border-radius: 7px;
}

input:focus { outline: 2px solid var(--verde); outline-offset: 1px; }

.ayuda { font-size: .85rem; color: var(--tinta-3); margin: 4px 0 0; }

/* ⭐ La acción de una pantalla de lista: crear lo que la lista muestra. Va como enlace y no como
   `button` porque navega — el `button` de acá abajo ocupa el ancho entero, que es lo que quiere un
   formulario y no una barra de acciones. */
.acciones { margin: 10px 0 0; }
.acciones a {
    display: inline-block;
    padding: 8px 14px;
    background: var(--verde);
    color: var(--papel);
    border-radius: 6px;
    font-weight: 600;
    font-size: .9rem;
    text-decoration: none;
}
.acciones a:hover { filter: brightness(1.08); text-decoration: none; }

button {
    width: 100%;
    margin-top: 20px;
    padding: 13px;
    font-size: 1rem;
    font-family: inherit;
    font-weight: 600;
    color: var(--papel);
    background: var(--verde);
    border: 0;
    border-radius: 7px;
    cursor: pointer;
}
/* ═══════════════════════════════════════════════════════════════════════════════════════════
   🔴🔴 EL BOTÓN CON CLASE ES EN LÍNEA. EL BOTÓN SIN CLASE CIERRA UN FORMULARIO.

   Tres veces en el mismo día quedó un botón al 100% donde tenía que ir en línea —`.peligro`,
   `.acciones-fila`, `form.roles`—, y las tres el arreglo fue agregar el contenedor a una lista
   que yo mantenía a mano. La tercera vez la vio el usuario **después** de que yo diera la
   pantalla por arreglada.

   ⭐ Contado el 04-09-2026: de 55 botones, **22 no tienen clase** —«Crear», «Guardar», «Entrar»:
   los que cierran un formulario y sí quieren el ancho completo— y **33 tienen clase** y son todos
   de fila. O sea que la distinción ya estaba escrita en el HTML; sólo faltaba usarla.

   ⚠️ Y a los dos botones sin clase que SÍ estaban en fila —«Ver» del filtro y el «✕» del manual—
   se les dio una: si un botón no es la acción principal de su formulario, que lo diga.
   ═══════════════════════════════════════════════════════════════════════════════════════════ */
button[class] { width: auto; margin-top: 0; }


.caja {
    border-radius: 7px;
    padding: 11px 13px;
    margin: 0 0 14px;
    font-size: .92rem;
    border-left: 4px solid;
}

.caja > :last-child { margin-bottom: 0; }
.caja .tg { display: block; font-size: .72rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; margin-bottom: 4px; }

.c-aviso { background: var(--aviso-fondo); border-color: var(--aviso); }
.c-aviso .tg { color: var(--aviso); }
.c-ok { background: var(--ok-fondo); border-color: var(--ok); }
.c-ok .tg { color: var(--ok); }
.c-mal { background: var(--mal-fondo); border-color: var(--mal); }
.c-mal .tg { color: var(--mal); }

ul.gente { list-style: none; padding: 0; margin: 6px 0 0; }
ul.gente li { padding: 7px 0; border-top: 1px solid var(--linea-2); }
ul.gente li:first-child { border-top: 0; }
ul.gente .quien { font-weight: 600; }
ul.gente .senas { font-size: .87rem; color: var(--tinta-2); }

.marca-otra { display: flex; gap: 9px; align-items: flex-start; margin-top: 12px; font-size: .93rem; }
.marca-otra input { margin-top: 3px; width: 17px; height: 17px; accent-color: var(--verde); }

.regla {
    margin: 18px 0 0;
    padding-top: 12px;
    border-top: 1px solid var(--linea-2);
    font-size: .86rem;
    color: var(--tinta-3);
}

footer { margin: 16px auto 22px; font-size: .78rem; color: var(--tinta-3); text-align: center; }

/* ═══ LA BARRA ══════════════════════════════════════════════════════════════════════
   A todo el ancho, con la marca, la navegación, el buscador, la ayuda y la salida.
   Antes eran dos franjas —una cabecera verde y un menú más oscuro— y el menú ENVOLVÍA a dos
   filas: nueve ítems no entraban. Los cuatro de administración pasaron a un desplegable. */
.barra { background: var(--verde); color: var(--papel); }
.barra .dentro { display: flex; align-items: center; gap: 4px; min-height: 52px; flex-wrap: wrap; }

.barra .marca { display: flex; align-items: center; gap: 9px; color: var(--papel); text-decoration: none; margin-right: 10px; }
.barra .marca img { width: 28px; height: 28px; border-radius: 6px; display: block; }
/* ⭐ Sólo el ícono: la palabra y el nombre de pantalla salieron el 02-09-2026. */

.barra a, .barra button, .barra summary {
    font: inherit; font-size: .87rem; font-weight: 500; color: var(--barra-texto);
    background: none; border: 0; border-radius: 6px; text-decoration: none; cursor: pointer;
    padding: 7px 10px; display: block; width: auto; margin: 0;
}
.barra a:hover, .barra button:hover, .barra summary:hover { color: var(--papel); background: var(--velo-suave); }
.barra a.aqui { color: var(--papel); font-weight: 650; background: var(--velo); }
.barra .separa { flex: 1; }
.barra form { display: flex; margin: 0; }

/* ⭐ El desplegable de administración es un `<details>` NATIVO: en un sitio SSR no hay
   JavaScript de framework que lo abra, y agregar uno para un menú sería inventar un
   circuito para algo que el navegador ya hace. */
.barra details { position: relative; }
.barra details > summary { list-style: none; white-space: nowrap; }
.barra details > summary::-webkit-details-marker { display: none; }
.barra details > summary::after { content: " ▾"; opacity: .7; }
.barra details[open] > summary { color: var(--papel); background: var(--velo-suave); }
.barra details .caen {
    position: absolute; top: calc(100% + 4px); left: 0; z-index: 20; min-width: 12rem;
    background: var(--barra); border: 1px solid var(--velo); border-radius: 8px;
    padding: 5px; box-shadow: 0 10px 24px var(--sombra);
}

.barra .buscar input {
    font: inherit; font-size: .85rem; width: 12rem; padding: 6px 9px; margin: 0;
    border: 1px solid var(--velo-fuerte); border-radius: 6px;
    background: var(--velo-suave); color: var(--papel);
}
.barra .buscar input::placeholder { color: var(--barra-tenue); }
.barra .buscar input:focus { outline: 2px solid var(--barra-foco); outline-offset: 1px; }

.barra .interrogacion { font-weight: 700; width: 30px; text-align: center; padding: 7px 0; }

/* 🔔 La campanita, y el punto que dice que hay algo esperando.
   ⭐ UN PUNTO Y NO UN NÚMERO: el número obliga a leerlo y no cambia lo que hay que hacer. Y el
      punto va PEGADO a la campana, no centrado sobre ella: sobre el ícono taparía justo la parte
      que se reconoce de un vistazo. */
.barra .campana { position: relative; padding: 7px 8px; }
.barra .campana .punto { position: absolute; top: 3px; right: 2px;
                         font-size: .62rem; line-height: 1; color: var(--barra-punto); }

/* ═══ EL MENÚ DE USUARIO ═════════════════════════════════════════════════════════════
   ⭐ Forma tomada de la barra de MKAPPAI001: avatar con iniciales, y adentro nombre, correo
      y las acciones de la cuenta. Antes acá había un botón «Salir» suelto y nada más — así
      que cambiarse la contraseña sólo se podía desde la página de inicio.
   ⚠️ Se ancla a la DERECHA (`right: 0`) y no a la izquierda como el de administración: es el
      último de la barra, y abriendo hacia la izquierda se sale de la pantalla. */
.barra details.usuario > summary { padding: 4px 6px; }
.barra details.usuario .avatar {
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; border-radius: 50%;
    background: var(--velo-fuerte); color: var(--papel);
    font-size: .74rem; font-weight: 700; letter-spacing: .02em;
}
.barra details.usuario .usuario-menu {
    position: absolute; top: calc(100% + 4px); right: 0; z-index: 20; min-width: 14rem;
    background: var(--barra); border: 1px solid var(--velo); border-radius: 8px;
    padding: 10px; box-shadow: 0 10px 24px var(--sombra);
}
.barra .usuario-quien { margin: 0; font-weight: 650; font-size: .9rem; color: var(--papel); }
.barra .usuario-correo { margin: 1px 0 0; font-size: .78rem; color: var(--barra-tenue); word-break: break-all; }
.barra .usuario-rol {
    margin: 5px 0 0; font-size: .68rem; font-weight: 700; letter-spacing: .07em;
    text-transform: uppercase; color: var(--barra-foco);
}
/* 🎭 LOS ROLES DE QUIEN MIRA. Cada uno con su tooltip; en el teléfono no hay tooltip y el
   nombre del rol igual se lee, que es lo que importa. Un usuario de empresa no veía NINGUNO
   hasta el 06-09-2026: sabía su nombre y su correo, y no qué podía hacer. */
.barra .usuario-permisos {
    list-style: none; margin: 5px 0 0; padding: 0;
    display: flex; flex-wrap: wrap; gap: 4px;
}
.barra .usuario-permisos li {
    padding: 2px 7px; border-radius: 999px; border: 1px solid var(--velo);
    font-size: .68rem; font-weight: 700; letter-spacing: .05em;
    text-transform: uppercase; color: var(--barra-foco);
    cursor: help;
}
.barra .usuario-permisos.vacio {
    display: block; font-size: .78rem; font-weight: 400; letter-spacing: 0;
    text-transform: none; color: var(--barra-tenue);
}
.barra .usuario-corte { border: 0; border-top: 1px solid var(--velo); margin: 9px 0 6px; }
.barra .usuario-enlace { display: block; padding: 7px 8px; font-size: .86rem; }
.barra details.usuario form { display: block; margin: 2px 0 0; }
.barra details.usuario .salir { width: 100%; text-align: left; padding: 7px 8px; font-size: .86rem; }

/* ═══ EL MANUAL EN UN DIÁLOGO ════════════════════════════════════════════════════════
   🔴 `<dialog>` + `showModal()`, y NO un manejador de eventos de framework: este sitio es
   Razor Pages puro, y ese manejador sería código que NO CORRE NUNCA. El síntoma no es un
   error — es un botón que se aprieta y no hace nada, idéntico a uno que anda. M2DATA ya lo
   pagó con ocho botones de administración.

   ⚠️ La forma prohibida no se transcribe, a propósito: su guardián es un barrido de texto
   y no puede distinguir una advertencia de un descuido. Misma razón por la que
   `InstruccionesDelSistema` dejó de mostrar un ejemplo de lo que prohíbe. */
dialog.manual {
    width: min(46rem, 92vw); max-height: 82vh; padding: 0;
    border: 1px solid var(--linea); border-radius: 12px;
}
dialog.manual::backdrop { background: var(--velo-fondo); }
dialog.manual .cabeza {
    display: flex; align-items: baseline; gap: 10px; padding: 13px 18px;
    border-bottom: 1px solid var(--linea-2); position: sticky; top: 0; background: var(--papel);
}
dialog.manual .cabeza h2 { margin: 0; font-size: 1.02rem; }
dialog.manual .cabeza form { margin-left: auto; }
dialog.manual .cabeza button { background: none; color: var(--tinta-3); font-size: 1.1rem; padding: 0 4px; }
dialog.manual .cuerpo { padding: 16px 18px 20px; overflow-y: auto; }
dialog.manual .cuerpo h4 { margin: 16px 0 6px; font-size: .95rem; }
dialog.manual .pie { padding: 0 18px 16px; font-size: .86rem; }

a { color: var(--verde); }

/* La salida secundaria de una pantalla: se ve, sin competir con el botón principal. */
.otra-via { margin-top: 16px; padding-top: 13px; border-top: 1px solid var(--linea-2); font-size: .9rem; }
.otra-via p { margin: 0 0 6px; }
.otra-via p:last-child { margin-bottom: 0; }

button.suave { background: var(--papel); color: var(--verde); border: 1px solid var(--linea); font-weight: 600; }

.codigo {
    font-family: "Cascadia Mono", Consolas, monospace;
    font-size: 1.4rem;
    letter-spacing: .35em;
    text-align: center;
}

/* ⭐ El nivel del interno, a la vista: lo que se puede hacer cambia según cuál sea, y descubrirlo
   apretando un botón que rechaza es la peor forma de enterarse. */
.barra .nivel {
    font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    color: var(--barra-suave); background: var(--velo); border-radius: 5px; padding: 3px 8px;
    margin-left: 4px;
}

/* La ficha: a qué cotización del sistema del cliente corresponde. */
.referencias { margin-top: 18px; }
.lista-referencias { list-style: none; padding: 0; margin: 8px 0; }
.lista-referencias li { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.lista-referencias code { background: var(--suave-2); padding: 3px 8px; border-radius: 4px; }
.lista-referencias form, form.una-linea { display: flex; gap: 8px; margin: 0; }
form.una-linea input { width: auto; flex: 1 1 200px; margin: 0; }
form.una-linea button, .lista-referencias button { width: auto; margin: 0; padding: 6px 12px; font-size: .85rem; }

/* ═══════════════════════════════════════════════════════════════════════════════════════════
   LA TABLA, Y LOS COLORES DE ESTADO · consolidados el 04-09-2026

   🔴🔴 Hasta hoy esto no existía: cada pantalla declaraba su propia tabla adentro de un bloque
   `<style>`. Medido: DIEZ definiciones con SIETE tamaños de letra distintos —.88, .9, .92, .93—
   y márgenes que iban de `8px 0` a `10px 0 0`. Nadie los había comparado. Y peor: SEIS pantallas
   usaban `<table>` sin ninguna regla, así que salían sin padding ni líneas — `/extensiones` y
   `/recursos` entre ellas.

   ⚠️ Los valores de acá son los MAYORITARIOS de esas diez. Las diferencias eran de un píxel de
   relleno y de una centésima de rem: consolidar cambia algo en cuatro pantallas, y ese cambio
   hay que MIRARLO, no deducirlo — ningún guardián puede decir si quedó bien.
   ═══════════════════════════════════════════════════════════════════════════════════════════ */

main table { width: 100%; border-collapse: collapse; font-size: .92rem; margin: 8px 0 0; }

main th {
    text-align: left; font-size: .74rem; text-transform: uppercase; letter-spacing: .05em;
    color: var(--tinta-2); padding: 6px 9px; border-bottom: 2px solid var(--linea);
}

main td { padding: 8px 9px; border-bottom: 1px solid var(--linea-2); vertical-align: top; }

main tr:last-child td { border-bottom: 0; }

/* ⭐ Los números a la derecha: es lo único que hace comparable una columna de cifras. */
main th.n, main td.n { text-align: right; }

/* Los tres estados. ⚠️ Uno de los diez bloques traía `var(--mal)` literal en vez de `var(--mal)`;
   consolidar lo devuelve al token, que es donde tiene que estar. */
.ok { color: var(--ok); font-weight: 600; }
.mal { color: var(--mal); font-weight: 600; }
.aviso { color: var(--aviso); font-weight: 600; }
.tenue { color: var(--tinta-3); font-size: .86rem; }



/* ═══════════════════════════════════════════════════════════════════════════════════════════
   LO QUE VARIAS PANTALLAS USABAN Y NADIE HABÍA ESCRITO · 04-09-2026

   🔴🔴 Estas clases se escribían en el HTML y NO EXISTÍAN EN NINGUNA HOJA. El guardián
   `EstilosDeLasPantallasTests` encontró 31 así, en 6 pantallas. No fallaba nada: los botones
   salían a tamaño completo, «Dar de baja» no se distinguía de «Guardar» y los checkboxes se
   apilaban sin layout. Lo destapó una captura de `/recursos` — «muy desordenado y mal aspecto».

   ⚠️ Las de acá son las que usa MÁS DE UNA pantalla, así que van al tramo común. Las de una sola
   viven en la sección de la suya, más abajo.
   ═══════════════════════════════════════════════════════════════════════════════════════════ */

/* Un botón dentro de una fila o de un formulario en línea: no compite con la acción principal. */
button.chico, .chico {
    font-size: .82rem;
    padding: 5px 11px;
    font-weight: 600;
}

/* ⚠️ La acción destructiva NO es roja de relleno: es un contorno. Un botón rojo grande al lado de
   «Guardar» empuja a apretarlo por reflejo — y lo que hace no se deshace. */
button.peligro, .peligro {
    background: transparent;
    color: var(--mal);
    border: 1px solid var(--mal);
}

button.peligro:hover, .peligro:hover { background: var(--mal-fondo); }

/* La tabla de una lista administrable: filas más altas, porque cada una tiene controles. */
main table.lista td { padding: 12px 9px; }

main table.lista tr.de-baja { opacity: .55; }

/* ⭐ Un formulario en línea dentro de una celda: los controles en fila, envolviendo, y el botón
   al final. Sin esto los checkboxes se apilan uno por renglón y la fila crece a lo alto. */
form.roles, form.jornada {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 0;
}

/* 🔴 Y su botón NO puede heredar el `width: 100%` del global: se iría a un renglón propio y el
   formulario volvería a crecer a lo alto. Es el mismo arreglo que `.acciones-fila`, y la razón por
   la que el guardián de anchos pasó a DERIVAR los contenedores de fila en vez de listarlos: esta
   pantalla no estaba en mi lista escrita a mano y por eso siguió torcida un despliegue entero. */
form.roles button, form.jornada button { width: auto; margin-top: 0; font-size: .82rem; padding: 5px 11px; }

/* Cada casilla con su palabra, juntas, para que se lea «puede: medir» y no dos cosas sueltas. */
label.rol {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin: 0;
    font-weight: 400;
    font-size: .88rem;
    white-space: nowrap;
    cursor: pointer;
}

label.rol input { margin: 0; }

/* Las dos cajas que faltaban de la familia `.caja`: peligro e información. */
.c-dan { background: var(--mal-fondo); border-color: var(--mal); }
.c-dan .tg { color: var(--mal); }

.c-info { background: var(--suave); border-color: var(--linea); }
.c-info .tg { color: var(--tinta-2); }


/* ═══════════════════════════════════════════════════════════════════════════════════════════
   LA COLUMNA DE ACCIONES DE UNA TABLA · unificada el 04-09-2026

   🔴🔴 `display: flex` EN UN `<td>` LO SACA DEL LAYOUT DE LA TABLA. Deja de ser celda: no
   participa del ancho de las columnas ni se alinea con su encabezado, así que los botones caen
   corridos en horizontal y a distinta altura entre filas. Estaba en TRES pantallas, y lo destapó
   una captura de `/interno/empresas` — «botones desalineados con la tabla».

   ⭐ El flex va en un `<div class="acciones-fila">` ADENTRO de la celda: la celda sigue siendo
   celda y el contenido se acomoda solo.

   ⚠️ Y había SIETE definiciones de `td.acciones` repartidas —tres `flex`, dos `inline`, dos
   `text-align:right`— que nadie había comparado. Ésta es una. Consolidar cambia cómo se ven siete
   columnas: hay que MIRARLAS.
   ═══════════════════════════════════════════════════════════════════════════════════════════ */

main td.acciones { white-space: nowrap; width: 1%; }

/* ⭐ `width: 1%` con `nowrap` es el truco de tabla de siempre: la columna se encoge a lo que
   ocupan sus botones y le deja el resto del ancho a los datos, que es lo que se lee. */
.acciones-fila {
    display: flex;
    gap: 6px;
    /* 🔴 `nowrap` Y NO `wrap`: con `wrap`, y la celda encogida a su mínimo, cada botón se iba a un
       renglón. Acá el contenido manda sobre el ancho, que es lo que se quiere en una columna de
       acciones. */
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-end;
}

.acciones-fila form { margin: 0; display: flex; gap: 4px; }

/* 🔴🔴 `width: auto` Y `margin-top: 0`, Y ESO ES EL ARREGLO ENTERO.

   El global es `button { width: 100%; margin-top: 20px }` — correcto para el botón que cierra un
   formulario, equivocado para todo lo demás. Sin anular esas dos, cada botón de una fila ocupa el
   renglón completo y se apilan, por más que el contenedor sea flex.

   ⚠️ Es la SEGUNDA vez en el mismo día que escribo una clase nueva sin mirar qué le impone la
   regla global al elemento: la primera fue `.peligro` con el color, y quedaron dos botones rojos
   sobre rojo. La regla general no se descubre mirando la clase nueva. */
main td.acciones button,
.acciones-fila button,
.menu-acciones button,
form.filtros button,
form.enLinea button {
    width: auto;
    margin-top: 0;
    font-size: .82rem;
    padding: 5px 11px;
}

main td.acciones a { font-size: .85rem; }



/* ═══════════════════════════════════════════════════════════════════════════════════════════
   DOS ACCIONES HERMANAS SE VEN IGUAL, AUNQUE UNA SEA ENLACE Y LA OTRA BOTÓN

   🔴 En `/autorizaciones`, «Editar» es un `<a>` y «Apagar» un `<button>`: uno lo estilaba
   `.acciones a` —verde macizo— y el otro su propia clase —blanco con borde—. **No pueden
   parecerse por casualidad**: son elementos distintos con reglas distintas.

   ⭐ Y «Editar» SIGUE SIENDO UN ENLACE, a propósito: se puede abrir en otra pestaña, copiar y
   compartir. Convertirlo en un botón dentro de un formulario uniformaría el aspecto y le sacaría
   todo eso. Lo que se unifica es el ASPECTO, no el elemento.
   ═══════════════════════════════════════════════════════════════════════════════════════════ */

a.accion-de-fila, button.accion-de-fila {
    display: inline-flex;
    align-items: center;
    width: auto;
    margin: 0;
    padding: 5px 11px;
    font: inherit;
    font-size: .82rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--tinta-2);
    background: var(--papel);
    border: 1px solid var(--linea);
    border-radius: 6px;
    text-decoration: none;
    cursor: pointer;
}

a.accion-de-fila:hover, button.accion-de-fila:hover {
    border-color: var(--tinta-3);
    color: var(--tinta);
    text-decoration: none;
}

/* La variante peligrosa de la misma pieza: contorno rojo, nunca relleno. */
a.accion-de-fila.peligro, button.accion-de-fila.peligro { color: var(--mal); border-color: var(--mal); }

/* ═══════════════════════════════════════════════════════════════════════════════════════════
   EL MENÚ DE ACCIONES DE UNA FILA · 04-09-2026

   ⭐ Con TRES o más acciones por fila, en línea no entran: `/interno/personas` y `/personas` tienen
   cuatro cada una —tres a la vez— más un campo de roles, y la fila se vuelve ilegible. Con una o
   dos, un desplegable sería un clic de más: el umbral es 3.

   ⚠️ Se usa `<details>` y no un menú con JavaScript. El sitio ya lo usa en `/configuración`, y un
   desplegable que depende de un script deja de abrirse el día que el script falle — en una columna
   que contiene «Dar de baja», eso es quedarse sin poder operar.

   ⭐ Y esconder lo destructivo detrás de un clic es una VENTAJA, no un costo: hoy «Dar de baja»
   está a un clic de distancia en cada fila de la tabla.
   ═══════════════════════════════════════════════════════════════════════════════════════════ */

.menu-acciones { position: relative; display: inline-block; }

.menu-acciones > summary {
    cursor: pointer;
    list-style: none;
    padding: 5px 11px;
    font-size: .82rem;
    font-weight: 600;
    border: 1px solid var(--linea);
    border-radius: 6px;
    background: var(--papel);
    color: var(--tinta-2);
    white-space: nowrap;
}

.menu-acciones > summary::-webkit-details-marker { display: none; }
.menu-acciones[open] > summary { border-color: var(--tinta-3); color: var(--tinta); }

/* 🔴 ABSOLUTO, para que abrirlo NO empuje la fila. Un menú que corre las filas de abajo hace que
   la tabla salte bajo el cursor, y se termina apretando lo que no era. */
.menu-acciones .opciones {
    position: absolute;
    right: 0;
    z-index: 20;
    min-width: 12rem;
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 4px;
    padding: 8px;
    background: var(--papel);
    border: 1px solid var(--linea);
    border-radius: 8px;
    box-shadow: 0 10px 24px var(--sombra);
    text-align: left;
}

.menu-acciones .opciones form { margin: 0; }

/* Adentro del menú SÍ van a lo ancho: es una lista vertical, y un botón angosto en una columna
   deja un blanco a la derecha que se lee como que falta algo. */
.menu-acciones .opciones button { width: 100%; margin-top: 0; text-align: left; }

/* ═══════════════════════════════════════════════════════════════════════════════════════════
   EL ESTILO DE CADA PANTALLA

   ⭐ Vive acá y no adentro del `.cshtml`. Antes eran 28.143 bytes en 21 bloques `<style>` — el
   64% del CSS del producto— viajando en cada carga y sin cachearse nunca. Acá se cachea una vez.

   ⚠️ Cada sección va prefijada con la clase de su pantalla —`.pg-<ruta>`, que el layout emite
   sobre el `<main>`— así que una regla de una pantalla NO PUEDE alcanzar a otra. Es la misma
   garantía que daba el bloque en línea, sin su costo.
   ═══════════════════════════════════════════════════════════════════════════════════════════ */

/* ── Actividad.cshtml  →  .pg-actividad ─────────────────────────── */
.pg-actividad .filtros { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 12px 0; }
.pg-actividad .filtros label { margin: 0; }
.pg-actividad .filtros select { width: auto; margin: 0; }
.pg-actividad button.chico { width: auto; margin: 0; padding: 7px 14px; font-size: .9rem; }
.pg-actividad td.cuando { white-space: nowrap; font-variant-numeric: tabular-nums; }

/* La confirmación de que sí: es la acción principal de esta pantalla y la única en verde. */
.pg-aprobar .si { font-weight: 700; }

/* ── Aprobar.cshtml  →  .pg-aprobar ─────────────────────────── */
.pg-aprobar .solicitud { border: 1px solid var(--linea); border-radius: 8px; padding: 12px 14px; margin: 0 0 12px; background: var(--suave); }
.pg-aprobar .solicitud .quien { font-size: 1rem; margin-bottom: 2px; }
.pg-aprobar .solicitud .pide { font-size: .95rem; margin-bottom: 4px; }
.pg-aprobar .solicitud .cuando { font-size: .8rem; margin-bottom: 10px; }
.pg-aprobar .decidir { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.pg-aprobar .decidir button { width: auto; margin-top: 0; padding: 8px 18px; white-space: nowrap; }
.pg-aprobar .decidir button.no { background: transparent; color: var(--tinta-2); border: 1px solid var(--linea); }
.pg-aprobar .decidir .cuanto { display: inline-flex; align-items: center; gap: 6px; font-size: .9rem; margin-right: 6px; }
.pg-aprobar .decidir .cuanto input { width: 4.5rem; padding: 7px 9px; font: inherit; border: 1px solid var(--linea); border-radius: 6px; }

/* ── Autorizaciones.cshtml  →  .pg-autorizaciones ─────────────────────────── */
.pg-autorizaciones section { margin-top: 26px; padding-top: 16px; border-top: 1px solid var(--linea-2); }
.pg-autorizaciones h2 { font-size: 1rem; margin: 0 0 6px; color: var(--tinta-2); }
.pg-autorizaciones td .que { font-weight: 600; }
.pg-autorizaciones td .cuando { font-size: .85rem; color: var(--tinta-3); }
.pg-autorizaciones td.acciones a { font-size: .85rem; margin-right: 8px; }
.pg-autorizaciones .selector { width: 100%; padding: 11px 12px; font: inherit; font-size: 1rem; color: var(--tinta); background: var(--papel); border: 1px solid var(--linea); border-radius: 7px; }
.pg-autorizaciones .caja-apagada { background: var(--mal-fondo); border-left: 4px solid var(--mal); }
.pg-autorizaciones .caja-apagada .tg { color: var(--mal); }

/* ── Ayuda.cshtml  →  .pg-ayuda ─────────────────────────── */
.pg-ayuda .indice { display: grid; gap: 6px; margin: 12px 0 26px; }
.pg-ayuda .indice a { display: block; padding: 9px 12px; border: 1px solid var(--linea-2); border-radius: 8px; text-decoration: none; max-width: 68ch; }
.pg-ayuda .indice a:hover { border-color: var(--verde); background: var(--suave); }
.pg-ayuda .indice strong { display: block; color: var(--verde); }
.pg-ayuda .indice span { font-size: .88rem; color: var(--tinta-2); }
.pg-ayuda .tema { padding-top: 18px; margin-top: 18px; border-top: 1px solid var(--linea-2); }
.pg-ayuda .tema:first-of-type { border-top: 0; }
.pg-ayuda .manual-cuerpo h4 { margin: 16px 0 5px; font-size: .96rem; }

/* ── Chat.cshtml  →  .pg-chat ─────────────────────────── */
.pg-chat .hilo { border: 1px solid var(--linea); border-radius: 8px; padding: 12px; min-height: 40vh; max-height: 60vh; overflow-y: auto; background: var(--suave); }
.pg-chat .vacio { color: var(--tinta-3); font-size: .92rem; margin: 0; }
.pg-chat .linea { margin: 0 0 10px; display: flex; flex-direction: column; max-width: 78%; }
.pg-chat .linea.mia { margin-left: auto; align-items: flex-end; }
.pg-chat .linea.de-maia { margin-right: auto; align-items: flex-start; }
.pg-chat .globo { padding: 8px 12px; border-radius: 12px; white-space: pre-wrap; word-break: break-word; font-size: .95rem; line-height: 1.4; }
.pg-chat .mia .globo { background: var(--acento); color: var(--papel); border-bottom-right-radius: 3px; }
.pg-chat .de-maia .globo { background: var(--papel); border: 1px solid var(--linea); border-bottom-left-radius: 3px; }
.pg-chat .hora { font-size: .7rem; color: var(--tinta-3); margin-top: 2px; }
.pg-chat .escribir { display: flex; gap: 8px; align-items: stretch; margin: 12px 0 0; }
.pg-chat .escribir textarea { flex: 1 1 auto; min-width: 12rem; min-height: 3.2rem; padding: 9px 11px; font: inherit; resize: vertical; border: 1px solid var(--linea); border-radius: 8px; }
.pg-chat .escribir button { width: auto; flex: 0 0 auto; margin-top: 0; padding: 10px 20px; white-space: nowrap; }
.pg-chat .ofrecer { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; margin: 0 0 10px; padding: 8px 12px; border-radius: 8px; border: 1px solid var(--linea); background: var(--suave-2); font-size: .88rem; }
.pg-chat .ofrecer .que { font-weight: 600; white-space: nowrap; }
.pg-chat .ofrecer .por-que { color: var(--tinta-3); flex: 1 1 14rem; }
.pg-chat .ofrecer .botones { display: flex; gap: 6px; margin-left: auto; }
.pg-chat .ofrecer button { width: auto; margin-top: 0; padding: 5px 12px; font-size: .85rem; white-space: nowrap; }
.pg-chat .ofrecer button.terciario { background: transparent; color: var(--tinta-3); border: 1px solid var(--linea); }
.pg-chat .ofrecer .comoi { font-size: .82rem; white-space: nowrap; }
.pg-chat .espera { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; margin: 0 0 10px; padding: 8px 12px; border-radius: 8px; border: 1px solid var(--aviso, var(--aviso)); background: var(--aviso-fondo, var(--aviso-fondo)); font-size: .88rem; }
.pg-chat .espera .que { font-weight: 600; }
.pg-chat .espera .ir { margin-left: auto; font-weight: 600; }
.pg-chat .estado { font-size: .85rem; color: var(--tinta-3); min-height: 1.2em; margin: 6px 0 0; }
.pg-chat .linea.pendiente .globo { opacity: .62; }
.pg-chat .globo.sin-texto { font-style: italic; opacity: .8; }
.pg-chat .escribir .adjuntar { display: flex; align-items: center; justify-content: center; width: 2.6rem; cursor: pointer; font-size: 1.2rem; border: 1px solid var(--linea); border-radius: 8px; }
.pg-chat .escribir .adjuntar:hover { background: var(--suave-2); }
.pg-chat .escribir button.adjuntar { width: 2.6rem; flex: 0 0 auto; margin-top: 0; padding: 0; background: var(--papel); color: inherit; }
.pg-chat .escribir button.adjuntar.grabando { background: var(--mal); color: var(--papel); }
.pg-chat .oculto-visual { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pg-chat .elegidas { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; font-size: .8rem; }
.pg-chat .elegidas li { background: var(--suave-2); border: 1px solid var(--linea); border-radius: 6px; padding: 3px 8px; color: var(--tinta-2); }

/* ── Conectar.cshtml  →  .pg-conectar ─────────────────────────── */
.pg-conectar ol.paso { margin: 10px 0 18px; padding-left: 22px; }
.pg-conectar ol.paso li { margin-bottom: 6px; }
.pg-conectar .codigo { margin: 16px 0; }
.pg-conectar .codigo code { display: inline-block; padding: 12px 18px; background: var(--suave-2); border: 1px solid var(--linea); border-radius: 8px; font-family: ui-monospace, "Cascadia Mono", "SF Mono", Consolas, monospace; font-size: 1.25rem; letter-spacing: .04em; user-select: all; }

/* ── Configuracion.cshtml  →  .pg-configuracion ─────────────────────────── */
.pg-configuracion section { margin-top: 22px; }
.pg-configuracion h2 { font-size: 1rem; margin: 0 0 4px; color: var(--tinta-2); display: inline; }
.pg-configuracion h2 .cuantos { font-weight: 400; color: var(--tinta-3); font-size: .85rem; }
.pg-configuracion summary { cursor: pointer; padding: 8px 0; list-style-position: outside; }
.pg-configuracion summary::marker { color: var(--tinta-3); }
.pg-configuracion details[open] summary { border-bottom: 1px solid var(--linea-2); margin-bottom: 8px; }
.pg-configuracion .param { padding: 12px 0; border-top: 1px solid var(--linea-2); }
.pg-configuracion .param:first-of-type { border-top: 0; }
.pg-configuracion .param .titulo { font-weight: 600; font-size: .95rem; }
.pg-configuracion .param .clave { font-family: Consolas, "Cascadia Mono", monospace; font-size: .74rem; color: var(--tinta-3); }
.pg-configuracion .param .explica { font-size: .88rem; color: var(--tinta-2); margin: 3px 0 0; }
.pg-configuracion .param .consecuencia { font-size: .84rem; color: var(--tinta-3); margin: 3px 0 0; }
.pg-configuracion .param .linea { display: flex; align-items: center; gap: 10px; margin-top: 7px; }
.pg-configuracion .param input { width: 8rem; margin: 0; }
.pg-configuracion .linea-texto { margin-top: 6px; }
.pg-configuracion .linea-texto textarea { width: 100%; margin: 0; font: inherit; resize: vertical; }
.pg-configuracion .linea-texto .fabrica { display: block; margin-top: 4px; }
.pg-configuracion .param .fabrica { font-size: .84rem; color: var(--tinta-3); }
.pg-configuracion .param .fabrica b { color: var(--tinta-2); font-weight: 600; }
.pg-configuracion .param .error { color: var(--mal); font-size: .85rem; margin: 5px 0 0; font-weight: 600; }
.pg-configuracion .param.con-error input { border-color: var(--mal); border-width: 2px; }

/* ── Corpus.cshtml  →  .pg-corpus ─────────────────────────── */
.pg-corpus section { margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--linea-2); }
.pg-corpus h2 { font-size: 1rem; margin: 0 0 6px; color: var(--tinta-2); }
.pg-corpus .buscar { display: flex; gap: 8px; margin: 10px 0 4px; }
.pg-corpus .buscar input { flex: 1; margin: 0; }
.pg-corpus .buscar button { width: auto; margin: 0; padding: 11px 20px; }
.pg-corpus .hallazgo { margin-top: 12px; padding: 10px 13px; background: var(--suave); border-left: 3px solid var(--verde); border-radius: 5px; }
.pg-corpus .hallazgo .de { font-size: .84rem; color: var(--tinta-3); margin-bottom: 4px; }
.pg-corpus .hallazgo .de .seccion { color: var(--tinta-2); }
.pg-corpus .hallazgo .de .puntaje { float: right; font-size: .78rem; }
.pg-corpus .hallazgo p { margin: 0; font-size: .92rem; }
.pg-corpus tr.retirado { opacity: .5; }
.pg-corpus td .titulo { font-weight: 600; }
.pg-corpus td .ref { font-size: .78rem; color: var(--tinta-3); word-break: break-all; }

/* ── Extensiones.cshtml  →  .pg-extensiones ─────────────────────────── */
.pg-extensiones .marca-baja { font-size: .8rem; color: var(--tinta-3); margin-left: 6px; }
.pg-extensiones .bien { color: var(--verde); }
.pg-extensiones button.chico { width: auto; margin: 0; padding: 5px 10px; font-size: .85rem; }

/* ── Index.cshtml  →  .pg-inicio ─────────────────────────── */
.pg-inicio section { margin-top: 20px; padding-top: 14px; border-top: 1px solid var(--linea-2); }
.pg-inicio section:first-of-type { border-top: 0; padding-top: 0; }
.pg-inicio h2 { font-size: 1rem; margin: 0 0 5px; }
.pg-inicio section button { margin-top: 12px; }

/* ── Interno/Empresas.cshtml  →  .pg-interno-empresas ─────────────────────────── */
.pg-interno-empresas input.angosto { width: 5.5rem; }
.pg-interno-empresas form.alta { max-width: 30rem; }
.pg-interno-empresas form.alta label { display: block; margin: 0 0 10px; font-size: .9rem; }
.pg-interno-empresas form.alta input { display: block; width: 100%; margin-top: 3px; padding: 7px 9px; font: inherit; border: 1px solid var(--linea); border-radius: 6px; }

/* ── Interno/Index.cshtml  →  .pg-interno-index ─────────────────────────── */

/* ── Interno/Salud.cshtml  →  .pg-interno-salud ─────────────────────────── */
.pg-interno-salud form { display: flex; gap: 8px; align-items: center; margin: 8px 0 12px; }
.pg-interno-salud form input[type=text] { max-width: 26rem; }

/* ── Interno/Usuarios.cshtml  →  .pg-interno-usuarios ─────────────────────────── */
.pg-interno-usuarios form.alta { max-width: 30rem; }
.pg-interno-usuarios form.alta label { display: block; margin: 0 0 10px; font-size: .9rem; }
.pg-interno-usuarios form.alta input, .pg-interno-usuarios form.alta select { display: block; width: 100%; margin-top: 3px; padding: 7px 9px; font: inherit; border: 1px solid var(--linea); border-radius: 6px; }

/* ── Interno/Personas.cshtml  →  .pg-interno-personas ─────────────────────────── */
/* ⭐ Heredado de `Interno/UsuariosDeEmpresa`, que esta pantalla reemplazó el 04-09-2026. */
.pg-interno-personas form.enLinea { margin: 0; display: flex; gap: 4px; }
.pg-interno-personas form.enLinea input { font: inherit; font-size: .86rem; padding: 3px 6px; border: 1px solid var(--linea); border-radius: 5px; min-width: 12rem; }

/* La barra de filtros: los dos selectores y el botón en una fila. */
.pg-interno-personas form.filtros { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 10px 0 4px; }
.pg-interno-personas form.filtros label { margin: 0; font-size: .86rem; font-weight: 600; }
.pg-interno-personas form.filtros select { font: inherit; font-size: .9rem; padding: 5px 8px; border: 1px solid var(--linea); border-radius: 6px; }

/* ⚠️ La contraseña temporal se muestra UNA vez y no se puede volver a ver: va en alto contraste
   y con `user-select: all` para que copiarla sea un clic y no una pelea. Heredado de `/personas`,
   donde nació la misma caja. */
.pg-interno-personas .c-clave { background: var(--verde); border-left: 4px solid var(--barra-foco); color: var(--verde-suave); }
.pg-interno-personas .c-clave .rotulo { color: var(--barra-foco); display: block; font-size: .72rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; margin-bottom: 4px; }
.pg-interno-personas .clave-nueva { font-family: Consolas, "Cascadia Mono", monospace; font-size: 1.35rem; letter-spacing: .08em; margin: 6px 0 10px; user-select: all; }

/* ── Personas.cshtml  →  .pg-personas ─────────────────────────── */
/* ⚠️ `comoi` NO ES UN ERROR DE TIPEO — lo comprobé antes de renombrarlo: es el «?» que lleva a
   `/puesta-a-punto` desde el encabezado de la columna de avisos. Se escribe redondo y discreto
   para que se lea como una ayuda y no como un dato de la tabla. */
.pg-personas a.comoi {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.15rem;
    height: 1.15rem;
    margin-left: 5px;
    border: 1px solid var(--linea);
    border-radius: 50%;
    font-size: .7rem;
    color: var(--tinta-3);
    text-decoration: none;
}

.pg-personas a.comoi:hover { border-color: var(--tinta-2); color: var(--tinta); }

.pg-personas .avisos { min-width: 13rem; }
.pg-personas .avisos .canal { display: flex; align-items: center; gap: 6px; margin: 0 0 3px; }
.pg-personas .avisos .interruptor { width: auto; margin-top: 0; padding: 3px 8px; font-size: .78rem; background: transparent; color: var(--tinta-2); border: 1px solid var(--linea); border-radius: 5px; white-space: nowrap; }
.pg-personas .avisos .interruptor.si { color: var(--papel); background: var(--ok); border-color: var(--ok); font-weight: 600; }
.pg-personas .avisos .interruptor.no { color: var(--tinta-3); background: transparent; }
.pg-personas .avisos .salud { font-size: .74rem; }
.pg-personas .avisos .salud.sin-configurar { color: var(--tinta-3); }
.pg-personas .avisos .salud.caido { color: var(--mal, var(--mal)); font-weight: 700; }
.pg-personas .avisos .grilla { border: none; font-size: .74rem; margin: 0 0 5px; }
.pg-personas .avisos .grilla th { font-size: .68rem; font-weight: 600; color: var(--tinta-3); padding: 1px 5px; border: none; }
.pg-personas .avisos .grilla td { padding: 1px 5px; border: none; }
.pg-personas .avisos .grilla td.c { text-align: center; }
.pg-personas .avisos .celda { width: auto; margin-top: 0; padding: 0 3px; background: transparent; border: none; color: inherit; font-size: .85rem; cursor: pointer; }
.pg-personas tr.de-baja { opacity: .55; }
.pg-personas .quien { font-weight: 600; }
.pg-personas .senas { font-size: .84rem; color: var(--tinta-3); }
.pg-personas .senas .aviso-chico { color: var(--aviso); }
.pg-personas .marca-baja, .pg-personas .marca-yo { font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; padding: 1px 6px; border-radius: 9px; margin-left: 5px; font-weight: 700; }
.pg-personas .marca-baja { background: var(--mal-fondo); color: var(--mal); }
.pg-personas .marca-yo { background: var(--ok-fondo); color: var(--ok); }
.pg-personas .roles { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; }
.pg-personas .roles .rol { display: inline-flex; align-items: center; gap: 4px; margin: 0; font-weight: 400; font-size: .84rem; }
.pg-personas .roles .rol input { width: 15px; height: 15px; margin: 0; accent-color: var(--verde); }
.pg-personas .roles .ayuda { margin: 0; flex-basis: 100%; }
.pg-personas button.chico { width: auto; margin: 0; padding: 4px 10px; font-size: .82rem; font-weight: 500; color: var(--verde); background: var(--papel); border: 1px solid var(--linea); }
.pg-personas .caja-apagada { background: var(--mal-fondo); border-left: 4px solid var(--mal); }
.pg-personas .caja-apagada .tg { color: var(--mal); }
.pg-personas .c-clave { background: var(--verde); border-left: 4px solid var(--barra-foco); color: var(--verde-suave); }
.pg-personas .c-clave .rotulo { color: var(--barra-foco); }
.pg-personas .clave-nueva { font-family: Consolas, "Cascadia Mono", monospace; font-size: 1.35rem; letter-spacing: .08em; margin: 6px 0 10px; user-select: all; }
.pg-personas .completar { display: flex; gap: 6px; margin-top: 5px; }
.pg-personas .completar input { width: 12rem; padding: 5px 8px; font-size: .85rem; }
.pg-personas section { margin-top: 26px; padding-top: 16px; border-top: 1px solid var(--linea-2); }
.pg-personas h2 { font-size: 1rem; margin: 0 0 6px; color: var(--tinta-2); }

/* ── Privacidad.cshtml  →  .pg-privacidad ─────────────────────────── */
.pg-privacidad h2 { font-size: 1.05rem; margin: 22px 0 8px; padding-bottom: 4px; border-bottom: 1px solid var(--linea-2); }
.pg-privacidad h3 { font-size: .95rem; margin: 16px 0 6px; }
.pg-privacidad ul { margin: 6px 0 12px; padding-left: 20px; }
.pg-privacidad li { margin-bottom: 4px; }
.pg-privacidad ul.no li { list-style: none; margin-left: -20px; }

/* ── Proceso.cshtml  →  .pg-proceso ─────────────────────────── */
.pg-proceso h2 { font-size: 1.05rem; margin: 20px 0 10px; }
.pg-proceso .etapa { padding: 12px 0; border-top: 1px solid var(--linea-2); }
.pg-proceso .cabeza { display: flex; align-items: flex-start; gap: 11px; }
.pg-proceso .cabeza .num { flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--verde); color: var(--papel); font-size: .85rem; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.pg-proceso .cabeza .nombre { font-weight: 650; }
.pg-proceso .cabeza .meta { font-size: .68rem; text-transform: uppercase; letter-spacing: .07em; font-weight: 700; background: var(--ok-fondo); color: var(--ok); padding: 1px 7px; border-radius: 9px; margin-left: 5px; }
.pg-proceso .cabeza .codigo { font-family: Consolas, monospace; font-size: .74rem; color: var(--tinta-3); }
.pg-proceso .cabeza .cuantas { margin-left: auto; font-size: .87rem; color: var(--tinta-2); white-space: nowrap; }
.pg-proceso .cabeza .vacia { color: var(--tinta-3); }
.pg-proceso ul.lista, .pg-proceso ul.motivos { list-style: none; padding: 0; margin: 8px 0 0 37px; }
.pg-proceso ul.motivos { margin-left: 0; }
.pg-proceso ul.lista li, .pg-proceso ul.motivos li { padding: 3px 0; font-size: .9rem; color: var(--tinta-3); }
.pg-proceso ul.lista li.obliga { color: var(--tinta); }
.pg-proceso ul.lista li.obliga::before { content: "· "; font-weight: 700; }
.pg-proceso ul.lista li:not(.obliga)::before { content: "· "; }
.pg-proceso ul.motivos li::before { content: "· "; }
.pg-proceso ul.motivos li.retirado { color: var(--tinta-3); text-decoration: line-through; }
.pg-proceso .clave { font-family: Consolas, monospace; font-size: .72rem; color: var(--tinta-3); margin-left: 6px; }
.pg-proceso .opcional { font-size: .78rem; color: var(--tinta-3); margin-left: 5px; }
.pg-proceso .compuerta { margin: 9px 0 0 37px; padding: 9px 12px; background: var(--suave); border-left: 3px solid var(--linea); border-radius: 5px; font-size: .9rem; }
.pg-proceso .compuerta .rotulo { display: block; font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--tinta-3); margin-bottom: 3px; }
.pg-proceso .compuerta p { margin: 0; }
.pg-proceso .compuerta .error { color: var(--mal); margin-top: 5px; }
.pg-proceso .compuerta .ayuda { margin-top: 3px; }

/* ── PuestaAPunto.cshtml  →  .pg-puestaapunto ─────────────────────────── */
.pg-puestaapunto .pasos { list-style: none; padding: 0; margin: 0; counter-reset: p; }
.pg-puestaapunto .pasos li { display: flex; gap: 10px; align-items: flex-start; border: 1px solid var(--linea); border-radius: 8px; padding: 11px 13px; margin: 0 0 9px; }
.pg-puestaapunto .pasos li.hecho { opacity: .62; }
.pg-puestaapunto .pasos li.falta { background: var(--suave); }
.pg-puestaapunto .pasos .marca { font-size: 1.05rem; line-height: 1.3; }
.pg-puestaapunto .pasos .que strong { display: block; margin-bottom: 2px; }
.pg-puestaapunto .pasos .que p { margin: 0 0 4px; font-size: .88rem; color: var(--tinta-2); }
.pg-puestaapunto .pasos .ir { font-size: .86rem; font-weight: 600; }

/* ── Tablero.cshtml  →  .pg-tablero ─────────────────────────── */
.pg-tablero section { margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--linea-2); }
.pg-tablero section:first-of-type { border-top: 0; padding-top: 0; }
.pg-tablero h2 { font-size: 1rem; margin: 0 0 10px; color: var(--tinta-2); }
.pg-tablero td.n { font-variant-numeric: tabular-nums; }
.pg-tablero .marcadores { display: flex; gap: 10px; }
.pg-tablero .marcador { flex: 1; padding: 12px 10px; background: var(--suave); border-radius: 8px; text-align: center; }
.pg-tablero .marcador.bueno { background: var(--ok-fondo); }
.pg-tablero .marcador .cifra { font-size: 1.7rem; font-weight: 650; line-height: 1.1; }
.pg-tablero .marcador.bueno .cifra { color: var(--ok); }
.pg-tablero .marcador .que { font-size: .8rem; color: var(--tinta-3); }
.pg-tablero .pie { margin: 12px 0 4px; }
.pg-tablero .vacio { color: var(--tinta-3); font-size: .93rem; }
.pg-tablero .propia { display: inline-block; margin-left: 6px; font-size: .74rem; color: var(--tinta-3); background: var(--suave); border-radius: 4px; padding: 1px 6px; white-space: nowrap; }
.pg-tablero .periodo { display: flex; gap: 6px; margin-bottom: 18px; }
.pg-tablero .periodo a { flex: 1; padding: 6px 8px; text-align: center; font-size: .88rem; text-decoration: none; color: var(--tinta-3); background: var(--suave); border-radius: 6px; }
.pg-tablero .periodo a.elegido { color: var(--verde); background: var(--papel); border: 1px solid var(--linea); font-weight: 600; }

/* ── pg-recursos · lo que faltaba ─────────────────── */
/* Los tres campos de la jornada son cortos por naturaleza: «1,2,3,4,5», «7», «19». A ancho
   completo parecerían pedir un texto largo, y el formulario se lee como un muro. */
.pg-recursos input.angosto { width: 7.5rem; }
.pg-recursos input[name=dias] { width: 11rem; }

/* Un aviso de una línea al pie de la lista: dice la regla sin robarle sitio a la lista. */
.pg-recursos .aviso-chico {
    font-size: .84rem;
    color: var(--tinta-3);
    margin: 10px 0 0;
}

/* ── pg-ficha · lo que faltaba ─────────────────── */
/* La cabecera de la ficha: el nombre grande y las señas al lado, en una sola línea. */
.pg-ficha .cabecera { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.pg-ficha .cabecera h1 { margin: 0; }

/* ⭐ `c` y `d` son las dos columnas de cifra de la tabla de fichas —reaperturas y monto—.
   Los números van a la derecha para poder compararlos de un vistazo. */
.pg-ficha th.c, .pg-ficha td.c,
.pg-ficha th.d, .pg-ficha td.d { text-align: right; white-space: nowrap; }

/* Los datos que la ficha HEREDA de una conversación anterior: se ven, pero en segundo plano. */
.pg-ficha dl.heredable { margin: 6px 0 0; font-size: .9rem; }
.pg-ficha dl.heredable dt { font-weight: 600; color: var(--tinta-2); }
.pg-ficha dl.heredable dd { margin: 0 0 6px; color: var(--tinta-2); }

/* Lo que todavía falta para avanzar de etapa: es una advertencia, no un dato. */
.pg-ficha .faltan { color: var(--aviso); font-size: .9rem; }

/* El hilo de la conversación y el pedido: bloques de lectura dentro de una pantalla de datos. */
.pg-ficha .chat, .pg-ficha .pedido {
    background: var(--suave);
    border: 1px solid var(--linea-2);
    border-radius: 8px;
    padding: 10px 12px;
    margin: 8px 0;
}

.pg-ficha .texto { white-space: pre-wrap; }

/* Una fecha o una hora: no se parte en dos renglones. */
.pg-ficha .cuando { white-space: nowrap; color: var(--tinta-3); font-size: .86rem; }

/* ── pg-eliminaciondedatos · lo que faltaba ─────────────────── */
/* Los pasos numerados de la solicitud: se leen como una receta, no como un párrafo. */
.pg-eliminaciondedatos ol.pasos { margin: 10px 0 0; padding-left: 20px; }
.pg-eliminaciondedatos ol.pasos li { margin: 0 0 8px; }

/* La nota al pie: lo que hay que saber pero no forma parte de los pasos. */
.pg-eliminaciondedatos .nota { font-size: .88rem; color: var(--tinta-3); margin-top: 14px; }