/* Hoja de estilos única de Control IT (marca Tecolsoft, PO-008). Sin frameworks y sin nada de internet: las fuentes
   (Outfit en títulos, DM Sans en el texto) y los íconos salen de `static/`.
   Azul #001740 en menú, texto de marca y botón principal; naranja #FA4300 solo como acento (foco, barra del elemento
   activo, marca del logo), nunca como texto ni como botón. Orden del archivo: variables, marco (cabecera, menú lateral,
   Configuración y Mi cuenta, Inicio), componentes (tarjetas, formularios, tablas) y, al final, lo de cada módulo. */
@font-face { font-family: "Outfit"; src: url("../fonts/Outfit.ttf") format("truetype"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "DM Sans"; src: url("../fonts/DMSans.ttf") format("truetype"); font-weight: 100 1000; font-display: swap; }

:root {
  --azul: #001740;
  --azul-hover: #0b2a63;
  --naranja: #fa4300;
  --texto: #333333;
  --texto-suave: #4b5563;
  --fondo: #f5f6f8;
  --superficie: #ffffff;
  --tinte: #e9eef7;
  --tinte-hover: #d9e2f1;
  --tinte-suave: #f1f4fa;
  --linea: #e5e7eb;
  --ok: #15803d;
  --error: #c81e1e;
  --error-fondo: #fdeeee;
  --error-hover: #9b1717;
  --aviso: #92400e;
  --aviso-borde: #b45309;
  --borde-campo: #6b7280;
  --cambio-fondo: #fff4e5;
  --radio: 0.75rem;
  --radio-tarjeta: 1rem;
  --sombra-panel: 0 12px 32px rgba(0, 23, 64, 0.18);
  --esp-1: 0.5rem;
  --esp-2: 1rem;
  --esp-3: 1.5rem;
  --esp-4: 2.5rem;
  --lado: 256px;  /* ancho del menú lateral; 80 px cuando la persona lo pliega */
  --alto-top: 68px;  /* alto de la cabecera en computador */
  --fuente-titulo: "Outfit", "DM Sans", system-ui, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--texto);
  background: var(--fondo);
  -webkit-font-smoothing: antialiased;
}
body.collapsed { --lado: 80px; }

/* Foco visible en todo lo que se puede usar con el teclado (también sobre el azul del menú: 4,9 a 1). */
:focus-visible { outline: 3px solid var(--naranja); outline-offset: 2px; }
[hidden] { display: none !important; }

/* Franja de la base de demostración (H2.7): arriba de todo, en el flujo normal (no tapa nada), con contraste alto. */
.demo-banner {
  margin: 0;
  padding: 0.5rem 1.25rem;
  background: var(--cambio-fondo);
  color: var(--aviso);
  border-bottom: 2px solid var(--aviso-borde);
  font-weight: 700;
  text-align: center;
  overflow-wrap: anywhere;
}

/* ---------- Marco: íconos y utilidades ---------- */
.ic { width: 1.5rem; height: 1.5rem; flex: none; }
.ic-sm { width: 1.25rem; height: 1.25rem; }
.ic-xs { width: 1rem; height: 1rem; }
.sidebar .only-narrow { display: none; }

/* ---------- Cabecera blanca: logo, cliente activo, Configuración y Mi cuenta ---------- */
.topbar { position: relative; z-index: 30; display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1rem; padding: 0.6rem 0.9rem; background: var(--superficie); border-bottom: 1px solid var(--linea); color: var(--azul); }
.brand-box { display: flex; align-items: center; order: 2; }
.brand { display: inline-flex; align-items: center; min-height: 44px; border-radius: 8px; }
.brand img { display: block; height: auto; }
.brand .logo { width: 130px; }
.brand .imago { display: none; width: 44px; }
.menu-btn { order: 1; display: inline-flex; align-items: center; gap: 0.5rem; min-height: 44px; padding: 0 1rem; border: 1px solid var(--linea); border-radius: var(--radio); background: var(--superficie); color: var(--azul); font: inherit; font-weight: 700; cursor: pointer; }
.top-simple { order: 4; display: flex; flex-wrap: wrap; gap: 0.5rem; margin-left: auto; }
.top-simple form { margin: 0; }
.top-simple [aria-current="page"] { box-shadow: inset 0 -3px 0 var(--naranja); }
.client-notice { margin-bottom: 1rem; }

/* Cliente activo: siempre visible. En celular ocupa su propia línea, a todo el ancho. */
.client { order: 3; flex: 1 1 100%; display: flex; align-items: center; gap: 0.6rem; margin: 0; padding: 0.35rem 0.5rem 0.35rem 0.8rem; background: var(--fondo); border: 1px solid var(--linea); border-radius: 14px; min-width: 0; }
.client .ic { color: var(--azul); }
.client-text { display: flex; flex: 1; flex-direction: column; min-width: 0; line-height: 1.2; }
.client-label { color: var(--texto-suave); font-size: 0.8rem; font-weight: 500; }
.client-name { color: var(--azul); font-weight: 700; overflow-wrap: anywhere; }
.client select { width: 100%; max-width: 100%; min-height: 28px; padding: 0.1rem 1.5rem 0.1rem 0; font: inherit; font-weight: 700; color: var(--azul); background: transparent; border: 0; }
.client .button-secondary { flex: none; min-height: 44px; padding: 0 0.9rem; }
.client.sin-elegir { background: var(--cambio-fondo); border-color: var(--aviso-borde); }

/* Enlace para saltar el menú con el teclado: solo se ve al recibir el foco. */
.skip-link { position: absolute; left: -999px; top: 0.5rem; z-index: 100; padding: 0.75rem 1rem; background: var(--azul); color: #ffffff; font-weight: 600; border-radius: var(--radio); }
.skip-link:focus { left: 0.5rem; }

/* Configuración y Mi cuenta (computador): paneles con <details>. Cierran con Esc y al tocar fuera si hay JavaScript. */
.top-actions { display: none; }
.top-panel { position: relative; }
.top-btn { display: flex; align-items: center; gap: 0.55rem; min-height: 44px; white-space: nowrap; padding: 0 0.9rem; border-radius: 12px; color: var(--azul); font-weight: 700; list-style: none; cursor: pointer; }
.top-btn::-webkit-details-marker { display: none; }
.top-btn:hover { background: var(--fondo); }
.top-panel[open] > .top-btn { background: var(--tinte); }
.top-btn.aqui { box-shadow: inset 0 -4px 0 var(--naranja); border-radius: 12px 12px 0 0; }
.avatar { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--azul); color: #ffffff; font-family: var(--fuente-titulo); font-weight: 600; font-size: 1rem; }
.avatar-lg { width: 48px; height: 48px; font-size: 1.15rem; }
.pop { position: absolute; right: 0; top: calc(100% + 8px); z-index: 40; background: var(--superficie); border: 1px solid var(--linea); border-radius: 16px; box-shadow: var(--sombra-panel); }
.acct-pop { width: 320px; padding: 0.5rem; }
.acct-head { display: flex; gap: 0.75rem; align-items: center; margin-bottom: 0.4rem; padding: 0.75rem; border-bottom: 1px solid var(--linea); }
.acct-head p { margin: 0; line-height: 1.3; overflow-wrap: anywhere; }
.acct-name { color: var(--azul); font-weight: 700; }
.acct-sub { color: var(--texto-suave); font-size: 0.9rem; }
.menu-list { margin: 0; padding: 0; list-style: none; }
.menu-list form { margin: 0; }
.menu-list a, .menu-list button { display: flex; align-items: center; gap: 0.75rem; width: 100%; min-height: 48px; padding: 0 0.75rem; border: 0; border-radius: 10px; background: none; color: var(--texto); font: inherit; text-align: left; text-decoration: none; cursor: pointer; }
.menu-list a:hover, .menu-list button:hover { background: var(--fondo); }
.menu-list .ic { color: var(--azul); }
.menu-sep { height: 1px; margin: 0.4rem 0; background: var(--linea); }

/* Panel de Configuración: categorías a la izquierda y sus opciones a la derecha (botones de opción, sin JavaScript). */
.cfg-pop { width: min(760px, 92vw); overflow: hidden; }
.cfg-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.9rem 1.25rem; border-bottom: 1px solid var(--linea); }
.cfg-top h2 { margin: 0; font-size: 1.2rem; }
.cfg { display: block; }
.cfg-cat { display: block; }
.cfg-cat > label { display: none; }
.cfg-p { padding: 1rem 1.25rem; }
.cfg-p h3 { margin: 0 0 0.6rem; font-family: var(--fuente-titulo); font-size: 1.05rem; color: var(--azul); }
.cfg-p a { display: flex; gap: 0.85rem; align-items: flex-start; min-height: 56px; padding: 0.7rem 0.75rem; border-radius: 12px; color: var(--texto); text-decoration: none; }
.cfg-p a:hover { background: var(--fondo); }
.cfg-p a .ic { margin-top: 0.15rem; color: var(--azul); }
.cfg-p a b { display: block; color: var(--azul); }
.cfg-p a[aria-current="page"] { background: var(--tinte); }
.cfg-text > span { display: block; color: var(--texto-suave); font-size: 0.92rem; }
.cfg-page { padding: 0; overflow: hidden; }

