/* =========================================================
   TALLERES PRE CONGRESO — COMPAC 2026
   Namespaced en #compac-talleres para no chocar con el tema
   GDLR del sitio publico (que trae .row / .columns propios).
   Misma paleta del programa (mod/programa-estilos.php).
   ========================================================= */

#compac-talleres {
    --t-primary: #23625f;
    --t-primary-2: #14403e;
    --t-accent: #059cbc;
    --t-ink: #1e2b3a;
    --t-muted: #6b7a8d;
    --t-border: #e6ecf3;
    --t-bg: #f4f7fa;
    font-family: 'Inter', 'Open Sans', 'Raleway', sans-serif;
    color: var(--t-ink);
}
#compac-talleres * { box-sizing: border-box; }
#compac-talleres .tal-wrap { max-width: 1080px; margin: 0 auto; padding: 0 18px; }

/* ---------- Intro ---------- */
#compac-talleres .tal-intro { max-width: 760px; margin: 0 auto 34px; text-align: center; }
#compac-talleres .tal-intro h2 { color: #fff; font-size: 30px; line-height: 1.3; font-weight: 700; margin: 0 0 14px; }
#compac-talleres .tal-intro p { color: rgba(255,255,255,.86); font-size: 16.5px; line-height: 1.65; margin: 0; }

/* ---------- Barra de filtros ---------- */
#compac-talleres .tal-filters {
    background: #fff; border: 1px solid var(--t-border); border-radius: 16px;
    box-shadow: 0 6px 20px rgba(9,32,31,.28);
    padding: 16px 18px; margin-bottom: 30px;
    display: grid; grid-template-columns: auto 1fr 1fr 1.4fr auto; gap: 12px; align-items: center;
}
#compac-talleres .tal-filters-label {
    font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
    color: var(--t-muted); white-space: nowrap;
}
#compac-talleres .tal-field {
    width: 100%; height: 44px; margin: 0; padding: 0 14px;
    border: 1px solid var(--t-border); border-radius: 10px; background: #fff;
    font-family: inherit; font-size: 14px; color: var(--t-ink); box-shadow: none;
    transition: border-color .18s, box-shadow .18s;
}
#compac-talleres select.tal-field {
    appearance: none; -webkit-appearance: none; -moz-appearance: none;
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7a8d' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 12px center; background-size: 16px;
    padding-right: 36px;
}
#compac-talleres .tal-field:focus {
    outline: none; border-color: var(--t-accent); box-shadow: 0 0 0 3px rgba(5,156,188,.16);
}
#compac-talleres .tal-field::placeholder { color: #9aa8b8; }
#compac-talleres .tal-reset {
    height: 44px; padding: 0 20px; border: 1px solid var(--t-border); border-radius: 10px;
    background: #f6f9fc; color: var(--t-primary); font-family: inherit; font-size: 13px;
    font-weight: 700; letter-spacing: .03em; cursor: pointer; white-space: nowrap;
    transition: background .18s, border-color .18s, color .18s;
}
#compac-talleres .tal-reset:hover { background: var(--t-primary); border-color: var(--t-primary); color: #fff; }

/* ---------- Rejilla de tarjetas ---------- */
/* Una sola columna: las tarjetas van horizontales, apiladas. */
#compac-talleres .tal-grid {
    display: flex; flex-direction: column; gap: 22px;
}

/* Horizontal: patrocinador a la izquierda, contenido a la derecha. La
   portada ya no ocupa esta columna: subio dentro del contenido, al lugar
   del titulo, porque el arte trae impresos el titulo y el experto. */
#compac-talleres .tal-card {
    display: grid; grid-template-columns: minmax(0, 30%) minmax(0, 1fr);
    align-items: stretch;
    background: #fff;
    border: 1px solid var(--t-border); border-radius: 18px; overflow: hidden;
    box-shadow: 0 6px 20px rgba(9,32,31,.26);
    transition: transform .22s ease, box-shadow .22s ease;
}
#compac-talleres .tal-card:hover { transform: translateY(-4px); box-shadow: 0 14px 32px rgba(9,32,31,.34); }
/* Sin patrocinador no se pinta .tal-aside: la tarjeta pasa a una sola columna
   para no dejar una franja vacia a la izquierda. */
