/* ═══════════════════════════════════════════════════════
   app.css — Gestor de Credenciales
   Paleta: Azul marino oscuro #1e2d4e
   ═══════════════════════════════════════════════════════ */

/* ── Variables ── */
:root {
    --navy-900:      #111b2e;
    --navy-800:      #1a2744;
    --navy-700:      #1e2d4e;   /* color principal */
    --navy-600:      #243660;
    --navy-500:      #2d4278;
    --navy-400:      #3d5a9e;
    --navy-300:      #6b88c4;
    --navy-100:      #dce6f7;
    --navy-50:       #eef3fb;

    --acento:        #f59e0b;   /* ámbar para highlights */
    --acento-claro:  #fef3c7;
    --rojo:          #ef4444;
    --verde:         #10b981;
    --gris-texto:    #64748b;
    --gris-borde:    #e2e8f0;
    --blanco:        #ffffff;

    --radio:         0.875rem;
    --sombra:        0 4px 24px rgba(17,27,46,0.12);
    --sombra-lg:     0 8px 40px rgba(17,27,46,0.18);
}

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

body {
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    background: #f0f4f8;
    color: var(--navy-800);
    font-size: 0.93rem;
}

/* ════════════════════════════════════════
   PANTALLA DE LOGIN
   ════════════════════════════════════════ */

body.pagina-login {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(150deg, var(--navy-900) 0%, var(--navy-700) 45%, var(--navy-500) 100%);
}

body.pagina-login::before {
    content: '';
    position: fixed;
    inset: 0;
    background:
        radial-gradient(ellipse at 15% 60%, rgba(255,255,255,0.03) 0%, transparent 55%),
        radial-gradient(ellipse at 85% 15%, rgba(255,255,255,0.05) 0%, transparent 50%);
    pointer-events: none;
}

.tarjeta-login {
    background: var(--blanco);
    border-radius: 1.5rem;
    box-shadow: var(--sombra-lg);
    padding: 2.75rem 2.25rem;
    width: 100%;
    max-width: 420px;
    position: relative;
    z-index: 1;
    animation: aparecerTarjeta 0.45s cubic-bezier(.22,.68,0,1.2) both;
}

@keyframes aparecerTarjeta {
    from { opacity: 0; transform: translateY(28px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0)    scale(1);    }
}

.login-titulo {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--navy-700);
    text-align: center;
    margin-bottom: 0.15rem;
}

.login-subtitulo {
    font-size: 0.875rem;
    color: var(--gris-texto);
    text-align: center;
    margin-bottom: 1.75rem;
}

/* Campos con ícono interior */
.campo-icono {
    position: relative;
    margin-bottom: 1rem;
}

.campo-icono .icono-izq {
    position: absolute;
    left: 0.9rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--navy-400);
    font-size: 1rem;
    pointer-events: none;
}

.campo-icono .form-control {
    padding-left: 2.6rem;
    padding-right: 2.75rem;
    border-radius: 2rem;
    border: 1.5px solid var(--gris-borde);
    background: var(--navy-50);
    height: 48px;
    font-size: 0.93rem;
    transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
    color: var(--navy-800);
}

.campo-icono .form-control:focus {
    border-color: var(--navy-500);
    background: var(--blanco);
    box-shadow: 0 0 0 3px rgba(30,45,78,0.12);
    outline: none;
}

.btn-revelar {
    position: absolute;
    right: 0.7rem;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--navy-400);
    cursor: pointer;
    padding: 0.25rem 0.4rem;
    border-radius: 50%;
    transition: background 0.2s;
    font-size: 1rem;
    line-height: 1;
}
.btn-revelar:hover { background: var(--navy-50); }

/* Botón login */
.btn-login {
    width: 100%;
    height: 48px;
    border-radius: 2rem;
    background: linear-gradient(90deg, var(--navy-800) 0%, var(--navy-500) 100%);
    border: none;
    color: var(--blanco);
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    transition: opacity 0.2s, transform 0.15s, box-shadow 0.2s;
    box-shadow: 0 4px 20px rgba(30,45,78,0.38);
    margin-top: 0.5rem;
}
.btn-login:hover  { opacity: 0.9; transform: translateY(-1px); box-shadow: 0 8px 24px rgba(30,45,78,0.44); }
.btn-login:active { transform: translateY(0); }

.login-footer {
    text-align: center;
    margin-top: 1.5rem;
    font-size: 0.75rem;
    color: var(--gris-texto);
}

/* ════════════════════════════════════════
   NAVBAR SUPERIOR
   ════════════════════════════════════════ */

.navbar {
    background: var(--navy-900) !important;
    border-bottom: 1px solid var(--navy-800);
    box-shadow: 0 2px 12px rgba(17,27,46,0.25);
    height: 58px;
    padding: 0 1.25rem;
}

.navbar-brand {
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--blanco) !important;
    letter-spacing: 0.01em;
}

/* ════════════════════════════════════════
   SIDEBAR
   ════════════════════════════════════════ */

#sidebar {
    background: var(--navy-800) !important;
    min-height: calc(100vh - 58px);
    position: sticky;
    top: 58px;
    padding-top: 1rem;
    border-right: 1px solid var(--navy-700);
}

