/* ============================================================================
   validar.css — Validación de certificados.

   Página de trabajo, no de escaparate: sin banner, sin ilustraciones, sin
   franjas de relleno. Todo el peso visual va al buscador y a la tabla de
   resultados, que es lo que alguien viene a leer. Lo único decorado es la
   INSIGNIA, y porque la insignia es el producto.
   ========================================================================== */

.page-validar main { background: var(--nube, #F4F6F9); }

/* --- Encabezado: dos líneas y a trabajar --- */
.vc-head { background: #fff; border-bottom: 1px solid var(--color-borde); padding: 2.4rem 0 1.8rem; }
.vc-head h1 {
  margin: 0 0 .35rem; font-family: var(--font-display);
  font-size: clamp(1.6rem, 1.15rem + 1.5vw, 2.2rem); line-height: 1.15; color: var(--azul-900);
}
.vc-head p { margin: 0; color: var(--color-texto-suave); font-size: .95rem; max-width: 56ch; }

/* --- Buscador: una caja blanca sobre la banda gris --- */
.vc-buscar { padding: 1.6rem 0; }
.vc-box {
  display: flex; align-items: center; gap: .55rem;
  background: #fff; border: 1px solid var(--color-borde); border-radius: 12px;
  box-shadow: 0 1px 2px rgba(14, 26, 56, .04); padding: .5rem .5rem .5rem .95rem;
}
.vc-box__ic { flex: none; display: grid; place-items: center; color: var(--color-texto-suave); }
.vc-box__ic svg { width: 19px; height: 19px; }
.vc-box__in {
  flex: 1 1 auto; min-width: 0; border: 0; background: none; outline: none;
  /* 16px o más: por debajo de eso el navegador del móvil hace zoom al enfocar
     y la página salta de sitio en cuanto se toca el campo. */
  font-size: 1rem; color: var(--color-texto); padding: .6rem .2rem;
}
.vc-box__in::-webkit-search-cancel-button { cursor: pointer; }
.vc-box__b {
  flex: none; cursor: pointer; border: 0; border-radius: 9px;
  padding: .72rem 1.5rem; background: var(--verde, #16A34A); color: #fff;
  font-family: var(--font-display); font-weight: 700; font-size: .9rem;
  transition: background var(--dur-rapida);
}
.vc-box__b:hover { background: var(--verde-700, #0E7A33); }

/* --- Resultados --- */
.vc-res { padding: 0 0 2.4rem; }
.vc-cuenta { margin: 0 0 .9rem; font-size: .88rem; color: var(--color-texto-suave); }
.vc-cuenta strong { color: var(--azul-900); }

.vc-lista { display: flex; flex-direction: column; gap: .6rem; }
/* Cada titular es una ficha, y cuando está ABIERTA se nota: barra navy a la
   izquierda, cabecera con fondo y sombra. Con catorce coincidencias —«Jose»
   devuelve catorce— y tres abiertas a la vez, todo blanco sobre blanco es una
   sábana en la que se pierde de quién es cada tabla. */
.vc-p {
  position: relative; background: #fff;
  border: 1px solid var(--color-borde); border-radius: 12px;
  overflow: hidden; transition: box-shadow var(--dur-rapida), border-color var(--dur-rapida);
}
.vc-p[open] { border-color: #C7D3E6; box-shadow: 0 6px 20px rgba(14, 26, 56, .07); }
.vc-p__sum {
  display: flex; align-items: center; gap: .9rem; cursor: pointer; list-style: none;
  padding: .85rem 1rem;
}
.vc-p__sum::-webkit-details-marker { display: none; }
.vc-p__sum:hover { background: #FAFBFD; }
.vc-p[open] .vc-p__sum { background: #F2F6FC; }
.vc-p[open] .vc-p__sum:hover { background: #EAF0FA; }
.vc-p__av {
  flex: none; width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--azul-900); color: #fff;
  font-family: var(--font-display); font-weight: 700; font-size: .82rem; letter-spacing: .02em;
}
.vc-p__id { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.vc-p__id strong { font-size: .96rem; color: var(--azul-900); line-height: 1.25; }
.vc-p__id span { font-size: .78rem; color: var(--color-texto-suave); }
.vc-p__n { flex: none; font-size: .8rem; color: var(--color-texto-suave); white-space: nowrap; }
.vc-p__n b { color: var(--azul-900); font-size: .92rem; }
.vc-p__ok {
  flex: none; display: inline-flex; align-items: center; gap: .3rem;
  padding: .22rem .6rem; border-radius: 999px;
  background: #ECFDF3; color: #0F7A34;
  font-size: .72rem; font-weight: 700; letter-spacing: .02em; white-space: nowrap;
}
.vc-p__ok svg { width: 12px; height: 12px; }
.vc-p__chev { flex: none; width: 17px; height: 17px; color: var(--color-texto-suave); transition: transform .18s ease; }
.vc-p[open] .vc-p__chev { transform: rotate(180deg); }
.vc-p[open] .vc-p__sum { border-bottom: 1px solid var(--color-borde); }

/* --- Tabla de certificados de una persona --- */
/* Se desliza dentro de su caja: una tabla de cinco columnas en un móvil no
   cabe, y lo que NO puede pasar es que empuje la página entera a lo ancho. */
/* La línea navy de la izquierda arranca AQUÍ, en la barra de columnas, y baja
   hasta el pie de la ficha. Antes salía de `.vc-p::before` y recorría la ficha
   entera, incluida la cabecera con el nombre; el dueño la quiere solo en la
   tabla.
   Va como BORDE y no como sombra interior. Con `box-shadow: inset` la línea
   salía a trozos: el fondo gris de las filas pares (la cebra) se pinta encima
   de la sombra del padre y se la comía fila por fila. Un borde se pinta fuera
   de la caja de relleno, así que ningún fondo de dentro lo puede tapar. Los
   3 px que ocupa desplazan la tabla lo mismo que ocupa la línea — que es
   justamente lo que se quiere. */
.vc-p__cuerpo { overflow-x: auto; border-left: 3px solid var(--azul-900); }
.vc-tabla { width: 100%; border-collapse: collapse; min-width: 720px; }
/* La barra de columnas va en NAVY, no en gris casi blanco. Hace dos cosas a la
   vez: rotula la tabla y marca dónde empieza cada titular, que es justo lo que
   faltaba cuando hay varias fichas abiertas. */
.vc-tabla th {
  text-align: left; padding: .62rem 1rem; background: var(--azul-900);
  font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: #C3CEE3; white-space: nowrap;
}
.vc-tabla td { padding: .8rem 1rem; border-bottom: 1px solid #EEF1F6; vertical-align: top; font-size: .85rem; }
.vc-tabla tr:last-child td { border-bottom: 0; }
/* Cebra suave: con dos o tres cursos por persona, seguir una fila hasta la
   columna de la insignia deja de ser un ejercicio de puntería. */
.vc-tabla tbody tr:nth-child(even) td { background: #FAFBFD; }
.vc-t-curso span { display: block; font-weight: 600; color: var(--azul-900); line-height: 1.35; max-width: 34ch; }
.vc-t-curso small { display: block; margin-top: .2rem; font-size: .72rem; color: var(--color-texto-suave); }
.vc-t-dur { white-space: nowrap; color: var(--color-texto-suave); }
/* OJO: NADA de `display:flex` sobre un <td>. Un td con display:flex deja de ser
   una celda, se sale del reparto de columnas de la tabla y toda la fila se
   apila en vertical — que es exactamente lo que pasaba: identificador, fecha e
   insignia caían uno debajo de otro en la misma columna. Las celdas se quedan
   como celdas y quien se ordena en vertical es su CONTENIDO. */
.vc-t-id > *, .vc-t-fecha > * { display: flex; align-items: center; gap: .4rem; }
.vc-t-id > * + *, .vc-t-fecha > * + * { margin-top: .32rem; }
.vc-t-fecha > span { white-space: nowrap; color: var(--color-texto-suave); }
.vc-folio code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .76rem; background: #EEF2F8; color: var(--azul-900);
  padding: .2rem .45rem; border-radius: 5px; white-space: nowrap;
}
.vc-lang {
  font-style: normal; font-size: .62rem; font-weight: 700; letter-spacing: .06em;
  padding: .12rem .34rem; border-radius: 4px; background: #EEF2F8; color: #5B6B85;
}
.vc-lang--es { background: #ECFDF3; color: #0F7A34; }
.vc-lang--en { background: #EAF1FF; color: #1D4FD7; }

/* --- Miniatura de la insignia --- */
.vc-t-badge { white-space: nowrap; }   /* celda, no contenedor flex (ver nota arriba) */
.vc-badge {
  display: inline-flex; flex-direction: column; align-items: center; gap: .25rem;
  vertical-align: top; margin-right: .4rem;
  cursor: pointer; padding: .3rem; border: 1px solid var(--color-borde);
  border-radius: 9px; background: #fff;
  transition: border-color var(--dur-rapida), box-shadow var(--dur-rapida), transform var(--dur-rapida);
}
.vc-badge:hover { border-color: var(--verde, #16A34A); box-shadow: 0 4px 12px rgba(14, 26, 56, .1); transform: translateY(-1px); }
.vc-badge__mini {
  display: grid; place-items: center;
  width: 42px; height: 42px; border-radius: 5px; overflow: hidden;
  background: linear-gradient(160deg, #12233F, #0B1729);
}
.vc-badge__mini img { width: 34px; height: 34px; display: block; background: #fff; padding: 2px; border-radius: 3px; }
.vc-badge__lang { font-size: .62rem; font-weight: 700; letter-spacing: .06em; color: var(--color-texto-suave); }

/* --- Sin resultados --- */
.vc-nada {
  background: #fff; border: 1px solid var(--color-borde); border-radius: 12px;
  padding: 2.4rem 1.5rem; text-align: center;
}
.vc-nada__ic { display: inline-grid; place-items: center; width: 46px; height: 46px; color: var(--gris, #8A97AB); }
.vc-nada__ic svg { width: 34px; height: 34px; }
.vc-nada h2 { margin: .5rem 0 .3rem; font-family: var(--font-display); font-size: 1.15rem; color: var(--azul-900); }
.vc-nada p { margin: 0 auto; max-width: 50ch; color: var(--color-texto-suave); font-size: .89rem; }
.vc-nada code {
  display: inline-block; margin-top: .2rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  background: #EEF2F8; color: var(--azul-900); padding: .12rem .45rem; border-radius: 5px;
}
.vc-nada__tip { margin-top: .8rem !important; font-size: .82rem !important; }

/* --- Franja de confianza ---
   Va PEGADA AL PIE, no debajo del buscador. Colgando del buscador competía con
   el resultado —que es a lo que se viene— y dejaba un hueco gris enorme entre
   ella y el pie de página. Abajo hace de remate: se lee al terminar, que es
   cuando importa saber de dónde salió el dato.
   El empujón lo da `margin-top:auto` dentro de un <main> en columna; el propio
   <main> ya se estira a la altura de la pantalla (regla del pie en base.css). */
body.page-validar > main { display: flex; flex-direction: column; }
.vc-trust { margin-top: auto; background: #fff; border-top: 1px solid var(--color-borde); padding: 1.8rem 0; }
.vc-trust__row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem; }
.vc-trust__i { display: flex; align-items: flex-start; gap: .75rem; }
.vc-trust__ic { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 8px; background: #ECFDF3; color: #0F7A34; }
.vc-trust__ic svg { width: 19px; height: 19px; }
.vc-trust__i strong { display: block; font-size: .88rem; color: var(--azul-900); line-height: 1.3; }
.vc-trust__i span { display: block; margin-top: .1rem; font-size: .8rem; color: var(--color-texto-suave); line-height: 1.4; }
@media (max-width: 760px) { .vc-trust__row { grid-template-columns: 1fr; gap: 1rem; } }

/* ============================================================================
   LA INSIGNIA DIGITAL
   Aquí sí hay diseño: es lo que la persona va a enseñar en LinkedIn o adjuntar
   en un correo. Navy de la casa, filete dorado, el QR abajo a la derecha.
   ========================================================================== */
.ins { position: fixed; inset: 0; z-index: 9000; display: grid; place-items: center; padding: 1.2rem; }
.ins[hidden] { display: none; }
.ins__fondo { position: absolute; inset: 0; background: rgba(9, 18, 38, .62); backdrop-filter: blur(2px); }
.ins__caja {
  position: relative; width: min(460px, 100%); max-height: calc(100vh - 2.4rem); overflow-y: auto;
  background: #fff; border-radius: 14px; box-shadow: 0 24px 60px rgba(9, 18, 38, .35);
  animation: insSube .18s ease both;
}
@keyframes insSube { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .ins__caja { animation: none; } }

.ins__cab { display: flex; align-items: center; gap: .8rem; padding: 1rem 1.1rem .75rem; }
.ins__cab h2 { margin: 0; flex: 1 1 auto; font-family: var(--font-display); font-size: 1rem; color: var(--azul-900); }
.ins__cab h2 span { color: var(--color-texto-suave); font-weight: 500; }
.ins__x {
  flex: none; width: 30px; height: 30px; display: grid; place-items: center; cursor: pointer;
  border: 0; border-radius: 8px; background: none; color: var(--color-texto-suave);
}
.ins__x:hover { background: #EEF2F8; color: var(--azul-900); }
.ins__x svg { width: 16px; height: 16px; }

/* --- La ficha ---
   Marco exterior navy + panel interior con filete y marcas en las esquinas. Ese
   es todo el truco: un rectángulo de color con texto encima se lee como un
   bloque de página; el mismo rectángulo ENMARCADO y con las esquinas señaladas
   se lee como un documento emitido. Se fue el filete dorado del borde inferior
   (pedido del dueño): una raya de color a lo ancho es lo que más delataba que
   esto era una caja de HTML. */
.ins__hoja {
  margin: 0 1.1rem; padding: 9px;
  background: #0A1524; border-radius: 13px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07);
}
.ins__marco {
  position: relative; overflow: hidden;
  padding: 1.25rem 1.3rem 1.1rem; border-radius: 7px; color: #fff;
  background:
    radial-gradient(120% 90% at 12% 0%, rgba(90, 132, 196, .20), transparent 58%),
    linear-gradient(158deg, #172B4D 0%, #0D1C32 60%, #0A1524 100%);
  box-shadow: inset 0 0 0 1px rgba(160, 190, 235, .16);
}
/* Marcas en las cuatro esquinas: dos trazos en ángulo, como los de un pasaporte
   o una lámina de plano. */
.ins__esq { position: absolute; width: 13px; height: 13px; border: 1.5px solid rgba(180, 205, 240, .35); }
.ins__esq--a { top: 8px;  left: 8px;  border-right: 0; border-bottom: 0; }
.ins__esq--b { top: 8px;  right: 8px; border-left: 0;  border-bottom: 0; }
.ins__esq--c { bottom: 8px; left: 8px;  border-right: 0; border-top: 0; }
.ins__esq--d { bottom: 8px; right: 8px; border-left: 0;  border-top: 0; }
/* La «A» de la marca, muy tenue, de fondo: textura de la casa, no un adorno
   cualquiera. */
.ins__agua {
  /* Bien salida por la esquina: se ve el arranque de la A y poco más. Centrada
     competía con el QR, que es lo único de esta ficha que hay que poder leer. */
  position: absolute; right: -46px; bottom: -52px; width: 190px; height: 190px;
  opacity: .045; pointer-events: none;
}
.ins__agua path { fill: #fff; }

.ins__top { position: relative; display: flex; align-items: center; justify-content: space-between; gap: .8rem; margin-bottom: 1rem; }
.ins__logo { display: block; }
.ins__sello {
  font-size: .57rem; font-weight: 700; letter-spacing: .19em; text-transform: uppercase;
  color: #93A7C4; white-space: nowrap;
}
.ins__curso {
  position: relative; margin: 0 0 .55rem; padding-bottom: .85rem;
  font-family: var(--font-display); font-weight: 700;
  font-size: 1.04rem; line-height: 1.3; color: #fff;
}
/* Un filete corto bajo el título: separa sin cruzar la ficha de lado a lado. */
.ins__curso::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 46px; height: 2px;
  background: var(--verde, #16A34A); border-radius: 2px;
}
.ins__datos { position: relative; margin: .75rem 0 0; display: grid; gap: .5rem; }
.ins__datos > div { display: flex; align-items: baseline; gap: .6rem; }
.ins__datos dt {
  flex: none; width: 8.5em; font-size: .63rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: #7F91AC;
}
.ins__datos dd { margin: 0; font-size: .84rem; color: #E6EDF7; line-height: 1.35; }
.ins__folio { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .78rem !important; color: #8FF3BF !important; }
.ins__pie {
  position: relative; display: flex; align-items: flex-end; justify-content: space-between; gap: .8rem;
  margin-top: 1rem; padding-top: .8rem; border-top: 1px solid rgba(255, 255, 255, .10);
}
.ins__qrtxt { font-size: .63rem; letter-spacing: .06em; color: #7F91AC; }
.ins__qr { width: 62px; height: 62px; display: block; background: #fff; padding: 4px; border-radius: 5px; }

.ins__acciones { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; padding: 1rem 1.1rem 1.15rem; }
.ins__acciones .btn--primario { margin-left: auto; }

@media (max-width: 560px) {
  .vc-head { padding: 1.8rem 0 1.4rem; }
  .vc-box { flex-wrap: wrap; }
  .vc-box__b { width: 100%; }
  .ins__acciones .btn--primario { margin-left: 0; width: 100%; }
}