#compac-talleres .tal-card-nosponsor { grid-template-columns: 1fr; }

/* Columna izquierda: solo el patrocinador, centrado vertical y
   horizontalmente. Sin fondo ni borde propios: la tarjeta se lee como una
   sola pieza blanca y el logo flota en ella. */
#compac-talleres .tal-aside {
    display: flex; align-items: center; justify-content: center;
    padding: 22px 14px;
}

/* El arte es panoramico (2.15:1) y lleva impreso el titulo y el experto:
   se muestra COMPLETO (contain) en vez de recortado (cover), que cortaba
   justo el lado del texto. El fondo azul disimula las franjas.
   Encabeza el contenido, en el lugar donde iba el titulo. */
#compac-talleres .tal-media { display: block; position: relative;
    margin-bottom: 14px; overflow: hidden; }
/* Al 65% del ancho del contenido (un 35% mas pequeña): el arte seguia
   pesando demasiado frente al titulo y los botones. Centrada, porque
   alineada a la izquierda dejaba un hueco visible a su derecha. */
#compac-talleres .tal-media img { display: block; width: 65%; max-width: 100%; height: auto;
    margin-left: auto; margin-right: auto;
    aspect-ratio: 2.15 / 1; object-fit: contain; object-position: center;
    background: #123a6b; border-radius: 12px; }
/* Sin zoom en hover: con contain el arte se saldria de su caja. */

/* Talleres sin portada: el titulo hace de encabezado. No se fuerza el
   2.15/1 del arte —un titulo corto dejaria un bloque de color casi vacio—;
   la caja crece con el texto a partir de un minimo. */
#compac-talleres .tal-media-txt {
    display: flex; align-items: center; min-height: 128px;
    padding: 22px 24px; border-radius: 12px; text-decoration: none;
    background: linear-gradient(135deg, var(--t-primary), var(--t-accent));
}
#compac-talleres .tal-media-title {
    font-size: 19px; line-height: 1.35; font-weight: 700; color: #fff;
    /* Un titulo largo no debe estirar la tarjeta ni desbordar en movil. */
    min-width: 0; overflow-wrap: anywhere;
}
#compac-talleres .tal-media-txt:hover .tal-media-title { text-decoration: underline; }

#compac-talleres .tal-body { display: flex; flex-direction: column; justify-content: center;
    min-width: 0; padding: 22px 26px; }

#compac-talleres .tal-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 12px; }
#compac-talleres .tal-tag {
    background: rgba(5,156,188,.1); color: var(--t-accent); border: 1px solid rgba(5,156,188,.25);
    font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
    padding: 4px 11px; border-radius: 999px;
}
/* Cupo limitado: solo contorno, en el verde de la marca (--nav-green del
   encabezado), con el texto un tono mas oscuro para que se lea a 10.5px.
   Agotado usa el rojo de siempre. */
#compac-talleres .tal-cupo,
#compac-talleres .tal-sold {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
    padding: 4px 11px; border-radius: 999px;
}
#compac-talleres .tal-cupo {
    padding: 3.5px 10.5px 3.5px 8.5px; background: transparent; border: 1.5px solid #39ac5f; color: #1f7a43;
}
#compac-talleres .tal-cupo svg { width: 13px; height: 13px; flex: 0 0 auto; color: #39ac5f; }
#compac-talleres .tal-sold { background: #c0392b; border: 1px solid #c0392b; color: #fff; }

/* Taller agotado: la portada se alinea a la izquierda, en linea con los
   rotulos, los expertos y los botones, y el sello "Agotado" ocupa el espacio
   que queda a su derecha, centrado en el. Nunca va sobre la portada: el arte
   es el unico lugar donde se lee el titulo del taller. El PNG ya viene
   inclinado; el giro extra es para que no se vea pegado. */
