/*
 * Arte en Corrientes — Paleta "Contraste Editorial" (Opción B)
 * -----------------------------------------------------------
 * Sobrescribe las variables de color de Bootstrap 5.3 que ya trae
 * theme.min.css (tema Assan). Al ser variables CSS, con esto alcanza
 * para que todo el sitio (botones, badges, links, bordes, fondos
 * alternados, footer) se actualice sin tocar clase por clase.
 *
 * Filosofía de la paleta: casi monocromática (negro / blanco / grises),
 * con el azul de marca reservado para links y llamados a la acción —
 * así las obras de los artistas son las que aportan el color.
 *
 * Cargar este archivo DESPUÉS de theme.min.css (ver includes/link.php).
 */

:root,
[data-bs-theme=light] {
  /* Azul de marca (del logo #2196F3 / #00AFEF), afinado para uso como
     único acento — reservado a links, botones primarios y badges. */
  --bs-primary: #1177B0;
  --bs-primary-rgb: 17, 119, 176;
  --bs-primary-text-emphasis: #0d5c88;
  --bs-primary-bg-subtle: #e7f3f9;
  --bs-primary-border-subtle: #b7dcec;

  /* "Secundario" neutro (ya no violeta) — para botones/badges/bordes
     que no deben competir con el azul de acción. */
  --bs-secondary: #6b6b6b;
  --bs-secondary-rgb: 107, 107, 107;

  /* Tinta + papel: base editorial, casi blanco y negro puro. */
  --bs-body-color: #111111;
  --bs-body-color-rgb: 17, 17, 17;
  --bs-body-bg: #ffffff;
  --bs-body-bg-rgb: 255, 255, 255;
  --bs-emphasis-color: #000000;
  --bs-emphasis-color-rgb: 0, 0, 0;

  /* Superficies y bordes sutiles (cards, secciones alternadas, footer). */
  --bs-secondary-bg: #f0f0f0;
  --bs-secondary-bg-rgb: 240, 240, 240;
  --bs-tertiary-bg: #f5f5f5;
  --bs-tertiary-bg-rgb: 245, 245, 245;
  --bs-border-color: #dadada;
  --bs-border-color-translucent: #dadada;
  --bs-light-border-subtle: #ececec;
  --bs-dark-border-subtle: #2a2a2a;

  /* bg-dark / data-bs-theme="dark" (footer, CTA final del home). */
  --bs-dark: #111111;
  --bs-dark-rgb: 17, 17, 17;

  /* Links: el azul es la única señal de "esto es interactivo". */
  --bs-link-color: #1177B0;
  --bs-link-color-rgb: 17, 119, 176;
  --bs-link-hover-color: #0d5c88;
  --bs-link-hover-color-rgb: 13, 92, 136;

  --bs-focus-ring-color: rgba(17, 119, 176, 0.25);
}

[data-bs-theme=dark] {
  /* Mismo azul de marca, aclarado ~4pt para mantener buen contraste
     sobre fondos casi negros (ratio 8.5:1 vs. 4:1 del tono base). */
  --bs-primary: #4FB4E8;
  --bs-primary-rgb: 79, 180, 232;
  --bs-primary-text-emphasis: #7cc9ee;
  --bs-primary-bg-subtle: #0d2733;
  --bs-primary-border-subtle: #1a4a5e;

  --bs-secondary: #a6a6a6;
  --bs-secondary-rgb: 166, 166, 166;

  --bs-body-color: #f2f2f2;
  --bs-body-color-rgb: 242, 242, 242;
  --bs-body-bg: #0a0a0a;
  --bs-body-bg-rgb: 10, 10, 10;
  --bs-emphasis-color: #ffffff;
  --bs-emphasis-color-rgb: 255, 255, 255;

  --bs-secondary-bg: #1a1a1a;
  --bs-secondary-bg-rgb: 26, 26, 26;
  --bs-tertiary-bg: #161616;
  --bs-tertiary-bg-rgb: 22, 22, 22;
  --bs-border-color: #262626;
  --bs-border-color-translucent: #262626;
  --bs-light-border-subtle: #2a2a2a;
  --bs-dark-border-subtle: #1a1a1a;

  --bs-link-color: #4FB4E8;
  --bs-link-color-rgb: 79, 180, 232;
  --bs-link-hover-color: #7cc9ee;
  --bs-link-hover-color-rgb: 124, 201, 238;

  --bs-focus-ring-color: rgba(79, 180, 232, 0.25);
}

