/* /public_html/assets/css/app.css — MA Ayacucho (Producción)
   Pantalla de ingreso (OTP) + Landing hero:
   - Héroe con fondo llamativo (gradiente + figura decorativa).
   - Formularios móviles accesibles (>=18px, hit >=44px).
   - Botones claros y bien alineados (CTA group).
   - Grid de padrinos moderno y accesible.
   - Sin inline, sin @import, compatible CSP y PWA.
   - Pulido 2025-11-03: centrado limpio y FIX de pseudo-elementos (punto blanco).
*/

/* =================== Variables de diseño =================== */
:root{
  /* contenedores */
  --container-max: 1100px;
  --narrow-max: 720px;
  --gap: 16px;

  /* UI */
  --radius: 12px;
  --radius-lg: 16px;
  --input-fs: 18px;            /* >=16px evita zoom iOS */
  --focus: #38bdf8;            /* cian accesible */
  --border: #334155;

  /* campos */
  --input-bg: #0b1220;
  --input-fg: #e5e7eb;

  /* héroe */
  --hero-min-h: clamp(420px, 56vh, 640px);
  --hero-g1: #0ea5e9;          /* sky-500 */
  --hero-g2: #22d3ee;          /* cyan-400 */
  --hero-g3: #0b4675;          /* sky profundo */

  /* tarjetas (padrinos) */
  --card-bg: rgba(2, 6, 23, 0.6);
  --card-bg-strong: rgba(2, 6, 23, 0.8);
  --card-stroke: rgba(148, 163, 184, 0.18);
  --chip-bg: rgba(14, 165, 233, 0.12);
  --chip-fg: #e0f2fe;          /* sky-100 */
}

/* =================== FIX de pseudo-elementos (punto blanco) =================== */
/* Neutraliza cualquier ::before fantasma en el título y el main. */
#titulo-ingreso::before,
main::before { content: none !important; display: none !important; }

/* =================== Cabecera =================== */
.site-header .container{
  max-width: var(--container-max);
  margin-inline: auto;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.brand{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}
.brand__logo{ border-radius: 10px; }
.brand__name{ font-weight: 700; letter-spacing:.2px; }

/* =================== Héroe (landing) =================== */
.hero{
  position: relative;
  min-height: var(--hero-min-h);
  display: grid;
  align-items: center;
  isolation: isolate;
  overflow: clip;
}
.hero--gradient{
  /* Fondo degradado llamativo, sin imágenes externas */
  background:
    radial-gradient(1200px 600px at 20% -10%, rgba(34,211,238,.25), transparent),
    radial-gradient(1200px 600px at 90% 10%, rgba(14,165,233,.25), transparent),
    linear-gradient(180deg, var(--hero-g1), var(--hero-g3));
}
.hero::before{
  /* Trama sutil (puntos) para textura */
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(circle at 1px 1px, rgba(255,255,255,.07) 1px, transparent 1px) 0 0/18px 18px;
  opacity:.35;
  pointer-events:none;
}
.hero__content{
  max-width: var(--container-max);
  margin-inline: auto;
  padding: 28px 16px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
}
.hero__text{
  max-width: 640px;
}
.hero__text .app-title{ margin: 0 0 6px; font-size: clamp(28px, 4.2vw, 44px); }
.hero__text .app-tagline{ margin: 0 0 14px; opacity:.95; font-size: clamp(16px, 2.2vw, 18px); }
.hero__meta{ font-size: 14px; opacity:.9; margin-top: 8px; }

/* Figura decorativa (blob) al costado derecho en desktop */
.hero__visual{
  width: min(44vw, 520px);
  height: min(44vw, 520px);
  place-self: center;
  border-radius: 58% 42% 60% 40% / 44% 60% 40% 56%;
  background:
    conic-gradient(from 180deg at 50% 50%,
      rgba(255,255,255,.25), rgba(255,255,255,.05), rgba(255,255,255,.25));
  filter: blur(10px) saturate(120%);
  mix-blend-mode: screen;
  transform: translate3d(0,0,0);
  animation: float-soft 12s ease-in-out infinite;
  will-change: transform;
}
@keyframes float-soft{
  0%,100%{ transform: translateY(0) rotate(0deg); }
  50%{ transform: translateY(-10px) rotate(3deg); }
}

/* Desktop: texto + visual en dos columnas */
@media (min-width: 960px){
  .hero__content{ grid-template-columns: 1.15fr .85fr; }
}

/* =================== CTA / Botones =================== */
.cta-group{
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 12px;
}
.cta-group .btn{ min-height: 44px; }
.cta-group .btn.btn--primary{ min-width: 12rem; }
.cta-group .btn.btn--outline{ min-width: 12rem; }

/* Móviles: CTA al 100% */
@media (max-width: 480px){
  .cta-group .btn{ width: 100%; }
}

/* =================== Layout principal (formularios) =================== */
main .container{
  max-width: var(--container-max);
  margin-inline: auto;
  padding: 16px;
  display: grid;
  grid-template-columns: 1fr;
  gap: calc(var(--gap) * 1.25);
  align-items: start;
  justify-items: center;
}

/* Desktop: dos columnas simétricas; nav ocupa ancho completo */
@media (min-width: 960px){
  main .container{ grid-template-columns: 1fr 1fr; }
  .nav-principal{ grid-column: 1 / -1; }
}

/* Tarjetas centradas y ordenadas */
.card{
  width: 100%;
  max-width: var(--narrow-max);
  margin-inline: auto;
  border-radius: var(--radius-lg);
}
.card h3{ margin-top: 0; font-size: 1.12rem; }

/* Sutil realce a la primera tarjeta (Solicitar código) */
.card:first-of-type{
  border-color: #bae6fd; /* sky-200 */
  box-shadow: 0 1px 10px rgba(14,165,233,.08);
}

/* =================== Formularios legibles =================== */
#form-solicitar .campo,
#form-ingresar .campo{
  width: 100%;
  max-width: 440px;
  margin-inline: auto;
}

