/* =====================================================================
 * Folclorísima · registro (wizard 3 pasos)
 * Estilos del prototipo folclorisima-registro2. El header vive en
 * site-header.css (compartido). Documento standalone.
 * ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,600;0,700;1,400;1,700&family=Inter:wght@300;400;500;600&display=swap');

*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
:root {
	--celeste:#1A6FA8; --celeste-pale:#E8F4FD;
	--pergamino:#F5F0E8; --marron:#8B5E3C; --ocre:#C49A5A;
	--ocre-claro:#E8D5A3; --casi-negro:#1C1C1C; --gris:#777;
	--error:#C0392B; --ok:#2E7D4F;
}
html { scroll-behavior:smooth; }
body { font-family:'Inter',sans-serif; background:var(--pergamino); color:var(--casi-negro); min-height:100vh; }

.pagina { display:flex; justify-content:center; padding:2.5rem 1.5rem 4rem; }
.cont { width:100%; max-width:560px; }
.eyebrow { font-size:0.65rem; font-weight:600; letter-spacing:0.2em; text-transform:uppercase; color:var(--ocre); margin-bottom:0.6rem; }
h1 { font-family:'Lora',serif; font-weight:700; font-size:clamp(1.5rem,4vw,2.2rem); color:var(--casi-negro); line-height:1.15; margin-bottom:0.4rem; }
.subtitulo { font-family:'Lora',serif; font-style:italic; font-size:0.9rem; color:var(--marron); margin-bottom:2rem; }

.pasos { display:flex; align-items:center; margin-bottom:2.5rem; }
.paso { display:flex; align-items:center; gap:0.5rem; }
.pnum { width:26px; height:26px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:0.72rem; font-weight:700; flex-shrink:0; transition:all 0.2s; }
.pnum.activo { background:var(--celeste); color:#fff; }
.pnum.hecho { background:var(--ok); color:#fff; }
.pnum.pendiente { background:var(--ocre-claro); color:var(--marron); }
.plbl { font-size:0.7rem; font-weight:600; color:var(--gris); white-space:nowrap; }
.plbl.activo { color:var(--celeste); }
.psep { flex:1; height:1px; background:var(--ocre-claro); margin:0 0.5rem; }

.sec { display:none; } .sec.visible { display:block; }
.tipos-grid { display:grid; grid-template-columns:1fr 1fr; gap:0.8rem; margin-bottom:0.5rem; }
.tcard { border:2px solid var(--ocre-claro); border-radius:8px; padding:1.2rem 1rem; cursor:pointer; transition:all 0.18s; text-align:center; background:#fff; user-select:none; }
.tcard:hover { border-color:var(--celeste); box-shadow:0 2px 10px rgba(26,111,168,0.1); }
.tcard.sel { border-color:var(--celeste); background:var(--celeste-pale); }
.tcard.ancho { grid-column:1/-1; }
.ticono { font-size:1.6rem; margin-bottom:0.4rem; display:block; }
.tnombre { font-family:'Lora',serif; font-weight:700; font-size:0.85rem; color:var(--casi-negro); margin-bottom:0.2rem; }
.tcard.sel .tnombre { color:var(--celeste); }
.tdesc { font-size:0.68rem; color:var(--gris); line-height:1.4; }

.roles-lbl { font-size:0.72rem; font-weight:600; color:var(--marron); margin-bottom:0.6rem; }
.chips { display:flex; flex-wrap:wrap; gap:0.4rem; }
.chip { display:inline-flex; align-items:center; gap:0.4rem; border:1px solid var(--ocre-claro); border-radius:20px; padding:0.3rem 0.7rem; cursor:pointer; font-size:0.72rem; background:#fff; transition:all 0.15s; user-select:none; }
.chip:hover { border-color:var(--celeste); }
.chip.on { border-color:var(--celeste); background:var(--celeste-pale); color:var(--celeste); font-weight:600; }

.campo { margin-bottom:1.3rem; }
.campo label { display:block; font-size:0.75rem; font-weight:600; margin-bottom:0.4rem; }
.campo input, .campo select { width:100%; font-family:'Inter',sans-serif; font-size:0.88rem; border:1.5px solid var(--ocre-claro); border-radius:6px; padding:0.65rem 0.85rem; background:#fff; color:var(--casi-negro); outline:none; transition:border-color 0.2s; }
.campo input:focus, .campo select:focus { border-color:var(--celeste); }
.campo input.err, .campo select.err { border-color:var(--error); }
.ferr { font-size:0.68rem; color:var(--error); margin-top:0.3rem; display:none; }
.fhint { font-size:0.68rem; color:var(--gris); margin-top:0.3rem; line-height:1.5; }

.campo-usuario { position:relative; }
.campo-usuario .arroba { position:absolute; left:0.85rem; top:2.05rem; color:var(--ocre); font-weight:700; }
.campo-usuario input { padding-left:1.8rem; }

.pwdbar { height:3px; border-radius:2px; margin-top:0.4rem; transition:all 0.3s; background:var(--ocre-claro); width:0; }
.pwdbar.d { background:var(--error); width:33%; }
.pwdbar.m { background:var(--ocre); width:66%; }
.pwdbar.f { background:var(--ok); width:100%; }

.ccheck { display:flex; align-items:flex-start; gap:0.6rem; margin-bottom:1rem; }
.ccheck input[type=checkbox] { width:16px; height:16px; margin-top:2px; flex-shrink:0; accent-color:var(--celeste); }
.ccheck label { font-size:0.78rem; color:var(--gris); line-height:1.5; cursor:pointer; }
.ccheck a { color:var(--celeste); }

.btn { width:100%; background:var(--celeste); color:#fff; font-family:'Inter',sans-serif; font-weight:700; font-size:0.9rem; padding:0.85rem; border:none; border-radius:6px; cursor:pointer; transition:background 0.2s; margin-top:0.5rem; }
.btn:hover { background:#155d90; }
.btn:disabled { background:var(--ocre-claro); color:var(--marron); cursor:default; }
.btnv { background:none; border:none; color:var(--marron); font-size:0.78rem; cursor:pointer; padding:0.5rem 0; display:flex; align-items:center; gap:0.3rem; margin-bottom:1.2rem; }
.btnv:hover { opacity:0.7; }
.div { border:none; border-top:1px solid var(--ocre-claro); margin:1.5rem 0; }

.banner-error { background:#FDECEA; border:1px solid #f0c2bb; color:var(--error); border-radius:6px; padding:0.8rem 1rem; font-size:0.82rem; margin-bottom:1.5rem; }

.resumen { background:#fff; border:1px solid var(--ocre-claro); border-radius:8px; padding:1.2rem 1.4rem; margin-bottom:1.5rem; }
.rfila { display:flex; justify-content:space-between; align-items:baseline; padding:0.4rem 0; border-bottom:1px solid var(--ocre-claro); font-size:0.82rem; }
.rfila:last-child { border-bottom:none; }
.rk { color:var(--gris); font-size:0.72rem; }
.rv { font-weight:600; text-align:right; max-width:60%; }
.rv.tipo { color:var(--celeste); }

.conf { text-align:center; padding:2rem 1rem; }
.conf-ico { font-size:3rem; margin-bottom:1rem; display:block; }
.conf-tit { font-family:'Lora',serif; font-weight:700; font-size:1.4rem; color:var(--celeste); margin-bottom:0.6rem; }
.conf-txt { font-size:0.85rem; color:var(--gris); line-height:1.7; max-width:380px; margin:0 auto 1.5rem; }
.conf-nota { font-family:'Lora',serif; font-style:italic; font-size:0.78rem; color:var(--marron); border-top:1px solid var(--ocre-claro); padding-top:1rem; margin-top:1rem; }

@media(max-width:480px){
	.tipos-grid { grid-template-columns:1fr; }
	.tcard.ancho { grid-column:auto; }
	.pagina { padding:1.5rem 1rem 3rem; }
}