/* Portal de resultados: liviano, legible en teléfono y apto para imprimir el informe. */
:root {
  --primario: #1e5fa8;
  --fondo: #f3f5f8;
  --tarjeta: #ffffff;
  --texto: #1d2733;
  --suave: #5d6b7a;
  --borde: #dde3ea;
  --error: #c62828;
  --radio: 12px;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--fondo);
  color: var(--texto);
  font-size: 16px;
  line-height: 1.5;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.oculto { display: none !important; }
.suave { color: var(--suave); }
.pequeno { font-size: 13px; }
.destacado { font-weight: 600; }
.etiqueta { font-size: 12px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--suave); }
h1 { font-size: 22px; margin: 0 0 8px; }
h2 { font-size: 18px; margin: 8px 0; }

/* Barra con la marca del centro */
.barra { background: var(--tarjeta); border-bottom: 1px solid var(--borde); padding: 12px 16px; }
.marca { max-width: 960px; margin: 0 auto; display: flex; align-items: center; gap: 12px; }
.logo { height: 48px; max-width: 140px; object-fit: contain; }
.centro-nombre { font-weight: 700; font-size: 18px; }
.centro-eslogan { color: var(--suave); font-size: 13px; }

main { flex: 1; width: 100%; max-width: 960px; margin: 0 auto; padding: 16px; }
.tarjeta { background: var(--tarjeta); border: 1px solid var(--borde); border-radius: var(--radio); padding: 20px; margin-bottom: 16px; }
.centrada { text-align: center; padding: 40px 20px; }
.icono-grande { font-size: 40px; }

/* Verificación */
#vista-verificar { max-width: 460px; margin: 24px auto; }
label { display: block; font-weight: 600; margin: 16px 0 6px; }
input[type="date"] {
  width: 100%; font: inherit; padding: 12px; border: 1px solid var(--borde); border-radius: 8px; background: #fff; color: var(--texto);
}
.boton {
  width: 100%; margin-top: 16px; padding: 14px; font: inherit; font-weight: 600; color: #fff; background: var(--primario);
  border: 0; border-radius: 8px; cursor: pointer;
}
.boton:disabled { opacity: 0.6; cursor: wait; }
.boton.secundario { width: auto; background: transparent; color: var(--primario); border: 1px solid var(--primario); padding: 10px 16px; }
.error { color: var(--error); margin: 12px 0 0; }
.aviso { font-size: 13px; color: var(--suave); text-align: center; margin: 16px 0 0; }
.girando {
  width: 36px; height: 36px; margin: 0 auto 12px; border: 4px solid var(--borde); border-top-color: var(--primario);
  border-radius: 50%; animation: girar 0.9s linear infinite;
}
@keyframes girar { to { transform: rotate(360deg); } }

/* Resultado */
.paciente { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.pestanas { display: flex; gap: 4px; margin-bottom: 12px; border-bottom: 1px solid var(--borde); }
.pestana {
  font: inherit; font-weight: 600; padding: 10px 16px; border: 0; background: transparent; color: var(--suave);
  border-bottom: 3px solid transparent; cursor: pointer;
}
.pestana.activa { color: var(--primario); border-bottom-color: var(--primario); }

/* Informe */
.informe-cabecera { display: flex; align-items: center; gap: 12px; border-bottom: 2px solid var(--primario); padding-bottom: 12px; margin-bottom: 12px; }
.logo-informe { height: 56px; max-width: 160px; object-fit: contain; }
.informe-datos { width: 100%; border-collapse: collapse; font-size: 14px; margin-bottom: 16px; }
.informe-datos th { text-align: left; color: var(--suave); font-weight: 600; padding: 4px 8px 4px 0; white-space: nowrap; vertical-align: top; }
.informe-datos td { padding: 4px 16px 4px 0; vertical-align: top; }
.seccion h3 { font-size: 14px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--primario); margin: 16px 0 4px; }
.seccion p { margin: 0; white-space: pre-line; }
.firma { margin-top: 32px; text-align: center; }
.firma-imagen { max-height: 80px; max-width: 220px; display: block; margin: 0 auto 4px; }
.acciones { margin-top: 16px; text-align: right; }

/* Informe externo: páginas del PDF como hojas */
.externo-cabecera, .visor-cabecera { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.boton.secundario { text-decoration: none; display: inline-block; margin: 0; }
.paginas-pdf { display: flex; flex-direction: column; align-items: center; gap: 16px; background: #e9edf2; border-radius: 8px; padding: 16px; }
.pagina-pdf { width: 100%; max-width: 860px; background: #fff; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15); display: block; min-height: 200px; }

/* Visor de imágenes incrustado */
.visor-marco { width: 100%; height: min(80vh, 820px); border: 0; border-radius: 8px; background: #000; display: block; }

.pie { text-align: center; font-size: 13px; padding: 16px; color: var(--suave); }

@media (max-width: 600px) {
  main { padding: 12px; }
  .tarjeta { padding: 16px; }
  .paginas-pdf { padding: 6px; gap: 8px; }
  .visor-marco { height: 70vh; }
  .informe-datos th, .informe-datos td { display: block; padding: 0; }
  .informe-datos td { margin-bottom: 6px; }
}

/* Imprimir: solo el informe, sin marcos */
@media print {
  body { background: #fff; }
  .barra, .pestanas, .pie, #panel-imagenes, #informe-acciones, .tarjeta:first-child, .externo-cabecera .boton { display: none !important; }
  .paginas-pdf { background: none; padding: 0; gap: 0; }
  .pagina-pdf { box-shadow: none; max-width: none; page-break-after: always; }
  main { max-width: none; padding: 0; }
  .tarjeta { border: 0; padding: 0; }
}