/* Si luego agregas la fuente STEM, mantenla aquí. No es obligatoria para ver estilos. */
/*
@font-face{
  font-family:"STEM";
  src:url("../fonts/Stem-Medium.woff2") format("woff2"),
      url("../fonts/Stem-Medium.woff") format("woff");
  font-weight:500; font-style:normal; font-display:swap;
}
*/

:root{
  --blue:#2286cd; --white:#fff; --text:#0b1f2a;
  --blur:8px; --shadow:0 10px 30px rgba(0,0,0,.18);
  --ats-font: "Inter", "Segoe UI", Arial, sans-serif;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--text); background:#fff;
}

/* Banner con degradado más alto */
.hero{
  background: linear-gradient(180deg, var(--blue) 0%, #5daee0 70%, rgba(34,134,205,0) 100%);
  padding: 15px 16px 120px;
  min-height: 55vh;
}
.hero__inner{
  max-width:1100px; margin:0 auto;
  display:flex; flex-direction:column; align-items:center; gap:32px;
}

/* Logo y botón regresar en la misma línea */
.hero__top{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:16px;
  flex-wrap:wrap;
}

/* Logo */
.brand{
  height:clamp(70px, 7vw, 85px); /* un poco más pequeño */
  width:auto; display:block;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.15));
}

/* Menú responsive */
.menu{
  display:grid;
  gap:18px; /* un poco menos espacio */
  width:100%;
  max-width:900px;
  grid-template-columns: repeat(2, minmax(220px, 1fr)); /* botones más pequeños */
}
@media (max-width: 720px){
  .menu{
    grid-template-columns: 1fr;
    max-width: 520px;
  }
}

/* Items del menú */
.menu__item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px; /* menos espacio */
  text-decoration: none;
  color: var(--white);
  padding: 12px 16px; /* más pequeño */
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.35);
  background: rgba(255,255,255,.14);
  backdrop-filter: blur(var(--blur));
  -webkit-backdrop-filter: blur(var(--blur));
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}

.menu__item:hover{
  transform:translateY(-2px);
  box-shadow:var(--shadow);
  background:rgba(255,255,255,.20);
}
.menu__icon {
  width: 32px; /* iconos más pequeños */
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.menu__text {
  font-size: clamp(15px, 2vw, 19px); /* texto más pequeño */
  font-weight: 600;
  letter-spacing: .2px;
  display: flex;
  align-items: center;
}

/* Botón Regresar */
.back-btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  text-decoration:none;
  color:#fff;
  padding:8px 12px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.35);
  background:rgba(255,255,255,.12);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  transition:transform .18s ease, background .18s ease, box-shadow .18s ease;
}
.back-btn:hover{
  transform:translateY(-1px);
  background:rgba(255,255,255,.2);
  box-shadow:0 6px 18px rgba(0,0,0,.18);
}
.back-icon{ width:20px; height:20px; display:block }
.back-btn span{ font-size:14px; letter-spacing:.2px }

@media (prefers-reduced-motion:reduce){
  .menu__item, .back-btn{ transition:none }
}



/* SECCIÓN B — Tabla de participantes */


#tablaParticipantes,
#tablaParticipantes *{
  font-family: var(--ats-font, "Segoe UI","Helvetica Neue",Arial,sans-serif);
}

/* ✅ SOLO para la tabla de participantes (Sección B) */
#tablaParticipantes th:first-child,
#tablaParticipantes td:first-child{
  text-align: center;
  vertical-align: middle;
  font-weight: 700;
  width: 40px;          /* ancho fijo para la columna # */
  padding: 0 .35rem;
}


/* Tamaño de texto en celdas y encabezados */
#tablaParticipantes th,
#tablaParticipantes td{
  font-size: 14.5px;           /* súbelo a 15px si lo quieres un poco más grande */
}


/* Inputs y selects más legibles */
#tablaParticipantes .form-control,
#tablaParticipantes .form-select{
  font-size: 14.5px;
  height: 36px;                 /* 34–38px cómodo */
  padding: 6px 10px;
}

