/* ============================================================
   SINDICATO AZA — base.css
   Variables globales, reset, tipografia, botones y utilidades
   Desarrollado por GoGoDevS
============================================================ */

/* ============================================================
   VARIABLES CSS — PALETA SINDICATO AZA
============================================================ */
:root {
    /* Verde institucional */
    --aza-verde:        #2E7D32;
    --aza-verde-2:      #43A047;
    --aza-verde-claro:  #C8E6C9;

    /* Azul institucional */
    --aza-azul:         #1565C0;
    --aza-azul-2:       #1976D2;

    /* Grises */
    --aza-gris-oscuro:  #263238;
    --aza-gris-medio:   #546E7A;
    --aza-gris-claro:   #ECEFF1;
    --aza-blanco:       #FFFFFF;

    /* Acento naranja */
    --aza-acento:       #FF6F00;

    /* Alias heredados para compatibilidad con main.js (dynamic theming) */
    --aza-primary:           var(--aza-verde);
    --aza-secondary:         var(--aza-gris-oscuro);
    --aza-accent:            var(--aza-acento);
    --aza-light:             var(--aza-gris-claro);
    --aza-border:            #dbe2ea;
    --aza-surface:           var(--aza-blanco);
    --aza-soft:              #f0f7f0;

    /* Variables semanticas — mapeadas al nuevo sistema */
    --color-primary:         var(--aza-verde);
    --color-secondary:       var(--aza-gris-oscuro);
    --color-accent:          var(--aza-acento);
    --color-muted-bg:        var(--aza-gris-claro);
    --color-bg-soft:         var(--aza-gris-claro);
    --color-text:            var(--aza-gris-oscuro);
    --color-border:          #dbe2ea;
    --color-dark-surface:    var(--aza-azul);
    --color-dark-surface-2:  var(--aza-verde);

    /* Tipografia */
    --font-titulo: 'Montserrat', 'Segoe UI', sans-serif;
    --font-cuerpo: 'Open Sans', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

    /* Tokens de diseno */
    --transition: 0.22s ease;
    --radius:     0.75rem;
}

/* ============================================================
   HTML Y BODY
============================================================ */
html {
    min-height: 100%;
    scroll-behavior: smooth;
}

body {
    min-height: 100vh;
    font-family: var(--font-cuerpo);
    color: var(--aza-gris-oscuro);
    background-color: var(--aza-blanco);
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* Seleccion de texto en verde suave */
::selection {
    background-color: var(--aza-verde-claro);
    color: var(--aza-verde);
}

/* Scrollbar discreto — sin barra lateral visible en capturas */
::-webkit-scrollbar             { width: 5px; }
::-webkit-scrollbar-track       { background: transparent; }
::-webkit-scrollbar-thumb       { background: rgba(84, 110, 122, 0.30); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: rgba(46, 125, 50, 0.55); }

main       { display: block; }
.site-main { overflow: hidden; }

/* Titulos con Montserrat */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-titulo);
    font-weight: 700;
}

/* ============================================================
   ESPACIO Y LAYOUT
============================================================ */
.py-lg-6 {
    padding-top: 6rem !important;
    padding-bottom: 6rem !important;
}
.container { --bs-gutter-x: 1.5rem; }

/* ============================================================
   LINKS
============================================================ */
a {
    color: var(--aza-azul);
    transition: color var(--transition);
}
a:hover { color: var(--aza-verde); }

.text-primary-soft { color: rgba(21, 101, 192, 0.72); }

/* ============================================================
   BOTONES — BOOTSTRAP OVERRIDES
============================================================ */
.btn-primary {
    --bs-btn-bg:                  var(--aza-verde);
    --bs-btn-border-color:        var(--aza-verde);
    --bs-btn-hover-bg:            var(--aza-verde-2);
    --bs-btn-hover-border-color:  var(--aza-verde-2);
    --bs-btn-active-bg:           #1B5E20;
    --bs-btn-active-border-color: #1B5E20;
    font-family: var(--font-titulo);
    font-weight: 600;
}

.btn-outline-primary {
    --bs-btn-color:               var(--aza-verde);
    --bs-btn-border-color:        var(--aza-verde);
    --bs-btn-hover-bg:            var(--aza-verde);
    --bs-btn-hover-border-color:  var(--aza-verde);
    --bs-btn-active-bg:           var(--aza-verde);
    --bs-btn-active-border-color: var(--aza-verde);
    font-family: var(--font-titulo);
    font-weight: 600;
}

.btn-accent {
    --bs-btn-color:               var(--aza-blanco);
    --bs-btn-bg:                  var(--aza-acento);
    --bs-btn-border-color:        var(--aza-acento);
    --bs-btn-hover-color:         var(--aza-blanco);
    --bs-btn-hover-bg:            #E65100;
    --bs-btn-hover-border-color:  #E65100;
    --bs-btn-active-color:        var(--aza-blanco);
    --bs-btn-active-bg:           #BF360C;
    --bs-btn-active-border-color: #BF360C;
    font-family: var(--font-titulo);
    font-weight: 700;
}

