/* =========================================================
   flex.css (corregido y depurado)
   - PC: pestañas expandibles
   - Responsive: 1 tarjeta + flechas
   - Textos del wrap: blancos
   - Footer: blanco real y full-width
   - Barra footer: azul igual header GOV.CO
   ========================================================= */

:root{
  --bg:#0b0f14;

  /* blanco real */
  --text:#ffffff;
  --muted:rgba(255,255,255,.80);

  --line:rgba(255,255,255,.10);
  --accent:#34b5a9;
  --shadow:0 18px 60px rgba(0,0,0,.45);
  --radius:18px;

  --mobile-nav-h: 72px;
  --read-max: 1120px;

  /* Ajusta si tu header usa otro azul exacto */
  --govco-blue:#3366CC;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }

body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;

  /* textos blancos (interactivo) */
  color:var(--text);

  background:
    radial-gradient(1200px 700px at 18% 8%, rgba(52,181,169,.18), transparent 60%),
    radial-gradient(900px 700px at 90% 30%, rgba(255,255,255,.06), transparent 60%),
    var(--bg);
}

/* =========================================================
   WRAP
   se elimina min-height:100vh (causa “sensación de overlay” sobre footer)
   ========================================================= */
.wrap{
  padding:18px 22px 24px;
  display:flex;
  flex-direction:column;
  gap:14px;

  color: var(--text);
}

/* ===== INTRO ===== */
.topIntro{
  border:1px solid var(--line);
  border-radius:var(--radius);
  background: linear-gradient(180deg, rgba(15,23,34,.92), rgba(15,23,34,.78));
  box-shadow:var(--shadow);
  overflow:hidden;
}

.topIntro__inner{
  padding:18px 20px;
  display:grid;
  grid-template-columns: 340px 1fr;
  gap:18px;
  align-items:start;
  max-width: calc(var(--read-max) + 340px);
}

.topIntro__brand{ display:flex; align-items:center; gap:12px; }

.topIntro__kicker{
  font-size:12.5px;
  color:rgba(255,255,255,.80);
  text-transform:uppercase;
  letter-spacing:.55px;
}
.topIntro__title{
  font-size:19px;
  font-weight:950;
  line-height:1.08;
  color:#fff;
}

.topIntro__text{ max-width: var(--read-max); }
.topIntro__text h1{
  margin:0 0 10px;
  font-size: clamp(20px, 1.5vw, 26px);
  font-weight:950;
  letter-spacing:-0.2px;
  color:#fff;
}
.topIntro__text p{
  margin:0 0 10px;
  font-size: clamp(15px, 1.15vw, 18px);
  line-height:1.62;
  color:var(--muted);
}

/* ===== LAYOUT ===== */
.layout{
  display:grid;
  grid-template-columns: 340px 1fr;
  gap:14px;
  align-items:stretch;
}

/* ===== SIDEBAR ===== */
.side{
  border:1px solid var(--line);
  border-radius:var(--radius);
  background: linear-gradient(180deg, rgba(15,23,34,.92), rgba(15,23,34,.80));
  box-shadow:var(--shadow);
  padding:14px;
  display:flex;
  flex-direction:column;
  gap:12px;
}

.side__nav{ display:flex; flex-direction:column; gap:9px; }

.navbtn{
  text-align:left;
  width:100%;
  padding:12px 12px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.04);
  color:#fff;
  cursor:pointer;
  font-size:14px;
  line-height:1.2;
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
}
.navbtn:hover{
  transform: translateY(-1px);
  background:rgba(255,255,255,.06);
  border-color:rgba(255,255,255,.16);
}
.navbtn.is-active{
  border-color: rgba(52,181,169,.55);
  box-shadow: 0 0 0 2px rgba(52,181,169,.18) inset;
}

.side__hint{
  margin-top:auto;
  padding-top:12px;
  border-top:1px solid var(--line);
  font-size:12.5px;
  color:rgba(255,255,255,.70);
}

