/* ================================
   PALETA DE COLORES INSTITUCIONALES INE
   Inversiones Energéticas S.A. de C.V.
   ================================ */

:root {
    /* COLORES INSTITUCIONALES PRINCIPALES */
    --color-principal: #303945;      /* Azul Oscuro Corporativo (Pantone 174-16U) */
    --color-secundario: #ffffff;     /* Blanco Institucional (Pantone 1-1U) */

    /* COLORES ACCENT RECOMENDADOS */
    --color-accent-azul: #4A90E2;    /* Azul complementario */
    --color-accent-verde: #7CB342;   /* Verde éxito/correcto */
    --color-accent-rojo: #E53935;    /* Rojo error/incorrecto */
    --color-accent-amarillo: #FBC02D; /* Amarillo advertencia */

    /* COLORES NEUTROS */
    --color-gris-claro: #f5f5f5;     /* Gris muy claro */
    --color-gris-medio: #e0e0e0;     /* Gris medio */
    --color-gris-oscuro: #757575;    /* Gris oscuro */
    --color-gris-texto: #333333;     /* Gris para texto */

    /* COLORES DE ESTADO */
    --color-success: #7CB342;        /* Verde éxito */
    --color-error: #E53935;          /* Rojo error */
    --color-warning: #FBC02D;        /* Amarillo advertencia */
    --color-info: #4A90E2;           /* Azul información */
    --color-disabled: #bdbdbd;       /* Gris deshabilitado */

    /* SOMBRAS */
    --shadow-light: 0 2px 4px rgba(48, 57, 69, 0.1);
    --shadow-medium: 0 4px 8px rgba(48, 57, 69, 0.15);
    --shadow-dark: 0 8px 16px rgba(48, 57, 69, 0.2);
}

/* ================================
   ELEMENTOS DE BASE
   ================================ */

body {
    color: var(--color-principal);
    background-color: var(--color-secundario);
}

h1, h2, h3, h4, h5, h6 {
    color: var(--color-principal);
}

a {
    color: var(--color-accent-azul);
}

a:hover {
    color: var(--color-principal);
}

/* ================================
   BOTONES
   ================================ */

button {
    font-weight: 600;
    border-radius: 4px;
    transition: all 0.3s ease;
    cursor: pointer;
}

/* Botón Principal */
button.primary,
.btn-primary,
button[type="submit"] {
    background-color: var(--color-principal);
    color: var(--color-secundario);
    border: 2px solid var(--color-principal);
}

button.primary:hover,
.btn-primary:hover,
button[type="submit"]:hover {
    background-color: var(--color-accent-azul);
    border-color: var(--color-accent-azul);
    box-shadow: var(--shadow-medium);
}

button.primary:active,
.btn-primary:active,
button[type="submit"]:active {
    transform: translateY(1px);
    box-shadow: var(--shadow-light);
}

/* Botón Secundario */
button.secondary,
.btn-secondary {
    background-color: var(--color-gris-claro);
    color: var(--color-principal);
    border: 2px solid var(--color-principal);
}

button.secondary:hover,
.btn-secondary:hover {
    background-color: var(--color-principal);
    color: var(--color-secundario);
}

/* Botones de respuesta */
.answer-btn,
button.answer-btn {
    background-color: var(--color-gris-claro);
    color: var(--color-principal);
    border: 2px solid var(--color-gris-medio);
    padding: 12px 24px;
    font-size: 16px;
    min-width: 100px;
}

.answer-btn:hover,
button.answer-btn:hover {
    background-color: var(--color-principal);
    color: var(--color-secundario);
    border-color: var(--color-principal);
    box-shadow: var(--shadow-medium);
}

.answer-btn.correct {
    background-color: var(--color-success);
    color: var(--color-secundario);
    border-color: var(--color-success);
}

.answer-btn.incorrect {
    background-color: var(--color-error);
    color: var(--color-secundario);
    border-color: var(--color-error);
}

.answer-btn.disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* ================================
   INPUTS Y FORMULARIOS
   ================================ */

input,
select,
textarea {
    border: 2px solid var(--color-gris-medio);
    border-radius: 4px;
    padding: 10px 12px;
    font-size: 14px;
    color: var(--color-principal);
    background-color: var(--color-secundario);
    transition: all 0.3s ease;
}

input:focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: var(--color-accent-azul);
    box-shadow: 0 0 8px rgba(74, 144, 226, 0.3);
    background-color: var(--color-gris-claro);
}

input:disabled,
select:disabled,
textarea:disabled {
    background-color: var(--color-gris-claro);
    color: var(--color-disabled);
    cursor: not-allowed;
}

/* Checkbox */
input[type="checkbox"] {
    accent-color: var(--color-accent-azul);
    cursor: pointer;
}

/* ================================
   HEADERS Y NAVEGACIÓN
   ================================ */

header,
.header,
.navbar {
    background-color: var(--color-principal);
    color: var(--color-secundario);
}

nav a,
.nav-link {
    color: var(--color-secundario);
    text-decoration: none;
    transition: all 0.3s ease;
}

