/**
 * Tema «siged» — réplica del buscador de validación de documentos académicos.
 *
 * Medido sobre la captura de referencia (2533×434 a escala 1.25), no copiado a ojo:
 * Noto Sans 400 (título 30.4px = 1.9rem, sobretítulo 22.4px = 1.4rem, ruta 14.2px)
 * · verde #235B4E · gris #6F7271 · dorado #BC955C · franja de fondo de 240px
 * ESTIRADA a 100%×100% (la referencia no conserva la proporción: 1.54 × 0.73).
 *
 * 🪤 Dos trampas que ya costaron una vuelta cada una:
 *  - Los tamaños salieron al 80 %: el barrido de fuentes medía en píxeles CSS y yo
 *    los dividí otra vez entre la escala 1.25.
 *  - Dentro de WordPress los textos salían más estrechos que en la maqueta: el tema
 *    del sitio pone un `letter-spacing` global que se cuela en el elemento. Por eso
 *    la raíz fija `letter-spacing: 0` y todo lo demás lo hereda.
 *
 * 🔴 Los colores del RESULTADO no se tocan aquí: el semáforo es el de publico.css.
 * Un tema puede cambiar el buscador; no puede pintar de verde un «no existe».
 */
.vc.vcs {
  --vcs-sobre-top: 59px;
  --vcs-titulo-top: 7.6px;
  --vcs-migas-top: 66.4px;
  --vcs-caja-top: 17.6px;
  max-width: none; margin: 0; font-size: 16px; line-height: 1.42; letter-spacing: 0; word-spacing: 0;
  font-family: 'Noto Sans', Arial, Helvetica, sans-serif; color: #292929; background: #fff;
  text-transform: none; font-kerning: normal;
}
.vcs *, .vcs *::before, .vcs *::after { box-sizing: border-box; letter-spacing: inherit; }
.vcs [hidden] { display: none !important; }

.vcs .vcs-banner { height: 240px; background: var(--vcs-fondo, none) 0 0 / 100% 100% no-repeat; }
.vcs .vcs-contenedor { width: 936px; max-width: calc(100% - 32px); margin: 0 auto; }
/* Los textos van 16 px reales (12.8 CSS) hacia dentro respecto a la caja. */
.vcs .vcs-banner .vcs-contenedor { padding-left: 12.8px; }

