/* =====================================================================
   El Estatus de Caso en Línea — Réplica visual
   Basado en USWDS (U.S. Web Design System) igual que la página original.
   Tokens de color extraídos del CSS original:
     primary #005ea2 · primary-dark #1a4480 · primary-darker #162e51
     ink #1b1b1b · base #71767a · gray-50 #757575 · gray-10 #e6e6e6
     info #00bde3 · error #b50909 · success #00a91c
   ===================================================================== */

:root {
  --uscis-blue:        #005ea2;
  --uscis-blue-light:  #73b3e7;
  --uscis-blue-lighter: #d9e8f6;
  --uscis-blue-dark:   #1a4480;
  --uscis-blue-darker: #162e51;

  --uscis-ink:      #1b1b1b;
  --uscis-ink-soft: #454545;
  --uscis-base:     #71767a;
  --uscis-base-dk:  #565c65;
  --uscis-gray:     #757575;
  --uscis-gray-lt:  #adadad;
  --uscis-gray-bg:  #f0f0f0;
  --uscis-gray-bg2: #ededed;

  --uscis-info:     #00bde3;
  --uscis-info-bg:  #e7f6f8;
  --uscis-error:    #b50909;
  --uscis-success:  #00a91c;
  --uscis-success-bg: #ecf3ec;
  --uscis-warn:     #ffbe2e;
  --uscis-warn-bg:  #faf3d1;

  --uscis-font: "Source Sans Pro Web", "Source Sans Pro", "Public Sans",
               -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica,
               Arial, sans-serif;
  --uscis-mono: "Geist Mono", ui-monospace, SFMono-Regular, "SF Mono",
                Menlo, Consolas, "Liberation Mono", monospace;

  --uscis-max: 64rem;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--uscis-font);
  font-size: 1.06rem;          /* 17px — USWDS body-md */
  line-height: 1.5;
  color: var(--uscis-ink);
  background-color: #ffffff;
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

h1, h2, h3, h4 {
  font-family: var(--uscis-font);
  color: var(--uscis-ink);
  margin: 0 0 .5rem;
  line-height: 1.2;
}
h1 { font-size: 2rem;   font-weight: 700; }   /* 32px — como el original */
h2 { font-size: 1.5rem; font-weight: 700; }   /* 24px — como el original */
h3 { font-size: 1.13rem; font-weight: 700; }
p  { margin: 0 0 1rem; }

a { color: var(--uscis-blue); }
a:hover { color: var(--uscis-blue-dark); }

img { max-width: 100%; height: auto; }