/* ---------- Menú lateral azul (computador) y cajón (celular y tableta) ---------- */
.shell { display: block; }
.sidebar { display: flex; flex-direction: column; gap: 0.25rem; padding: 1rem 0.75rem; background: var(--azul); color: #ffffff; }
.sidebar ul { display: flex; flex-direction: column; gap: 0.25rem; margin: 0; padding: 0; list-style: none; }
.sidebar form { margin: 0; }
.sidebar a, .sidebar button, .sidebar summary { position: relative; display: flex; align-items: center; gap: 0.85rem; width: 100%; min-height: 48px; padding: 0 0.9rem; border: 0; border-radius: 12px; background: none; color: #e8edf7; font: inherit; font-weight: 500; font-size: 1.02rem; text-align: left; text-decoration: none; cursor: pointer; list-style: none; }
.sidebar summary::-webkit-details-marker { display: none; }
.sidebar a:hover, .sidebar button:hover, .sidebar summary:hover { background: var(--azul-hover); color: #ffffff; }
.sidebar a[aria-current="page"] { background: var(--azul-hover); color: #ffffff; font-weight: 700; box-shadow: inset 4px 0 0 var(--naranja); }
.sidebar .avatar { width: 32px; height: 32px; background: #ffffff; color: var(--azul); font-size: 0.85rem; }
.sidebar .menu-list a, .sidebar .menu-list button { color: #e8edf7; }
.sidebar .menu-list .ic { color: #ffffff; }
.sidebar .menu-sep { background: rgba(255, 255, 255, 0.18); }
.sidebar .close { border: 1px solid rgba(255, 255, 255, 0.35); }
.sidebar .sidebar-bottom { margin-top: auto; padding-top: 0.75rem; border-top: 1px solid rgba(255, 255, 255, 0.18); }
.tip { display: none; }

@media (max-width: 63.99rem) {
  /* Cajón: el navegador lo abre desde el botón «Menú» (atributo `popover`), con Esc y tocando fuera. */
  @supports selector(:popover-open) {
    .sidebar:not(:popover-open) { display: none; }
    .sidebar:popover-open { position: fixed; inset: 0 auto 0 0; width: min(320px, 88vw); height: 100dvh; margin: 0; border: 0; overflow-y: auto; }
    .sidebar::backdrop { background: rgba(0, 23, 64, 0.55); }
  }
  .sidebar .only-narrow { display: block; }
  .sidebar .close.only-narrow, .sidebar .menu-extra.only-narrow { display: flex; }
  .sidebar .close { margin-bottom: 0.5rem; }
  .only-wide { display: none; }
  .sidebar details > .menu-list { padding-left: 0.5rem; }
}

@media (min-width: 64rem) {
  .topbar { position: sticky; top: 0; height: var(--alto-top); flex-wrap: nowrap; gap: 1rem; padding: 0 1.25rem 0 0; }
  .menu-btn { display: none; }
  .brand-box { order: 0; flex: none; width: var(--lado); padding: 0 1.25rem; }
  body:not(.with-menu) .brand-box { width: auto; }
  .brand .logo { width: 160px; }
  .client { order: 1; flex: 0 1 30rem; width: auto; }
  .client select { max-width: 16rem; }
  .top-actions { order: 2; display: flex; flex: none; align-items: center; gap: 0.6rem; margin-left: auto; }
  .top-simple { margin-left: auto; }
  .shell-with-menu { display: grid; grid-template-columns: var(--lado) minmax(0, 1fr); align-items: start; }
  .sidebar { position: sticky; inset: auto; top: var(--alto-top); width: auto; height: calc(100vh - var(--alto-top)); margin: 0; border: 0; overflow: visible; }

  /* Menú plegado: solo íconos (cada uno con su nombre en `title`, `aria-label` y un globo al pasar o enfocar). */
  .collapsed .brand .logo { display: none; }
  .collapsed .brand .imago { display: block; }
  .collapsed .brand-box { justify-content: center; padding: 0; }
  .collapsed .sidebar { padding-inline: 0.75rem; }
  .collapsed .sidebar a, .collapsed .sidebar button { justify-content: center; padding: 0; }
  .collapsed .lbl { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
  .collapsed a:hover .tip, .collapsed a:focus-visible .tip, .collapsed button:hover .tip, .collapsed button:focus-visible .tip { position: absolute; left: calc(100% + 10px); top: 50%; z-index: 60; display: block; padding: 0.35rem 0.7rem; background: #ffffff; color: var(--azul); border: 1px solid var(--linea); border-radius: 8px; box-shadow: var(--sombra-panel); font-size: 0.95rem; font-weight: 700; white-space: nowrap; transform: translateY(-50%); }

  /* Configuración en dos columnas: categorías (botones de opción) y opciones. */
  .cfg { display: grid; grid-template-columns: 290px minmax(0, 1fr); grid-auto-rows: min-content; align-items: start; background: linear-gradient(to right, var(--fondo) 289px, var(--linea) 289px 290px, var(--superficie) 290px); }
  .cfg-cat { display: contents; }
  .cfg-cat > label { display: flex; grid-column: 1; align-items: center; gap: 0.7rem; min-height: 48px; margin: 0 0.75rem; padding: 0 0.75rem; border-radius: 10px; color: var(--azul); font-weight: 600; cursor: pointer; }
  .cfg-cat:first-child > label { margin-top: 0.75rem; }
  .cfg-cat > label .ic-end { margin-left: auto; color: var(--texto-suave); }
  .cfg-cat > label:hover { background: var(--tinte); }
  .cfg-cat > .cfg-p { grid-column: 2; grid-row: 1 / span 99; min-height: 16rem; }
  .cfg:not(.cfg-solo) .cfg-cat > .cfg-p { display: none; }
  .cfg:not(.cfg-solo) .cfg-cat > input:checked ~ .cfg-p { display: block; }
  .cfg-cat > input:checked + label { background: var(--superficie); box-shadow: inset 4px 0 0 var(--naranja), 0 1px 3px rgba(0, 23, 64, 0.12); }
  .cfg-cat > input:focus-visible + label { outline: 3px solid var(--naranja); outline-offset: 2px; }
  .cfg-solo { display: block; background: none; }
  .cfg-solo .cfg-cat > .cfg-p { min-height: 0; }
}

/* ---------- Estructura de la página ---------- */
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 0.1rem 0.4rem; margin: 0; color: var(--texto-suave); font-size: 0.95rem; }
.crumbs a { display: inline-flex; align-items: center; gap: 0.35rem; min-height: 44px; }
.eyebrow { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--texto-suave); font-size: 0.85rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }

/* ---------- Inicio: «¿Qué desea hacer?» ---------- */
.group-title { margin: 0 0 0.9rem; font-size: 1.3rem; }
.cards { display: grid; grid-template-columns: 1fr; gap: 1.1rem; margin: 0; padding: 0; list-style: none; }
.cards > li { max-width: none; }
.tile { display: flex; flex-direction: row; align-items: center; gap: 1rem; height: 100%; min-height: 0; padding: 1rem; background: var(--superficie); border: 1px solid var(--linea); border-radius: 18px; color: var(--texto); text-decoration: none; transition: box-shadow 0.15s, border-color 0.15s; }
.tile:hover { border-color: var(--azul); box-shadow: 0 8px 22px rgba(0, 23, 64, 0.12); }
.tile-text { display: flex; flex-direction: column; align-items: flex-start; gap: 0.3rem; min-width: 0; }
.tile .titulo { color: var(--azul); font-family: var(--fuente-titulo); font-size: 1.2rem; font-weight: 600; line-height: 1.25; }
.tile p { margin: 0; max-width: none; color: var(--texto-suave); font-size: 0.98rem; }
.circle { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 52px; height: 52px; border-radius: 50%; background: var(--tinte); color: var(--azul); }
.circle .ic { width: 1.8rem; height: 1.8rem; }
.tile:hover .circle { background: var(--azul); color: #ffffff; }
.empty-state { max-width: 40rem; }
.empty-state .circle { width: 60px; height: 60px; margin-bottom: 1rem; }
.empty-state h2 { margin-bottom: 0.5rem; }
.message-icon { display: flex; align-items: flex-start; gap: 0.75rem; }
.message-icon .ic { margin-top: 0.1rem; }

@media (min-width: 40rem) {
  .cards { grid-template-columns: repeat(auto-fill, minmax(17.5rem, 1fr)); }
  .tile { flex-direction: column; align-items: flex-start; gap: 0.8rem; min-height: 190px; padding: 1.4rem; }
  .tile .circle { width: 60px; height: 60px; }
}

.messages { list-style: none; margin: 0 0 1rem; padding: 0; }
.message { max-width: none; padding: 0.9rem 1.1rem; border: 1px solid var(--linea); border-radius: var(--radio); margin: 0 0 0.75rem; font-weight: 600; background: var(--superficie); border-left: 5px solid var(--azul); overflow-wrap: anywhere; }
.message-success { border-left-color: var(--ok); color: var(--ok); }
.message-warning { border-left-color: var(--aviso-borde); color: var(--aviso); }
.message-error { border-left-color: var(--error); color: var(--error); }
.message-info { border-left-color: var(--azul); color: var(--azul); }
.message a { color: inherit; }

/* Tres anchos (PO-007): `.page` para formularios (46 rem); `.page-wide` para listas y detalles (todo el contenedor). */
.page { max-width: 46rem; margin: 0 auto; padding: 1.25rem 1rem 4rem; }
.page-wide { max-width: 70rem; }
main { text-align: left; hyphens: manual; }
main p { margin: 0 0 var(--esp-2); }
main p, main li { max-width: 70ch; }
main > * + * { margin-top: var(--esp-3); }
main > .messages + *, main > .back-link + *, main > .crumbs + *, main > .page-header { margin-top: 0; }
main > .page-header + * { margin-top: var(--esp-3); }
main > .callout + .callout { margin-top: 0.75rem; }
main > .callout { max-width: none; margin-bottom: var(--esp-3); }  /* del ancho de la tarjeta o tabla de abajo */
.callout + .card { margin-top: var(--esp-3); }  /* «Antes de empezar» dentro de un contenedor (Activos vacío): 1,5 rem hasta la tarjeta */

h1, h2, h3 { font-family: var(--fuente-titulo); }
h1 { color: var(--azul); font-size: 1.85rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; margin: 0.5rem 0 0; }
main a { color: var(--azul); }

/* Cabecera de página: título y subtítulo a la izquierda, botón principal a la derecha. */
.page-header { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--esp-2) var(--esp-3); }
.page-title h1 { margin: 0; }
.page-subtitle { margin: 0.25rem 0 0; color: var(--texto-suave); }
.back-link, .text-link { display: inline-flex; align-items: center; min-height: 44px; margin-bottom: 0.5rem; }

.card { background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio-tarjeta); padding: 1.5rem 1.4rem; }
.card h2 { color: var(--azul); font-size: 1.3rem; font-weight: 700; letter-spacing: -0.01em; line-height: 1.3; margin: 0 0 var(--esp-2); }
.card > :last-child { margin-bottom: 0; }
.card-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem var(--esp-2); margin-bottom: var(--esp-2); }
.card-head h2 { margin: 0; }
.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); gap: var(--esp-3); align-items: start; }
.card-grid > .card { margin-top: 0; }
.card-grid .card-wide { grid-column: 1 / -1; }
.client-layout { grid-template-columns: minmax(0, 1fr); }
.module-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); gap: 0 2rem; }
.card-table { padding: 0.75rem 0.9rem; overflow-x: auto; overflow-y: hidden; }  /* red de seguridad (H3.17): si una tabla no cabe, se desplaza y no se corta */
.card-table .stack-table { margin-bottom: 0; }

.status { font-weight: 600; margin: 0 0 0.5rem; }
.status-ok { color: var(--ok); }
.status-error { color: var(--error); }
.status-small { font-size: 0.9rem; }
.status-area { margin-top: 1.75rem; }
.hint { color: var(--texto-suave); margin-top: 0; }
.page-end { margin-top: var(--esp-4); }
.already-in strong, .already-in .button-secondary { overflow-wrap: anywhere; }  /* un correo largo se parte en líneas (H3.16) */
.already-in .button-secondary { max-width: 100%; text-align: center; }

/* Botón principal: azul, forma de píldora. Botón secundario: fondo azul claro, sin contorno. */
.button, .button-secondary, .button-danger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 44px;
  padding: 0.55rem 1.5rem;
  border: 0;
  border-radius: 999px;
  text-decoration: none;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.button { background: var(--azul); color: #ffffff; }
.button:hover { background: var(--azul-hover); }
.button-danger { background: var(--error); color: #ffffff; }  /* solo para confirmar lo que nunca se deshace (PO20.3) */
.button-danger:hover { background: var(--error-hover); }
.button-secondary { background: var(--tinte); color: var(--azul); }
.button-secondary:hover { background: var(--tinte-hover); }
.button-secondary:disabled, .button-secondary[aria-disabled="true"] { color: var(--texto-suave); background: var(--fondo); cursor: not-allowed; }

/* Formularios */
.form fieldset { border: 0; margin: 0 0 1.75rem; padding: 0; }
.form .subtitle { color: var(--azul); font-weight: 700; font-size: 1rem; margin: 1.25rem 0 0.5rem; }
.form legend { color: var(--azul); font-weight: 700; font-size: 1.15rem; padding: 0; margin-bottom: 0.9rem; }
.form fieldset.imei-group { margin-bottom: 1.1rem; padding-top: 1rem; border-top: 1px solid var(--linea); }  /* PO-012: el grupo IMEI se lee como un bloque; dentro de «Identificación» su título es más chico */
.imei-group .check-field .field-help, .imei-group .check-field .field-error { margin-left: 1.85rem; }  /* ayuda y error alineados con el texto de la casilla */
.form fieldset fieldset.imei-group legend { font-size: 1rem; }
.field { margin-bottom: 1.1rem; }
.field label { display: block; font-weight: 600; margin-bottom: 0.3rem; }
.field input, .field select, .field textarea {
  display: block;
  width: 100%;
  min-height: 46px;
  padding: 0.6rem 0.9rem;
  font: inherit;
  border: 1px solid var(--borde-campo);
  border-radius: var(--radio);
  background: var(--superficie);
}
.field textarea { resize: vertical; line-height: 1.45; }
.field-invalid input, .field-invalid select, .field-invalid textarea { border-color: var(--error); border-width: 2px; }
.field-help { color: var(--texto-suave); font-size: 0.9rem; margin: 0.3rem 0 0; max-width: 60ch; }
.filters-note { margin-bottom: 1rem; }
.field-error { color: var(--error); font-weight: 600; margin: 0.3rem 0 0; }
.form-errors { color: var(--error); font-weight: 600; margin-bottom: 1rem; }
.form-errors p { margin: 0 0 0.25rem; }
.required-mark { font-weight: 400; }

/* «Ojito» de la contraseña (PO-004): el botón va dentro del campo, a la derecha. Nace oculto: lo muestra el script. */
.password-field { position: relative; }
.password-field input { padding-right: 3rem; }
.password-toggle { position: absolute; top: 0; right: 0; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; color: var(--azul); background: none; border: 0; border-radius: var(--radio); cursor: pointer; }
.password-toggle[hidden] { display: none; }
input[type="password"]::-ms-reveal, input[type="password"]::-ms-clear { display: none; }  /* Edge trae su propio ojo: queda solo el nuestro */
.password-toggle:hover { background: var(--tinte); }
.password-field .eye-open, .password-field.is-visible .eye-closed { display: none; }
.password-field.is-visible .eye-open { display: block; }

.choice-group { min-width: 0; }
.choice { margin-bottom: 0.5rem; }
.choice label { display: flex; align-items: center; gap: 0.6rem; min-height: 44px; font-weight: 600; cursor: pointer; }
.choice input[type="radio"] { width: 1.25rem; height: 1.25rem; margin: 0; flex: none; accent-color: var(--azul); }
.choice .field-help { margin: 0 0 0 1.85rem; }

/* H3.1b: lista de personas para elegir. Cada opción es una caja de al menos 44 px con tres líneas (nombre, correo, rol);
   la elegida lleva el borde azul de 2 px además del radio marcado (nunca solo color). */
.person-picker .person-option { display: flex; align-items: flex-start; gap: 0.6rem; min-height: 44px; padding: 0.4rem 0.75rem; border: 1px solid var(--linea); border-radius: var(--radio); }
.person-picker .person-option:has(input:checked) { border-color: var(--azul); box-shadow: inset 0 0 0 1px var(--azul); }
.person-picker .person-option:has(input:focus-visible) { outline: 3px solid var(--naranja); outline-offset: 2px; }
.person-picker input[type="radio"] { margin-top: 0.7rem; }
.person-picker .person-option label { display: block; flex: 1 1 auto; min-width: 0; min-height: 44px; padding: 0.35rem 0; font-weight: 400; overflow-wrap: anywhere; }
.person-picker .person-name { display: block; font-weight: 700; }
.person-picker .person-email { display: block; }
.person-picker .person-option .field-help { display: block; margin: 0; }

/* Caja informativa: fondo azul muy claro, sin línea lateral. */
.callout { background: var(--tinte-suave); border-radius: var(--radio); padding: 0.9rem 1.25rem; font-size: 0.95rem; max-width: calc(70ch + 2.5rem); }
.callout li { margin-bottom: 0.25rem; }
.card > .callout { margin-bottom: var(--esp-3); }
.callout p:first-child strong, .callout-fold summary { font-size: 0.85rem; letter-spacing: 0.02em; color: var(--azul); }
.callout-fold summary { display: flex; align-items: center; min-height: 44px; font-weight: 700; cursor: pointer; }
.callout p { margin: 0 0 0.75rem; }
.callout p:last-child { margin-bottom: 0; }
.form .callout { margin: 1.25rem 0 0; }
.callout ul { margin: 0 0 0.75rem; padding-left: 1.25rem; }
.callout ul:last-child { margin-bottom: 0; }
.callout .button-secondary { background: var(--superficie); }
.callout .button-secondary:hover { background: var(--tinte-hover); }


.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* Bitácora: filtros en rejilla, tabla que se apila en celular y detalle desplegable. */
.filter-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 0 1rem; }
.filter-row > .filter-wide { grid-column: 1 / -1; } /* un filtro con opciones largas ocupa toda la fila (selector «Ver») */
.button-row, .pager { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; }
.button-row-spaced { margin-top: 1rem; }  /* la fila de botones no queda pegada a la tabla de arriba */
.pager { margin-top: 1rem; }
.pager .field-help { margin: 0; }
.list-count { margin: 0 0 0.5rem; color: var(--texto-suave); }
.stack-table, .changes-table { width: 100%; border-collapse: collapse; background: var(--superficie); }
.stack-table { border: 1px solid var(--linea); border-radius: var(--radio-tarjeta); overflow: hidden; }
.stack-table th, .stack-table td, .changes-table th, .changes-table td {
  text-align: left;
  vertical-align: top;
  padding: 0.8rem 1rem;
  border-bottom: 1px solid var(--linea);
  overflow-wrap: break-word;
}
.stack-table > thead > tr > th, .stack-table > tbody > tr > td, .stack-table > tbody > tr > th { padding: 1rem 1.25rem; vertical-align: middle; }
.stack-table-dense > thead > tr > th, .stack-table-dense > tbody > tr > td { padding: 0.6rem 0.9rem; }
.stack-table > tbody > tr:last-child > td, .stack-table > tbody > tr:last-child > th { border-bottom: 0; }
.stack-table > thead > tr > th { white-space: nowrap; }
.stack-table thead th, .changes-table thead th { color: var(--texto-suave); font-weight: 600; font-size: 0.85rem; background: var(--fondo); }
.cell-strong { font-weight: 600; }
.event-detail { margin-top: 0.25rem; }
.event-detail summary { display: flex; align-items: center; min-height: 44px; color: var(--azul); font-weight: 600; cursor: pointer; }
.event-detail p { margin: 0.25rem 0; }
.changes-table { margin-top: 0.5rem; font-size: 0.95rem; }
.changes-table th[scope="row"] { font-weight: 600; }
.row-changed th, .row-changed td { background: var(--cambio-fondo); }
.changed-mark { color: var(--aviso); font-weight: 700; }
.working { margin-left: 0.75rem; color: var(--texto-suave); font-size: 0.9rem; }
.last-test { margin-top: 1rem; }

/* Clientes (H2.1): etiqueta de estado, datos en lista, casilla de módulo y tabla dentro de una tarjeta. */
.badge { display: inline-block; padding: 0.05rem 0.65rem; border: 1px solid currentColor; border-radius: 999px; font-size: 0.85rem; font-weight: 600; line-height: 1.5; vertical-align: middle; white-space: nowrap; }
.col-actions .badge { padding: 0.3rem 0.9rem; margin-right: 0.5rem; }  /* «La pidió usted»: con aire, lejos del botón */
.badge .ic { margin-right: 0.25rem; }
.badge-ok { color: var(--ok); background: var(--superficie); }
.badge-warn { color: var(--aviso); background: var(--superficie); }
.plain-details { margin: 0 0 var(--esp-2); }
.plain-details > summary { display: flex; align-items: center; min-height: 44px; color: var(--azul); font-weight: 600; cursor: pointer; }
.badge-operator, .badge-info { color: var(--azul); background: var(--tinte); }  /* «Este mes» (H3d.2) usa el mismo aspecto */
h1 .badge { font-size: 0.9rem; letter-spacing: 0; }
.cell-sub { display: block; max-width: 52ch; color: var(--texto-suave); font-size: 0.9rem; overflow-wrap: anywhere; }
.row-inactive td { color: var(--texto-suave); }
.data-list { margin: 0 0 var(--esp-2); }
.data-list dt { color: var(--texto-suave); font-size: 0.9rem; font-weight: 600; margin-top: 0.75rem; }
.data-list dd { margin: 0; overflow-wrap: anywhere; }
.inline-form { margin: 0; }
.button-row .field-help { flex-basis: 100%; margin: 0; }
.card .stack-table { border: 0; border-radius: 0; }
.module-row { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 0 1rem; padding: 0.35rem 0; border-top: 1px solid var(--linea); }
.module-row:first-of-type { border-top: 0; }
.module-grid > .module-row { border-top: 0; border-bottom: 1px solid var(--linea); }
.module-row label { display: flex; align-items: center; gap: 0.7rem; min-height: 44px; cursor: pointer; }
input[type="checkbox"] { width: 1.25rem; height: 1.25rem; margin: 0; flex: none; accent-color: var(--azul); }
.module-name { font-weight: 700; }
.module-state { color: var(--texto-suave); font-size: 0.9rem; font-weight: 600; }
.module-row .field-help { grid-column: 1 / -1; margin: 0 0 0.35rem 1.95rem; }
.form > .field-help + .button { margin-top: 1rem; }

/* Personas y política de datos (H2.3, PO-002): casilla con enlace, secreto de un solo uso y texto legal. */
.check-field { margin-bottom: 1.1rem; }
.check-field label { display: flex; align-items: flex-start; gap: 0.6rem; min-height: 44px; padding: 0.4rem 0; font-weight: 600; cursor: pointer; }
.check-field input[type="checkbox"] { margin: 0.15rem 0 0; }
.check-field.field-invalid .field-error { margin-left: 1.85rem; }
.policy-line { margin-top: 0.9rem; }
.policy-leave { margin-top: 1rem; }
.secret-card label { display: block; font-weight: 700; color: var(--azul); margin-bottom: 0.4rem; overflow-wrap: anywhere; }
.secret-value {
  display: block;
  width: 100%;
  min-height: 44px;
  padding: 0.6rem 0.9rem;
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 1rem;
  color: var(--texto);
  background: var(--tinte);
  border: 1px solid var(--borde-campo);
  border-radius: var(--radio);
  user-select: all;
  -webkit-user-select: all;
  overflow-wrap: anywhere;  /* el enlace largo se parte en líneas: se ve completo en el celular */
  resize: none;
}
.policy-text h2 { margin-top: 1.5rem; }
.policy-text h2:first-child { margin-top: 0; }
.policy-text { overflow-wrap: anywhere; }
.policy-legacy { white-space: pre-line; }  /* la versión 1.0 (legado) se muestra como texto, con sus saltos de línea */
.policy-text p, .policy-text li { max-width: 68ch; line-height: 1.65; }

/* Matriz de permisos por cuadros (H3.12): cinco tarjetas plegables con una fila por función, igual en computador y celular. */
.cuadro-lista { display: grid; gap: var(--esp-2); margin-top: var(--esp-3); }
.cuadro { background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio-tarjeta); }
.cuadro > summary { display: flex; align-items: center; gap: 0.25rem; min-height: 56px; padding: 0.4rem 1.4rem; cursor: pointer; list-style: none; color: var(--azul); }
.cuadro > summary::-webkit-details-marker, .fn-unused > summary::-webkit-details-marker, .cuadro-mini > summary::-webkit-details-marker { display: none; }
.cuadro > summary::before, .fn-unused > summary::before, .cuadro-mini > summary::before { content: ""; flex: none; width: 0.55rem; height: 0.55rem; margin-right: 0.75rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); transition: transform 0.15s; }
.cuadro[open] > summary::before, .fn-unused[open] > summary::before, .cuadro-mini[open] > summary::before { transform: rotate(45deg); }
.cuadro > summary:focus-visible, .fn-unused > summary:focus-visible, .cuadro-mini > summary:focus-visible { outline: 3px solid var(--naranja); outline-offset: 2px; }
.cuadro > summary h2 { margin: 0; font-size: 1.3rem; flex: 1 1 auto; }
.cuadro-count { color: var(--texto-suave); font-size: 0.9rem; white-space: nowrap; }
.cuadro-body { padding: 0 1.4rem 1.25rem; }
.cuadro-body > .field-help { margin: 0 0 0.5rem; }
.fn-module { border: 0; margin: 1.25rem 0 0; padding: 0; min-width: 0; }
/* `.form fieldset` le da 1.75rem de margen abajo a cada módulo; en «Autoservicio del empleado» (una sola casilla, sin bloque
   de «funciones sin uso» debajo) dejaba un hueco de más al pie del cuadro. */