.btn-lg {
    --bs-btn-padding-y:     0.9rem;
    --bs-btn-padding-x:     1.35rem;
    --bs-btn-font-size:     1rem;
    --bs-btn-border-radius: 0.9rem;
}

/* ============================================================
   BOTONES PROPIOS AZA
============================================================ */
.btn-aza-primary {
    background-color: var(--aza-verde);
    color: var(--aza-blanco);
    border: 2px solid var(--aza-verde);
    font-family: var(--font-titulo);
    font-weight: 600;
    border-radius: var(--radius);
    padding: 0.6rem 1.5rem;
    transition: all var(--transition);
    text-decoration: none;
    display: inline-block;
}
.btn-aza-primary:hover {
    background-color: #1B5E20;
    border-color: #1B5E20;
    color: var(--aza-blanco);
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(46, 125, 50, 0.3);
}

.btn-aza-secondary {
    background-color: var(--aza-azul);
    color: var(--aza-blanco);
    border: 2px solid var(--aza-azul);
    font-family: var(--font-titulo);
    font-weight: 600;
    border-radius: var(--radius);
    padding: 0.6rem 1.5rem;
    transition: all var(--transition);
    text-decoration: none;
    display: inline-block;
}
.btn-aza-secondary:hover {
    background-color: var(--aza-azul-2);
    border-color: var(--aza-azul-2);
    color: var(--aza-blanco);
    transform: translateY(-2px);
}

.btn-aza-outline {
    background-color: transparent;
    color: var(--aza-verde);
    border: 2px solid var(--aza-verde);
    font-family: var(--font-titulo);
    font-weight: 600;
    border-radius: var(--radius);
    padding: 0.6rem 1.5rem;
    transition: all var(--transition);
    text-decoration: none;
    display: inline-block;
}
.btn-aza-outline:hover {
    background-color: var(--aza-verde);
    color: var(--aza-blanco);
    transform: translateY(-2px);
}

.btn-aza-accent {
    background-color: var(--aza-acento);
    color: var(--aza-blanco);
    border: 2px solid var(--aza-acento);
    font-family: var(--font-titulo);
    font-weight: 700;
    border-radius: var(--radius);
    padding: 0.6rem 1.5rem;
    transition: all var(--transition);
    text-decoration: none;
    display: inline-block;
}
.btn-aza-accent:hover {
    background-color: #E65100;
    border-color: #E65100;
    color: var(--aza-blanco);
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(255, 111, 0, 0.35);
}

/* ============================================================
   BADGES AZA
============================================================ */
.badge-aza {
    background-color: var(--aza-verde-claro);
    color: var(--aza-verde);
    font-family: var(--font-titulo);
    font-weight: 600;
    font-size: 0.75rem;
    padding: 0.35em 0.75em;
    border-radius: 50px;
}

.badge-nuevo {
    background-color: var(--aza-acento);
    color: var(--aza-blanco);
    font-family: var(--font-titulo);
    font-weight: 700;
    font-size: 0.75rem;
    padding: 0.35em 0.75em;
    border-radius: 50px;
}

.badge-destacado {
    background-color: var(--aza-azul);
    color: var(--aza-blanco);
    font-family: var(--font-titulo);
    font-weight: 700;
    font-size: 0.75rem;
    padding: 0.35em 0.75em;
    border-radius: 50px;
}

/* ============================================================
   UTILIDADES DE COLOR
============================================================ */
.text-aza-verde { color: var(--aza-verde)       !important; }
.text-aza-azul  { color: var(--aza-azul)         !important; }
.text-aza-gris  { color: var(--aza-gris-medio)   !important; }

.bg-aza-verde   { background-color: var(--aza-verde)       !important; }
.bg-aza-suave   { background-color: var(--aza-verde-claro) !important; }
.bg-aza-gris    { background-color: var(--aza-gris-claro)  !important; }

/* ============================================================
   SECCIONES
============================================================ */
.section-aza { padding: 5rem 0; }

.section-heading { margin-bottom: 1rem; }

.section-eyebrow {
    display: inline-block;
    margin-bottom: 0.75rem;
    color: var(--aza-verde);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-family: var(--font-titulo);
}

.hero-eyebrow { color: rgba(255, 255, 255, 0.82); }

/* ============================================================
   NAVBAR LOGO
============================================================ */
.navbar-logo-container {
    display: flex;
    align-items: center;
    gap: 10px;
}

.navbar-logo-container img {
    height: 44px;
    width: auto;
}

.navbar-logo-text {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
}

.logo-text-sindicato {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #546E7A;
}

.logo-text-aza {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.4rem;
    font-weight: 800;
    color: #2E7D32;
    letter-spacing: 0.02em;
}

/* Accesibilidad: focus visible en todos los elementos interactivos */
:focus-visible {
    outline: 3px solid var(--aza-verde);
    outline-offset: 2px;
    border-radius: 4px;
}