#sidebar .nav-link {
    color: rgba(255,255,255,0.7);
    border-radius: 0.5rem;
    padding: 0.55rem 1rem;
    font-size: 0.875rem;
    margin: 1px 0.5rem;
    transition: background 0.15s, color 0.15s, border-left 0.15s;
    border-left: 3px solid transparent;
}

#sidebar .nav-link:hover {
    background: rgba(255,255,255,0.07);
    color: var(--blanco);
}

#sidebar .nav-link.active {
    background: rgba(255,255,255,0.1);
    color: var(--blanco);
    font-weight: 600;
    border-left-color: var(--acento);
}

#sidebar .nav-section-label {
    font-size: 0.68rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.3);
    padding: 0.6rem 1.5rem 0.2rem;
    margin-top: 0.5rem;
}

/* ════════════════════════════════════════
   LAYOUT PRINCIPAL
   ════════════════════════════════════════ */

main {
    padding: 1.75rem 1.5rem;
}

/* ── Títulos de sección ── */
.titulo-seccion {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--navy-800);
}

.subtitulo-seccion {
    font-size: 0.85rem;
    color: var(--gris-texto);
    margin-bottom: 1.5rem;
}

/* ── Tarjeta base ── */
.tarjeta {
    background: var(--blanco);
    border-radius: var(--radio);
    box-shadow: var(--sombra);
    border: 1px solid rgba(30,45,78,0.06);
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

/* ── Tarjetas de estadísticas ── */
.tarjeta-stat {
    background: var(--blanco);
    border-radius: var(--radio);
    box-shadow: var(--sombra);
    border: 1px solid rgba(30,45,78,0.06);
    padding: 1.25rem 1.5rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    transition: transform 0.2s, box-shadow 0.2s;
}
.tarjeta-stat:hover { transform: translateY(-3px); box-shadow: var(--sombra-lg); }

.tarjeta-stat .icono-stat {
    width: 52px;
    height: 52px;
    border-radius: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    flex-shrink: 0;
}

/* ── Tabla estilizada ── */
.tabla-gestor {
    background: var(--blanco);
    border-radius: var(--radio);
    box-shadow: var(--sombra);
    border: 1px solid rgba(30,45,78,0.06);
    overflow: hidden;
}

.tabla-gestor thead th {
    background: var(--navy-800);
    color: rgba(255,255,255,0.9);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    border: none;
    padding: 0.85rem 1rem;
    white-space: nowrap;
}

.tabla-gestor tbody td {
    vertical-align: middle;
    border-color: var(--navy-50);
    padding: 0.75rem 1rem;
}

.tabla-gestor tbody tr:hover {
    background: var(--navy-50);
}

/* ── Botones ── */
.btn-primary {
    background: var(--navy-700) !important;
    border-color: var(--navy-700) !important;
    color: var(--blanco) !important;
}
.btn-primary:hover {
    background: var(--navy-600) !important;
    border-color: var(--navy-600) !important;
}

.btn-outline-primary {
    color: var(--navy-700) !important;
    border-color: var(--navy-700) !important;
}
.btn-outline-primary:hover {
    background: var(--navy-700) !important;
    color: var(--blanco) !important;
}

/* Botón de revelar en tabla */
.btn-revelar-tabla {
    background: none;
    border: 1px solid var(--gris-borde);
    border-radius: 0.4rem;
    color: var(--navy-500);
    padding: 0.2rem 0.55rem;
    font-size: 0.8rem;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}
.btn-revelar-tabla:hover {
    background: var(--navy-50);
    border-color: var(--navy-400);
}

/* ── Badges de sección ── */
.badge-proveedores {
    background: var(--navy-100);
    color: var(--navy-700);
    font-weight: 600;
}
.badge-personal {
    background: #ede9fe;
    color: #5b21b6;
    font-weight: 600;
}

/* ── Flash messages ── */
.alert-success { border-left: 4px solid var(--verde); }
.alert-danger  { border-left: 4px solid var(--rojo); }
.alert-warning { border-left: 4px solid var(--acento); }
.alert-info    { border-left: 4px solid var(--navy-400); }

/* ── Formularios ── */
.form-control:focus,
.form-select:focus {
    border-color: var(--navy-500);
    box-shadow: 0 0 0 3px rgba(30,45,78,0.1);
}

.form-label.fw-semibold {
    color: var(--navy-700);
    font-size: 0.875rem;
}

/* ── Progress bars ── */
.progress { background: var(--navy-50); }

/* ── Monospace (usuarios/contraseñas ocultas) ── */
.font-monospace {
    font-family: 'Cascadia Code', 'Consolas', 'Courier New', monospace;
    font-size: 0.88rem;
}

/* ── Scrollbar personalizada ── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--navy-50); }
::-webkit-scrollbar-thumb { background: var(--navy-300); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--navy-500); }

/* ── Utilidades ── */
.text-navy   { color: var(--navy-700) !important; }
.bg-navy     { background: var(--navy-700) !important; }
.border-navy { border-color: var(--navy-700) !important; }