/* Pragmus PTW — sistema de diseño del portal.
   Estructura, tipografía y movimiento son de Pragmus; el cliente solo aporta logo y colores (tema.css define --marca-*).
   Reglas: contraste AA (4.5:1 texto), foco visible siempre, objetivos táctiles de 44 px, nada depende solo del color,
   movimiento de 120-220 ms solo en transform/opacity y desactivado con prefers-reduced-motion. Sin JavaScript. */

@font-face { font-family: "Montserrat"; src: url("/estatico/fuentes/montserrat-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Sora"; src: url("/estatico/fuentes/sora-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 800; font-style: normal; font-display: swap; }

:root {
  /* marca (tema.css las redefine por cliente; estos son los valores de Pragmus) */
  --marca: #104F9C;              /* fondos de botón, barra activa */
  --marca-texto: #104F9C;        /* texto y enlaces sobre blanco: siempre >= 4.5:1 */
  --marca-sobre: #FFFFFF;        /* texto encima de --marca */
  --marca-suave: #E8EEF6;        /* fondos tenues (fila seleccionada, chip activo) */
  --marca-acento: #F3B942;       /* solo detalles pequeños; nunca fondos grandes ni texto */

  /* neutros */
  --tinta: #101828;  --tinta-2: #344054;  --tinta-3: #5D6B82;
  --borde: #E4E7EC;  --borde-fuerte: #D0D5DD;
  --fondo: #F6F7F9;  --superficie: #FFFFFF;

  /* semánticos (independientes de la marca del cliente) */
  --exito: #067647;   --exito-fondo: #ECFDF3;   --exito-borde: #ABEFC6;
  --aviso: #8A4B00;   --aviso-fondo: #FFF8E6;   --aviso-borde: #FEDF89;
  --peligro: #B42318; --peligro-fondo: #FEF3F2; --peligro-borde: #FECDCA;
  --info: #1849A9;    --info-fondo: #EFF4FF;    --info-borde: #C7D7FE;
  --neutro: #475467;  --neutro-fondo: #F2F4F7;  --neutro-borde: #E4E7EC;

  /* tipografía */
  --f-titulos: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-texto: "Sora", system-ui, -apple-system, "Segoe UI", sans-serif;
  --t-xs: .8125rem; --t-sm: .875rem; --t-md: 1rem; --t-lg: 1.125rem; --t-xl: 1.375rem; --t-2xl: clamp(1.5rem, 1.2rem + 1.2vw, 1.875rem);

  /* espacio (base 4 px), radios, sombras */
  --e-1: .25rem; --e-2: .5rem; --e-3: .75rem; --e-4: 1rem; --e-5: 1.25rem; --e-6: 1.5rem; --e-8: 2rem; --e-10: 2.5rem; --e-12: 3rem;
  --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-pill: 999px;
  --sombra-1: 0 1px 2px rgba(16, 24, 40, .06);
  --sombra-2: 0 1px 3px rgba(16, 24, 40, .08), 0 4px 12px rgba(16, 24, 40, .05);

  /* movimiento */
  --m-rapido: 120ms; --m-medio: 180ms; --m-entrada: 220ms;
  --curva: cubic-bezier(.23, 1, .32, 1);         /* ease-out fuerte: responde de inmediato y asienta sin rebote */
  --ancho: 72rem;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--fondo); color: var(--tinta); font: 400 var(--t-md)/1.55 var(--f-texto);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
h1, h2, h3 { font-family: var(--f-titulos); color: var(--tinta); margin: 0; }
h1 { font-size: var(--t-2xl); font-weight: 700; line-height: 1.15; letter-spacing: -.02em; }
h2 { font-size: var(--t-lg); font-weight: 700; line-height: 1.3; letter-spacing: -.01em; }
h3 { font-size: var(--t-md); font-weight: 600; line-height: 1.35; }
p { margin: 0; }
a { color: var(--marca-texto); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--marca-texto); outline-offset: 2px; border-radius: 4px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.saltar { position: absolute; left: var(--e-4); top: 0; transform: translateY(-150%); background: var(--superficie); padding: var(--e-2) var(--e-4);
  border-radius: var(--r-sm); box-shadow: var(--sombra-2); z-index: 10; }
.saltar:focus { transform: translateY(var(--e-2)); }
.num { font-family: var(--f-titulos); font-variant-numeric: tabular-nums; font-weight: 600; }
.tenue { color: var(--tinta-3); }

/* ---------- barra superior ---------- */
.barra { position: sticky; top: 0; z-index: 5; background: rgba(255, 255, 255, .86);
  -webkit-backdrop-filter: saturate(180%) blur(14px); backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--borde); }
.barra::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--marca-linea, var(--marca)); opacity: .9; }
.barra-in { max-width: var(--ancho); margin: 0 auto; padding: 0 var(--e-4); min-height: 4rem; display: flex; align-items: center; gap: var(--e-4); }
.marca-cliente { display: flex; align-items: center; gap: var(--e-3); text-decoration: none; color: var(--tinta); min-height: 44px; }
.marca-cliente img { display: block; max-height: 36px; max-width: 160px; width: auto; height: auto; }
.marca-cliente .nombre { font-family: var(--f-titulos); font-weight: 700; font-size: var(--t-md); color: var(--marca-texto); letter-spacing: -.01em; }
.marca-cliente .producto { font-size: var(--t-xs); color: var(--tinta-3); border-left: 1px solid var(--borde-fuerte); padding-left: var(--e-3); white-space: nowrap; }
.nav { display: flex; gap: var(--e-1); margin-left: auto; }
.nav svg, .miga svg { width: 18px; height: 18px; flex: none; }
.nav a { white-space: nowrap; display: inline-flex; align-items: center; gap: var(--e-2); min-height: 44px; padding: 0 var(--e-3); border-radius: var(--r-md);
  text-decoration: none; color: var(--tinta-2); font: 600 var(--t-sm)/1 var(--f-titulos); transition: background-color var(--m-rapido) var(--curva); }
