/* ============================================================================
   presenciales.css — 1.10.42 · LAS CAPACITACIONES PRESENCIALES Y EN VIVO (agente VI).
   Dos páginas: el catálogo (presenciales.php, raíz .vi-pres) y las fechas de una capacitación (fechas.php, raíz
   .vi-fechas). Como la referencia del dueño «Presenciales: catálogo y fechas»: la misma estética que el catálogo en
   línea (catalogo.css) y su tarjeta (tarjeta-curso.css) —letra Plus Jakarta Sans, fondo gris claro, tarjetas blancas
   de radio 11-14 px—, pero con los AZULES de esta parte (botones «Ver fechas» y «Solicitar cupo», la modalidad y la
   página elegidas, «+ N fechas más»), no el verde de la tienda. El azul de la referencia (#4F7DF0 aprox.) se oscurece
   lo justo (#3A6EEE) para que el texto blanco de los botones se lea (contraste 4,5:1).
   Todo con prefijo vi- (store.css, sections.css y pages.css no se tocan). Teléfono y tableta: diseño propio.
   ========================================================================== */

.vi-pres, .vi-fechas {
  --vi-tinta: #0F172A;
  --vi-gris: #64748B;
  --vi-gris-2: #94A3B8;
  --vi-gris-3: #475569;
  --vi-linea: #E6EAF0;
  --vi-fondo: #F6F8FA;
  --vi-azul: #3A6EEE;
  --vi-azul-osc: #2756CF;
  --vi-azul-claro: #EBF1FE;
  --vi-verde: #16A34A;
  --vi-verde-osc: #15803D;
  --vi-ambar: #B45309;
  --vi-rojo: #B42318;
  background: var(--vi-fondo);
  color: var(--vi-tinta);
  font-family: var(--font-display);
  padding: 26px 0 64px;
}
.vi-ico { flex: none; width: 16px; height: 16px; }
.vi-pres a:focus-visible, .vi-pres button:focus-visible, .vi-pres input:focus-visible, .vi-pres select:focus-visible,
.vi-fechas a:focus-visible, .vi-fechas button:focus-visible, .vi-fechas select:focus-visible {
  outline: 3px solid var(--vi-azul); outline-offset: 2px;
}