#autoservicio .fn-module { margin-bottom: 0; }
.fn-module > legend { padding: 0; font-family: Outfit, system-ui, sans-serif; font-size: 1.1rem; font-weight: 700; color: var(--azul); }
.fn-needs { margin: 0.2rem 0 0.4rem; font-size: 0.9rem; color: var(--texto-suave); max-width: 60ch; }
.form-errors .text-link { display: inline; min-height: 0; margin: 0; }
.callout .text-link, .field-help .text-link, .text-link-inline { display: inline; min-height: 0; margin: 0; }  /* enlace dentro de una frase: no la parte */
.fn-needs .text-link { display: inline; min-height: 0; margin-bottom: 0; }  /* enlace dentro de una frase: no parte la línea */
.fn { border-top: 1px solid var(--linea); padding: 0.1rem 0 0.5rem 0.5rem; border-left: 4px solid transparent; }
.fn-name { display: flex; flex-wrap: wrap; align-items: center; gap: 0.2rem 0.7rem; min-height: 44px; margin: 0; font-weight: 600; cursor: pointer; }
.fn-name input { width: 1.25rem; height: 1.25rem; margin: 0; flex: none; accent-color: var(--azul); }
.fn .field-help { margin: 0 0 0.2rem 2rem; }
.fn .fn-needs { margin-left: 2rem; }
p.fn-name { cursor: default; }
.fn-answer { font-weight: 700; }
.fn-warning { display: flex; gap: 0.6rem; align-items: flex-start; margin: 0.4rem 0 0.2rem 2rem; padding: 0.6rem 0.8rem; background: var(--cambio-fondo); color: var(--aviso); border-radius: var(--radio); font-size: 0.9rem; font-weight: 600; max-width: 60ch; }
.fn-warning .ic { margin-top: 0.1rem; }
.fn-rule-off { display: flex; gap: 0.6rem; align-items: flex-start; margin: 0.4rem 0 0.2rem 2rem; font-size: 0.9rem; font-weight: 700; color: var(--aviso); max-width: 60ch; }  /* H3.12: la regla de esta función está apagada (siempre con texto) */
.fn-rule-off .ic { margin-top: 0.1rem; flex: none; }
.rules-strip { max-width: 70ch; }  /* franja de reglas de control apagadas (H3.12) */
.rules-strip p { margin: 0 0 0.5rem; }
.rules-strip p:not(.rules-strip-title) { font-weight: 400; }
.rules-strip > :last-child { margin-bottom: 0; }
.rules-strip ul { margin: 0.4rem 0 0.6rem; padding-left: 1.25rem; font-weight: 400; }
.rules-strip-links { display: flex; flex-wrap: wrap; gap: 0 1.25rem; }
.rules-strip-links .text-link { display: inline-flex; align-items: center; min-height: 44px; }
@media (max-width: 39.99rem) {
  .rules-table .col-actions .button-secondary { display: block; width: 100%; text-align: center; }  /* Apagar / Encender a ancho completo */
}
.summary-line { margin: 0 0 var(--esp-2); font-family: var(--fuente-titulo); font-size: 1.25rem; }  /* resumen del informe (E2b) */
.plain-list { margin: 0.25rem 0; padding: 0; list-style: none; }
.plain-list li { margin-bottom: 0.25rem; overflow-wrap: anywhere; }
.rules-all-on { display: flex; align-items: center; gap: 0.4rem; }
.waived-mark { margin: 0.5rem 0 0.2rem; }  /* «Decidida con una regla de control apagada» */
.how-to { margin-top: var(--esp-3); max-width: 70ch; }  /* «¿Cómo se hace?» (D-123): cerrado, al final de la pantalla */
.how-to > summary { display: flex; align-items: center; min-height: 44px; font-weight: 700; color: var(--azul); cursor: pointer; }
.how-to > summary:focus-visible { outline: 3px solid var(--naranja); outline-offset: 2px; }
.how-to ol { margin: 0 0 0.75rem; padding-left: 1.5rem; }
.reason-text { margin: 0.25rem 0; overflow-wrap: anywhere; }
.fn-invalid { border-left-color: var(--error); }
.fn-error { margin: 0.2rem 0 0.3rem 2rem; color: var(--error); font-weight: 700; font-size: 0.9rem; }
.fn-unused { margin-top: 1.25rem; border-top: 1px dashed var(--borde-campo); }
.fn-unused > summary { display: flex; align-items: center; min-height: 44px; cursor: pointer; list-style: none; font-weight: 600; color: var(--texto-suave); }
.fn-unused > .field-help { margin: 0 0 0.25rem; }
.save-bar-fija { position: sticky; bottom: 0; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.75rem; padding: 0.75rem 1rem; margin-top: var(--esp-3); background: var(--superficie); border-top: 1px solid var(--linea); }
html:has(.save-bar-fija) { scroll-padding-bottom: 5rem; }  /* solo en la pantalla con la barra fija: el foco no queda tapado */
/* «Lo que puede hacer» una persona (H3.12): un cuadro plegable por grupo, cerrado, solo lectura. */
.cuadro-mini { border-top: 1px solid var(--linea); }
.cuadro-mini-empty { display: flex; align-items: center; gap: 0.75rem; min-height: 44px; max-width: none; margin: 0; padding-left: 1.55rem; color: var(--texto-suave); }
.ability-admin { margin: 0 0 var(--esp-1); }
.cuadro-mini > summary { display: flex; align-items: center; gap: 0.25rem; min-height: 44px; cursor: pointer; list-style: none; color: var(--azul); font-weight: 700; }
.cuadro-mini > summary .cuadro-count { margin-left: 0.75rem; font-weight: 400; }
.cuadro-mini > .field-help { margin: 0 0 0.5rem 1.3rem; }
.ability-list { list-style: none; margin: 0 0 0.75rem 1.3rem; padding: 0; }
.ability-list li { padding: 0.25rem 0; }
.ability-list .field-help { display: block; margin: 0; }