/*
 * Botones: Bootstrap compila .btn-primary / .btn-outline-primary /
 * .btn-outline-secondary con colores fijos (no con var(--bs-primary)),
 * así que las variables de arriba no les llegan solas — hay que
 * pisarlos acá también. El resto de los botones que usa el sitio
 * (.btn-white, .btn-outline-light) ya son neutros y no necesitan tocarse.
 */
.btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: #1177B0;
  --bs-btn-border-color: #1177B0;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #0E6596;
  --bs-btn-hover-border-color: #0E6596;
  --bs-btn-focus-shadow-rgb: 17, 119, 176;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #0D5984;
  --bs-btn-active-border-color: #0D5984;
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #1177B0;
  --bs-btn-disabled-border-color: #1177B0;
}

.btn-outline-primary {
  --bs-btn-color: #1177B0;
  --bs-btn-border-color: #1177B0;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #1177B0;
  --bs-btn-hover-border-color: #1177B0;
  --bs-btn-focus-shadow-rgb: 17, 119, 176;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #1177B0;
  --bs-btn-active-border-color: #1177B0;
  --bs-btn-disabled-color: #1177B0;
  --bs-btn-disabled-border-color: #1177B0;
}

.btn-outline-secondary {
  --bs-btn-color: #6b6b6b;
  --bs-btn-border-color: #6b6b6b;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #6b6b6b;
  --bs-btn-hover-border-color: #6b6b6b;
  --bs-btn-focus-shadow-rgb: 107, 107, 107;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #6b6b6b;
  --bs-btn-active-border-color: #6b6b6b;
  --bs-btn-disabled-color: #6b6b6b;
  --bs-btn-disabled-border-color: #6b6b6b;
}

/*
 * En modo oscuro, el texto/borde de los botones "outline" necesita el
 * azul y gris más claros (los mismos que usamos para links) para tener
 * contraste sobre el fondo casi negro. El relleno al hacer hover se
 * mantiene con el color base + texto oscuro, para no perder contraste
 * ahí tampoco (texto oscuro sobre celeste claro, en vez de blanco).
 */
[data-bs-theme=dark] .btn-outline-primary {
  --bs-btn-color: #4FB4E8;
  --bs-btn-border-color: #4FB4E8;
  --bs-btn-hover-color: #0a0a0a;
  --bs-btn-hover-bg: #4FB4E8;
  --bs-btn-hover-border-color: #4FB4E8;
  --bs-btn-focus-shadow-rgb: 79, 180, 232;
  --bs-btn-active-color: #0a0a0a;
  --bs-btn-active-bg: #4FB4E8;
  --bs-btn-active-border-color: #4FB4E8;
  --bs-btn-disabled-color: #4FB4E8;
  --bs-btn-disabled-border-color: #4FB4E8;
}

[data-bs-theme=dark] .btn-outline-secondary {
  --bs-btn-color: #a6a6a6;
  --bs-btn-border-color: #a6a6a6;
  --bs-btn-hover-color: #0a0a0a;
  --bs-btn-hover-bg: #a6a6a6;
  --bs-btn-hover-border-color: #a6a6a6;
  --bs-btn-focus-shadow-rgb: 166, 166, 166;
  --bs-btn-active-color: #0a0a0a;
  --bs-btn-active-bg: #a6a6a6;
  --bs-btn-active-border-color: #a6a6a6;
  --bs-btn-disabled-color: #a6a6a6;
  --bs-btn-disabled-border-color: #a6a6a6;
}