/* Inputs y selects accesibles */
input[type="text"],
input[type="tel"],
select{
  width: 100%;
  font-size: var(--input-fs);
  line-height: 1.35;
  min-height: 44px;             /* área táctil */
  padding: 12px 14px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--input-bg);
  color: var(--input-fg);
  outline: none;
}
input::placeholder{ color:#94a3b8; } /* mejor contraste */

input:focus-visible,
select:focus-visible,
button:focus-visible{
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-color: var(--focus);
}

/* Código de 6 dígitos: grande, monoespaciado y centrado */
#form-ingresar input#codigo,
.input-code{
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 22px;
  letter-spacing: .25em;
  text-align: center;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* Espaciados de hints y estado */
#dev_code{ margin-top: .25rem; }
#estadoAuth{ margin-bottom: .75rem; }

/* Estado accesible (ok / error) */
#estadoAuth[data-variant="ok"]{
  background:#052e1a; color:#c7f9cc; border:1px solid #16a34a;
}
#estadoAuth[data-variant="error"]{
  background:#3b0a0a; color:#fecaca; border:1px solid #ef4444;
}
#estadoAuth{ padding:10px 12px; border-radius:10px; }

/* =================== Acciones / Botones =================== */
.acciones{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}
#btnObtenerCodigo,
#btnIngresar,
#btnRenovar,
#btnSalir{
  min-height: 44px;      /* área táctil */
  min-width: 10rem;
}

/* Hover coherente */
#btnObtenerCodigo:hover,
#btnIngresar:hover,
#btnRenovar:hover,
#btnSalir:hover{ filter: brightness(.96); }

/* Móviles: botones al 100% */
@media (max-width: 480px){
  #btnObtenerCodigo,
  #btnIngresar,
  #btnRenovar,
  #btnSalir{ width: 100%; }
}

/* =================== Navegación principal =================== */
.nav-principal{
  margin-top: 1rem;
  text-align: center;
}
.nav-principal ul{
  display: inline-flex;
  gap: 16px;
  padding: 0;
  margin: 0;
  list-style: none;
}

/* =================== Padrinos / Aliados =================== */
.section{ padding: 16px 0 28px; }
.padrinos-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 14px;
  align-items: stretch;
}
.padrino-card{
  position: relative;
  border-radius: var(--radius-lg);
  padding: 14px;
  background: linear-gradient(180deg, var(--card-bg), var(--card-bg-strong));
  border: 1px solid var(--card-stroke);
  backdrop-filter: blur(6px) saturate(120%);
  transform: translateZ(0);
  transition: transform .2s ease, border-color .2s ease;
}
.padrino-card.is-skeleton{
  background: linear-gradient(90deg, rgba(255,255,255,.06), rgba(255,255,255,.02), rgba(255,255,255,.06));
  height: 120px;
}
.padrino-card.is-skeleton .padrino-card__logo,
.padrino-card.is-skeleton .padrino-card__text{
  display: none;
}

.padrino-card:hover{ transform: translateY(-2px); border-color: rgba(186,230,253,.6); }

.padrino-card__logo{
  display: grid; place-items: center;
  width: 100%; height: 120px;
  border-radius: 12px;
  background: rgba(255,255,255,.03);
  margin-bottom: 10px;
}
.padrino-card__logo img{
  max-width: 100%; max-height: 96px; object-fit: contain;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,.25));
}
.padrino-card__title{ margin: 0 0 6px; font-size: 0.98rem; }
.padrino-card__link{
  display: block; color: inherit; text-decoration: none;
}
.chip{
  display: inline-block;
  border-radius: 999px;
  padding: 4px 10px;
  background: var(--chip-bg);
  color: var(--chip-fg);
  font-size: 12px;
}

/* Aparición suave al entrar en viewport (coincide con padrinos.js) */
.padrino-card{ opacity: 0; transform: translateY(4px); }
.padrino-card.is-visible{ opacity: 1; transform: translateY(0); transition: opacity .3s ease, transform .3s ease; }

/* =================== Footer =================== */
footer .container{
  display: flex;
  align-items: center;
  justify-content: center;
}

/* =================== Modo oscuro =================== */
@media (prefers-color-scheme: dark){
  .card:first-of-type{
    border-color: #0b4d74; /* cyan oscurecido */
    box-shadow: none;
  }
  #form-ingresar input#codigo,
  .input-code{
    background: #0b1220;
    color: #e2e8f0;
    border-color: #334155;
  }
}

/* =================== Movimiento reducido =================== */
@media (prefers-reduced-motion: reduce){
  *{ animation: none !important; transition: none !important; }
}