/* ===== Ajustes de la app sobre el CSS original del sistema legacy ===== */

/* Tuerca de ajustes: icono SVG limpio, visible en ambos modos */
.tuercbtn {
  background-image: none !important;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #114366;
}

.tuercbtn:hover {
  color: #0875b6;
}

.tuercbtn svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
}

.tuercbtn:hover {
  opacity: 1;
}

/* ===== Header: el lado izquierdo empieza con la hamburguesa ===== */
.menuprincipal {
  left: 10px;
}

/* Flecha nativa del menu (chevron CSS, sin FontAwesome) */
.boxmenuprin li a.btnm-flecha::before {
  content: '';
  display: inline-block;
  width: 7px;
  height: 7px;
  border-top: 2px solid #0875b6;
  border-right: 2px solid #0875b6;
  transform: rotate(45deg);
  margin-right: 10px;
  vertical-align: 2px;
}

.boxmenuprin li a.btnm-flecha:hover::before {
  border-color: #114366;
}

/* Hamburguesa real de tres lineas (reemplaza el glifo de FontAwesome) */
.menuprincipal::before {
  content: none !important;
}

.menuprincipal .ham {
  display: block;
  width: 24px;
  height: 3px;
  background: #114366;
  border-radius: 2px;
  margin: 4px auto;
  transition: background 0.15s ease;
}

.menuprincipal:hover .ham {
  background: #0875b6;
}

.menuprincipal.abierto .ham-1 {
  transform: translateY(7px) rotate(45deg);
}

.menuprincipal.abierto .ham-2 {
  opacity: 0;
}

.menuprincipal.abierto .ham-3 {
  transform: translateY(-7px) rotate(-45deg);
}

/* Menu desplegable: elementos interactivos reales */
.boxmenuprin li a {
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  display: inline-block;
  padding: 10px 18px;
  border-radius: 4px;
  transition: background 0.15s ease, color 0.15s ease;
}

.boxmenuprin li a:hover {
  background: #ffffff;
  color: #0875b6;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
}

.boxmenuprin li a:active {
  background: #e8e8e4;
}

.boxoption li a {
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
}

.boxoption li a:hover {
  background: #f2f2f0;
}

.boxoption li a:active {
  background: #e8e8e4;
}

/* Disposicion exacta del formulario de consulta (style inline del home.html original) */
.centvalid .row-busq .validtipo {
  width: 34%;
}

.centvalid .row-busq .validright {
  width: 20%;
}

.centvalid .row-busq .validcaptcha {
  width: 22%;
}

.centvalid .row-busq .validcaptcha .label {
  width: auto;
  max-width: 58%;
  white-space: nowrap;
  margin-top: 10px;
}

.centvalid .row-busq .validcaptcha .campowhite {
  width: 38%;
  min-width: 48px;
  text-align: center;
}

.centvalid .row-busq .validbtn {
  width: 16%;
  margin-top: 35px;
}

/* Pagina de login: sin header (igual que el original) */
.pagina-login header {
  display: none;
}

.pagina-login .boxmenuprin {
  display: none;
}

/* Enlace "Realizar otra busqueda" (estilo inline del resultado original) */
a.btnalta.volver-busqueda {
  display: inline-block;
  padding: 8px 14px;
  text-decoration: none;
  font-weight: bold;
}

/* Avatar real del usuario en la barra superior */
.infoperfil img.avatar-real {
  width: 46px;
  height: 46px;
  object-fit: cover;
  border-radius: 50%;
  border: 1px solid #d5e0e8;
  background: #eef3f7;
  display: block;
  float: left;
  margin-right: 4px;
}

/* Titulos de seccion en resultados (* TELEFONIA, * TRABAJOS, * CREDITOS,
   * SUNARP, * CORREOS): tamano estrictamente limitado */
.boxtab .titulo,
.padbox1 .titulo {
  font-size: 18px;
  font-weight: bold;
  color: #0056b3;
}

/* Banners e imagenes explicativas (Riesgo, Datos Trabajo, etc.):
   dimensiones contenidas para evitar desbordes */
.detalimg {
  max-height: 40px;
  width: auto;
  object-fit: contain;
  display: block;
  float: right;
  margin-top: 8px;
}

.boxcent h2.titrojo {
  font-size: 22px;
}

h3.titconsult {
  font-size: 14px;
}

/* Tabla del panel de FakerSys: espaciado legible */
.admin-table-wrap td,
.admin-table-wrap th {
  white-space: nowrap;
}

td.acciones-cell {
  width: 120px;
}

td.acciones-cell button {
  margin: 0 4px;
}

/* Márgenes de los contenedores de resultado (igual que el original) */
.boxdisplay .volver-wrap {
  margin: 8px 0 12px;
}

.boxmenuprin.abierto {
  display: block;
}

