:root {
  --rojo: #DD3300;
  --arena: #F1F1E9;
  --azul: #033266;
  --grafito: #2E2E2E;
  --negro: #000000;
}

/* Tipografía */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&family=Montserrat:wght@600;800&display=swap');

html,
body {
  font-family: 'Roboto', system-ui, -apple-system, Segoe UI, Helvetica, Arial, sans-serif;
  background: #ffffff;
  color: var(--grafito);
}

/* NAVBAR: sólido azul */
.navbar {
  background: var(--azul);
}

.navbar .navbar-brand,
.navbar .nav-link {
  color: #fff !important
}

.navbar .nav-link:hover {
  opacity: .9
}

/* HERO: bloque azul oscuro sin degradados */
.hero {
  background: var(--azul);
  color: #fff;
  padding: 3.5rem 0;
}

.hero h1,
.hero .lead {
  margin: 0
}

/* KPIs: tarjetas claras sin cajas blancas superpuestas */
.kpi {
  background: #0f2a57;
  color: #e6eefc;
  border: 1px solid #22457a;
  border-radius: .75rem;
  padding: 1rem
}

.kpi .text-uppercase {
  opacity: .9;
  letter-spacing: .3px
}

/* Cards de zona/asociación: base arena */
.card-zone {
  border: 1px solid #e6e6e6;
  background: #F1F1E9;
  border-radius: .75rem
}

.card-zone .card-title {
  color: #033266;
  font-weight: 800
}

.assoc-list a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: .5rem .75rem;
  color: var(--grafito);
  text-decoration: none;
  border-radius: .35rem
}

.assoc-list a:hover {
  background: #e9e9e1
}

/* Chips de series */
/* Chips de series */
.series-chip {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .5rem .85rem;
  border-radius: .5rem;
  font-size: .9rem;
  font-weight: 500;
  background: #ffffff;
  color: var(--azul);
  border: 1px solid rgba(3, 50, 102, 0.15);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.03);
  transition: all 0.2s ease;
}

.series-chip i {
  color: var(--rojo);
  font-size: 1.1em;
}

.series-chip strong {
  font-weight: 800;
  margin-left: 0.2rem;
}

.series-chip:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.08);
  border-color: var(--azul);
}

/* Tabla */
.table thead th {
  background: #033266;
  color: #fff;
  border-color: #033266
}

.table tfoot th {
  background: #1a3f7a;
  color: #fff
}

.status-pill {
  padding: .2rem .5rem;
  border-radius: 999px;
  font-size: .8rem
}

.status-confirmada {
  background: #d1e7dd;
  color: #0f5132
}

.status-pendiente {
  background: #fff3cd;
  color: #664d03
}

/* Botones */
.btn-rodeo {
  background: #DD3300;
  color: #fff;
  border: none
}

.btn-rodeo:hover {
  background: #bb2a00
}

.btn-outline-dark {
  border-color: #2E2E2E;
  color: #2E2E2E
}

.btn-outline-dark:hover {
  background: #2E2E2E;
  color: #fff
}

/* Formularios / wizard */
.form-section {
  background: #F8F9FB;
  border: 1px solid #e8edf6;
  border-radius: .5rem;
  padding: 1rem
}

.nav-pills .nav-link {
  color: #033266
}

.nav-pills .nav-link.active {
  background: #033266
}

.required:after {
  content: '*';
  color: #DD3300;
  margin-left: .25rem
}

/* Footer */
footer {
  background: #2E2E2E;
  color: #e7e7e7
}

/* Map Layout */
#mapa-chile-container {
  position: relative;
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  min-height: 800px;
  /* El mapa se pone como fondo centrado */
  background: url('../img/mapa_chile.png') no-repeat center center;
  background-size: contain;
}

.zone-card-overlay {
  position: absolute;
  width: 360px;
  max-width: 90vw;
  transition: all 0.3s ease;
}

.zone-card-overlay:hover {
  transform: scale(1.05);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
  z-index: 10;
}



/* Desktop Positioning */
@media (min-width: 992px) {

  /* Norte: Arriba Izquierda, más cerca */
  #zona-norte-overlay {
    top: 5%;
    left: 5%;
  }

  #zona-norte-overlay::before {
    display: none;
  }

  /* Centro: Medio Derecha, más cerca */
  #zona-centro-overlay {
    top: 25%;
    right: 5%;
  }

  #zona-centro-overlay::before {
    display: none;
  }

  /* Sur: Abajo Izquierda, más cerca */
  #zona-sur-overlay {
    bottom: 10%;
    left: 5%;
  }

  #zona-sur-overlay::before {
    display: none;
  }
}


/* Mobile Fallback */
@media (max-width: 991px) {
  #mapa-chile-container {
    background: none;
    min-height: auto;
  }

  .zone-card-overlay {
    position: relative;
    width: 100%;
    margin-bottom: 1.5rem;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
  }

  .zone-card-overlay::before {
    display: none;
  }
}/* Map Markers */
.map-marker {
    position: absolute;
    width: 16px;
    height: 16px;
    background-color: var(--rojo);
    border: 2px solid #fff;
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(221, 51, 0, 0.5);
    z-index: 5;
    transform: translate(-50%, -50%);
    /* Center on coordinate */
}

/* Pulsing Animation */
.map-marker::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    background-color: rgba(221, 51, 0, 0.6);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    animation: pulse-ring 2s infinite;
    z-index: -1;
}

@keyframes pulse-ring {
    0% {
        width: 100%;
        height: 100%;
        opacity: 0.8;
    }

    100% {
        width: 300%;
        height: 300%;
        opacity: 0;
    }
}

/* Connector Lines - Stylish */
.zone-card-overlay::before {
    content: '';
    position: absolute;
    height: 1px;
    background: linear-gradient(90deg, var(--azul), transparent);
    z-index: 1;
    opacity: 0.6;
}

/* Marker Positioning (Approximate for Chile shape) */
#marker-norte {
    top: 20%;
    left: 53%;
}

#marker-centro {
    top: 40%;
    left: 45%;
}

#marker-sur {
    top: 75%;
    left: 40%;
}

/* Desktop Connector Specifics */
@media (min-width: 992px) {

    /* Norte Connector - Angled down to marker */
    #zona-norte-overlay::before {
        display: block;
        top: 50%;
        left: 100%;
        width: 120px;
        transform-origin: 0 50%;
        transform: rotate(20deg);
        background: linear-gradient(90deg, var(--azul), transparent);
    }

    /* Centro Connector - Horizontal to marker */
    #zona-centro-overlay::before {
        display: block;
        top: 50%;
        right: 100%;
        width: 60px;
        transform-origin: 100% 50%;
        transform: rotate(10deg);
        background: linear-gradient(-90deg, var(--azul), transparent);
    }

    /* Sur Connector - Angled up to marker */
    #zona-sur-overlay::before {
        display: block;
        top: 50%;
        left: 100%;
        width: 100px;
        transform-origin: 0 50%;
        transform: rotate(-15deg);
        background: linear-gradient(90deg, var(--azul), transparent);
    }
}

/* Hide markers on mobile if background map is hidden */
@media (max-width: 991px) {
    .map-marker {
        display: none;
    }
}