/* =====================================================================
   SICE PRO — Tema basado en la insignia del CETPRO Contamana
   Paleta: azul marino (escudo), dorado (engranaje/cinta),
           rojo (franja), amarillo (borde), azul brillante (engranaje)
   ===================================================================== */
:root {
    --sice-primary: #1B2A6B;       /* azul marino del escudo */
    --sice-primary-dark: #131F52;  /* azul marino más oscuro (hover) */
    --sice-blue: #1667C4;          /* azul brillante del engranaje */
    --sice-gold: #F4A62A;          /* dorado del engranaje y la cinta */
    --sice-accent: #E23B3B;        /* rojo de la franja superior */
    --sice-yellow: #FFD400;        /* amarillo del borde */
    --sice-card-bg: #FFF9EC;       /* crema para el fondo de las tarjetas */
}

body {
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* ---- Autenticación (login) ---- */
.auth-body {
    background: linear-gradient(135deg, var(--sice-primary) 0%, var(--sice-blue) 100%);
}

.auth-card {
    border-radius: 1rem;
    border-top: 5px solid var(--sice-gold);
}

.auth-logo {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--sice-primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    border: 3px solid var(--sice-gold);
}

/* ---- Botón principal ---- */
.btn-sice {
    background-color: var(--sice-primary);
    border-color: var(--sice-primary);
    color: #fff;
}

.btn-sice:hover,
.btn-sice:focus {
    background-color: var(--sice-primary-dark);
    border-color: var(--sice-primary-dark);
    color: #fff;
}

/* ---- Navbar / menú superior ---- */
.sice-navbar {
    background-color: var(--sice-primary);
    border-bottom: 4px solid var(--sice-gold);   /* franja dorada del escudo */
}

/* ---- Tarjetas de módulo (opciones del dashboard) ---- */
.modulo-card {
    background-color: var(--sice-card-bg);
    border-top: 4px solid var(--sice-gold) !important;   /* acento dorado */
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    border-radius: 0.85rem;
}

.modulo-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 0.5rem 1.25rem rgba(27, 42, 107, 0.22) !important;
}

.modulo-icon {
    font-size: 2.2rem;
    color: var(--sice-primary);
    display: block;
}