#compac-talleres .tal-head { display: flex; align-items: center; gap: 20px; margin-bottom: 14px; }
#compac-talleres .tal-head .tal-media { flex: 0 0 65%; margin-bottom: 0; }
#compac-talleres .tal-head .tal-media img { width: 100%; }
#compac-talleres .tal-stamp {
    display: block; flex: 0 1 180px; width: 180px; min-width: 0; height: auto;
    margin: 0 auto; transform: rotate(-6deg);
    pointer-events: none;
}
#compac-talleres .tal-card-agotado .tal-body { position: relative; }
#compac-talleres .tal-when { font-size: 12.5px; font-weight: 600; color: var(--t-muted); }
/* Sala del taller: mismo tamaño que la fecha, pero en el color de marca para
   que se distinga de ella a primera vista. */
#compac-talleres .tal-where {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 12.5px; font-weight: 700; color: var(--t-primary);
}
#compac-talleres .tal-where svg { width: 14px; height: 14px; flex: 0 0 auto; color: var(--t-accent); }

#compac-talleres .tal-title { font-size: 17px; line-height: 1.4; font-weight: 700; margin: 0 0 9px; }
/* El arte de portada ya muestra el titulo: aqui se oculta a la vista pero se
   mantiene para lectores de pantalla y para el filtro por texto. No se usa
   display:none, que lo sacaria tambien del arbol de accesibilidad. */
#compac-talleres .tal-title-sr {
    position: absolute; width: 1px; height: 1px; margin: -1px;
    padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
#compac-talleres .tal-title a { color: var(--t-ink); text-decoration: none; transition: color .18s; }
#compac-talleres .tal-title a:hover { color: var(--t-accent); }

#compac-talleres .tal-excerpt { font-size: 14px; line-height: 1.65; color: var(--t-muted); margin: 0 0 18px; }

#compac-talleres .tal-expert {
    display: flex; align-items: center; gap: 12px; margin-top: 14px;
    padding-top: 14px; border-top: 1px solid var(--t-border);
}
/* Segundo expositor: va pegado al primero, sin la linea ni el aire que
   separan el bloque de expertos del resto de la tarjeta. */
#compac-talleres .tal-expert + .tal-expert {
    margin-top: 8px; padding-top: 0; border-top: 0;
}
#compac-talleres .tal-avatar {
    width: 46px; height: 46px; border-radius: 50%; flex: 0 0 auto; object-fit: cover;
    border: 2px solid #fff; box-shadow: 0 2px 8px rgba(9,32,31,.2);
}
#compac-talleres .tal-avatar-ini {
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--t-primary), var(--t-accent));
    color: #fff; font-size: 14px; font-weight: 700;
}
#compac-talleres .tal-expert-txt { display: flex; flex-direction: column; min-width: 0; }
#compac-talleres .tal-expert-label {
    font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--t-muted);
}
#compac-talleres .tal-expert-name { font-size: 14.5px; font-weight: 600; color: var(--t-primary); }
#compac-talleres .tal-expert-name em { font-style: normal; font-weight: 500; color: var(--t-muted); }

#compac-talleres .tal-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
#compac-talleres .tal-btn,
#compac-taller-detalle .tal-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 11px 20px; border-radius: 999px; border: 1px solid transparent;
    font-size: 12.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
    text-decoration: none; cursor: pointer; font-family: inherit;
    transition: background .18s, color .18s, border-color .18s, box-shadow .18s, transform .18s;
}
#compac-talleres .tal-btn-main,
#compac-taller-detalle .tal-btn-main {
    background: var(--t-accent); color: #fff; box-shadow: 0 3px 10px rgba(5,156,188,.28);
}
#compac-talleres .tal-btn-main:hover,
#compac-taller-detalle .tal-btn-main:hover {
    background: var(--t-primary); color: #fff; box-shadow: 0 6px 16px rgba(35,98,95,.32); transform: translateY(-1px);
}
#compac-talleres .tal-btn-ghost,
#compac-taller-detalle .tal-btn-ghost { background: #fff; color: var(--t-primary); border-color: var(--t-border); }
#compac-talleres .tal-btn-ghost:hover,
#compac-taller-detalle .tal-btn-ghost:hover { border-color: var(--t-primary); background: #f2f8f8; color: var(--t-primary); }

