/*
Páginas públicas del registro (prueba gratuita). Hoja aparte de
theme.css a propósito: esto lo ve gente que todavía no es cliente y no
tiene sesión, así que no comparte ni el layout de la aplicación ni sus
componentes; lo único que reutiliza son las variables de color del
tema, para que la marca sea la misma.
*/

.pagina-publica{
  min-height:100vh;
  display:flex;
  flex-direction:column;
  background:
    radial-gradient(900px 500px at 12% -10%, rgba(109,141,255,.16), transparent 60%),
    radial-gradient(700px 500px at 100% 0%, rgba(139,92,246,.13), transparent 55%),
    var(--bg);
  color:var(--text);
}

/* ---------- cabecera ---------- */

.publica-cabecera{
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem; flex-wrap:wrap;
  padding:1.1rem clamp(1rem, 5vw, 3rem);
}
.publica-marca{
  display:inline-flex; align-items:center; gap:.6rem;
  font-size:1.02rem; font-weight:600; color:var(--text); text-decoration:none;
}
.publica-marca strong{ font-weight:800; }
.publica-logo{
  width:32px; height:32px; border-radius:9px;
  display:inline-flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg, var(--primary), var(--primary-hover));
  color:#fff;
}
.publica-logo svg{ width:18px; height:18px; }
.publica-volver{ font-size:.85rem; color:var(--text-muted); text-decoration:none; }
.publica-volver:hover{ color:var(--text); }

/* ---------- cuerpo ---------- */

.publica-main{
  flex:1;
  width:100%;
  max-width:1080px;
  margin:0 auto;
  padding:1rem clamp(1rem, 5vw, 3rem) 3rem;
}

/* Dos columnas: el argumento de venta a la izquierda, el formulario a
   la derecha. En pantallas angostas el formulario va PRIMERO -quien
   llega por el botón ya está convencido; hacerlo bajar por un texto
   que ya leyó es perder la conversión-. */
.publica-columnas{
  display:grid;
  grid-template-columns:1fr;
  gap:1.6rem;
  align-items:start;
}
.publica-columnas > *{ min-width:0; }

@media (min-width: 900px){
  .publica-columnas{ grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); gap:2.6rem; }
  .publica-argumento{ order:0; position:sticky; top:1.5rem; }
}
.publica-argumento{ order:1; }

.publica-titulo{
  font-size:clamp(1.6rem, 3.4vw, 2.15rem);
  font-weight:800;
  line-height:1.18;
  margin:0 0 .7rem;
}
.publica-titulo em{
  font-style:normal;
  background:linear-gradient(120deg, var(--primary), #8b5cf6);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.publica-entrada{ font-size:1rem; color:var(--text-muted); margin:0 0 1.4rem; max-width:46ch; }

.publica-lista{ list-style:none; padding:0; margin:0; display:grid; gap:.85rem; }
.publica-lista li{ display:flex; gap:.7rem; align-items:flex-start; font-size:.92rem; }
.publica-lista .tilde{
  flex:0 0 auto; width:20px; height:20px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  background:rgba(52,211,153,.14); color:#34d399; font-size:.72rem; font-weight:700;
}
.publica-lista strong{ display:block; font-weight:600; }
.publica-lista span.detalle{ color:var(--text-muted); font-size:.85rem; }

/* ---------- tarjeta del formulario ---------- */

.publica-tarjeta{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:16px;
  box-shadow:0 24px 60px rgba(0,0,0,.35);
  padding:clamp(1.3rem, 3vw, 2rem);
}
.publica-tarjeta h2{ font-size:1.12rem; font-weight:700; margin:0 0 .25rem; }
.publica-tarjeta .subtitulo{ font-size:.86rem; color:var(--text-muted); margin:0 0 1.3rem; }

.campos{ display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); gap:.9rem 1rem; }
.campos > *{ min-width:0; }
.campo-ancho{ grid-column:1 / -1; }

.publica-etiqueta{
  display:block; font-size:.8rem; font-weight:600;
  color:var(--text); margin-bottom:.35rem;
}
.publica-ayuda{ font-size:.76rem; color:var(--text-muted); margin-top:.3rem; }

.publica-input{
  width:100%;
  background:var(--bg);
  border:1px solid var(--border);
  border-radius:10px;
  color:var(--text);
  padding:.62rem .8rem;
  font-size:.92rem;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.publica-input::placeholder{ color:var(--text-muted); opacity:.7; }
.publica-input:focus{
  outline:none;
  border-color:var(--primary);
  box-shadow:0 0 0 3px rgba(109,141,255,.18);
}

/* Módulos: casillas que se ven como tarjetas seleccionables, no como
   una lista de checkboxes sueltos. */
.modulos{ display:grid; grid-template-columns:repeat(auto-fit, minmax(190px, 1fr)); gap:.6rem; margin-top:.3rem; }
.modulo-opcion{
  display:flex; align-items:center; gap:.6rem;
  border:1px solid var(--border); border-radius:10px;
  padding:.65rem .8rem; cursor:pointer;
  font-size:.88rem;
  transition:border-color .15s ease, background .15s ease;
}
.modulo-opcion:hover{ border-color:var(--primary); }
.modulo-opcion input{ accent-color:var(--primary); width:16px; height:16px; }
.modulo-opcion:has(input:checked){ border-color:var(--primary); background:rgba(109,141,255,.1); }

.publica-boton{
  width:100%; margin-top:1.4rem;
  background:linear-gradient(120deg, var(--primary), #8b5cf6);
  color:#fff; font-weight:700; font-size:.95rem;
  border:0; border-radius:11px; padding:.8rem 1rem; cursor:pointer;
  transition:filter .15s ease, transform .15s ease;
}
.publica-boton:hover{ filter:brightness(1.07); transform:translateY(-1px); }

.publica-nota{ font-size:.78rem; color:var(--text-muted); margin:.9rem 0 0; text-align:center; }

.publica-error{
  background:rgba(239,68,68,.12);
  border:1px solid rgba(239,68,68,.35);
  color:#fca5a5;
  border-radius:10px; padding:.7rem .9rem; font-size:.87rem; margin-bottom:1rem;
}

/* ---------- páginas de resultado ---------- */

.publica-resultado{ max-width:560px; margin:2rem auto; text-align:center; }
.publica-icono{
  width:54px; height:54px; border-radius:50%; margin:0 auto 1rem;
  display:flex; align-items:center; justify-content:center;
  background:rgba(52,211,153,.14); color:#34d399;
}
.publica-icono svg{ width:26px; height:26px; }
.publica-icono.aviso{ background:rgba(251,191,36,.14); color:#fbbf24; }

.publica-datos{
  background:var(--bg); border:1px solid var(--border); border-radius:11px;
  padding:.9rem 1rem; margin:1.2rem 0; text-align:left; font-size:.88rem;
}
.publica-datos div{ display:flex; justify-content:space-between; gap:1rem; padding:.25rem 0; }
.publica-datos span:first-child{ color:var(--text-muted); }

/* ---------- pie ---------- */

.publica-pie{
  text-align:center; font-size:.78rem; color:var(--text-muted);
  padding:1.4rem 1rem 2rem;
}
.publica-pie a{ color:var(--text-muted); }
.publica-pie a:hover{ color:var(--text); }