/* ===== PANEL ===== */
.panel{
  position:relative;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background: rgba(9,12,18,.55);
  backdrop-filter: blur(10px);
  box-shadow:var(--shadow);
  overflow:hidden;
  min-height: 640px;
}

.tabs{
  height:100%;
  display:flex;
  align-items:stretch;
}

/* ===== TAB ===== */
.tab{
  position:relative;
  flex:1 1 0;
  min-width:90px;
  overflow:hidden;
  border-left: 1px solid rgba(255,255,255,.06);

  background-image: var(--bg);
  background-size: cover;
  background-position: center;

  filter: saturate(.95) contrast(1.02);
  cursor:pointer;

  transition:
    flex .55s cubic-bezier(.2,.9,.2,1),
    filter .25s ease,
    opacity .25s ease;
}
.tab:first-child{ border-left:0; }

.tab::before{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.18), rgba(0,0,0,.74));
}

/* ===== HEADER DESKTOP ===== */
.tab__head{
  position:absolute;
  top: clamp(12px, 1.2vw, 18px);
  left: clamp(12px, 1.2vw, 18px);
  right: clamp(12px, 1.2vw, 18px);

  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap: 10px;

  z-index:2;
  pointer-events:none;
}

.tab__num{
  font-weight: 950;
  font-size: clamp(38px, 3.4vw, 72px);
  line-height: 1;
  padding: clamp(10px, 1vw, 14px) clamp(12px, 1vw, 18px);
  min-width: clamp(60px, 5vw, 96px);
  text-align:center;

  background: rgba(0,0,0,.30);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 16px;
  backdrop-filter: blur(6px);
  color:#fff;
}

.tab__ttl{
  writing-mode: vertical-rl;
  transform: rotate(180deg);

  font-weight: 900;
  font-size: clamp(16px, 1.55vw, 26px);
  line-height: 1.05;

  color: rgba(255,255,255,.95);

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;

  padding: 8px 6px;
  border-radius: 12px;
  background: rgba(0,0,0,.18);
  border: 1px solid rgba(255,255,255,.10);

  opacity: 1;
  visibility: visible;
  transition: opacity .18s ease, visibility .18s ease;
}

/* Ocultar título cuando está activa (DESKTOP) */
.tab.is-active .tab__ttl{
  opacity:0;
  visibility:hidden;
}

/* ===== BODY ===== */
.tab__body{
  position:absolute;
  left: clamp(12px, 1.2vw, 20px);
  right: clamp(12px, 1.2vw, 20px);
  bottom: clamp(12px, 1.2vw, 20px);
  z-index:2;

  background: rgba(10,14,20,.66);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 18px;
  padding: clamp(14px, 1.3vw, 22px);

  max-height: calc(100% - clamp(120px, 10vw, 170px));
  overflow:auto;

  opacity:0;
  transform: translateY(10px);
  transition: opacity .22s ease, transform .22s ease;
}

.tab__h2{
  margin:0 0 10px;
  font-size: clamp(22px, 2.0vw, 36px);
  line-height: 1.12;
  color:#fff;
}

.tab__body p,
.tab__body li{
  font-size: clamp(16px, 1.2vw, 20px);
  line-height: 1.55;
  color: rgba(255,255,255,.88);
}
/*.tab__body ul{ margin:10px 0 0 20px; }*/
/*.tab__body li{ margin:8px 0; }*/

.tab__body ul{
  margin: 10px 0 0 0;            /* sin margen lateral extra */
  padding-left: 1.35em;          /* ancho de columna reservado para viñeta */
  list-style-position: outside;  /* viñeta fuera del bloque de texto */
  text-indent: -1.35em;          /* cuelga la viñeta hacia la izquierda */
}

.tab__body li{
  margin: 8px 0;
  text-indent: 0;                /* asegura que el texto del li no herede indent raro */
}

.tab__body::-webkit-scrollbar{ width:10px; }
.tab__body::-webkit-scrollbar-thumb{
  background: rgba(255,255,255,.18);
  border-radius: 999px;
  border: 2px solid rgba(0,0,0,.25);
}