.boxoption.abierto {
  display: block;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.app-main {
  flex: 1;
  display: block;
}
/* Header: la franja superior azul corporativa (login-top.jpg) */
.lineatop {
  height: 5px;
}

/* Captcha matematico (login y formularios de consulta) */
.captcha-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.captcha-row .captcha-expr {
  font-weight: bold;
  color: #114366;
  font-size: 15px;
  white-space: nowrap;
}

.captcha-row .captcha-input {
  width: 90px;
  text-align: center;
}

/* Login: centrado como el legacy */
.login-wrap {
  min-height: 60vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Avisos */
.alert-error {
  border: 1px solid #e7302a;
  background: #fdf0f0;
  color: #9a1413;
  padding: 12px 16px;
  border-radius: 4px;
  margin: 14px 0;
  font-size: 13px;
  text-align: left;
}

.alert-ok {
  border: 1px solid #65aa26;
  background: #f2faf0;
  color: #3d7a12;
  padding: 12px 16px;
  border-radius: 4px;
  margin: 14px 0;
  font-size: 13px;
  text-align: center;
  font-weight: bold;
}

/* Foto de perfil subida (data URI) */
.foto-reniec img,
.perfil-foto img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Edicion de perfil y panel FakerSys */
.perfil-form .campo,
.admin-form .campo {
  margin-bottom: 14px;
}

.perfil-form .campo input[type='text'],
.perfil-form .campo input[type='password'],
.perfil-form .campo select,
.admin-form .campo input[type='text'],
.admin-form .campo input[type='password'],
.admin-form .campo select {
  width: 320px;
  max-width: 100%;
}

.admin-form .campo label {
  min-width: 130px;
  display: inline-block;
}

.perfil-form .campo label {
  min-width: 140px;
  display: inline-block;
}

.foto-actual {
  width: 72px;
  height: 96px;
  object-fit: cover;
  border: 1px solid #bbb;
  background: #e5e5e5;
  margin-bottom: 8px;
}

.fila-botones {
  margin-top: 16px;
}

.fila-botones .btnbusc {
  margin-right: 8px;
}

.btn-ghost {
  display: inline-block;
  background: #f4f4f2;
  color: #114366;
  font-family: arial;
  font-size: 13px;
  text-decoration: none;
  border-radius: 4px;
  border: 1px solid #c8c8c8;
  padding: 8px 14px;
  cursor: pointer;
}

.btn-ghost:hover {
  background: #fff;
}

.search-user {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 12px;
}

.search-user .campowhite {
  width: 300px;
  max-width: 100%;
}

.tablabox td.acciones-cell button {
  margin: 0 4px;
}

.spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255, 255, 255, 0.45);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  vertical-align: -2px;
  margin-right: 7px;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

@media screen and (max-width: 840px) {
  .perfil-form .campo input[type='text'],
  .perfil-form .campo input[type='password'],
  .perfil-form .campo select,
  .admin-form .campo input[type='text'],
  .admin-form .campo input[type='password'],
  .admin-form .campo select {
    width: 100%;
  }

  .padbox1 .row-busq .validleft {
    width: 100%;
    margin-top: 10px;
  }

  .search-user {
    flex-wrap: wrap;
  }

  .search-user .campowhite {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
    animation: none !important;
  }
}

/* ===== Vista Busqueda Masiva: tarjeta profesional ===== */
.masiva-wrap {
  margin: 0 auto;
  width: 90%;
  max-width: 900px;
}

.masiva-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06), 0 10px 30px rgba(15, 23, 42, 0.05);
  padding: 28px 28px 30px;
  margin-top: 30px;
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Inter, sans-serif;
}


.masiva-card .label {
  font-family: inherit;
  font-size: 13px;
  letter-spacing: 0.02em;
  margin-bottom: 8px;
}

/* Dropzone de carga .txt */
.dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 30px 20px;
  border: 2px dashed #cbd5e1;
  border-radius: 12px;
  background: #f8fafc;
  cursor: pointer;
  text-align: center;
  transition: border-color 0.15s ease, background 0.15s ease;
  user-select: none;
  -webkit-user-select: none;
}

.dropzone:hover {
  border-color: #2563eb;
  background: #eff6ff;
}

.dropzone.arrastrando {
  border-color: #2563eb;
  background: #eff6ff;
  box-shadow: inset 0 0 0 2px rgba(37, 99, 235, 0.15);
}

.dropzone svg {
  width: 36px;
  height: 36px;
  color: #94a3b8;
  transition: color 0.15s ease;
}

.dropzone:hover svg,
.dropzone.arrastrando svg {
  color: #2563eb;
}

.dropzone .dz-titulo {
  font-size: 14px;
  font-weight: 600;
  color: #0f172a;
}

.dropzone .dz-sub {
  font-size: 12px;
  color: #64748b;
}







.dropzone input[type='file'] {
  display: none;
}

/* Area de texto monospace */
.masiva-textarea {
  width: 100%;
  min-height: 15em;
  resize: vertical;
  padding: 14px 16px;
  border: 1px solid #d2d2d2;
  border-radius: 10px;
  background: #ffffff;
  color: #1f2937;
  font-family: ui-monospace, 'Fira Code', 'JetBrains Mono', Consolas, 'SF Mono', monospace;
  font-size: 13.5px;
  line-height: 1.6;
  box-sizing: border-box;
  scrollbar-width: thin;
  scrollbar-color: #94a3b8 transparent;
}

.masiva-textarea:focus {
  outline: none;
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.18);
}

.masiva-textarea::-webkit-scrollbar {
  width: 8px;
}

.masiva-textarea::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 8px;
}

.masiva-textarea::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}





/* Contador en tiempo real */
.masiva-counter-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 10px;
}

.masiva-contador {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 700;
  color: #0f172a;
  background: #eef2ff;
  border: 1px solid #c7d2fe;
  border-radius: 999px;
  padding: 5px 12px;
  letter-spacing: 0.01em;
}

.masiva-contador::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #10b981;
}

.masiva-contador.invalido::before {
  background: #ef4444;
}

.masiva-contador.invalido {
  color: #b91c1c;
  background: #fef2f2;
  border-color: #fecaca;
}



.masiva-detalle {
  font-size: 12px;
  color: #64748b;
  margin: 8px 0 0;
}


/* Captcha + boton Validar al pie de la tarjeta */
.masiva-acciones {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  gap: 22px;
  flex-wrap: wrap;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid #e2e8f0;
}