.nav a:hover { background: var(--neutro-fondo); }
.nav a[aria-current="page"] { color: var(--marca-texto); background: var(--marca-suave); }
.contador { min-width: 1.4rem; height: 1.4rem; padding: 0 .35rem; border-radius: var(--r-pill); background: var(--marca); color: var(--marca-sobre);
  display: inline-grid; place-items: center; font: 700 .75rem/1 var(--f-titulos); }
.usuario { display: flex; align-items: center; gap: var(--e-2); }
.usuario .quien { font-size: var(--t-sm); color: var(--tinta-2); max-width: 12rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 47.99rem) {
  .barra-in { flex-wrap: wrap; padding-top: var(--e-2); gap: var(--e-2) var(--e-3); }
  .marca-cliente .producto, .usuario .quien { display: none; }
  .usuario { margin-left: auto; }
  .nav { order: 3; flex: 1 1 100%; min-width: 0; margin: 0; padding: 0 0 var(--e-2); overflow-x: auto; scrollbar-width: none; }
  .nav::-webkit-scrollbar { display: none; }
  .nav a { flex: 1 0 auto; justify-content: center; }
}

/* ---------- página ---------- */
main { max-width: var(--ancho); margin: 0 auto; padding: var(--e-6) var(--e-4) var(--e-12); }
.encabezado { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--e-3) var(--e-4); margin-bottom: var(--e-5); }
.encabezado .sub { margin-top: var(--e-1); color: var(--tinta-3); font-size: var(--t-sm); }
.miga { display: inline-flex; align-items: center; gap: var(--e-1); min-height: 44px; font: 600 var(--t-sm)/1 var(--f-titulos); text-decoration: none; margin-bottom: var(--e-1); }
.pila > * + * { margin-top: var(--e-5); }
.rejilla { display: grid; gap: var(--e-5); }
@media (min-width: 64rem) { .rejilla.dos { grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); align-items: start; } }
@media (max-width: 63.99rem) {
  .rejilla.dos { display: flex; flex-direction: column; gap: var(--e-5); }
  .rejilla.dos > .pila { display: contents; }
  .rejilla.dos > .pila > * + * { margin-top: 0; }
  [data-orden="resumen"] { order: 1; } [data-orden="requisitos"] { order: 2; } [data-orden="decidir"] { order: 3; }
  [data-orden="aprobacion"] { order: 4; } [data-orden="trabajadores"] { order: 5; } [data-orden="historial"] { order: 6; }
}

/* ---------- tarjetas ---------- */
.tarjeta { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--r-lg); box-shadow: var(--sombra-1); }
.tarjeta > .cab { display: flex; align-items: center; justify-content: space-between; gap: var(--e-3); padding: var(--e-4) var(--e-5); border-bottom: 1px solid var(--borde); }
.tarjeta > .cuerpo { padding: var(--e-5); }
.tarjeta > .cuerpo.sin-relleno { padding: 0; }

/* ---------- datos clave ---------- */
.datos { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: var(--e-4) var(--e-5); margin: 0; }
.datos dt { font: 600 var(--t-xs)/1.2 var(--f-titulos); color: var(--tinta-3); text-transform: uppercase; letter-spacing: .04em; }
.datos dd { margin: var(--e-1) 0 0; color: var(--tinta); }

/* ---------- etiquetas de estado y riesgo (color + icono + texto: nunca solo color) ---------- */
.etq { display: inline-flex; align-items: center; gap: .35rem; padding: .2rem .6rem .2rem .45rem; border-radius: var(--r-pill);
  border: 1px solid var(--neutro-borde); background: var(--neutro-fondo); color: var(--neutro);
  font: 600 var(--t-xs)/1.3 var(--f-titulos); white-space: nowrap; }
.etq svg { width: 14px; height: 14px; flex: none; }
.etq.exito { color: var(--exito); background: var(--exito-fondo); border-color: var(--exito-borde); }
.etq.aviso { color: var(--aviso); background: var(--aviso-fondo); border-color: var(--aviso-borde); }
.etq.peligro { color: var(--peligro); background: var(--peligro-fondo); border-color: var(--peligro-borde); }
.etq.info { color: var(--info); background: var(--info-fondo); border-color: var(--info-borde); }
.etqs { display: flex; flex-wrap: wrap; gap: var(--e-2); }