/* ---------- Estado vacio ---------- */
#compac-talleres .tal-empty {
    grid-column: 1 / -1; background: #fff; border: 1px solid var(--t-border); border-radius: 18px;
    padding: 56px 24px; text-align: center; color: var(--t-muted);
    box-shadow: 0 6px 20px rgba(9,32,31,.22);
}
#compac-talleres .tal-empty svg { width: 40px; height: 40px; color: #b8c6d4; margin-bottom: 14px; }
#compac-talleres .tal-empty p { font-size: 16px; margin: 0 0 18px; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
    #compac-talleres .tal-filters { grid-template-columns: 1fr 1fr; }
    #compac-talleres .tal-filters-label { grid-column: 1 / -1; }
    #compac-talleres .tal-search, #compac-talleres .tal-reset { grid-column: 1 / -1; }
}
/* Por debajo de esto el patrocinador no cabe al lado del texto. Pasa DEBAJO
   (order) y no arriba: lo primero que debe verse es el taller, no la marca. */
@media (max-width: 860px) {
    #compac-talleres .tal-card { grid-template-columns: 1fr; }
    #compac-talleres .tal-aside { order: 2; padding: 4px 16px 20px; }
    #compac-talleres .tal-body { order: 1; }
    #compac-talleres .tal-sponsor-card .tal-sponsor-logo { max-height: 80px; }
    /* Apilada, la portada recupera el ancho completo: ya no compite con
       una columna al lado. */
    #compac-talleres .tal-media img { width: 100%; }
}
@media (max-width: 620px) {
    #compac-talleres .tal-intro h2 { font-size: 24px; }
    #compac-talleres .tal-intro p { font-size: 15px; }
    #compac-talleres .tal-filters { grid-template-columns: 1fr; padding: 14px; }
    #compac-talleres .tal-grid { gap: 18px; }
    #compac-talleres .tal-body { padding: 18px; }
    #compac-talleres .tal-actions .tal-btn { flex: 1; }
    /* En el celular la portada necesita todo el ancho para que se lea el
       titulo: el sello baja a la derecha de "Ver detalle", donde iba
       "Inscribirse", y el boton le deja su hueco. */
    #compac-talleres .tal-head { display: block; }
    #compac-talleres .tal-head .tal-media { margin-bottom: 14px; }
    #compac-talleres .tal-stamp { position: absolute; right: 16px; bottom: 12px; width: 96px; margin: 0; }
    #compac-talleres .tal-card-agotado .tal-actions { padding-right: 108px; }
}

/* =========================================================
   DETALLE DE TALLER - detalle-taller.php
   Los botones .tal-btn se comparten con el listado (sus reglas
   nombran los dos contenedores), por eso ambas paginas cargan
   esta misma hoja.
   ========================================================= */

#compac-taller-detalle {
    --t-primary: #23625f;
    --t-primary-2: #14403e;
    --t-accent: #059cbc;
    --t-ink: #1e2b3a;
    --t-muted: #6b7a8d;
    --t-border: #e6ecf3;
    font-family: 'Inter', 'Open Sans', 'Raleway', sans-serif;
    color: var(--t-ink);
    background: #f4f7fa;
}
#compac-taller-detalle * { box-sizing: border-box; }
#compac-taller-detalle .tdet-wrap { max-width: 1120px; margin: 0 auto; padding: 0 20px; }