/* ===== ACTIVE ===== */
.tab.is-active{
  flex: 6.5 1 0;
  filter:saturate(1.05) contrast(1.06);
}
.tab.is-active .tab__body{
  opacity:1;
  transform: translateY(0);
}
.tab:focus-visible{
  outline:none;
  box-shadow: 0 0 0 3px rgba(52,181,169,.35) inset;
}

/* ===== MOBILE NAV (flechas) ===== */
.mobileNav{
  display:none;
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height: var(--mobile-nav-h);
  padding: 10px 12px;

  background: linear-gradient(180deg, rgba(0,0,0,.00), rgba(0,0,0,.55));
  backdrop-filter: blur(10px);
  border-top: 1px solid rgba(255,255,255,.12);

  align-items:center;
  justify-content:space-between;
  gap:10px;

  z-index:80;
}

.arrow{
  width:54px;
  height:50px;
  border-radius:16px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(0,0,0,.28);
  color: rgba(255,255,255,.92);
  cursor:pointer;
  font-size: 32px;
  display:flex;
  align-items:center;
  justify-content:center;
  user-select:none;

  /* Neutraliza estilos de Bootstrap */
  appearance:none;
  -webkit-appearance:none;
}

/* Fuerza mismo fondo/estilo para play/pause y flechas (y sus estados) */
.mobileNav .arrow{
  background: rgba(0,0,0,.28) !important;
  background-image: none !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  color: rgba(255,255,255,.92) !important;
  box-shadow: none !important;
}

.mobileNav .arrow:hover,
.mobileNav .arrow:focus,
.mobileNav .arrow:active{
  background: rgba(0,0,0,.35) !important;
  border-color: rgba(255,255,255,.20) !important;
  box-shadow: none !important;
  outline: none !important;
}

/* IMPORTANTE: al ser focus-visible antes, le devolvemos el anillo accesible sin azul */
.arrow:focus-visible{
  outline:none !important;
  box-shadow: 0 0 0 3px rgba(52,181,169,.35) !important;
}

.arrow:active{ transform: scale(.98); }

.mobileNav__status{
  font-weight: 950;
  letter-spacing: .2px;
  color: rgba(255,255,255,.92);
  background: rgba(0,0,0,.22);
  border: 1px solid rgba(255,255,255,.14);
  padding: 8px 12px;
  border-radius: 999px;
}

/* =========================================================
   RESPONSIVE (<= 980px)
   Se mantiene: 1 tarjeta visible + flechas
   Se oculta .tab__ttl cuando la tarjeta está activa
   ========================================================= */

@media (max-width: 1200px){
  .topIntro__inner{
    grid-template-columns: 1fr;
    max-width: none;
  }

  .layout{
    grid-template-columns: 1fr;
  }

  .panel{
    min-height: 560px;
  }

  .mobileNav{ display:flex; }

  /* Solo 1 tab visible */
  .tab{
    display:none;
    min-width:0;
    border-left:0;
    opacity: 0; /*nuevo*/
  }

  .tab.is-active{
    display:block;
    width:100%;
    opacity: 1; /*nuevo*/
  }

  /* Reserva espacio para la barra inferior */
  .tab__body{
    bottom: calc(var(--mobile-nav-h) + 12px);
    max-height: calc(100% - (var(--mobile-nav-h) + 112px));
  }

  /* Título horizontal en responsive */
  .tab__ttl{
    writing-mode: horizontal-tb;
    transform: none;
    font-size: clamp(16px, 3.6vw, 26px);
    padding: 8px 10px;
    opacity:1;
    visibility:visible;
  }

  /* ✅ Oculta el título si está activa (como pediste) */
  .tab.is-active .tab__ttl{
    opacity:0;
    visibility:hidden;
  }

  .tab__num{
    font-size: clamp(40px, 8vw, 74px);
    min-width: clamp(66px, 14vw, 112px);
  }
}

@media (max-width: 520px){
  .panel{ min-height: 520px; }
  .tab__h2{ font-size: clamp(20px, 5.2vw, 30px); }
  .tab__body p, .tab__body li{ font-size: clamp(15px, 3.8vw, 18px); }
}