/* ---------- filtros ---------- */
.filtros { display: flex; gap: var(--e-2); overflow-x: auto; scrollbar-width: none; margin: 0 0 var(--e-4); padding-bottom: 2px; }
.filtros::-webkit-scrollbar { display: none; }
.filtros a { flex: none; display: inline-flex; align-items: center; gap: var(--e-2); min-height: 44px; padding: 0 var(--e-4); border-radius: var(--r-pill);
  border: 1px solid var(--borde-fuerte); background: var(--superficie); color: var(--tinta-2); text-decoration: none; font: 600 var(--t-sm)/1 var(--f-titulos);
  transition: background-color var(--m-rapido) var(--curva), border-color var(--m-rapido) var(--curva); }
.filtros a:hover { border-color: var(--tinta-3); }
.filtros a[aria-current="true"] { background: var(--marca); border-color: var(--marca); color: var(--marca-sobre); }
.filtros .n { font-variant-numeric: tabular-nums; opacity: .8; }

/* ---------- lista de solicitudes ---------- */
.lista { list-style: none; margin: 0; padding: 0; }
.lista li + li { border-top: 1px solid var(--borde); }
.fila { display: grid; grid-template-columns: 1fr auto; gap: var(--e-2) var(--e-4); padding: var(--e-4) var(--e-5); text-decoration: none; color: inherit;
  transition: background-color var(--m-rapido) var(--curva); }
