/* ============================================================
   custom.css — MamutERP
   Usa variables CSS para dark mode automático.
   NO usar colores hardcodeados (#hex o rgb) — siempre var(--*)
   ============================================================ */


/* ============================================================
   1. VARIABLES PROPIAS DEL SISTEMA
      Se definen en :root (light) y se sobreescriben en .dark
   ============================================================ */

:root {
    /* Fondos */
    --sys-bg-page:       #f1f5f9;
    --sys-bg-card:       #ffffff;
    --sys-bg-input:      #ffffff;
    --sys-bg-input-focus:#f8faff;

    /* Bordes */
    --sys-border:        rgba(0, 0, 0, 0.10);
    --sys-border-input:  rgba(0, 0, 0, 0.15);
    --sys-border-focus:  var(--color-primary);

    /* Texto */
    --sys-text:          #1e293b;
    --sys-text-muted:    rgba(0, 0, 0, 0.45);
    --sys-text-hint:     rgba(0, 0, 0, 0.35);

    /* Sombras */
    --sys-shadow-card:   0 4px 24px rgba(0, 0, 0, 0.08);
    --sys-shadow-card-hover: 0 8px 40px rgba(0, 0, 0, 0.12);

    /* Alertas — light */
    --sys-alert-error-bg:      #fee2e2;
    --sys-alert-error-text:    #991b1b;
    --sys-alert-error-border:  #fecaca;

    --sys-alert-success-bg:    #d1fae5;
    --sys-alert-success-text:  #065f46;
    --sys-alert-success-border:#a7f3d0;

    --sys-alert-info-bg:       #e0e7ff;
    --sys-alert-info-text:     #3730a3;
    --sys-alert-info-border:   #c7d2fe;

    --sys-alert-warn-bg:       #fef3c7;
    --sys-alert-warn-text:     #92400e;
    --sys-alert-warn-border:   #fde68a;

    /* Badges de modo registro */
    --sys-badge-verify-bg:     #eff6ff;
    --sys-badge-verify-text:   #1e40af;
    --sys-badge-verify-border: #bfdbfe;

    --sys-badge-approval-bg:   #fef3c7;
    --sys-badge-approval-text: #92400e;
    --sys-badge-approval-border:#fcd34d;
}

/* Dark mode — sobreescribe solo lo necesario */
.dark {
    --sys-bg-page:       #0e111a;
    --sys-bg-card:       rgba(255, 255, 255, 0.03);
    --sys-bg-input:      rgba(255, 255, 255, 0.04);
    --sys-bg-input-focus:rgba(255, 255, 255, 0.07);

    --sys-border:        rgba(255, 255, 255, 0.08);
    --sys-border-input:  rgba(255, 255, 255, 0.12);

    --sys-text:          #f1f5f9;
    --sys-text-muted:    rgba(255, 255, 255, 0.45);
    --sys-text-hint:     rgba(255, 255, 255, 0.30);

    --sys-shadow-card:   0 4px 24px rgba(0, 0, 0, 0.40);
    --sys-shadow-card-hover: 0 8px 40px rgba(0, 0, 0, 0.60);

    --sys-alert-error-bg:      rgba(239, 68,  68,  0.15);
    --sys-alert-error-text:    #fca5a5;
    --sys-alert-error-border:  rgba(239, 68,  68,  0.30);

    --sys-alert-success-bg:    rgba(16,  185, 129, 0.15);
    --sys-alert-success-text:  #6ee7b7;
    --sys-alert-success-border:rgba(16,  185, 129, 0.30);

    --sys-alert-info-bg:       rgba(99,  102, 241, 0.15);
    --sys-alert-info-text:     #a5b4fc;
    --sys-alert-info-border:   rgba(99,  102, 241, 0.30);

    --sys-alert-warn-bg:       rgba(245, 158, 11,  0.15);
    --sys-alert-warn-text:     #fcd34d;
    --sys-alert-warn-border:   rgba(245, 158, 11,  0.30);

    --sys-badge-verify-bg:     rgba(59,  130, 246, 0.15);
    --sys-badge-verify-text:   #93c5fd;
    --sys-badge-verify-border: rgba(59,  130, 246, 0.30);

    --sys-badge-approval-bg:   rgba(245, 158, 11,  0.15);
    --sys-badge-approval-text: #fcd34d;
    --sys-badge-approval-border:rgba(245, 158, 11, 0.30);
}


/* ============================================================
   2. PÁGINAS DE AUTENTICACIÓN (login, registro, forgot, reset)
   ============================================================ */

.auth-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: var(--sys-bg-page);
}

.auth-card {
    background: var(--sys-bg-card);
    border: 1px solid var(--sys-border);
    border-radius: 16px;
    box-shadow: var(--sys-shadow-card);
    padding: 40px 36px;
    width: 100%;
    max-width: 420px;
    transition: box-shadow 0.3s;
}

