/* crw01_login.css — Estilos página de login certinom.mx */

:root {
    --crw-primary:      #0D6EFD;
    --crw-primary-dark: #084298;
    --crw-accent:       #00A6A6;
    --crw-bg:           #f5f7fb;
    --crw-surface:      #ffffff;
    --crw-surface-2:    #eef3f8;
    --crw-text:         #152033;
    --crw-muted:        #607089;
    --crw-border:       #dce4ef;
    --crw-danger:       #dc3545;
    --crw-shadow:       0 20px 48px rgba(20,33,61,.13);
    --crw-r-card:       28px;
    --crw-r-input:      14px;
    --crw-r-btn:        14px;
}

.crw-oscuro {
    --crw-bg:       #0f1724; --crw-surface:  #172033; --crw-surface-2:#202b40;
    --crw-text:     #edf3ff; --crw-muted:    #a8b5c9; --crw-border:   #2c3950;
    --crw-primary:  #5da2ff; --crw-accent:   #36d6d6;
}

*, *::before, *::after { box-sizing: border-box; }

.crw-login-bg {
    min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px 16px;
    background: radial-gradient(circle at top right,rgba(0,166,166,.22) 0%,transparent 38%),
                radial-gradient(circle at bottom left,rgba(13,110,253,.18) 0%,transparent 34%),
                var(--crw-bg);
    transition: background .3s ease;
}

.crw-login-card {
    width: 100%; max-width: 440px;
    background: var(--crw-surface); border: 1px solid var(--crw-border);
    border-radius: var(--crw-r-card); padding: 40px 36px; box-shadow: var(--crw-shadow);
    animation: crwFadeIn .28s ease;
}

@keyframes crwFadeIn { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }

.crw-brand { display:flex; align-items:center; gap:14px; margin-bottom:28px; }
.crw-brand-mark { width:44px; height:44px; border-radius:14px; display:grid; place-items:center; font-weight:900; font-size:15px; letter-spacing:-1px; color:#fff; background:linear-gradient(135deg,var(--crw-primary),var(--crw-accent)); box-shadow:0 8px 20px rgba(13,110,253,.28); flex-shrink:0; }
.crw-brand-copy strong { display:block; font-size:18px; font-weight:900; letter-spacing:-.02em; color:var(--crw-text); }
.crw-brand-copy span { display:block; font-size:12px; color:var(--crw-muted); margin-top:2px; }

.crw-pasos { display:flex; align-items:center; margin-bottom:28px; }
.crw-paso-dot { width:10px; height:10px; border-radius:50%; background:var(--crw-border); transition:background .3s,transform .3s; }
.crw-paso-dot--activo { background:var(--crw-primary); transform:scale(1.3); }
.crw-paso-linea { flex:1; height:2px; background:var(--crw-border); transition:background .3s; }
.crw-paso-linea--activa { background:var(--crw-primary); }

.crw-titulo { margin:0 0 6px; font-size:24px; font-weight:900; letter-spacing:-.03em; color:var(--crw-text); }
.crw-subtitulo { margin:0 0 22px; font-size:14px; color:var(--crw-muted); line-height:1.55; }
.crw-campo { margin-bottom:16px; }
.crw-etiqueta { display:block; font-size:12px; font-weight:800; color:var(--crw-muted); text-transform:uppercase; letter-spacing:.06em; margin-bottom:6px; }
.crw-input { width:100%; height:46px; border:1px solid var(--crw-border); border-radius:var(--crw-r-input); background:var(--crw-surface-2); color:var(--crw-text); font:inherit; font-size:15px; padding:0 14px; outline:none; transition:border-color .18s,box-shadow .18s; }
.crw-input:focus { border-color:var(--crw-primary); box-shadow:0 0 0 3px rgba(13,110,253,.14); }
.crw-input--error { border-color:var(--crw-danger); box-shadow:0 0 0 3px rgba(220,53,69,.12); }
.crw-input--codigo { text-align:center; font-size:28px; font-weight:900; letter-spacing:.35em; height:64px; }
.crw-input-wrapper { position:relative; }
.crw-input-wrapper .crw-input { padding-right:46px; }
.crw-toggle-pass { position:absolute; right:12px; top:50%; transform:translateY(-50%); background:none; border:none; cursor:pointer; font-size:16px; padding:0; color:var(--crw-muted); }

.crw-btn-pri { width:100%; height:48px; border:none; border-radius:var(--crw-r-btn); background:linear-gradient(135deg,var(--crw-primary),var(--crw-accent)); color:#fff; font:inherit; font-size:15px; font-weight:800; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:8px; box-shadow:0 10px 24px rgba(13,110,253,.24); transition:transform .18s,box-shadow .18s; margin-top:6px; }
.crw-btn-pri:hover:not(:disabled) { transform:translateY(-1px); box-shadow:0 14px 28px rgba(13,110,253,.32); }
.crw-btn-pri:disabled { opacity:.6; cursor:not-allowed; }
.crw-btn-sec { height:46px; padding:0 18px; border:1px solid var(--crw-border); border-radius:var(--crw-r-btn); background:var(--crw-surface); color:var(--crw-text); font:inherit; font-size:14px; font-weight:700; cursor:pointer; transition:border-color .18s; }
.crw-btn-sec:hover { border-color:rgba(13,110,253,.4); }
.crw-btn-reenviar { display:block; width:100%; margin-top:12px; padding:10px; border:none; background:none; color:var(--crw-primary); font:inherit; font-size:14px; font-weight:700; cursor:pointer; text-align:center; border-radius:10px; transition:background .18s; }
.crw-btn-reenviar:hover:not(:disabled) { background:rgba(13,110,253,.07); }
.crw-btn-reenviar:disabled { opacity:.4; cursor:not-allowed; }
.crw-fila-acciones { display:flex; gap:10px; margin-top:6px; }
.crw-fila-acciones .crw-btn-pri { flex:1; }

.crw-captcha-display { background:var(--crw-surface-2); border:1px solid var(--crw-border); border-radius:18px; padding:20px 14px; text-align:center; margin-bottom:18px; }
.crw-captcha-texto { font-size:22px; font-weight:900; color:var(--crw-text); letter-spacing:.02em; }

.crw-timer { font-size:13px; font-weight:700; color:var(--crw-muted); text-align:center; margin:10px 0 4px; transition:color .3s; }
.crw-timer--urgente { color:var(--crw-danger); }

.crw-error { display:flex; align-items:center; gap:8px; background:rgba(220,53,69,.09); border:1px solid rgba(220,53,69,.28); border-radius:12px; padding:10px 14px; margin-bottom:14px; font-size:13px; font-weight:700; color:var(--crw-danger); animation:crwFadeIn .2s ease; }

.crw-spinner { display:inline-block; width:16px; height:16px; border:2px solid rgba(255,255,255,.3); border-top-color:#fff; border-radius:50%; animation:crwSpin .7s linear infinite; }

@keyframes crwSpin { to{transform:rotate(360deg)} }

@media (max-width:480px) { .crw-login-card{padding:28px 20px;} .crw-titulo{font-size:20px;} }