/* Opcional: un poco más de aire aun con table-sm */
#tablaParticipantes.table.table-sm th,
#tablaParticipantes.table.table-sm td{
  padding: .45rem .55rem;       /* por defecto .3rem en table-sm */
}

/* Placeholders más visibles (opcional) */
#tablaParticipantes ::placeholder{
  opacity: .9;
}
/*-------------------------------------------------------------

/* Centrado y estilo de la celda de números SECCION C */
    .celda-numero {
      width: 50px;               /* Ancho fijo para que no varíe entre filas */
      text-align: center;        /* Centrado horizontal */
      vertical-align: middle;    /* Centrado vertical */
      font-weight: bold;         /* Texto más marcado */
      padding: 0;                 /* Quita espaciado extra */
    }

    /* Ajuste para inputs para que no queden pegados */
    .table input.form-control {
      height: 36px;              /* Tamaño más uniforme */
      padding: 4px 12px;
    }

/* ===== MATRIZ DE RIESGOS – VERSIÓN COMPACTA (LISTBOX + TEXTBOX PEQUEÑOS) ===== */

/* Título azul centrado (puedes comentar si ya lo tienes) */
.rc-title-band{
  background:#0073c5; color:#fff; text-align:center;
  padding:10px 12px; font-weight:800; letter-spacing:.3px;
  font-size:clamp(18px, 2.6vw, 26px); margin:28px 0 12px;
}

/* Tabla principal: 2 riesgos por fila (espaciado compacto) */
.risk-matrix{
  font-family: var(--ats-font) !important;
  width:100%; border-collapse:separate; table-layout:fixed;
  border-spacing:16px 12px; margin:10px 0 18px;
}

/* Tarjeta */
.risk{
  border:1px solid #cfd8e3; border-radius:4px; background:#fff; overflow:hidden;
}
.risk-head{
  background:#e9edf2; color:#0b1f2a; font-weight:800; text-transform:uppercase;
  font-size:12.5px; letter-spacing:.2px; padding:6px 8px; border-bottom:1px solid #cfd8e3;
  display:flex; align-items:center; gap:6px; line-height:1.15;
}
.risk-num{ font-weight:900; }

/* Cuerpo: 3 columnas compactas */
.risk-body{
  display:grid; grid-template-columns: 120px 220px 1fr; /* ICONO | SELECTS | TEXTOS */
  min-height:110px; align-items:center;
}
.risk-icon{ display:flex; align-items:center; justify-content:center; padding:10px; }
.risk-icon img{ max-width:80px; max-height:80px; }

