/* ==========================================================================
   02/10 13:25 - Sistema Maestro de Botones Unificados MGM_V8
   Ruta en PC: D:\Antigravity\Aplicacion_Socio_Electoral_jul_23\MGM_V8\static\css\botones_sistema.css
   Directiva: Manuel (02-10-26 Trabajos de Antigravity y Claude aplicación Electoral)
   
   Clasificación en 4 categorías:
   1. Módulos (.btn-sistema-modulo): Azul, Rectangular.
   2. Exportación (.btn-sistema-exportar): Verde, Rectangular.
   3. Informativos (.btn-sistema-info): Morado, Bordes Redondeados.
   4. Acción / Movimiento (.btn-sistema-accion): Amarillo Ocre, Bordes Redondeados.
   ========================================================================== */

/* --------------------------------------------------------------------------
   ESTILOS BASE COMUNES (Homogeneidad, Simetría y Tipografía)
   -------------------------------------------------------------------------- */
.btn-sistema {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 38px;
    min-height: 38px;
    padding: 0 16px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
    transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
    border-width: 1px;
    border-style: solid;
    outline: none;
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
}

.btn-sistema:disabled,
.btn-sistema.disabled {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
    box-shadow: none !important;
    filter: grayscale(40%);
}

.btn-sistema svg,
.btn-sistema i,
.btn-sistema .btn-icono {
    font-size: 15px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* --------------------------------------------------------------------------
   1. APERTURA DE MÓDULOS (SCE, IPSE, Visor Cartográfico, Callejero, IA)
   Forma: Rectangular (radio 4px)
   Color: Azul Zafiro / Cobalto con Iluminación Azul Eléctrico
   -------------------------------------------------------------------------- */
.btn-sistema-modulo {
    border-radius: 4px; /* Rectangular */
    background: linear-gradient(180deg, #1e40af 0%, #1d4ed8 100%);
    border-color: #3b82f6;
    color: #ffffff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.btn-sistema-modulo:hover,
.btn-sistema-modulo:focus-visible {
    background: linear-gradient(180deg, #2563eb 0%, #1e40af 100%);
    border-color: #60a5fa;
    color: #ffffff;
    box-shadow: 0 0 14px rgba(59, 130, 246, 0.65), 0 2px 8px rgba(0, 0, 0, 0.35);
    transform: translateY(-1px);
}

.btn-sistema-modulo:active,
.btn-sistema-modulo.activo,
.btn-sistema-modulo[aria-pressed="true"] {
    background: #1e3a8a;
    border-color: #93c5fd;
    box-shadow: 0 0 18px rgba(96, 165, 250, 0.85), inset 0 2px 4px rgba(0, 0, 0, 0.3);
    transform: translateY(0);
}

/* --------------------------------------------------------------------------
   2. EXPORTACIÓN (Excel, PDF, Imprimir)
   Forma: Rectangular (radio 4px)
   Color: Verde Esmeralda con Iluminación Verde Lima
   -------------------------------------------------------------------------- */
.btn-sistema-exportar {
    border-radius: 4px; /* Rectangular */
    background: linear-gradient(180deg, #15803d 0%, #166534 100%);
    border-color: #22c55e;
    color: #ffffff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.btn-sistema-exportar:hover,
.btn-sistema-exportar:focus-visible {
    background: linear-gradient(180deg, #16a34a 0%, #15803d 100%);
    border-color: #4ade80;
    color: #ffffff;
    box-shadow: 0 0 14px rgba(34, 197, 94, 0.65), 0 2px 8px rgba(0, 0, 0, 0.35);
    transform: translateY(-1px);
}

.btn-sistema-exportar:active,
.btn-sistema-exportar.activo {
    background: #14532d;
    border-color: #86efac;
    box-shadow: 0 0 18px rgba(74, 222, 128, 0.85), inset 0 2px 4px rgba(0, 0, 0, 0.3);
    transform: translateY(0);
}

/* --------------------------------------------------------------------------
   3. BOTONES INFORMATIVOS (Glosario, Leyendas, Información, Ayuda)
   Forma: Redondeada (radio 20px)
   Color: Morado Intenso con Iluminación Amatista
   -------------------------------------------------------------------------- */
.btn-sistema-info {
    border-radius: 20px; /* Bordes Redondeados */
    background: linear-gradient(180deg, #6d28d9 0%, #5b21b6 100%);
    border-color: #8b5cf6;
    color: #ffffff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.btn-sistema-info:hover,
.btn-sistema-info:focus-visible {
    background: linear-gradient(180deg, #7c3aed 0%, #6d28d9 100%);
    border-color: #a78bfa;
    color: #ffffff;
    box-shadow: 0 0 14px rgba(168, 85, 247, 0.65), 0 2px 8px rgba(0, 0, 0, 0.35);
    transform: translateY(-1px);
}

.btn-sistema-info:active,
.btn-sistema-info.activo {
    background: #4c1d95;
    border-color: #c4b5fd;
    box-shadow: 0 0 18px rgba(192, 132, 252, 0.85), inset 0 2px 4px rgba(0, 0, 0, 0.3);
    transform: translateY(0);
}

/* --------------------------------------------------------------------------
   4. ACCIÓN Y MOVIMIENTO (Escuchar 🔊, Micro IA 🎙️, Aplicar consulta, Movimiento)
   Forma: Redondeada (radio 20px)
   Color: Amarillo Ocre Cálido con Iluminación Ámbar / Dorada
   -------------------------------------------------------------------------- */
.btn-sistema-accion {
    border-radius: 20px; /* Bordes Redondeados */
    background: linear-gradient(180deg, #d97706 0%, #b45309 100%);
    border-color: #f59e0b;
    color: #ffffff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

.btn-sistema-accion:hover,
.btn-sistema-accion:focus-visible {
    background: linear-gradient(180deg, #ea580c 0%, #c2410c 100%), linear-gradient(180deg, #f59e0b 0%, #d97706 100%);
    border-color: #fbbf24;
    color: #ffffff;
    box-shadow: 0 0 15px rgba(245, 158, 11, 0.75), 0 2px 8px rgba(0, 0, 0, 0.35);
    transform: translateY(-1px);
}

.btn-sistema-accion:active,
.btn-sistema-accion.activo,
.btn-sistema-accion.leyendo {
    background: #92400e;
    border-color: #fde68a;
    box-shadow: 0 0 20px rgba(251, 191, 36, 0.9), inset 0 2px 4px rgba(0, 0, 0, 0.35);
    transform: translateY(0);
}

/* Variante especial para cuando está en reproducción continua de voz */
.btn-sistema-accion.leyendo {
    animation: pulso-ocre-sistema 1.8s infinite ease-in-out;
}

@keyframes pulso-ocre-sistema {
    0% {
        box-shadow: 0 0 8px rgba(245, 158, 11, 0.6);
        border-color: #f59e0b;
    }
    50% {
        box-shadow: 0 0 22px rgba(251, 191, 36, 0.95);
        border-color: #fef08a;
    }
    100% {
        box-shadow: 0 0 8px rgba(245, 158, 11, 0.6);
        border-color: #f59e0b;
    }
}

/* --------------------------------------------------------------------------
   ADAPTACIÓN PARA BARRAS LATERALES Y POPUPS (Texto completo sin recortes)
   -------------------------------------------------------------------------- */
.panel-lateral-derecho .btn-sistema,
.caja-global-ipse .btn-sistema,
.leaflet-popup-content .btn-sistema {
    white-space: normal !important;
    text-align: center;
    height: auto;
    min-height: 36px;
    padding: 7px 10px;
    font-size: 11.5px;
    line-height: 1.25;
}

/* --------------------------------------------------------------------------
   5. REMARCADO ROJO DE FOCO DE ACCIÓN (Directiva Manuel - Mejora Visual V8)
   Cuando un botón, pestaña o selector toma el foco de la acción, cambia su
   borde y halo a ROJO INTENSO (#ef4444) en lugar de azul fuerte.
   -------------------------------------------------------------------------- */
.btn-sistema:focus-visible,
.btn-sistema:active,
.btn-sistema.activo,
.btn-toggle:focus-visible,
.btn-toggle:active,
.navegacion-superior span.active,
.boton-menu.activa,
.tab-btn.active,
.elemento-foco-rojo-directo,
.foco-accion-rojo {
    border-color: #ef4444 !important;
    outline: 3px solid #ef4444 !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.35), 0 0 22px rgba(239, 68, 68, 0.85) !important;
}