/* Indicadores de carga de HTMX (se desactivaron sus estilos automáticos). */
.htmx-indicator { display: none; }
.htmx-request .htmx-indicator, .htmx-request.htmx-indicator { display: inline; }

@media (max-width: 39.99rem) {
  .button-wide-mobile { display: flex; width: 100%; }
  .htmx-request .working { display: block; margin: 0.5rem 0 0; }
  .page-header > .button { margin-top: 0.25rem; }
}

@media (max-width: 39.99rem) {
  .cuadro > summary { padding: 0.4rem 1rem; flex-wrap: wrap; }
  .cuadro-body { padding: 0 1rem 1rem; }
  .save-bar-fija .button, .save-bar-fija .button-secondary { flex: 1 1 100%; text-align: center; justify-content: center; }
  html:has(.save-bar-fija) { scroll-padding-bottom: 9rem; }  /* la barra ocupa dos filas */
}

/* Tabla que se apila bajo 75 rem (con el menú lateral el contenido es 16 rem más angosto que la pantalla): cada fila es una tarjeta y cada celda lleva su encabezado delante. */
@media (max-width: 74.99rem) {
  .stack-table { border: 0; background: transparent; border-radius: 0; }
  .stack-table > thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
  .stack-table, .stack-table > tbody, .stack-table > tbody > tr, .stack-table > tbody > tr > td, .stack-table > tbody > tr > th { display: block; width: 100%; }
  .stack-table > tbody > tr { margin-bottom: 0.9rem; padding: 0.6rem 1rem; background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio-tarjeta); }
  .stack-table > tbody > tr > td, .stack-table > tbody > tr > th { padding: 0.25rem 0; border: 0; overflow-wrap: anywhere; }
  .stack-table > tbody > tr > td::before { content: attr(data-label) ": "; font-weight: 600; color: var(--texto-suave); }
  .changes-table th, .changes-table td { overflow-wrap: anywhere; }
  .card .stack-table > tbody > tr { background: var(--fondo); border: 0; }
  .card .stack-table > tbody > tr.row-changed { background: var(--cambio-fondo); }
  .page > .stack-table { background: transparent; }
  .col-actions .button-row { margin-top: 0.25rem; }
}