@media (hover: hover) and (pointer: fine) { .fila:hover { background: #FAFBFC; } .fila:hover .flecha { transform: translateX(3px); } }
.fila:active { background: var(--marca-suave); }
.fila .titulo { font: 600 var(--t-md)/1.35 var(--f-titulos); color: var(--tinta); letter-spacing: -.005em; }
.fila .folio { font: 600 var(--t-xs)/1 var(--f-titulos); color: var(--tinta-3); font-variant-numeric: tabular-nums; }
.fila .meta { font-size: var(--t-sm); color: var(--tinta-3); }
.sin-corte { white-space: nowrap; }
.fila .lado { display: flex; flex-direction: column; align-items: flex-end; gap: var(--e-2); }
.fila .flecha { color: var(--tinta-3); transition: transform var(--m-medio) var(--curva); }

@media (max-width: 39.99rem) { .fila { grid-template-columns: 1fr; } .fila .lado { flex-direction: row; flex-wrap: wrap; align-items: center; } .fila .flecha { display: none; } }

/* ---------- vacío ---------- */
.vacio { text-align: center; padding: var(--e-12) var(--e-5); }
.vacio svg { width: 44px; height: 44px; color: var(--tinta-3); margin-bottom: var(--e-3); }
.vacio h2 { margin-bottom: var(--e-2); }
.vacio p { color: var(--tinta-3); max-width: 28rem; margin: 0 auto; }

/* ---------- alertas (componente); "aviso" es solo un tono ---------- */
.alerta { display: flex; gap: var(--e-3); padding: var(--e-4); border-radius: var(--r-md); border: 1px solid var(--info-borde); background: var(--info-fondo); color: var(--info); }
.alerta > svg { width: 20px; height: 20px; flex: none; margin-top: 1px; }
.alerta strong { font-family: var(--f-titulos); }
.alerta.t-peligro { border-color: var(--peligro-borde); background: var(--peligro-fondo); color: var(--peligro); }
.alerta.t-aviso { border-color: var(--aviso-borde); background: var(--aviso-fondo); color: var(--aviso); }
.alerta.t-exito { border-color: var(--exito-borde); background: var(--exito-fondo); color: var(--exito); }
.alerta p { color: var(--tinta-2); margin-top: 2px; }

/* ---------- requisitos ---------- */
.checks { list-style: none; margin: 0; padding: 0; }
.checks li { display: flex; gap: var(--e-3); padding: var(--e-3) var(--e-5); }
.checks li + li { border-top: 1px solid var(--borde); }
.checks svg { width: 20px; height: 20px; flex: none; margin-top: 2px; }
.checks .cumplido svg { color: var(--exito); }
.checks .pendiente svg { color: var(--tinta-3); }
.checks .rechazado svg { color: var(--peligro); }
.checks .dispensado_urgencia svg { color: var(--aviso); }
.checks .que { font-weight: 500; }
.checks .det { font-size: var(--t-sm); color: var(--tinta-3); }

/* ---------- flujo de aprobación (línea de tiempo) ---------- */
.pasos { list-style: none; margin: 0; padding: 0; counter-reset: paso; }
.paso { position: relative; display: grid; grid-template-columns: 2rem 1fr; gap: var(--e-3); padding-bottom: var(--e-5); }
.paso:last-child { padding-bottom: 0; }
.paso::before { content: ""; position: absolute; left: calc(1rem - 1px); top: 2.1rem; bottom: .25rem; width: 2px; background: var(--borde); border-radius: 2px; }
.paso:last-child::before { display: none; }
.paso .punto { width: 2rem; height: 2rem; border-radius: 50%; display: grid; place-items: center; border: 2px solid var(--borde-fuerte); background: var(--superficie);
  color: var(--tinta-3); font: 700 var(--t-xs)/1 var(--f-titulos); }
.paso .punto svg { width: 16px; height: 16px; }
.paso.hecho .punto { background: var(--exito); border-color: var(--exito); color: #fff; }
.paso.hecho::before { background: var(--exito-borde); }
.paso.condicion .punto { background: var(--aviso-fondo); border-color: var(--aviso); color: var(--aviso); }
.paso.rechazo .punto { background: var(--peligro); border-color: var(--peligro); color: #fff; }
.paso.actual .punto { border-color: var(--marca); color: var(--marca-texto); box-shadow: 0 0 0 4px var(--marca-suave); }
.paso .que { font: 600 var(--t-md)/1.35 var(--f-titulos); }
.paso .det { font-size: var(--t-sm); color: var(--tinta-3); margin-top: 2px; }
.paso blockquote { margin: var(--e-2) 0 0; padding: var(--e-2) var(--e-3); border-left: 3px solid var(--aviso-borde); background: var(--aviso-fondo);
  border-radius: 0 var(--r-sm) var(--r-sm) 0; font-size: var(--t-sm); color: var(--tinta-2); }

/* ---------- formularios ---------- */
.campo { display: block; }
.campo + .campo { margin-top: var(--e-4); }
.campo label, .campo .etiqueta { display: block; font: 600 var(--t-sm)/1.3 var(--f-titulos); color: var(--tinta-2); margin-bottom: var(--e-2); }
.campo .ayuda { display: block; font-size: var(--t-sm); color: var(--tinta-3); margin-top: var(--e-2); }
.campo .error { display: flex; gap: var(--e-2); align-items: flex-start; font-size: var(--t-sm); color: var(--peligro); margin-top: var(--e-2); font-weight: 500; }
.campo .error svg { width: 16px; height: 16px; flex: none; margin-top: 2px; }
select { -webkit-appearance: none; appearance: none; width: 100%; min-height: 48px; padding: var(--e-3) 2.75rem var(--e-3) var(--e-4);
  border: 1px solid var(--borde-fuerte); border-radius: var(--r-md); color: var(--tinta); font: 400 var(--t-md)/1.4 var(--f-texto);
  background: var(--superficie) url("/estatico/flecha-abajo.svg") no-repeat right .9rem center / 18px; }
select:hover { border-color: var(--tinta-3); }
select:focus { outline: none; border-color: var(--marca-texto); box-shadow: 0 0 0 4px var(--marca-suave); }
fieldset.campo { border: 0; padding: 0; margin: 0; min-width: 0; }
fieldset.campo + .campo, .campo + fieldset.campo { margin-top: var(--e-5); }
fieldset.campo legend { padding: 0; float: left; width: 100%; }      /* float: el borde del fieldset ya no cruza el título */
fieldset.campo legend + * { clear: both; }
.pregunta + .pregunta, .campo + .pregunta, .pregunta + .campo { margin-top: var(--e-5); padding-top: var(--e-5); border-top: 1px solid var(--borde); }
.opciones { display: flex; flex-wrap: wrap; gap: var(--e-2); }
.rejilla-op { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); }
.campo label.opcion { display: inline-flex; margin: 0; font: 400 var(--t-md)/1.35 var(--f-texto); color: var(--tinta); }
.opcion { display: inline-flex; align-items: center; gap: var(--e-3); min-height: 48px; padding: 0 var(--e-4); border: 1px solid var(--borde-fuerte);
  border-radius: var(--r-md); background: var(--superficie); cursor: pointer; transition: border-color var(--m-rapido) var(--curva), background-color var(--m-rapido) var(--curva); }
.opcion input { width: 20px; height: 20px; margin: 0; accent-color: var(--marca); flex: none; }
.opcion:has(input:checked) { border-color: var(--marca-texto); background: var(--marca-suave); }
.opcion:has(input:focus-visible) { outline: 3px solid var(--marca-texto); outline-offset: 2px; }
.opcion.caja, .campo label.opcion.caja { padding: var(--e-3) var(--e-4); align-items: flex-start; }
.opcion.caja input { margin-top: 1px; }
.opcion small { display: block; font-size: var(--t-xs); margin-top: 2px; }
fieldset[aria-invalid="true"] .opcion { border-color: var(--peligro-borde); }
@media (hover: hover) and (pointer: fine) { .opcion:hover { border-color: var(--tinta-3); } }
.pregunta .opciones .opcion { min-width: 7rem; justify-content: center; }
.con-unidad { position: relative; max-width: 14rem; }
.con-unidad input { padding-right: 3.25rem; }
.con-unidad .unidad { position: absolute; right: var(--e-4); top: 50%; transform: translateY(-50%); color: var(--tinta-3); font: 600 var(--t-sm)/1 var(--f-titulos); pointer-events: none; }
.estrecho { max-width: 48rem; }
.desglose { list-style: none; margin: 0; padding: 0; }
.desglose li { display: flex; align-items: center; justify-content: space-between; gap: var(--e-4); padding: var(--e-3) var(--e-5); }
.desglose li + li { border-top: 1px solid var(--borde); }
.desglose .que { font-size: var(--t-sm); }
.desglose .det { font-size: var(--t-sm); color: var(--tinta-3); }
.desglose .puntos { min-width: 2.5rem; text-align: right; }
.total { display: flex; align-items: center; gap: var(--e-3); padding: var(--e-4) var(--e-5); border-top: 1px solid var(--borde-fuerte); background: var(--fondo);
  border-radius: 0 0 var(--r-lg) var(--r-lg); font: 700 var(--t-md)/1 var(--f-titulos); }
.total .num { margin-left: auto; }

input[type=email], input[type=text], input[type=tel], input[type=date], textarea {
  width: 100%; min-height: 48px; padding: var(--e-3) var(--e-4); border: 1px solid var(--borde-fuerte); border-radius: var(--r-md); background: var(--superficie);
  font: 400 var(--t-md)/1.4 var(--f-texto); color: var(--tinta); transition: border-color var(--m-rapido) var(--curva), box-shadow var(--m-rapido) var(--curva); }
textarea { min-height: 6.5rem; resize: vertical; }
input:hover, textarea:hover { border-color: var(--tinta-3); }
input:focus, textarea:focus { outline: none; border-color: var(--marca-texto); box-shadow: 0 0 0 4px var(--marca-suave); }
[aria-invalid="true"] { border-color: var(--peligro) !important; }
[aria-invalid="true"]:focus { box-shadow: 0 0 0 4px var(--peligro-fondo) !important; }

/* ---------- botones ---------- */
.btn { -webkit-appearance: none; appearance: none; display: inline-flex; align-items: center; justify-content: center; gap: var(--e-2);
  min-height: 48px; padding: 0 var(--e-5); border-radius: var(--r-md); border: 1px solid transparent; cursor: pointer; text-decoration: none;
  font: 600 var(--t-md)/1 var(--f-titulos); letter-spacing: -.005em;
  transition: transform var(--m-rapido) var(--curva), background-color var(--m-rapido) var(--curva), box-shadow var(--m-rapido) var(--curva), border-color var(--m-rapido) var(--curva); }
.btn svg { width: 18px; height: 18px; }
.btn:active { transform: scale(.97); transition-duration: 60ms; }   /* respuesta al presionar, no al soltar */
.btn-primario { background: var(--marca); color: var(--marca-sobre); box-shadow: 0 1px 2px rgba(16, 24, 40, .12); }
.btn-primario:hover { box-shadow: 0 2px 8px rgba(16, 24, 40, .16); filter: brightness(1.06); }
.btn-secundario { background: var(--superficie); color: var(--tinta); border-color: var(--borde-fuerte); box-shadow: var(--sombra-1); }
.btn-secundario:hover { background: var(--neutro-fondo); }
.btn-peligro { background: var(--superficie); color: var(--peligro); border-color: var(--peligro-borde); }
.btn-peligro:hover { background: var(--peligro-fondo); }
.btn-chico { min-height: 44px; padding: 0 var(--e-3); font-size: var(--t-sm); }
.btn-bloque { width: 100%; }
.acciones { display: flex; flex-wrap: wrap; gap: var(--e-3); margin-top: var(--e-5); }
@media (max-width: 39.99rem) { .acciones .btn { flex: 1 1 100%; } }
.acciones.apiladas { flex-direction: column; } .acciones.apiladas .btn { width: 100%; }

/* ---------- indicadores ---------- */
.indicadores { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-4); }
@media (min-width: 64rem) { .indicadores { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 29.99rem) { .indicadores { grid-template-columns: 1fr; } }
.indicador { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--r-lg); box-shadow: var(--sombra-1); padding: var(--e-4) var(--e-5);
  border-top: 3px solid var(--borde); }
.indicador.t-aviso { border-top-color: var(--aviso); } .indicador.t-peligro { border-top-color: var(--peligro); }
.i-titulo { display: flex; align-items: center; gap: var(--e-2); font: 600 var(--t-sm)/1.3 var(--f-titulos); color: var(--tinta-2); }
.i-titulo svg { width: 16px; height: 16px; color: var(--tinta-3); flex: none; }
.indicador.t-aviso .i-titulo svg { color: var(--aviso); } .indicador.t-peligro .i-titulo svg { color: var(--peligro); }
.i-valor { font: 700 2rem/1.1 var(--f-titulos); letter-spacing: -.02em; color: var(--tinta); margin-top: var(--e-2); }
.i-nota { font-size: var(--t-sm); color: var(--tinta-3); margin-top: var(--e-1); }
.barras { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-4); }
.barras li { display: grid; grid-template-columns: minmax(8rem, 13rem) 1fr 4.5rem; align-items: center; gap: var(--e-3); }
.b-etq { display: flex; align-items: center; gap: var(--e-2); font-size: var(--t-sm); color: var(--tinta-2); }
.b-etq svg { width: 14px; height: 14px; flex: none; color: var(--tinta-3); }
.b-pista { height: 12px; background: var(--neutro-fondo); border-radius: 0 4px 4px 0; overflow: hidden; }
.b-barra { display: block; height: 100%; width: 0; border-radius: 0 4px 4px 0; background: var(--marca); }
.b-exito { background: var(--exito); } .b-aviso { background: #B54708; } .b-peligro { background: var(--peligro); } .b-neutro { background: var(--tinta-3); }
.b-valor { text-align: right; font-size: var(--t-sm); white-space: nowrap; }
.tarjeta > .cuerpo { container-type: inline-size; }
@container (max-width: 30rem) { .barras li { grid-template-columns: 1fr auto; gap: var(--e-2) var(--e-3); } .b-pista { grid-column: 1 / -1; grid-row: 2; } }
.tabla-envoltura { overflow-x: auto; }
.tabla { width: 100%; border-collapse: collapse; font-size: var(--t-sm); }
.tabla th, .tabla td { padding: var(--e-3) var(--e-5); text-align: right; border-bottom: 1px solid var(--borde); white-space: nowrap; }
.tabla th:first-child { text-align: left; white-space: normal; }
.tabla thead th { font: 600 var(--t-xs)/1.2 var(--f-titulos); color: var(--tinta-3); text-transform: uppercase; letter-spacing: .04em; background: var(--fondo); }
.tabla tbody th { font-weight: 500; color: var(--tinta); font-family: var(--f-texto); }
.tabla tbody tr:last-child th, .tabla tbody tr:last-child td { border-bottom: 0; }

.platica { margin-bottom: var(--e-4); border: 1px solid var(--borde); border-radius: var(--r-md); background: var(--fondo); }
.platica summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: var(--e-2); min-height: 44px; padding: 0 var(--e-4);
  font: 600 var(--t-sm)/1 var(--f-titulos); color: var(--marca-texto); }
.platica summary::-webkit-details-marker { display: none; }
.platica summary svg { width: 16px; height: 16px; transition: transform var(--m-medio) var(--curva); }
.platica[open] summary svg { transform: rotate(90deg); }
.platica-bloque { padding: 0 var(--e-4) var(--e-3); }
.platica-bloque h3 { font-size: var(--t-sm); margin-bottom: var(--e-1); }
.platica-bloque ul { margin: 0; padding-left: 1.1rem; font-size: var(--t-sm); color: var(--tinta-2); }
.acuses { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-2); }
.acuse { display: flex; align-items: flex-start; gap: var(--e-3); }
.acuse > svg { width: 20px; height: 20px; flex: none; margin-top: 2px; color: var(--tinta-3); }
.acuse.hecho > svg { color: var(--exito); }
.acuse .que { font-weight: 500; } .acuse .det { font-size: var(--t-sm); color: var(--tinta-3); }
.acuse .opcion { width: 100%; }
@media (prefers-reduced-motion: reduce) { .platica summary svg { transition: none; } }