/* ---------- Portada ---------- */
/* La portada sube 160px por detras del encabezado, igual que la banda de
   titulo de las demas paginas (margin-top:-160px en linea). El header es
   blanco y su velo oscuro solo se ve bien si la foto pasa por debajo: sin
   esto el menu quedaba sobre un degradado de oscuro a blanco.
   En escritorio el contenedor NO debe llevar overflow distinto de visible:
   eso lo vuelve un contexto de formato que esquiva los floats del header
   (logo y menu), y al subir quedaba angosto, encajonado entre ellos. El
   desborde horizontal ya lo recorta .body-wrapper (overflow:hidden). */
#compac-taller-detalle { margin-top: -160px; }
#compac-taller-detalle .tdet-hero { background-size: cover; background-position: center; color: #fff; padding: 220px 0 70px; }
#compac-taller-detalle .tdet-crumbs { font-size: 13px; margin-bottom: 26px; color: rgba(255,255,255,.62); }
#compac-taller-detalle .tdet-crumbs a { color: rgba(255,255,255,.9); text-decoration: none; transition: color .18s; }
#compac-taller-detalle .tdet-crumbs a:hover { color: #fff; text-decoration: underline; }
#compac-taller-detalle .tdet-crumbs span { margin: 0 8px; }
#compac-taller-detalle .tdet-crumbs .tdet-crumb-now { margin: 0; }

#compac-taller-detalle .tdet-hero-grid { display: grid; grid-template-columns: minmax(0,1fr) 280px; gap: 46px; align-items: start; }
#compac-taller-detalle .tdet-tag { display: inline-block; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.3); color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: 6px 14px; border-radius: 999px; margin-bottom: 18px; }
/* Rotulos sobre el titulo. "Cupo limitado" va solo con contorno, en el verde
   de la marca; sobre el fondo oscuro de la portada el texto va en un verde
   claro, que es el que se lee ahi. */
#compac-taller-detalle .tdet-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 18px; }
#compac-taller-detalle .tdet-tags .tdet-tag { margin-bottom: 0; }
#compac-taller-detalle .tdet-cupo {
    display: inline-flex; align-items: center; gap: 7px;
    background: transparent; border: 1.5px solid #39ac5f; color: #7fdc9c;
    font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
    padding: 5.5px 13.5px 5.5px 11.5px; border-radius: 999px;
}
#compac-taller-detalle .tdet-cupo svg { width: 15px; height: 15px; flex: 0 0 auto; }
#compac-taller-detalle .tdet-title { overflow-wrap: break-word; color: #fff; font-size: 38px; line-height: 1.25; font-weight: 700; margin: 0 0 24px; text-transform: none; letter-spacing: normal; }
#compac-taller-detalle .tdet-facts { list-style: none; margin: 0 0 26px; padding: 0; display: flex; flex-wrap: wrap; gap: 12px 26px; }
#compac-taller-detalle .tdet-facts li { display: flex; align-items: center; gap: 9px; font-size: 15px; color: rgba(255,255,255,.92); }
#compac-taller-detalle .tdet-facts svg { width: 19px; height: 19px; flex: 0 0 auto; opacity: .8; }

#compac-taller-detalle .tdet-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
#compac-taller-detalle .tal-btn-light { background: rgba(255,255,255,.1); color: #fff; border-color: rgba(255,255,255,.36); }
#compac-taller-detalle .tal-btn-light:hover { background: #fff; color: var(--t-primary); border-color: #fff; }
#compac-taller-detalle .tdet-sold { display: inline-block; background: #c0392b; color: #fff; font-size: 13px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; padding: 11px 22px; border-radius: 999px; margin: 0; }

