/* ================================
   SENARM - Estilos Globales
   Tema: Área Blanca, minimalista
   ================================ */

/* -------------------------------
   Colores principales
--------------------------------- */
:root {
    --senarm-primary: #0DB7C4; /* turquesa principal */
    --senarm-primary-dark: #0ca1ac; /* turquesa oscuro */
    --senarm-green: #28a745; /* verde secundario (no para logo) */
    --senarm-bg: #ffffff;
    --senarm-light: #f9f9f9;
    --senarm-text: #333333;
}

/* -------------------------------
   Base
--------------------------------- */
body {
    font-family: "Montserrat", Arial, sans-serif;
    background-color: var(--senarm-light);
    color: var(--senarm-text);
    margin: 0;
    padding: 0;
}

/* -------------------------------
   Navbar
--------------------------------- */
.navbar-senarm {
    background-color: var(--senarm-bg);
    border-bottom: 1px solid #eee;
    box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}

    .navbar-senarm .navbar-brand {
        font-family: 'Orbitron', sans-serif;
        font-weight: 700;
        font-size: 1.8rem;
        color: var(--senarm-primary) !important; /* turquesa */
        letter-spacing: 0.5px;
    }

    .navbar-senarm .nav-link {
        color: var(--senarm-text) !important;
        transition: color 0.2s ease;
    }

        .navbar-senarm .nav-link:hover {
            color: var(--senarm-primary) !important;
        }

/* -------------------------------
   Cards
--------------------------------- */
.card {
    border: none;
    border-radius: 1rem;
    box-shadow: 0 4px 12px rgba(0,0,0,0.06);
    background-color: var(--senarm-bg);
}

    /* Títulos en tarjetas */
    .card h3, .card h4 {
        color: var(--senarm-primary) !important; /* Turquesa institucional */
    }

/* -------------------------------
   Botones
--------------------------------- */
.btn-senarm {
    background-color: var(--senarm-primary) !important;
    border-color: var(--senarm-primary) !important;
    color: #fff !important;
    border-radius: 0.75rem;
    transition: background-color 0.3s ease, transform 0.1s ease;
}

    .btn-senarm:hover,
    .btn-senarm:focus {
        background-color: var(--senarm-primary-dark) !important;
        border-color: var(--senarm-primary-dark) !important;
        color: #fff !important;
        transform: translateY(-1px);
    }

/* Sobrescribir botones Bootstrap */
.btn-primary,
.btn-success,
.btn-warning,
.btn-danger {
    background-color: var(--senarm-primary) !important;
    border-color: var(--senarm-primary) !important;
    color: #fff !important;
    border-radius: 0.75rem;
}

    .btn-primary:hover,
    .btn-success:hover,
    .btn-warning:hover,
    .btn-danger:hover {
        background-color: var(--senarm-primary-dark) !important;
        border-color: var(--senarm-primary-dark) !important;
        color: #fff !important;
    }

/* -------------------------------
   Formularios
--------------------------------- */
.form-control {
    border-radius: 0.75rem;
    border: 1px solid #ddd;
    padding: 0.75rem;
    transition: border-color 0.2s;
}

    .form-control:focus {
        border-color: var(--senarm-primary);
        box-shadow: 0 0 0 0.2rem rgba(13, 183, 196, 0.25);
    }

/* -------------------------------
   Branding SENARM
--------------------------------- */
.logo-senarm {
    font-family: 'Orbitron', sans-serif;
    font-weight: 700;
    font-size: 2rem;
    color: var(--senarm-primary) !important; /* siempre turquesa */
    letter-spacing: 1px;
    text-align: center;
    margin-bottom: 20px;
}

/* -------------------------------
   Estilo general de enlaces
--------------------------------- */
a {
    color: var(--senarm-primary);
    text-decoration: none; /* sin subrayado */
    transition: color 0.2s ease;
}

    a:hover {
        color: var(--senarm-primary-dark); /* tono más oscuro al pasar el mouse */
        text-decoration: none; /* evita subrayado */
    }

/* -------------------------------
   Dropdowns en navbar
--------------------------------- */
.dropdown-menu {
    border-radius: 0.75rem;
    border: 1px solid #eee;
    box-shadow: 0 4px 10px rgba(0,0,0,0.08);
}

.dropdown-item {
    font-family: "Montserrat", Arial, sans-serif;
    color: var(--senarm-text);
    padding: 0.6rem 1.2rem;
    text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease;
}

    .dropdown-item:hover {
        background-color: var(--senarm-primary); /* fondo turquesa */
        color: #fff; /* texto blanco */
        text-decoration: none;
        border-radius: 0.5rem;
    }
    /* -------------------------------
   Estado activo en navbar y dropdowns
--------------------------------- */
    .navbar-senarm .nav-link.active,
    .navbar-senarm .nav-link.show,
    .dropdown-item.active {
        color: #fff !important;
        background-color: var(--senarm-primary) !important;
        border-radius: 0.5rem;
    }
.nav-preguntas {
    position: sticky;
    top: 70px; /* debajo de la navbar */
    background: #fff;
    z-index: 1020;
    padding: 10px 0;
    border-bottom: 1px solid #eee;
}
/* Ocultar scrollbar en navegadores modernos */
#scrollPanel {
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE y Edge */
}

    #scrollPanel::-webkit-scrollbar {
        display: none; /* Chrome, Safari, Opera */
    }
.opcion-respuesta {
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 10px 15px;
    margin-bottom: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
}

    .opcion-respuesta input[type="radio"] {
        display: none; /* ocultamos el radio original */
    }

    .opcion-respuesta:hover {
        background-color: #f5fefe;
        border-color: #0DB7C4;
    }

    .opcion-respuesta input[type="radio"]:checked + span {
        background-color: #e6f9fb;
        border: 2px solid #0DB7C4;
        color: #0DB7C4;
        font-weight: 600;
        border-radius: 8px;
        padding: 8px 12px;
        display: inline-block;
        width: 100%;
    }
/* Opciones de respuesta estilo tarjeta */
.opcion-respuesta {
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 10px 15px;
    margin-bottom: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: block;
}

    .opcion-respuesta input[type="radio"] {
        display: none; /* Ocultamos el radio original */
    }

    .opcion-respuesta:hover {
        background-color: #f5fefe;
        border-color: #0DB7C4;
    }

    /* Cuando está seleccionado */
    .opcion-respuesta input[type="radio"]:checked + span {
        background-color: #e6f9fb;
        border: 2px solid #0DB7C4;
        color: #0DB7C4;
        font-weight: 600;
        border-radius: 8px;
        padding: 8px 12px;
        display: block;
    }