/* ====== Estilos SOLO para el <main> pegado (Estatus de Caso + Tarjetas) ====== */
/* Scope estricto para no afectar otras zonas del sitio */
.caseStatus-container{
  max-width:1080px;margin:0 auto;padding-inline:1rem
}
.caseStatus-container h1{
  font-size:clamp(1.4rem,1.1rem + 1.2vw,2rem);line-height:1.2;margin:1rem 0 1.25rem
}

/* Panel principal */
.caseStatus-container .caseStatusSection,
.caseStatus-container .conditionalLanding{
  border:1px solid #dfe1e6;background:#fff;border-radius:6px
}
.caseStatus-container .caseStatusSection{
  padding:clamp(1rem,.6rem + 1vw,1.5rem);box-shadow:0 1px 2px rgba(0,0,0,.04)
}
.caseStatus-container #landing-page-header{
  font-size:clamp(1.1rem,.9rem + .8vw,1.5rem);margin:0 0 .5rem
}
.caseStatus-container .guidanceTextSection{
  color:#4b5563;font-size:.95rem;line-height:1.5
}

/* Layout interno */
.caseStatus-container .align-parent0{display:grid;grid-template-columns:1fr;gap:1rem;margin-top:1rem}

/* Campo de recibo */
.caseStatus-container .receipt-group{display:grid;gap:.5rem}
.caseStatus-container #receipt_input_field_label label{font-weight:600}
.caseStatus-container .receiptNumberInputField input{
  width:100%;max-width:360px;height:40px;border:1px solid #c7ccd1;border-radius:4px;
  padding:0 .75rem;font-size:1rem;transition:border-color .15s,box-shadow .15s
}
.caseStatus-container .receiptNumberInputField input:focus{
  outline:0;border-color:#1b6aa3;box-shadow:0 0 0 3px rgba(27,106,163,.15)
}

/* Estado inválido (si algún script o atributo lo marca) */
.caseStatus-container .receiptNumberInputField input[aria-invalid="true"]{
  border-color:#d92c20;box-shadow:0 0 0 3px rgba(217,44,32,.12)
}

/* Mensajes de error (tu HTML ya trae .errorMessage) */
.caseStatus-container .errorMessage{
  color:#b42318;background:#fef3f2;border:1px solid #f3d4d1;border-left:4px solid #d92c20;
  padding:.5rem .75rem;border-radius:4px;max-width:560px;margin:.25rem 0
}

/* Botón Verifique Estatus */
.caseStatus-container .usa-button[name="initCaseSearch"]{
  min-width:180px;height:44px;font-weight:600;border-radius:4px
}
.caseStatus-container .usa-button[disabled]{opacity:.6;cursor:not-allowed}

/* Enlaces debajo del botón */
.caseStatus-container p a{text-decoration:underline}

/* Línea roja decorativa (ocúltala si existe) */
.caseStatus-container .error_red_vertical_line{display:none}

/* ====== Tarjetas “Herramientas Relacionadas” ====== */
#relatedToolsDiv .related-tools-title{margin:1.5rem 0 .75rem}
#relatedToolsDiv .related-tools-title h2.related-tools{
  font-size:clamp(1.1rem,1rem + .6vw,1.4rem)
}

/* Grid responsivo para las tarjetas inferiores */
#relatedToolsDiv .align-lower-tiles{
  display:grid;grid-template-columns:repeat(12,1fr);gap:1rem
}

/* Tarjeta grande superior (Cambio de Dirección) */
#relatedToolsDiv .coaTile{list-style:none;margin:0 0 1rem}

/* Estética unificada de tarjetas */
#relatedToolsDiv .usa-card__container{
  border:1px solid #e5e7eb;border-radius:8px;overflow:hidden;background:#fff;
  height:100%;display:flex;flex-direction:column;transition:box-shadow .15s,transform .15s
}
#relatedToolsDiv .usa-card__container:hover{
  transform:translateY(-1px);box-shadow:0 6px 18px rgba(0,0,0,.06)
}
#relatedToolsDiv .usa-card__media img{display:block;width:100%;height:auto}
#relatedToolsDiv .usa-card__header h3{font-size:1.05rem;margin:.75rem 1rem 0}
#relatedToolsDiv .usa-card__body{padding:.5rem 1rem 1rem;color:#4b5563;font-size:.975rem;line-height:1.45}
#relatedToolsDiv .usa-card__footer{margin-top:auto;padding:0 1rem 1rem}
#relatedToolsDiv .usa-card__footer .usa-button{width:100%;height:40px;border-radius:6px;font-weight:600}