#compac-taller-detalle .tdet-hero-card { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.2); border-radius: 18px; padding: 26px 22px; text-align: center; display: flex; flex-direction: column; align-items: center; }
#compac-taller-detalle .tdet-hero-photo { width: 118px; height: 118px; border-radius: 50%; object-fit: cover; border: 3px solid rgba(255,255,255,.85); box-shadow: 0 6px 18px rgba(0,0,0,.3); margin-bottom: 16px; }
#compac-taller-detalle .tdet-hero-ini { display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--t-primary), var(--t-accent)); color: #fff; font-size: 34px; font-weight: 700; }
#compac-taller-detalle .tdet-hero-label { font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.6); margin-bottom: 5px; }
#compac-taller-detalle .tdet-hero-name { font-size: 17px; font-weight: 700; color: #fff; line-height: 1.35; }
#compac-taller-detalle .tdet-hero-country { font-size: 13.5px; color: rgba(255,255,255,.75); margin-top: 7px; display: inline-flex; align-items: center; gap: 7px; }

/* Cada expositor del recuadro. El rotulo ("Expertos a cargo") va una sola vez
   arriba, fuera de estos bloques, y cada persona trae su foto y su nombre. */
#compac-taller-detalle .tdet-hero-person {
    display: flex; flex-direction: column; align-items: center; margin-top: 12px;
}
/* Con dos expositores las fotos bajan de tamaño para que el recuadro no
   crezca mas que el titulo del taller que tiene al lado. */
#compac-taller-detalle .tdet-hero-card-duo .tdet-hero-photo {
    width: 88px; height: 88px; margin-bottom: 12px;
}
#compac-taller-detalle .tdet-hero-card-duo .tdet-hero-name { font-size: 15.5px; }
#compac-taller-detalle .tdet-hero-card-duo .tdet-hero-person + .tdet-hero-person {
    margin-top: 20px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.18);
    width: 100%;
}

/* ---------- Contenido ---------- */
#compac-taller-detalle .tdet-body { padding: 56px 0 70px; }
#compac-taller-detalle .tdet-cols { display: grid; grid-template-columns: minmax(0,1fr) 340px; gap: 40px; align-items: start; }

#compac-taller-detalle .tdet-main { background: #fff; border: 1px solid var(--t-border); border-radius: 18px; padding: 38px 40px; box-shadow: 0 6px 20px rgba(9,32,31,.08); }
#compac-taller-detalle .tdet-h2 { font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--t-accent); margin: 0 0 18px; padding-bottom: 12px; border-bottom: 1px solid var(--t-border); }
#compac-taller-detalle .tdet-main .tdet-h2:not(:first-child) { margin-top: 44px; }

#compac-taller-detalle .tdet-rich { font-size: 16px; line-height: 1.75; color: #3d4b5c; }
#compac-taller-detalle .tdet-rich p { margin: 0 0 16px; font-size: 16px; line-height: 1.75; color: #3d4b5c; }
#compac-taller-detalle .tdet-rich p:last-child { margin-bottom: 0; }
#compac-taller-detalle .tdet-rich ul, #compac-taller-detalle .tdet-rich ol { margin: 0 0 16px; padding-left: 22px; }
#compac-taller-detalle .tdet-rich li { margin-bottom: 8px; line-height: 1.7; }
#compac-taller-detalle .tdet-rich strong, #compac-taller-detalle .tdet-rich b { color: var(--t-ink); font-weight: 700; }
#compac-taller-detalle .tdet-rich img { max-width: 100%; height: auto; border-radius: 10px; }
#compac-taller-detalle .tdet-rich a { color: var(--t-accent); }

#compac-taller-detalle .tdet-expert { display: flex; align-items: center; gap: 18px; margin-bottom: 20px; }
#compac-taller-detalle .tdet-expert-photo { width: 84px; height: 84px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; border: 3px solid #fff; box-shadow: 0 3px 12px rgba(9,32,31,.18); }
#compac-taller-detalle .tdet-expert-txt h3 { margin: 0 0 4px; font-size: 19px; font-weight: 700; color: var(--t-primary); }
#compac-taller-detalle .tdet-expert-sub { margin: 0; font-size: 14.5px; color: var(--t-muted); line-height: 1.55; }