/* Columna izquierda (selects 1–5) */
.risk-col-left{ background:#f9fbfc; border-left:1px solid #cfd8e3; padding:10px; }
.risk-selects{ list-style:none; margin:0; padding:0; }
.risk-selects li{ display:flex; align-items:center; gap:8px; margin:4px 0; font-size:13px; }
.risk-n{ width:18px; text-align:right; font-weight:700; }

/* Listbox pequeños (confía en Bootstrap .form-select-sm) */
.risk-select.form-select.form-select-sm{
  height:28px; padding:2px 28px 2px 8px; font-size:12px; line-height:1.2;
}

/* Columna derecha (textos 6–10) */
.risk-col-right{ background:#f9fbfc; border-left:1px solid #cfd8e3; padding:10px; }
.risk-notes-list{ display:flex; flex-direction:column; gap:6px; }
.risk-note{ display:flex; align-items:center; gap:8px; }
.risk-note input[type="text"]{
  width:100%; height:24px; padding:3px 6px; font-size:12px;
}

/* ---------- Responsive compacto ---------- */
@media (max-width: 900px){
  .risk-matrix tr{ display:block; }
  .risk-matrix td{ display:block; width:100%; }
  .risk{ margin-bottom:10px; }

  /* Dentro de cada tarjeta: 2 columnas (ICONO | CONTENIDO) */
  .risk-body{ grid-template-columns: 96px 1fr; min-height:unset; }
  .risk-icon img{ max-width:84px; max-height:84px; }

  /* Texto (6–10) debajo, misma columna */
  .risk-col-right{ grid-column: 2 / 3; border-left:none; border-top:1px solid #cfd8e3; margin-top:6px; }
}

@media (max-width: 600px){
  /* Una sola columna interna: icono arriba, luego selects, luego textos */
  .risk-body{ grid-template-columns: 1fr; }
  .risk-icon{ justify-content:flex-start; padding-bottom:2px; }
  .risk-col-left, .risk-col-right{
    border-left:none; border-top:1px solid #cfd8e3; padding-top:8px;
  }
}

/* Impresión más compacta */
@media print{
  .risk-matrix{ border-spacing:12px 10px }
  .risk-head{ font-size:12px }
  .risk-body{ grid-template-columns: 100px 200px 1fr; min-height:100px; }
  .risk-select.form-select.form-select-sm{ height:34px; font-size:15.5px; }
  .risk-note input[type="text"]{ height:32px; font-size:14.5px; }
}


/* Banda/tarjeta para PAS‑GT / Contratista */
.empresa-band{
  font-family: var(--ats-font);
  background:#eef3f7;
  border:1px solid #cfd8e3;
  border-radius:8px;
  padding:14px 16px;
}

/* Que los input-group grandes de esta banda sean cómodos */
.empresa-band .input-group-lg .form-control,
.empresa-band .input-group-lg .input-group-text{
  height: 42px;
  font-size: 14px;
  font-weight: bold;
}
.empresa-band .input-group-text{
  background:#fff;
}

/* === Matriz: números alineados igual en selects e inputs === */
.risk-matrix{ --numw: 14px; }  /* ancho reservado para "10." */

/* Estilo único para el número */
.risk-matrix .risk-n{
  width: var(--numw);
  text-align: right;                 /* texto pegado a la derecha */
  font-weight: 700;
  font-size: 13px;
  line-height: 1;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  justify-self: end;                 /* en grid, alinea el item al borde derecho */
}

/* Cada fila: [número | control] en grid — mismo en ambos lados */
.risk-matrix .risk-selects li,
.risk-matrix .risk-note{
  display: grid;
  grid-template-columns: var(--numw) 1fr;
  align-items: center;
  column-gap: 8px;
  font-size: 13px;
}

/* Alturas de controles (opcional) */
.risk-matrix .risk-select.form-select-sm,
.risk-matrix .risk-note input[type="text"]{
  height: 28px;
}

/* ===== Sección de firmas (3 columnas, estilo planilla) ===== */
.sig-table{
  border:2px solid #000;
  border-collapse:collapse;
  table-layout:fixed;
  width:100%;
  background:#fff;
}
.sig-table td{
  border-right:2px solid #000;
  position:relative;
  vertical-align:bottom;
  padding:0;
}
.sig-table td:last-child{ border-right:none; }


/* linea divisora */
.hr-ats{
  border:0;
  border-top:1px solid #cfd8e3; /* mismo gris que tus tablas */
}

/* ====== FIRMAS (estilo planilla: líneas finas, textos claros) ====== */
.sig-table{
  border:1px solid #000;             /* borde externo fino */
  border-collapse:collapse;
  table-layout:fixed;
  width:100%;
  background:#fff;
}
.sig-table td{
  border-right:1px solid #000;       /* divisiones de columna finas */
  position:relative;
  vertical-align:bottom;
  padding:0;
}
.sig-table td:last-child{ border-right:none; }

/* Fila 1: área de firma (imagen auto-escalada) */
.sig-row-firma td{ height:170px; }    /* alto de la caja de firma */
.sig-box{ width:100%; height:100%; position:relative; }
.sig-box img{
  position:absolute; left:50%; top:50%;
  transform:translate(-50%, -50%);
  max-width:90%; max-height:90%;
  object-fit:contain; display:block;
}
.sig-small-label{
  position:absolute; left:10px; bottom:6px;
  font-size:12px; color:#444; text-transform:uppercase;
}

/* Filas de texto: línea superior fina y alturas moderadas */
.sig-row-super td,
.sig-row-nombre td{
  height:40px;
}
.sig-line{
  position:absolute; left:0; right:0; top:0;
  height:0; border-top:1px solid #000;  /* línea fina */
}

/* Texto base centrado */
.sig-caption{
  text-align:center;
  color:#222;
  margin-top:6px;
  line-height:1.1;
  font-size:13px;
}

/* Supervisores en negrita y un poco más grande (importante) */
.sig-row-super .sig-caption{
  font-family: var(--ats-font);
  font-weight:800;
  font-size:16px;
}

/* “Nombre” en mayúsculas, ligeramente menor */
.sig-row-nombre .sig-caption{
  font-weight:600;
  font-size:7.5px;
  text-transform:uppercase;
  letter-spacing:.3px;
}

/* ===== Encabezado ATS: respeta tu HTML y lo aísla del resto ===== */
.ats-header{
  width: 100%;
  border-collapse: collapse;      /* bordes continuos */
  border: 1.5px solid #000;       /* contorno más delgado en pantalla */
  table-layout: fixed;
}

/* Bordes internos, tipografía y espaciado */
.ats-header td, .ats-header th{
  border: 1px solid #000;         /* líneas internas */
  padding: 6px 8px;
  line-height: 1.1;
  font-size: 12px;
  vertical-align: middle;
  font-family: var(--ats-font, "Segoe UI","Helvetica Neue",Arial,sans-serif);
}

/* Celda del logo (primer <td rowspan="4">) - SOLO esta versión centrada */
.ats-header tr:first-child td:first-child{
  text-align: center;
  padding: 12px 16px;             /* aire alrededor del logo */
}

/* Imagen del logo: centrada y responsiva */
.ats-header tr:first-child td:first-child img{
  display: block;
  margin: 0 auto;
  max-width: 100%;
  width: auto;
  height: auto;
  max-height: 80px;               /* ajusta 60–70 si lo necesitas */
}

/* Bloques centrados y en mayúscula */
.ats-header td:nth-child(3),
.ats-header td:nth-child(4){
  text-align: center;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .2px;
}

/* Título grande */
.ats-header td[colspan="3"]{
  text-align: center !important;
  font-size: 20px;
  font-weight: 800;
  padding: 14px 8px;
}

/* Claves en fuerte/upper */
.ats-header strong{
  font-weight: 800;
  text-transform: uppercase;
}

/* Bordes más robustos al imprimir */
@media print{
  .ats-header{ border-width: 2px; }
  .ats-header td, .ats-header th{ border-width: 1.2px; } /* opcional */
}

/* Impresión (html2pdf): proporciones coherentes */
@media print{
  .sig-row-firma td{ height:110px; }
  .sig-row-super .sig-caption{ font-size:13.5px; }
  .sig-row-nombre .sig-caption{ font-size:12px; }
}

/* ===== Hoja tamaño carta reutilizable ===== */
.sheet{
  width: 12in !important;      /* Carta: 8.5 x 11 in */
  min-height: 13in;
  margin: 16px auto;            /* centrado horizontal */
  background: #fff;
  border: 1px solid #000;
  box-shadow: 0 12px 28px rgba(0,0,0,.18);
  padding: 14px;
  max-width: none !important;   /* ignora límites de .container */
  display: block;
}

/* Móvil: que ocupe toda la pantalla sin sombra a los lados */
@media (max-width: 960px){
  .sheet{
    width: 100% !important;
    min-height: unset;
    margin: 0;
    border-left: 0;
    border-right: 0;
    border-radius: 0;
    box-shadow: none;
  }
}

/* Impresión / PDF */
@media print{
  body{ background:#fff !important; }
  .sheet{
    width: 100% !important;
    min-height: auto;
    margin: 0;
    padding: 10mm;              /* margen interno en papel */
    box-shadow: none;
    border: 1.5px solid #000;
  }

}

.firma-cell { padding: 12px; vertical-align: bottom; }
.firma-slot { height: 80px; }
.firma-line {
  border-bottom: 1px solid #333;
  height: 48px;
}
.firma-img {
  position: absolute;
  bottom: 6px;
  left: 8px;
  height: 48px; /* escala cómoda para SVG */
  pointer-events: none;
  user-select: none;
  opacity: 0.95;
}

/* ==== OVERRIDES PARA LISTADOS EN EL BANNER ==== */
.panel{
  max-width:1100px;
  margin: 8px auto 24px !important;   /* quita el margen negativo anterior */
  background:#fff;
  border-radius:16px;
  border:1px solid rgba(0,0,0,.06);
  box-shadow: var(--shadow);
  padding:18px 18px 14px;
}

/* La tabla y badges ya definidos arriba siguen igual */
.table-list{ width:100%; border-collapse:collapse; }
.table-list th, .table-list td{ border:1px solid #cfd8e3; padding:10px; font-size:14px; }
.table-list th{ background:#f5f8fb; font-weight:700; }
.table-list tr:hover{ background:#f9fbff; }
.click-row{ cursor:pointer; }

.badge{ display:inline-block; padding:.28rem .5rem; border-radius:10px; font-size:.75rem; font-weight:700; line-height:1; }
.badge-success{ color:#155724; background:#d4edda; border:1px solid #c3e6cb; }
.badge-danger{ color:#721c24; background:#f8d7da; border:1px solid #f5c6cb; }

.status-dot{ display:inline-block; width:10px; height:10px; border-radius:50%; vertical-align:middle; }
.is-pending{ background:#d9534f; }
.is-ok{ background:#28a745; }

/* Buscador compacto */
.panel-search{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.panel-search input[type="text"]{ flex:1 1 260px; height:36px; padding:6px 10px; border:1px solid #cfd8e3; border-radius:10px; }
.panel-search button{ height:36px; padding:6px 12px; border-radius:10px; border:1px solid #cfd8e3; background:#fff; cursor:pointer; }
.panel-search button:hover{ background:#f5f8fb; }

/* ==== Acciones en el hero (fila de botones) ==== */
.hero__actions{
  display:flex; gap:10px; flex-wrap:wrap; justify-content:center;
}

/* Reutilizamos el estilo del back-btn para ambos botones */
.hero__actions .hero-btn{ /* mismo look que back-btn */
  display:inline-flex; align-items:center; gap:8px;
  text-decoration:none; color:#fff; padding:8px 12px; border-radius:12px;
  border:1px solid rgba(255,255,255,.35);
  background:rgba(255,255,255,.12);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  transition:transform .18s ease, background .18s ease, box-shadow .18s ease;
}
.hero__actions .hero-btn:hover{
  transform:translateY(-1px);
  background:rgba(255,255,255,.2);
  box-shadow:0 6px 18px rgba(0,0,0,.18);
}

/* Panel blanco dentro del degradado */
.panel{
  max-width:1100px;
  margin: 8px auto 24px;
  background:#fff; border-radius:16px;
  border:1px solid rgba(0,0,0,.06);
  box-shadow: var(--shadow);
  padding:18px 18px 14px;
}
.panel-title{ margin:0 0 10px 0; font-weight:800; letter-spacing:.2px; }

/* Tabla “glass” limpia */
.table-list{ width:100%; border-collapse:collapse; }
.table-list th, .table-list td{ border:1px solid #cfd8e3; padding:10px; font-size:14px; }
.table-list th{ background:#f5f8fb; font-weight:700; }
.table-list tr:hover{ background:#f9fbff; }

/* Enlaces visibles dentro de la tabla */
.table-list a.table-link{
  color:#0b5ed7; font-weight:600; text-decoration:none;
}
.table-list a.table-link:hover{ text-decoration:underline; }

/* Fila clickeable + feedback de puntero */
.click-row{ cursor:pointer; }

/* Badges/Dots */
.badge{ display:inline-block; padding:.28rem .5rem; border-radius:10px; font-size:.75rem; font-weight:700; line-height:1; }
.badge-danger{ color:#721c24; background:#f8d7da; border:1px solid #f5c6cb; }
.status-dot{ display:inline-block; width:10px; height:10px; border-radius:50%; vertical-align:middle; }
.is-pending{ background:#d9534f; }

/* Fecha azul y en negrita */
.cell-date{ font-weight:700; color:#0b5ed7; }

/* Nombre en la misma negrita que el código */
.table-list a.table-link--strong{ font-weight:700; }

/* Código SIN color azul (usa el color de texto normal) */
.table-list a.table-link.is-code{ color: var(--text) !important; }
.table-list a.table-link.is-code:hover{ text-decoration: underline; }


/* Capitalizar cada palabra (p.ej. "recursos humanos" → "Recursos Humanos") */
.caps-init{ text-transform: capitalize; }

/* Botón naranja fuera del panel */
.btn-orange,
.btn-orange:link,
.btn-orange:visited{
  display:inline-flex; align-items:center; gap:8px;
  text-decoration:none; color:#fff;
  height: 30px;
  padding:10px 16px; border-radius:12px;
  background:#f09e1b;
  box-shadow: var(--shadow);
  transition:transform .18s ease, box-shadow .4s ease, filter .18s ease;
  font-weight:600;
}
.btn-orange:hover{ transform:translateY(-1px); filter:brightness(1.05); }

/* Contenedor para centrar el botón debajo del panel */
.hero__cta{
  margin-top:1px; margin-bottom:1px;
  display:flex; justify-content:center;
}

/* Botón icon-only con el mismo look que back-btn */
.icon-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px; color:#fff;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.35);
  background:rgba(255,255,255,.12);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  text-decoration:none;
  transition:transform .18s ease, background .18s ease, box-shadow .18s ease;
}
.icon-btn:hover{
  transform:translateY(-1px);
  background:rgba(255,255,255,.2);
  box-shadow:0 6px 18px rgba(0,0,0,.18);
}
.icon-20{ width:20px; height:20px; display:block; }

/* Variante del botón regresar: solo ícono */
.back-btn--icon-only{
  padding:8px;          /* menos padding porque no hay texto */
  gap:0;                /* sin espacio entre ícono y (no) texto */
}
.back-btn--icon-only .back-icon{
  width:20px; height:20px; display:block;
}

/* Columna VER: icono centrado y tamaño */
.table-list th.view-cell,
.table-list td.view-cell{ text-align:center; vertical-align:middle; }

.view-link--icon,
.view-link--icon:link,
.view-link--icon:visited{
  display:inline-flex; align-items:center; justify-content:center;
  text-decoration:none; color:inherit;
}
.icon--24{ width:24px; height:30px; display:block; }

/* Centrar el contenido de PAS-GT / Empresa */
.table-list th.center-cell,
.table-list td.center-cell{ text-align:center; }

/* Contenedor del cuadro de firma */
.sig-box {
  position: relative;
  height: 160px;            /* alto del cuadro */
  display: flex;
  align-items: flex-end;    /* pegar imagen abajo */
  justify-content: center;  /* centrar horizontal */
  padding: 0 16px 10px;     /* margen interno (abajo 10px) */
  overflow: hidden;
}

/* Imagen de firma: grande, sin deformarse, sin salir del cuadro */
.sig-box .sig-img {
  max-width: 100%;
  max-height: 85%;          /* ocupa gran parte del alto */
  width: auto;
  height: auto;
  object-fit: contain;
  opacity: .95;
  pointer-events: none;
  user-select: none;
}

.no-caps{ text-transform:none !important; }

/* Centrar el botón Validar en lectura (RH y PI) */
.validar-cta{
  display:flex;
  justify-content:center;
  margin-top:18px;
  margin-bottom:14px;
}

/* Accesible: label oculto visualmente */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* Inputs de fecha con el mismo look del buscador */
.panel-search input[type="date"]{
  height:36px; padding:6px 10px; border:1px solid #cfd8e3; border-radius:10px;
}

/* Enlace "Limpiar" como botón ligero */
.panel-search .btn-link{
  display:inline-flex; align-items:center; height:36px; padding:0 8px;
  text-decoration:none; color:#0b5ed7; font-weight:600;
}
.panel-search .btn-link:hover{ text-decoration:underline; }

/* Accesibilidad: label invisible pero para screen readers */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* Inputs date con mismo look que el buscador */
.panel-search input[type="date"]{
  height:36px; padding:6px 10px;
  border:1px solid #cfd8e3; border-radius:10px;
}

/* Enlace limpiar */
.panel-search .btn-link{
  display:inline-flex; align-items:center; height:36px; padding:0 8px;
  text-decoration:none; color:#0b5ed7; font-weight:600;
}
.panel-search .btn-link:hover{ text-decoration:underline; }

/* Banner “Desde / Hasta” */
.filter-banner{
  display:flex; align-items:center; gap:8px;
  background:#f7fbff; border:1px solid #cfe2ff;
  color:#0b1f2a; padding:8px 12px; border-radius:10px;
  margin:10px 0 8px;
}
.filter-banner .pill{
  background:#e8f1ff; border:1px solid #cfe2ff;
  border-radius:999px; padding:2px 10px; font-weight:700;
}
.filter-banner .arrow{ opacity:.7; }

.btn-excel{
  display:inline-flex; align-items:center; gap:8px;
  text-decoration:none; color:#fff;
  height: 26px;
  padding:10px 16px; border-radius:12px;
  background:#4d9268; color:#fff; text-decoration:none;
  box-shadow: var(--shadow);
  transition:transform .18s ease, box-shadow .4s ease, filter .18s ease;
  font-weight:600;
}
.btn-excel:hover{ filter:brightness(1.06); }

/* ========== ESCALA SUAVE Y ESTABLE PARA LA HOJA (.sheet) ========== */
/* 1) Navegadores con 'zoom' (Chromium/Edge/Thorium): perfecto, sin subpíxeles */
.sheet {
  max-width: 960px;   /* o el ancho “real” de tu hoja */
  margin: 0 auto;     /* centrada */
  zoom: 0.68;         /* 68% sin deformar la grilla */
}

/* 2) Fallback para navegadores SIN 'zoom' (Firefox) */
@supports not (zoom: 1) {
  body {
    display: flex;
    justify-content: center;   /* centra la hoja */
    overflow-x: hidden;        /* evita barra horizontal */
  }
  .sheet {
    transform: scale(0.68);
    transform-origin: top center;
  }
}

/* === Escala global del 85% para páginas de listas === */
body.page-validacion,
body.page-validados {
  zoom: 0.85;                 /* para Chrome/Edge/Brave/Thorium */
  overflow-x: hidden;         /* evita scroll horizontal */
}

/* Fallback para Firefox */
@supports not (zoom: 1) {
  body.page-validacion,
  body.page-validados {
    transform: scale(0.85);
    transform-origin: top center;
    width: calc(100% / 0.85);
  }
}

/* === Zoom global 85% por página (como Ctrl - del navegador) === */
.page-zoom-85 {
  zoom: 0.80;            /* Chrome/Edge/Brave/Thorium */
  overflow-x: hidden;
}

/* Fallback Firefox */
@supports not (zoom: 1) {
  .page-zoom-85 {
    transform: scale(0.80);
    transform-origin: top center;
    width: calc(100% / 0.80);
  }
}

/* HACER QUE SE EXPORTE EN PDF LA SECCION 
"B" Y LOS RIESGOS EN UN SALGO DE PÁGINA*/
/* Estética del select del panel para que haga juego con los inputs */
.panel-search .panel-select {
  height: 34px;
  padding: 6px 10px;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  background: #fff;
  font: inherit;
  margin-left: 6px;
}
.panel-search .panel-select:focus {
  outline: none;
  border-color: #1973d2;
  box-shadow: 0 0 0 2px rgba(25,115,210,.15);
}

.page-break {
  page-break-before: always;   /* legacy */
  break-before: page;          /* moderno */
}