/* assets/estilo.css – versión organizada y consistente */

/* 1) Fuentes y variables */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;700&display=swap');

:root{
  --ink:#ffffff;
  --ink-soft:#e1e1e1;
  --muted:#9ca3af;
  --bg-glass:rgba(0,0,0,.55);
  --bg-glass-strong:rgba(0,0,0,.75);
  --primary:#55c1e7;        /* azul claro de acentos */
  --primary-hover:#2b9fc5;
  --brand-blue:#27459d;     /* azul solicitado para botones */
  --brand-blue-hover:#1f347a;
  --danger:#cc0000;         /* rojo para CTA navbar y hero */
  --danger-hover:#990000;
  --success:#1abc9c;        /* descargar (si lo mantienes verde) */
  --shadow:0 4px 20px rgba(0,0,0,.3);
}

*{margin:0; padding:0; box-sizing:border-box}
html,body{
  font-family:'Montserrat',sans-serif;
  color:var(--ink);
  min-height:100vh;
  scroll-behavior:smooth;
  position:relative;
}

/* 2) Fondo global (nuevo asset) */
body::before{
  content:"";
  position:fixed;
  inset:0;
  background:url('/assets/degradado.jpg') center top/cover no-repeat;
  z-index:-1;
  pointer-events:none;
}

/* 3) Header / navegación */
.site-header{
  display:flex; align-items:center; justify-content:space-between;
  background:var(--bg-glass);
  padding:10px 20px;
  position:sticky; top:0; z-index:1000;
  transition:background .3s ease;
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
}
.site-header:hover{ background:var(--bg-glass-strong); }
.site-header .logo{
  height:50px; cursor:pointer; transition:transform .2s ease;
}
.site-header .logo:hover{ transform:scale(1.06); }

.empresa-nombre{
  font-size:1.8rem; font-weight:700; color:#fff; cursor:pointer; text-decoration:none;
  text-transform:uppercase; letter-spacing:2px;
}