/*
 * Scrim del hero: garantiza que el título/autor superpuestos sean legibles
 * sin importar qué tan clara u oscura sea la obra de fondo. Oscurece más
 * la izquierda y abajo (donde va el texto) y deja la derecha más limpia
 * para que la obra siga siendo protagonista.
 */
.hero-scrim {
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.05) 35%, rgba(0, 0, 0, 0.6) 100%),
    linear-gradient(90deg, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0.35) 45%, rgba(0, 0, 0, 0) 78%);
  pointer-events: none;
}

/*
 * Scrim centrado del hero: el título/subtítulo van superpuestos y
 * centrados (no abajo a la izquierda como en .hero-scrim), así que acá
 * oscurecemos parejo con más énfasis en la franja vertical central, sin
 * favorecer ningún costado, para que el texto blanco sea legible sobre
 * cualquier obra de fondo, clara u oscura.
 */
.hero-scrim-center {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0.5) 50%, rgba(0, 0, 0, 0.25) 100%);
  pointer-events: none;
}

/*
 * Ratio del hero: 21:9 (bien panorámico) queda demasiado bajo en mobile
 * para el título + subtítulo superpuestos (sin botones, ese texto es todo
 * lo que lleva la imagen ahora). Achicamos el ratio -imagen más "cuadrada"-
 * en pantallas chicas para darle aire al texto, y volvemos al 21:9
 * panorámico original a partir de md, donde ya sobra espacio.
 */
.hero-ratio {
  --bs-aspect-ratio: 170%;
}

@media (min-width: 480px) {
  .hero-ratio {
    --bs-aspect-ratio: 140%;
  }
}

@media (min-width: 768px) {
  .hero-ratio {
    --bs-aspect-ratio: calc(9 / 21 * 100%);
  }
}

/*
 * Mapa de departamentos (artistas.php): SVG interactivo con los 25
 * departamentos de la provincia (trazado a mano sobre un mapa de
 * referencia — ver includes/mapa-departamentos-paths.php). Reemplaza al
 * mapa de puntos/Leaflet anterior: cada <path> es hover + click, sin
 * depender de tiles externos, así que carga instantáneo y funciona igual
 * de bien offline o con conexión lenta.
 */
.mapa-departamentos-wrap {
  position: relative;
  background: var(--bs-tertiary-bg);
  padding: 1rem;
  overflow: hidden;
}

.mapa-departamentos {
  display: block;
  width: 100%;
  height: auto;
  max-height: 640px;
  margin: 0 auto;
}

.depto-path {
  fill: #d7e6ee;
  stroke: #ffffff;
  stroke-width: 1.5;
  stroke-linejoin: round;
  cursor: pointer;
  transition: fill 0.15s ease;
}

.depto-path:hover,
.depto-path:focus {
  fill: #1177B0;
  outline: none;
}

/* Nivel de color según cantidad de artistas del departamento (0 = ninguno
   todavía, 4 = el que más tiene) — así el mapa "cuenta" algo con solo mirarlo,
   sin depender del hover. */
.depto-path.depto-nivel-0 {
  fill: #e4ecf1;
}

.depto-path.depto-nivel-1 {
  fill: #b7d7e8;
}

.depto-path.depto-nivel-2 {
  fill: #8dc0dc;
}

.depto-path.depto-nivel-3 {
  fill: #4fa2cc;
}

.depto-path.depto-nivel-4 {
  fill: #1177B0;
}

[data-bs-theme=dark] .depto-path {
  stroke: #0a0a0a;
}

/* Etiqueta flotante que sigue al mouse sobre el mapa (el "efecto mouseover"
   que pidió Simón, resuelto en CSS + JS en vez del Flash original). */