.auth-card h1 {
    font-size: 1.6rem;
    font-weight: 700;
    margin-bottom: 6px;
    color: var(--sys-text);
}

.auth-card .subtitle {
    color: var(--sys-text-muted);
    font-size: 0.9rem;
    margin-bottom: 28px;
}

.auth-links {
    text-align: center;
    margin-top: 20px;
    font-size: 0.88rem;
    color: var(--sys-text-muted);
}

.auth-links a {
    color: var(--color-primary);
    text-decoration: none;
    font-weight: 600;
}

.auth-links a:hover { text-decoration: underline; }

.auth-divider {
    border: none;
    border-top: 1px solid var(--sys-border);
    margin: 20px 0;
}


/* ============================================================
   3. FORMULARIOS
   ============================================================ */

.form-label {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 6px;
    color: var(--sys-text);
}

.form-input {
    width: 100%;
    padding: 10px 14px;
    border: 1.5px solid var(--sys-border-input);
    border-radius: 8px;
    font-size: 0.95rem;
    margin-bottom: 16px;
    background: var(--sys-bg-input);
    color: var(--sys-text);
    transition: border-color 0.2s, background 0.2s;
}

.form-input:focus {
    outline: none;
    border-color: var(--sys-border-focus);
    background: var(--sys-bg-input-focus);
}

/* Select hereda estilos de input */
select.form-input {
    appearance: auto;
    cursor: pointer;
}

.form-hint {
    font-size: 0.78rem;
    color: var(--sys-text-hint);
    margin-top: -10px;
    margin-bottom: 16px;
    display: block;
}


/* ============================================================
   4. BOTONES
   ============================================================ */

.btn-auth {
    width: 100%;
    padding: 12px;
    background: var(--color-primary);
    color: #fff;
    font-size: 0.95rem;
    font-weight: 600;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: opacity 0.2s, transform 0.1s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-decoration: none;
}

.btn-auth:hover   { opacity: 0.88; }
.btn-auth:active  { transform: scale(0.98); }


/* ============================================================
   5. ALERTAS
   ============================================================ */

.alert {
    padding: 12px 16px;
    border-radius: 8px;
    margin-bottom: 20px;
    font-size: 0.9rem;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    border: 1px solid transparent;
}

.alert-error   {
    background: var(--sys-alert-error-bg);
    color:      var(--sys-alert-error-text);
    border-color: var(--sys-alert-error-border);
}
.alert-success {
    background: var(--sys-alert-success-bg);
    color:      var(--sys-alert-success-text);
    border-color: var(--sys-alert-success-border);
}
.alert-info {
    background: var(--sys-alert-info-bg);
    color:      var(--sys-alert-info-text);
    border-color: var(--sys-alert-info-border);
}
.alert-warn {
    background: var(--sys-alert-warn-bg);
    color:      var(--sys-alert-warn-text);
    border-color: var(--sys-alert-warn-border);
}


/* ============================================================
   6. FORMULARIO — EXTRAS
   ============================================================ */

/* Recordarme */
.remember-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 20px;
}

.remember-row input[type=checkbox] {
    width: 16px;
    height: 16px;
    cursor: pointer;
    accent-color: var(--color-primary);
}

.remember-row label {
    margin: 0;
    font-weight: 400;
    font-size: 0.88rem;
    cursor: pointer;
    color: var(--sys-text-muted);
}

/* Badge modo de registro */
.mode-badge {
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 0.85rem;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 8px;
    border: 1px solid transparent;
}

.mode-verificacion {
    background:   var(--sys-badge-verify-bg);
    color:        var(--sys-badge-verify-text);
    border-color: var(--sys-badge-verify-border);
}

.mode-aprobacion {
    background:   var(--sys-badge-approval-bg);
    color:        var(--sys-badge-approval-text);
    border-color: var(--sys-badge-approval-border);
}

/* Upload avatar */
.upload-zone {
    border: 2px dashed var(--sys-border-input);
    border-radius: 8px;
    padding: 16px;
    cursor: pointer;
    transition: all 0.2s;
    text-align: center;
    color: var(--sys-text-muted);
}

.upload-zone:hover {
    border-color: var(--color-primary);
    background: rgba(99, 102, 241, 0.05);
}


/* ============================================================
   7. INSTALADOR
   ============================================================ */

.install-step {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 16px 0;
    border-bottom: 1px solid var(--sys-border);
}

.install-step:last-child { border-bottom: none; }

.step-number {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--color-primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.85rem;
    flex-shrink: 0;
}

.step-number.done  { background: #10b981; }
.step-number.error { background: #ef4444; }


/* ============================================================
   8. RESPONSIVE
   ============================================================ */

@media (max-width: 640px) {
    .auth-card { padding: 28px 20px; }
}