/*
 * Piel del kiosco (registro/check-in), v0.4.0: rediseño completo sobre la
 * paleta de marca "POWER Kids" (manual de marca de agosto 2026) — cálida y
 * clara en vez del tema oscuro turquesa de versiones anteriores. Los
 * colores de manilla por salón NO cambian (son identificadores ya
 * confirmados con el equipo de niños); lo que cambia es todo el resto:
 * fondo, superficies, botones y acentos. Se mantienen los mismos nombres
 * de clase que antes: solo cambia la piel, no el HTML/JS que ya arma cada
 * pantalla.
 */

:root {
  /* Paleta nueva primaria + secundaria, tomada del manual de marca. */
  --igc-mostaza: #D5AF62;
  --igc-salvia: #A6B295;
  --igc-durazno: #F1C19B;
  --igc-azulgris: #A2B0C0;
  --igc-canela: #BB8F69;
  --igc-arena: #DACCB3;
  --igc-ciruela: #593C55;
  --igc-crema: #E8E0D2;
  --igc-terracota: #99433A;
  --igc-gris: #8C918D;

  /* Colores de manilla por salón — actualizados en v0.8.0 (§14.17) con
     el diseño real de manillas que entregó Guillermo. Antes de v0.8.0
     estas variables se llamaban --igc-amarillo/--igc-azul/--igc-naranja/
     --igc-verde/--igc-coral (ver IGC_Activator::colores_anteriores_v1()
     para los valores viejos); se renombraron por salón para que el
     nombre de la variable no quede describiendo el color equivocado. */
  --igc-manilla-lactantes: #A1D12E;
  --igc-manilla-adoradores: #D3315E;
  --igc-manilla-semillas: #50C4B3;
  --igc-manilla-herederos: #C3183F;
  --igc-manilla-valientes: #7DC8B8;
  --igc-manilla-aguilas: #236093;

  /* Acento principal del sistema: antes turquesa, ahora terracota. */
  --igc-turquesa: var(--igc-terracota);
  --igc-turquesa-osc: #7a352d;

  --igc-fondo: #F7F1E4;
  --igc-superficie: #FFFFFF;
  --igc-superficie-2: #FBF6EC;
  --igc-superficie-3: #F0E6D2;
  --igc-borde: #E3D5BA;
  --igc-tinta: #3D2E28;
  --igc-tinta-suave: #7A6858;
  --igc-tinta-tenue: #A6987F;
  --igc-blanco: #ffffff;
  --igc-error: #B23A2E;
  --igc-radio: 20px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  background: var(--igc-fondo);
  color: var(--igc-tinta);
  font-family: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
}

body.igc-body {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 24px;
  background:
    radial-gradient(circle at 15% 10%, rgba(153,67,58,0.10), transparent 45%),
    radial-gradient(circle at 90% 85%, rgba(213,175,98,0.16), transparent 45%),
    var(--igc-fondo);
}

/* Con el modo demo activo se le suma un margen arriba, para que la cinta
   fija (position: fixed, ver más abajo) nunca quede encima de la tarjeta
   del kiosco en pantallas cortas. */
body.igc-body.igc-modo-demo { padding-top: 56px; }