/* ====== Responsivo ====== */
@media (min-width:768px){
  /* Tres columnas para las tres tarjetas inferiores */
  #relatedToolsDiv .sroCard,
  #relatedToolsDiv .ptCard,
  #relatedToolsDiv .olCard{grid-column:span 4}
}
@media (max-width:767.98px){
  /* Tarjetas apiladas en móviles */
  #relatedToolsDiv .align-lower-tiles > div{grid-column:1 / -1}
  #relatedToolsDiv .usa-card__header h3{font-size:1rem}
  .caseStatus-container .receiptNumberInputField input{max-width:100%}
}
/* case-status.css — estilos mínimos y aislados para la sección "Estatus de Caso"
   Enfoque: formulario, mensajes de error y tarjetas relacionadas.
   Fuente: pila del sistema. Nada de @font-face ni rutas /_next.
*/

#main-content {
  --cs-font-sans: Arial, "Helvetica Neue", Helvetica, sans-serif;
  --cs-font-serif: Georgia, "Times New Roman", Times, serif;
  --cs-text: #1b1b1b;
  --cs-muted: #71767a;
  --cs-border: #565c65;
  --cs-border-light: #dfe1e2;
  --cs-bg: #fff;
  --cs-bg-alt: #f0f0f0;
  --cs-primary: #005ea2;
  --cs-primary-hover: #1a4480;
  --cs-primary-active: #162e51;
  --cs-focus: #2491ff;
  --cs-danger: #b50909;
  --cs-info: #e1f3f8;
  --cs-radius: 4px;
}

/* Tipografía y contenedores */
#main-content .grid-container.caseStatus-container {
  font-family: var(--cs-font-sans);
  font-weight: 400; /* texto base más grueso que el default de system-ui */
  color: var(--cs-text);
  padding-inline: 1rem;
  max-width: 72rem;
  margin-inline: auto;
}

#main-content h1,
#main-content h2,
#main-content h3 {
  font-family: var(--cs-font-sans); /* usamos la misma sans-serif para uniformidad */
  line-height: 1.2;
  margin: 0 0 .5rem 0;
  color: var(--cs-text);
  font-weight: 600; /* títulos bien marcados */
}


#main-content h1 { font-size: clamp(1.6rem, 2.4vw + 1rem, 2.25rem); }
#main-content h2 { font-size: clamp(1.25rem, 1.2vw + .9rem, 1.6rem); }
#main-content h3 { font-size: 1.125rem; }

/* ====== Intro y texto de guía ====== */
#main-content .conditional-landing {
  margin-top: .5rem;
}

#main-content .guidanceTextSection {
  font-style: normal;
  color: var(--cs-muted);
  background: var(--cs-bg-alt);
  border: 1px solid var(--cs-border-light);
  padding: .75rem 1rem;
  border-radius: var(--cs-radius);
  line-height: 1.45;
}
#main-content .guidanceTextSection b { color: var(--cs-text); }

/* ====== Formulario: label + input + error ====== */
#main-content .receipt-group label {
  display: inline-block;
  font-weight: 600;
}

#main-content .receiptNumberInputField {
  max-width: 30rem;
}

#main-content .usa-input.inputReceiptNumber,
#main-content input.inputReceiptNumber {
  width: 100%;
  height: 2.75rem;
  padding: .5rem .75rem;
  border: 1px solid var(--cs-border);
  border-radius: var(--cs-radius);
  background: var(--cs-bg);
  color: var(--cs-text);
  font-family: var(--cs-font-sans);
  font-size: 1rem;
  letter-spacing: .02em;
}

/* placeholder claro */
#main-content .inputReceiptNumber::placeholder { color: #9aa0a6; }

