/* Fondo y tipografía */
body {
  background-image: url('imagenes/fondo.jpg');
  background-size: cover;
  background-attachment: fixed;
  background-position: center;
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
}
.navbar { background-color: rgba(255, 255, 255, 0.9) !important; }
.header { background-color: rgba(255, 255, 255, 0.8); padding: 20px; border-radius: 5px; margin-top: 20px; }
.form-group { margin-bottom: 15px; }
h3 { color: blue; }

p { color: #094074; }

/* Spinner */
#spinner {
  position: fixed; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1000; background-color: rgba(255, 255, 255, 0.8);
  padding: 20px; border-radius: 10px;
}

/* Layout general */
.container { max-width: 1200px; }
.form-control[readonly], .form-control[disabled] {
  background: #f7f7f7; color: #111; cursor: default;
}
#notificacion_no_valida { display: none; text-align: center; margin-top: 12px; }

/* ==== PREVIEW de Drive recortado y centrado (desktop + móvil) ==== */
:root{
  --pdf-w: 3170px;     /* ancho del bloque PDF en desktop */
  --crop-ratio: 0.70;  /* alto/ ancho visible aprox (A4 con márgenes ~0.74–0.88) */
  --shift-y: 10px;    /* cuánto subimos para esconder la toolbar de Drive */
  --scale: 1.47;       /* zoom para tapar los bordes negros laterales */
  --shift-x: -272px;      /* micro-ajuste horizontal si hiciera falta */
}

.preview-wrap{
  width: 100%;
  margin: 12px 0 24px;      /* sin auto para que no encoja */
}

.preview-wrap .crop{
  position: relative;
  width: 100%;
  /* altura automática según el ancho del contenedor */
  aspect-ratio: var(--crop-ratio);  /* ¡clave para que no sobre/ falte alto! */
  overflow: hidden;                 /* recorta UI/negros del visor */
  border-radius: 8px;
  box-shadow: 0 12px 24px rgba(0,0,0,.12);
  background: transparent;
}

.preview-wrap iframe{
  /* zoom + desplazamiento para ocultar barras y laterales */
  width: calc(100% * var(--scale));
  height: 200vh;                    /* súper alto para no cortar al final */
  border: 0;
  display: block;
  transform-origin: top center;
  transform: translate(var(--shift-x), var(--shift-y)) scale(var(--scale));
  pointer-events: none;             /* sin scroll/zoom dentro del visor */
}

/* Por si acaso, evita scroll lateral */
html, body { overflow-x: hidden; }


/* Mensaje y botón de descarga centrados */
#mensaje_descargar { display: none; text-align: center; margin-bottom: 24px; }
#btnDescargar { padding: 10px 16px; font-size: 16px; border-radius: 8px; }

/* === Campos (como 2ª captura) === */
.form-control,
#nombre, #numeroIdentidad, #fechaPermiso{
  background-color: #f1f5f9 !important; /* caja gris clara */
  color: #5b5c5e !important;            /* texto oscuro */
  border-color: #cbd5e1 !important;     /* borde suave */
  border-radius: .3rem;
}
.form-control[readonly]{
  opacity: 1 !important;
  background-color: #f1f5f9 !important;
  color: #0f172a !important;
}
.form-control::placeholder{
  color: #64748b !important;
  opacity: 1;
}
.form-control:focus{
  background-color: #f1f5f9 !important;
  color: #0f172a !important;
  border-color: #3b82f6 !important;
  box-shadow: 0 0 0 .2rem rgba(59,130,246,.25) !important;
}
.form-group > label{
  color: #0f172a;
  font-weight: 700;
}

/* === Aviso de descarga (pie) como 2ª captura === */
#mensaje_descargar{
  text-align: center;
  display: none;                 /* lo maneja tu JS */
  padding: .25rem 0 !important;  /* menos alto */
  margin: .75rem 0 0 !important;
}
#mensaje_descargar.alert{
  background: transparent !important;  /* sin caja azul */
  border: 0 !important;
  box-shadow: none !important;
  color: #e11d48 !important;           /* texto rojo */
}
#mensaje_descargar .btn{
  margin-left: .75rem;                 /* separa del texto */
  vertical-align: middle;
}

/* === 1) Subir un poco el botón de descarga === */
.container{ padding-bottom: 72px; }             /* aire inferior */
#mensaje_descargar{ margin-top: .25rem !important; }
@media (max-width: 576px){
  .container{ padding-bottom: 96px; }           /* más aire en móviles */
}

/* (Opcional) Que el aviso quede “flotando” un poco sobre el borde inferior */
@media (max-width: 768px){
  #mensaje_descargar{
    position: sticky;
    bottom: 12px;
    z-index: 5;
  }
}

/* ===== Layout independiente para móvil/tablet (override) ===== */
@media (max-width: 992px){
  :root{
    --crop-ratio: 0.74;   /* contenedor un poco más alto */
    --scale: 1.02;        /* zoom moderado */
    --shift-y: -96px;     /* sube el PDF dentro del iframe */
    --shift-x: 10px;       /* centra horizontal */
  }
}

@media (max-width: 768px){
  :root{
    --crop-ratio: 0.76;
    --scale: .10;
    --shift-y: -112px;
    --shift-x: 0px;
  }
  /* fondo fijo en móviles puede “moverse”: desactívalo */
  body{
    background-attachment: scroll;
    background-position: top center;
  }
}

@media (max-width: 576px){
  :root{
    --crop-ratio: 1.78;
    --scale: 1.20;
    --shift-y: -124px;
    --shift-x: 0px;
  }
  /* sube un poco el aviso/botón en pantallas chicas */
  #mensaje_descargar{
    position: sticky;
    bottom: 12px;
    z-index: 5;
  }
}

.preview-wrap .crop{ background:#fff !important; }