.igc-device {
  width: 100%;
  max-width: 480px;
  min-height: 640px;
  background: var(--igc-superficie);
  border: 1px solid var(--igc-borde);
  border-radius: 28px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Modo demo (§14.14, pedido explícito de Guillermo): cinta de aviso FIJA
   arriba de todo mientras el modo demo está activo, para que sea imposible
   no notarlo antes de usar el kiosco con familias reales. `position: fixed`
   a propósito: el body del kiosco centra su contenido con flexbox
   (align-items/justify-content: center), así que sin fixed esta cinta
   quedaba tratada como un elemento más a centrar, y aparecía flotando
   junto a la tarjeta en vez de como una franja completa arriba de todo. */
.igc-cinta-demo {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: #C0392B;
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  text-align: center;
  padding: 6px 10px;
  letter-spacing: 0.02em;
}

.igc-topbar {
  background: linear-gradient(135deg, var(--igc-ciruela), var(--igc-terracota));
  color: #fff;
  padding: 14px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-weight: 800;
  letter-spacing: 0.02em;
}

/* §14.16 El "margin-left: auto" de .igc-cambiar-sede absorbe todo el
   espacio libre que "justify-content: space-between" repartiría, dejando
   0px entre el logo y la etiqueta de sede (se montaban uno sobre el otro).
   El "gap" garantiza una separación mínima entre los tres elementos sin
   importar cuánto espacio libre quede. */

.igc-topbar .igc-logo-img { height: 26px; display: block; }

.igc-topbar .igc-sede-tag {
  font-size: 13px;
  background: rgba(255,255,255,0.2);
  padding: 4px 10px;
  border-radius: 999px;
  font-weight: 700;
}

.igc-topbar .igc-cambiar-sede {
  font-size: 12px;
  color: #fff;
  opacity: 0.85;
  text-decoration: underline;
  font-weight: 600;
  letter-spacing: 0;
  margin-left: auto;
  padding-left: 14px;
}

.igc-topbar .igc-cambiar-sede:hover,
.igc-topbar .igc-cambiar-sede:focus {
  opacity: 1;
}

.igc-screen {
  flex: 1;
  padding: 28px 24px 24px;
  display: flex;
  flex-direction: column;
}

.igc-progress {
  display: flex;
  gap: 6px;
  margin-bottom: 20px;
}
.igc-progress i {
  flex: 1;
  height: 5px;
  border-radius: 3px;
  background: var(--igc-superficie-3);
  font-style: normal;
}
.igc-progress i.on { background: var(--igc-turquesa); box-shadow: 0 0 10px rgba(153,67,58,0.35); }

/* Botón "Atrás" del paso a paso: discreto, pero con área de toque
   cómoda para un dedo en tablet. */
.igc-volver {
  display: inline-block;
  background: none;
  border: 0;
  color: var(--igc-tinta-suave);
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  padding: 6px 0 14px;
  margin: -6px 0 0;
  cursor: pointer;
}
.igc-volver:hover, .igc-volver:focus { color: var(--igc-turquesa); }

h1.igc-h { font-size: 26px; margin: 0 0 6px; font-family: 'Fredoka', 'Nunito', sans-serif; color: var(--igc-tinta); }
h2.igc-h { font-size: 22px; margin: 0 0 6px; font-family: 'Fredoka', 'Nunito', sans-serif; color: var(--igc-tinta); }
.igc-sub { color: var(--igc-tinta-suave); margin: 0 0 22px; line-height: 1.5; }
.igc-foot-note { color: var(--igc-tinta-suave); font-size: 13px; line-height: 1.5; }

.igc-field { margin-bottom: 18px; }
.igc-field label { display: block; font-weight: 800; margin-bottom: 8px; font-size: 14px; color: var(--igc-tinta); }
.igc-field input, .igc-field select, .igc-field textarea {
  width: 100%;
  padding: 14px 16px;
  border-radius: 14px;
  border: 2px solid var(--igc-borde);
  font-size: 17px;
  font-family: inherit;
  background: var(--igc-superficie-2);
  color: var(--igc-tinta);
}
.igc-field input::placeholder, .igc-field textarea::placeholder { color: var(--igc-tinta-tenue); }
.igc-field input:focus, .igc-field select:focus, .igc-field textarea:focus {
  outline: none;
  border-color: var(--igc-turquesa);
  box-shadow: 0 0 0 3px rgba(153,67,58,0.18);
}
/* Selector de día/mes/año (§14.15, §14.16, pedido explícito): dentro de
   la fila flex, un tercio parejo para los tres no le alcanza al mes
   ("Septiembre" se salía del recuadro) porque por defecto un flex item
   no se encoge más chico que su contenido (min-width: auto).
   §14.16: la primera corrección (anchos fijos en px, día/año angostos a
   propósito) resolvió el mes pero dejó a "Día" y "Año" SIN espacio
   suficiente en pantallas angostas (celular) — un ancho fijo en px no
   se adapta al espacio real disponible. La solución robusta: min-width:
   0 en los tres (para que se puedan encoger) + flex-grow proporcional
   al ancho mínimo real que necesita el contenido de cada uno (medido:
   "Día"/"Año" ~65-70px, "Septiembre" ~125px con este padding), en vez
   de un ancho fijo — así los tres se reparten cualquier ancho de fila
   disponible en la misma proporción, sin que ninguno quede corto. */
.igc-sel-dia, .igc-sel-mes, .igc-sel-anio { min-width: 0; }
.igc-sel-dia { flex: 64 1 0%; }
.igc-sel-mes { flex: 124 1 0%; }
.igc-sel-anio { flex: 68 1 0%; }
/* Padding más angosto que el resto de los campos, especificidad
   (.igc-field select.igc-sel-*) a propósito para ganarle al shorthand
   `padding` de la regla general de arriba — así el contenido tiene más
   espacio real sin tocar el tamaño de letra. */
.igc-field select.igc-sel-dia, .igc-field select.igc-sel-mes, .igc-field select.igc-sel-anio {
  padding-left: 10px;
  padding-right: 4px;
}

.igc-field .igc-hint { color: var(--igc-tinta-suave); font-size: 13px; margin-top: 6px; }
.igc-field .igc-error { color: var(--igc-error); font-size: 13px; margin-top: 6px; font-weight: 700; display: none; }
.igc-field.igc-invalid input { border-color: var(--igc-error); }
.igc-field.igc-invalid .igc-error { display: block; }

.igc-btn {
  display: block;
  width: 100%;
  padding: 16px;
  border-radius: 16px;
  border: none;
  font-size: 17px;
  font-weight: 800;
  cursor: pointer;
  font-family: inherit;
  text-align: center;
  text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.igc-btn-primary { background: var(--igc-turquesa); color: #ffffff; margin-top: auto; box-shadow: 0 8px 24px rgba(153,67,58,0.22); }
.igc-btn-primary:disabled { opacity: 0.35; cursor: not-allowed; box-shadow: none; }
.igc-btn-primary:not(:disabled):active { background: var(--igc-turquesa-osc); transform: scale(0.98); }
.igc-btn-quiet { background: transparent; color: var(--igc-turquesa); margin-top: 12px; padding: 10px; }
.igc-btn-secondary { background: var(--igc-superficie-2); color: var(--igc-tinta); border: 2px solid var(--igc-borde); margin-top: 12px; }
.igc-btn-secondary:active { background: var(--igc-superficie-3); }

.igc-digits { display: flex; gap: 12px; justify-content: center; margin: 8px 0 24px; }
.igc-digit-box {
  width: 52px; height: 62px;
  border-radius: 14px;
  border: 2px solid var(--igc-borde);
  display: flex; align-items: center; justify-content: center;
  font-size: 26px; font-weight: 800;
  background: var(--igc-superficie-2);
  color: var(--igc-tinta);
}
.igc-digit-box.filled { border-color: var(--igc-turquesa); background: rgba(153,67,58,0.10); color: var(--igc-turquesa); }

.igc-keypad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 20px; }
.igc-key {
  padding: 18px 0;
  border-radius: 14px;
  border: 2px solid var(--igc-borde);
  background: var(--igc-superficie-2);
  color: var(--igc-tinta);
  font-size: 20px;
  font-weight: 800;
  cursor: pointer;
}
.igc-key:active { background: var(--igc-superficie-3); }
.igc-key.wide { font-size: 15px; }

.igc-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; }
.igc-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 18px;
  border-radius: 16px;
  border: 2px solid var(--igc-borde);
  background: var(--igc-superficie-2);
  color: var(--igc-tinta);
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  font-size: 16px;
  width: 100%;
}
.igc-row.selected { border-color: var(--igc-turquesa); background: rgba(153,67,58,0.08); }
.igc-row:disabled { opacity: 0.4; cursor: not-allowed; }
.igc-row .igc-primary-text { font-weight: 800; display: block; }
.igc-row .igc-meta { color: var(--igc-tinta-suave); font-size: 13px; display: block; margin-top: 3px; }
.igc-salon-chip { font-size: 12px; font-weight: 800; padding: 3px 10px; border-radius: 999px; margin-top: 6px; display: inline-block; color: #1a1a1a; }
.igc-radio-dot {
  width: 28px; height: 28px; border-radius: 50%;
  border: 2px solid var(--igc-borde);
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; color: #fff; flex-shrink: 0;
}

.igc-pill-row { display: flex; gap: 10px; margin-bottom: 20px; }
.igc-pill {
  flex: 1;
  padding: 16px;
  border-radius: 14px;
  border: 2px solid var(--igc-borde);
  background: var(--igc-superficie-2);
  color: var(--igc-tinta);
  font-weight: 800;
  cursor: pointer;
  font-family: inherit;
  font-size: 15px;
}
.igc-pill.selected { border-color: var(--igc-turquesa); background: rgba(153,67,58,0.10); color: var(--igc-turquesa); }

.igc-result-row { display: flex; align-items: center; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--igc-borde); }
.igc-result-row:last-child { border-bottom: none; }
.igc-manilla { width: 14px; height: 42px; border-radius: 8px; flex-shrink: 0; box-shadow: 0 0 12px currentColor; }
.igc-result-info .igc-nombre { font-weight: 800; font-size: 16px; color: var(--igc-tinta); }
.igc-result-info .igc-linea { color: var(--igc-tinta-suave); font-size: 13px; margin-top: 2px; }
.igc-result-info .igc-codigo { font-size: 22px; font-weight: 900; letter-spacing: 0.08em; margin-top: 4px; color: var(--igc-turquesa); }