.vcs .vcs-sobre  { margin: 0; padding-top: var(--vcs-sobre-top); font-size: 22.4px; line-height: 1.2; font-weight: 400; color: #383838; }
.vcs .vcs-titulo { margin: var(--vcs-titulo-top) 0 0; padding: 0; font-size: 30.4px; line-height: 1.2; font-weight: 400; color: #292929; font-family: inherit; }

.vcs .vcs-migas { list-style: none; margin: var(--vcs-migas-top) 0 0; padding: 0; display: flex; flex-wrap: wrap; font-size: 14.2px; line-height: 1.42; color: #3A3C3E; }
.vcs .vcs-migas li { margin: 0; padding: 0; }
.vcs .vcs-migas li + li::before { content: "/"; color: #ccc; padding: 0 6px; font-size: .85em; }
.vcs .vcs-migas li[aria-current] { font-weight: 700; }

/* La caja. Sigue llevando `.vc-forma` porque publico.js la busca: aquí se neutraliza su flex. */
.vcs .vcs-caja { display: block; margin-top: var(--vcs-caja-top); border: 2px solid #BC955C; border-radius: 4px; background: #fff; padding: 19.6px 17.2px 17.6px 15.6px; }
.vcs .vcs-fila { display: flex; align-items: center; }

.vcs .vcs-campo {
  all: unset; box-sizing: border-box; display: block; flex: 0 0 438.4px; width: 438.4px; height: 30.4px;
  border: 1px solid #ccc; border-radius: 4px; padding: 0 10px; background: #fff;
  font: 400 14.5px/1.2 'Noto Sans', Arial, sans-serif; color: #292929; letter-spacing: 0; text-transform: none;
}
.vcs .vcs-campo::placeholder { color: #999; opacity: 1; }
.vcs .vcs-campo:focus { border-color: #BC955C; box-shadow: 0 0 0 2px rgba(188, 149, 92, .25); }

.vcs .vcs-buscar, .vcs .vcs-restablecer {
  all: unset; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center;
  height: 36.8px; padding-bottom: 3.2px; border-radius: 3px; cursor: pointer; color: #fff; text-align: center;
  font: 400 14px/1 'Noto Sans', Arial, sans-serif; letter-spacing: 0;
}
.vcs .vcs-buscar      { flex: 0 0 207.2px; width: 207.2px; margin-left: 24px;   background: #235B4E; }
/* En la referencia el gris va algo más abajo que el verde y tiene un filo más oscuro. */
.vcs .vcs-restablecer { flex: 0 0 204px;   width: 204px;   margin-left: 25.6px; background: #6F7271; position: relative; top: 1.2px; box-shadow: inset 0 0 0 1px #5F6261; }
.vcs .vcs-buscar:disabled { opacity: .6; cursor: progress; }
.vcs .vcs-buscar:focus-visible, .vcs .vcs-restablecer:focus-visible { outline: 2px solid #BC955C; outline-offset: 2px; }

.vcs .vcs-ayuda { display: block; width: max-content; margin: 10px auto 0; font-size: 14.6px; line-height: 20px; color: #BC955C; text-decoration: underline; text-underline-offset: 3.6px; }
.vcs .vcs-ayuda-panel { margin-top: 10px; font-size: 14px; color: #555; text-align: center; }
.vcs .vc-salida { margin-top: 16px; }

/* ═══ Resultado: «Detalle del documento» ════════════════════════════════════
 * Medido sobre la segunda captura (1640×924 a escala 1.25): Noto Sans · texto
 * #373737 · encabezado negro · azul #004A98 sobre #D5EBF6 · dorado #B6903A.
 *
 * 🪤 En la referencia etiquetas y valores NO comparten renglón: las etiquetas
 * avanzan 29.07px y los valores 28px, así que son dos columnas independientes.
 * Eso sólo se sostiene si ningún valor parte en dos renglones — por eso las dos
 * columnas van sin partir en pantallas anchas, y por debajo de 1300px se usa la
 * lista etiqueta–valor, que sí parte bien.
 *
 * 🔴 Sólo «Registrado» usa el azul de la referencia. Los demás estados llevan su
 * propio color y NO enseñan la tabla.
 */
.vcs .vc-salida { margin-top: 0; }
/* Es más ancho que la caja del buscador (974.4 contra 936) y vive DENTRO de su contenedor:
   se centra contra la ventana, o el contenedor lo recorta a 904 y el estatus se corre. */
.vcs .vcs-detalle { width: 974.4px; max-width: calc(100vw - 32px); margin: var(--vcs-detalle-top, 40px) 0 0 calc(50% - min(487.2px, 50vw - 16px)); font-family: 'Noto Sans', Arial, sans-serif; color: #373737; }
.vcs .vcs-detalle-titulo { margin: 0; padding: 0; font-size: 18.9px; line-height: 1.2; font-weight: 400; color: #000; font-family: inherit; }
.vcs .vcs-divisor { height: 7px; margin-top: 9.6px; background:
    linear-gradient(#EAEAE8, #EAEAE8) 0 0 / 100% 1px no-repeat,
    linear-gradient(#B6903A, #B6903A) 0.8px 1px / 28.8px 5.3px no-repeat; }
.vcs .vcs-detalle-cuerpo { margin: 0 6.4px; }
.vcs .vcs-divisor-interior { height: 5px; margin-top: 33.6px; background:
    linear-gradient(#EAEAE8, #EAEAE8) 29.6px 0 / calc(100% - 29.6px) 1px no-repeat,
    linear-gradient(#BD973A, #BD973A) 0.8px 0 / 28px 4.4px no-repeat; }

/* La lista con los pares: en pantallas anchas sólo para lectores de pantalla. */
.vcs .vcs-lista { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); border: 0; }
.vcs .vcs-datos { display: flex; margin-top: 53.4px; }
.vcs .vcs-etiquetas { flex: 0 0 212px; }
.vcs .vcs-etiquetas p { margin: 0; font-size: 14.5px; line-height: 29.07px; font-weight: 700; color: #373737; white-space: nowrap; }
.vcs .vcs-valores { flex: 1 1 auto; padding-top: 6.4px; min-width: 0; }
.vcs .vcs-valores p { margin: 0; font-size: 15.2px; line-height: 28px; font-weight: 400; color: #373737; white-space: nowrap; }
/* La fecha de la referencia tiene la MISMA altura de letra pero va más espaciada (medido: 14 px reales en 18 huecos). */
.vcs .vcs-valores p:nth-child(7) { letter-spacing: .62px; }
/* El sello mide ~300 caracteres sin espacios: es el único valor que parte renglón, y va al final
   para que ese renglón de más no descuadre las etiquetas de las filas de arriba. */
.vcs .vcs-valores p.vcs-sello { padding-top: 3px; white-space: normal; overflow-wrap: anywhere; line-height: 22.4px; font-size: 14px; }
.vcs .vcs-lista dd.vcs-sello { font-size: 14px; }

.vcs .vcs-estatus { width: 247.2px; height: 128px; margin: 33.6px auto 0; position: relative; left: 6.8px; padding-top: 32.8px; text-align: center; border-radius: 2px; background: #D5EBF6; box-shadow: 0 1px 2px rgba(0, 74, 152, .10); }
.vcs .vcs-estatus p { margin: 0; line-height: 28.8px; color: #004A98; }
.vcs .vcs-estatus-etiqueta { font-size: 14.8px; font-weight: 700; }
.vcs .vcs-estatus-valor { font-size: 15.25px; font-weight: 400; }
.vcs .vcs-estatus-nota { max-width: 560px; margin: 14px auto 0; text-align: center; font-size: 15.2px; line-height: 22.4px; color: #373737; }
/* Los estados que no son «Registrado»: colores fijos y distintos entre sí. */
.vcs .vcs-estatus[data-estado="no_encontrada"],
.vcs .vcs-estatus[data-estado="revocada"] { background: #FBE3E3; box-shadow: 0 0 0 1px #F0C4C4; }
.vcs .vcs-estatus[data-estado="no_encontrada"] p,
.vcs .vcs-estatus[data-estado="revocada"] p { color: #9B1C1C; }
.vcs .vcs-estatus[data-estado="folio_mal_escrito"] { background: #FFF3D6; box-shadow: 0 0 0 1px #EFD9A6; }
.vcs .vcs-estatus[data-estado="folio_mal_escrito"] p { color: #7A5300; }
.vcs .vcs-estatus[data-estado="no_disponible"] { background: #ECECEC; box-shadow: 0 0 0 1px #D6D6D6; }
.vcs .vcs-estatus[data-estado="no_disponible"] p { color: #3F3F3F; }

.vcs .vcs-atencion { height: 148px; margin-top: 55.2px; padding: 15.4px 10px 0 12.4px; border-radius: 3px; background: #D6ECF6; box-shadow: 0 1px 1px rgba(0, 74, 152, .08); font-size: 15.2px; line-height: 22.4px; color: #373737; }
.vcs .vcs-atencion strong { color: #004A98; font-weight: 700; }

@media (max-width: 1299px) {
  .vcs .vcs-datos { display: none; }
  .vcs .vcs-lista { position: static; width: auto; height: auto; margin: 40px 0 0; overflow: visible; clip: auto; display: grid; grid-template-columns: 213.2px 1fr; row-gap: 8px; }
  .vcs .vcs-lista dt { margin: 0; font-size: 14.5px; line-height: 1.5; font-weight: 700; color: #373737; }
  .vcs .vcs-lista dd { margin: 0; font-size: 15.2px; line-height: 1.5; color: #373737; overflow-wrap: anywhere; }
  .vcs .vcs-atencion { height: auto; padding-bottom: 16px; }
}
@media (max-width: 991px) {
  .vcs .vcs-detalle { margin-top: 24px; }
  .vcs .vcs-detalle-cuerpo { margin: 0; }
  .vcs .vcs-lista { grid-template-columns: 1fr; row-gap: 0; }
  .vcs .vcs-lista dd { margin-bottom: 10px; }
  .vcs .vcs-estatus { left: 0; width: auto; max-width: 320px; height: auto; padding: 18px 16px; }
  .vcs .vcs-atencion { padding: 14px; }
}

/* Debajo de 992px la fila se apila y los toques miden 44px. */
@media (max-width: 991px) {
  /* Estirar al 100 %×100 % sólo tiene sentido en la franja de 240px medida; en una
     columna alta deforma los iconos. Aquí se cubre sin deformar. */
  .vcs .vcs-banner { height: auto; min-height: 180px; padding-bottom: 18px; background-size: cover; background-position: center; }
  .vcs .vcs-banner .vcs-contenedor { padding-left: 0; }
  .vcs .vcs-sobre  { padding-top: 22px; font-size: 16px; }
  .vcs .vcs-titulo { margin-top: 6px; font-size: 22px; }
  /* 🪤 Con flex, la ruta partía dejando «/ Documentos…» con la barra al inicio del
     renglón. En línea y con la barra DETRÁS de cada tramo, el corte cae limpio. */
  .vcs .vcs-migas  { display: block; margin-top: 16px; font-size: 13px; }
  .vcs .vcs-migas li { display: inline; }
  .vcs .vcs-migas li + li::before { content: none; }
  .vcs .vcs-migas li:not(:last-child)::after { content: "/"; color: #ccc; padding: 0 6px; font-size: .85em; }
  .vcs .vcs-caja   { padding: 16px; }
  .vcs .vcs-fila   { flex-wrap: wrap; gap: 10px; }
  .vcs .vcs-campo  { flex: 1 1 100%; width: 100%; height: 44px; font-size: 16px; }
  .vcs .vcs-buscar, .vcs .vcs-restablecer { flex: 1 1 140px; width: auto; margin-left: 0; height: 44px; top: 0; }
}