/* ---------- historial ---------- */
.historial { list-style: none; margin: 0; padding: 0; }
.historial li { display: grid; grid-template-columns: 8.25rem 1fr; gap: var(--e-3); padding: var(--e-3) var(--e-5); font-size: var(--t-sm); }
.historial li + li { border-top: 1px solid var(--borde); }
.historial time { color: var(--tinta-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.historial .det { color: var(--tinta-3); }
@media (max-width: 39.99rem) { .historial li { grid-template-columns: 1fr; gap: 2px; } }
.mas { border-top: 1px solid var(--borde); }
.mas summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: var(--e-2); min-height: 48px; padding: 0 var(--e-5);
  font: 600 var(--t-sm)/1 var(--f-titulos); color: var(--marca-texto); }
.mas summary::-webkit-details-marker { display: none; }
.mas summary svg { width: 16px; height: 16px; transition: transform var(--m-medio) var(--curva); }
.mas[open] summary svg { transform: rotate(90deg); }
.mas[open] summary .abrir, .mas:not([open]) summary .cerrar { display: none; }
.mas .historial { border-top: 1px solid var(--borde); }
.historial .quien { color: var(--tinta-3); }

/* ---------- personas ---------- */
.personas { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-2); }
.personas li { display: flex; align-items: center; gap: var(--e-3); }
.iniciales { width: 2rem; height: 2rem; border-radius: 50%; display: grid; place-items: center; background: var(--marca-suave); color: var(--marca-texto);
  font: 700 var(--t-xs)/1 var(--f-titulos); flex: none; }