.masiva-captcha {
  display: flex;
  align-items: center;
  gap: 10px;
}

.masiva-captcha .label {
  margin: 0;
  white-space: nowrap;
}

.masiva-captcha .campowhite {
  width: 90px;
  text-align: center;
  font-family: inherit;
}

.masiva-acciones .btnbusc {
  font-family: inherit;
  font-size: 14px;
  padding: 12px 34px;
  border-radius: 8px;
}

}

@media screen and (max-width: 640px) {
  .masiva-card {
    padding: 20px 16px 22px;
  }

  .masiva-acciones {
    justify-content: stretch;
  }

  .masiva-captcha,
  .masiva-acciones .btnbusc {
    width: 100%;
  }

  .masiva-captcha .campowhite {
    flex: 1;
  }
}

/* ===== Vista Mi Perfil: tarjeta + zona de foto ===== */
.perfil-card {
  box-sizing: border-box;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06), 0 10px 30px rgba(15, 23, 42, 0.05);
  padding: 28px 28px 30px;
  margin-top: 30px;
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Inter, sans-serif;
  max-width: 640px;
}


.perfil-card .label {
  font-family: inherit;
  font-size: 13px;
  letter-spacing: 0.02em;
  margin-bottom: 6px;
  display: block;
}

.perfil-campo {
  margin-bottom: 16px;
}

.perfil-campo .campowhite {
  width: 100%;
  font-family: inherit;
  border-radius: 8px;
  padding: 11px 14px;
}

