/* index.css — estilos móviles con paleta indicada */
:root{
  --primary:#2366d9; /* azul dominante */
  --accent:#ffc107;  /* amarillo */
  --white:#ffffff;   /* blanco */
  --bg:#1f66e5; --bg2:#1b56c4; /* fondo azul vibrante */
  --card:transparent; --border:transparent; --muted:#cfe0ff;
}
*{box-sizing:border-box}html,body{height:100%}
body.login-body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial,'Noto Sans',sans-serif;background:linear-gradient(180deg,var(--bg),var(--bg2));color:var(--white);display:flex;align-items:center;justify-content:center}
.login-container{width:100%;max-width:520px;padding:16px}
.login-card{background:transparent;border:0;border-radius:18px;padding:16px 0;box-shadow:none}
.logo-section{display:none}
.logo-section .tag{display:none}
.login-form .input-group{position:relative;margin:18px 0}
.login-form input, .login-form select{width:100%;padding:16px 18px 16px 18px;border-radius:999px;border:0;outline:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:#ffffff;color:#0b1325}
/* ícono caret para selects personalizados */
.login-form select{background-image:none;padding-right:18px}
.input-icon{display:none}
/* Switch estilizado para Mantener sesión */
.switch{display:flex;align-items:center;gap:12px;color:#fff;font-weight:700}
.switch-track{width:46px;height:26px;background:rgba(255,255,255,.35);border-radius:999px;position:relative;display:inline-block;vertical-align:middle;transition:background .25s}
.switch-thumb{position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.25);transition:transform .25s cubic-bezier(.2,.6,.2,1)}
.switch input{display:none}
.switch input:checked + .switch-track{background:var(--accent)}
.switch input:checked + .switch-track .switch-thumb{transform:translateX(20px)}
.switch-label{letter-spacing:.02em}

.checkbox-group{margin:10px 0 16px}
.checkbox-container{display:flex;align-items:center;gap:10px;font-size:14px;color:#ffffff}
.logo-section{display:none}
.login-btn{width:100%;display:flex;align-items:center;justify-content:center;gap:8px;background:#ffffff;color:#0b1325;border:0;border-radius:999px;padding:16px 18px;font-weight:800;cursor:pointer}
.login-btn:hover{filter:brightness(1.03)}
.login-btn.secondary{background:transparent;border:2px solid rgba(255,255,255,.7);color:#fff}
.login-links{margin-top:14px;color:#ffffff}
.login-links a{color:var(--accent);font-weight:700}
.progress-indicator{display:none}
.progress-indicator .step{display:none}
.progress-indicator .step.active{display:none}
.progress-indicator .step.completed{display:none}
/* Toggle estilo (pill) para checkbox Mantener sesión */
.checkbox-container input{appearance:none;width:36px;height:20px;border-radius:999px;background:rgba(255,255,255,.35);position:relative;outline:none;cursor:pointer;display:inline-block}
.checkbox-container input::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#fff;transition:transform .2s ease}
.checkbox-container input:checked{background:#fff}
.checkbox-container input:checked::after{transform:translateX(16px)}
.checkbox-container svg{display:none}

.form-step{display:none}
.form-step.active{display:block}
.error-message{margin-top:12px;color:#ffcdd2}
.loading-message,.success-message{margin-top:12px;color:#e3f2fd}
.file-preview{position:relative;margin-top:8px}
.file-preview img{max-width:100%;border-radius:12px;border:1px solid var(--border)}
.remove-photo{position:absolute;top:6px;right:6px;background:#111827;color:#fff;border:0;border-radius:8px;padding:6px;cursor:pointer}
.date-selector{display:flex;gap:8px}
.input-label{display:block;margin-bottom:6px;color:#cbd5e1}

/* acentos amarillos en elementos interactivos */
.checkbox-container svg{color:var(--accent)}
.logo-section img{filter: drop-shadow(0 4px 10px rgba(35,102,217,.25));}

/* botón instalar PWA */
.install-fab{position:fixed;right:16px;bottom:16px;z-index:50;background:var(--primary);color:var(--white);border:0;border-radius:999px;padding:12px 16px;display:flex;gap:8px;align-items:center;box-shadow:0 8px 24px rgba(35,102,217,.35);font-weight:700}
.install-fab svg{color:var(--accent)}
@media (min-width: 768px){.install-fab{bottom:24px;right:24px}}


/* Custom Select (cselect) for Año/Mes/Día */
.is-hidden{display:none}
.date-selector .cselect{flex:1}
.cselect{position:relative;width:100%}
.cselect-btn{width:100%;display:flex;align-items:center;justify-content:space-between;gap:8px;background:#ffffff;color:#0b1325;border:0;border-radius:999px;padding:16px 18px;font-weight:600;cursor:pointer}
.cselect-btn:hover{filter:brightness(1.03)}
.cselect-btn:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 2px rgba(255,193,7,.15)}
.cselect-value{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left}
.cselect-caret{display:inline-flex;align-items:center}
.cselect-caret svg{transition:transform .2s ease}
.cselect.open .cselect-caret svg{transform:rotate(180deg)}
.cselect-menu{position:absolute;left:0;right:0;top:calc(100% + 8px);background:#ffffff;border:0;border-radius:14px;box-shadow:0 18px 40px rgba(0,0,0,.25);padding:6px;z-index:30;display:none;max-height:260px;overflow:auto}
.cselect.open .cselect-menu{display:block}
.cselect-list{list-style:none;margin:0;padding:0}
.cselect-option{padding:12px 14px;border-radius:10px;cursor:pointer;color:#0b1325}
.cselect-option:hover{background:rgba(35,102,217,.12)}
:root{--uploader:#3f56f5}
/* Step buttons side-by-side for registration and password setup */
.multi-step-form .step-buttons, .login-form .step-buttons{display:flex;gap:12px;margin:10px 0}
.multi-step-form .step-buttons .login-btn, .login-form .step-buttons .login-btn{flex:1;width:auto}

/* Photo uploader cards */
.photo-section{display:flex;flex-direction:column;gap:16px;margin:10px 0}
.photo-upload .photo-label{display:flex;align-items:center;gap:16px;background:#fff;color:var(--uploader);border:3px dashed color-mix(in srgb, var(--uploader) 80%, transparent);border-radius:22px;padding:18px 20px;cursor:pointer;user-select:none}
@supports not (color-mix(in srgb, red, blue)){
  .photo-upload .photo-label{border-color:rgba(63,86,245,.8)}
}
.photo-upload .photo-label:hover{filter:brightness(1.02)}
.photo-upload .photo-label svg{width:44px;height:44px;flex:0 0 44px;display:block}
.photo-upload .photo-label span{font-size:20px;font-weight:600}
/* Radios Si/No estilo adaptado */
.radio-group{display:flex;gap:18px;align-items:center}
.radio-pill{display:flex;align-items:center;gap:8px;color:#fff;cursor:pointer}
.radio-pill input{appearance:none;width:18px;height:18px;border-radius:50%;border:3px solid rgba(255,255,255,.7);display:inline-block;position:relative}
.radio-pill input:checked{border-color:#2e47b8}
.radio-pill input:checked::after{content:"";position:absolute;inset:4px;border-radius:50%;background:#2e47b8}
.radio-pill span{font-weight:700}


.cselect-option.active{background:rgba(255,193,7,.12);color:var(--accent)}
/* Minimal scrollbar for dropdown */
.cselect-menu{scrollbar-width:thin;scrollbar-color:rgba(255,193,7,.55) transparent}
.cselect-menu::-webkit-scrollbar{width:8px}
.cselect-menu::-webkit-scrollbar-track{background:transparent;margin:8px}
.cselect-menu::-webkit-scrollbar-thumb{background:linear-gradient(180deg,rgba(255,193,7,.6),rgba(255,193,7,.35));border-radius:999px;border:2px solid transparent;background-clip:padding-box}
.cselect-menu::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,rgba(255,193,7,.8),rgba(255,193,7,.55))}
.cselect-menu::-webkit-scrollbar-button{width:0;height:0;display:none}