/*
  "Otros talleres" y la fila de taller.

  - La fila (una imagen pequeña, el texto y una flecha; toda la fila es el
    enlace) la usan el listado de /docoeduca/ y la sección "Otros talleres" de
    las páginas de Docoeduca.
  - Al final van las cuatro reglas de las tarjetas de la página de taller pago,
    que salen de Bootstrap y de style.css salvo lo que esos dos no traen.

  La fila vivía en el <style> de mainApp/docoeduca_lista.html y se movió aquí
  sin cambios cuando la sección empezó a usarla. Lo único nuevo son los valores
  de respaldo de cada var(--doco-...): --doco-verde-texto solo lo define el
  listado, y con el respaldo la fila no depende de qué página cargó qué. Sin
  respaldo, esa línea se ignora y el texto sale con el color y el tamaño que
  tenga la página. Los respaldos son los mismos valores que definen las páginas
  de Docoeduca, así que ahí no cambia nada.

  No fija tipografía a propósito: cada página pone la suya.

  Cambiar este archivo pide subir DS_ASSETS_VERSION: se enlaza con ?v= porque
  CloudFront lo sirve sin huella en el nombre.
*/

/* =========================================================
   La fila (compartida con el listado de /docoeduca/)
========================================================= */

/* La lista se separa con líneas finas y aire, no con tarjetas: así caben
   varios talleres en la pantalla de un teléfono y se ven de un vistazo. */
.doco-lista {
    list-style: none;
    margin: 0;
    padding: 0;
    border-bottom: 1px solid rgba(14, 47, 46, 0.12);
}

.doco-lista__item { border-top: 1px solid rgba(14, 47, 46, 0.12); }

/* Toda la fila es el enlace: un solo destino y un área de toque grande. */
.doco-item__link {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.1rem 0.25rem;
    text-decoration: none;
    color: inherit;
}