/* ---------- Panel de inscripcion ---------- */
#compac-taller-detalle .tdet-side { position: sticky; top: 24px; }
#compac-taller-detalle .tdet-panel { background: #fff; border: 1px solid var(--t-border); border-radius: 18px; padding: 28px 26px; box-shadow: 0 6px 20px rgba(9,32,31,.1); border-top: 4px solid var(--t-accent); }
#compac-taller-detalle .tdet-panel h3 { margin: 0 0 20px; font-size: 19px; font-weight: 700; color: var(--t-ink); }
#compac-taller-detalle .tdet-dl { margin: 0 0 22px; }
#compac-taller-detalle .tdet-dl dt { font-size: 10.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--t-muted); margin-bottom: 3px; }
#compac-taller-detalle .tdet-dl dd { margin: 0 0 14px; font-size: 15px; font-weight: 600; color: var(--t-ink); padding-bottom: 14px; border-bottom: 1px solid var(--t-border); }
#compac-taller-detalle .tdet-dl dd:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }

#compac-taller-detalle .tdet-panel-note { font-size: 14px; line-height: 1.6; color: var(--t-muted); margin: 0 0 18px; }
#compac-taller-detalle .tdet-panel-sold { color: #c0392b; font-weight: 600; }
/* Sello "Agotado" en el panel de inscripcion, sobre el aviso en texto. */
#compac-taller-detalle .tdet-stamp {
    display: block; width: 190px; max-width: 70%; height: auto;
    margin: 4px auto 18px; transform: rotate(-4deg);
}
/* Aviso de cupo junto al boton de inscripcion: es donde se decide inscribirse. */
#compac-taller-detalle .tdet-cupo-note {
    display: flex; align-items: center; gap: 10px; margin: 0 0 16px; padding: 11px 14px;
    background: transparent; border: 1.5px solid #39ac5f; border-radius: 10px;
    font-size: 13.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #1f7a43;
}
#compac-taller-detalle .tdet-cupo-note svg { width: 18px; height: 18px; flex: 0 0 auto; color: #39ac5f; }
#compac-taller-detalle .tdet-btn-block { display: flex; width: 100%; margin-bottom: 10px; }
#compac-taller-detalle .tdet-btn-block:last-of-type { margin-bottom: 0; }
#compac-taller-detalle .tdet-panel-foot { margin: 18px 0 0; padding-top: 16px; border-top: 1px solid var(--t-border); font-size: 13.5px; color: var(--t-muted); }
#compac-taller-detalle .tdet-panel-foot a { color: var(--t-accent); font-weight: 600; }

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
    #compac-taller-detalle .tdet-hero-grid { grid-template-columns: 1fr; gap: 30px; }
    #compac-taller-detalle .tdet-hero-card { text-align: left; align-items: stretch; }
    /* En pantalla angosta cada expositor pasa a fila: foto a la izquierda,
       nombre y pais a la derecha. */
    #compac-taller-detalle .tdet-hero-person {
        flex-direction: row; flex-wrap: wrap; align-items: center; gap: 0 18px;
    }
    /* El bloque de texto debe poder encogerse: sin esto el nombre largo
       del experto estira la tarjeta y desborda la pantalla. */
    #compac-taller-detalle .tdet-hero-card .tdet-hero-label,
    #compac-taller-detalle .tdet-hero-card .tdet-hero-name,
    #compac-taller-detalle .tdet-hero-card .tdet-hero-country { min-width: 0; overflow-wrap: anywhere; }
    #compac-taller-detalle .tdet-hero-photo,
    #compac-taller-detalle .tdet-hero-card-duo .tdet-hero-photo { width: 84px; height: 84px; margin-bottom: 0; }
    #compac-taller-detalle .tdet-hero-ini { font-size: 26px; }
    #compac-taller-detalle .tdet-cols { grid-template-columns: 1fr; }
    #compac-taller-detalle .tdet-side { position: static; }
}
/* Movil: el header tiene fondo propio y va apilado encima de la portada
   (css/mobile.css hace lo mismo con las demas paginas), asi que aqui no sube
   y el recorte horizontal no molesta. */