/* ---------------------------------------------------------------- */
/* Accesibilidad                                                     */
/* ---------------------------------------------------------------- */
.skipnav {
  position: absolute; left: -9999px; top: 0; z-index: 1000;
  background: #fff; color: var(--uscis-blue); padding: .75rem 1rem;
  font-weight: 700; text-decoration: underline;
}
.skipnav:focus { left: 0; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

:focus-visible { outline: .25rem solid #2491ff; outline-offset: 2px; }

/* ---------------------------------------------------------------- */
/* Grid containers                                                   */
/* ---------------------------------------------------------------- */
.grid-container {
  max-width: var(--uscis-max);
  margin-left: auto; margin-right: auto;
  padding-left: 1rem; padding-right: 1rem;
}
@media (min-width: 40em) {
  .grid-container { padding-left: 2rem; padding-right: 2rem; }
}

.grid-row { display: flex; flex-wrap: wrap; margin-left: -.5rem; margin-right: -.5rem; }
[class*="grid-col-"] { padding-left: .5rem; padding-right: .5rem; width: 100%; }

@media (min-width: 40em) {
  .tablet\:grid-col-6 { width: 50%; }
  .tablet\:grid-col-4 { width: 33.3333%; }
  .tablet\:grid-col-8 { width: 66.6667%; }
  .tablet\:grid-col-3 { width: 25%; }
}
@media (min-width: 64em) {
  .desktop\:grid-col-6 { width: 50%; }
  .desktop\:grid-col-4 { width: 33.3333%; }
  .desktop\:grid-col-8 { width: 66.6667%; }
  .desktop\:grid-col-9 { width: 75%; }
  .desktop\:grid-col-3 { width: 25%; }
}

.grid-col-auto { width: auto; flex: 0 0 auto; }
.grid-col-fill { flex: 1 1 0%; }

/* ---------------------------------------------------------------- */
/* USA Banner (banda superior oficial .gov)                          */
/* ---------------------------------------------------------------- */
.header-second-container { background-color: #f9f9f9; }
#header-second {
  max-width: var(--uscis-max);
  margin-left: auto; margin-right: auto;
  position: relative;
}

.usa-banner {
  background-color: var(--uscis-gray-bg);
  font-family: var(--uscis-font);
  font-size: .87rem;
  line-height: 1.5;
}
.usa-banner__inner {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: .25rem .5rem;
  padding: .5rem 0;
  max-width: var(--uscis-max);
  margin: 0 auto;
  padding-left: 1rem; padding-right: 1rem;
}
@media (min-width: 40em) {
  .usa-banner__inner { padding-left: 2rem; padding-right: 2rem; }
}

.usa-banner__header-flag { width: 23px; height: 13px; display: block; }

.usa-banner__header-text {
  font-size: .87rem; color: var(--uscis-ink);
  margin: 0; font-weight: 700;
}
.usa-banner__header-action {
  font-size: .87rem; color: var(--uscis-ink);
  margin: 0; padding-left: .35rem; position: relative;
}
.usa-banner__header-action::before {
  content: "›"; position: absolute; left: .1rem; top: 0;
}

.region-header_second_right {
  display: flex; align-items: center; gap: .75rem;
  margin-left: auto; padding-left: 1rem;
}
#alt-lang-link a, .util-link {
  font-size: .87rem; color: var(--uscis-blue); text-decoration: none;
  white-space: nowrap;
}
#alt-lang-link a:hover, .util-link:hover { text-decoration: underline; }
.util-link { display: inline-flex; align-items: center; gap: .25rem; }
.util-link .usa-icon { width: 1em; height: 1em; fill: currentColor; }

@media (max-width: 40em) {
  .region-header_second_right { display: none; }
}

/* ---------------------------------------------------------------- */
/* Navegación principal                                              */
/* ---------------------------------------------------------------- */
/* Barra de navegacion principal: fondo blanco, con la linea azul de USCIS abajo. */
.nav-primary {
  background-color: #fff;
  border-bottom: .5rem solid var(--uscis-blue);
}
.nav-primary__inner {
  max-width: var(--uscis-max); margin: 0 auto;
  display: flex; align-items: center; gap: 1rem;
  padding: .5rem 1rem;
}
@media (min-width: 40em) { .nav-primary__inner { padding-left: 2rem; padding-right: 2rem; } }

.nav-primary__logo { display: block; }
.nav-primary__logo img { height: 3rem; width: auto; display: block; }

.nav-primary__menu {
  list-style: none; display: flex; flex-wrap: wrap;
  margin: 0 0 0 auto; padding: 0;
}
.nav-primary__menu a {
  display: block; padding: .6rem .75rem;
  color: var(--uscis-blue-dark); font-size: 1rem; font-weight: 700; text-decoration: none;
  border-bottom: .25rem solid transparent;
}
.nav-primary__menu a:hover {
  background-color: var(--uscis-blue-lighter);
  color: var(--uscis-blue-darker);
}
/* Enlace activo: fondo azul claro con el texto en azul oscuro. */
.nav-primary__menu a.is-current {
  background-color: var(--uscis-blue-lighter);
  color: var(--uscis-blue-darker);
  border-bottom-color: var(--uscis-blue);
}

@media (max-width: 64em) {
  .nav-primary__inner { flex-direction: column; align-items: flex-start; }
  .nav-primary__menu { margin-left: 0; }
}

/* ---------------------------------------------------------------- */
/* Encabezado / breadcrumb                                           */
/* ---------------------------------------------------------------- */
.page-header {
  border-bottom: 1px solid var(--uscis-gray-bg);
  padding: 1.25rem 0 1rem;
}
.breadcrumb {
  font-size: .93rem; color: var(--uscis-base);
  margin: 0 0 .5rem; padding: 0; list-style: none;
  display: flex; flex-wrap: wrap; gap: .35rem;
}
.breadcrumb li + li::before { content: "/"; margin-right: .35rem; color: var(--uscis-base); }
.breadcrumb a { color: var(--uscis-blue); text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }

/* ---------------------------------------------------------------- */
/* Main                                                              */
/* ---------------------------------------------------------------- */
main {
  flex: 1 0 auto;
  padding: 1.5rem 0 2.5rem;
}

.case-status-container h1 { margin-bottom: 1rem; }

/* Caja principal de la consulta de estado.
   En la página original es un recuadro blanco con borde gris,
   dentro de una tarjeta general con borde azul arriba. */
.caseStatusSection {
  background-color: #fff;
  border: 1px solid var(--uscis-gray-bg);
  border-top: .5rem solid var(--uscis-blue);
  border-radius: .25rem;
  padding: 1.25rem 1.25rem 1.5rem;
  max-width: 42rem;
  box-shadow: 0 1px 2px rgba(27, 27, 27, .08);
}
@media (min-width: 40em) {
  .caseStatusSection { padding: 1.75rem 2rem 2rem; }
}

/* Cuando el resultado se muestra dentro de la caja principal,
   no se dibuja un segundo recuadro. */
.caseStatusSection .caseStatusSection {
  border: 0;
  border-top: 0;
  border-radius: 0;
  padding: 0;
  max-width: none;
  box-shadow: none;
}

/* Encabezado del estado: "Caso Actualizado Para Informar Que Se Tomaron Las Huellas Dactilares"
   En la pagina original lleva una barra vertical azul a la izquierda. */
.caseStatusTitle {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.2;                 /* igual que los titulos h2 */
  color: var(--uscis-ink);
  margin: 0 0 .85rem;
  padding: 0 0 0 .75rem;
  border-left: .35rem solid var(--uscis-blue);
}

/* Descripcion del estado: un solo parrafo corrido con la fecha en negrita. */
.caseStatusDesc {
  font-size: 1rem;
  line-height: 1.5;
  color: var(--uscis-ink);
  margin: 0 0 1.5rem;
  max-width: 44rem;
}
.caseStatusDesc a {
  color: var(--uscis-blue);
  text-decoration: underline;
  word-break: break-word;
}
.caseStatusDesc strong { font-weight: 700; }

.conditionalLanding { margin-bottom: 1.25rem; }
.conditionalLanding h2 { margin-bottom: .5rem; }
.conditionalLanding { font-size: 1rem; line-height: 1.5; }

/* Nota informativa azul del inicio (texto en cursiva). */
.guidanceTextSection {
  margin-top: .75rem;
  font-size: 1rem;
  color: var(--uscis-ink-soft);
  background-color: var(--uscis-info-bg);
  border-left: .5rem solid var(--uscis-info);
  padding: .85rem 1rem;
  border-radius: 0 .25rem .25rem 0;
}
.guidanceTextSection i { font-style: italic; }

/* "Pruebe otro número de recibo" con el icono de ayuda */
.tryAnotherReceipt {
  display: flex;
  align-items: center;
  gap: .4rem;
  font-size: 1rem;
  font-weight: 700;
  color: var(--uscis-ink);
  margin: 0 0 .5rem;
}
.tryAnotherReceipt__help {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.15rem; height: 1.15rem;
  border-radius: 50%;
  background-color: var(--uscis-blue);
  color: #fff;
  font-size: .7rem; font-weight: 700;
  cursor: help; border: 0; padding: 0;
}

/* Campo del número de recibo */
.receipt-group { margin-bottom: 1rem; }
.receipt-elem { margin-bottom: .35rem; }
.receipt-elem label {
  display: block;
  font-size: 1rem; font-weight: 700; color: var(--uscis-ink);
  margin-bottom: .35rem;
}
.receiptNumberInputField { max-width: 22rem; }
.receiptNumberInputField .usa-input {
  max-width: none;
  height: 2.75rem;
  font-size: 1rem;
}

/* Botón "Verifique Estatus" */
.caseStatusSection .usa-button { margin-top: .75rem; margin-bottom: 1rem; }

/* Bloque "¿Tiene una cuenta? Acceso" */
.accountLinks {
  margin: 0 0 .5rem;
  font-size: 1rem;
  line-height: 1.5;
}
.accountLinks p { margin: 0 0 .35rem; }
.accountLinks .usa-button--unstyled { font-size: 1rem; }

/* Form fields */
.usa-label {
  display: block;
  font-family: var(--uscis-font);
  font-size: 1.06rem; font-weight: 700; line-height: 1.3;
  margin-top: 1rem; margin-bottom: 0;
}
.usa-label--sm { font-size: .93rem; font-weight: 400; }

.usa-input, .usa-select, .usa-textarea {
  font-family: var(--uscis-font);
  font-size: 1.06rem; line-height: 1.3;
  color: var(--uscis-ink);
  background-color: #fff;
  border: 1px solid var(--uscis-base-dk);
  border-radius: .25rem;
  width: 100%; max-width: 30rem;
  height: 2.5rem;
  margin-top: .5rem;
  padding: .5rem;
  display: block;
}
.usa-textarea { height: auto; min-height: 7rem; padding: .75rem; max-width: 100%; line-height: 1.5; }
.usa-select {
  appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%2371767a' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .5rem center;
  background-size: 1.25rem; padding-right: 2.25rem;
}
.usa-input:focus, .usa-select:focus, .usa-textarea:focus {
  border-color: var(--uscis-blue); outline: .25rem solid #2491ff; outline-offset: 0;
}
.usa-input[aria-disabled="true"] {
  color: var(--uscis-ink-soft); background-color: #c9c9c9; cursor: not-allowed;
}
.usa-input--error { border: .25rem solid var(--uscis-error); padding: .25rem .5rem; }
.usa-input--success { border: .25rem solid var(--uscis-success); padding: .25rem .5rem; }
.usa-input--mono { font-family: var(--uscis-mono); letter-spacing: .04em; }

.usa-hint { display: block; font-size: .93rem; color: var(--uscis-base); margin-top: .35rem; }
.usa-error-message {
  display: block; color: var(--uscis-error); font-weight: 700;
  font-size: 1rem; margin-top: .35rem;
}
.usa-error-message[hidden] { display: none; }

/* Input group (botón junto al input) */
.usa-input-group { display: flex; align-items: stretch; position: relative; }
.usa-input-group .usa-input { border-radius: .25rem 0 0 .25rem; }
.usa-input-group .usa-button { border-radius: 0 .25rem .25rem 0; margin: .5rem 0 0; }

/* Buttons */
.usa-button {
  font-family: var(--uscis-font);
  color: #fff;
  -webkit-appearance: none; appearance: none;
  cursor: pointer; text-align: center;
  background-color: var(--uscis-blue);
  border: 0; border-radius: .25rem;
  padding: .75rem 1.25rem;
  font-size: 1.06rem; font-weight: 700; line-height: .9;
  text-decoration: none;
  display: inline-block;
  margin-top: 1rem;
  white-space: nowrap;
}
.usa-button:hover { background-color: var(--uscis-blue-dark); color: #fff; }
.usa-button:active { background-color: var(--uscis-blue-darker); }
.usa-button:focus-visible { outline: .25rem solid #2491ff; outline-offset: 0; }

.usa-button[disabled], .usa-button:disabled {
  background-color: #c9c9c9; color: #454545; cursor: not-allowed;
  -webkit-text-fill-color: #454545; opacity: 1;
}
.usa-button--outline {
  color: var(--uscis-blue); background-color: transparent;
  box-shadow: inset 0 0 0 2px var(--uscis-blue);
}
.usa-button--outline:hover { background-color: transparent; color: var(--uscis-blue-dark); box-shadow: inset 0 0 0 2px var(--uscis-blue-dark); }
.usa-button--secondary { background-color: var(--uscis-ink-soft); }
.usa-button--secondary:hover { background-color: var(--uscis-ink); }
.usa-button--danger { background-color: var(--uscis-error); }
.usa-button--danger:hover { background-color: #8b0a03; }
.usa-button--success { background-color: var(--uscis-success); }
.usa-button--success:hover { background-color: #008817; }
.usa-button--small {
  min-width: 3rem; padding: .35rem .75rem; font-size: .93rem; margin-top: .75rem;
}
.usa-button--unstyled {
  background: none; border: 0; color: var(--uscis-blue);
  text-decoration: underline; padding: 0; font-weight: 400;
  margin: 0; display: inline;
}
.usa-button--unstyled:hover { background: none; color: var(--uscis-blue-dark); }
.usa-button--block { display: block; width: 100%; }
.usa-button-row {
  display: flex; flex-wrap: wrap; gap: .75rem; align-items: center;
  margin-top: 1rem;
}
.usa-button-row .usa-button { margin-top: 0; }

/* Alerts */
.usa-alert {
  color: var(--uscis-ink);
  background-color: var(--uscis-gray-bg);
  border-left: .5rem solid var(--uscis-gray-lt);
  padding: 1rem 1.25rem;
  margin: 0 0 1.25rem;
}
.usa-alert p:last-child { margin-bottom: 0; }
.usa-alert h2, .usa-alert h3 { margin-top: 0; }
.usa-alert--info { background-color: var(--uscis-info-bg); border-left-color: var(--uscis-info); }
.usa-alert--success { background-color: var(--uscis-success-bg); border-left-color: var(--uscis-success); }
.usa-alert--warning { background-color: var(--uscis-warn-bg); border-left-color: var(--uscis-warn); }
.usa-alert--error { background-color: #f4e3db; border-left-color: var(--uscis-error); }

/* ---------------------------------------------------------------- */
/* Clases del backoffice original de USCIS                            */
/* ---------------------------------------------------------------- */
.breadCrumbLink {
  background: none; border: 0; padding: 0;
  font-family: inherit; font-size: 1.06rem; font-weight: 700;
  color: var(--uscis-blue); text-decoration: underline; cursor: pointer;
}
.breadCrumbLink:hover { color: var(--uscis-blue-dark); }
.iconNavigateNext { vertical-align: middle; margin: 0 .25rem; }
.breadCrumbNotLink {
  font-size: 1.06rem; font-weight: 700; color: var(--uscis-ink);
}

.caseStatusDesc {
  font-size: 1rem; line-height: 1.5; color: var(--uscis-ink);
  margin-bottom: 0;
}

/* Columnas del resultado (fecha a la izquierda, descripción a la derecha).
   El historial del caso ya no se muestra al cliente, asi que estas reglas
   quedan disponibles por si se vuelven a usar. */
.alignDivs {
  display: flex; flex-wrap: wrap; gap: 2rem;
  margin-top: 1.5rem;
}
.caseNextStepsSection { flex: 1 1 20rem; min-width: 0; }
.caseNextStepsSection h2 {
  font-size: 1.46rem; margin-bottom: 1rem;
  padding-bottom: .5rem;
  border-bottom: 2px solid var(--uscis-blue);
}

/* Próximos pasos */
#caseNextSteps {
  display: flex; align-items: flex-start; gap: .85rem;
  padding: .75rem 0;
}
.nextStepsDateAndIcon { flex: 0 0 30px; line-height: 0; }
.nextStepsDesc {
  margin: 0; font-size: 1rem; line-height: 1.6; color: var(--uscis-ink);
}

/* ---------------------------------------------------------------- */
/* Results / resumen del caso                                       */
/* ---------------------------------------------------------------- */
.result-block {
  border: 1px solid var(--uscis-gray-bg);
  border-radius: .25rem;
  margin-bottom: 1.5rem;
  overflow: hidden;
}
.result-block__header {
  background-color: var(--uscis-blue-lighter);
  border-bottom: 1px solid var(--uscis-gray-bg);
  padding: 1rem 1.25rem;
}
.result-block__header h2, .result-block__header h3 { margin: 0; }
.result-block__body { padding: 1.25rem; }

.summary-table { width: 100%; border-collapse: collapse; font-size: 1rem; }
.summary-table th, .summary-table td {
  text-align: left; padding: .7rem 1rem .7rem 0;
  border-bottom: 1px solid var(--uscis-gray-bg);
  vertical-align: top;
}
.summary-table th { width: 40%; font-weight: 700; color: var(--uscis-ink); }
.summary-table tr:last-child th, .summary-table tr:last-child td { border-bottom: 0; }
@media (max-width: 40em) {
  .summary-table th { width: 45%; }
}

.receipt-display {
  font-family: var(--uscis-mono);
  font-size: 1.31rem; font-weight: 700; letter-spacing: .06em;
  color: var(--uscis-blue-darker);
}

/* Línea de tiempo */
.timeline { list-style: none; margin: 0; padding: 0; }
.timeline__item {
  position: relative;
  padding: 0 0 1.25rem 1.75rem;
  border-left: 2px solid var(--uscis-gray-bg);
  margin-left: .5rem;
}
.timeline__item:last-child { border-left-color: transparent; padding-bottom: 0; }
.timeline__item::before {
  content: ""; position: absolute; left: -7px; top: .3rem;
  width: 12px; height: 12px; border-radius: 50%;
  background-color: var(--uscis-blue);
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px var(--uscis-blue);
}
.timeline__date {
  display: block; font-size: .93rem; color: var(--uscis-base);
  font-family: var(--uscis-mono);
}
.timeline__text { display: block; margin-top: .15rem; }

/* Etiquetas de estado */
.status-tag {
  display: inline-block;
  font-family: var(--uscis-mono);
  font-size: .89rem; font-weight: 700;
  padding: .2rem .6rem; border-radius: 99rem;
  background-color: var(--uscis-info-bg); color: #07648d;
  border: 1px solid var(--uscis-info);
}
.status-tag--success { background-color: var(--uscis-success-bg); color: #216e1f; border-color: var(--uscis-success); }
.status-tag--warning { background-color: var(--uscis-warn-bg);   color: #936f38; border-color: var(--uscis-warn); }
.status-tag--error   { background-color: #f4e3db;              color: #6f3331; border-color: var(--uscis-error); }
.status-tag--gray    { background-color: var(--uscis-gray-bg);  color: var(--uscis-ink-soft); border-color: var(--uscis-gray-lt); }

/* ---------------------------------------------------------------- */
/* Tarjetas "Herramientas Relacionadas"                              */
/* ---------------------------------------------------------------- */
.related-tools-section { margin-top: 2rem; }
.related-tools { font-size: 1.46rem; margin-bottom: 1rem; }

.usa-card {
  background-color: #fff;
  border: 1px solid var(--uscis-gray-bg);
  border-radius: .25rem;
  margin-bottom: 1.5rem;
  overflow: hidden;
  display: flex; flex-direction: column;
  height: 100%;
}
.usa-card__container { display: flex; flex-direction: column; height: 100%; }
.usa-card__media { background-color: var(--uscis-blue-lighter); }
.usa-card__img { height: 9rem; overflow: hidden; }
.usa-card__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.usa-card__header {
  padding: 1rem 1.25rem 0;
  border-bottom: 1px solid var(--uscis-gray-bg);
  padding-bottom: .75rem;
}
.usa-card__header h3 { margin: 0; font-size: 1.13rem; }
.usa-card__body { padding: 1rem 1.25rem; font-size: 1rem; flex: 1 0 auto; }
.usa-card__body p:last-child { margin-bottom: 0; }
.usa-card__footer { padding: 0 1.25rem 1.25rem; }
.usa-card__footer .usa-button { margin-top: 0; }

/* ---------------------------------------------------------------- */
/* Panel de administración                                           */
/* ---------------------------------------------------------------- */
.admin-shell { background-color: var(--uscis-gray-bg); }
.admin-topbar {
  background-color: var(--uscis-blue-darker);
  color: #fff;
  padding: .6rem 0;
  font-size: .93rem;
}
.admin-topbar__inner {
  max-width: var(--uscis-max); margin: 0 auto;
  padding: 0 1rem;
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
}
@media (min-width: 40em) { .admin-topbar__inner { padding: 0 2rem; } }
.admin-topbar__inner a { color: #fff; }
.admin-topbar__badge {
  font-family: var(--uscis-mono); font-size: .77rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em;
  background-color: rgba(255,255,255,.16); padding: .2rem .55rem; border-radius: 99rem;
}
.admin-topbar__spacer { margin-left: auto; }

/* Botones de la barra superior del panel */
.admin-topbar__btn {
  display: inline-block;
  padding: .3rem .85rem;
  border: 1px solid rgba(255, 255, 255, .5);
  border-radius: .25rem;
  color: #fff !important;
  font-size: .93rem; font-weight: 700;
  text-decoration: none !important;
  background-color: transparent;
  transition: background-color .15s ease;
}
.admin-topbar__btn:hover {
  background-color: rgba(255, 255, 255, .18);
  color: #fff !important;
  text-decoration: none !important;
}
.admin-topbar__btn:focus-visible {
  outline: .25rem solid #2491ff; outline-offset: 1px;
}
.admin-topbar__btn--salir {
  border-color: #ffbe2e;
  color: #ffbe2e !important;
}
.admin-topbar__btn--salir:hover { background-color: #ffbe2e; color: #162e51 !important; }

/* Botones de acción del pie del panel */
.admin-footer__acciones {
  margin-left: auto;
  display: flex; gap: .5rem; align-items: center;
}
.admin-footer__acciones .usa-button { margin-top: 0; }
.usa-footer__last-section .usa-button--outline {
  color: #fff;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .6);
}
.usa-footer__last-section .usa-button--outline:hover {
  background-color: rgba(255, 255, 255, .15);
  color: #fff;
  box-shadow: inset 0 0 0 2px #fff;
}

.admin-nav {
  background-color: var(--uscis-blue-dark);
  border-bottom: .35rem solid var(--uscis-blue);
}
.admin-nav__inner {
  max-width: var(--uscis-max); margin: 0 auto; padding: 0 1rem;
  display: flex; gap: .25rem; flex-wrap: wrap;
}
@media (min-width: 40em) { .admin-nav__inner { padding: 0 2rem; } }
.admin-nav a {
  display: block; padding: .7rem .9rem;
  color: #fff; font-weight: 700; text-decoration: none; font-size: 1rem;
}
.admin-nav a:hover { background-color: var(--uscis-blue-darker); }
.admin-nav a.is-current { background-color: var(--uscis-blue); }

.admin-main { padding: 1.75rem 0 3rem; }

.admin-h1 { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: .35rem; }
.admin-h1 .usa-button { margin-top: 0; }
.admin-h1__spacer { margin-left: auto; }

.page-description { color: var(--uscis-ink-soft); font-size: 1.13rem; margin-bottom: 1.5rem; }

/* Stat cards */
.stat-grid { display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: 1.75rem; }
.stat-card {
  flex: 1 1 12rem; background-color: #fff;
  border: 1px solid var(--uscis-gray-bg); border-left: .5rem solid var(--uscis-blue);
  border-radius: .25rem; padding: 1rem 1.25rem;
}
.stat-card__value { display: block; font-size: 2.13rem; font-weight: 700; line-height: 1.1; color: var(--uscis-blue-darker); }
.stat-card__label { display: block; font-size: .93rem; color: var(--uscis-base); margin-top: .2rem; }
.stat-card--info    { border-left-color: var(--uscis-info); }
.stat-card--success { border-left-color: var(--uscis-success); }
.stat-card--warning { border-left-color: var(--uscis-warn); }
.stat-card--gray    { border-left-color: var(--uscis-gray-lt); }

/* Tarjetas de estadísticas que funcionan como botón */
.stat-card--button {
  display: block;
  text-decoration: none;
  cursor: pointer;
  position: relative;
  transition: box-shadow .15s ease, transform .15s ease;
}
.stat-card--button:hover {
  box-shadow: 0 4px 12px rgba(27, 27, 27, .18);
  transform: translateY(-2px);
}
.stat-card--button:focus-visible {
  outline: .25rem solid #2491ff;
  outline-offset: 2px;
}
.stat-card--button:hover .stat-card__label { color: var(--uscis-ink); }

/* Etiqueta de acción que aparece al pasar el cursor */
.stat-card__action {
  display: block;
  margin-top: .5rem;
  font-size: .87rem;
  font-weight: 700;
  color: var(--uscis-blue);
  opacity: 0;
  transition: opacity .15s ease;
}
.stat-card--button:hover .stat-card__action,
.stat-card--button:focus-visible .stat-card__action { opacity: 1; }
.stat-card__action::after { content: " ›"; }

/* En pantallas táctiles no hay cursor: mostrar siempre la acción */
@media (hover: none) {
  .stat-card__action { opacity: 1; }
}

/* Tables */
.table-wrap {
  background-color: #fff; border: 1px solid var(--uscis-gray-bg);
  border-radius: .25rem; overflow-x: auto;
}
.usa-table { width: 100%; border-collapse: collapse; font-size: 1rem; }
.usa-table caption {
  text-align: left; font-weight: 700; font-size: 1.13rem;
  padding: 1rem 1.25rem 0; color: var(--uscis-ink);
}
.usa-table th, .usa-table td {
  text-align: left; padding: .8rem 1.25rem;
  border-bottom: 1px solid var(--uscis-gray-bg); vertical-align: middle;
}
.usa-table thead th {
  background-color: var(--uscis-gray-bg);
  font-size: .93rem; text-transform: uppercase; letter-spacing: .04em;
  color: var(--uscis-ink-soft); white-space: nowrap;
}
.usa-table tbody tr:last-child td { border-bottom: 0; }
.usa-table tbody tr:hover { background-color: #fbfcfd; }
.usa-table .mono { font-family: var(--uscis-mono); white-space: nowrap; }
.usa-table__actions { white-space: nowrap; text-align: right; }
.usa-table__actions .usa-button { margin-top: 0; }

.empty-state { padding: 2.5rem 1.25rem; text-align: center; color: var(--uscis-base); }

/* Toolbar de filtros */
.toolbar {
  display: flex; flex-wrap: wrap; gap: .75rem; align-items: flex-end;
  background-color: #fff; border: 1px solid var(--uscis-gray-bg);
  border-radius: .25rem; padding: 1rem 1.25rem; margin-bottom: 1.25rem;
}
.toolbar__field { flex: 1 1 12rem; }
.toolbar__field .usa-input, .toolbar__field .usa-select { max-width: none; margin-top: .35rem; }
.toolbar .usa-button { margin-top: 0; }

/* Login */
.login-wrap {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background-color: var(--uscis-gray-bg); padding: 2rem 1rem;
}
.login-card {
  background-color: #fff; width: 100%; max-width: 26rem;
  border: 1px solid var(--uscis-gray-bg);
  border-top: .5rem solid var(--uscis-blue);
  border-radius: .25rem; padding: 1.75rem 2rem 2rem;
  box-shadow: 0 2px 8px rgba(27,27,27,.09);
}
.login-card__logo { height: 3rem; margin-bottom: 1.25rem; }

/* Notice bar (privacidad / paperwork) */
.noticeContainer {
  margin-top: 2rem; padding-top: 1rem;
  border-top: 1px solid var(--uscis-gray-bg);
  display: flex; flex-wrap: wrap; gap: 1rem;
}
.noticeContainer button { margin-top: 0; }
.privacyNotice .usa-button, .paperworkReductionAct .usa-button {
  font-size: .93rem; font-weight: 400; text-decoration: underline;
  color: var(--uscis-blue); background: none;
}
.privacyNotice .usa-button:hover, .paperworkReductionAct .usa-button:hover { background: none; }

/* ---------------------------------------------------------------- */
/* Footer                                                            */
/* ---------------------------------------------------------------- */
.usa-footer { flex-shrink: 0; margin-top: 2rem; font-size: .93rem; }
.usa-footer a { color: var(--uscis-blue); text-decoration: none; }
.usa-footer a:hover { text-decoration: underline; }

/* Boton "Arriba" */
.usa-footer__top {
  background-color: var(--uscis-gray-bg2);
  padding: .75rem 0;
  border-bottom: 1px solid #dfe1e2;
}
.usa-footer__back-to-top {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .93rem; font-weight: 700; color: var(--uscis-blue);
}
.usa-footer__back-to-top svg { fill: currentColor; }

/* Columnas de enlaces */
.usa-footer__primary-section { background-color: var(--uscis-gray-bg2); padding: 1.75rem 0; }
.usa-footer__nav-list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 1.5rem 2rem;
}
.usa-footer__primary-content { flex: 1 1 9rem; min-width: 8rem; }
.usa-footer__nav-heading {
  display: block;
  font-size: 1.06rem; font-weight: 700; margin: 0 0 .6rem;
  color: var(--uscis-blue-dark);
}
.usa-footer__nav-heading:hover { color: var(--uscis-blue); text-decoration: underline; }
.usa-footer__sublist { list-style: none; margin: 0; padding: 0; }
.usa-footer__sublist li { margin-bottom: .45rem; line-height: 1.4; }
.usa-footer__sublist a { color: var(--uscis-blue); }

.usa-footer__contact-links { margin-top: 1.5rem; }
.usa-footer__contact-heading { margin-top: .75rem; }

.usa-social-links { display: flex; flex-wrap: wrap; gap: .75rem; list-style: none; margin: 0; padding: 0; }
.usa-social-link__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.25rem; height: 2.25rem; border-radius: 50%;
  background-color: var(--uscis-ink-soft); color: #fff;
}
.usa-social-link:hover .usa-social-link__icon { background-color: var(--uscis-blue); }

/* Franja oscura final */
.usa-footer__last-section { background-color: var(--uscis-ink); color: #dfe1e2; padding: 1.5rem 0; }
.usa-identifier__container { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.usa-identifier__logo img { height: 3rem; width: auto; }
.usa-identifier__identity-domain { font-size: 1.31rem; font-weight: 700; color: #fff; }
.usa-identifier__identity-disclaimer { font-size: .93rem; color: #dfe1e2; }
.usa-identifier__required-links-list {
  list-style: none; display: flex; flex-wrap: wrap; gap: .5rem 1.25rem;
  margin: 1.25rem 0 0; padding: 0; font-size: .93rem;
}
.usa-footer__last-section a { color: #fff; text-decoration: underline; }

/* Pie reducido del panel de administracion */
.usa-footer--slim .usa-footer__last-section { padding: 1rem 0; }

/* ---------------------------------------------------------------- */
/* Modal                                                             */
/* ---------------------------------------------------------------- */
.modal {
  position: fixed; inset: 0; z-index: 900;
  background-color: rgba(27,27,27,.6);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 2rem 1rem; overflow-y: auto;
}
.modal[hidden] { display: none; }
.modal__dialog {
  background-color: #fff; width: 100%; max-width: 44rem;
  border-radius: .25rem; box-shadow: 0 8px 32px rgba(0,0,0,.3);
  border-top: .5rem solid var(--uscis-blue);
}
.modal__header {
  display: flex; align-items: center; gap: 1rem;
  padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--uscis-gray-bg);
}
.modal__header h2 { margin: 0; font-size: 1.46rem; }
.modal__close {
  margin-left: auto; background: none; border: 0; cursor: pointer;
  font-size: 1.6rem; line-height: 1; color: var(--uscis-base); padding: .25rem .5rem;
}
.modal__close:hover { color: var(--uscis-ink); }
.modal__body { padding: 1.5rem; }
.modal__footer {
  display: flex; gap: .75rem; flex-wrap: wrap; justify-content: flex-end;
  padding: 1.25rem 1.5rem; border-top: 1px solid var(--uscis-gray-bg);
  background-color: var(--uscis-gray-bg);
}
.modal__footer .usa-button { margin-top: 0; }

.field-row { display: flex; flex-wrap: wrap; gap: 1rem; }
.field-row > .field { flex: 1 1 12rem; }
.field-row > .field .usa-input, .field-row > .field .usa-select { max-width: none; }

fieldset.usa-fieldset { border: 0; margin: 0 0 1.25rem; padding: 0; }
fieldset.usa-fieldset legend {
  font-size: 1.06rem; font-weight: 700; padding: 0; margin-bottom: .35rem;
}

/* ---------------------------------------------------------------- */
/* Impresión                                                          */
/* ---------------------------------------------------------------- */
@media print {
  .usa-banner, .nav-primary, .admin-nav, .admin-topbar, .usa-footer,
  .usa-button, .toolbar, .modal { display: none !important; }
  body { background: #fff; font-size: 12pt; }
  .result-block { border: 1px solid #000; break-inside: avoid; }
}
/* =====================================================================
   Asistente de creación de casos (admin/nuevo-caso.php)
   ===================================================================== */

/* Indicador de pasos */
.wizard-steps {
  display: flex; flex-wrap: wrap; gap: .5rem;
  list-style: none; margin: 0 0 1.5rem; padding: 0;
  counter-reset: wizard;
}
.wizard-steps__item {
  display: flex; align-items: center; gap: .5rem;
  padding: .5rem 1rem .5rem .5rem;
  background-color: var(--uscis-gray-bg);
  border-radius: 2rem;
  font-size: 1rem; font-weight: 700; color: var(--uscis-base);
  transition: background-color .15s ease, color .15s ease;
}
.wizard-steps__num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.75rem; height: 1.75rem; border-radius: 50%;
  background-color: #fff; color: var(--uscis-base);
  font-size: .93rem; font-weight: 700; flex-shrink: 0;
}
.wizard-steps__item.is-current {
  background-color: var(--uscis-blue); color: #fff;
}
.wizard-steps__item.is-current .wizard-steps__num {
  background-color: #fff; color: var(--uscis-blue);
}
.wizard-steps__item.is-done {
  background-color: var(--uscis-success-bg); color: #216e1f;
}
.wizard-steps__item.is-done .wizard-steps__num {
  background-color: var(--uscis-success); color: #fff;
}

/* Separador entre pasos */
.wizard-steps__item + .wizard-steps__item::before {
  content: ""; display: none;
}

/* Paneles de cada paso */
.wizard-panel[hidden] { display: none; }

/* Bloque desplegable de datos opcionales */
.wizard-more {
  margin-top: 1.25rem;
  border: 1px solid var(--uscis-gray-bg);
  border-radius: .25rem;
  background-color: #fbfcfd;
}
.wizard-more__summary {
  cursor: pointer; padding: .75rem 1rem;
  font-weight: 700; color: var(--uscis-blue);
  list-style: none;
}
.wizard-more__summary::-webkit-details-marker { display: none; }
.wizard-more__summary::before {
  content: "▸"; display: inline-block; margin-right: .5rem;
  transition: transform .15s ease;
}
.wizard-more[open] > .wizard-more__summary::before { transform: rotate(90deg); }
.wizard-more__summary:hover { color: var(--uscis-blue-dark); }
.wizard-more__body {
  padding: 0 1rem 1rem;
  border-top: 1px solid var(--uscis-gray-bg);
  padding-top: .25rem;
}

/* Tarjetas de plantilla de estado */
.template-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: .85rem;
  margin-bottom: 1rem;
}
.template-card {
  position: relative;
  display: flex; flex-direction: column; gap: .25rem;
  padding: 1rem;
  background-color: #fff;
  border-style: solid;
  border-width: 2px;
  border-color: var(--uscis-gray-bg);
  border-radius: .25rem;
  cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.template-card:hover {
  border-color: var(--uscis-blue-light);
  box-shadow: 0 3px 10px rgba(27, 27, 27, .12);
  transform: translateY(-1px);
}
.template-card:focus-within {
  outline: .25rem solid #2491ff; outline-offset: 2px;
}
.template-card.is-selected {
  border-color: var(--uscis-blue);
  box-shadow: 0 0 0 1px var(--uscis-blue);
  background-color: var(--uscis-blue-lighter);
}
.template-card__icon { font-size: 1.6rem; line-height: 1; }
.template-card__title {
  font-weight: 700; font-size: 1.06rem; color: var(--uscis-ink);
}
.template-card__help {
  font-size: .93rem; color: var(--uscis-base); line-height: 1.4;
}
/* Marca de selección */
.template-card__check {
  position: absolute; top: .6rem; right: .75rem;
  width: 1.4rem; height: 1.4rem; border-radius: 50%;
  background-color: var(--uscis-blue); color: #fff;
  font-size: .8rem; font-weight: 700;
  display: none; align-items: center; justify-content: center;
}
.template-card.is-selected .template-card__check { display: flex; }

/* Resumen del caso creado */
.wizard-summary {
  display: flex; flex-wrap: wrap; gap: 1rem;
  padding: 1rem;
  background-color: var(--uscis-gray-bg);
  border-radius: .25rem;
  margin-bottom: 1.25rem;
}
.wizard-summary__item { display: flex; flex-direction: column; gap: .15rem; }
.wizard-summary__label {
  font-size: .87rem; text-transform: uppercase; letter-spacing: .04em;
  color: var(--uscis-base); font-weight: 700;
}
.wizard-summary__value { font-size: 1.13rem; font-weight: 700; color: var(--uscis-ink); }
.wizard-summary__value.mono { font-family: var(--uscis-mono); }

/* Vista previa del resultado del cliente */
.caseStatusSection--preview {
  max-width: none;
  background-color: #fff;
}

/* =====================================================================
   Resultado temporal (overlay sobre el cuadro informativo)
   El resultado del caso se muestra encima del recuadro original
   durante 20 segundos y luego vuelve el cuadro de siempre.
   ===================================================================== */

#resultado-temporal[hidden] { display: none; }

/* Mientras se muestra el resultado, el cuadro informativo original queda
   oculto para que no se vea el aviso junto al caso.
   El campo y el boton SI se mantienen visibles, para que el cliente pueda
   consultar otro numero sin esperar a que termine el resultado. */
.caseStatusSection.con-resultado-temporal > .conditionalLanding,
.caseStatusSection.con-resultado-temporal > .accountLinks {
  display: none;
}

/* La etiqueta "Ingrese el Número de Su Recibo" es redundante mientras se
   muestra el resultado: el propio resultado ya trae su campo de busqueda. */
.caseStatusSection.con-resultado-temporal .receipt-elem {
  display: none;
}

/* El fragmento del resultado no dibuja una caja propia: solo el contenido. */
.caseStatusSection .resultado-caso[data-temporal] > .caseStatusSection {
  border: 0;
  border-top: 0;
  border-radius: 0;
  padding: 0;
  max-width: none;
  box-shadow: none;
}