/* ===== Paleta base y controles ===== */
:root{
  /* Colores base */
  --green-800:#104938;        /* franja superior original */
  --green-900:#0b3f33;
  --banner-green:#104938;     /* si quieres cambiar, usa aquí */
  --footer-green:#073e2e;     /* footer más oscuro, como pediste */
  --gold:#B59E6A;             /* dorado del título */
  --ring:#d3e5ef;

  /* ===== Fondo sellos ===== */
  --bg-size-x: 82px;          /* ancho del sello repetido */
  --bg-opacity: 0.05;         /* velo blanco sobre sellos */

  /* ===== Header (franja sup.) ===== */
  --topbar-h: 90px;           /* altura franja superior */
  --title-fs: 30px;           /* tamaño título */
  --title-lh: 1.08;           /* line-height del título */
  --title-weight: 600;        /* semibold */
  --title-letter: 0.08px;     /* tracking */
  --title-shift: -10px;       /* mover un pelín hacia la izquierda */
  --center-padding-x: 60px;   /* reserva para emblemas */

  /* Emblemas */
  --emblem-left-w: 55.5px;
  --emblem-left-h: 70px;
  --emblem-right-w: 70px;
  --emblem-right-h: 70px;
  --emblem-gap: 13px;         /* separación lateral del borde */

  /* ===== Footer (franja inf.) ===== */
  --footer-bg: var(--footer-green);
  --footer-fs: 18.0px;        /* tamaño del texto */
  --footer-lh: 27.6px;
  --footer-fs-strong: 700;    /* negrita línea superior */
  --footer-fs-regular: 400;   /* normal © */
  --footer-pad-y: 14px;       /* alto efectivo */
  --megafono-size: 20px;      /* icono */
}

/* ===== Fondo con sellos ===== */
.bg-sellos{
  background-image: url("../img/bg-sellos-strip.jpg");
  background-repeat: repeat;
  background-position: top left;
  background-size: var(--bg-size-x) auto;
  position: relative;
}
.bg-sellos::before{
  content:"";
  position: fixed; inset: 0; pointer-events: none;
  background: rgba(255,255,255,var(--bg-opacity));
  z-index: 0;
}

/* ===== Tarjeta genérica ===== */
.card{
  background:#fff; border:1px solid var(--ring); border-radius:14px; overflow:hidden;
  box-shadow: 0 8px 24px rgba(2,6,23,.06);
  position: relative; z-index: 1;
}
.card__head{ background:#f8fafc; border-bottom:1px solid #e8eef5; padding:16px 18px; }
.card__title{ font-weight:700; color:#1f2937; font-size:1.125rem; }
.card__body{ padding:18px; display:grid; gap:18px; }

/* ====== Bloque consulta estilo portal PNP ====== */
.consulta-card{
  background:#fff;
  border:1px solid #14a3b8;        /* borde celeste como el real */
  border-radius:4px;               /* menos redondo, más “oficial” */
  overflow:hidden;
  box-shadow: 0 0 0 1px rgba(20,163,184,.15);
}
.consulta-card__head{
  background:#f8f9fa;              /* gris clarito como bootstrap */
  border-bottom:1px solid #e3e6ea;
  padding:16px 20px;
}
.consulta-card__title{
  font-weight:700;
  color:#1f2937;
  font-size:1.05rem;
}
.consulta-card__body{
  padding:18px 22px;
}

.consulta-label{
  font-size: .95rem;
  color:#111827;
}
.consulta-input{
  width:100%;
  border:1px solid #cbd5e1;
  border-radius:4px;               /* más cuadrado como el original */
  padding:.5rem .7rem;
  background:#fff;
}
.consulta-input:focus{
  border-color:#84c5a8;
  outline:none;
  box-shadow:0 0 0 3px rgba(33,197,143,.15);
}
.consulta-error{
  color:#d11;
  font-size:.9rem;
}

/* Botón institucional */
.btn-institucional{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:#0f5132;              /* verde similar al botón “Nuevo” */
  color:#fff;
  border:1px solid #0b3f33;
  padding:.45rem .9rem;
  border-radius:4px;
  font-weight:600;
  font-size:0.9rem;
}
.btn-institucional svg{
  width:18px;
  height:18px;
}
.btn-institucional:hover{
  filter:brightness(1.06);
}

/* Captcha */
.captcha-asp{
  width: 280px;
}
.captcha-asp__img{
  width: 250px;
  height: 50px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid #cbd5e1;
  border-radius:4px;
  background: #ffffff;
}
.captcha-code{
  font-family:'Courier New',monospace;
  font-size:18px;
  letter-spacing:3px;
  color:#0f172a;
}
.captcha-asp__brand{
  display:block;
  height:10px;
  margin-top:0;
  padding:0;
  font-size:9px;
  line-height:10px;
  text-align:center;
  background:#f8f8f8;
  color:#606060;
  text-decoration:none;
  border-radius:2px;
  width:250px;
}

/* ===== Tabla de resultados (similar a .table .table-bordered .table-sm) ===== */
.tabla-scroll{
  overflow-x:auto;
}
.tabla{
  width:100%;
  border-collapse: collapse;
  font-size: 0.875rem; /* ~ Small */
}
.tabla th,
.tabla td{
  border:1px solid #cfe0ee;  /* borde suave azulito */
  padding:8px 10px;
  white-space:nowrap;
}
.tabla th{
  background:#f1f5f9;        /* encabezado gris claro */
  font-weight:700;
  text-align:left;
}
.tabla-sm th,
.tabla-sm td{
  padding:6px 8px;
}
.tabla-bordered{
  border:1px solid #cfe0ee;
}

/* ===== FRANJA INFERIOR (footer) ===== */
.footer-institucional{
  background-color: var(--footer-bg);
  color:#FFFFFF;
  display:flex;
  align-items:center;
  justify-content:center;
  border-top: 1px solid rgba(0,0,0,.35);
}
.footer-institucional .wrap{
  max-width:1280px;
  width:100%;
  margin:0 auto;
  padding: var(--footer-pad-y) 18px;
  text-align:center;
  box-sizing:border-box;
}
.footer-institucional .linea-superior,
.footer-institucional .linea-inferior{
  font-size: var(--footer-fs);
  line-height: var(--footer-lh);
  color:#FFFFFF;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.footer-institucional .linea-superior{
  font-weight: var(--footer-fs-strong);
  margin-bottom: 8px;
}
.footer-institucional .linea-inferior{
  font-weight: var(--footer-fs-regular);
}
.footer-institucional .megafono{
  margin-right:10px;
  font-size: var(--megafono-size);
  line-height:1;
  vertical-align:middle;
}
/* Ajustes para pantallas pequeñas (celulares) */
@media (max-width: 640px) {
  /* Permitir que el título se parta en varias líneas y sea más pequeño */
  header h1 {
    font-size: 16px !important;
    line-height: 1.3 !important;
    white-space: normal !important;
    transform: translateX(0) !important;
  }

  /* Un poco menos padding lateral para que no se sienta tan apretado */
  header > div {
    padding: 0 16px !important;
  }

  /* La tarjeta principal un poco más compacta */
  .consulta-card {
    padding: 12px !important;
  }

  /* Asegurar que la tabla se pueda desplazar horizontalmente si no entra */
  .tabla-scroll {
    overflow-x: auto !important;
  }
}