/* ---------- ingreso ---------- */
.ingreso { min-height: 100dvh; display: grid; place-items: center; padding: var(--e-6) var(--e-4);
  background: radial-gradient(60rem 30rem at 50% -10%, var(--marca-suave), transparent 70%), var(--fondo); }
.ingreso .caja { width: 100%; max-width: 26rem; }
.ingreso .logo { display: flex; justify-content: center; margin-bottom: var(--e-6); min-height: 48px; align-items: center; }
.ingreso .logo img { max-height: 56px; max-width: 220px; width: auto; height: auto; }
.ingreso .logo .nombre { font: 700 var(--t-xl)/1.2 var(--f-titulos); color: var(--marca-texto); letter-spacing: -.02em; }
.ingreso .tarjeta { padding: var(--e-8) var(--e-6); }
.ingreso h1 { font-size: var(--t-xl); text-align: center; }
.ingreso .intro { text-align: center; color: var(--tinta-3); margin: var(--e-2) 0 var(--e-6); }
.ingreso .icono-grande { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; margin: 0 auto var(--e-4);
  background: var(--marca-suave); color: var(--marca-texto); }
.ingreso .icono-grande svg { width: 26px; height: 26px; }
.pie { text-align: center; margin-top: var(--e-6); font-size: var(--t-xs); color: var(--tinta-3); }
.pie strong { font-family: var(--f-titulos); color: var(--tinta-2); }