@media (min-width: 40rem) {
  .field-row { display: grid; grid-template-columns: 2fr 1fr; gap: 1rem; }
  .data-list { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: 0.6rem 1rem; }
  .data-list dt { margin-top: 0; }
    .page { padding-top: 2rem; }
  h1 { font-size: 2.2rem; }
  .card { padding: 1.75rem 2rem; }
  .card-table { padding: 0.75rem 0.9rem; }
}

/* Tabla en computador (desde 75 rem): sin saltos de línea en lo corto; las acciones en una sola fila a la derecha. */
@media (min-width: 75rem) {
  .col-nowrap { white-space: nowrap; }
  .access-table .col-name { min-width: 11rem; width: auto; }  /* informe «Quién puede hacer qué»: cinco columnas que caben a 1280 */
  .col-name { min-width: 16rem; width: 45%; }
  /* H3.1b: la lista de custodios tiene una columna más («Cuenta»); sin esto el nombre se queda con casi la mitad y la
     tabla se corta a la derecha. «Mis equipos» tiene seis columnas y la sede no debe partirse en tres líneas. */
  .custodian-table .col-name { min-width: 11rem; width: auto; }
  .my-assets-table .col-name, .my-licenses-table .col-name { min-width: 12rem; width: auto; }  /* H3.1c: «Mis licencias» usa el mismo molde */
  /* H3.17: «Movimientos» tiene cinco columnas y «Registrado por» lleva nombre largo; con los mínimos de arriba la tabla
     medía 977 px en una tarjeta de 905 y la última columna quedaba cortada en el borde. */
  .movements-table .col-name { min-width: 11rem; width: auto; }
  .movements-table .col-desc { min-width: 10rem; }
  .movements-table .col-who { min-width: 9rem; }
  .asset-table .col-short { min-width: 6.5rem; }  /* «Sin dato» no se parte en dos líneas */
  .asset-table .col-name { min-width: 12rem; width: auto; }  /* con sede y custodio de nombre largo, «Acciones» no se corta */
  .my-assets-table > thead > tr > th, .my-assets-table > tbody > tr > td,
  .my-licenses-table > thead > tr > th, .my-licenses-table > tbody > tr > td { padding-left: 0.75rem; padding-right: 0.75rem; }
  .my-assets-table th.col-site { width: 9rem; min-width: 9rem; }
  .cell-support { margin: 0.4rem 0 0; font-size: 0.9rem; overflow-wrap: anywhere; }
  .col-nowrap .cell-sub { font-size: 0.85rem; max-width: none; }
  .col-roles { min-width: 10rem; }
  .col-who { min-width: 10rem; overflow-wrap: anywhere; }
  .col-desc { min-width: 13rem; }
  /* Auditoría: «Quién», «Cliente» y «Acción» se parten en líneas y la descripción toma lo que sobra: sin esto la tabla se
     corta a la derecha y «Desde dónde» queda recortada. */
  .audit-table > thead > tr > th, .audit-table > tbody > tr > td { padding-left: 0.6rem; padding-right: 0.6rem; }
  .audit-table .col-client, .audit-table .col-action { min-width: 6rem; max-width: 9rem; }
  .audit-table .col-who { min-width: 8rem; max-width: 12rem; }
  .audit-table .col-desc { width: 100%; min-width: 12rem; }
  .col-asset { min-width: 9rem; }
  .col-reason { min-width: 10rem; max-width: 16rem; }
  .row-actions .badge { margin-right: 0; }
  .stack-table > thead > tr > :first-child, .stack-table > tbody > tr > :first-child { padding-left: 1.5rem; }
  .stack-table > thead > tr > :last-child, .stack-table > tbody > tr > :last-child { padding-right: 1.5rem; }
  .stack-table > thead > tr > .col-actions, .stack-table > tbody > tr > .col-actions { white-space: nowrap; text-align: right; width: 1%; }
  .stack-table > thead > tr > .col-end, .stack-table > tbody > tr > .col-end { text-align: right; }
  .stack-table > tbody > tr > .col-actions .button-row, .row-actions { display: flex; flex-wrap: nowrap; justify-content: flex-end; gap: 0.5rem; }
  .stack-table .button-secondary { padding: 0.5rem 1.1rem; }
  .card-table { padding: 0; }
  .card-table > .card-head { padding: 1.75rem 2rem 0.5rem; margin: 0; }  /* mismo margen que las demás tarjetas (`.card`): los títulos quedan alineados */
  .card-table > p { padding: 0 1.5rem 1.5rem; }
  .card-table > .summary-line { padding-bottom: 0; margin-bottom: 0.5rem; }  /* «Se agregaron…» no deja un hueco de 60 px antes de la comparación */
  .card-table > .button-row { padding: 0 1.5rem 1.5rem; }  /* acciones al pie de una tarjeta de tabla (la ficha del cliente) */
  .card-table > p:has(+ .button-row) { padding-bottom: 0.75rem; }
  .client-layout { grid-template-columns: minmax(20rem, 24rem) minmax(0, 1fr); grid-template-areas: "datos sedes" "estado sedes" "coordinador sedes" "modulos modulos" "reglas reglas" "historial historial"; }
  .client-layout > .area-datos { grid-area: datos; }
  .client-layout > .area-sedes { grid-area: sedes; }
  .client-layout > .area-estado { grid-area: estado; }
  .client-layout > .area-coordinador { grid-area: coordinador; }
  .client-layout > .area-modulos { grid-area: modulos; }
  .client-layout > .area-reglas { grid-area: reglas; }
  .client-layout > .area-historial { grid-area: historial; }
  .card-table > .pager { padding: 0 1.5rem 1.5rem; margin-top: 0; }
}

/* Ancho del contenido: con el menú lateral (desde 64 rem) pegado a él; sin menú (público), centrado. */
@media (min-width: 40rem) and (max-width: 63.99rem) {
  .page { padding-inline: 2rem; }
}
@media (min-width: 64rem) {
  .with-menu .page { margin: 0; padding-inline: 2.5rem; }
}

/* Inventario (H3.1): etiquetas de estado nuevas, filtros de la lista, índice de la hoja de vida y pares de campos. */
.badge-error { color: var(--error); background: var(--superficie); }
.badge-neutral { color: var(--texto-suave); background: var(--tinte); }
.filters { margin-bottom: var(--esp-2); }
.filters > summary { display: flex; align-items: center; min-height: 44px; color: var(--azul); font-weight: 700; cursor: pointer; }
.filters .form { margin-top: 0.5rem; }
.field-help-after { margin-bottom: 1.1rem; }
.page-nav { margin-bottom: var(--esp-2); }
.page-nav p { margin: 0 0 0.25rem; font-weight: 600; }
.page-nav ul { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; margin: 0; padding: 0; }
.page-nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 1rem; color: var(--azul); font-weight: 600; background: var(--tinte); border-radius: var(--radio); text-decoration: none; }
.page-nav a:hover { background: var(--tinte-hover); }
.card h3 { margin: 1.5rem 0 0.25rem; font-size: 1.05rem; color: var(--azul); }
.card h3:first-of-type { margin-top: 0.5rem; }
.data-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); gap: 0 var(--esp-3); }
.card .field-help + .data-list { margin-top: 0.75rem; }
.help-list { margin: 0.3rem 0 1.1rem; padding-left: 1.25rem; }
.help-list li { margin-bottom: 0.2rem; }
@media (min-width: 40rem) {
  .field-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
}