.menu-toggle{ display:none; background:none; border:none; font-size:1.8rem; color:#fff; cursor:pointer; }
.logo-link, .empresa-nombre, .menu-toggle{ z-index:1100; }

.navbar{ display:flex; gap:1.5rem; }
.navbar a{
  color:#fff; margin-left:20px; text-decoration:none; font-weight:500; font-size:1rem; position:relative; transition:color .2s ease;
}
.navbar a::after{
  content:''; position:absolute; width:0; height:2px; background:#fff; left:0; bottom:-4px; transition:width .25s ease;
}
.navbar a:hover{ color:var(--primary); }
.navbar a:hover::after{ width:100%; }

/* Botón destacado de navbar: rojo + borde blanco */
.highlight-btn{
  padding:6px 14px;
  background:var(--danger);
  color:#fff;
  border:1px solid #fff;
  border-radius:6px;
  font-weight:700;
}
.highlight-btn:hover{ background:var(--danger-hover); }

.breadcrumb-link{ color:#fff; text-decoration:none; font-weight:700; }
.breadcrumb-link:hover{ color:var(--primary); text-decoration:underline; }

@media (max-width:768px){
  .menu-toggle{ display:block; }
  .navbar{
    display:none;
    flex-direction:column;
    background:var(--bg-glass-strong);
    position:absolute;
    top:100%; right:0;
    width:80vw; max-width:280px;
    padding:14px; margin:10px;
    border-radius:12px; box-shadow:var(--shadow);
    -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  }
  .navbar.show{ display:flex; }
}

/* 4) Contenido base */
.site-content{ padding:20px; min-height:calc(100vh - 140px); }
h2{ color:#fff; margin-bottom:12px; font-weight:700; }
.fade-in{ animation:fadeIn .6s ease-in-out; }
@keyframes fadeIn{ from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:translateY(0)} }

/* 5) Listas (locaciones/canchas/lados) */
ul{ list-style:none; padding-left:0; }
ul li{ margin-bottom:8px; }
ul li a{ color:#fff; font-size:1.1rem; text-decoration:none; transition:color .2s ease; }
ul li a:hover{ color:var(--primary); }

.lados-lista, .canchas-lista{
  display:flex; flex-direction:column; gap:16px; padding:0; margin-top:20px; max-width:800px; margin-inline:auto;
}
.lados-lista li, .canchas-lista li{
  background:rgba(255,255,255,.08);
  padding:12px 20px;
  border-radius:10px;
  transition:background .25s ease, transform .2s ease;
}
.lados-lista li:hover, .canchas-lista li:hover{
  background:rgba(255,255,255,.12);
  transform:scale(1.02);
}
.lados-lista li a, .canchas-lista li a{
  color:#fff; font-size:1.2rem; font-weight:500; text-decoration:none; display:block;
}

/* 6) Bloques de títulos y avisos */
.titulo-lado{
  background:rgba(0,0,0,.5);
  padding:20px;
  border-radius:12px;
  margin-bottom:20px;
  text-align:center;
}
.titulo-club{ font-size:2rem; font-weight:700; color:#fff; }
.titulo-cancha{ font-size:1.2rem; font-weight:500; color:#fff; margin-top:6px; text-transform:uppercase; }
.aviso{ text-align:right; font-style:italic; color:var(--ink-soft); margin-bottom:20px; }

/* 7) Tarjetas de video */
.video-grid{
  display:grid; grid-template-columns:1fr; gap:24px; margin-top:30px;
  max-width:1100px; margin-inline:auto;
}
.video-card{
  background:rgba(0,0,0,.5);
  border-radius:12px;
  padding:16px;
  margin:20px auto;
  box-shadow:var(--shadow);
  position:relative;
  animation:fadeIn .5s ease;
}
.video-card video{
  width:100%; height:auto; border-radius:8px; display:block; margin-bottom:12px;
}
.video-title{
  font-size:1.25rem; font-weight:700; color:#fff; margin-bottom:8px; text-align:center;
}

/* 8) Botones (regresar como antes + nuevos estilos pedidos) */
.btn-volver{
  display:inline-block;
  color:#ffffff;
  background:rgba(0,0,0,0.6);
  padding:10px 20px;
  border-radius:6px;
  text-decoration:none;
  font-weight:600;
  transition:background .25s ease, transform .15s ease, color .25s ease;
}
.btn-volver:hover{
  background:rgba(0,0,0,0.8);
  transform:translateY(-1px);
  color:#55c1e7;
}

/* Descargar (si prefieres mantener verde) */
.btn-download{
  display:block;
  background:var(--success);
  color:#fff;
  padding:10px 20px;
  font-weight:600;
  border-radius:8px;
  text-decoration:none;
  transition:transform .15s ease, background .25s ease;
  width:100%;
  text-align:center;
  margin-top:12px;
}
.btn-download:hover{ background:#16a085; transform:translateY(-1px); }

/* Compartir | Descargar (botón grande unificado) */
.btn-share-large{
  display:inline-block;
  background:var(--brand-blue);
  color:#fff;
  padding:12px 28px;               /* un poco más ancho que el otro */
  border:1px solid #fff;           /* borde blanco fino */
  border-radius:10px;
  font-weight:700;
  cursor:pointer;
  text-decoration:none;
  transition:background .25s ease, transform .15s ease;
  width:100%;
  text-align:center;
}
.btn-share-large:hover{ background:var(--brand-blue-hover); transform:translateY(-1px); }

/* Ver otra perspectiva (sólido, un poco más angosto) */
.btn-alt{
  display:inline-block;
  background:var(--brand-blue);
  color:#fff;
  padding:10px 18px;               /* más angosto para no competir */
  border:1px solid #fff;
  border-radius:8px;
  font-weight:600;
  cursor:pointer;
  text-decoration:none;
  transition:background .2s ease, transform .1s ease;
  margin-left:10px;
}
.btn-alt:hover{ background:var(--brand-blue-hover); transform:translateY(-1px); }
.btn-alt[disabled]{ opacity:.6; cursor:default; }

/* El botón pequeño de share no se usa */
.btn-share{ display:none; }

/* 9) Filtros por hora */
#filtro-horario{
  display:none; flex-wrap:wrap; justify-content:center; gap:10px; margin:20px auto; max-width:800px; padding:4px 0;
}
.btn-filtro{
  background:rgba(255,255,255,.08); color:#fff; border:none; padding:8px 16px; border-radius:8px; cursor:pointer; font-weight:600; transition:background .2s ease;
}
.btn-filtro:hover{ background:rgba(255,255,255,.18); }
.btn-filtro.activo{ background:var(--primary); color:#000; box-shadow:0 0 8px rgba(85,193,231,.7); }
.btn-filtro.quitar{ background:#aa3333; }
.btn-filtro.quitar:hover{ background:#cc4444; }

/* 10) Preview y video real */
.video-preview{
  width:100%; border-radius:8px; object-fit:cover; cursor:pointer; display:block; position:relative; z-index:1; opacity:.97; transition:opacity .25s ease;
}
.video-preview:hover{ opacity:1; }
video.real{ display:block; position:relative; z-index:0; }

/* 11) Scroll-top */
.scroll-top{
  position:fixed; bottom:30px; right:30px; z-index:1000;
  background:rgba(255,255,255,.1); color:#fff;
  border:1px solid #fff; padding:10px 12px; font-size:1.2rem;
  border-radius:50%; cursor:pointer; display:none;
  transition:background .25s ease, border-color .25s ease;
}
.scroll-top:hover{ background:var(--primary); border-color:var(--primary); }

/* 12) Footer (como el de inicio) */
.site-footer{
  background:#111;
  color:#ccc;
  padding:25px;
  text-align:center;
}
.site-footer a{
  color:#55c1e7;
  margin:0 8px;
  text-decoration:none;
}
.site-footer a:hover{ text-decoration:underline; }
.footer-copy{ font-size:.875rem; margin-top:15px; color:#bbb; }

/* 13) Accesibilidad general */
a:focus-visible, button:focus-visible{ outline:2px solid #fff; outline-offset:2px; }

/* 14) Responsivo fino */
@media (max-width:1024px){
  .video-grid{ padding:0 10px; }
  .video-card{ padding:14px; }
}
/* Asegurar jerarquía de importancia y anchos en ambos tamaños */
.btn-share-large {
  font-size: 1rem;
  white-space: nowrap;
}
.btn-alt {
  font-size: 0.95rem;     /* un poco más chico */
  white-space: nowrap;
}

/* Cuando estén juntos dentro de la tarjeta de video, forzar proporciones */
.video-card .btn-share-large { flex: 1 1 65%; }  /* más ancho */
.video-card .btn-alt        { flex: 0 0 auto; }  /* se adapta a su texto */

@media (max-width: 768px) {
  .video-card .btn-share-large { flex: 1 1 auto; min-width: 60%; }
  .video-card .btn-alt { flex: 0 0 auto; }
}
/* --- 1) Quitar cualquier scroll horizontal accidental en móvil --- */
html, body { overflow-x: hidden; }

/* --- 2) Contenedor de botones dentro de cada tarjeta de video --- */
/* Tu script crea ese contenedor como el último <div> dentro de .video-card */
.video-card > div:last-child{
  display: flex;
  align-items: stretch;
  gap: 12px;
  width: 100%;
  box-sizing: border-box;
}

/* Hacer que las sombras / bordes nunca empujen el ancho */
.video-card,
.video-card .btn-share-large,
.video-card .btn-alt{
  max-width: 100%;
  box-sizing: border-box;
}

/* --- 3) Jerarquía y tamaños de botones: misma tipografía, share un poco más “fuerte” --- */
.btn-share-large{ font-size: 1rem; font-weight: 700; }
.btn-alt{ font-size: 1rem; font-weight: 600; }  /* mismo tamaño de letra, un poco menos de peso */

/* Desktop: el de compartir ocupa más horizontal */
@media (min-width: 769px){
  .video-card .btn-share-large{ flex: 1 1 65%; }
  .video-card .btn-alt{ flex: 0 0 auto; }
}

/* Móvil: que NO se desborden. Los apilamos verticalmente. */
@media (max-width: 768px){
  .video-card > div:last-child{
    flex-direction: column;
    gap: 10px;
  }
  .video-card .btn-share-large,
  .video-card .btn-alt{
    width: 100%;
  }
}

/* --- 4) Por si algún video rompe el layout, lo contenemos --- */
.video-card{ overflow: hidden; }
.video-card video,
.video-card .video-preview{ max-width: 100%; height: auto; }

/* --- 5) (ya lo tenías) Botones azules con borde blanco --- */
.btn-share-large{
  background: #27459d;
  border: 1px solid #fff;
}
.btn-share-large:hover{ background: #1f347a; }

.btn-alt{
  background: #27459d;
  border: 1px solid #fff;
}
.btn-alt:hover{ background: #1f347a; }

/* === BOTONES DE LAS TARJETAS ====================================== */

/* Compartir | Descargar: centrado vertical y ancho flexible */
.btn-share-large{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;         /* alto consistente */
  padding: 12px 28px;       /* simétrico */
  white-space: nowrap;
  box-sizing: border-box;
}

/* Ver otra perspectiva: TEXTO CENTRADO y un poco más angosto */
.btn-alt{
  display: inline-flex;     /* <- centra perfecto el texto */
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 10px 18px;       /* más angosto que el de compartir */
  white-space: nowrap;
  box-sizing: border-box;
  font-size: 1rem;          /* igual que compartir */
  font-weight: 600;         /* un poco menor para jerarquía */
  background: #27459d;
  border: 1px solid #fff;
}
.btn-alt:hover{ background:#1f347a; }

/* Evitar desbordes en móvil: apilados y 100% de ancho */
.video-card > div:last-child{
  display: flex;
  align-items: stretch;
  gap: 12px;
  width: 100%;
  box-sizing: border-box;
}

@media (min-width: 769px){
  .video-card .btn-share-large{ flex: 1 1 65%; }  /* más ancho en desktop */
  .video-card .btn-alt{ flex: 0 0 auto; }
}
@media (max-width: 768px){
  .video-card > div:last-child{ flex-direction: column; gap: 10px; }
  .video-card .btn-share-large,
  .video-card .btn-alt{ width: 100%; }
}

/* Cinturón de seguridad: nada puede causar scroll horizontal */
html, body{ overflow-x:hidden; }
.video-card,
.video-card .btn-share-large,
.video-card .btn-alt{ max-width:100%; box-sizing:border-box; }
/* ======== BOTONES DE VIDEO – COMPACTOS EN MÓVIL Y SIN DESALINEO ======== */

/* Base: centra texto siempre */
.btn-share-large,
.btn-alt{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  white-space: nowrap;
}

/* Desktop: compartir un poco más “importante” */
@media (min-width: 769px){
  .video-card > div:last-child{
    display: flex;
    align-items: stretch;
    gap: 12px;
    width: 100%;
  }
  .video-card .btn-share-large{ flex: 1 1 65%; font-size: 1rem; min-height: 48px; padding: 12px 24px; }
  .video-card .btn-alt        { flex: 0 0 auto;  font-size: 1rem; min-height: 48px; padding: 10px 18px; }
}

/* MÓVIL: más chicos, 100% de ancho, apilados y ALINEADOS */
@media (max-width: 768px){
  .video-card > div:last-child{
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;                 /* más compacto */
    width: 100%;
  }

  .video-card .btn-share-large,
  .video-card .btn-alt{
    width: 100%;
    font-size: .95rem;        /* texto un poco menor */
    min-height: 42px;         /* más bajitos para que luzca el video */
    padding: 10px 14px;       /* simétrico -> se alinean perfecto */
    border-radius: 10px;      /* mismo radio en ambos */
    border-width: 1px;        /* misma línea en ambos */
  }
}

/* Cinturón anti-scroll horizontal por si acaso */
html, body{ overflow-x: hidden; }
.video-card,
.video-card .btn-share-large,
.video-card .btn-alt{ max-width: 100%; box-sizing: border-box; }

/* Colores (por si se han sobrescrito) */
.btn-share-large{ background:#27459d; border:1px solid #fff; }
.btn-share-large:hover{ background:#1f347a; }
.btn-alt{ background:#27459d; border:1px solid #fff; }
.btn-alt:hover{ background:#1f347a; }
/* ==== NORMALIZAR ambos tipos (button y <a>) para que midan igual ==== */
.video-card .btn-share-large,
.video-card .btn-alt{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  white-space: nowrap;
  appearance: none;
  -webkit-appearance: none;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  line-height: 1.1;
  border: 1px solid #fff;   /* mismos bordes */
  border-radius: 10px;      /* mismo radio */
  background: #27459d;
  color: #fff;
}

/* Desktop: compartir “manda” un poco más */
@media (min-width: 769px){
  .video-card > div:last-child{
    display:flex; align-items:stretch; gap:12px; width:100%;
  }
  .video-card .btn-share-large{ flex:1 1 65%; font-size:1rem;  min-height:44px; padding:10px 22px; }
  .video-card .btn-alt        { flex:0 0 auto;  font-size:1rem;  min-height:44px; padding:10px 18px; }
}

/* MÓVIL: más chicos y perfectamente alineados (¡sin scroll horizontal!) */
@media (max-width: 768px){
  .video-card > div:last-child{
    display:flex; flex-direction:column; align-items:stretch; gap:8px; width:100%;
  }
  .video-card .btn-share-large,
  .video-card .btn-alt{
    width:100%;
    font-size:.90rem;      /* más discretos para que luzca el video */
    min-height:38px;       /* bajitos */
    padding:8px 14px;      /* simétricos -> alinean perfecto */
  }
}

/* cinturón antidesbordes */
html, body{ overflow-x:hidden; }
.video-card,
.video-card .btn-share-large,
.video-card .btn-alt{ max-width:100%; box-sizing:border-box; }
.botones-container {
  display: flex;
  justify-content: center; /* centra horizontalmente */
  align-items: center;     /* centra verticalmente */
  gap: 15px;               /* espacio entre los botones */
}

.boton-compartir, .boton-perspectiva {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}
/* ===== FIX DEFINITIVO DE BOTONES EN TARJETA ===== */

/* Usa SIEMPRE el contenedor que genera tu script */
.botones-container{
  display:flex;
  align-items:stretch;
  gap:12px;
  width:100%;
}

/* Normalizamos ambos (button y <a>) */
.botones-container .btn-share-large,
.botones-container .btn-alt{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  box-sizing:border-box;
  font-family:'Montserrat',sans-serif;
  line-height:1;                 /* clave para centrar vertical */
  white-space:nowrap;
  min-height:42px;               /* tamaño compacto en móvil */
  border:1px solid #fff;
  border-radius:10px;
  background:#27459d;
  color:#fff;
  text-decoration:none;
  margin:0;                      /* elimina desajustes heredados */
}

/* Quita el pequeño empuje que tenías en .btn-alt */
.botones-container .btn-alt{ margin-left:0 !important; }

/* Jerarquía: compartir un poco más importante en desktop */
@media (min-width:769px){
  .botones-container .btn-share-large{ flex:1 1 66%; padding:12px 24px; font-size:1rem;  font-weight:700; }
  .botones-container .btn-alt        { flex:0 0 auto;  padding:10px 18px; font-size:1rem;  font-weight:600; }
}

/* Móvil: apilar, 100% de ancho y MISMO look (sin desalineo) */
@media (max-width:768px){
  .botones-container{ flex-direction:column; gap:8px; }
  .botones-container .btn-share-large,
  .botones-container .btn-alt{
    width:100%;
    padding:9px 14px;
    font-size:.95rem;
  }
}
/* ================== Variables rápidas (ajusta a tu tema) ================== */
:root {
  --chip-bg: rgba(255,255,255,0.08);
  --chip-bg-hover: rgba(255,255,255,0.18);
  --chip-outline: rgba(255,255,255,0.28);
  --chip-active-outline: rgba(255,255,255,0.6);
  --chip-text: #fff;

  --btn-fg: #fff;
  --btn-bg: rgba(255,255,255,0.12);
  --btn-bg-hover: rgba(255,255,255,0.22);

  --bar-bg: rgba(255,255,255,0.25);
  --bar-fill: rgba(255,255,255,0.9);
}

/* ================== Paginadores (arriba y abajo) ================== */
#paginator-top, #paginator-bottom {
  margin: 8px 0;
}
#paginator-top > div, #paginator-bottom > div {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

#paginator-top button,
#paginator-bottom button {
  appearance: none;
  background: var(--chip-bg);
  color: var(--chip-text);
  border: 1px solid var(--chip-outline);
  border-radius: 999px;
  padding: 6px 10px;
  cursor: pointer;
  transition: background .15s ease, transform .08s ease;
}
#paginator-top button:hover,
#paginator-bottom button:hover { background: var(--chip-bg-hover); }
#paginator-top button:disabled,
#paginator-bottom button:disabled {
  opacity: .55; cursor: default; transform: none;
}
#paginator-top button:active:not(:disabled),
#paginator-bottom button:active:not(:disabled) { transform: translateY(1px); }

/* Número de página activo (JS le pone estilo inline; reforzamos aquí) */
#paginator-top button[style*="font-weight: 700"],
#paginator-bottom button[style*="font-weight: 700"] {
  outline: 1px solid var(--chip-active-outline) !important;
}

/* Link "Ir al lado opuesto" estilizado como chip */
#paginator-top a, #paginator-bottom a {
  text-decoration: none;
  color: var(--chip-text);
  background: var(--chip-bg);
  border: 1px solid var(--chip-outline);
  border-radius: 999px;
  padding: 6px 10px;
  transition: background .15s ease;
}
#paginator-top a:hover, #paginator-bottom a:hover { background: var(--chip-bg-hover); }

/* Info de rango ("Mostrando X–Y de Z") */
#paginator-top span:last-child,
#paginator-bottom span:last-child {
  margin-left: auto;
  opacity: .8;
  font-size: .95em;
}

/* ================== Botón Compartir/Descargar con progreso ================== */
.btn-share-large {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid var(--chip-outline);
  background: var(--btn-bg);
  color: var(--btn-fg);
  cursor: pointer;
  transition: background .15s ease, transform .08s ease;
}
.btn-share-large:hover { background: var(--btn-bg-hover); }
.btn-share-large:active { transform: translateY(1px); }
.btn-share-large:disabled { opacity: .6; cursor: default; transform: none; }

/* Contenido de progreso dentro del botón */
.btn-progress {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
}
.btn-progress__label {
  font-weight: 600;
  letter-spacing: .2px;
}
.btn-progress__percent {
  min-width: 3ch;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
/* Barra */
.btn-progress__bar {
  position: relative;
  flex: 1;
  height: 6px;
  min-width: 100px;
  border-radius: 999px;
  background: var(--bar-bg);
  overflow: hidden;
}
.btn-progress__fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0%;
  background: var(--bar-fill);
  border-radius: inherit;
  transition: width 120ms linear, opacity 120ms linear;
}
/* Spinner (cuando no hay Content-Length) */
.btn-progress__spinner {
  display: none;
  width: 14px; height: 14px;
  border-radius: 50%;
  border: 2px solid var(--bar-fill);
  border-top-color: transparent;
  animation: spin 0.9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Botón cancelar dentro del botón principal */
.btn-progress__cancel {
  appearance: none;
  background: var(--chip-bg);
  color: var(--chip-text);
  border: 1px solid var(--chip-outline);
  border-radius: 8px;
  padding: 4px 8px;
  cursor: pointer;
  transition: background .15s ease;
}
.btn-progress__cancel:hover { background: var(--chip-bg-hover); }

/* ================== Filtros (si quieres pulirlos un poco) ================== */
.btn-filtro {
  background: var(--chip-bg);
  color: var(--chip-text);
  border: 1px solid var(--chip-outline);
  border-radius: 999px;
  padding: 6px 10px;
  margin: 4px 6px 0 0;
  cursor: pointer;
  transition: background .15s ease, transform .08s ease;
}
.btn-filtro:hover { background: var(--chip-bg-hover); }
.btn-filtro.activo {
  outline: 1px solid var(--chip-active-outline);
  font-weight: 700;
}
.btn-filtro.quitar { opacity: .9; }

/* Respeta preferencias de movimiento reducido */
@media (prefers-reduced-motion: reduce) {
  .btn-progress__fill { transition: none; }
  .btn-share-large, #paginator-top button, #paginator-bottom button { transition: none; }
}
/* --- Ajustes anti-overflow para el botón de progreso --- */
.btn-share-large {
  box-sizing: border-box;
}

/* Móvil: que el botón pueda ocupar el ancho completo y permitir wrap */
@media (max-width: 480px) {
  .btn-share-large { width: 100%; }

  .btn-progress {
    flex-wrap: wrap;      /* permite que la barra baje a la segunda línea */
    gap: 6px;
  }
  .btn-progress__bar {
    flex: 1 1 100%;       /* barra ocupa toda la línea si hace wrap */
    min-width: 0;         /* evita forzar ancho mínimo que cause overflow */
    margin-top: 4px;      /* separa visualmente en la segunda línea */
  }
  .btn-progress__cancel {
    padding: 4px 6px;
    font-size: 0.95em;
  }
}

/* Pantallas MUY angostas: quitar la palabra “Descargando…” */
@media (max-width: 360px) {
  .btn-progress__label { display: none; }
}

/* Ultra-compacto: si aún falta espacio, ocultar también el % */
@media (max-width: 320px) {
  .btn-progress__percent { display: none; }
}

/* Cinturón anti-scroll horizontal (por si acaso) */
html,body{ overflow-x:hidden; }