:root {
  --navy: #0B2545;
  --navy-2: #16305E;
  --azul: #0078B4;
  --cian: #48C0F0;
  --texto: #101a28;
  --tenue: #5b6b80;
  --linea: #e2e9f1;
  --fondo: #eef3f8;
  --tarjeta: #ffffff;
  --sombra: 0 1px 2px rgba(11,37,69,.06), 0 12px 32px -12px rgba(11,37,69,.18);
  --ok: #0F7A57;
  --ok-fondo: #e6f6f0;
  --ok-borde: #b9e4d4;
  --mal: #B3261E;
  --mal-fondo: #fdecea;
  --mal-borde: #f3c4bf;
}
/* El portal abre siempre en claro, aunque el sistema este en modo oscuro; el
   visitante puede cambiarlo con el boton de la cabecera y la eleccion se
   recuerda. color-scheme lo hace explicito: sin esa linea el navegador oscurece
   por su cuenta los campos de texto y las barras de desplazamiento. */
:root { color-scheme: light; }
:root[data-tema="oscuro"] {
  color-scheme: dark;
  --navy: #cfe2f7; --navy-2: #16305E;
  --texto: #e8eef7; --tenue: #93a4bb; --linea: #223146;
  --fondo: #080f1a; --tarjeta: #111b2a;
  --sombra: 0 1px 2px rgba(0,0,0,.4), 0 12px 32px -12px rgba(0,0,0,.7);
  --ok: #34d399; --ok-fondo: #0d2b22; --ok-borde: #1c5946;
  --mal: #fca5a5; --mal-fondo: #331a18; --mal-borde: #6b2f2a;
}
:root[data-tema="oscuro"] .barra img { filter: brightness(1.18); }
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; padding: 0 0 56px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--fondo); color: var(--texto);
  line-height: 1.6; font-size: 16px;
  -webkit-font-smoothing: antialiased;
}

/* --- cabecera --- */
.barra {
  position: relative;
  background: var(--tarjeta); border-bottom: 1px solid var(--linea);
  padding: 16px 56px; text-align: center;
}
.tema {
  position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
  width: 34px; height: 34px; padding: 0; border-radius: 50%;
  border: 1px solid var(--linea); background: var(--fondo);
  color: var(--tenue); font-size: 14px; line-height: 1; cursor: pointer;
  display: grid; place-items: center;
}
.tema:hover { border-color: var(--azul); color: var(--azul); }
.barra img { height: 26px; width: auto; display: inline-block; vertical-align: middle; }

/* --- hero --- */
.hero { position: relative; height: 740px; overflow: hidden; background: var(--navy-2); }
.hero-media {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover; object-position: center 42%;
}
.hero-video { z-index: 1; }
@media (prefers-reduced-motion: reduce) { .hero-video { display: none; } }
.hero-cubierta {
  position: absolute; inset: 0; z-index: 2;
  background:
    linear-gradient(180deg, rgba(11,37,69,.55) 0%, rgba(11,37,69,.80) 65%, rgba(11,37,69,.94) 100%),
    linear-gradient(115deg, rgba(0,120,180,.45) 0%, rgba(72,192,240,.16) 55%, rgba(0,0,0,0) 100%);
}
/* El bajo tiene que dejar libre el trozo de hero que la tarjeta invade con su
   margen negativo, o el titulo queda cortado por debajo. */
.hero-texto {
  position: absolute; z-index: 3; left: 0; right: 0; bottom: 56px;
  padding: 0 20px; text-align: center; color: #fff;
}
.hero-texto .cintillo {
  display: inline-block; margin: 0 0 8px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  color: #9fd8f5;
}
.hero-texto h1 {
  margin: 0; font-size: 25px; font-weight: 600; line-height: 1.2;
  text-shadow: 0 1px 14px rgba(0,0,0,.35);
}
@media (max-width: 480px) {
  .hero { height: 300px; }
  .hero-texto { bottom: 52px; }
  .hero-texto h1 { font-size: 20px; }
}

/* --- contenedor --- */
.marco { max-width: 680px; margin: -34px auto 0; padding: 0 16px; position: relative; z-index: 4; }
.tarjeta {
  background: var(--tarjeta); border: 1px solid var(--linea);
  border-radius: 16px; box-shadow: var(--sombra);
  padding: 30px 30px 26px; overflow: hidden; position: relative;
}
.tarjeta::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, var(--azul), var(--cian));
}
@media (max-width: 480px) { .tarjeta { padding: 24px 20px 22px; border-radius: 14px; } }