/* Capturas del recolector (H3.2 y H3.3): indicador de pasos, cliente activo y bloque de comparación, buscador de activos. */
.steps { display: flex; flex-wrap: wrap; gap: 0.25rem 1.5rem; margin: 0 0 var(--esp-2); padding: 0; list-style: none; color: var(--texto-suave); }
.steps li { min-height: 1.5rem; }
.steps [aria-current="step"] { color: var(--azul); font-weight: 700; }
.client-active { margin: 0 0 var(--esp-2); padding: 0.75rem 1rem; background: var(--tinte-suave); border-radius: var(--radio); font-size: 1.25rem; color: var(--azul); overflow-wrap: anywhere; }
.client-check { margin: 0 0 var(--esp-2); padding: 1rem 1.25rem; background: var(--superficie); border: 2px solid var(--azul); border-radius: var(--radio-tarjeta); }
.client-check dl { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.1rem; margin: 0 0 0.75rem; }
.client-check dt { color: var(--texto-suave); font-size: 0.9rem; font-weight: 600; margin-top: 0.5rem; }
.client-check dd { margin: 0; font-size: 1.25rem; font-weight: 700; color: var(--azul); overflow-wrap: anywhere; }
.client-check .message { margin-bottom: 0.5rem; }
.asset-picker { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--linea); }
.asset-picker .field { max-width: 32rem; }
.section-summary { display: flex; align-items: center; min-height: 44px; cursor: pointer; }
.section-summary h2 { margin: 0; }
.check-inline { display: inline-flex; align-items: center; justify-content: center; min-width: 48px; min-height: 48px; cursor: pointer; }
.check-inline input[type="checkbox"] { width: 1.75rem; height: 1.75rem; cursor: pointer; }
.finding { padding: 0.75rem 0; border-top: 1px solid var(--linea); }
.finding p { margin: 0 0 0.35rem; }
@media (min-width: 40rem) {
  .client-check dl { grid-template-columns: 16rem minmax(0, 1fr); gap: 0.4rem 1rem; align-items: baseline; }
  .client-check dt { margin-top: 0; }
}
@media (max-width: 39.99rem) {
  .client-active, .client-check dd { font-size: 1.1rem; }
}

/* Resúmenes que se abren (details): una flecha que gira, para que se vean pulsables. */
.event-detail > summary, .filters > summary, .callout-fold > summary, .section-summary, .how-to > summary { list-style: none; }
.event-detail > summary::-webkit-details-marker, .filters > summary::-webkit-details-marker, .callout-fold > summary::-webkit-details-marker, .section-summary::-webkit-details-marker, .how-to > summary::-webkit-details-marker { display: none; }
.event-detail > summary::before, .filters > summary::before, .callout-fold > summary::before, .section-summary::before,
.how-to > summary::before {
  content: ""; flex: none; width: 0.55rem; height: 0.55rem; margin-right: 0.75rem;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); transition: transform 0.15s;
}
details[open] > summary::before { transform: rotate(45deg); }
.section-summary { color: var(--azul); }
.form section > h2, .form section > .subtitle { margin-top: 1.5rem; }

/* Tareas por resolver y cambios por explicar (H3.11): plazo en rojo con texto, filtro de dos botones y tarjetas de la hoja de vida. */
.text-overdue { color: var(--error); font-weight: 600; }
.wrap-anywhere { overflow-wrap: anywhere; }
.filter-links { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 var(--esp-2); }
.filter-links .button-secondary[aria-current="page"] { background: var(--superficie); border: 2px solid var(--azul); font-weight: 700; }  /* la opción actual no parece botón principal */
/* Atajos de periodo del informe (H3d.10): enlaces de texto con su rótulo, para que no parezcan una segunda fila de pestañas. */
.period-links { display: flex; flex-wrap: wrap; align-items: center; gap: 0 1rem; margin: 0 0 var(--esp-2); }
.period-links .period-label { font-weight: 600; color: var(--texto-suave); }
.period-links .text-link { margin-bottom: 0; text-decoration: underline; }
.task-cards { margin: 0; padding: 0; list-style: none; }
.task-card { padding: 1rem 0; border-top: 1px solid var(--linea); }
.task-card:first-child { border-top: 0; padding-top: 0; }
.task-card p { margin: 0 0 0.4rem; }
.task-card .stack-table { margin-bottom: 0.5rem; }
/* PO-013 v1.1: «Le espera» compacto. Una línea por pendiente (48 px). */
.pending { margin: 0 0 var(--esp-3); overflow: hidden; background: var(--superficie); border: 1px solid var(--linea); border-radius: 14px; }
.pending-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 0.6rem; padding: 0.55rem 1rem; border-bottom: 1px solid var(--linea); }
.pending-title { margin: 0; color: var(--azul); font-size: 1.05rem; }
.pending-sub { margin: 0; color: var(--texto-suave); font-size: 0.9rem; }
.pending-list { margin: 0; padding: 0; list-style: none; }
.pending-item { max-width: none; position: relative; display: grid; grid-template-columns: auto auto 1fr auto; align-items: center; gap: 0.2rem 0.75rem; min-height: 48px; padding: 0.4rem 1rem 0.4rem 0.9rem; background: var(--cambio-fondo); border-left: 4px solid var(--aviso-borde); color: var(--aviso); }
.pending-item + .pending-item { border-top: 1px solid var(--linea); }
.pending-late { background: var(--error-fondo); border-left-color: var(--error); color: var(--error); }
.pending-wait { background: var(--tinte-suave); border-left-color: var(--azul); color: var(--azul); }
.pending-item .ic { width: 1.25rem; height: 1.25rem; }
.pending-num { min-width: 2.5rem; padding: 0.05rem 0.5rem; border-radius: 999px; background: currentColor; text-align: center; font-size: 0.9rem; font-weight: 700; line-height: 1.5; }
.pending-num > span { color: #ffffff; }
.pending-text { margin: 0; max-width: none; color: var(--texto); font-size: 0.95rem; }
.pending-go { display: inline-flex; align-items: center; gap: 0.15rem; color: inherit; font-weight: 700; text-decoration: none; white-space: nowrap; }
.pending-go::after { content: ""; position: absolute; inset: 0; }
.pending-item:hover .pending-go { text-decoration: underline; }
.pending-go:focus-visible { outline: none; }
.pending-item:focus-within { outline: 3px solid var(--naranja); outline-offset: -3px; }
@media (max-width: 39.99rem) {
  .pending-item { gap: 0.2rem 0.6rem; padding-right: 0.75rem; }
  .pending-go { align-self: center; }
}
.other-clients { margin-top: var(--esp-3); }
.other-clients .stack-table { margin-top: 0.5rem; }
.card + .message { margin-top: var(--esp-2); }
@media (max-width: 39.99rem) {
  .task-table .col-actions .button-secondary { width: 100%; }
  .task-table > tbody > tr > .col-actions::before { display: none; }
  .other-clients .stack-table .button-secondary { width: 100%; }
  .filter-links .button-secondary { flex: 1 1 auto; white-space: nowrap; }  /* las pestañas («Por mes») no se parten */
}

/* Licencias (H3.4): resumen en cifras, cifras del saldo y apoyo ámbar de «por retirar». */
.figures { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; margin: 0 0 var(--esp-2); padding: 0; list-style: none; }
.figures a { display: inline-flex; align-items: baseline; gap: 0.35rem; min-height: 44px; align-content: center; color: var(--azul); }
.figures strong { font-family: var(--fuente-titulo); font-size: 1.4rem; }
.balance-figures { display: flex; flex-wrap: wrap; gap: var(--esp-2) var(--esp-4); margin: 0 0 var(--esp-2); }
.balance-figures dt { color: var(--texto-suave); font-size: 0.9rem; font-weight: 600; }
.balance-figures dd { margin: 0.15rem 0 0; font-family: var(--fuente-titulo); font-size: 1.6rem; font-weight: 700; color: var(--azul); }
.balance-figures dd .badge { font-size: 1rem; }
.cell-warn { color: var(--aviso); font-weight: 600; }
.cell-warn .ic { vertical-align: -0.1em; }
.callout .inline-form { margin-top: 0.5rem; }
.button[aria-disabled="true"] { background: var(--fondo); color: var(--texto-suave); border: 1px solid var(--linea); cursor: not-allowed; }
.button[aria-disabled="true"]:hover { background: var(--fondo); }
.export-form { margin: 0 0 var(--esp-2); }
@media (max-width: 39.99rem) {
  .figures { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
}

/* Cargar activos desde Excel (H3.6): cifras de la revisión, problemas por fila y «Otras tareas con activos» de Activos. */
.review-figures { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--esp-2); margin: 0 0 var(--esp-2); padding: 0; list-style: none; }
.review-figure { display: flex; flex-direction: column; align-items: flex-start; gap: 0.1rem; padding: 1rem 1.25rem; background: var(--superficie); border: 1px solid var(--linea); border-radius: 14px; color: var(--azul); }
.review-figure .ic { width: 1.5rem; height: 1.5rem; }
.review-figure-number { font-family: var(--fuente-titulo); font-size: 2rem; font-weight: 700; line-height: 1.1; }
.review-figure-label { font-weight: 600; }
.review-figure-ok { color: var(--ok); }
.review-figure-error { color: var(--error); }
.review-figure-zero { color: var(--texto-suave); }  /* con 0 la caja queda gris para no alarmar */
.row-problems { margin: 0; padding-left: 1.1rem; }
.row-problems li { margin-bottom: 0.2rem; overflow-wrap: anywhere; }
.col-row { font-weight: 700; }
.excel-invite { margin-top: var(--esp-3); padding: 1.1rem 1.4rem; background: var(--tinte-suave); border: 1px dashed var(--borde-campo); border-radius: var(--radio-tarjeta); }
.excel-invite p { margin: 0 0 0.75rem; }
.excel-invite p:last-child { margin-bottom: 0; }
h1[tabindex="-1"]:focus, .form-errors[tabindex="-1"]:focus { outline: none; }  /* el foco llega al título al cambiar de paso (lector de pantalla); no es un control */
.more-actions { position: relative; }
.more-actions > summary { list-style: none; cursor: pointer; }
.more-actions > summary::-webkit-details-marker { display: none; }
.more-actions[open] > summary { background: var(--tinte-hover); }
.more-actions-list { position: absolute; right: 0; z-index: 20; display: flex; flex-direction: column; min-width: 15rem; margin: 0.4rem 0 0; padding: 0.4rem; background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio); box-shadow: var(--sombra-panel); list-style: none; }
.more-actions-list a { display: flex; align-items: center; gap: 0.6rem; min-height: 44px; padding: 0.4rem 0.8rem; border-radius: 8px; color: var(--azul); font-weight: 600; text-decoration: none; }
.more-actions-list a:hover { background: var(--tinte); }
.more-actions-list a:focus-visible { outline: 3px solid var(--naranja); outline-offset: -3px; }
@media (max-width: 40rem) {
  .review-figures { grid-template-columns: minmax(0, 1fr); }
  .review-figures.review-figures-row { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; }  /* tres cifras en una fila */
  .review-figures-row .review-figure { padding: 0.75rem; }
  .review-figures-row .review-figure-number { font-size: 1.6rem; }
  .more-actions { width: 100%; }
  .more-actions > summary { width: 100%; }
  .more-actions-list { position: static; box-shadow: none; margin-top: 0.4rem; }
}

