/* crw_site.css — Estilos globales base certinom.mx */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { min-height: 100%; font-family: Inter, "Segoe UI", Roboto, Arial, sans-serif; -webkit-font-smoothing: antialiased; }
:root { --crw-primary:#0D6EFD; --crw-accent:#00A6A6; --crw-bg:#f5f7fb; --crw-surface:#fff; --crw-surface-2:#eef3f8; --crw-text:#152033; --crw-muted:#607089; --crw-border:#dce4ef; --crw-danger:#dc3545; --crw-success:#1f9d55; --crw-warning:#f4a261; }
.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; }
.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:17px; 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; }
#blazor-error-ui { background:#fff3cd; bottom:0; box-shadow:0 -1px 2px rgba(0,0,0,.2); display:none; left:0; padding:.6rem 1.25rem .7rem; position:fixed; width:100%; z-index:1000; font-size:14px; color:#664d03; }
#blazor-error-ui .reload { cursor:pointer; font-weight:700; color:#0D6EFD; text-decoration:underline; margin-left:12px; }
#blazor-error-ui .dismiss { cursor:pointer; position:absolute; right:.75rem; top:.5rem; font-size:18px; font-weight:700; }

/* ═══════════════════════════════════════════════════════════════════════════
   CRW SLATE — Sistema de color para inputs de certinom.mx
   Nombre: CRW Slate · Versión: 1.0 · Archivo: crw_site.css
   Aplica a: todos los inputs, selects y textareas del proyecto.
   Regla principal: NUNCA negro en texto ni fondo de captura.
   Paleta:
     Fondo reposo   → #f4f8fc  (azul grisáceo muy suave)
     Fondo activo   → #eef4ff  (azul pálido al enfocar)
     Fondo oscuro   → #1e2d42  (modo oscuro)
     Texto captura  → #4a6885  (azul pizarra medio)
     Texto activo   → #3d6baa  (azul pizarra más vivo al enfocar)
     Placeholder    → #b8cdd9  (azul grisáceo tenue)
     Label          → #7a95ad  (muted azul grisáceo)
     Hint           → #b8cdd9  (igual que placeholder)
     Borde reposo   → #d5e3ee
     Borde activo   → rgba(13,110,253,.40)
     Foco ring      → rgba(13,110,253,.10)
   Modo oscuro: se activa con .crw-oscuro en el ancestro.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── CRW Slate: inputs globales ────────────────────────────────────────── */

.crw-form-input,
.crw-form-select,
.crw-form-textarea,
.crw45-input {
    /* Forzar modo claro en el elemento — evita que dark mode del SO/navegador
       pinte el fondo negro o el texto blanco dentro del input */
    color-scheme:            light !important;
    -webkit-appearance:      none !important;
    appearance:              none !important;

    background-color:        #f4f8fc !important;
    background:              #f4f8fc !important;
    color:                   #4a6885 !important;
    -webkit-text-fill-color: #4a6885 !important;

    border:        1px solid #d5e3ee;
    border-radius: 10px;
    font:          inherit;
    outline:       none;
    transition:    border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.crw-form-input::placeholder,
.crw-form-select::placeholder,
.crw-form-textarea::placeholder,
.crw45-input::placeholder {
    color:                   #b8cdd9 !important;
    -webkit-text-fill-color: #b8cdd9 !important;
    opacity:                 1 !important;
}

.crw-form-input:focus,
.crw-form-select:focus,
.crw-form-textarea:focus,
.crw45-input:focus,
.crw45-input.active {
    border-color:            rgba(13,110,253,.40) !important;
    box-shadow:              0 0 0 3px rgba(13,110,253,.10) !important;
    background-color:        #eef4ff !important;
    background:              #eef4ff !important;
    color:                   #3d6baa !important;
    -webkit-text-fill-color: #3d6baa !important;
}

/* ── CRW Slate: modo oscuro (.crw-oscuro) ──────────────────────────────── */

.crw-oscuro .crw-form-input,
.crw-oscuro .crw-form-select,
.crw-oscuro .crw-form-textarea,
.crw-oscuro .crw45-input {
    color-scheme:            dark !important;
    background-color:        #1e2d42 !important;
    background:              #1e2d42 !important;
    color:                   #8ab4d4 !important;
    -webkit-text-fill-color: #8ab4d4 !important;
    border-color:            rgba(100,160,210,.25) !important;
}

.crw-oscuro .crw-form-input::placeholder,
.crw-oscuro .crw-form-select::placeholder,
.crw-oscuro .crw-form-textarea::placeholder,
.crw-oscuro .crw45-input::placeholder {
    color:                   #4a6a85 !important;
    -webkit-text-fill-color: #4a6a85 !important;
    opacity:                 1 !important;
}

.crw-oscuro .crw-form-input:focus,
.crw-oscuro .crw-form-select:focus,
.crw-oscuro .crw-form-textarea:focus,
.crw-oscuro .crw45-input:focus,
.crw-oscuro .crw45-input.active {
    border-color:            rgba(93,162,255,.50) !important;
    box-shadow:              0 0 0 3px rgba(93,162,255,.12) !important;
    background-color:        #1a2d4a !important;
    background:              #1a2d4a !important;
    color:                   #a0c8f0 !important;
    -webkit-text-fill-color: #a0c8f0 !important;
}

/* ── CRW Slate: label y hint globales ──────────────────────────────────── */

.crw-form-label {
    color: #7a95ad !important;
}

.crw-form-hint,
.crw45-hint {
    color:     #b8cdd9 !important;
    font-size: 11px;
}

.crw-oscuro .crw-form-label  { color: #6a90b0 !important; }
.crw-oscuro .crw-form-hint,
.crw-oscuro .crw45-hint       { color: #4a6a85 !important; }

/* ── CRW Slate: wrapper de password ───────────────────────────────────── */

.crw-input-wrapper { position: relative; }

.crw-input-wrapper .crw-form-input,
.crw-input-wrapper .crw45-input { padding-right: 42px; }

.crw-toggle-pass {
    position:   absolute;
    right:      10px;
    top:        50%;
    transform:  translateY(-50%);
    background: none;
    border:     none;
    cursor:     pointer;
    font-size:  15px;
    padding:    0;
    color:      #7a95ad;
    transition: color .18s;
}

.crw-toggle-pass:hover      { color: #4a6885; }
.crw-oscuro .crw-toggle-pass { color: #4a6a85; }