@media only screen and (max-width: 959px) {
    #compac-taller-detalle { margin-top: 0; overflow-x: hidden; }
    #compac-taller-detalle .tdet-hero { padding-top: 150px; }
}
@media (max-width: 620px) {
    #compac-taller-detalle .tdet-hero { padding: 130px 0 50px; }
    #compac-taller-detalle .tdet-title { font-size: 26px; }
    #compac-taller-detalle .tdet-facts { gap: 10px 18px; }
    #compac-taller-detalle .tdet-facts li { font-size: 14px; }
    #compac-taller-detalle .tdet-hero-actions .tal-btn { flex: 1; }
    #compac-taller-detalle .tdet-body { padding: 34px 0 46px; }
    #compac-taller-detalle .tdet-main { padding: 26px 20px; }
    #compac-taller-detalle .tdet-expert { flex-direction: column; align-items: flex-start; gap: 14px; }
    #compac-taller-detalle .tdet-panel { padding: 22px 18px; }
}

/* =========================================================
   PATROCINADOR DEL TALLER
   Dos contextos: la tarjeta del listado (variante "card",
   discreta) y la ficha del taller (variante "hero", grande).
   El programa pinta este mismo bloque, pero no carga este
   archivo: sus reglas estan en mod/programa-estilos.php.
   ========================================================= */

#compac-talleres .tal-sponsor,
#compac-taller-detalle .tal-sponsor {
    display: flex; flex-direction: column; align-items: center; text-align: center;
    background: #fff; border: 1px solid var(--t-border); border-radius: 14px;
}

#compac-talleres .tal-sponsor-label,
#compac-taller-detalle .tal-sponsor-label {
    font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
    color: var(--t-muted);
}

#compac-talleres .tal-sponsor-logo,
#compac-taller-detalle .tal-sponsor-logo {
    display: block; width: auto; max-width: 100%; object-fit: contain;
}

#compac-talleres .tal-sponsor-link,
#compac-taller-detalle .tal-sponsor-link {
    display: block; max-width: 100%; line-height: 0; text-decoration: none;
    transition: transform .18s, opacity .18s;
}
#compac-talleres .tal-sponsor-link:hover,
#compac-taller-detalle .tal-sponsor-link:hover { transform: translateY(-2px); opacity: .88; }

#compac-talleres .tal-sponsor-name,
#compac-taller-detalle .tal-sponsor-name {
    font-size: 13.5px; font-weight: 600; color: var(--t-primary);
}

/* ---------- Variante tarjeta: ocupa la columna izquierda ---------- */
/* Sin borde ni fondo propios: la tarjeta es una sola pieza blanca y el
   logo va suelto sobre ella. */
#compac-talleres .tal-sponsor-card {
    gap: 12px; width: 100%; padding: 0; background: none; border: 0;
}
#compac-talleres .tal-sponsor-card .tal-sponsor-logo { max-height: 120px; }
#compac-talleres .tal-sponsor-card .tal-sponsor-name { font-size: 14.5px; font-weight: 700; }

/* ---------- Variante grande: ficha del taller ---------- */
#compac-taller-detalle .tal-sponsor-hero {
    gap: 14px; margin-top: 34px; padding: 28px 24px;
    box-shadow: 0 4px 16px rgba(9,32,31,.08);
}
#compac-taller-detalle .tal-sponsor-hero .tal-sponsor-logo { max-height: 140px; }
#compac-taller-detalle .tal-sponsor-hero .tal-sponsor-name { font-size: 17px; font-weight: 700; }

@media (max-width: 620px) {
    #compac-taller-detalle .tal-sponsor-hero { padding: 20px 16px; }
    #compac-taller-detalle .tal-sponsor-hero .tal-sponsor-logo { max-height: 95px; }
}