/* ========================================================= ABC FOR KIDS — inscripcion.css Wizard de inscripción (5 pasos) + Google Apps Script Hereda variables de marca desde style.css (cargar DESPUÉS de style.css en el de inscripciones.html). Cero dependencias externas. ========================================================= */ /* -------------------- CONTENEDOR GENERAL -------------------- */ .wizard-shell{ display: grid; grid-template-columns: 300px 1fr; gap: 0; background: var(--color-white); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); overflow: hidden; align-items: stretch; } /* -------------------- SIDEBAR -------------------- */ .wizard-sidebar{ background: var(--color-primary-dark); color: #fff; padding: 40px 30px; } .wizard-sidebar .eyebrow{ background: rgba(255,255,255,.16); color: #fff; } .wizard-sidebar h2{ font-size: 1.5rem; line-height:1.2; margin-bottom: 10px; } .wizard-sidebar > .wizard-sidebar-inner > p{ color: rgba(255,255,255,.82); font-size: .92rem; margin-bottom: 30px; } .wizard-steps{ display:flex; flex-direction:column; gap: 4px; margin-bottom: 34px; } .wizard-step{ display:flex; align-items:center; gap: 14px; padding: 10px 8px; border-radius: var(--radius-sm); opacity: .55; transition: var(--transition); } .wizard-step.is-active{ opacity: 1; } .wizard-step.is-done{ opacity: .9; } .step-num{ flex: none; width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.55); display:flex; align-items:center; justify-content:center; font-family: var(--font-heading); font-weight: 800; font-size: .85rem; } .wizard-step.is-active .step-num{ background: #fff; color: var(--color-primary-dark); border-color: #fff; } .wizard-step.is-done .step-num{ background: rgba(255,255,255,.22); border-color: #fff; } .wizard-step.is-done .step-num::before{ content: '✓'; } .step-label{ font-weight: 700; font-size: .9rem; } .wizard-help{ display:flex; gap: 12px; align-items:flex-start; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.2); } .wizard-help .material-symbols-outlined{ font-size: 22px; color: #fff; background: rgba(255,255,255,.16); border-radius: 50%; padding: 7px; } .wizard-help strong{ display:block; font-size: .88rem; margin-bottom: 2px; } .wizard-help p{ font-size: .85rem; color: rgba(255,255,255,.82); } .wizard-help a{ text-decoration: underline; color: #fff; } /* -------------------- PANEL DEL FORMULARIO -------------------- */ .wizard-panel{ padding: 40px; min-width: 0; } .wizard-step-panel{ display:none; border: none; margin: 0; padding: 0; animation: wizardFadeIn .35s ease; } .wizard-step-panel.is-active{ display:block; } @keyframes wizardFadeIn{ from{ opacity: 0; transform: translateX(10px); } to{ opacity: 1; transform: translateX(0); } } @media (prefers-reduced-motion: reduce){ .wizard-step-panel{ animation: none; } } .wizard-step-title{ font-family: var(--font-heading); font-weight: 900; font-size: 1.3rem; margin-bottom: 6px; } .wizard-step-desc{ color: var(--color-text-muted); font-size: .92rem; margin-bottom: 26px; } /* -------------------- CAMPOS -------------------- */ .field-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 18px; } .field-grid .span-2{ grid-column: 1 / -1; } .field{ display:flex; flex-direction:column; gap: 6px; margin-bottom: 18px; } .field label{ font-weight: 800; font-size: .86rem; color: var(--color-text); } .field .hint{ font-weight: 400; color: var(--color-text-muted); font-size: .78rem; } .field input[type="text"], .field input[type="email"], .field input[type="tel"], .field input[type="date"], .field select, .field textarea{ width: 100%; padding: 12px 14px; border: 1.5px solid var(--color-gray-line); border-radius: var(--radius-sm); font-family: var(--font-main); font-size: .95rem; color: var(--color-text); background: #fff; transition: var(--transition); } .field textarea{ resize: vertical; min-height: 90px; } .field input:focus, .field select:focus, .field textarea:focus{ outline:none; border-color: var(--color-primary); box-shadow: 0 0 0 4px var(--color-primary-tint); } .field input:invalid.was-validated, .field select:invalid.was-validated{ border-color: #c0392b; } .field-error{ display:none; color: #c0392b; font-size: .78rem; font-weight: 700; } .field.has-error .field-error{ display:block; } .field.has-error input, .field.has-error select, .field.has-error textarea{ border-color: #c0392b; } .field-checkbox-inline{ display:flex; align-items:center; gap: 8px; font-size: .85rem; color: var(--color-text-muted); margin-top: 4px; } .field-checkbox-inline input{ width:16px; height:16px; accent-color: var(--color-primary); } .phone-wrap{ display:flex; align-items:stretch; } .phone-prefix{ flex: none; display:flex; align-items:center; padding: 0 14px; border: 1.5px solid var(--color-gray-line); border-right: none; border-radius: var(--radius-sm) 0 0 var(--radius-sm); background: var(--color-gray-bg); font-weight:800; color: var(--color-text-muted); font-size:.95rem; } .phone-wrap input{ border-radius: 0 var(--radius-sm) var(--radius-sm) 0; min-width: 0; } .field.has-error .phone-prefix{ border-color: #c0392b; } /* -------------------- RADIO / CHECKBOX “CARD” -------------------- */ .option-group{ display:grid; gap: 10px; margin-bottom: 18px; } .option-group.grid-2{ grid-template-columns: 1fr 1fr; } .option-group.grid-3{ grid-template-columns: repeat(3, 1fr); } .option-card{ position:relative; display:flex; align-items:flex-start; gap: 10px; padding: 13px 14px; border: 1.5px solid var(--color-gray-line); border-radius: var(--radius-sm); cursor:pointer; transition: var(--transition); background:#fff; } .option-card:hover{ border-color: var(--color-primary); } .option-card input{ margin-top: 2px; accent-color: var(--color-primary); width:16px; height:16px; flex:none; } .option-card span.opt-label{ font-weight: 700; font-size: .9rem; line-height:1.35; } .option-card span.opt-sub{ display:block; font-weight:400; color: var(--color-text-muted); font-size: .78rem; margin-top:2px; } .option-card:has(input:checked){ border-color: var(--color-primary); background: var(--color-primary-tint); } .option-card:has(input:disabled){ opacity: .5; cursor:not-allowed; background: var(--color-gray-bg); } .age-hint{ display:flex; gap: 10px; align-items:flex-start; background: var(--color-secondary-tint); border-left: 3px solid var(--color-secondary); border-radius: var(--radius-sm); padding: 12px 14px; font-size: .88rem; margin-bottom: 20px; } .age-hint strong{ color: var(--color-secondary-dark); } .horarios-box{ margin-top: 4px; } .horarios-box .empty-hint{ color: var(--color-text-muted); font-size: .88rem; padding: 10px 0; } /* -------------------- CONDUCTAS (checklist largo) -------------------- */ .checklist{ display:flex; flex-direction:column; gap: 10px; margin-bottom: 8px; } .checklist-item{ display:flex; align-items:flex-start; gap: 10px; padding: 10px 12px; border: 1.5px solid var(--color-gray-line); border-radius: var(--radius-sm); font-size: .88rem; cursor:pointer; transition: var(--transition); } .checklist-item:hover{ border-color: var(--color-primary); } .checklist-item input{ margin-top:2px; accent-color: var(--color-primary); width:16px; height:16px; flex:none; } .checklist-item:has(input:checked){ border-color: var(--color-primary); background: var(--color-primary-tint); } .conditional-field{ display:none; margin-top: 10px; } .conditional-field.is-visible{ display:block; } /* -------------------- RESUMEN (Paso 5) -------------------- */ .summary-card{ background: var(--color-gray-bg); border-radius: var(--radius-md); padding: 22px 24px; margin-bottom: 22px; } .summary-row{ display:flex; justify-content:space-between; gap: 16px; padding: 9px 0; border-bottom: 1px solid var(--color-gray-line); font-size: .9rem; } .summary-row:last-child{ border-bottom:none; } .summary-row dt{ color: var(--color-text-muted); font-weight:700; } .summary-row dd{ margin:0; font-weight:700; text-align:right; } .legal-check{ display:flex; align-items:flex-start; gap: 10px; font-size: .86rem; color: var(--color-text-muted); margin-bottom: 22px; } .legal-check input{ margin-top:3px; width:17px; height:17px; flex:none; accent-color: var(--color-primary); } /* -------------------- NAVEGACIÓN DEL WIZARD -------------------- */ .wizard-nav{ display:flex; justify-content:space-between; align-items:center; gap: 14px; margin-top: 8px; padding-top: 22px; border-top: 1px solid var(--color-gray-line); } .wizard-nav .btn:only-child{ margin-left:auto; } /* .btn define display:inline-flex con la misma especificidad que [hidden]{display:none} del navegador; al ser una regla de autor posterior, gana y el botón queda invisible pero seleccionable. Forzamos aquí que [hidden] SIEMPRE oculte el elemento. */ .wizard-nav .btn[hidden]{ display:none !important; } .btn-loading{ position:relative; color: transparent !important; pointer-events:none; } .btn-loading::after{ content:''; position:absolute; top:50%; left:50%; width:18px; height:18px; margin:-9px 0 0 -9px; border-radius:50%; border: 2.5px solid rgba(255,255,255,.5); border-top-color: #fff; animation: btnSpin .7s linear infinite; } @keyframes btnSpin{ to{ transform: rotate(360deg); } } /* -------------------- RESULTADOS (éxito / error) -------------------- */ .wizard-result{ text-align:center; padding: 50px 30px; } .wizard-result .result-icon{ width:64px; height:64px; border-radius:50%; display:flex; align-items:center; justify-content:center; margin: 0 auto 18px; } .wizard-result.result-success .result-icon{ background: var(--color-primary-tint); } .wizard-result.result-error .result-icon{ background: #fdecea; } .wizard-result h3{ font-size: 1.3rem; margin-bottom: 10px; } .wizard-result p{ color: var(--color-text-muted); max-width: 440px; margin: 0 auto 24px; } .wizard-result .result-actions{ display:flex; gap: 12px; justify-content:center; flex-wrap:wrap; } /* -------------------- RESPONSIVE -------------------- */ @media (max-width: 900px){ .wizard-shell{ grid-template-columns: 1fr; border-radius: var(--radius-md); } .wizard-sidebar{ padding: 26px 24px; } .wizard-steps{ flex-direction:row; flex-wrap:wrap; gap: 10px; margin-bottom: 18px; } .wizard-step{ padding: 6px; opacity:.55; } .wizard-step .step-label{ display:none; } .wizard-sidebar h2{ font-size: 1.25rem; } .wizard-help{ display:none; } .wizard-panel{ padding: 26px 22px; } .field-grid{ grid-template-columns: 1fr; gap: 0; } .option-group.grid-2, .option-group.grid-3{ grid-template-columns: 1fr; } }