.doco-item__link:hover .doco-item__title,
.doco-item__link:focus-visible .doco-item__title { color: var(--p-morado, #7566db); }

.doco-item__link:focus-visible {
    outline: 3px solid var(--p-morado, #7566db);
    outline-offset: 2px;
    border-radius: 0.5rem;
}

.doco-item__media {
    flex-shrink: 0;
    width: 104px;
    border-radius: 0.6rem;
    overflow: hidden;
    background: var(--t-azulclaro, #ddfafe);
}

.doco-item__media img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

/* El logo de respaldo, cuando el taller no tiene imagen quieta. Va 'contain'
   y con aire: recortarlo como una foto lo dejaría partido por la mitad. */
.doco-item__media--logo {
    object-fit: contain;
    padding: 0.9rem;
    opacity: 0.85;
}

/* min-width:0 es lo que evita que un título largo empuje la fila y saque
   scroll horizontal en el teléfono. */
.doco-item__body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

/* La fecha es lo único con color en la fila: es el dato con el que una
   familia decide si puede o no. En el listado va primera; en "Otros talleres"
   va al final, después de si cuesta y del título.

   El respaldo #0b7a77 es el verde que define docoeduca_lista.html: 5.17 a 1
   sobre blanco. El #18b4b0 de la marca no llega al 4.5 que pide un texto de
   este tamaño. */
.doco-item__when {
    font-size: 0.8rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--doco-verde-texto, #0b7a77);
    margin: 0;
}

/* La hora de quien mira, como segunda línea bajo la fecha de la fila. Sigue el
   tamaño de la fila (0.8rem en el teléfono, 0.85rem de 576px arriba) en vez del
   suyo propio, para que las dos líneas se lean como un solo bloque; el peso
   normal y el gris la dejan por debajo de la fecha, que es la oficial. */
.doco-item__when .doco-hora-local {
    font-size: inherit;
    font-weight: 400;
    margin-top: 0.125rem;
}

.doco-item__title {
    font-size: var(--doco-fs-lead, 1.0625rem);
    font-weight: 800;
    line-height: 1.3;
    color: var(--gris-oscuro, #333);
    margin: 0;
    overflow-wrap: anywhere;
    transition: color 0.2s ease;
}

.doco-item__sub {
    font-size: var(--doco-fs-small, 0.85rem);
    line-height: 1.45;
    color: var(--gris, #666);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.doco-item__chevron {
    flex-shrink: 0;
    color: var(--gris, #666);
    transition: transform 0.2s ease;
}

.doco-item__link:hover .doco-item__chevron { transform: translateX(3px); }

@media (min-width: 576px) {
    .doco-item__link { gap: 1.25rem; padding: 1.35rem 0.25rem; }
    .doco-item__media { width: 168px; }
    .doco-item__title { font-size: 1.2rem; }
    .doco-item__when { font-size: 0.85rem; }
}

/* =========================================================
   "Otros talleres" en las páginas de Docoeduca
   (landings/principal/sections/otros_talleres.html y otros_talleres_lista.html)
========================================================= */

/* Título, lista y nota van contra el mismo borde izquierdo, también dentro de
   la tarjeta de un Docoeduca ya dictado, que centra todo lo demás. */
.otros-talleres { text-align: left; }

/* Margen de arriba en 0 y el de abajo solo en la nota: así el aire de arriba y
   el de abajo de la sección son los que le da su contenedor, iguales. */
.otros-talleres__titulo {
    font-size: var(--doco-fs-title, clamp(1.375rem, 3vw, 1.75rem));
    font-weight: 800;
    line-height: 1.2;
    color: var(--gris-oscuro, #333);
    margin: 0 0 0.75rem;
}

/* Primera línea de la fila: si cuesta o no. Mismo trato que los rótulos de
   Docoeduca (pequeño, en mayúsculas y espaciado), pero en gris y no en verde:
   el color de la fila se queda solo en la fecha. */
.doco-item__tipo {
    font-size: var(--doco-fs-label, 0.78rem);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    line-height: 1.3;
    color: var(--gris, #666);
    margin: 0;
}

/* Un título larguísimo no alarga la fila sin límite: a la tercera línea se
   corta con puntos suspensivos. Solo aquí; en el listado el título sale
   entero. */
.doco-lista--otros .doco-item__title {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* El logo de respaldo entero, sin recortar. La regla .doco-item__media--logo
   de arriba pide 'contain', pero pierde contra .doco-item__media img, que pesa
   más y pide 'cover'. En el listado casi no se nota, porque el logo de
   Docoeduca tiene casi la forma de la miniatura; el de Docokids es mucho más
   ancho y quedaba cortado por los dos lados. Se arregla solo aquí para no
   cambiar cómo se ve el listado. */
.doco-lista--otros .doco-item__media--logo { object-fit: contain; }

/* La misma nota del listado, pero escrita aquí entera y no con
   .doco-hero__note (docoeduca.css), que va en inline-flex: como caja en línea,
   el renglón que la envuelve le suma unos píxeles por debajo y el aire de
   abajo crece. margin-bottom en 0 por ser lo último de la sección: Bootstrap
   le pone 1rem a cada <p>. */
.otros-talleres__nota {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: var(--doco-fs-small, 0.85rem);
    color: var(--gris-oscuro, #333);
    margin: 1.25rem 0 0;
}

.otros-talleres__nota svg { flex-shrink: 0; }

/* En el teléfono, más ancho para el texto. Dentro de la tarjeta de Docoeduca
   la fila pierde el relleno de la tarjeta, y a 320px al título le quedaban
   84px: partía "Lactancia" por la mitad y cortaba casi todos los títulos en
   la tercera línea.
   - La miniatura baja a 88px (el listado usa 104).
   - La flecha se oculta: es decoración, porque toda la fila ya es el enlace.
   - El espacio entre imagen y texto baja a 0.75rem.
   Con eso la columna de texto pasa a 124px a 320 y a 179px a 375. Va con
   max-width para no repetir los valores de pantalla grande, donde la flecha y
   los 168px siguen saliendo de las reglas de arriba. */
@media (max-width: 575.98px) {
    .doco-lista--otros .doco-item__link { gap: 0.75rem; }
    .doco-lista--otros .doco-item__media { width: 88px; }
    .doco-lista--otros .doco-item__chevron { display: none; }
}

/* Docoeduca abierto: una segunda tarjeta bajo la del formulario, separada con
   el mismo espacio que hay entre grupos en el resto de la página. */
.otros-talleres--tarjeta { margin-top: var(--doco-gap-group, 1.75rem); }

/* =========================================================
   "Otros talleres" en la página de taller pago
   (landings/workshops/otros_talleres_tarjetas.html)

   Las tarjetas se arman con clases de Bootstrap, como discounts.html y
   reviews.html. Aquí va solo lo que Bootstrap 5.0 y style.css no traen.
========================================================= */

/* La foto llena la caja 16:9 de la tarjeta. Bootstrap 5.0 no trae utilidades
   de object-fit. El height va con !important porque style.css le pone
   height:auto !important a toda imagen, y eso le gana al height:100% de
   .ratio: la foto quedaba con su alto propio, pegada arriba de la caja o
   saliéndose de ella. */
.otros-talleres__foto {
    object-fit: cover;
    height: 100% !important;
}

/* El logo de respaldo entero y con aire: recortado como una foto quedaría
   partido. */
.otros-talleres__foto--logo {
    object-fit: contain;
    padding: 1.5rem;
}

/* Toda la tarjeta es el enlace, y el título cambia de color para que se note
   qué se va a abrir. --p_morado es el morado de esta landing (style.css), no
   el --p-morado de Docoeduca; el respaldo cubre el rato en que style.css, que
   carga sin bloquear la página, todavía no llegó. */
.otros-talleres__tarjeta:hover h3,
.otros-talleres__tarjeta:focus-visible h3 { color: var(--p_morado, #6b5bd8); }

.otros-talleres__tarjeta:focus-visible {
    outline: 3px solid var(--p_morado, #6b5bd8);
    outline-offset: 2px;
}