nav a:hover,
.nav-link:hover {
    color: var(--color-accent-azul);
}

/* ================================
   TABS
   ================================ */

.tab-button,
.tab-link {
    background-color: transparent;
    color: var(--color-principal);
    border: none;
    border-bottom: 3px solid transparent;
    padding: 12px 24px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-weight: 600;
}

.tab-button:hover,
.tab-link:hover {
    background-color: var(--color-gris-claro);
    border-bottom-color: var(--color-accent-azul);
}

.tab-button.active,
.tab-link.active {
    color: var(--color-principal);
    border-bottom-color: var(--color-accent-azul);
    background-color: rgba(74, 144, 226, 0.05);
}

/* ================================
   PANELES Y CARDS
   ================================ */

.panel,
.card,
.modal-content {
    background-color: var(--color-secundario);
    border: 1px solid var(--color-gris-medio);
    border-radius: 8px;
    box-shadow: var(--shadow-light);
}

.panel-header,
.card-header {
    background-color: var(--color-principal);
    color: var(--color-secundario);
    padding: 16px;
    border-radius: 8px 8px 0 0;
}

.settings-panel,
#settingsPanel {
    background-color: var(--color-secundario);
    border: 2px solid var(--color-principal);
}

.settings-header {
    background-color: var(--color-principal);
    color: var(--color-secundario);
    padding: 20px;
    border-bottom: 2px solid var(--color-principal);
}

.settings-column {
    background-color: var(--color-gris-claro);
    padding: 16px;
    border-radius: 4px;
    border-left: 4px solid var(--color-accent-azul);
}

/* ================================
   FEEDBACK Y MENSAJES
   ================================ */

.success {
    background-color: rgba(124, 179, 66, 0.1);
    color: var(--color-success);
    border-left: 4px solid var(--color-success);
    padding: 12px;
    border-radius: 4px;
}

.error,
.error-message {
    background-color: rgba(229, 57, 53, 0.1);
    color: var(--color-error);
    border-left: 4px solid var(--color-error);
    padding: 12px;
    border-radius: 4px;
}

.warning {
    background-color: rgba(251, 192, 45, 0.1);
    color: #f57c00;
    border-left: 4px solid var(--color-warning);
    padding: 12px;
    border-radius: 4px;
}

.info {
    background-color: rgba(74, 144, 226, 0.1);
    color: var(--color-info);
    border-left: 4px solid var(--color-info);
    padding: 12px;
    border-radius: 4px;
}

.feedback-message {
    padding: 16px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.feedback-message.correct {
    background-color: rgba(124, 179, 66, 0.15);
    border: 2px solid var(--color-success);
    color: var(--color-success);
}

.feedback-message.incorrect {
    background-color: rgba(229, 57, 53, 0.15);
    border: 2px solid var(--color-error);
    color: var(--color-error);
}

/* ================================
   ANIMACIONES Y EFECTOS
   ================================ */

.trivia-correct {
    /* Sin box-shadow en el elemento - solo animaciones internas */
}

.trivia-incorrect {
    /* Sin box-shadow en el elemento - solo animaciones internas */
}

/* ================================
   ELEMENTOS ESPECIALES
   ================================ */

.status-indicator {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: var(--color-info);
}

.status-indicator.active {
    background-color: var(--color-success);
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

/* Bordes decorativos */
.border-principal {
    border: 2px solid var(--color-principal);
}

.border-accent {
    border: 2px solid var(--color-accent-azul);
}

/* Texto */
.text-principal {
    color: var(--color-principal);
}

.text-secundario {
    color: var(--color-secundario);
}

.text-accent {
    color: var(--color-accent-azul);
}

.text-success {
    color: var(--color-success);
}

.text-error {
    color: var(--color-error);
}

.text-muted {
    color: var(--color-gris-oscuro);
}

/* Fondos */
.bg-principal {
    background-color: var(--color-principal);
    color: var(--color-secundario);
}

.bg-secundario {
    background-color: var(--color-secundario);
    color: var(--color-principal);
}

.bg-accent {
    background-color: var(--color-accent-azul);
    color: var(--color-secundario);
}

.bg-light {
    background-color: var(--color-gris-claro);
    color: var(--color-principal);
}

/* ================================
   RESPONSIVE Y MEDIAQUERY
   ================================ */

@media (max-width: 768px) {
    button {
        padding: 10px 16px;
        font-size: 14px;
    }

    input,
    select,
    textarea {
        font-size: 16px; /* Previene zoom en iOS */
    }

    .tab-button {
        padding: 10px 16px;
    }
}

/* ================================
   ACCESSIBILITY
   ================================ */

/* Focus visible para navegación por teclado */
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible {
    outline: 3px solid var(--color-accent-azul);
    outline-offset: 2px;
}

/* High contrast mode */
@media (prefers-contrast: more) {
    :root {
        --shadow-light: 0 2px 4px rgba(0, 0, 0, 0.3);
        --shadow-medium: 0 4px 8px rgba(0, 0, 0, 0.4);
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}