/* ---------- movimiento ----------
   No hay animación de entrada en las pantallas de trabajo: se recorren decenas de veces al día y retrasarían cada vista.
   Solo se anima: la caja de ingreso (se ve una vez por sesión) y la confirmación tras firmar (retroalimentación). */
@keyframes aparecer { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes confirmar { from { opacity: 0; transform: scale(.98); } to { opacity: 1; transform: none; } }
.ingreso .caja { animation: aparecer var(--m-entrada) var(--curva) both; }
.alerta.t-exito { animation: confirmar var(--m-entrada) var(--curva) both; transform-origin: top center; }

@media (prefers-reduced-motion: reduce) {
  /* más suave, no cero: sin desplazamientos ni escalas, solo cambios de opacidad cortos */
  @keyframes aparecer { from { opacity: 0; } to { opacity: 1; } }
  @keyframes confirmar { from { opacity: 0; } to { opacity: 1; } }
  .btn:active { transform: none; }
  .fila .flecha, .mas summary svg { transition: none; }
  .fila:hover .flecha { transform: none; }
}
@media (prefers-reduced-transparency: reduce) { .barra { background: var(--superficie); -webkit-backdrop-filter: none; backdrop-filter: none; } }
@media (prefers-contrast: more) {
  :root { --borde: #98A2B3; --borde-fuerte: #667085; --tinta-3: #344054; }
  .barra { background: var(--superficie); backdrop-filter: none; }
}
@media print {
  .barra, .acciones, form, .filtros, .mas summary { display: none !important; }
  .mas > * { display: block !important; }
  body { background: #fff; } .tarjeta { box-shadow: none; } * { animation: none !important; }
}
.lista-condiciones { margin: var(--e-2) 0 0; padding-left: 1.1rem; color: var(--tinta-2); }
.lista-condiciones li + li { margin-top: var(--e-1); }

/* utilidades (la CSP no permite style= en línea) */
.mb-4 { margin-bottom: var(--e-4); } .mb-5 { margin-bottom: var(--e-5); } .mt-5 { margin-top: var(--e-5); }
.relleno { padding: var(--e-4) var(--e-5); }
.w-0 { width: 0%; } .w-5 { width: 5%; } .w-10 { width: 10%; } .w-15 { width: 15%; } .w-20 { width: 20%; } .w-25 { width: 25%; } .w-30 { width: 30%; } .w-35 { width: 35%; } .w-40 { width: 40%; } .w-45 { width: 45%; } .w-50 { width: 50%; } .w-55 { width: 55%; } .w-60 { width: 60%; } .w-65 { width: 65%; } .w-70 { width: 70%; } .w-75 { width: 75%; } .w-80 { width: 80%; } .w-85 { width: 85%; } .w-90 { width: 90%; } .w-95 { width: 95%; } .w-100 { width: 100%; } 

/* administración */
.en-linea { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-3); }
.indicador.enlace { display: block; text-decoration: none; color: inherit; min-height: 44px; transition: transform .15s ease-out; }
.indicador.enlace:hover { transform: translateY(-2px); }
.indicador.enlace:focus-visible { outline: 3px solid var(--marca-texto); outline-offset: 2px; }
.tabla-admin th, .tabla-admin td { text-align: left; white-space: normal; }
.tabla-admin td.num, .tabla-admin th.num { text-align: right; }
@media (prefers-reduced-motion: reduce) { .indicador.enlace { transition: none; } .indicador.enlace:hover { transform: none; } }
.campo + .opcion { margin-top: var(--e-4); }
.encabezado .lado { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--e-3); }
@media (max-width: 39.99rem) { .encabezado .lado { justify-content: flex-start; } }

/* urgencia plegable: sin JavaScript */
.urg > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: var(--e-3); flex-wrap: wrap; min-height: 56px; }
.urg > summary::-webkit-details-marker { display: none; }
.urg > summary .tenue { flex: 1 1 12rem; font-size: var(--t-sm); }
.urg > summary svg { width: 16px; height: 16px; margin-left: auto; transition: transform var(--m-medio) var(--curva); }
.urg[open] > summary svg { transform: rotate(90deg); }
@media (prefers-reduced-motion: reduce) { .urg > summary svg { transition: none; } }