/* Mantenimientos (H3d.3): cifras que son enlaces, filas con casilla, navegador de meses y el paso 2 de «Registrar lo hecho». */
.review-figure:has(.review-figure-link) { padding: 0; }
.review-figure-link { display: flex; flex-direction: column; align-items: flex-start; gap: 0.1rem; width: 100%; min-height: 44px; padding: 1rem 1.25rem; border-radius: inherit; color: inherit; text-decoration: none; }
.review-figure-link:hover { background: var(--tinte-suave); }
.review-figure-link:focus-visible { outline: 3px solid var(--naranja); outline-offset: -3px; }
.review-figures-row .review-figure-link { padding: 0.75rem; }
.form .callout + fieldset { margin-top: var(--esp-3); }  /* el título que sigue a un recuadro no queda pegado */
.pick-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; margin: 0 0 var(--esp-1); }
.pick-tools a, .pick-tools button { display: inline-flex; align-items: center; min-height: 44px; color: var(--azul); font-weight: 700; }
.pick-tools button { padding: 0; border: 0; background: none; font: inherit; font-weight: 700; text-decoration: underline; cursor: pointer; }
.pick-list { display: grid; gap: 0.5rem; margin: 0 0 var(--esp-2); padding: 0; list-style: none; }
.pick-row { display: flex; align-items: flex-start; gap: 0.75rem; min-height: 44px; padding: 0.6rem 0.9rem; background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio); cursor: pointer; }
.pick-row:has(input:checked) { border-color: var(--azul); background: var(--tinte-suave); }
.pick-row:focus-within { outline: 3px solid var(--naranja); outline-offset: 2px; }
.pick-row input[type="checkbox"] { flex: none; width: 1.35rem; height: 1.35rem; margin: 0.15rem 0 0; accent-color: var(--azul); }
.pick-row-text { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.pick-row-name { display: block; font-weight: 700; color: var(--azul); }
.pick-row-sub { display: block; color: var(--texto-suave); font-size: 0.9rem; }
.pick-row-state { flex: none; max-width: 45%; text-align: right; }
.pick-row-state .cell-sub { display: block; }
.pick-count { margin: 0; align-self: center; margin-right: auto; font-weight: 700; color: var(--azul); }
.month-nav { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1rem; margin: 0 0 var(--esp-2); }
.month-nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 0.5rem; color: var(--azul); font-weight: 700; }
.month-nav-title { margin: 0; font-size: 1.4rem; text-align: center; }
.month-nav-short { display: none; }
.month-group { margin: 0 0 var(--esp-2); }
.month-group > summary { display: flex; align-items: center; min-height: 44px; color: var(--azul); font-weight: 700; cursor: pointer; }
.record-asset { margin: 0 0 0.5rem; background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio); }
.record-asset[data-problem] { border-color: var(--error); border-width: 2px; }
.record-asset > summary { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.75rem; min-height: 44px; padding: 0.5rem 0.9rem; cursor: pointer; }
.record-asset > summary:focus-visible { outline: 3px solid var(--naranja); outline-offset: 2px; }
.record-asset-name { font-weight: 700; color: var(--azul); overflow-wrap: anywhere; }
.record-asset-open { padding: 0 0.9rem 0.9rem; }
.record-asset-closed { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.25rem 0.75rem; padding: 0.4rem 0.9rem; }
.record-asset-closed .button-secondary { min-height: 44px; }
.record-row { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 2fr); gap: 0.4rem 1rem; padding: 0.6rem 0; border-top: 1px solid var(--linea); }
.record-row .field { margin: 0; }
.record-row-activity { font-weight: 600; overflow-wrap: anywhere; }
.result-table td, .result-table th { overflow-wrap: anywhere; }
.result-issue { color: var(--aviso); font-weight: 700; }
@media (max-width: 39.99rem) {
  .month-nav-long { display: none; }
  .month-nav-short { display: inline; }
  .month-nav-title { flex: 1 0 100%; order: -1; }
  .month-nav a { flex: 1 1 0; justify-content: center; }
  .pick-row { flex-wrap: wrap; }
  .pick-row-state { max-width: none; flex: 1 0 100%; padding-left: 2.1rem; text-align: left; }
  .record-row { grid-template-columns: minmax(0, 1fr); }
  .record-asset-closed .button-secondary { width: 100%; }
}

/* Mantenimientos (H3d.6): lo anulado se ve tachado, con quién, cuándo y por qué debajo; el botón «Anular» y su razón. */
.voided-text { text-decoration: line-through; color: var(--texto-suave); }
.void-line { margin: 0 0 0.25rem; color: var(--texto); font-size: 0.95rem; overflow-wrap: anywhere; }
.visit-items { margin: 0.25rem 0 0; padding: 0; list-style: none; }
.visit-item { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.25rem 0.75rem; padding: 0.4rem 0; border-top: 1px solid var(--linea); overflow-wrap: anywhere; }
.visit-item .void-line, .visit-item .void-reason { flex: 1 0 100%; }
.void-button { min-height: 44px; }
.void-reason { max-width: 60ch; }
@media (min-width: 40rem) {
  .history-table .col-name { min-width: 10rem; width: 16%; }  /* hoja de vida: el detalle (resultados, motivo de la anulación) pide el doble de ancho */
  .history-table .col-detail { min-width: 18rem; width: 42%; }
  .stack-table td.col-visit-items { min-width: 22rem; }  /* «Ver los equipos» con su botón y su razón no se estrecha */
  .month-group > summary { padding: 0 1.5rem; }  /* el título de cada mes queda alineado con el texto de la tabla */
  /* Columnas de texto corto (H3d.10): el plan y quien está a cargo no se parten en cuatro líneas; las fechas y el
     «Descargar soporte» van en una sola línea. En celular las filas se apilan y no aplica. */
  .col-in-charge, .col-plan { min-width: 11rem; }
  .stack-table:has(.col-plan, .col-in-charge) .col-name { min-width: 10rem; width: auto; }  /* con una columna de plan o de a cargo, la primera cede ancho */
  .col-date { white-space: nowrap; }
  .col-date .cell-sub { max-width: none; }
  /* «Lo hecho» de la ficha del plan: con fecha y soporte en una línea, el equipo y el detalle ceden ancho para que la
     tabla quepa en la tarjeta a 1280 px. */
  .visits-table .col-name { min-width: 9rem; width: auto; }
  .visits-table td.col-visit-items { min-width: 16rem; }
  .visits-table > thead > tr > th, .visits-table > tbody > tr > td { padding-left: 0.75rem; padding-right: 0.75rem; }
}
@media (max-width: 39.99rem) {
  .void-button { width: 100%; justify-content: center; text-align: center; }
}

