:root {
    --bokko-navy: #16283A;
    --bokko-navy-oscuro: #0F1E2C;
    --bokko-navy-suave: #22384E;
    --bokko-teal: #14C9A6;
    --bokko-teal-hover: #0FAE8F;
    --bokko-teal-suave: #CFF7EC;
    --bokko-fondo: #F4F6F7;
    --bokko-borde: #E2E8EA;
    --bokko-texto: #16283A;
    --bokko-texto-suave: #5B6B76;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
    background: var(--bokko-fondo);
    color: var(--bokko-texto);
}

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: #C7D1D5; border-radius: 8px; }
::-webkit-scrollbar-track { background: transparent; }

.bokko-tarjeta {
    background: #fff;
    border: 1px solid var(--bokko-borde);
    border-radius: 14px;
}

.bokko-boton-primario {
    background: var(--bokko-teal);
    color: var(--bokko-navy-oscuro);
    font-weight: 600;
    transition: background .15s ease;
}
.bokko-boton-primario:hover { background: var(--bokko-teal-hover); color: var(--bokko-navy-oscuro); }

.bokko-boton-secundario {
    background: transparent;
    color: var(--bokko-navy);
    border: 1px solid var(--bokko-borde);
    transition: border-color .15s ease, background .15s ease;
}
.bokko-boton-secundario:hover { background: var(--bokko-fondo); border-color: #C7D1D5; }

.bokko-input {
    border: 1px solid var(--bokko-borde);
    border-radius: 10px;
    padding: .6rem .85rem;
    background: #fff;
    color: var(--bokko-texto);
}
.bokko-input:focus {
    outline: none;
    border-color: var(--bokko-teal);
    box-shadow: 0 0 0 3px var(--bokko-teal-suave);
}

.bokko-badge {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .2rem .65rem;
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 600;
}
.bokko-badge-pendiente { background: #FFF4DE; color: #A6690B; }
.bokko-badge-pendiente_administrador { background: #EAE4FB; color: #5B3FA6; }
.bokko-badge-aprobado { background: var(--bokko-teal-suave); color: #0B7A63; }
.bokko-badge-rechazado { background: #FDE2E1; color: #B4231F; }
.bokko-badge-pagado { background: #E4ECFB; color: #2A4FA0; }
.bokko-badge-activo { background: var(--bokko-teal-suave); color: #0B7A63; }
.bokko-badge-cerrado { background: #EEF1F2; color: var(--bokko-texto-suave); }
.bokko-badge-borrador { background: #EEF1F2; color: var(--bokko-texto-suave); }
.bokko-badge-suspendido { background: #FDE2E1; color: #B4231F; }

.bokko-sidebar-link {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .55rem .9rem;
    border-radius: 10px;
    color: #C6D2D9;
    font-size: .9rem;
    font-weight: 500;
    transition: background .15s ease, color .15s ease;
}
.bokko-sidebar-link:hover { background: rgba(255,255,255,.06); color: #fff; }
.bokko-sidebar-link.activo { background: var(--bokko-teal); color: var(--bokko-navy-oscuro); }

.bokko-sidebar-titulo {
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: .68rem;
    color: #7E93A1;
    padding: 1rem .9rem .35rem;
    font-weight: 700;
}

.bokko-glow-fondo {
    background: radial-gradient(60% 60% at 75% 15%, rgba(20,201,166,.25), transparent 60%),
                radial-gradient(50% 50% at 10% 90%, rgba(20,201,166,.12), transparent 60%),
                var(--bokko-navy-oscuro);
}