/* marca del cliente: barra de color y detalle del encabezado */
.barra.barra-color { background: var(--barra-fondo); border-bottom-color: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
.barra-color .marca-cliente .nombre, .barra-color .usuario .quien, .barra-color .nav a { color: var(--barra-texto); }
.barra-color .marca-cliente .producto { color: var(--barra-texto); border-left-color: var(--barra-texto); opacity: .85; }
.barra-color .marca-cliente img { background: #fff; padding: 4px 8px; border-radius: var(--r-sm); box-sizing: content-box; }
.barra-color .nav a:hover { background: rgba(255, 255, 255, .16); }
.barra-color .nav a[aria-current="page"] { color: var(--marca-texto); background: var(--marca-suave); }
.barra-color .contador { background: var(--barra-texto); color: var(--barra-fondo); }
.encabezado h1::after { content: ""; display: block; width: 2.5rem; height: 3px; margin-top: var(--e-2); border-radius: 2px; background: var(--marca-linea, var(--marca)); }

/* sección Marca y colores */
.logo-actual { display: flex; align-items: center; justify-content: center; min-height: 7rem; padding: var(--e-4); border: 1px dashed var(--borde-fuerte); border-radius: var(--r-md);
  background: repeating-conic-gradient(#f2f4f7 0% 25%, #fff 0% 50%) 50% / 16px 16px; }
.logo-actual img { display: block; max-width: 100%; max-height: 120px; height: auto; width: auto; }
.paletas { display: grid; gap: var(--e-3); grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); margin: 0 0 var(--e-4); padding: 0; border: 0; min-width: 0; }
.paleta { display: block; position: relative; cursor: pointer; border: 1px solid var(--borde-fuerte); border-radius: var(--r-md); padding: var(--e-3); background: var(--superficie); min-height: 44px; }
.paleta input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.paleta:has(input:checked) { border-color: var(--marca-texto); background: var(--marca-suave); box-shadow: 0 0 0 2px var(--marca-texto); }
.paleta:has(input:focus-visible) { outline: 3px solid var(--marca-texto); outline-offset: 2px; }
.paleta .n { display: block; font: 600 var(--t-sm)/1.3 var(--f-titulos); color: var(--tinta); }
.paleta .nota { display: block; font-size: var(--t-xs); color: var(--tinta-3); margin-top: 2px; }
.muestras { display: flex; height: 2rem; margin-bottom: var(--e-2); border-radius: var(--r-sm); overflow: hidden; border: 1px solid var(--borde); }
.muestras i { flex: 1; display: block; }
.muestras i:first-child { flex: 2; }
.colores-propios { display: grid; gap: var(--e-4); grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.color-par { display: flex; gap: var(--e-3); align-items: stretch; }
.color-par input[type="color"] { -webkit-appearance: none; appearance: none; flex: none; width: 56px; min-height: 44px; padding: 2px; border: 1px solid var(--borde-fuerte); border-radius: var(--r-md); background: var(--superficie); cursor: pointer; }
.color-par input[type="text"] { flex: 1; min-width: 0; font-family: var(--f-titulos); text-transform: uppercase; }
.vista-previa { border: 1px solid var(--borde); border-radius: var(--r-lg); overflow: hidden; background: var(--fondo); }
.vista-previa .barra { position: relative; }
.vista-previa .barra-in { min-height: 3.25rem; }
.vista-previa .vp-cuerpo { padding: var(--e-4); display: flex; flex-wrap: wrap; gap: var(--e-3); align-items: center; }
.vista-previa .vp-fila { flex: 1 1 100%; padding: var(--e-3) var(--e-4); border-radius: var(--r-md); background: var(--marca-suave); color: var(--marca-texto); font: 600 var(--t-sm)/1.3 var(--f-titulos); }
.vp-tit { font: 700 var(--t-md)/1.2 var(--f-titulos); flex: 1 1 100%; }
.colores-propios .campo + .campo { margin-top: 0; }
.colores-propios + .campo { margin-top: var(--e-5); }

/* Revisión de registros por formulario: documentos recibidos */
.doc-lista { display: grid; }
.doc-fila { display: flex; gap: var(--e-4); justify-content: space-between; align-items: flex-start; padding: var(--e-4) var(--e-5); border-top: 1px solid var(--linea, #d9dee6); }
.doc-fila:first-child { border-top: 0; }
.doc-vista img { display: block; width: 8.5rem; max-width: 40vw; height: auto; border: 1px solid var(--linea, #d9dee6); border-radius: var(--r-1, 6px); }
@media (max-width: 39.99rem) { .doc-fila { flex-direction: column; } .doc-vista img { width: 100%; max-width: 100%; } }