/* ============================================================
   ACADEMIA SIBEMAR — BASE
   Variables, reset, tipografía, utilidades
   ============================================================ */

:root {
    /* Medidas de layout */
    --sidebar-w: 250px;
    --topbar-h: 64px;
    --max-contenido: 1400px;

    /* Colores SIBEMAR */
    --fondo: #f4f6f9;
    --card: #ffffff;
    --borde: #e2e6ec;
    --texto: #1f2733;
    --texto-suave: #6b7280;
    --texto-tenue: #9aa3b0;

    --azul: #1e5fa8;
    --azul-osc: #143a66;
    --azul-claro: #eff6ff;
    --verde: #10b981;
    --naranja: #f59e0b;
    --morado: #8b5cf6;
    --rojo: #ef4444;

    /* Estados */
    --verde-bg: #ecfdf5;
    --verde-texto: #065f46;
    --naranja-bg: #fef3c7;
    --naranja-texto: #92400e;
    --rojo-bg: #fef2f2;
    --rojo-texto: #991b1b;

    /* Sombras */
    --sombra: 0 2px 8px rgba(11, 31, 58, 0.06);
    --sombra-hover: 0 8px 20px rgba(11, 31, 58, 0.08);
    --sombra-fuerte: 0 10px 30px rgba(11, 31, 58, 0.15);

    /* Radios */
    --radio-sm: 6px;
    --radio: 10px;
    --radio-lg: 14px;
    --radio-full: 999px;

    /* Tipografía */
    --fuente: 'Poppins', sans-serif;

    /* Transiciones */
    --transicion: 0.2s ease;
}

/* ---------- Reset ---------- */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--fuente);
    color: var(--texto);
    background: var(--fondo);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    min-height: 100vh;
}

img,
video {
    max-width: 100%;
    display: block;
}

a {
    color: var(--azul);
    text-decoration: none;
    transition: color var(--transicion);
}

a:hover {
    color: var(--azul-osc);
}

button {
    font-family: inherit;
    cursor: pointer;
    border: none;
    background: none;
}

input,
select,
textarea {
    font-family: inherit;
    font-size: inherit;
}

ul,
ol {
    list-style: none;
}

/* ---------- Utilidades ---------- */
.contenedor {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.texto-centro {
    text-align: center;
}

.texto-derecha {
    text-align: right;
}

.texto-suave {
    color: var(--texto-suave);
}

.texto-tenue {
    color: var(--texto-tenue);
}

.mt-0 {
    margin-top: 0;
}

.mt-1 {
    margin-top: 8px;
}

.mt-2 {
    margin-top: 16px;
}

.mt-3 {
    margin-top: 24px;
}

.mt-4 {
    margin-top: 32px;
}

.mb-0 {
    margin-bottom: 0;
}

.mb-1 {
    margin-bottom: 8px;
}

.mb-2 {
    margin-bottom: 16px;
}

.mb-3 {
    margin-bottom: 24px;
}

.mb-4 {
    margin-bottom: 32px;
}

.oculto {
    display: none !important;
}

/* ---------- Scrollbar sutil ---------- */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: var(--fondo);
}

::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: var(--radio-full);
    border: 2px solid var(--fondo);
}

::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

/* ---------- Animaciones ---------- */
@keyframes aparecer {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}