/* Textos y correos (PO19.4): editor, lista de marcadores, vista previa, comparación de versiones y recuento. */
.text-editor, .field textarea.text-editor { font-family: ui-monospace, "Cascadia Mono", "Consolas", "Liberation Mono", monospace; font-size: 0.95rem; line-height: 1.5; min-height: 22rem; tab-size: 4; }
.form-intro { margin: 0 0 var(--esp-2); }
.card-note { margin: 0 0.6rem var(--esp-2); }
.jump-links { margin: 0 0 var(--esp-2); }
.text-table td:nth-child(2) { min-width: 12rem; }
.versions-table .col-reason { min-width: 10rem; overflow-wrap: anywhere; }
.marker-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.75rem; }
.marker-item { background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio); padding: 0.75rem 1rem; }
.marker-item p { margin: 0 0 0.35rem; overflow-wrap: anywhere; }
.marker-item code, .how-table code { font-family: ui-monospace, "Cascadia Mono", "Consolas", monospace; font-size: 0.95rem; font-weight: 700; color: var(--azul); overflow-wrap: anywhere; }
.marker-head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.marker-insert { margin-top: 0.25rem; }
.marker-insert[hidden] { display: none; }
.how-table { margin-bottom: 0.75rem; background: var(--superficie); }
.big-count { margin: 0 0 var(--esp-2); font-size: 1.1rem; }
.big-count strong { font-family: var(--fuente-titulo); font-size: 1.5rem; color: var(--azul); }
.cell-note { color: var(--aviso); font-weight: 600; }
.cell-note .ic { margin-right: 0.25rem; }
.preview-box { background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio); padding: 1rem 1.25rem; margin-top: var(--esp-2); }
#vista-previa { margin-top: var(--esp-2); }
.mail-subject { margin: 0 0 0.5rem; overflow-wrap: anywhere; }
.email-frame { display: block; width: 100%; height: 16rem; border: 1px solid var(--linea); border-radius: var(--radio); background: #ffffff; }
.plain-version { margin-top: 0.75rem; }
.plain-version > summary { display: flex; align-items: center; min-height: 44px; font-weight: 700; color: var(--azul); cursor: pointer; }
.plain-text { margin: 0.5rem 0 0; padding: 0.75rem 1rem; background: var(--tinte-suave); border-radius: var(--radio); white-space: pre-wrap; overflow-wrap: anywhere; font-family: ui-monospace, "Cascadia Mono", "Consolas", monospace; font-size: 0.9rem; }
.diff-table { margin-bottom: 0; }
.diff-mark { font-weight: 700; white-space: nowrap; }
.diff-line { white-space: pre-wrap; overflow-wrap: anywhere; font-family: ui-monospace, "Cascadia Mono", "Consolas", monospace; font-size: 0.9rem; }
.diff-added > td { background: #ecf7ef; }
.diff-added .diff-mark { color: var(--ok); }
.diff-removed > td { background: var(--error-fondo); }
.diff-removed .diff-mark { color: var(--error); }
.diff-removed .diff-line { text-decoration: line-through; }
.diff-gap > td { color: var(--texto-suave); font-style: italic; text-align: center; }
.stack-table > tbody > tr.diff-gap > td::before { content: none; }  /* sin el «:» suelto que el apilado pone a cada celda */
@media (max-width: 39.99rem) {
  .text-editor { font-size: 0.95rem; }
  .button-first-mobile { order: -1; }
  .text-actions .button, .text-actions .button-secondary { flex: 1 1 100%; }
  .marker-insert { width: 100%; }
  .email-frame { height: 26rem; }
}

/* Informe de mantenimientos (H3d.5): cifras que se acomodan solas, fila de totales, textos solo para imprimir y la
   versión para imprimir (`@media print`): sin menú, filtros ni botones; tablas de una fila por línea; sin color de fondo. */
.review-figures-auto { grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)); }
.review-figure-warn { color: var(--aviso); }
.report-compliance { margin: 0 0 var(--esp-1); font-family: var(--fuente-titulo); font-size: 1.5rem; color: var(--azul); }
.report-compliance + .field-help { margin-top: 0; }
.report-actions { margin: 0 0 var(--esp-3); }
.report-actions .field-help { margin-top: 0.5rem; }
.report-actions .button-row { align-items: center; }  /* «Imprimir» a la altura de «Descargar para Excel (CSV)» */
.report-actions .export-form { margin: 0; }  /* el margen de abajo del formulario subía el botón vecino */
.report-table td, .report-table th { overflow-wrap: break-word; }
.report-table > thead > tr > th, .report-table > tbody > tr > td { padding: 0.6rem 0.5rem; }
.report-table > thead > tr > th { white-space: normal; }  /* los títulos largos («Este mes, por hacer») se parten en vez de cortar la tabla */
.report-table .col-name { min-width: 9rem; }
.row-total > td { background: var(--fondo); font-weight: 700; }
.filter-row > .filter-wide { grid-column: 1 / -1; margin: 0 0 0.75rem; }
.tabs-end { margin-left: auto; }
.print-only { display: none; }
.report-summary { margin: 0.25rem 0 0; color: var(--texto-suave); font-weight: 600; }
/* PO20.3: «Revise antes de seguir» (lista de comprobación previa a una acción que no se deshace). Cada fila lleva ícono y
   la palabra «Listo» o «Revise»: nunca solo color. En celular el ícono queda arriba a la izquierda y el texto debajo. */
.checklist { list-style: none; margin: 0 0 var(--esp-2); padding: 0; display: grid; gap: 0.75rem; }
.checklist > li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.25rem 0.75rem; padding: 0.9rem 1rem; border: 1px solid var(--linea); border-left: 5px solid var(--ok); border-radius: var(--radio); background: var(--superficie); }
.checklist > li.check-review { border-left-color: var(--aviso-borde); background: var(--cambio-fondo); }
.checklist .check-icon { color: var(--ok); margin-top: 0.1rem; }
.checklist > li.check-review .check-icon, .checklist > li.check-review .check-state { color: var(--aviso); }
.checklist .check-state { color: var(--ok); font-weight: 700; }
.checklist .check-body > p { margin: 0 0 0.5rem; }
.checklist .check-body > p:last-child { margin-bottom: 0; }
.checklist .check-title { display: flex; flex-wrap: wrap; gap: 0 0.6rem; align-items: baseline; }
.checklist .check-list { list-style: none; margin: 0 0 0.75rem; padding: 0; }
.checklist .check-list li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.25rem 0.75rem; padding: 0.4rem 0; border-top: 1px solid var(--linea); }
.checklist .check-list li > span { min-width: 0; overflow-wrap: anywhere; }
.before-after { display: grid; gap: 0.5rem 1.5rem; margin: 0 0 var(--esp-2); }
.before-after > div { padding: 0.9rem 1rem; border: 1px solid var(--linea); border-radius: var(--radio); }
.before-after h3 { margin: 0 0 0.5rem; font-size: 1rem; }
.before-after .data-list { display: block; margin: 0; }  /* una columna: el recuadro es angosto */
.before-after .data-list dt { margin-top: 0.6rem; }
.before-after .data-list dt:first-child { margin-top: 0; }
@media (min-width: 40rem) {
  .before-after { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 39.99rem) {
  .checklist .check-list li .button-secondary { width: 100%; }
}
@media (max-width: 74.99rem) {
  .report-table td:empty { display: none; }  /* la tarjeta «Total» no muestra «A cargo:» vacío */
}
@media (max-width: 39.99rem) {
  .report-actions .export-form { flex: 1 1 100%; }
}
@media print {
  @page { margin: 1.5cm; }
  html, body { background: #ffffff; color: #000000; font-size: 11pt; }
  .skip-link, .topbar, .sidebar, .demo-banner, .no-print, .how-to, .crumbs, .back-link, .messages { display: none !important; }
  .shell, .shell-with-menu { display: block; }
  .page, .page-wide { max-width: none; margin: 0; padding: 0; }
  .print-only { display: block; }
  h1 .print-only { display: inline; }
  .print-meta, .print-note, .report-summary { margin: 0 0 0.25rem; max-width: none; color: #000000; }
  .print-note { margin-top: 0.75rem; font-size: 9pt; }
  .card, .callout, .review-figure { background: none; border: 1px solid #666666; box-shadow: none; border-radius: 0; break-inside: avoid; }
  .card { padding: 0.5rem; }
  .review-figures-auto { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .review-figure { padding: 0.4rem 0.6rem; color: #000000; }
  .review-figure-ok, .review-figure-error, .review-figure-warn, .review-figure-zero { color: #000000; }
  .review-figure-number { font-size: 1.5rem; }
  .report-compliance { color: #000000; font-size: 1.3rem; }
  /* La tabla que se apila en pantallas angostas vuelve a ser una tabla común: una fila por línea. */
  .stack-table { display: table; width: 100%; border: 1px solid #666666; border-radius: 0; background: none; font-size: 9.5pt; }
  .stack-table > thead { position: static; display: table-header-group; width: auto; height: auto; overflow: visible; clip: auto; }
  .stack-table > tbody { display: table-row-group; width: auto; }
  .stack-table > tbody > tr { display: table-row; width: auto; margin: 0; padding: 0; background: none; border: 0; break-inside: avoid; }
  .stack-table > thead > tr > th, .stack-table > tbody > tr > td { display: table-cell; width: auto; padding: 0.3rem 0.4rem; border: 1px solid #999999; background: none; color: #000000; }
  .stack-table > tbody > tr > td::before { content: none; }
  .card .stack-table > tbody > tr, .card .stack-table > tbody > tr > td { background: none; color: #000000; }
  .report-table .col-name { min-width: 7rem; }
  .text-overdue { color: #000000; }
  .report-table td, .report-table td * { color: #000000; }
  .report-table td:empty { display: table-cell; }
  .report-table > tbody > tr:last-child > td { border-bottom: 1px solid #999999; }
  .row-total > td { background: none; }
  .badge, .badge-ok, .badge-warn, .badge-error, .badge-neutral, .badge-info { background: none; color: #000000; border-color: #000000; }
  a { color: inherit; text-decoration: none; }
  .ic { display: none; }
}

/* Doble factor (H7.7): campo grande de código, lista de códigos de recuperación, cuadro QR y tarjetas de aplicaciones.
   El campo usa 1,25 rem (más de 16 px: el iPhone no acerca la pantalla al tocarlo). */
.field input.code-input { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 1.25rem; letter-spacing: 0.15em; text-align: center; max-width: 16rem; }
.recovery-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 2.5rem; margin: 0 0 1rem; padding-left: 2.25rem; font-size: 1.1rem; }
.recovery-list li { min-height: 44px; line-height: 44px; }
.recovery-list code { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; letter-spacing: 0.05em; user-select: all; }
.qr-box { width: 220px; max-width: 100%; margin: 1rem auto; padding: 16px; background: #ffffff; border: 1px solid var(--linea); border-radius: var(--radio); }
.qr-box svg { display: block; width: 100%; height: auto; }
.secret-key { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 1.05rem; overflow-wrap: anywhere; user-select: all; }
.app-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 0.75rem; margin: 0 0 1rem; padding: 0; list-style: none; }
.app-card { display: flex; flex-direction: column; gap: 0.25rem; padding: 0.9rem 1rem; border: 1px solid var(--linea); border-radius: var(--radio); }
.link-button { min-height: 44px; padding: 0; border: 0; background: none; color: var(--azul); font: inherit; text-decoration: underline; cursor: pointer; }
.button[aria-disabled="true"] { color: var(--texto-suave); background: var(--fondo); border: 1px dashed var(--borde-campo); cursor: not-allowed; }
.field-help .ic { margin-right: 0.3rem; vertical-align: -0.15em; }
.message .ic { margin-right: 0.4rem; vertical-align: -0.2em; }
@media (max-width: 39.99rem) {
  .recovery-list { grid-template-columns: 1fr; }
  .qr-box { width: 200px; }
  .button-wide { width: 100%; }
  .field input.code-input { max-width: none; }
}
@media print {
  .steps, .enroll-note, .filter-links { display: none !important; }
  .recovery-list { color: #000000; font-size: 12pt; }
}