/* ------------------------------------------------------------------ botones */
.vi-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px; flex: none;
  height: 42px; padding: 0 18px; border: 0; border-radius: 10px;
  background: var(--vi-azul); color: #fff; text-decoration: none; cursor: pointer;
  font-family: var(--font-display); font-size: 13.5px; font-weight: 700; line-height: 1; white-space: nowrap;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.vi-btn:hover { background: var(--vi-azul-osc); color: #fff; }
.vi-btn .vi-ico { width: 15px; height: 15px; }
.vi-btn--linea { background: #fff; color: var(--vi-azul-osc); border: 1.5px solid var(--vi-azul); }
.vi-btn--linea:hover { background: var(--vi-azul-claro); color: var(--vi-azul-osc); }

/* ------------------------------------------------------------------ catálogo: la cabecera
   El título y, en su MISMA fila a la derecha, el selector; debajo, la bajada (pedido del dueño, 05/10). */
.vi-cab {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "titulo selector" "bajada .";
  align-items: center; column-gap: 24px; row-gap: 4px; margin-bottom: 22px;
}
/* Como «Cursos de seguridad operativa» del catálogo en línea: 29,5 px a 800. */
.vi-h { grid-area: titulo; min-width: 0; margin: 0; font-family: var(--font-display); font-size: 29.5px; font-weight: 800; line-height: 1.15; letter-spacing: -.005em; color: var(--vi-tinta); text-wrap: balance; }
.vi-sub { grid-area: bajada; margin: 0; font-size: 13.75px; font-weight: 500; line-height: 1.4; color: var(--vi-gris); }
.vi-sub b { font-weight: 700; color: var(--vi-tinta); }
.vi-cab .vi-switch { grid-area: selector; }

/* «En línea, a tu ritmo (10) | Presenciales y en vivo (4)»: el selector del catálogo en línea, con las mismas medidas. */
.vi-switch { display: flex; flex: none; gap: 0; padding: 4px; border-radius: 13px; background: #E3E8EF; }
.vi-switch__b {
  flex: 1 1 auto; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 46px; padding: 0 18px; border-radius: 10px; text-decoration: none;
  font-family: var(--font-display); font-size: 15px; font-weight: 600; line-height: 1.15; color: var(--vi-gris-3);
  transition: background .15s ease, color .15s ease;
}
.vi-switch__b .vi-ico { width: 16px; height: 16px; }
.vi-switch__b b {
  display: inline-grid; place-items: center; min-width: 24px; height: 23px; padding: 0 7px; border-radius: 999px;
  background: #D5DCE6; color: var(--vi-gris-3); font-size: 12px; font-weight: 800;
}
.vi-switch__b:hover { color: var(--vi-tinta); background: rgba(255, 255, 255, .5); }
.vi-switch__b.is-on { background: #fff; color: var(--vi-tinta); font-weight: 700; box-shadow: 0 1px 3px rgba(15, 23, 42, .1); }
.vi-switch__b.is-on b { background: var(--vi-azul); color: #fff; }

/* ------------------------------------------------------------------ los filtros */
.vi-filtros { display: flex; align-items: center; justify-content: space-between; gap: 12px 16px; flex-wrap: wrap; margin: 0 0 22px; }
.vi-pills { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.vi-pill {
  display: inline-flex; align-items: center; height: 38px; padding: 0 17px; border-radius: 999px;
  border: 1px solid #E3E8EE; background: #fff; color: var(--vi-gris-3); text-decoration: none; white-space: nowrap;
  font-family: var(--font-display); font-size: 13.5px; font-weight: 600; line-height: 1;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.vi-pill:hover { border-color: #C3CDDA; color: var(--vi-tinta); }
.vi-pill.is-on, .vi-pill.is-on:hover { background: var(--vi-azul); border-color: var(--vi-azul); color: #fff; }
.vi-pill.is-cero { color: var(--vi-gris-2); }
.vi-filtros__der { display: flex; align-items: center; gap: 10px; flex: 0 1 auto; min-width: 0; }

/* «Busca un curso…» (como el del catálogo en línea) */
.vi-buscar { position: relative; display: block; flex: 0 1 300px; width: 300px; min-width: 0; margin: 0; }
.vi-buscar .vi-ico { position: absolute; left: 15px; top: 50%; width: 15px; height: 15px; margin-top: -7.5px; color: var(--vi-gris-2); pointer-events: none; }
.vi-buscar input {
  width: 100%; height: 42px; margin: 0; padding: 0 12px 0 38px;
  border: 1px solid #E3E8EE; border-radius: 10px; background: #fff;
  font-family: var(--font-display); font-size: 13px; font-weight: 500; color: var(--vi-tinta);
  box-shadow: 0 1px 2px rgba(15, 23, 42, .03);
}
.vi-buscar input::placeholder { color: var(--vi-gris-2); opacity: 1; }
.vi-buscar input:hover { border-color: #CBD5E1; }
.vi-buscar input:focus { outline: none; border-color: var(--vi-azul); box-shadow: 0 0 0 3px rgba(58, 110, 238, .16); }

/* «Todas las ciudades» */
.vi-sel { position: relative; display: inline-flex; flex: none; margin: 0; }
.vi-sel select {
  -webkit-appearance: none; appearance: none;
  width: 212px; height: 42px; margin: 0; padding: 0 32px 0 36px;
  border: 1px solid #E3E8EE; border-radius: 10px; background: #fff;
  font-family: var(--font-display); font-size: 13px; font-weight: 600; color: var(--vi-tinta);
  text-overflow: ellipsis; white-space: nowrap; overflow: hidden; cursor: pointer;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .03);
}
.vi-sel select:hover { border-color: #CBD5E1; }
.vi-sel .vi-sel__ic { position: absolute; left: 13px; top: 50%; width: 15px; height: 15px; margin-top: -7.5px; color: var(--vi-gris-2); pointer-events: none; }
.vi-sel .vi-sel__fl { position: absolute; right: 12px; top: 50%; width: 14px; height: 14px; margin-top: -7px; color: var(--vi-tinta); pointer-events: none; }
.vi-aplicar { height: 42px; }

/* ------------------------------------------------------------------ la rejilla y la tarjeta */
.vi-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 22px; }
.vi-grid > [hidden] { display: none !important; }

.vi-card {
  position: relative; display: flex; flex-direction: column; min-width: 0; overflow: hidden;
  background: #fff; border: 1px solid #DDE2E8; border-radius: 11px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
/* Al pasar el ratón (o con el foco dentro): borde azul, sombra y un levantamiento mínimo, como la tarjeta en línea. */
.vi-card:hover, .vi-card:focus-within {
  border-color: var(--vi-azul);
  box-shadow: 0 0 0 .5px var(--vi-azul), 0 14px 30px -14px rgba(15, 23, 42, .28);
  transform: translateY(-2px);
}
.vi-card__media { position: relative; flex: none; height: 150px; overflow: hidden; background: #0E2245; }
.vi-card__media img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.vi-card__cuerpo { display: flex; flex-direction: column; flex: 1 1 auto; padding: 17px 20px 16px; }
.vi-card__meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 18px; }
.vi-card__cat {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 11px; font-weight: 800; line-height: 1.3; letter-spacing: .05em; text-transform: uppercase; color: var(--vi-verde);
}
.vi-card__dur { flex: none; display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 500; line-height: 1; color: var(--vi-gris); white-space: nowrap; }
.vi-card__dur .vi-ico { width: 14px; height: 14px; }
.vi-card__t {
  margin: 8px 0 0; font-family: var(--font-display); font-size: 17px; font-weight: 700; line-height: 1.27; letter-spacing: -.005em;
  color: var(--vi-tinta); text-wrap: pretty;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  min-height: calc(2 * 1.27em);
}
.vi-card__t a { color: inherit; text-decoration: none; }
/* Toda la tarjeta lleva a las fechas: el enlace del título se estira sobre ella; «Ver fechas» queda por encima. */
.vi-card__t a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.vi-card__t a:focus-visible { outline: none; }
.vi-card:has(.vi-card__t a:focus-visible) { outline: 3px solid var(--vi-azul); outline-offset: 2px; }

/* PRÓXIMAS FECHAS */
.vi-card__prox { margin-top: 14px; }
.vi-card__prox-t { margin: 0 0 3px; font-size: 10.5px; font-weight: 800; line-height: 1.3; letter-spacing: .08em; text-transform: uppercase; color: var(--vi-gris-2); }
.vi-card__fechas { list-style: none; margin: 0; padding: 0; }
.vi-cf {
  display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; align-items: center; gap: 10px;
  min-height: 37px; padding: 5px 0; border-bottom: 1px solid #EEF1F5;
}
.vi-cf[hidden] { display: none; }
.vi-cf__d { font-size: 13.5px; font-weight: 800; color: var(--vi-tinta); white-space: nowrap; }
.vi-cf__l { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 500; color: var(--vi-gris-3); }
.vi-card__mas { margin: 9px 0 0; font-size: 12.5px; font-weight: 700; line-height: 1.3; color: var(--vi-azul-osc); }
.vi-card__mas[hidden] { display: none; }

/* Las pastillas de modalidad: Presencial azul · En vivo rojo · Híbrido morado (las mismas de la página del curso). */
.vi-mod {
  display: inline-flex; align-items: center; flex: none; height: 22px; padding: 0 9px; border-radius: 999px;
  font-size: 11px; font-weight: 700; line-height: 1; white-space: nowrap;
}
.vi-mod--presencial { background: #EAF1FB; color: #2F5DA8; }
.vi-mod--en_vivo { background: #FDECEC; color: #B4372E; }
.vi-mod--hibrido { background: #F1EBFB; color: #6B47C4; }

/* El pie: «Desde $99.99» y «Ver fechas →» */
.vi-card__pie {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  min-height: 69px; margin-top: auto; padding: 14px 20px 13px;
  border-top: 1px solid #EDF0F4; background: #FAFBFD;
}
.vi-card__precio { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 0; line-height: 1; }
.vi-card__precio small { font-size: 11.5px; font-weight: 600; color: var(--vi-gris); }
.vi-card__precio b { font-size: 21px; font-weight: 800; letter-spacing: -.01em; color: var(--vi-tinta); white-space: nowrap; }
.vi-card__precio .vi-card__ref { font-size: 11px; }
.vi-card__precio [hidden] { display: none; }
.vi-card__cta { position: relative; z-index: 2; }

/* La paginación «‹ 1 2 3 ›», centrada debajo de la rejilla (y de la tabla de fechas): las medidas de la de la tienda
   (cuadros de 42 px, radio 11), con la página actual en azul. */
.vi-pager { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px; margin-top: 32px; }
.vi-pager[hidden] { display: none; }
.vi-pager__b {
  display: inline-grid; place-items: center; min-width: 42px; height: 42px; padding: 0 8px;
  border: 1.5px solid #DDE3EA; border-radius: 11px; background: #fff; color: var(--vi-tinta); text-decoration: none; cursor: pointer;
  font-family: var(--font-display); font-size: 14.5px; font-weight: 700; line-height: 1;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.vi-pager__b .vi-ico { width: 17px; height: 17px; }
.vi-pager__b:hover { border-color: var(--vi-azul); color: var(--vi-azul-osc); background: #fff; }
.vi-pager__b.is-on, .vi-pager__b.is-on:hover { background: var(--vi-azul); border-color: var(--vi-azul); color: #fff; }
.vi-pager__b[aria-disabled="true"], .vi-pager__b[disabled] { opacity: .38; pointer-events: none; cursor: default; }
.vi-pager__puntos { min-width: 18px; text-align: center; font-weight: 700; color: var(--vi-gris); }

/* Sin resultados / sin fechas */
.vi-vacio {
  display: grid; justify-items: center; gap: 10px; padding: 44px 20px; text-align: center;
  background: #fff; border: 1px solid #E9EDF2; border-radius: 14px; color: var(--vi-gris);
}
.vi-vacio[hidden] { display: none; }
.vi-vacio p { margin: 0; font-size: 15.5px; font-weight: 700; color: var(--vi-tinta); }
.vi-vacio small { max-width: 520px; font-size: 13.5px; font-weight: 500; line-height: 1.5; color: var(--vi-gris); }
.vi-vacio__ic { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--vi-azul-claro); color: var(--vi-azul); }
.vi-vacio__ic .vi-ico { width: 24px; height: 24px; }
.vi-vacio__acts { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 6px; }
.vi-curso + .vi-vacio { margin-top: 24px; }

/* ================================================================== fechas.php */
.vi-volver {
  display: inline-flex; align-items: center; gap: 4px; margin: 0 0 16px;
  font-size: 13.5px; font-weight: 600; color: var(--vi-gris-3); text-decoration: none;
}
.vi-volver .vi-ico { width: 16px; height: 16px; }
.vi-volver:hover { color: var(--vi-tinta); text-decoration: underline; text-underline-offset: 3px; }

/* La tarjeta del curso: imagen · «CATEGORÍA · CÓDIGO», título y datos · «Desde» y «Ver ficha del curso». */
.vi-curso {
  display: grid; grid-template-columns: 208px minmax(0, 1fr) auto; align-items: center; gap: 22px;
  padding: 14px 24px 14px 14px;
  background: #fff; border: 1px solid #E9EDF2; border-radius: 14px; box-shadow: 0 1px 2px rgba(15, 23, 42, .03);
}
.vi-curso__img { width: 208px; aspect-ratio: 16 / 9; height: auto; border-radius: 10px; object-fit: cover; background: #0E2245; }
.vi-curso__img--vacia { display: block; }
.vi-curso__info { min-width: 0; }
.vi-curso__cat { margin: 0; font-size: 11px; font-weight: 800; line-height: 1.3; letter-spacing: .06em; text-transform: uppercase; color: var(--vi-verde); }
.vi-curso__t { margin: 6px 0 0; font-family: var(--font-display); font-size: 23px; font-weight: 800; line-height: 1.22; letter-spacing: -.01em; color: var(--vi-tinta); text-wrap: balance; }
.vi-curso__datos { list-style: none; display: flex; align-items: center; flex-wrap: wrap; gap: 6px 0; margin: 10px 0 0; padding: 0; }
.vi-curso__datos li { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; line-height: 1.3; color: var(--vi-gris-3); white-space: nowrap; }
.vi-curso__datos li + li::before { content: ""; width: 1px; height: 13px; margin: 0 12px; background: #DCE2EA; }
.vi-curso__datos .vi-ico { width: 15px; height: 15px; color: var(--vi-gris); }
.vi-curso__lado { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.vi-curso__desde { display: flex; align-items: baseline; gap: 7px; white-space: nowrap; }
.vi-curso__desde small { font-size: 13px; font-weight: 600; color: var(--vi-gris); }
.vi-curso__desde b { font-size: 25px; font-weight: 800; letter-spacing: -.01em; color: var(--vi-tinta); }
.vi-curso__ref { font-size: 11.5px; font-weight: 600; color: var(--vi-gris); }

/* «Elige tu fecha · 7 fechas abiertas» y sus filtros */
.vi-elige { display: flex; align-items: center; justify-content: space-between; gap: 12px 16px; flex-wrap: wrap; margin: 30px 0 14px; }
.vi-elige__t { margin: 0; font-family: var(--font-display); font-size: 21px; font-weight: 800; line-height: 1.2; letter-spacing: -.005em; color: var(--vi-tinta); }
.vi-elige__n { font-size: 15px; font-weight: 600; color: var(--vi-gris); letter-spacing: 0; }
.vi-elige__f { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0; }

/* La tabla de fechas */
.vi-tabla-caja { background: #fff; border: 1px solid #E9EDF2; border-radius: 14px; overflow: hidden; box-shadow: 0 1px 2px rgba(15, 23, 42, .03); }
.vi-tabla { width: 100%; border-collapse: collapse; table-layout: auto; }
.vi-tabla th {
  padding: 12px 16px; background: #F8FAFC; border-bottom: 1px solid #E9EDF2; text-align: left; white-space: nowrap;
  font-family: var(--font-display); font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: .07em; text-transform: uppercase; color: var(--vi-gris);
}
.vi-tabla th:first-child, .vi-tabla td:first-child { padding-left: 22px; }
.vi-tabla th:last-child, .vi-tabla td:last-child { padding-right: 22px; }
.vi-tabla td { padding: 16px; border-top: 1px solid #EEF1F5; vertical-align: middle; font-size: 13.5px; line-height: 1.35; color: var(--vi-tinta); }
.vi-tabla tbody tr:first-child td { border-top: 0; }
.vi-tabla tbody tr[hidden] { display: none; }
.vi-tabla tbody tr:hover td { background: #FBFCFE; }
.vi-f-fecha b { display: block; font-size: 14.5px; font-weight: 800; white-space: nowrap; }
.vi-f-fecha small { display: block; margin-top: 3px; font-size: 12.5px; font-weight: 500; color: var(--vi-gris); }
.vi-f-lugar { min-width: 180px; }
.vi-f-lugar b { display: block; font-size: 13.5px; font-weight: 700; color: var(--vi-tinta); }
.vi-f-lugar small, .vi-f-lugar a { display: block; margin-top: 3px; font-size: 12.5px; font-weight: 500; color: var(--vi-gris); }
.vi-f-lugar a { text-decoration: underline; text-decoration-color: #C7D0DC; text-underline-offset: 2px; }
.vi-f-lugar a:hover { color: var(--vi-azul-osc); text-decoration-color: currentColor; }
.vi-f-hora { font-size: 13px; font-weight: 500; color: var(--vi-gris-3); }
.vi-f-precio { font-size: 15px; font-weight: 800; white-space: nowrap; }
.vi-f-precio small { display: block; margin-top: 2px; font-size: 11px; font-weight: 600; color: var(--vi-gris); }
.vi-f-act { text-align: right; white-space: nowrap; }
.vi-f-act .vi-btn { height: 40px; padding: 0 16px; }
.vi-ico-fila { display: none; }   /* los iconos de cada dato solo salen en las tarjetas del teléfono */

/* 1.10.47 · agente WA · «Quedan 4» (ámbar) · «Disponibles» (verde) · «Lleno · lista de espera» (rojo).
   Antes era un PUNTO DE COLOR delante de la palabra; la regla de diseño de esta ronda lo prohíbe en las etiquetas de
   estado («insignia con texto»), así que ahora es una insignia igual que la de la modalidad de al lado: el color sigue
   diciendo lo mismo, pero no depende de un punto que un daltónico no distingue. Solo se usa en fechas.php. */
.vi-cupo {
  display: inline-flex; align-items: center; flex: none; height: 22px; padding: 0 9px; border-radius: 999px;
  font-size: 11px; font-weight: 700; line-height: 1; white-space: nowrap;
}
.vi-cupo--ok { background: #E8F5EE; color: var(--vi-verde-osc); }
.vi-cupo--pocos { background: #FDF3E3; color: var(--vi-ambar); }
.vi-cupo--lleno { background: #FDECEC; color: var(--vi-rojo); }

.vi-fechas-vacio { margin: 0; padding: 28px 20px; text-align: center; font-size: 14px; font-weight: 600; color: var(--vi-gris-3); }
.vi-fechas-vacio[hidden] { display: none; }
.vi-fechas .vi-pager { margin-top: 20px; }

/* «Solicitar no reserva el cupo… Políticas de inscripción» */
.vi-nota { display: flex; align-items: flex-start; gap: 8px; margin: 16px 0 0; font-size: 13px; font-weight: 500; line-height: 1.5; color: var(--vi-gris-3); }
.vi-nota .vi-ico { width: 16px; height: 16px; margin-top: 2px; color: var(--vi-gris); }
.vi-nota a { font-weight: 700; color: var(--vi-azul-osc); text-decoration: underline; text-underline-offset: 2px; }
.vi-nota a:hover { color: var(--vi-tinta); }

/* ================================================================== anchos */
@media (max-width: 1279px) {
  .vi-tabla th, .vi-tabla td { padding-left: 12px; padding-right: 12px; }
  .vi-tabla th:first-child, .vi-tabla td:first-child { padding-left: 18px; }
  .vi-tabla th:last-child, .vi-tabla td:last-child { padding-right: 18px; }
}
@media (max-width: 1199px) {
  .vi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vi-filtros { align-items: stretch; }
  .vi-filtros__der { flex: 1 1 auto; justify-content: flex-end; }
  /* El título y el selector ya no caben en una fila: título, bajada y el selector a lo ancho. */
  .vi-cab { grid-template-columns: minmax(0, 1fr); grid-template-areas: "titulo" "bajada" "selector"; row-gap: 6px; }
  .vi-cab .vi-switch { margin-top: 10px; }
}

/* Tableta: la tabla de fechas pasa a tarjetas (no cabe con siete columnas). */
@media (max-width: 1023px) {
  .vi-switch { width: 100%; }
  .vi-curso { grid-template-columns: 168px minmax(0, 1fr); padding: 14px; }
  .vi-curso__img { width: 168px; }
  .vi-curso__lado { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: space-between; padding: 12px 4px 0; border-top: 1px solid #EEF1F5; }

  .vi-tabla-caja { background: transparent; border: 0; border-radius: 0; box-shadow: none; overflow: visible; }
  .vi-tabla, .vi-tabla tbody { display: block; }
  .vi-tabla thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .vi-tabla tbody { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .vi-tabla tbody tr {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto auto auto 1fr;
    grid-template-areas: "fecha mod" "lugar lugar" "hora hora" "cupo precio" "act act";
    gap: 0 12px; padding: 16px 18px 18px;
    background: #fff; border: 1px solid #E9EDF2; border-radius: 14px; box-shadow: 0 1px 2px rgba(15, 23, 42, .03);
  }
  .vi-tabla tbody tr:hover td { background: transparent; }
  .vi-tabla td, .vi-tabla td:first-child, .vi-tabla td:last-child { display: block; padding: 0; border: 0; }
  .vi-tabla .vi-f-fecha { grid-area: fecha; }
  .vi-tabla .vi-f-mod { grid-area: mod; align-self: start; }
  .vi-tabla .vi-f-lugar { grid-area: lugar; min-width: 0; margin-top: 14px; padding-top: 12px; border-top: 1px solid #EEF1F5; }
  .vi-tabla .vi-f-hora { grid-area: hora; margin-top: 9px; }
  .vi-tabla .vi-f-cupo { grid-area: cupo; align-self: center; margin-top: 14px; }
  .vi-tabla .vi-f-precio { grid-area: precio; align-self: center; margin-top: 14px; text-align: right; font-size: 17px; }
  .vi-tabla .vi-f-act { grid-area: act; align-self: end; margin-top: 14px; text-align: left; }
  .vi-tabla .vi-f-act .vi-btn { width: 100%; height: 44px; }
  .vi-tabla .vi-f-lugar, .vi-tabla .vi-f-hora { display: grid; grid-template-columns: 18px minmax(0, 1fr); column-gap: 8px; }
  .vi-ico-fila { display: block; width: 16px; height: 16px; margin-top: 1px; color: var(--vi-gris); grid-row: span 2; }
}
@media (max-width: 959px) {
  .vi-pres, .vi-fechas { padding: 20px 0 48px; }
  .vi-filtros { flex-direction: column; align-items: stretch; }
  .vi-filtros__der { justify-content: stretch; }
  .vi-buscar { flex: 1 1 auto; width: auto; }
  .vi-elige { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 767px) {
  .vi-tabla tbody { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 599px) {
  .vi-h { font-size: 24px; }
  .vi-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .vi-switch__b { padding: 0 10px; font-size: 13px; gap: 6px; text-align: center; }
  .vi-switch__b .vi-ico { display: none; }
  .vi-switch__b b { min-width: 21px; height: 21px; font-size: 11.5px; padding: 0 6px; }

  .vi-pager { gap: 6px; }
  .vi-pager__b { min-width: 40px; height: 40px; }

  /* Las cuatro pastillas en una sola fila, repartidas a lo ancho (si un idioma las alarga, la fila se desliza). */
  .vi-pills { flex-wrap: nowrap; gap: 6px; overflow-x: auto; padding: 2px 1px; scrollbar-width: none; }
  .vi-pills::-webkit-scrollbar { display: none; }
  .vi-pill { flex: 1 0 auto; justify-content: center; padding: 0 12px; }
  .vi-filtros__der { flex-direction: column; align-items: stretch; }
  .vi-sel, .vi-sel select { width: 100%; }

  .vi-curso { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .vi-curso__img { width: 100%; }
  .vi-curso__t { font-size: 20px; }
  /* Los datos se parten en dos líneas: sin rayitas separadoras (una al comienzo de la línea se ve suelta). */
  .vi-curso__datos { gap: 6px 16px; }
  .vi-curso__datos li + li::before { content: none; }
  .vi-curso__lado { flex-wrap: wrap; gap: 10px; }
  .vi-curso__lado .vi-btn { flex: 1 1 auto; }
  .vi-elige__t { font-size: 19px; }
  .vi-elige__f, .vi-elige__f .vi-sel { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .vi-card, .vi-card:hover, .vi-card:focus-within { transform: none; transition: none; }
}