/* =========================
   GEPETÍN STYLE · BASE LIMPIO
   ========================= */

/* --- Variables --- */
:root{
  --primary:#0747a6;
  --ok:#1b873f;
  --fail:#c62828;
  --text:#222;
  --muted:#6b7280;
  --border:#e6e6ee;
  --bg:#f6f7fb;
}

/* --- Reset + tipografía --- */
*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
  color:var(--text);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* --- Contenedor estándar (pantalla) --- */
.container{ max-width:980px; margin:0 auto; padding:24px 16px; }

/* =========================
   HOME (logo + tarjetas)
   ========================= */
.hero{ display:flex; align-items:center; gap:16px; margin:16px 0 24px; }
.hero-logo{ height:56px; width:auto; display:block; flex:0 0 auto; }
.hero-copy h1{ margin:0; font-size:clamp(1.6rem,3vw,2.4rem); line-height:1.2; }
.hero-copy p{ margin:.35rem 0 0; color:#6c757d; font-size:1.05rem; }

.cards{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; margin-top:8px; }
.card{
  background:#fff; border:1px solid #e9ecef; border-radius:14px; padding:18px 18px 16px;
  box-shadow:0 2px 6px rgba(0,0,0,.04);
}
.card h2{ margin:0 0 8px; font-size:1.4rem; }
.card p{ margin:0 0 14px; line-height:1.55; }

/* Botones */
.btn{
  display:inline-block; padding:10px 14px; border-radius:10px; text-decoration:none; font-weight:600;
  border:1px solid var(--primary); background:var(--primary); color:#fff;
  transition: transform .04s ease, box-shadow .2s ease, background .2s ease;
}
.btn:hover{ background:#063b88; box-shadow:0 6px 16px rgba(7,71,166,.25); }
.btn:active{ transform:translateY(1px); }

.btn-secondary{
  display:inline-block; padding:10px 14px; border-radius:10px; text-decoration:none; font-weight:600;
  border:1px solid #6c757d; background:#6c757d; color:#fff;
  transition: transform .04s ease, box-shadow .2s ease, background .2s ease;
}
.btn-secondary:hover{ background:#5c636a; box-shadow:0 6px 16px rgba(92,99,106,.25); }

a{ color:var(--primary); } a:hover{ filter:brightness(.9); }

@media (max-width:720px){ .cards{ grid-template-columns:1fr; } }
@media (max-width:480px){ .hero{ gap:12px; } .hero-logo{ height:44px; } }

/* =========================
   PÁGINAS INTERNAS (estudio/prueba)
   ========================= */
main h1{ margin:10px 0 16px; font-size:clamp(1.5rem,3vw,2rem); }

/* Cintillo datos + cronómetro */
.form-header, .scorebar{
  display:flex; flex-wrap:wrap; gap:12px 16px; align-items:center; margin:10px 0 16px;
}
.form-header input[type="text"], .form-header input[type="number"]{
  background:#fff; border:1px solid #e9ecef; border-radius:10px; padding:8px 10px; min-width:220px; outline:none;
}
.form-header input[type="text"]:focus, .form-header input[type="number"]:focus{
  border-color:var(--primary); box-shadow:0 0 0 3px rgba(7,71,166,.15);
}

/* Listas de preguntas */
main ol, main ul{ list-style:none; margin:0; padding:0; }
main .questions, main .preguntas, form .questions{ display:grid; gap:14px; }

/* Tarjeta de pregunta */
main ol>li, .question, .pregunta, .q-item{
  background:#fff; border:1px solid #e9ecef; border-radius:14px; padding:16px;
  box-shadow:0 2px 6px rgba(0,0,0,.04);
}
main .title, main .enunciado, main legend, main li>label{ display:block; font-weight:600; margin-bottom:10px; }

/* Opciones como pills */
main .options, main .opciones, main .answers, main .alternativas{
  display:grid; gap:8px; grid-template-columns:repeat(2,minmax(0,1fr));
}
@media (max-width:720px){ main .options, main .opciones, main .answers, main .alternativas{ grid-template-columns:1fr; } }
main ol>li label{
  display:flex; align-items:center; gap:10px; padding:10px 12px; background:#f9fafb;
  border:1px solid #e9ecef; border-radius:10px; cursor:pointer;
}
input[type="radio"], input[type="checkbox"]{ accent-color:var(--primary); }

/* Feedback */
main .referencia, main .feedback, main .explicacion{ margin-top:8px; font-size:.95rem; color:#6c757d; }

/* Estados */
main .correcto, main .ok{ border-color:var(--ok); background:#e8f7ee; }
main .incorrecto, main .error{ border-color:var(--fail); background:#ffeff0; }

/* Botonera inferior */
main .form-actions, main .actions{ margin-top:18px; display:flex; gap:10px; flex-wrap:wrap; }

/* =========================
   RESULTADO · ESTILO “TRÁNSITO” (pantalla)
   ========================= */
.tg-card{
  max-width:860px; margin:28px auto; background:#fff; padding:28px;
  border-radius:14px; box-shadow:0 6px 20px rgba(0,0,0,.06); border:1px solid var(--border);
}
.tg-head{ display:flex; align-items:center; gap:14px; margin-bottom:14px; }
.tg-head .brand img{ height:48px; width:auto; display:block; }
.tg-meta{ border-left:4px solid var(--primary); padding-left:12px; margin:12px 0 18px; }
.tg-badge{ display:inline-block; padding:3px 8px; border-radius:999px; font-weight:700; font-size:10pt; }
.tg-badge.ok{ background:#e8f5e9; color:var(--ok); border:1px solid #c8e6c9; }
.tg-badge.fail{ background:#ffebee; color:var(--fail); border:1px solid #ffcdd2; }
.tg-q{ border:1px solid #e8e8ef; border-radius:12px; padding:16px; margin:14px 0; }
.tg-q .q-title{ font-weight:700; margin:0 0 8px; }
.tg-q .ok{ color:var(--ok); font-weight:700; }
.tg-q .fail{ color:var(--fail); font-weight:700; }
.tg-q .hint{ color:#555; }

/* =========================
   IMPRESIÓN (PDF)
   ========================= */
@page{ size:A4; margin:18mm 14mm 18mm 14mm; }

@media print{
  /* Oculta UI de pantalla */
  .no-print, nav, .btn, .btn-secondary{ display:none !important; }
  body{ -webkit-print-color-adjust:exact; print-color-adjust:exact; }

  /* Eliminamos cualquier header/footer anterior de impresión */
  .print-header, .print-footer{ display:none !important; }

  /* Tarjeta PDF */
  .tg-card{
    max-width:860px; margin:10mm auto; background:#fff;
    border:1px solid #e6e6ef; border-radius:14px; box-shadow:0 6px 20px rgba(0,0,0,.06);
    padding:8mm;
  }
  .tg-head{ gap:10px; margin-bottom:6mm; }
  .tg-head .brand img{ height:14mm; }
  .tg-head h1{ margin:0; font-size:16pt; }
  .tg-head .subtitle{ color:#777; margin:2mm 0 0; }

  .tg-meta{ border-left:4px solid var(--primary); padding-left:4mm; margin:4mm 0 6mm; }
  .tg-q{ padding:4mm; margin:3mm 0; break-inside:avoid; page-break-inside:avoid; }
  .tg-q .q-title{ margin:0 0 3mm; }
  .tg-q .ok{ color:var(--ok); font-weight:700; }
  .tg-q .fail{ color:var(--fail); font-weight:700; }
  .tg-q .hint{ color:#555; }

  /* margen para que nada choque con el borde inferior */
  main.container{ margin-bottom:16mm !important; }
}

/* =========================
   MEDIA de apoyo (si alguna pregunta trae imágenes)
   ========================= */
.q-media{
  display:grid; gap:12px; justify-items:center; align-items:start; margin:8px 0 12px;
}
.q-media>figure{ margin:0; }
.q-media>figure img{
  display:block; width:100%; height:auto; object-fit:contain; border-radius:10px;
  border:1px solid var(--border); background:#fafafa;
}
.q-media>figure:only-child{ width:90%; }
@media (max-width:560px){ .q-media>figure:only-child{ width:100%; } }
.q-media>figure:not(:only-child){ width:220px; }
@media (max-width:560px){ .q-media>figure:not(:only-child){ width:100%; } }
.q-media>figure img{ max-height:360px; }
@media (max-width:560px){ .q-media>figure img{ max-height:50vh; } }
/* === Logo más pequeño (pantalla + impresión) === */
.tg-head .brand img{ height:80px; width:auto; }
@media print{
  .tg-head .brand img{
    height:30mm;        /* antes 14mm */
    width:auto;
  }
}

/* === Colorear tarjeta por estado (pantalla + impresión) === */
.tg-q.is-ok{
  border-color:#c8e6c9 !important;
  background:#e8f5e9 !important; /* verde suave */
}
.tg-q.is-fail{
  border-color:#ffcdd2 !important;
  background:#ffebee !important; /* rojo suave */
}

/* (opcional) color del texto del rótulo */
.tg-q .ok{ color:#1b873f; font-weight:700; }
.tg-q .fail{ color:#c62828; font-weight:700; }
/* === Compactar el TOP en el PDF (sube todo) === */

/* Reduce el margen superior del papel */
@page{
  /* antes: 18mm 14mm 18mm 14mm */
  margin: 8mm 12mm 14mm 12mm !important; /* top right bottom left */
}

@media print{
  /* Sube la tarjeta: casi cero margen arriba */
  .tg-card{
    /* antes: margin: 10mm auto; */
    margin: 2mm auto 10mm !important;   /* top mucho menor */
  }

  /* Asegura que el contenedor no agregue espacio adicional arriba */
  main.container{
    padding-top: 0 !important;
    margin-top: 0 !important;
  }

  /* (ya que agrandaste el logo) mantengo tu ajuste aquí también: */
  .tg-head .brand img{
    height: 30mm !important; /* tu tamaño elegido */
    width: auto;
  }
}