.foto-campo {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.foto-zona {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  gap: 6px;
  padding: 22px 26px;
  border: 2px dashed #cbd5e1;
  border-radius: 12px;
  background: #f8fafc;
  cursor: pointer;
  text-align: center;
  transition: border-color 0.15s ease, background 0.15s ease;
  user-select: none;
  -webkit-user-select: none;
  flex: 1;
  min-width: 0;
}

.foto-zona:hover {
  border-color: #2563eb;
  background: #eff6ff;
}

.foto-zona svg {
  width: 30px;
  height: 30px;
  color: #94a3b8;
  transition: color 0.15s ease;
}

.foto-zona:hover svg {
  color: #2563eb;
}

.foto-zona .fz-titulo {
  font-size: 13px;
  font-weight: 600;
  color: #0f172a;
}

.foto-zona .fz-sub {
  font-size: 11.5px;
  color: #64748b;
}

.foto-zona input[type='file'] {
  display: none;
}

.foto-actual {
  width: 72px;
  height: 96px;
  object-fit: cover;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  background: #f1f5f9;
  flex-shrink: 0;
}










/* ===== Panel de administracion: contraste alto en oscuro ===== */




@media screen and (max-width: 640px) {
  .perfil-card {
    padding: 20px 16px 22px;
  }

  .foto-campo {
    flex-direction: column;
  }

  .foto-zona {
    width: 100%;
    flex: 0 0 100%;
  }
}

/* ===== Foto de DNI en la tarjeta de datos personales ===== */
.infopersona {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 16px;
  width: 100%;
}

.infopersona .fotoperfil {
  width: 110px;
  min-width: 110px;
  height: 135px;
  margin: 0;
  flex-shrink: 0;
}

.infopersona .datosperson {
  flex: 1;
  width: auto;
  margin: 0;
  min-width: 0;
}

.fotoperfil img.foto-reniec {
  width: 110px !important;
  height: 135px !important;
  max-width: 110px !important;
  object-fit: cover;
  border-radius: 4px;
}

/* ===== Modulo RIESGO (replica 1:1 del reporte SBS) ===== */
.riesgo-wrap {
  display: flex;
  flex-direction: column;
  gap: 26px;
}

.riesgo-subtitulo {
  font-family: arial;
  font-size: 15px;
  font-weight: bold;
  color: #114366;
  margin: 0 0 4px;
}

.riesgo-pista {
  font-family: arial;
  font-size: 12px;
  color: #868686;
  margin: 0 0 12px;
}

.riesgo-semaforos {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

.semaforo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 12px 20px;
  border: 1px solid #d2d2d2;
  border-radius: 10px;
  background: #ffffff;
  text-decoration: none;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.semaforo:hover {
  border-color: #0a5f92;
  box-shadow: 0 2px 8px rgba(10, 95, 146, 0.15);
}

.semaforo__circulo {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: block;
}

.semaforo--verde .semaforo__circulo {
  background: #66d403;
  box-shadow: 0 0 0 4px rgba(102, 212, 3, 0.2);
}

.semaforo--amarillo .semaforo__circulo {
  background: #facc15;
  box-shadow: 0 0 0 4px rgba(250, 204, 21, 0.25);
}

.semaforo--rojo .semaforo__circulo {
  background: #ef4444;
  box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.2);
}

.semaforo__mes {
  font-family: arial;
  font-size: 14px;
  font-weight: bold;
  color: #2a2a2a;
}

.semaforo__anio {
  font-family: arial;
  font-size: 12px;
  color: #868686;
}

/* Badges de calificacion */
.calif {
  display: inline-block;
  min-width: 42px;
  text-align: center;
  font-family: arial;
  font-size: 12px;
  font-weight: bold;
  padding: 3px 10px;
  border-radius: 10px;
}

.calif--nor {
  background: #66d403;
  color: #ffffff;
}

.calif--cpp {
  background: #b2ff66;
  color: #000000;
}

.calif--def {
  background: #ffff00;
  color: #000000;
}

.calif--dud {
  background: #ffa500;
  color: #ffffff;
}

.calif--per {
  background: #111111;
  color: #ffffff;
}

.calif--scal {
  background: #9ca3af;
  color: #ffffff;
}

/* Tablas SBS */
.riesgo-consolidado td.riesgo-num,
.riesgo-utilizacion td.riesgo-num {
  text-align: right;
}

.riesgo-consolidado tr.riesgo-total td,
.riesgo-utilizacion tr.riesgo-total td {
  font-weight: bold;
  background: #f0f4f8;
}

/* Leyenda de calificaciones */
.riesgo-leyenda {
  font-family: arial;
  font-size: 12px;
  color: #595959;
  margin: 10px 0 0;
}

.riesgo-leyenda .cc {
  font-weight: bold;
}

.riesgo-leyenda .cc--nor {
  color: #4d9e02;
}

.riesgo-leyenda .cc--cpp {
  color: #a3a800;
}

.riesgo-leyenda .cc--def {
  color: #b06e00;
}

.riesgo-leyenda .cc--dud {
  color: #d35400;
}

.riesgo-leyenda .cc--per {
  color: #111111;
}

.riesgo-leyenda .cc--scal {
  color: #6b7280;
}

/* Banner de alerta "sin datos" (centrado, debajo del formulario) */
.alerta-sindatos {
  text-align: center;
  max-width: 480px;
  margin: 20px auto 0;
  font-size: 14px;
  font-weight: bold;
  border-radius: 8px;
}

/* ===== Impresion / Exportacion PDF: solo el reporte ===== */
@media print {
  /* margin 0 => el navegador no inyecta URL, fecha ni titulo de pagina */
  @page {
    size: A4 landscape;
    margin: 0;
  }

  header,
  .lineatop,
  .boxmenuprin,
  .navbar,
  .top-bar,
  .user-profile-header,
  #user-slot,
  .user-profile,
  .inforight,
  .infoperfil,
  .datosperfil,
  .btn-realizar-busqueda,
  a.btnalta.volver-busqueda,
  .boxexp,
  .iconprint,
  .iconpdf,
  .btn-print,
  .btn-pdf,
  button {
    display: none !important;
  }

  body {
    padding: 8mm;
  }

  body,
  #app,
  .main-content {
    margin: 0 !important;
    background: #fff !important;
  }

  a[href]:after {
    content: none !important;
  }

  /* ===== Fidelidad visual: colores y fondos exactos como en pantalla ===== */
  body,
  #app,
  .modulo-acordeon,
  .apertrespons,
  .admin-card,
  table,
  th,
  td,
  .calif,
  .badge-estado,
  .riesgo-semaforos .semaforo,
  .riesgo-semaforos .semaforo__circulo {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  /* ===== Expansion total de acordeones al imprimir (PC y movil) ===== */
  /* Los bloques siempre visibles, abran o no en pantalla */
  .modulo-acordeon,
  .modulo-acordeon.modulo-cerrado,
  .modulo-acordeon.modulo-abierto {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  /* Contenido de cada seccion forzado abierto */
  .modulo-acordeon .apertrespons {
    display: block !important;
    visibility: visible !important;
    height: auto !important;
    opacity: 1 !important;
    max-height: none !important;
  }

  /* Titulos internos (el legacy los oculta en movil) */
  .modulo-acordeon .titulo {
    display: block !important;
  }

  /* Sin flechas de acordeon en el PDF */
  .modulo-acordeon .btmra::after {
    display: none !important;
    content: none !important;
  }
  .accordion-icon,
  .caret,
  .chevron {
    display: none !important;
  }

  /* Evitar cortes feos de pagina: por fila, las tablas fluyen continuas */
  tr {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  /* Encabezados de tabla repetidos al saltar de pagina */
  thead {
    display: table-header-group !important;
  }
}

/* Icono SVG de Familia (esquina superior derecha del bloque) */
.icon-familia {
  display: block;
  float: right;
  height: 28px;
  width: auto;
  margin-top: 48px;
  color: #0056b3;
}

.icon-familia svg {
  display: block;
  height: 28px;
  width: auto;
}

/* ============================================================
   PANEL ADMIN: badges de estado y botones de accion
   ============================================================ */
.badge-estado {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: bold;
  color: #fff;
  line-height: 1.4;
}
.badge-estado--activo { background: #2e9e44; }
.badge-estado--vencido { background: #e6a817; }
.badge-estado--baneado { background: #cc3333; }
.badge-estado--suspendido { background: #8a8a8a; }

.acciones-cell { white-space: nowrap; }
.acciones-grupo {
  display: inline-flex;
  gap: 6px;
  align-items: center;
}
.btn-accion {
  border: 0;
  border-radius: 4px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  color: #fff;
  cursor: pointer;
  transition: filter .15s ease;
}
.btn-accion:hover:not([disabled]) { filter: brightness(1.1); }
.btn-accion[disabled] { opacity: .45; cursor: not-allowed; }
.btn-accion--editar { background: #1976d2; }       /* azul/neutro */
.btn-accion--desactivar { background: #e68a17; }   /* naranja */
.btn-accion--activar { background: #2e9e44; }      /* verde al reactivar */
.btn-accion--borrar { background: #cc3333; }       /* rojo */

.acciones-globales {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  margin: 10px 0;
}

.fila-botones { display: flex; gap: 10px; margin-top: 12px; }

/* ============================================================
   LOGIN: panel de bloqueo (vencido / baneado / suspendido)
   ============================================================ */
.bloqueo-panel {
  text-align: center;
  padding: 34px 28px;
}
.bloqueo-icono { font-size: 44px; line-height: 1; margin-bottom: 10px; }
.bloqueo-titulo { color: #c0392b; font-size: 22px; margin: 0 0 10px; }
.bloqueo-mensaje { color: #444; font-size: 14px; margin: 0 0 20px; }
.btn-soporte-telegram {
  display: inline-block;
  background: #229ed9;
  color: #fff !important;
  border-radius: 6px;
  padding: 12px 22px;
  font-weight: bold;
  text-decoration: none;
  margin-bottom: 16px;
}
.btn-soporte-telegram:hover { background: #1b87ba; }
.bloqueo-volver { display: block; color: #666; font-size: 12px; }

/* ============================================================
   RESULTADO DE CONSULTA: PC expandido / MOVIL acordeon
   (punto de corte 840px = breakpoint legacy de .apertrespons)
   ============================================================ */
.modulo-acordeon { scroll-margin-top: 80px; }
.bgsbmenu a.modulo-activo { text-decoration: underline; }
.bgsbmenu .submenu a.verde { color: #2e9e44; }

/* PC/tablet grande: todas las secciones visibles continuamente; submenu = anclaje */
@media screen and (min-width: 841px) {
  .modulo-acordeon { display: block !important; }
}

/* Tablet (841-895px): reactivar el submenú tipo chips (en modo PC expandido).
   En movil real (<=840) NO se muestran: la navegacion es 100% por acordeones. */
@media screen and (min-width: 841px) and (max-width: 895px) {
  .bgsbmenu {
    display: block !important;
    background: transparent;
    padding: 8px 0;
  }
  .bgsbmenu .submenu {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 0;
    margin: 0;
    list-style: none;
  }
  .bgsbmenu .submenu li { float: none; }
  .bgsbmenu .submenu a {
    display: inline-block;
    padding: 8px 14px;
    border-radius: 999px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    color: #374151 !important;
    font-size: 12px;
    font-weight: 600;
  }
  .boxdisplay { display: block !important; }
}

/* Movil (<= 840px): acordeones independientes, contraidos por defecto.
   La cabecera (.btmra) siempre es visible; el contenido (.apertrespons)
   se muestra/oculta al tocar. Neutraliza el ocultamiento legacy. */
@media screen and (max-width: 840px) {
  .modulo-acordeon {
    display: block !important;
    scroll-margin-top: 60px;
    border-bottom: 1px solid #e5e7eb;
  }
  .modulo-acordeon .btmra {
    display: block !important;
    cursor: pointer;
    position: relative;
    padding-right: 44px;
  }
  .modulo-acordeon .btmra::after {
    content: '\25BE';
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 14px;
    opacity: 0.85;
  }
  .modulo-acordeon.modulo-abierto .btmra::after { content: '\25B4'; }
  /* Contenido colapsado por defecto; visible al abrir */
  .modulo-acordeon .apertrespons { display: none !important; }
  .modulo-acordeon.modulo-abierto .apertrespons { display: block !important; }
  .modulo-acordeon.modulo-abierto .titulo { display: block !important; }
}

/* ============================================================
   MOVIL: centrado de barra de busqueda y botones
   ============================================================ */
@media screen and (max-width: 640px) {
  .centvalid .row-busq,
  form.centvalid {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  .centvalid .validleft {
    width: 100%;
    max-width: 320px;
    text-align: center;
    float: none !important;
  }
  .centvalid .validleft .label {
    display: block;
    text-align: left;
    margin-bottom: 4px;
  }
  .centvalid .validleft input.campowhite,
  .centvalid .validleft select.campowhite {
    width: 100%;
  }
  .centvalid .validbtn {
    margin-top: 10px;
    text-align: center !important;
  }
  .centvalid .validbtn input.btnbusc {
    width: 100%;
    max-width: 320px;
  }
  .search-user {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
  }
  .search-user .campowhite { width: 100%; max-width: 320px; }
  .search-user .btnbusc,
  .search-user .btn-ghost { width: 100%; max-width: 320px; text-align: center; }
  .acciones-grupo { flex-direction: column; gap: 4px; }
  .btn-accion { width: 100%; min-width: 84px; }
  .acciones-globales { flex-direction: column; align-items: stretch; }
  .admin-tabla { font-size: 12px; }
  .row.row-busq {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .row.row-busq .validleft { float: none; }
}

/* ============================================================
   FIX SELECT (macOS Safari/Edge): flecha, color y opciones visibles
   ============================================================ */
select.campowhite,
select.tipelecc {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: #ffffff;
  color: #111111;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23333' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 34px !important;
  min-width: 160px;
  cursor: pointer;
  border: 1px solid #b9b9b9;
}
select.campowhite:focus,
select.tipelecc:focus {
  outline: 2px solid #1976d2;
  outline-offset: 1px;
  color: #111111;
}
select.campowhite option,
select.tipelecc option {
  background-color: #ffffff;
  color: #111111;
  font-size: 14px;
  padding: 8px;
}
select.campowhite:disabled {
  background-color: #eeeeee;
  color: #888888;
}

/* ============================================================
   PANEL DE JERARQUIA (FakerSys): visible en PC y movil
   ============================================================ */
.jerarquia-panel {
  margin: 10px 0 14px;
  padding: 12px 14px;
  border: 1px dashed #c9c9c9;
  border-radius: 6px;
  background: #fafafa;
}
.jerarquia-campo .label { display: block; margin-bottom: 8px; font-weight: bold; }
.jerarquia-fila {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}
.jerarquia-fila select { flex: 1 1 240px; max-width: 420px; }

/* ============================================================
   PANEL ADMIN: rediseño SaaS minimalista (cards limpias)
   ============================================================ */
.admin-wrap {
  max-width: 1080px;
  margin: 0 auto;
  padding: 18px 14px 40px;
}
.admin-head { margin: 6px 0 18px; }
.admin-titulo { margin: 0 0 4px; font-size: 22px; font-weight: 700; color: #111827; }
.admin-sub { margin: 0; font-size: 13px; color: #6b7280; }

.admin-card {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  margin-bottom: 18px;
  overflow: hidden;
}
.admin-card__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 18px 10px;
  border-bottom: 1px solid #f3f4f6;
}
.admin-card__titulo { margin: 0; font-size: 15px; font-weight: 600; color: #111827; }
.admin-card__sub { font-size: 12px; color: #9ca3af; }
.admin-card__body { padding: 16px 18px 18px; }

.admin-busqueda {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.admin-busqueda .campowhite { flex: 1 1 240px; max-width: 420px; }

.admin-campo { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.admin-campo__label { font-size: 12px; font-weight: 600; color: #374151; }

.admin-form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px 16px;
  align-items: end;
}
.admin-nota { margin: 10px 0 0; font-size: 12px; color: #9ca3af; }

.cupo-global {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  padding: 10px 12px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: #f9fafb;
  margin-bottom: 14px;
}
.cupo-global__label { font-size: 12px; font-weight: 600; color: #374151; }

.jerarquia-panel {
  padding: 12px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: #f9fafb;
  margin-bottom: 14px;
}
.jerarquia-fila { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.jerarquia-fila select { flex: 1 1 260px; max-width: 460px; }

.admin-edit-card {
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: #f9fafb;
  padding: 14px;
  margin-top: 14px;
}
.admin-edit-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}
.admin-edit-card__titulo { margin: 0; font-size: 14px; font-weight: 600; color: #111827; }
.fila-botones { display: flex; gap: 10px; margin-top: 14px; }

/* Tabla limpia */
table.admin-tabla { width: 100%; border-collapse: separate; border-spacing: 0; background: #fff; }
table.admin-tabla thead th {
  background: #f9fafb !important;
  color: #6b7280 !important;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-align: left;
  padding: 10px 12px !important;
  border-bottom: 1px solid #e5e7eb !important;
  border-top: 0 !important;
}
table.admin-tabla tbody td {
  padding: 12px !important;
  border-bottom: 1px solid #f3f4f6 !important;
  color: #111827;
  font-size: 13px;
  vertical-align: middle;
}
table.admin-tabla tbody tr:last-child td { border-bottom: 0 !important; }
table.admin-tabla tbody tr:hover td { background: #fafafa; }

/* Badges de estado: tonos suaves */
.badge-estado {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.5;
  border: 1px solid transparent;
}
.badge-estado--activo { background: #ecfdf5; color: #047857; border-color: #a7f3d0; }
.badge-estado--vencido { background: #fffbeb; color: #b45309; border-color: #fde68a; }
.badge-estado--baneado { background: #fef2f2; color: #b91c1c; border-color: #fecaca; }
.badge-estado--suspendido { background: #f3f4f6; color: #4b5563; border-color: #e5e7eb; }

/* Botones de accion: mismo estilo, radios suave */
.btn-accion { border-radius: 6px; }
.btn-secundario { background: #6b7280 !important; }

/* Anular marcos pesados legacy dentro del panel */
.admin-card .rwd { border: 0 !important; background: transparent !important; padding: 0 !important; }
.admin-card .rwd table { margin: 0; }

@media screen and (max-width: 640px) {
  .admin-wrap { padding: 12px 10px 30px; }
  .admin-card__head { padding: 12px 14px 8px; }
  .admin-card__body { padding: 12px 14px 14px; }
  .admin-form-grid { grid-template-columns: 1fr; }
  .admin-busqueda .campowhite { max-width: none; }
}

@media screen and (max-width: 840px) {
  .admin-tabla-scroll {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
  }
  .admin-tabla-scroll table.admin-tabla {
    width: max-content;
    min-width: 100%;
  }
  .admin-tabla-scroll table.admin-tabla th,
  .admin-tabla-scroll table.admin-tabla td {
    white-space: nowrap;
  }
}

@media print and (max-width: 840px) {
  @page {
    size: A4 landscape;
    margin: 0;
  }
}

/* ============================================================
   IMPRESION / PDF: override agresivo (ULTIMO en el archivo para
   ganar la cascada sobre las reglas de acordeon movil !important)
   ============================================================ */
@media print {
  /* Contenedores de secciones siempre abiertos */
  .modulo-acordeon,
  .modulo-acordeon.modulo-cerrado,
  .modulo-acordeon.modulo-abierto,
  .apertrespons,
  .modulo-acordeon .apertrespons {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
  }

  /* Todos los hijos visibles (anula display:none heredado) */
  .modulo-acordeon *,
  .apertrespons * {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    max-height: none !important;
  }

  /* Restaurar estructura de tablas (despues del selector universal) */
  .modulo-acordeon table,
  .apertrespons table { display: table !important; }
  .modulo-acordeon thead,
  .apertrespons thead { display: table-header-group !important; }
  .modulo-acordeon tbody,
  .apertrespons tbody { display: table-row-group !important; }
  .modulo-acordeon tr,
  .apertrespons tr { display: table-row !important; }
  .modulo-acordeon th,
  .modulo-acordeon td,
  .apertrespons th,
  .apertrespons td { display: table-cell !important; }

  /* Semáforos de riesgo en horizontal */
  .riesgo-semaforos { display: flex !important; }
  .riesgo-semaforos a { display: inline-block !important; }

  /* Sin flechas de acordeon ni botones en el PDF */
  .modulo-acordeon .btmra::after {
    display: none !important;
    content: none !important;
  }
  button { display: none !important; }

  /* ===== Maquetacion identica a Seeker.pdf ===== */

  /* Sin informacion de sesion (doble seguridad) */
  #user-slot, .user-profile, .inforight, .infoperfil, .datosperfil {
    display: none !important;
  }

  /* Chips/capsulas de navegacion: estatica, compacta (no botones grandes) */
  .bgsbmenu {
    display: block !important;
    visibility: visible !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 0 12px !important;
  }
  .bgsbmenu .submenu {
    display: flex !important;
    flex-wrap: wrap;
    gap: 8px;
    list-style: none;
    padding: 0;
    margin: 0;
  }
  .bgsbmenu .submenu li { float: none !important; display: block !important; }
  .bgsbmenu .submenu a {
    display: inline-block !important;
    padding: 4px 14px !important;
    background: #ffffff !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 999px !important;
    box-shadow: none !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    line-height: 1.6 !important;
    pointer-events: none !important;
  }

  /* Chips/botones de navegacion: fuera del PDF */
  .bgsbmenu { display: none !important; }
  .boxdisplay { display: none !important; }

  /* Boton "Realizar otra busqueda" oculto */
  a.btnalta.volver-busqueda { display: none !important; }

  /* Pie de pagina IQ (c) 2026 InfoQuipu visible, al FINAL del flujo
     (anula el flex+margin-top:auto del legacy que lo solapaba con tablas) */
  body {
    display: block !important;
    height: auto !important;
    min-height: 0 !important;
  }
  .footer {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: static !important;
    clear: both !important;
    margin-top: 16px !important;
    break-inside: avoid !important;
    page-break-inside: avoid !important;
  }
  footer { margin-top: 0 !important; }

  /* Barra azul de seccion ELIMINADA (generaba doble linea azul):
     se oculta por completo y cada modulo lleva su propia linea superior */
  .modulo-acordeon .btmra {
    display: none !important;
    background: none !important;
    border: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  .modulo-acordeon {
    /* Linea azul como border-BOTTOM del contenedor: cierra cada seccion,
       viaja con el bloque y jamas queda suelta al pie de una pagina */
    border-bottom: 3px solid #0056b3 !important;
    margin-bottom: 16px !important;
  }
  /* Modulos que caben completos en una hoja: indivisibles (marca JS pdf-section--keep) */
  .pdf-section--keep {
    break-inside: avoid !important;
    page-break-inside: avoid !important;
  }

  /* Iconos/logos distintivos de cada seccion VISIBLES en el PDF,
     pequenos y uniformes (esquina superior derecha, sin expandirse) */
  .modulo-acordeon .detalimg {
    display: block !important;
    visibility: visible !important;
    max-width: 150px !important;
    max-height: 80px !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    float: right !important;
    margin: 0 30px 6px 0 !important;
  }
  .modulo-acordeon .icon-familia {
    display: block !important;
    visibility: visible !important;
    height: 28px !important;
    width: auto !important;
    float: right !important;
    color: #0056b3 !important;
  }
  /* El svg interior tambien mantiene su tamano (el universal * height:auto lo aplastaba) */
  .modulo-acordeon .icon-familia svg {
    display: block !important;
    height: 28px !important;
    width: 28px !important;
    color: #0056b3 !important;
  }

  /* Overlay translucido fuera del papel */
  .opac { display: none !important; }

  /* Leyenda de riesgo en una sola linea (como Seeker.pdf) */
  .riesgo-leyenda { display: block !important; height: auto !important; }
  .riesgo-leyenda span,
  .riesgo-leyenda .cc { display: inline !important; height: auto !important; }
  .calif { display: inline-block !important; height: auto !important; }

  /* ===== Flujo continuo: SIN saltos de pagina forzados por modulo ===== */
  .modulo-acordeon,
  .admin-card {
    break-before: auto !important;
    page-break-before: auto !important;
    break-after: auto !important;
    page-break-after: auto !important;
  }

  /* Filas atomicas: las tablas se dividen de forma natural entre paginas */
  .modulo-acordeon tr,
  .apertrespons tr,
  tr {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  /* Encabezados de tabla repetidos al saltar de pagina */
  thead,
  .modulo-acordeon thead,
  .apertrespons thead {
    display: table-header-group !important;
  }

  /* Titulos siempre junto a su tabla (sin encabezados huerfanos al pie de pagina) */
  .modulo-acordeon h1,
  .modulo-acordeon h3,
  .modulo-acordeon .titulo,
  .modulo-acordeon .titconsult,
  .riesgo-subtitulo {
    break-after: avoid !important;
    page-break-after: avoid !important;
    break-inside: avoid !important;
    page-break-inside: avoid !important;
  }
  /* La tabla no puede empezar en una hoja distinta a su titulo */
  .modulo-acordeon .rwd {
    break-before: avoid !important;
    page-break-before: avoid !important;
  }
  .modulo-acordeon tbody tr:first-child,
  .apertrespons tbody tr:first-child {
    break-before: avoid !important;
    page-break-before: avoid !important;
  }

  /* Bloques de riesgo compactos y continuos */
  .riesgo-bloque { margin: 0 0 12px !important; }

  /* Ocultar controles interactivos dentro de los modulos:
     solo informacion procesada (sin pestañas ni filtros).
     NOTA: .riesgo-semaforos NO se oculta — los semaforos son informacion. */
  .riesgo-pista,
  .btn,
  .btn-group,
  .nav-tabs,
  .filter-controls,
  .selector-meses {
    display: none !important;
  }

  /* ===== Semáforos de riesgo VISIBLES en impresion (como en web) ===== */
  .modulo-acordeon,
  .riesgo-semaforos,
  .riesgo-semaforos .semaforo {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
  .riesgo-semaforos {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    height: auto !important;
    margin: 10px 0 14px !important;
  }
  .riesgo-semaforos .semaforo {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 4px !important;
    padding: 12px 20px !important;
    border: 1px solid #d2d2d2 !important;
    border-radius: 10px !important;
    background: #ffffff !important;
    min-width: 86px !important;
  }
  .riesgo-semaforos .semaforo__circulo {
    display: block !important;
    width: 26px !important;
    height: 26px !important;
    max-height: 26px !important;
    min-height: 26px !important;
    border-radius: 50% !important;
  }
  .riesgo-semaforos .semaforo--verde .semaforo__circulo {
    background: #66d403 !important;
    box-shadow: 0 0 0 4px rgba(102, 212, 3, 0.2) !important;
  }
  .riesgo-semaforos .semaforo--amarillo .semaforo__circulo {
    background: #facc15 !important;
    box-shadow: 0 0 0 4px rgba(250, 204, 21, 0.25) !important;
  }
  .riesgo-semaforos .semaforo--rojo .semaforo__circulo {
    background: #ef4444 !important;
    box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.2) !important;
  }
  .riesgo-semaforos .semaforo__mes {
    display: block !important;
    font-size: 14px !important;
    font-weight: bold !important;
    color: #2a2a2a !important;
  }
  .riesgo-semaforos .semaforo__anio {
    display: block !important;
    font-size: 12px !important;
    color: #868686 !important;
  }
}

/* ============================================================
   LOGIN: modal de bloqueo sobre el propio formulario
   ============================================================ */
.login-wrap { position: relative; }
.login-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.5);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 16px;
}
.login-modal {
  position: relative;
  overflow: hidden;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.18), 0 4px 12px rgba(15, 23, 42, 0.08);
  padding: 32px 28px 24px;
  max-width: 400px;
  width: 100%;
  text-align: center;
}
/* Linea de acento superior (paleta azul del sistema) */
.login-modal::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #1976d2, #0056b3);
}
/* Icono de advertencia estilizado (insignia circular ambar) */
.login-modal__icono {
  width: 60px;
  height: 60px;
  margin: 0 auto 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #fff7ed;
  border: 1px solid #fed7aa;
  font-size: 26px;
  line-height: 1;
}
.login-modal__titulo {
  font-size: 20px;
  font-weight: 700;
  color: #111827;
  letter-spacing: -0.01em;
  margin: 0 0 8px;
}
.login-modal__mensaje {
  font-size: 14px;
  line-height: 1.6;
  color: #4b5563;
  margin: 0 0 6px;
}
.login-modal__aviso {
  font-size: 12.5px;
  line-height: 1.5;
  color: #6b7280;
  margin: 0 0 20px;
}
/* Pie del modal: botones en fila (flexbox row) */
.login-modal__acciones {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  justify-content: center;
  gap: 10px;
  padding-top: 18px;
  border-top: 1px solid #f3f4f6;
}
/* Boton primario "Consultar" (degradado de la paleta del sistema) */
.login-modal__acciones .btn-soporte-telegram {
  flex: 1 1 auto;
  margin: 0 !important;
  border: 0;
  border-radius: 10px;
  padding: 12px 18px;
  font-size: 14px;
  font-weight: 600;
  color: #ffffff !important;
  background: linear-gradient(135deg, #1976d2 0%, #0056b3 100%);
  box-shadow: 0 2px 6px rgba(0, 86, 179, 0.25);
  cursor: pointer;
  transition: filter 0.15s ease, transform 0.05s ease;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.login-modal__acciones .btn-soporte-telegram:hover {
  filter: brightness(1.08);
  box-shadow: 0 4px 10px rgba(0, 86, 179, 0.3);
}
.login-modal__acciones .btn-soporte-telegram:active {
  transform: translateY(1px);
}
/* Boton secundario "Cerrar" (neutro, claramente interactivo) */
.login-modal__cerrar {
  flex: 0 0 auto;
  border: 1px solid #e5e7eb;
  background: #f9fafb;
  color: #374151;
  border-radius: 10px;
  padding: 12px 18px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.login-modal__cerrar:hover {
  background: #f3f4f6;
  border-color: #d1d5db;
}
.login-modal__cerrar:active {
  transform: translateY(1px);
}
@media (max-width: 380px) {
  .login-modal__acciones { flex-direction: column; }
  .login-modal__acciones .btn-soporte-telegram,
  .login-modal__cerrar { width: 100%; }
}

/* ============================================================
   IMPRESION: tablas compactas A4 (ULTIMO bloque, gana la cascada)
   ============================================================ */
@media print {
  .modulo-acordeon table,
  .apertrespons table,
  .modulo-acordeon .rwd table {
    width: 100% !important;
    table-layout: fixed !important;
    font-size: 9pt !important;
    border-collapse: collapse !important;
  }
  .modulo-acordeon th,
  .modulo-acordeon td,
  .apertrespons th,
  .apertrespons td {
    font-size: 9pt !important;
    line-height: 1.4 !important;
    padding: 4px 6px !important;
    white-space: normal !important;
    word-break: normal !important;
    /* Los tokens largos (VIN/chasis) cortan solo si exceden su columna */
    overflow-wrap: break-word !important;
    word-wrap: break-word !important;
    vertical-align: middle !important;
    text-align: left !important;
  }
  .modulo-acordeon th,
  .apertrespons th {
    font-weight: bold !important;
    background: #f3f4f6 !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
  .modulo-acordeon .rwd,
  .apertrespons .rwd {
    overflow: visible !important;
    max-width: 100% !important;
  }
}