/* =========================================================
   FOOTER
   blanco real, sin “trama” encima
   full width (aunque te quede container por error)
   barra azul igual al encabezado
   ========================================================= */

/* Fuerza full-width aunque el footer quede con class="container" */
#pie{
  width:100% !important;
  max-width:none !important;
  margin-left:0 !important;
  margin-right:0 !important;
  padding-left:0 !important;
  padding-right:0 !important;

  background:#fff !important;
  color:#111 !important;

  position:relative;
  z-index:10;
}

/* Asegura blanco en bloques GOV.CO */
#pie .govco-footer,
#pie .govco-data-front,
#pie .govco-footer-text,
#pie .govco-listado-sedes{
  background:#fff !important;
}

/* Texto del footer en negro */
#pie p,
#pie .govco-text-header-1,
#pie .govco-text-header-2,
#pie .govco-text-header-3,
#pie .govco-link-modal{
  color:#111 !important;
}

/* Links */
#pie a{ color:#0d6efd !important; }
#pie a:hover{ text-decoration: underline; }

/* Barra azul inferior igual al header */
#pie .govco-footer-logo{
  width:100% !important;
  margin:0 !important;
  background: var(--govco-blue) !important;
}

/* El mt-4 a veces crea “corte” visual con el fondo oscuro */
#pie .govco-footer.mt-4{
  margin-top:0 !important;
}

/* =========================================================
   FIX DEFINITIVO: NUNCA AZUL EN FLECHAS NI PLAY/PAUSE
   (Bootstrap/GOV.CO pueden pintar por focus/active/aria-pressed)
   ========================================================= */

/* Base: mata cualquier background shorthand (lo más importante) */
.mobileNav .arrow,
.mobileNav .arrow#btnPlayPause,
.mobileNav button.arrow,
.mobileNav button.arrow#btnPlayPause{
  background: rgba(0,0,0,.28) !important;   /* shorthand gana a background-color */
  background-color: rgba(0,0,0,.28) !important;
  background-image: none !important;
  border-color: rgba(255,255,255,.16) !important;
  color: rgba(255,255,255,.92) !important;

  box-shadow: none !important;
  outline: none !important;

  -webkit-appearance: none !important;
  appearance: none !important;

  /* iOS/Android tap highlight (a veces se percibe como “fondo”) */
  -webkit-tap-highlight-color: transparent !important;
}

/* TODOS los estados posibles (incluye aria-pressed) */
.mobileNav .arrow:hover,
.mobileNav .arrow:focus,
.mobileNav .arrow:focus-visible,
.mobileNav .arrow:active,
.mobileNav .arrow#btnPlayPause:hover,
.mobileNav .arrow#btnPlayPause:focus,
.mobileNav .arrow#btnPlayPause:focus-visible,
.mobileNav .arrow#btnPlayPause:active,
.mobileNav .arrow#btnPlayPause[aria-pressed="true"],
.mobileNav .arrow#btnPlayPause[aria-pressed="false"]{
  background: rgba(0,0,0,.28) !important;
  background-color: rgba(0,0,0,.28) !important;
  background-image: none !important;
  border-color: rgba(255,255,255,.16) !important;

  box-shadow: none !important;
  outline: none !important;
}

/* Si Bootstrap/GOV.CO mete un foco azul por box-shadow en buttons, lo anulamos */
.mobileNav .arrow:focus,
.mobileNav .arrow:focus-visible{
  box-shadow: none !important;
}

/* Si por accidente llega a tener clases btn* (Bootstrap), lo aplastamos igual */
.mobileNav .arrow.btn,
.mobileNav .arrow.btn-primary,
.mobileNav .arrow.btn-secondary,
.mobileNav .arrow.btn-outline-primary,
.mobileNav .arrow.btn-outline-secondary{
  background: rgba(0,0,0,.28) !important;
  background-color: rgba(0,0,0,.28) !important;
  background-image: none !important;
  border-color: rgba(255,255,255,.16) !important;
  box-shadow: none !important;
}