/* --- estado --- */
.estado {
  display: flex; align-items: center; gap: 13px;
  border-radius: 11px; padding: 14px 16px; margin-bottom: 26px;
  border: 1px solid transparent; font-weight: 600; font-size: 15px;
}
.estado.ok  { background: var(--ok-fondo);  color: var(--ok);  border-color: var(--ok-borde); }
.estado.mal { background: var(--mal-fondo); color: var(--mal); border-color: var(--mal-borde); }
.estado .icono {
  flex: 0 0 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center; font-size: 15px;
  background: currentColor;
}
.estado .icono span { color: var(--tarjeta); }
.estado small { display: block; font-weight: 400; font-size: 13px; opacity: .9; margin-top: 1px; }

/* --- reconocimiento --- */
.otorgado {
  margin: 0 0 6px; text-align: center;
  font-size: 13.5px; color: var(--tenue); letter-spacing: .02em;
}
.nombre {
  margin: 0 0 14px; text-align: center;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 30px; font-weight: 400; line-height: 1.25; color: var(--navy);
}
@media (max-width: 480px) { .nombre { font-size: 25px; } }
.filete { display: flex; align-items: center; gap: 12px; margin: 0 auto 16px; max-width: 260px; }
.filete::before, .filete::after {
  content: ""; flex: 1; height: 1px; background: var(--linea);
}
.filete span { color: var(--cian); font-size: 9px; }
.motivo {
  margin: 0 0 28px; text-align: center;
  font-size: 15px; color: var(--tenue); max-width: 460px;
  margin-left: auto; margin-right: auto;
}

/* --- datos --- */
dl {
  display: grid; grid-template-columns: 152px 1fr; gap: 11px 18px;
  margin: 0; font-size: 14.5px;
  border-top: 1px solid var(--linea); padding-top: 22px;
}
dt { color: var(--tenue); }
dd { margin: 0; }
dd.folio {
  font-family: ui-monospace, Consolas, "SF Mono", Menlo, monospace;
  font-size: 13.5px; font-weight: 600; letter-spacing: .03em;
}
@media (max-width: 520px) {
  dl { grid-template-columns: 1fr; gap: 1px; }
  dt { font-size: 12.5px; text-transform: uppercase; letter-spacing: .07em; margin-top: 12px; }
  dt:first-child { margin-top: 0; }
}

/* --- datos tecnicos --- */
details { margin-top: 24px; border-top: 1px solid var(--linea); padding-top: 16px; }
summary {
  cursor: pointer; color: var(--azul); font-size: 14px; font-weight: 500;
  list-style: none; display: flex; align-items: center; gap: 7px;
}
summary::-webkit-details-marker { display: none; }
summary::before { content: "▸"; font-size: 11px; transition: transform .15s; }
details[open] summary::before { transform: rotate(90deg); }
.nota { font-size: 13.5px; color: var(--tenue); margin: 14px 0 8px; }
.mono {
  font-family: ui-monospace, Consolas, "SF Mono", Menlo, monospace;
  font-size: 11.5px; word-break: break-all; color: var(--tenue);
  background: var(--fondo); border: 1px solid var(--linea);
  border-radius: 8px; padding: 9px 11px; margin: 0 0 16px;
}

/* --- buscador --- */
form { display: flex; gap: 9px; margin: 4px 0 0; }
input[type=text] {
  flex: 1; min-width: 0; padding: 13px 15px; font-size: 16px;
  border: 1px solid var(--linea); border-radius: 10px;
  background: var(--fondo); color: var(--texto);
  font-family: ui-monospace, Consolas, Menlo, monospace; letter-spacing: .04em;
}
input[type=text]:focus {
  outline: none; border-color: var(--azul);
  box-shadow: 0 0 0 3px rgba(0,120,180,.16);
}
form button {
  padding: 13px 22px; font-size: 15px; font-weight: 600; cursor: pointer;
  border: 0; border-radius: 10px; color: #fff;
  background: linear-gradient(135deg, var(--azul), #0a94cf);
}
form button:hover { filter: brightness(1.07); }
.aviso { color: var(--mal); font-size: 14px; min-height: 21px; margin: 10px 0 0; }
.explica { font-size: 14.5px; color: var(--tenue); margin: 26px 0 0; border-top: 1px solid var(--linea); padding-top: 20px; }
.motivos { font-size: 14.5px; color: var(--tenue); margin: 0 0 22px; padding-left: 20px; }
.motivos li { margin-bottom: 6px; }

/* --- pie --- */
.pie { text-align: center; color: var(--tenue); font-size: 13px; margin: 22px 16px 0; line-height: 1.65; }
.pie a { color: var(--azul); }
a { color: var(--azul); }