.igc-warn { color: var(--igc-error); font-weight: 700; font-size: 14px; }

.igc-checkbox-row { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 20px; }
.igc-checkbox-row input { width: 22px; height: 22px; margin-top: 2px; accent-color: var(--igc-turquesa); }
.igc-checkbox-row label { font-size: 14px; line-height: 1.5; color: var(--igc-tinta-suave); }

.igc-sede-grid { display: flex; flex-direction: column; gap: 10px; }

/* Franja decorativa con los colores reales de las manillas — el detalle
   "de marca" que hacía falta, visible en la pantalla de bienvenida del
   check-in y en la de "listo" del registro. */
.igc-franja-manillas { display: flex; height: 6px; border-radius: 999px; overflow: hidden; margin-bottom: 24px; }
.igc-franja-manillas i { flex: 1; font-style: normal; }
.igc-franja-manillas i:nth-child(1) { background: var(--igc-manilla-lactantes); }
.igc-franja-manillas i:nth-child(2) { background: var(--igc-manilla-herederos); }
.igc-franja-manillas i:nth-child(3) { background: var(--igc-manilla-adoradores); }
.igc-franja-manillas i:nth-child(4) { background: var(--igc-manilla-semillas); }
.igc-franja-manillas i:nth-child(5) { background: var(--igc-manilla-valientes); }

@media (max-width: 420px) {
  .igc-device { min-height: 100vh; border-radius: 0; }
  body.igc-body { padding: 0; }
}