:root {
    --vp-navy: #2B337E;
    --vp-navy-dark: #1E2459;
    --vp-navy-light: #4750A8;
    --vp-orange: #FF8300;
    --vp-orange-dark: #E67300;
    --vp-bg: #F3F5FB;
    --vp-text: #2A2D3A;
    --vp-border: #E3E6F0;
}

body {
    background-color: var(--vp-bg);
    color: var(--vp-text);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* ---------------------------------------------------------------------
   Navbar
   --------------------------------------------------------------------- */
.navbar.bg-vp {
    background: linear-gradient(90deg, var(--vp-navy) 0%, var(--vp-navy-light) 100%);
}

.navbar.bg-pruebas {
    background: linear-gradient(90deg, #92400E 0%, #F59E0B 100%);
}

.pruebas-banner {
    background: #FEF3C7;
    color: #78350F;
    text-align: center;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    padding: 6px 10px;
}

.navbar-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
}

.navbar-brand img {
    height: 26px;
    background: #fff;
    padding: 4px 8px;
    border-radius: 6px;
}

.nav-link {
    font-weight: 500;
}

.nav-link.active,
.nav-link:hover {
    color: var(--vp-orange) !important;
}

/* ---------------------------------------------------------------------
   Botones y acentos
   --------------------------------------------------------------------- */
.btn-primary {
    background-color: var(--vp-navy);
    border-color: var(--vp-navy);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background-color: var(--vp-navy-dark) !important;
    border-color: var(--vp-navy-dark) !important;
}

.btn-outline-primary {
    color: var(--vp-navy);
    border-color: var(--vp-navy);
}

.btn-outline-primary:hover {
    background-color: var(--vp-navy);
    border-color: var(--vp-navy);
}

.btn-acento {
    background-color: var(--vp-orange);
    border-color: var(--vp-orange);
    color: #fff;
}

.btn-acento:hover {
    background-color: var(--vp-orange-dark);
    border-color: var(--vp-orange-dark);
    color: #fff;
}

a {
    color: var(--vp-navy);
}

a:hover {
    color: var(--vp-orange-dark);
}

.badge.bg-primary {
    background-color: var(--vp-navy) !important;
}

.badge.bg-warning {
    color: #5a3d00 !important;
}

/* ---------------------------------------------------------------------
   Tarjetas y superficies
   --------------------------------------------------------------------- */
.card {
    margin-bottom: 1.5rem;
    border: 1px solid var(--vp-border);
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(43, 51, 126, 0.06);
}

.card-title {
    color: var(--vp-navy);
}

.table thead th {
    color: var(--vp-navy);
    border-bottom-width: 2px;
    background-color: #F8F9FE;
}

/* ---------------------------------------------------------------------
   Login
   --------------------------------------------------------------------- */
body.pagina-auth {
    background:
        linear-gradient(rgba(20, 25, 70, 0.55), rgba(20, 25, 70, 0.55)),
        url('../img/login_fondo.jpg') center center / cover no-repeat;
}

.login-wrapper {
    min-height: calc(100vh - 90px);
    display: flex;
    align-items: center;
    justify-content: center;
}

.login-card {
    max-width: 400px;
    width: 100%;
    border: none;
    border-radius: 16px;
    box-shadow: 0 10px 35px rgba(43, 51, 126, 0.15);
    overflow: hidden;
}

.login-card .login-header {
    background: linear-gradient(135deg, var(--vp-navy) 0%, var(--vp-navy-light) 100%);
    padding: 2rem 2rem 1.25rem;
    text-align: center;
    color: #fff;
}

.login-card .login-header img {
    height: 42px;
    margin-bottom: 12px;
    background: #fff;
    padding: 6px 10px;
    border-radius: 8px;
}

.login-card .login-header p {
    font-size: 0.85rem;
    color: #d7dbf5;
    margin: 6px 0 0;
}

.login-card .card-body {
    padding: 1.75rem 2rem 2rem;
}

.login-card .btn-primary {
    width: 100%;
}

/* ---------------------------------------------------------------------
   Firma
   --------------------------------------------------------------------- */
.firma-canvas {
    border: 1px solid #ccc;
    border-radius: 8px;
    background: #fff;
    touch-action: none;
}

.badge-alerta {
    font-size: 0.85rem;
}