/* =====================================================================
   app.css — Design system "Certificados" (ATE Santa Fe)
   Capa moderna sobre Bootstrap 4. Mobile-first. Se carga después de
   bootstrap.min.css y estilo.css para poder sobrescribirlos.
   ===================================================================== */

:root {
  --verde:        #008002;
  --verde-oscuro: #006b02;
  --verde-medio:  #2e9e30;
  --verde-suave:  #e6f3e6;
  --tinta:        #1f2a24;
  --gris:         #5b6b60;
  --gris-claro:   #8a978e;
  --linea:        #dbe4dc;
  --panel:        #ffffff;
  --fondo:        #f1f5f1;
  --error-bg:     #fdecea;
  --error:        #c62828;

  --font: "Segoe UI", system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif;
  --r-sm: 8px; --r-md: 14px; --r-lg: 22px; --r-pill: 999px;
  --sombra-sm: 0 1px 3px rgba(31,42,36,.10);
  --sombra-md: 0 6px 20px rgba(31,42,36,.12);
  --touch: 50px;
}

/* ------- Base ------- */
html, body { height: auto; min-height: 100%; }
body {
  font-family: var(--font) !important;
  color: var(--tinta);
  background: var(--fondo) !important;
  overflow-x: hidden;
  /* Sticky footer: el contenido empuja el footer al fondo de la ventana */
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
#header { flex: 0 0 auto; }
section#wrap { flex: 1 0 auto; }
footer#pie_pagina { flex: 0 0 auto; }
.row { margin-left: 0; margin-right: 0; margin-bottom: 0; }
a { color: var(--verde-oscuro); }
a:hover, a:focus { color: var(--verde); text-decoration: none; }

/* ------- Header (banner) ------- */
#header { display: block; width: 100%; }
.menu_area { padding: 0; }
.navbar { padding: 0; }
.header_img {
  display: block;
  width: 100%;
  max-width: 1100px;
  height: auto;
  margin: 0 auto;
}

/* ------- Bloque de búsqueda ------- */
#wrap { margin-top: 0 !important; }
.buscador-card {
  max-width: 520px;
  margin: 28px auto 8px;
  background: var(--panel);
  border-radius: var(--r-lg);
  box-shadow: var(--sombra-md);
  padding: clamp(22px, 5vw, 34px);
  text-align: center;
}
.buscador-card h1 {
  font-size: clamp(20px, 5vw, 26px);
  font-weight: 800;
  color: var(--verde-oscuro);
  margin: 0 0 6px;
}
.buscador-card p { color: var(--gris); font-size: 15px; margin: 0 0 18px; }

/* Input + botón de búsqueda */
.input-group { margin: 0; }
.buscador-card .form-control,
#documento {
  min-height: var(--touch);
  height: auto;
  font-size: 18px !important;
  padding: 10px 16px;
  border: 1.5px solid var(--linea);
  border-radius: var(--r-pill) 0 0 var(--r-pill);
  box-shadow: none;
  color: var(--tinta);
  text-align: center;
  letter-spacing: 1px;
}
#documento:focus {
  border-color: var(--verde-medio);
  box-shadow: 0 0 0 3px rgba(46,158,48,.18);
}
#documento::placeholder { color: var(--gris-claro); letter-spacing: normal; }

#buscar_documento {
  min-height: var(--touch);
  min-width: 58px;
  background: var(--verde) !important;
  border: 0 !important;
  color: #fff !important;
  border-radius: 0 var(--r-pill) var(--r-pill) 0 !important;
  font-size: 18px;
}
#buscar_documento:hover, #buscar_documento:focus { background: var(--verde-oscuro) !important; }
#buscar_documento i { color: #fff !important; }

/* ------- Resultados ------- */
#div_certificados { max-width: 900px; margin: 20px auto 0; }
#div_certificados #nombre { color: var(--verde-oscuro); font-size: clamp(18px,4vw,22px); }
#div_certificados hr { border-color: var(--linea); }

.table-container, #div_certificados .table {
  background: #fff;
  border-radius: var(--r-md);
  overflow: hidden;
}
#tabla_certificado { border: 0 !important; width: 100% !important; table-layout: fixed; }
#tabla_certificado thead th, #tabla_certificado tbody td { word-break: break-word; overflow-wrap: anywhere; }
#tabla_certificado thead th {
  background: var(--verde);
  color: #fff;
  border: 0 !important;
  font-weight: 700;
  padding: 12px 14px;
}
#tabla_certificado tbody td {
  vertical-align: middle;
  border-color: var(--linea) !important;
  padding: 12px 14px;
  font-size: 15px;
}
.table-striped tbody tr:nth-of-type(odd) { background: var(--verde-suave); }

/* Botón/enlace de descarga: claro y táctil */
#tabla_certificado td a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: var(--verde);
  color: #fff !important;
  border-radius: var(--r-pill);
  font-weight: 700;
  font-size: 14px;
  white-space: nowrap;
}
#tabla_certificado td a:hover { background: var(--verde-oscuro); }
#tabla_certificado td a i { color: #fff !important; font-size: 15px !important; margin: 0; }

/* Mensaje "sin certificados" */
#div_sin_certificados {
  max-width: 520px;
  margin: 20px auto 0;
}
#div_sin_certificados .col-md-12 {
  background: var(--error-bg);
  color: var(--error);
  border-radius: var(--r-md);
  padding: 18px;
}
#div_sin_certificados h5 { margin: 0; font-size: 16px; }

/* ------- Footer ------- */
footer#pie_pagina {
  background: var(--verde-oscuro);
  color: #fff;
  padding: 22px 0 16px;
  margin-top: 40px;
}
footer#pie_pagina p, footer#pie_pagina a { color: #fff !important; }
footer#pie_pagina .imagen_footer {
  text-align: center;
  margin-bottom: 12px;
}
footer#pie_pagina .imagen_footer img {
  height: 30px; width: auto;
  filter: brightness(0) invert(1);   /* íconos en blanco sobre el verde */
  opacity: .9;
  transition: opacity .15s;
}
footer#pie_pagina .imagen_footer img:hover { opacity: 1; }

/* ------- Utilidades ------- */
img.img-responsive, .img-responsive { max-width: 100%; height: auto; }

/* Botón numérico (jquery.numeric) — sin flechas */
input.positive-integer { -moz-appearance: textfield; }

/* ------- Responsive ------- */
@media (max-width: 575px) {
  .buscador-card { margin: 18px 12px 8px; }
  footer#pie_pagina .imagen_footer { display: inline-block; width: 33.33%; }
  /* Botón de descarga compacto (solo ícono) para que no desborde la tabla */
  #tabla_certificado td a .txt { display: none; }
  #tabla_certificado td a { padding: 9px 13px; }
  #tabla_certificado thead th, #tabla_certificado tbody td { padding: 10px 8px; font-size: 14px; }
}