:root {
    --azul: #004bb3;
    --azul-oscuro: #003585;
    --naranja: #fe7e11;
    --naranja-oscuro: #e06c00;
    --gris-texto: #3c4451;
    --gris-fondo: #f4f6fa;
    --borde: #e3e7ee;
}

html, body { height: 100%; }
body {
    background: var(--gris-fondo);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    color: var(--gris-texto);
}
.main-content { flex: 1 0 auto; }

h1, h2, h3, h4, h5, h6 { font-weight: 600; color: #1c2536; }

/* ---------- Barra de navegación ---------- */
.app-navbar {
    background: #fff;
    box-shadow: 0 2px 10px rgba(20, 30, 60, .06);
    padding-top: .6rem;
    padding-bottom: .6rem;
}
.app-navbar .nav-link {
    color: var(--gris-texto);
    font-weight: 500;
    padding: .5rem .9rem !important;
    border-radius: 8px;
    transition: background .15s, color .15s;
}
.app-navbar .nav-link:hover,
.app-navbar .nav-link.active {
    background: #eef3fc;
    color: var(--azul);
}
.nav-usuario { color: #8891a0; font-size: .85rem; margin-right: .25rem; }
.btn-outline-salir {
    border: 1px solid var(--borde);
    color: var(--gris-texto);
    background: #fff;
}
.btn-outline-salir:hover { border-color: var(--azul); color: var(--azul); }

/* ---------- Botones ---------- */
.btn-primary {
    background-color: var(--azul);
    border-color: var(--azul);
}
.btn-primary:hover, .btn-primary:focus {
    background-color: var(--azul-oscuro);
    border-color: var(--azul-oscuro);
}
.btn-success { background-color: #1a8f4c; border-color: #1a8f4c; }
.btn-success:hover { background-color: #157a40; border-color: #157a40; }
a { color: var(--azul); }

/* ---------- Tarjetas ---------- */
.card {
    border: 1px solid var(--borde);
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(20, 30, 60, .05);
}
.card .display-6 { color: var(--azul); font-weight: 700; }

/* ---------- Login ---------- */
.login-container {
    max-width: 420px;
    margin: 70px auto;
    background: #fff;
    padding: 40px 36px;
    border-radius: 16px;
    box-shadow: 0 10px 35px rgba(20, 30, 60, .1);
    text-align: center;
}
.login-container .login-logo { max-width: 230px; margin-bottom: 24px; }
.login-container h2 { font-size: 1.3rem; margin-bottom: 22px; }
.login-form { text-align: left; }
.login-form label { margin-top: 12px; display: block; font-size: .85rem; font-weight: 500; color: #5b6472; }
.login-form input {
    width: 100%; padding: 10px 12px; margin-top: 5px;
    border: 1px solid var(--borde); border-radius: 8px;
    font-size: .95rem;
}
.login-form input:focus { outline: none; border-color: var(--azul); box-shadow: 0 0 0 3px rgba(0,75,179,.12); }
.login-form button {
    margin-top: 22px; width: 100%; padding: 10px;
    background: var(--azul); border: none; border-radius: 8px;
    font-weight: 600;
}
.login-form button:hover { background: var(--azul-oscuro); }
.error-msg { background:#fdecea; color:#b3261e; padding:10px 14px; border-radius:8px; margin-bottom:16px; font-size:.9rem; text-align:left; }

/* ---------- Tablas de administración ---------- */
.table-compact { font-size: .85rem; }
.table-compact th, .table-compact td { padding: .5rem .6rem; vertical-align: middle; }
.table thead.table-dark th { background: var(--azul-oscuro); border-color: var(--azul-oscuro); }
.acciones-cell { white-space: nowrap; }
.acciones-cell .btn, .acciones-cell a.btn { padding: .2rem .5rem; font-size: .78rem; }

.bg-orange { background-color: var(--naranja); }

/* ---------- Pie de página ---------- */
footer { flex-shrink: 0; background: #fff !important; border-top: 1px solid var(--borde); color: #8891a0; font-size: .85rem; }