.mapa-departamentos-etiqueta {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
  pointer-events: none;
  background: var(--bs-body-bg);
  border: 1px solid var(--bs-border-color);
  border-radius: 0.5rem;
  padding: 0.5rem 0.75rem;
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
  white-space: nowrap;
}

.mapa-departamentos-etiqueta-nombre {
  display: block;
  font-weight: 600;
}

.mapa-departamentos-etiqueta-cantidad {
  display: block;
  font-size: 0.8rem;
}

.mapa-departamentos-swatch {
  width: 14px;
  height: 14px;
}

.mapa-departamentos-swatch-alto {
  background: #1177B0;
}

.mapa-departamentos-swatch-bajo {
  background: #e4ecf1;
  border: 1px solid var(--bs-border-color);
}

/*
 * Índice alfabético de "otros artistas en actividad" (artistas.php): lista en
 * columnas tipo guía telefónica en vez de una tira de botones, pensada para
 * escalar bien aunque una localidad llegue a tener 200+ nombres cargados.
 * 1 columna en mobile, más columnas a medida que hay lugar; cada grupo de
 * letra no se corta a la mitad entre columnas.
 */
.lista-artistas-columnas {
  column-count: 1;
  column-gap: 2.5rem;
}

@media (min-width: 576px) {
  .lista-artistas-columnas {
    column-count: 2;
  }
}

@media (min-width: 992px) {
  .lista-artistas-columnas {
    column-count: 3;
  }
}

.lista-artistas-grupo {
  break-inside: avoid-column;
}

/* Header por encima de los sliders del home.
   El <header> no tenía z-index propio, y el .container interno lleva
   .z-1 (position relative + z-index 1), lo que crea un contexto de
   apilamiento con z-index 1. Swiper (.swiper-container) también es
   position relative + z-index 1 y viene DESPUÉS en el DOM, así que en
   el home pintaba por encima del header y tapaba los dropdowns del
   menú (Artistas / Espacios). En páginas sin slider no se notaba.
   1030 = $zindex-sticky de Bootstrap: queda por debajo de modales,
   offcanvas y toasts. */
#site-header {
  position: relative;
  z-index: 1030;
}

/* Slider de videos del home (index.php): botón de "play" superpuesto a la
   miniatura de YouTube. El <span> hereda de .ratio > * (absolute, 100%),
   así que sirve de capa centradora y el círculo es el <i>. */
.video-thumb-play {
  background: linear-gradient(to top, rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0) 60%);
  transition: background 0.3s ease;
}

.video-thumb-play i {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  padding-left: 0.2rem; /* compensa el centro óptico del triángulo */
  color: #fff;
  background: rgba(var(--bs-primary-rgb), 0.9);
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.3);
  transition: transform 0.3s ease, background 0.3s ease;
}

.card:hover .video-thumb-play i {
  transform: scale(1.1);
  background: rgb(var(--bs-primary-rgb));
}

/* Flechas del slider de videos: botones circulares que "muerden" el borde
   de las tarjetas (mitad afuera). Solo en xl+, donde el margen del container
   (30px) las absorbe sin generar scroll horizontal; abajo de eso se desliza
   con el dedo o con los bullets. */
.swiper-videos-prev,
.swiper-videos-next {
  width: 44px;
  height: 44px;
  margin-top: 0;
  top: 32%;
  border-radius: 50%;
  background: var(--bs-body-bg);
  color: var(--bs-body-color);
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.15);
  transition: color 0.2s ease, transform 0.2s ease;
}

.swiper-videos-prev:hover,
.swiper-videos-next:hover {
  color: var(--bs-primary);
  transform: scale(1.08);
}

.swiper-videos-prev::after,
.swiper-videos-next::after {
  font-size: 1rem;
  font-weight: 700;
}

.swiper-videos-prev {
  left: -22px;
}

.swiper-videos-next {
  right: -22px;
}

.swiper-videos-pagination .swiper-pagination-bullet-active {
  background: var(--bs-primary);
}