/* estados */
#main-content .inputReceiptNumber:focus {
  outline: 3px solid var(--cs-focus);
  outline-offset: 0;
  border-color: var(--cs-focus);
}

/* Mensaje de error accesible */
#main-content .errorMessage {
  margin-top: .25rem;
  padding: .5rem .75rem;
  border-left: 4px solid var(--cs-danger);
  background: #fdeaea;
  color: var(--cs-danger);
  font-weight: 600;
  border-radius: var(--cs-radius);
}

#main-content .error_red_vertical_line { display: none; } /* ocultamos decorativo extra */

/* ====== Botón principal ====== */
#main-content .usa-button,
#main-content button.usa-button {
  display: inline-block;
  font-family: var(--cs-font-sans);
  font-weight: 700;
  line-height: 1;
  padding: .875rem 1.25rem;
  border-radius: var(--cs-radius);
  border: 1px solid var(--cs-primary);
  background: var(--cs-primary);
  color: #fff;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, transform .02s ease-in;
  text-align: center;
  min-width: 12rem;
}

#main-content .usa-button:hover { background: var(--cs-primary-hover); border-color: var(--cs-primary-hover); }
#main-content .usa-button:active { background: var(--cs-primary-active); border-color: var(--cs-primary-active); transform: translateY(1px); }
#main-content .usa-button:focus { outline: 3px solid var(--cs-focus); outline-offset: 0; }

#main-content .usa-button[disabled],
#main-content button[disabled] {
  background: var(--cs-border-light);
  border-color: var(--cs-border-light);
  color: #8b8b8b;
  cursor: not-allowed;
}

/* ====== Enlaces debajo del botón ====== */
#main-content p a {
  color: var(--cs-primary);
  text-decoration: underline;
}
#main-content p a:hover { color: var(--cs-primary-hover); }

/* ====== Divider ====== */
#main-content .horizontalLineUnderDHS {
  border: none;
  border-top: 1px solid var(--cs-border-light);
  margin: 1.5rem 0;
}

/* ====== Tarjetas relacionadas ====== */
#main-content .related-tools-section {
  margin-top: .5rem;
}

#main-content .related-tools-title .related-tools {
  font-size: 1.25rem;
  margin-bottom: .75rem;
}

#main-content .align-lower-tiles,
#main-content .container .align-lower-tiles {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

/* En desktop, grid de 3 */
@media (min-width: 48rem) {
  #main-content .align-lower-tiles { grid-template-columns: repeat(3, 1fr); }
}

/* Tarjeta base */
#main-content .usa-card,
#main-content .coaCard,
#main-content .sroCard,
#main-content .ptCard,
#main-content .olCard {
  list-style: none;
}

#main-content .usa-card__container {
  display: flex;
  flex-direction: column;
  height: 100%;
  border: 1px solid var(--cs-border-light);
  border-radius: var(--cs-radius);
  overflow: hidden;
  background: var(--cs-bg);
}

#main-content .usa-card__media .usa-card__img img,
#main-content .usa-card__img img {
  display: block;
  width: 100%;
  height: auto;
}

#main-content .usa-card__header {
  padding: .75rem 1rem 0;
}

#main-content .usa-card__header h3 {
  font-size: 1.05rem;
  margin: 0 0 .25rem 0;
}

#main-content .usa-card__body {
  padding: .5rem 1rem 1rem;
  color: var(--cs-text);
}

#main-content .usa-card__footer {
  margin-top: auto;
  padding: .75rem 1rem 1rem;
}

/* Botón dentro de tarjeta (hereda .usa-button) */
#main-content .usa-card__footer .usa-button {
  width: 100%;
}

/* ====== Utilidades pequeñas ====== */
#main-content .privacyNotice label,
#main-content .paperworkReductionAct label {
  display: inline-block;
  color: var(--cs-primary);
  cursor: pointer;
  text-decoration: underline;
  margin-right: 1rem;
  font-family: var(--cs-font-sans);
}

/* Asegurar imágenes responsivas dentro del main */
#main-content img { max-width: 100%; height: auto; }

/* ====== Accesibilidad: foco global sólo dentro del main ====== */
#main-content :focus-visible {
  outline: 3px solid var(--cs-focus);
  outline-offset: 0;
}