/**
 * Public JILC surfaces: wizard, receipt print and honeypot.
 * L1 controls (.btn-primary, .btn-secondary, .modal, .alert, .card) stay in output.css.
 */

.jilc-wizard,
.jilc-comprobante {
  position: relative;
}

.jilc-progress {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  list-style: none;
  margin: 0 0 1.25rem;
  padding: 0;
}

.jilc-progress li {
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  background: var(--color-surface, rgb(0 0 0 / 5%));
}

.jilc-progress [aria-current="step"] {
  font-weight: 700;
  outline: 2px solid var(--color-primary, #17395e);
}

/* P02 / CC-L2: `.btn-*` beats the L1 `[hidden]` rule; inside the wizard the
   attribute wins again (Enviar hidden before step 6, Siguiente on step 6). */
.jilc-wizard [hidden]:not([hidden="until-found"]) {
  display: none;
}

.jilc-fields {
  display: grid;
  gap: 0.25rem 1rem;
}

.jilc-field label {
  display: block;
  font-weight: 600;
  margin-bottom: 0.35rem;
}

.jilc-field input,
.jilc-field select,
.jilc-field textarea {
  width: 100%;
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--color-border, rgb(0 0 0 / 16%));
  border-radius: var(--border-radius, 12px);
  background: var(--color-background, #fff);
  color: var(--text-dark, inherit);
}

.jilc-help,
.jilc-error {
  margin: 0.35rem 0 0.75rem;
}

.jilc-error {
  color: var(--color-danger, #9b2335);
  min-height: 0;
}

.jilc-drop {
  border: 1px dashed var(--color-border, rgb(0 0 0 / 35%));
  border-radius: 12px;
  padding: 0.75rem;
  margin-bottom: 0.75rem;
}

.jilc-drop.is-over {
  outline: 2px solid var(--color-primary, #17395e);
}

.jilc-niveles {
  width: 100%;
  border-collapse: collapse;
  margin: 0.5rem 0 1rem;
}

.jilc-niveles th,
.jilc-niveles td {
  text-align: left;
  padding: 0.4rem 0.5rem;
  border-bottom: 1px solid var(--color-border, rgb(0 0 0 / 12%));
}

.jilc-actions,
.jilc-captcha-opciones {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1rem;
}

.jilc-resumen {
  display: grid;
  gap: 0.35rem 1rem;
  grid-template-columns: minmax(8rem, max-content) 1fr;
  margin: 0.5rem 0 1rem;
}

.jilc-resumen dt {
  font-weight: 600;
}

.jilc-resumen dd {
  margin: 0;
  overflow-wrap: anywhere;
}

@media (max-width: 640px) {
  .jilc-resumen {
    grid-template-columns: 1fr;
  }

  .jilc-resumen dd {
    margin-bottom: 0.5rem;
  }
}

.jilc-folio {
  font-size: 1.8rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  margin: 0.25rem 0 1rem;
}

.jilc-modal-copy {
  padding: 1rem 1.25rem 1.5rem;
}

.jilc-hp-host {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.jilc-hp {
  position: absolute;
  left: -10000px;
  top: 0;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

[data-theme="dark"] .jilc-wizard,
[data-theme="dark"] .jilc-comprobante {
  color: var(--text-on-dark, var(--text-light));
}

[data-theme="contrast"] .jilc-wizard,
[data-theme="contrast"] .jilc-comprobante {
  color: var(--text-on-contrast, var(--text-dark));
}

/* ─── Portada y bases (index_jilc, info_jilc): lectura para familias, primero en el teléfono ─── */
.jilc-portada .jilc-portada-accion {
  display: grid;
  gap: var(--spacing-3);
  margin-top: var(--spacing-5);
}

.jilc-portada .jilc-portada-estado {
  align-items: center;
  border-radius: 999px;
  display: inline-flex;
  font-size: var(--font-size-sm);
  font-weight: 700;
  gap: var(--spacing-2);
  justify-self: start;
  margin: 0;
  padding: var(--spacing-2) var(--spacing-4);
}

.jilc-portada .jilc-portada-estado--abierto {
  background: var(--badge-green-bg);
  color: var(--badge-green-text);
}

.jilc-portada .jilc-portada-estado--cerrado {
  background: var(--badge-yellow-bg);
  color: var(--badge-yellow-text);
}

.jilc-portada .jilc-portada-estado__punto {
  background: currentcolor;
  border-radius: 50%;
  height: 0.6rem;
  width: 0.6rem;
}

.jilc-portada .jilc-portada-proceso {
  align-items: center;
  display: grid;
  gap: var(--spacing-6);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
}

.jilc-portada .jilc-portada-foto {
  aspect-ratio: 4 / 3;
  border-radius: var(--border-radius-xl);
  box-shadow: var(--shadow-lg);
  object-fit: cover;
  width: 100%;
}

.jilc-portada .jilc-portada-subtitulo {
  color: var(--text-strong, var(--text-dark));
  font-size: var(--font-size-base);
  font-weight: 700;
  margin: var(--spacing-4) 0 var(--spacing-2);
}

.jilc-portada .jilc-portada-docs {
  display: grid;
  gap: var(--spacing-2);
  list-style: none;
  margin: 0;
  padding: 0;
}

.jilc-portada .jilc-portada-docs li {
  align-items: center;
  background: var(--color-surface-1);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  display: flex;
  font-size: var(--font-size-sm);
  font-weight: 600;
  gap: var(--spacing-3);
  padding: var(--spacing-3) var(--spacing-4);
}

.jilc-portada .jilc-portada-docs li::before {
  align-items: center;
  background: var(--badge-green-bg);
  border-radius: 50%;
  color: var(--badge-green-text);
  content: "✓";
  display: inline-flex;
  flex: 0 0 auto;
  font-weight: 800;
  height: 1.6rem;
  justify-content: center;
  width: 1.6rem;
}

/* Etapas y pasos numerados: el orden importa para quien postula por primera vez. */
.jilc-portada .jilc-portada-etapas,
.jilc-portada .jilc-portada-pasos {
  counter-reset: jilc-paso;
}

.jilc-portada .jilc-portada-etapas .card {
  counter-increment: jilc-paso;
  padding: var(--spacing-5);
  position: relative;
}

.jilc-portada .jilc-portada-etapas .card::before {
  align-items: center;
  background: var(--gradient-primary);
  border-radius: 50%;
  color: var(--color-white);
  content: counter(jilc-paso);
  display: inline-flex;
  font-weight: 800;
  height: 2.25rem;
  justify-content: center;
  margin-bottom: var(--spacing-3);
  width: 2.25rem;
}

.jilc-portada .jilc-portada-etapas h3,
.jilc-portada .jilc-portada-jardines h3 {
  font-size: var(--font-size-lg);
  font-weight: 700;
  margin: 0 0 var(--spacing-2);
}

.jilc-portada .jilc-portada-etapas p {
  color: var(--text-muted);
  margin: 0;
}

.jilc-portada .jilc-portada-pasos {
  display: grid;
  gap: var(--spacing-3);
  margin: 0 0 var(--spacing-4);
  padding: 0;
}

.jilc-portada .jilc-portada-pasos .list-item {
  align-items: center;
  background: var(--color-surface-0);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-lg);
  counter-increment: jilc-paso;
  display: flex;
  font-size: var(--font-size-base);
  gap: var(--spacing-4);
  padding: var(--spacing-3) var(--spacing-4);
}

.jilc-portada .jilc-portada-pasos .list-item::before {
  align-items: center;
  background: var(--gradient-primary);
  border-radius: 50%;
  color: var(--color-white);
  content: counter(jilc-paso);
  display: inline-flex;
  flex: 0 0 auto;
  font-weight: 800;
  height: 2.25rem;
  justify-content: center;
  width: 2.25rem;
}

.jilc-portada .jilc-portada-chip {
  background: var(--badge-blue-bg);
  border-radius: 999px;
  color: var(--badge-blue-text);
  display: inline-block;
  font-size: var(--font-size-xs);
  font-weight: 800;
  letter-spacing: 0.06em;
  margin: 0 0 var(--spacing-2);
  padding: 2px var(--spacing-3);
}

.jilc-portada .jilc-portada-aviso {
  background: var(--color-surface-1);
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-primary);
  border-radius: var(--border-radius);
  font-size: var(--font-size-base);
  margin: 0;
  padding: var(--spacing-4);
}

.jilc-portada .jilc-portada-calendario .list-item {
  border-bottom: 1px solid var(--color-border);
  padding: var(--spacing-3) 0;
}

/* Bases: cada sección es una tarjeta con su título y párrafos espaciados, no un bloque corrido. */
.jilc-portada .jilc-legal-card {
  display: grid;
  gap: var(--spacing-3);
  padding: var(--spacing-6);
}

/* L1 lifts every [class*="card"] on hover; a page of legal text must stay still while it is read. */
.jilc-portada .jilc-legal-card:hover {
  transform: none !important;
}

/* The title class avoids "card": L1 styles every [class*="card"] as a floating card. */
.jilc-portada .jilc-legal-titulo {
  border-bottom: 1px solid var(--color-border);
  color: var(--text-strong, var(--text-dark));
  font-size: var(--font-size-2xl);
  font-weight: 800;
  margin: 0 0 var(--spacing-2);
  padding-bottom: var(--spacing-3);
}

.jilc-portada .jilc-legal-card > p {
  border-left: 3px solid var(--color-border);
  line-height: 1.65;
  margin: 0;
  max-width: 72ch;
  padding-left: var(--spacing-4);
}

.jilc-portada .jilc-legal-card .list-clean {
  background: var(--color-surface-1);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-lg);
  display: grid;
  gap: var(--spacing-2);
  margin: 0;
  padding: var(--spacing-4);
}

/* ─── Wizard de postulación: un paso a la vez, legible en el teléfono ─── */
.jilc-portada .jilc-wizard {
  display: grid;
  gap: var(--spacing-4);
}

.jilc-portada .jilc-wizard-cabecera .section-title {
  margin: 0;
}

.jilc-portada .jilc-wizard-eyebrow,
.jilc-portada .jilc-step__paso {
  color: var(--color-primary);
  font-size: var(--font-size-xs);
  font-weight: 800;
  letter-spacing: 0.08em;
  margin: 0 0 var(--spacing-1);
  text-transform: uppercase;
}

.jilc-portada .jilc-wizard-avisos {
  background: var(--badge-blue-bg);
  border-left: 4px solid var(--badge-blue-text);
  border-radius: var(--border-radius);
  color: var(--badge-blue-text);
  display: grid;
  font-size: var(--font-size-sm);
  gap: var(--spacing-1);
  margin: 0;
  padding: var(--spacing-3) var(--spacing-4) var(--spacing-3) var(--spacing-6);
}

.jilc-portada .jilc-sr-solo {
  clip: rect(0 0 0 0);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

.jilc-portada .jilc-check {
  align-items: flex-start;
  cursor: pointer;
  display: flex;
  font-weight: 600;
  gap: var(--spacing-3);
  line-height: 1.4;
}

/* nft-override: layout: the checkbox sits beside its text; the generic field rule would stretch it to 100%. */
.jilc-portada .jilc-check input[type="checkbox"] {
  accent-color: var(--color-primary);
  flex: 0 0 auto;
  height: 1.25rem;
  margin: 0.1rem 0 0;
  padding: 0;
  width: 1.25rem;
}

.jilc-portada .jilc-guardado {
  background: var(--color-surface-1);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  display: grid;
  font-size: var(--font-size-sm);
  gap: var(--spacing-2);
  padding: var(--spacing-3) var(--spacing-4);
}

.jilc-portada .jilc-guardado__detalle summary,
.jilc-portada .jilc-niveles-detalle summary {
  color: var(--color-primary);
  cursor: pointer;
  font-weight: 600;
}

.jilc-portada .jilc-guardado__detalle .jilc-help {
  color: var(--text-muted);
  margin: var(--spacing-2) 0 0;
}

/* Barra de pasos: número en círculo; hechos en verde, el actual relleno. */
.jilc-portada .jilc-progress {
  counter-reset: none;
  gap: var(--spacing-2);
  margin: 0;
}

.jilc-portada .jilc-progress li {
  align-items: center;
  background: var(--color-surface-1);
  border: 1px solid var(--color-border);
  color: var(--text-muted);
  display: inline-flex;
  font-size: var(--font-size-sm);
  gap: var(--spacing-2);
  padding: var(--spacing-1) var(--spacing-3) var(--spacing-1) var(--spacing-1);
}

.jilc-portada .jilc-progress__num {
  align-items: center;
  background: var(--color-surface-2);
  border-radius: 50%;
  display: inline-flex;
  font-weight: 800;
  height: 1.75rem;
  justify-content: center;
  width: 1.75rem;
}

.jilc-portada .jilc-progress .is-hecho {
  border-color: var(--badge-green-text);
  color: var(--badge-green-text);
}

.jilc-portada .is-hecho .jilc-progress__num {
  background: var(--badge-green-bg);
}

.jilc-portada .jilc-progress [aria-current="step"] {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-white);
  outline: none;
}

.jilc-portada .jilc-progress [aria-current="step"] .jilc-progress__num {
  background: var(--color-white);
  color: var(--color-primary);
}

/* Cada paso es una tarjeta con su título; el foco del título no tapa la cabecera fija. */
.jilc-portada .jilc-step {
  background: var(--color-surface-0);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-xl);
  display: grid;
  gap: var(--spacing-3);
  padding: var(--spacing-6);
}

.jilc-portada .jilc-step h2 {
  color: var(--text-strong, var(--text-dark));
  font-size: var(--font-size-2xl);
  font-weight: 800;
  margin: 0;
  outline: none;
  scroll-margin-top: calc(var(--header-height) + var(--spacing-6));
}

.jilc-portada .jilc-step p {
  margin: 0;
}

.jilc-portada .jilc-step__intro {
  color: var(--text-muted);
  line-height: 1.6;
}

.jilc-portada .jilc-step__subtitulo {
  font-size: var(--font-size-base);
  font-weight: 700;
  margin: var(--spacing-2) 0 0;
}

.jilc-portada .jilc-wizard input,
.jilc-portada .jilc-wizard select {
  scroll-margin-top: calc(var(--header-height) + var(--spacing-8));
}

.jilc-portada .jilc-fields {
  gap: var(--spacing-1) var(--spacing-5);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.jilc-portada .jilc-field label {
  margin-bottom: var(--spacing-1);
}

.jilc-portada .jilc-wizard .jilc-help {
  color: var(--text-muted);
  font-size: var(--font-size-sm);
}

.jilc-portada .jilc-error {
  font-size: var(--font-size-sm);
  font-weight: 600;
}

.jilc-portada .jilc-error:empty {
  display: none;
}

.jilc-portada .jilc-declaracion {
  background: var(--color-surface-1);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  padding: var(--spacing-4);
}

.jilc-portada .jilc-advertencia {
  background: var(--badge-yellow-bg);
  border-radius: var(--border-radius);
  color: var(--badge-yellow-text);
  font-size: var(--font-size-sm);
  padding: var(--spacing-3) var(--spacing-4);
}

.jilc-portada .jilc-descarga {
  display: inline-flex;
}

/* Resultados calculados (edad, nivel y cupos): una tarjeta, no líneas sueltas. */
.jilc-portada .jilc-resultado-calculo {
  background: var(--badge-blue-bg);
  border-left: 4px solid var(--badge-blue-text);
  border-radius: var(--border-radius);
  color: var(--badge-blue-text);
  display: grid;
  gap: var(--spacing-1);
  padding: var(--spacing-3) var(--spacing-4);
}

.jilc-portada .jilc-resultado-calculo:empty {
  display: none;
}

.jilc-portada .jilc-resultado-calculo__titulo {
  font-weight: 800;
}

.jilc-portada .jilc-resultado-calculo__alerta {
  color: var(--color-danger);
  font-weight: 700;
}

.jilc-portada .jilc-niveles-detalle {
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  display: grid;
  font-size: var(--font-size-sm);
  gap: var(--spacing-2);
  padding: var(--spacing-3) var(--spacing-4);
}

/* Documentos: cuatro tarjetas con el botón de archivo con estilo propio. */
.jilc-portada .jilc-docs-grid {
  display: grid;
  gap: var(--spacing-3);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.jilc-portada .jilc-drop {
  background: var(--color-surface-1);
  border: 2px dashed var(--color-border);
  border-radius: var(--border-radius-lg);
  margin: 0;
  padding: var(--spacing-4);
}

.jilc-portada .jilc-drop input[type="file"] {
  background: var(--color-surface-0);
  font-size: var(--font-size-sm);
  padding: var(--spacing-2);
}

.jilc-portada .jilc-drop input[type="file"]::file-selector-button {
  background: var(--color-primary);
  border: 0;
  border-radius: 999px;
  color: var(--color-white);
  cursor: pointer;
  font-weight: 700;
  margin-right: var(--spacing-3);
  padding: var(--spacing-2) var(--spacing-4);
}

/* Verificación: resumen en tabla de dos columnas y desafío en su propio bloque. */
.jilc-portada .jilc-wizard .jilc-resumen {
  background: var(--color-surface-1);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-lg);
  gap: 0;
  margin: 0;
  overflow: hidden;
}

.jilc-portada .jilc-wizard .jilc-resumen dt,
.jilc-portada .jilc-wizard .jilc-resumen dd {
  border-bottom: 1px solid var(--color-border);
  padding: var(--spacing-2) var(--spacing-4);
}

.jilc-portada .jilc-wizard .jilc-resumen dt {
  color: var(--text-muted);
  font-size: var(--font-size-sm);
}

.jilc-portada .jilc-captcha {
  background: var(--color-surface-1);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-lg);
  display: grid;
  gap: var(--spacing-2);
  padding: var(--spacing-4);
}

.jilc-portada .jilc-captcha:empty {
  display: none;
}

.jilc-portada .jilc-captcha__pedido {
  font-size: var(--font-size-lg);
  font-weight: 700;
}

.jilc-portada .jilc-captcha__ok {
  color: var(--badge-green-text);
  font-weight: 800;
}

/* Acciones: Limpiar a la izquierda y aparte; Anterior y Siguiente/Enviar juntos a la derecha. */
.jilc-portada .jilc-actions {
  align-items: center;
  border-top: 1px solid var(--color-border);
  padding-top: var(--spacing-4);
}

.jilc-portada .jilc-actions__limpiar {
  margin-right: auto;
}

@media (max-width: 640px) {
  .jilc-portada .jilc-step {
    padding: var(--spacing-4);
  }

  .jilc-portada .jilc-fields,
  .jilc-portada .jilc-docs-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  /* On a phone only the current step keeps its name; the others shrink to their number. */
  .jilc-portada .jilc-progress li:not([aria-current="step"]) {
    padding: var(--spacing-1);
  }

  .jilc-portada .jilc-progress :not([aria-current="step"]) > .jilc-progress__txt {
    clip: rect(0 0 0 0);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
  }

  .jilc-portada .jilc-actions__limpiar {
    order: 3;
    width: 100%;
  }
}

@media (max-width: 860px) {
  .jilc-portada .jilc-portada-proceso {
    grid-template-columns: minmax(0, 1fr);
  }

  .jilc-portada .jilc-legal-card {
    padding: var(--spacing-4);
  }
}

@media print {
  .app-header,
  .app-footer,
  .jilc-no-print,
  button {
    display: none !important;
  }
}