/**
 * Archivo: assets/css/categoria.css
 * Módulo: shop-core — estilos de la página de categoría de producto
 * (astra-child/woocommerce/taxonomy-product_cat.php).
 *
 * Carga solo en páginas de categoría de producto (ver
 * includes/assets-categoria.php), no en el resto del sitio.
 *
 * Usa las variables de assets/css/variables.css (--sc-gold, --sc-bg,
 * etc.), igual que cabecera-pie.css e inicio.css.
 */

.sc-categoria {
    background: var(--sc-bg);
    color: var(--sc-text);
    font-family: var(--sc-font-body);
    flex: 1 1 0%;
    min-height: 0;
    /* Sin scroll en la página entera (decisión de Javier): la cabecera
       de categoría y las pestañas se quedan fijas arriba, y el panel
       activo se reparte el espacio vertical restante. overflow-y:auto
       se deja como red de seguridad, no como comportamiento normal —
       en uso normal no debería llegar a activarse, porque la imagen y
       el texto de cada entrada se encogen/hacen scroll interno para
       caber siempre en el hueco disponible. */
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    padding: 1.5rem 3rem 4rem;
}

/* ===== Cabecera de categoría =====
   30/9/2026, a petición de Javier: sin la frase de descripción y con el título
   más pequeño (antes --sc-fs-hero, 38-48px), para que la rejilla suba. */
.sc-categoria-hero {
    max-width: 720px;
    margin: 0 auto 1.5rem;
    text-align: center;
    flex-shrink: 0;
}

.sc-categoria-titulo {
    font-family: var(--sc-font-title);
    font-size: var(--sc-fs-page-title);
    color: var(--sc-gold);
    font-weight: 700;
    margin: 0;
}

/* ===== Pestañas ===== */
.sc-tabs {
    display: flex;
    justify-content: flex-start;
    gap: 2rem;
    flex-wrap: wrap;
    margin-bottom: 2.5rem;
    flex-shrink: 0;
}

.sc-tab-btn {
    background: none;
    border: none;
    outline: none;
    box-shadow: none;
    color: var(--sc-muted);
    font-family: var(--sc-font-body);
    font-size: var(--sc-fs-nav);
    letter-spacing: 2px;
    text-transform: uppercase;
    font-weight: 500;
    padding: 0 0 6px;
    cursor: pointer;
    position: relative;
    transition: color 0.2s;
}

.sc-tab-btn::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: var(--sc-gold);
    transform: scaleX(0);
    transition: transform 0.2s;
}

.sc-tab-btn:hover { color: var(--sc-text); }

.sc-tab-btn.sc-tab-activa {
    color: var(--sc-gold);
}

.sc-tab-btn.sc-tab-activa::after,
.sc-tab-btn:hover::after {
    transform: scaleX(1);
}

/* ===== Paneles ===== */
.sc-tab-panel { display: none; }
.sc-tab-panel.sc-tab-panel-activa {
    display: flex;
    flex-direction: column;
    flex: 1 1 0%;
    min-height: 0;
}

/* ===== Filtro por tipo (Todos / Espadas / Dagas…) =====
   30/9/2026: fila de botones al principio de la pestaña "Productos", solo
   para visitantes y clientes — ver includes/categoria/categoria-tipos.php.
   Son enlaces (?sc_tipo=DAG): cada tipo es una página propia. */
.sc-tipos {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.6rem;
    margin-bottom: 1.8rem;
    flex-shrink: 0;
}
.sc-tipo-btn,
.sc-tipo-btn:visited {
    font-family: var(--sc-font-body);
    font-size: var(--sc-fs-small);
    letter-spacing: 0.6px;
    text-decoration: none !important;
    border-radius: 999px;
    padding: 0.4rem 1rem;
    border: 1px solid rgba(var(--sc-gold-rgb), 0.3);
    color: var(--sc-muted) !important;
    background: none;
    transition: color 0.2s, border-color 0.2s, background 0.2s;
}
.sc-tipo-btn:hover,
.sc-tipo-btn:focus {
    color: var(--sc-text) !important;
    border-color: rgba(var(--sc-gold-rgb), 0.7);
}
.sc-tipo-btn.sc-tipo-activo {
    color: var(--sc-gold) !important;
    border-color: var(--sc-gold);
    background: rgba(var(--sc-gold-rgb), 0.1);
}

/* Título de cada colección (botón "Colecciones"): ocupa toda la fila de la
   rejilla, así cada colección empieza en una fila nueva. */
.sc-coleccion-titulo {
    grid-column: 1 / -1;
    margin: 1rem 0 0;
    padding-bottom: 0.4rem;
    border-bottom: 1px solid rgba(var(--sc-gold-rgb), 0.25);
    font-family: var(--sc-font-title);
    font-size: var(--sc-fs-title);
    font-weight: 600;
    color: var(--sc-gold);
    text-transform: none;
}
.sc-coleccion-titulo:first-child { margin-top: 0; }

.sc-categoria-vacio {
    text-align: center;
    color: var(--sc-muted);
    font-size: var(--sc-fs-small);
    padding: 3rem 0;
}

/* ===== Grid de productos =====
   5/9/2026, a petición de Javier ("me abre una segunda página pero
   quedan 3 huecos"): antes era repeat(auto-fill, minmax(260px, 1fr)) —
   el nº de columnas dependía del ancho (5-6 en monitor grande) y, con
   12 productos por página, 12 no es múltiplo de 5 → la última fila
   quedaba coja y aun así había paginación. Ahora el nº de columnas es
   FIJO por tramo de ancho (1 / 2 / 4 / 5 — se salta el 3 a propósito) y
   'posts_per_page' es 20 en taxonomy-product_cat.php: 20 es múltiplo de
   1, 2, 4 y 5, así que la última fila siempre queda completa en
   cualquier pantalla. Se mantiene el aspect-ratio 4/3 de la tarjeta. */
.sc-productos-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}
@media (min-width: 620px)  { .sc-productos-grid { grid-template-columns: repeat(2, 1fr); } }
/* 24/9/2026, a petición de Javier: la foto de la tarjeta se ve ENTERA en
   proporción 3:4 (antes 4:3 recortada). Para que una fila siga cabiendo
   sin bajar la página, las columnas dejan de estirarse: tope de 270px por
   tarjeta y la rejilla centrada. */
@media (min-width: 1000px) { .sc-productos-grid { grid-template-columns: repeat(4, minmax(0, 270px)); justify-content: center; } }
@media (min-width: 1560px) { .sc-productos-grid { grid-template-columns: repeat(5, minmax(0, 270px)); } }

/* Pantallas BAJAS (portátiles 1366x768: ~650px útiles de alto). Historial:
   24/9/2026 se pasó a 6 columnas; 25/9/2026 se probó volver a 4 y las tarjetas
   salían enormes ("estaba mejor cuando eran seis") — se deja en 6 columnas,
   con el scroll de TODA la página (Javier: "el scroll en pantallas pequeñas se
   debe hacer sobre toda la página"). Para que las filas salgan siempre
   completas, la plantilla pide 60 productos por página (60 es múltiplo de 1, 2,
   4, 5 y 6 columnas). El panel de Productos toma su alto natural y la rejilla
   no hace scroll por dentro: es <main class="sc-categoria"> quien se desplaza,
   con la cabecera y el pie fijos. */
@media (min-width: 1000px) and (max-height: 800px) {
    .sc-productos-grid {
        grid-template-columns: repeat(6, minmax(0, 1fr));
        gap: 1rem;
        overflow: visible;
        min-height: auto;
        grid-auto-rows: auto;
    }
    /* Solo el panel de Productos: los demás (Historia, Eventos...) tienen sus
       propias zonas con scroll interno y necesitan seguir ocupando el hueco. */
    .sc-tab-panel.sc-tab-panel-activa[data-panel="productos"] { flex: 0 0 auto; }
}

.sc-producto-card {
    /* 24/9/2026, a petición de Javier: el nombre va DENTRO de la foto (abajo,
       sobre un degradado oscuro) y el precio debajo. Foto y nombre comparten
       la misma celda de la rejilla (grid-area 1/1); así la tarjeta mide siempre
       foto + una línea de precio, sea cual sea la longitud del nombre. */
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    text-decoration: none;
    background: var(--sc-surface);
    border: 1px solid rgba(var(--sc-gold-rgb), 0.15);
    border-radius: 6px;
    overflow: hidden;
    transition: border-color 0.2s, transform 0.2s;
}

.sc-producto-card:hover {
    border-color: var(--sc-gold);
    transform: translateY(-2px);
}

.sc-producto-img {
    grid-area: 1 / 1;
    /* 25 agosto 2026: antes era un <div style="background-image">, sin
       alt posible (SEO/accesibilidad, a petición de Javier) — ahora es
       un <img> de verdad casi siempre (o este mismo div vacío, como
       fallback, cuando el producto no tiene foto). display:block +
       width:100% + object-fit hacen que un <img> real se comporte
       visualmente IGUAL que el fondo de antes. */
    display: block;
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    background-color: rgba(255, 255, 255, 0.04);
}

.sc-producto-nombre {
    grid-area: 1 / 1;
    align-self: end;
    position: relative;
    font-size: var(--sc-fs-card);
    color: #fff;
    font-weight: 600;
    padding: 2.6rem 1rem 0.8rem;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.82) 55%, rgba(0, 0, 0, 0.9));
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}

/* SKU (16/9/2026, a petición de Javier; 28/9/2026: pasa de ir entre
   paréntesis tras el nombre a una etiqueta en la esquina superior derecha
   de la foto — ver .sc-producto-esquina más abajo). */
.sc-producto-sku {
    font-weight: 400;
    color: rgba(255, 255, 255, 0.75);
    font-size: var(--sc-fs-caption);
}

.sc-producto-precio {
    /* Centrado (16/9/2026, a petición de Javier) — antes seguía la
       alineación por defecto (izquierda, heredada del nombre). */
    text-align: center;
    /* 31 agosto 2026, a petición de Javier ("el precio debe de ser
       algo mayor") — antes usaba --sc-fs-nav (11px), más pequeño que
       el propio nombre; ahora un tamaño fijo por encima del nombre
       (16px vs. los 14px de --sc-fs-card), para que sea lo primero que
       se lea después del título, no un dato secundario.
       padding-bottom 1rem (mismo día, ronda posterior: "lo del stock
       [...] eso lo quiero quitar [...] eso ya se verá cuando pulse el
       propio producto") — antes ese margen inferior de la tarjeta lo
       aportaba el bloque de stock que iba debajo; al quitarlo, el
       precio recupera ese hueco para que la tarjeta no quede cortada
       de golpe. */
    font-size: clamp(12.80px, calc(9.139px + 0.2680vw), 16px);
    color: var(--sc-gold);
    font-weight: 700;
    padding: 0.7rem 1rem 0.8rem;
}

/* ===== Paginación ===== */
.sc-paginacion {
    display: flex;
    justify-content: center;
    gap: 0.4rem;
    margin-top: 2.5rem;
}

.sc-paginacion .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 34px;
    padding: 0 8px;
    border: 1px solid rgba(var(--sc-gold-rgb), 0.25);
    border-radius: 4px;
    color: var(--sc-muted);
    text-decoration: none;
    font-size: var(--sc-fs-nav);
}

.sc-paginacion .page-numbers.current {
    background: var(--sc-gold);
    color: var(--sc-bg);
    border-color: var(--sc-gold);
}

.sc-paginacion .page-numbers:hover:not(.current) {
    border-color: var(--sc-gold);
    color: var(--sc-gold);
}

/* ===== Creación inline (Autor/Administrador) ===== */
.sc-editor-crear {
    margin-bottom: 1.5rem;
    flex-shrink: 0;
}

.sc-editor-btn-nueva {
    background: none;
    border: 1px dashed rgba(var(--sc-gold-rgb), 0.4);
    color: var(--sc-gold);
}

.sc-editor-btn-nueva:hover {
    border-color: var(--sc-gold);
    background: rgba(var(--sc-gold-rgb), 0.08);
}

/* 4/9/2026 — fila que agrupa "+ Nueva entrada" y, solo para
   Administrador, "Carga masiva de datos" (ver taxonomy-product_cat.php,
   dentro de .sc-editor-crear) — mismo criterio que .sc-producto-crear-fila
   en producto.css para la pestaña Productos. El aspecto "deshabilitado"
   de Carga masiva (.sc-editor-btn-carga-masiva) vive en producto.css,
   que se carga siempre en esta misma plantilla (is_product_category()),
   así que no hace falta repetirlo aquí. */
.sc-editor-crear-botones {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
}

/* Resultado de la carga masiva (4/9/2026, ver assets/js/carga-masiva-eventos.js)
   — resumen de creados/omitidos/avisos tras subir el Excel. white-space:
   pre-line respeta los saltos de línea que arma el JS (uno por bloque:
   Creados/Omitidos/Avisos) sin tener que montar HTML con <br> a mano. */
.sc-carga-masiva-mensaje {
    margin: 0.6rem 0 0;
    font-size: var(--sc-fs-nav);
    color: var(--sc-muted);
    white-space: pre-line;
    max-width: 720px;
}
.sc-carga-masiva-mensaje:empty {
    margin: 0;
}
.sc-carga-masiva-mensaje-error {
    color: #e07a5f;
}

.sc-editor-form {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    background: var(--sc-surface);
    border: 1px solid rgba(var(--sc-gold-rgb), 0.25);
    border-radius: 6px;
    padding: 1.2rem;
}

.sc-editor-form-grid {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 1.2rem;
}

.sc-editor-form-izquierda {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}

/* 29/8/2026 (Ajuste v1.21, a petición de Javier: "no puede ser tan
   grande, debe presentarse en un recuadro más pequeño, como en la
   pantalla de inicio... son fotos de gran tamaño pero se presentan en
   un recuadro perfecto") — antes era width:100% sin alto fijo, así que
   una foto de gran resolución se veía enorme (tan ancha como su
   columna, de alto lo que tocara según su proporción). Ahora es un
   recuadro fijo, recortado con object-fit:cover (no se deforma), igual
   de tamaño se suba lo que se suba — mismo criterio que ya usan las
   miniaturas de la galería (.sc-producto-galeria-item-imagen) y de
   fuentes.fr (.sc-producto-fuentesfr-imagen-item img), solo que más
   grande por ser LA foto principal, no una miniatura secundaria. */
.sc-editor-imagen-actual {
    display: block;
    width: 180px;
    height: 180px;
    object-fit: cover;
    border-radius: 4px;
}

.sc-editor-titulo,
.sc-editor-titulo-editar,
.sc-editor-texto,
.sc-editor-texto-editar {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(var(--sc-gold-rgb), 0.2);
    border-radius: 4px;
    color: var(--sc-text);
    font-family: var(--sc-font-body);
    font-size: var(--sc-fs-small);
    padding: 0.6rem 0.8rem;
    resize: vertical;
}

.sc-editor-texto,
.sc-editor-texto-editar {
    width: 100%;
    min-height: 220px;
}

.sc-editor-titulo:focus,
.sc-editor-titulo-editar:focus,
.sc-editor-texto:focus,
.sc-editor-texto-editar:focus {
    outline: none;
    border-color: var(--sc-gold);
}

/* Numeral de "¿Sabías qué?" (25 agosto 2026) — sustituye al <input>
   de título en editar/validar/corregir: mismo hueco visual que un
   campo relleno, pero de solo lectura (el numeral no se puede
   cambiar desde aquí). Solo lo ve el equipo, nunca el cliente. */
.sc-editor-titulo-numeral {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(var(--sc-gold-rgb), 0.2);
    border-radius: 4px;
    color: var(--sc-gold);
    font-family: var(--sc-font-body);
    font-size: var(--sc-fs-small);
    font-weight: 600;
    padding: 0.6rem 0.8rem;
    margin: 0 0 0.75rem;
}

.sc-editor-label-imagen {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    font-size: var(--sc-fs-nav);
    color: var(--sc-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.sc-editor-imagen {
    color: var(--sc-muted);
    font-size: var(--sc-fs-nav);
}

/* El <input type="file"> real se queda accesible (foco/teclado/lectores
   de pantalla siguen llegando a él) pero invisible — el control nativo
   del navegador ("Seleccionar archivo") no se puede traducir vía
   IdiomaKit porque lo pinta el propio navegador en SU idioma, no en el
   de la página. .sc-editor-imagen-btn de aquí abajo es el sustituto
   traducible que lo dispara por JS (categoria.js). */
.sc-editor-imagen-input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.sc-editor-imagen-control {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    text-transform: none;
    letter-spacing: normal;
}

.sc-editor-imagen-btn {
    background: transparent;
    border: 1px solid rgba(var(--sc-gold-rgb), 0.4);
    color: var(--sc-gold);
    font-family: var(--sc-font-body);
    font-size: var(--sc-fs-nav);
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 0.3rem 0.7rem;
    border-radius: 3px;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}

.sc-editor-imagen-btn:hover {
    background: rgba(var(--sc-gold-rgb), 0.12);
}

.sc-editor-imagen-nombre {
    color: var(--sc-muted);
    font-size: var(--sc-fs-nav);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 220px;
}

/* ===== Campos propios de Eventos (4/9/2026, ver includes/eventos/
   eventos-campos.php) — fecha inicio/fin, lugar, URL del evento, en el
   formulario de crear/editar/validar/corregir una entrada de la pestaña
   'eventos'. Mismo aspecto de caja que el resto de campos de este
   formulario (.sc-editor-titulo etc., arriba), reutilizando los mismos
   tokens de color. ===== */
.sc-evento-campos {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin-top: 0.6rem;
}
.sc-evento-campos-fecha {
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
}
.sc-evento-campos-fecha .sc-evento-etiqueta {
    flex: 1 1 130px;
}
.sc-evento-etiqueta {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    font-size: var(--sc-fs-nav);
    color: var(--sc-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
}
.sc-evento-campo-fecha-inicio,
.sc-evento-campo-fecha-fin,
.sc-evento-campo-lugar,
.sc-evento-campo-url {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(var(--sc-gold-rgb), 0.2);
    border-radius: 4px;
    color: var(--sc-text);
    font-family: var(--sc-font-body);
    font-size: var(--sc-fs-small);
    padding: 0.5rem 0.7rem;
}
.sc-evento-campo-fecha-inicio:focus,
.sc-evento-campo-fecha-fin:focus,
.sc-evento-campo-lugar:focus,
.sc-evento-campo-url:focus {
    outline: none;
    border-color: var(--sc-gold);
}

/* ===== Bloque público del evento (lo ve cualquier visitante, ficha ya
   publicada) — fecha/lugar + botón "Más información". ===== */
.sc-evento-info-publica {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.8rem;
    margin: 0.3rem 0 1rem;
}
.sc-evento-fecha-lugar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1.2rem;
    margin: 0;
    /* 4/9/2026, a petición de Javier ("ser mas visible la fecha y el
       lugar que se distinga mejor") — antes usaba el mismo gris apagado
       y 11px que un texto secundario cualquiera, y se perdía de vista
       junto al resto de la ficha. Ahora usa el color de texto PRINCIPAL
       (máximo contraste contra el fondo oscuro) en vez de --sc-muted, un
       tamaño mayor y peso semi-negrita — se lee como un dato destacado
       de la ficha, no como una nota al margen. */
    color: var(--sc-text);
    font-size: var(--sc-fs-small);
    font-weight: 600;
}
.sc-evento-fecha,
.sc-evento-lugar {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.sc-evento-fecha i,
.sc-evento-lugar i {
    color: var(--sc-gold);
    font-size: clamp(13.60px, calc(9.710px + 0.2848vw), 17px);
}
/* 5/9/2026, a petición de Javier ("cuando se pulsa el botón de mas
   información luego se queda en negro y no se ve") — mismo problema y
   mismo motivo que ya se corrigió en los enlaces del texto
   (.sc-detalle-texto a, más abajo): es un <a>, no un <button> (abre en
   pestaña nueva), así que en cuanto se visita el navegador le aplica el
   color de "enlace visitado" que trae el tema/Astra — casi negro sobre
   este fondo oscuro, y sin !important gana a var(--sc-gold) de aquí.
   Se fija el color en los tres estados (normal/visitado/hover-foco) con
   !important, igual que en aquella otra corrección. */
.sc-evento-btn-mas-info,
.sc-evento-btn-mas-info:visited {
    display: inline-flex;
    align-items: center;
    background: none;
    border: 1px solid var(--sc-gold);
    color: var(--sc-gold) !important;
    text-decoration: none;
    font-family: var(--sc-font-body);
    font-size: clamp(11.20px, calc(7.997px + 0.2345vw), 14px);
    letter-spacing: 0.6px;
    text-transform: uppercase;
    font-weight: 600;
    border-radius: 4px;
    padding: 0.42rem 0.85rem;
    transition: background 0.2s, color 0.2s;
}
.sc-evento-btn-mas-info:hover,
.sc-evento-btn-mas-info:focus {
    background: var(--sc-gold);
    color: var(--sc-bg) !important;
}

/* Crédito de imagen — texto pequeño y discreto, exigido por las
   licencias CC que trae la carga masiva (ver docblock de
   sc_evento_texto_credito() en eventos-campos.php). 4/9/2026, a
   petición de Javier: vivía DENTRO de la columna estrecha de la imagen
   (.sc-detalle-imagen-col) y un crédito largo se partía en muchas
   líneas altas y apretadas — ahora es su propia línea a todo el ancho,
   debajo del bloque imagen+texto (ver sc_render_detalle_entrada_categoria()),
   así que ya no necesita encajar en un hueco estrecho. */
.sc-evento-credito-imagen {
    margin: 0.6rem 0 0;
    font-size: clamp(11.20px, calc(7.997px + 0.2345vw), 14px);
    color: var(--sc-muted);
    opacity: 0.75;
}

/* Combobox de país — pestaña Eventos, solo cliente/visitante (5/9/2026,
   ver taxonomy-product_cat.php / sc_evento_pais_por_idioma()). Va
   arriba del todo del panel, antes de la lista de eventos.
   IMPORTANTE (mismo día, corregido tras verlo en el navegador real: "no
   me puedes poner un combobox de este tamaño, es una salvajada") — dos
   causas juntas, las dos anuladas aquí: 1) .sc-tab-panel-activa es un
   flex column SIN align-items propio, así que por defecto (stretch)
   estiraba a CUALQUIER hijo directo suyo al ancho completo del panel —
   de ahí que el <label> entero midiera el ancho de toda la pantalla;
   arreglado con align-self: flex-start, que sale de ese estirado. 2) el
   tema/WooCommerce trae además una regla global de formularios que pone
   width:100% a cualquier <select> — anulada aparte con width/max-width
   fijos en el propio <select>, más abajo. */
.sc-evento-selector-pais {
    display: inline-flex;
    align-self: flex-start;
    align-items: center;
    gap: 0.5rem;
    font-size: clamp(12.80px, calc(9.139px + 0.2680vw), 16px);
    color: var(--sc-text);
    margin: 0 0 1rem;
}
.sc-evento-combo-pais {
    font-family: var(--sc-font-body);
    font-size: clamp(12.80px, calc(9.139px + 0.2680vw), 16px);
    width: auto;
    max-width: 200px;
    padding: 0.3rem 0.5rem;
    border: 1px solid var(--sc-gold);
    border-radius: 3px;
    background: var(--sc-bg);
    color: var(--sc-text);
}

.sc-editor-form-acciones {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-top: 1.1rem;
}

/* Tipografía y forma COMUNES a TODOS los botones de acción de la vista
   de categoría (Guardar, Enviar a validación, Vista previa, Cancelar,
   Eliminar, Nueva entrada, Corregir, Escuchar, Traducir, Audio, y
   Aprobar/Rechazar/Resolver conflicto) — un solo sitio para que todos
   usen exactamente la misma fuente, tamaño y RELLENO (padding). Las
   reglas de cada botón, más abajo, solo tocan color y borde.
   Arreglo (24 agosto 2026, a petición de Javier — "los botones salen
   descolocados" al aprobar): Aprobar/Rechazar/Resolver conflicto tenían
   su propio bloque de tipografía duplicado aparte, con un padding
   ligeramente distinto (0.9rem en vez de 0.85rem) — no se notaba mucho
   en botones sueltos, pero al quedar Aprobar/Rechazar justo al lado de
   Traducir en la misma fila (.sc-validar-y-traducir), esa diferencia de
   un par de píxeles se veía como un desajuste. Unificado aquí. */
.sc-editor-btn-nueva,
.sc-editor-btn-mostrar-corregir,
.sc-editor-btn-guardar,
.sc-editor-btn-enviar-validar,
.sc-editor-btn-cancelar,
.sc-editor-btn-eliminar,
.sc-btn-eliminar-admin,
.sc-btn-visibilidad,
.sc-historial-toggle,
.sc-verproductos-boton,
.sc-btn-traducir,
.sc-validar-btn-aprobar,
.sc-validar-btn-mostrar-rechazo,
.sc-validar-btn-confirmar-rechazo,
.sc-validar-btn-cancelar-rechazo,
.sc-conflicto-btn-aprobar,
.sc-conflicto-btn-rechazar,
.sc-conflicto-btn-pedir-cambios {
    font-family: var(--sc-font-body);
    font-size: clamp(11.20px, calc(7.997px + 0.2345vw), 14px);
    letter-spacing: 0.6px;
    text-transform: uppercase;
    font-weight: 600;
    border-radius: 4px;
    padding: 0.42rem 0.85rem;
    cursor: pointer;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
}

/* .sc-btn-traducir lleva icono + texto (a diferencia del resto, que son
   solo texto) — mismo patrón que .sc-historial-toggle ya usa un poco
   más abajo, para que el icono quede centrado con la letra en vez de
   caer en su línea de base por defecto. Antes también incluía
   .sc-btn-audio (su propio botón/modal "Audio"); desde que Audio se
   integró en el modal "Traducir" (27 agosto 2026), ese mismo botón
   .sc-btn-traducir se reutiliza también para abrirlo. El modificador
   morado .sc-btn-traducir-solo-audio (para cuando el botón abría el
   panel solo para audio, sin ofrecer traducir) se retiró el mismo día
   al hacerse "Traducir" siempre disponible — ver
   sc_render_boton_traducir() en categoria-render.php. */
.sc-btn-traducir {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.sc-editor-btn-mostrar-corregir {
    background: none;
    border: 1px dashed rgba(var(--sc-gold-rgb), 0.4);
    color: var(--sc-gold);
    margin-bottom: 1.1rem;
    align-self: flex-start;
    width: fit-content;
}

.sc-editor-btn-mostrar-corregir:hover {
    border-color: var(--sc-gold);
    background: rgba(var(--sc-gold-rgb), 0.08);
}

/* Estado "activo" (4/9/2026): el formulario de corregir está abierto —
   el botón se queda en su sitio (ya no se oculta) y se marca como
   pulsado para que se vea que ese es el que ha abierto el formulario.
   Volver a pulsarlo lo cierra. */
.sc-editor-btn-mostrar-corregir.sc-editor-btn-activo {
    background: rgba(var(--sc-gold-rgb), 0.18);
    border-style: solid;
    border-color: var(--sc-gold);
}

.sc-editor-form-corregir {
    margin-bottom: 1.4rem;
}

.sc-editor-btn-guardar {
    background: var(--sc-gold);
    color: var(--sc-bg);
    border: none;
}

.sc-editor-btn-enviar-validar {
    background: none;
    border: 1px solid var(--sc-gold);
    color: var(--sc-gold);
}

.sc-editor-btn-enviar-validar:hover {
    background: var(--sc-gold);
    color: var(--sc-bg);
}

.sc-editor-btn-cancelar {
    background: none;
    border: 1px solid rgba(var(--sc-gold-rgb), 0.25);
    color: var(--sc-muted);
}

.sc-editor-btn-eliminar,
.sc-btn-eliminar-admin {
    background: none;
    border: 1px solid #b3261e;
    color: #e07a5f;
}

/* "Pasar a borrador" / "Publicar" (9/10/2026, solo Administrador —
   includes/categoria/categoria-visibilidad.php). "Publicar" va relleno en
   dorado: es la acción que saca la entrada a los clientes. */
.sc-btn-visibilidad {
    background: none;
    border: 1px solid var(--sc-gold);
    color: var(--sc-gold);
    cursor: pointer;
}
.sc-btn-visibilidad:hover,
.sc-btn-visibilidad-publicar {
    background: var(--sc-gold);
    color: #111;
}
.sc-btn-visibilidad:disabled { opacity: 0.5; cursor: default; }
.sc-detalle-aviso-oculta {
    flex: 0 0 auto;
    margin: 0.8rem 0 0;
    padding: 0.5rem 0.9rem;
    border: 1px dashed rgba(var(--sc-gold-rgb), 0.5);
    border-radius: 6px;
    color: var(--sc-gold);
    font-size: var(--sc-fs-small);
}

.sc-editor-btn-eliminar:hover,
.sc-btn-eliminar-admin:hover {
    background: #b3261e;
    color: #fff;
}

/* Mensaje corto junto a un botón suelto (4/9/2026, ver categoria.js,
   mostrarMensajeJuntoABoton()) — sustituye a un alert() nativo del
   navegador para errores de botones que no viven dentro de ningún
   formulario (p.ej. "Eliminar" de una entrada que ya no existía). */
.sc-btn-mensaje-junto {
    display: inline-block;
    margin-left: 0.6rem;
    color: #e07a5f;
    font-size: var(--sc-fs-nav);
}

.sc-editor-mensaje {
    font-size: var(--sc-fs-nav);
    color: #e07a5f;
    margin: 0;
}

.sc-editor-badge-borrador {
    font-size: clamp(11.20px, calc(7.997px + 0.2345vw), 14px);
    color: var(--sc-bg);
    background: var(--sc-muted);
    border-radius: 10px;
    padding: 2px 8px;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0.5px;
    flex-shrink: 0;
}

.sc-editor-badge-pendiente {
    font-size: clamp(11.20px, calc(7.997px + 0.2345vw), 14px);
    color: var(--sc-bg);
    background: var(--sc-gold);
    border-radius: 10px;
    padding: 2px 8px;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0.5px;
    flex-shrink: 0;
    white-space: nowrap;
}

/* "¿Sabías qué?" (23/9/2026): tip que está ahora entre los 6 visibles
   de la rotación (includes/categoria/sabias-que-rotacion.php). Contorno
   dorado en vez de relleno, para no confundirse con "Pendiente". */
.sc-editor-badge-en-web {
    font-size: var(--sc-fs-label);
    color: var(--sc-gold);
    border: 1px solid var(--sc-gold);
    border-radius: 10px;
    padding: 1px 7px;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0.5px;
    flex-shrink: 0;
    white-space: nowrap;
}
.sc-tips-rotacion-info {
    margin: 0 0 0.8rem;
    font-size: var(--sc-fs-nav);
    color: var(--sc-muted);
}

.sc-editor-badge-conflicto {
    font-size: clamp(11.20px, calc(7.997px + 0.2345vw), 14px);
    color: #fff;
    background: #b3261e;
    border-radius: 10px;
    padding: 2px 8px;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0.5px;
    flex-shrink: 0;
}

.sc-editor-aviso-pendiente {
    font-size: var(--sc-fs-nav);
    color: var(--sc-gold);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 700;
    margin-bottom: 1rem;
}

.sc-editor-aviso-conflicto {
    font-size: var(--sc-fs-nav);
    color: #e07a5f;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 700;
    margin-bottom: 1rem;
}

/* ===== Aprobar / Rechazar (segundo autor) ===== */
.sc-validar-acciones {
    display: flex;
    gap: 0.5rem;
    margin-top: 1.1rem;
    margin-bottom: 1.4rem;
}

.sc-validar-btn-aprobar {
    background: #4a7c59;
    border: 1px solid #4a7c59;
    color: #fff;
}

.sc-validar-btn-aprobar:hover { background: #3d6849; }

.sc-validar-btn-mostrar-rechazo,
.sc-validar-btn-confirmar-rechazo {
    background: none;
    border: 1px solid #b3261e;
    color: #e07a5f;
}

.sc-validar-btn-mostrar-rechazo:hover,
.sc-validar-btn-confirmar-rechazo:hover {
    background: #b3261e;
    color: #fff;
}

.sc-validar-btn-cancelar-rechazo {
    background: none;
    border: 1px solid rgba(var(--sc-gold-rgb), 0.25);
    color: var(--sc-muted);
}

.sc-validar-form-rechazo {
    margin-bottom: 1.4rem;
    max-width: 480px;
}

.sc-validar-motivo {
    width: 100%;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(var(--sc-gold-rgb), 0.2);
    border-radius: 4px;
    color: var(--sc-text);
    font-family: var(--sc-font-body);
    font-size: var(--sc-fs-small);
    padding: 0.6rem 0.8rem;
    resize: vertical;
    margin-bottom: 0.6rem;
}

.sc-validar-motivo:focus {
    outline: none;
    border-color: var(--sc-gold);
}

.sc-validar-form-rechazo-acciones {
    display: flex;
    gap: 0.5rem;
}

/* ===== Resolución de conflicto (Administrador) ===== */
.sc-conflicto-acciones {
    display: flex;
    gap: 0.5rem;
    margin-top: 1.1rem;
    margin-bottom: 1.4rem;
}

.sc-conflicto-btn-aprobar {
    background: #4a7c59;
    border: 1px solid #4a7c59;
    color: #fff;
}

.sc-conflicto-btn-aprobar:hover { background: #3d6849; }

.sc-conflicto-btn-rechazar {
    background: none;
    border: 1px solid #b3261e;
    color: #e07a5f;
}

.sc-conflicto-btn-rechazar:hover { background: #b3261e; color: #fff; }

.sc-conflicto-btn-pedir-cambios {
    background: none;
    border: 1px solid var(--sc-gold);
    color: var(--sc-gold);
}

.sc-conflicto-btn-pedir-cambios:hover { background: var(--sc-gold); color: var(--sc-bg); }

/* ===== Ver historial ===== */
.sc-historial-wrap {
    margin-top: 0.9rem;
    margin-bottom: 1.4rem;
}

.sc-historial-toggle {
    background: none;
    border: 1px solid rgba(var(--sc-gold-rgb), 0.35);
    color: var(--sc-muted);
    display: inline-flex;
    align-items: center;
    line-height: 1;
    gap: 6px;
}

/* El icono usa la librería general de iconos del sitio (Tabler Icons,
   ver includes/base/cabecera-pie.php), pensada para iconos sueltos con
   su propio tamaño por defecto — sin acotarlo aquí, infla la altura de
   ESTE botón por encima de sus hermanos (que son solo texto), y como
   la fila alinea por arriba (.sc-detalle-acciones-secundarias,
   align-items:flex-start), el botón entero se ve más grande/más bajo
   que Traducir/Corregir/Eliminar. Se fija al mismo tamaño que el texto
   del botón (10px, ver la regla compartida más arriba) en vez de
   heredar el tamaño por defecto de la librería. */
.sc-historial-toggle i {
    font-size: clamp(11.20px, calc(7.997px + 0.2345vw), 14px);
    line-height: 1;
}

.sc-historial-toggle:hover {
    color: var(--sc-gold);
    border-color: var(--sc-gold);
    background: rgba(var(--sc-gold-rgb), 0.08);
}

/* ===== Escuchar (texto a voz) — sacado a assets/css/escuchar.css
   (22/9/2026), dependencia de este fichero: así lo puede cargar TAMBIÉN
   la ficha pública de producto (Descripción/Fabricación) sin encolar
   categoria.css entero ahí. Si se toca un color/tamaño, es en ese
   fichero, no aquí. ===== */

/* ===== Vídeo público (botón + modal) — sacado a assets/css/video-publico.css
   (22/9/2026, mismo criterio que escuchar.css): así lo puede cargar
   también la ficha de producto ("Conocer un poco de historia"). La
   subida/eliminación del vídeo (.sc-modal-video-guardar/-campo/-progreso/
   -preview/-ayuda/-eliminar, más abajo) sigue aquí — eso es editorial. ===== */

/* ===== Traducir + Audio (botón + modal único) — agosto 2026 =====
   Trasladado aquí desde un <style> inline en sc_render_boton_traducir()
   (includes/categoria/categoria-render.php) — ver la nota de refactor
   en ese archivo: el <style> inline solo se imprimía la primera vez que
   la función pintaba algo en la página, así que en algunos casos
   (segundo autor sin permiso de diccionario) no llegaba a imprimirse
   nunca y .sc-validar-y-traducir se quedaba sin su display:flex. Aquí,
   en la hoja de estilos normal, siempre está disponible.

   27 agosto 2026 — Traducir y Audio, unificados: hasta esta fecha eran
   dos botones/modales separados (.sc-btn-traducir/.sc-modal-traducir y
   .sc-btn-audio/.sc-modal-audio), con casi toda su estructura duplicada
   (overlay, caja, botón de cerrar, etiqueta de idioma, mensaje de
   error, botón de guardar). Javier pidió juntarlos en un solo panel:
   "mi idea es trabajarlo todo sobre el modal de traducir [...] el de
   audio integrarlo con este". Ahora solo existe .sc-modal-traducir — el
   antiguo .sc-modal-audio (su overlay/caja/cerrar propios) desaparece
   entero; lo que SÍ sigue vivo, ahora colgado dentro de cada columna de
   Traducir (ver sc_render_traducir_audio_bloque()), son las piezas
   sueltas del audio en sí: .sc-modal-audio-preview, -quitar, -campo,
   -campo-fila, -ia, -preview-ia y -guardar (más abajo) — mismas clases
   de siempre, sin cambios, para que ni el guardado ni la generación con
   IA necesiten tocar nada en el servidor. */
.sc-btn-traducir {
    background: none;
    border: 1px solid #2b6ca3;
    color: #6fa8dc;
}
.sc-btn-traducir:hover { color: #fff; background: #2b6ca3; }

.sc-modal-traducir {
    position: fixed;
    inset: 0;
    z-index: 9999;
    align-items: center;
    justify-content: center;
}

.sc-modal-traducir-fondo { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.5); }

/* Tamaño FIJO (27 agosto 2026, a petición de Javier: "un poco más ancho
   y largo y de tamaño fijo") — antes era max-height:85vh con
   overflow-y:auto en la CAJA entera, así que el modal entero crecía con
   el contenido (y con audio añadido a cada columna, ya no cabía todo
   sin desbordar). Ahora la caja no cambia de tamaño nunca; es cada
   columna (.sc-modal-traducir-original / .sc-modal-traducir-idioma) la
   que hace scroll por su cuenta cuando su contenido no cabe — ver
   .sc-modal-traducir-idiomas más abajo. display:flex en columna para
   que la cabecera (h3) y el pie (mensaje + botones) queden siempre
   visibles, fijos arriba y abajo, y solo la zona central de columnas
   ocupe el espacio que sobra. */
.sc-modal-traducir-caja {
    position: relative;
    background: #fff;
    color: #1a1a1a;
    border-radius: 12px;
    padding: 24px;
    width: 96%;
    max-width: 1720px;
    height: 94vh;
    max-height: 94vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.sc-modal-traducir-caja h3 { flex: 0 0 auto; margin: 0 32px 10px 0; color: #1a1a1a; }

.sc-modal-traducir-cerrar {
    position: absolute;
    top: 12px;
    right: 16px;
    background: none;
    border: none;
    font-size: clamp(20.80px, calc(14.851px + 0.4355vw), 26px);
    line-height: 1;
    cursor: pointer;
    color: #6b8fa8;
}

.sc-modal-traducir-etiqueta {
    display: block;
    margin-bottom: 4px;
    font-size: clamp(12.80px, calc(9.139px + 0.2680vw), 16px);
    font-weight: 700;
    text-transform: uppercase;
    color: #6b8fa8;
}

/* Tres columnas fijas — origen + los otros dos idiomas (agosto 2026, a
   petición de Javier: "un modal con tres columnas"). repeat(3, ...) en
   vez de auto-fit/minmax para que las tres vayan siempre en fila en
   escritorio (se apilan en una sola columna en pantallas estrechas, ver
   @media más abajo).

   flex:1 1 auto + min-height:0 (27 agosto 2026): imprescindible para
   que un grid dentro de un flex-column se deje ENCOGER hasta el hueco
   que le queda debajo de la cabecera — sin min-height:0 el grid se
   estira a la altura de su contenido y son .sc-modal-traducir-original/
   -idioma (con height:100%) quienes acaban desbordando la caja en vez
   de hacer scroll cada una por su cuenta. */
.sc-modal-traducir-idiomas {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem 1.4rem;
    align-items: stretch;
    flex: 1 1 auto;
    min-height: 0;
    margin: 0 0 14px;
}

/* Cada columna, con su PROPIO scroll (27 agosto 2026, a petición de
   Javier: "que los textos que aparecen en cada columna tengan su propio
   scroll") — una historia larga en la columna de origen ya no empuja ni
   desborda las otras dos columnas, cada una se desplaza de forma
   independiente dentro de su alto fijo. */
.sc-modal-traducir-original,
.sc-modal-traducir-idioma {
    height: 100%;
    min-height: 0;
    overflow-y: auto;
    padding-right: 6px;
    scrollbar-width: thin;
    scrollbar-color: rgba(107, 143, 168, 0.35) transparent;
}
.sc-modal-traducir-original::-webkit-scrollbar,
.sc-modal-traducir-idioma::-webkit-scrollbar { width: 6px; }
.sc-modal-traducir-original::-webkit-scrollbar-thumb,
.sc-modal-traducir-idioma::-webkit-scrollbar-thumb { background: rgba(107, 143, 168, 0.35); border-radius: 3px; }

.sc-modal-traducir-original { background: #f4f6f8; border-radius: 8px; padding: 12px 14px; margin: 0; }

.sc-modal-traducir-campo {
    width: 100%;
    box-sizing: border-box;
    padding: 8px 10px;
    border: 1px solid #c8dff0;
    border-radius: 6px;
    font-size: clamp(13.60px, calc(9.710px + 0.2848vw), 17px);
    margin-top: 4px;
}

/* Caja de texto más grande (27 agosto 2026, tercer cambio del día —
   Javier, con una captura de las tres columnas: "deberían ser todos
   del mismo tamaño los textos"): el rows="4" del HTML se quedaba muy
   corto comparado con el párrafo largo que antes tenía la columna de
   origen — ahora las tres columnas usan el mismo campo, así que las
   tres necesitan una caja de texto con un tamaño más generoso, no solo
   igual entre ellas. resize:vertical para que se pueda agrandar más a
   mano si hace falta, igual que el resto de textareas del proyecto
   (.sc-editor-texto/-editar). */
textarea.sc-modal-traducir-campo {
    min-height: clamp(260px, 36vh, 480px);
    resize: vertical;
}

.sc-modal-traducir-mensaje--ok { color: #2e7d32 !important; font-weight: 600; }
.sc-modal-traducir-mensaje { flex: 0 0 auto; color: #c62828; font-size: clamp(13.60px, calc(9.710px + 0.2848vw), 17px); min-height: 1.2em; }

/* Fila de botones del modal "Traducir" — antes solo tenía "Guardar
   traducción" (sin necesitar flex, un único <button> ya se veía bien
   solo); con "Traducir con IA" (26 agosto) y "Guardar audio" (27
   agosto, integrado desde el antiguo modal "Audio") añadidos al lado,
   hace falta separarlos con un hueco. */
.sc-modal-traducir-acciones { flex: 0 0 auto; display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

.sc-modal-traducir-guardar, .sc-modal-audio-guardar, .sc-modal-video-guardar,
.sc-producto-traducir-fabricacion-guardar, .sc-producto-audio-guardar {
    padding: 10px 20px;
    color: #fff;
    border: none;
    border-radius: 7px;
    font-weight: 700;
    cursor: pointer;
}
.sc-modal-traducir-guardar { background: #2e7d32; }
.sc-modal-audio-guardar, .sc-producto-audio-guardar { background: #6a4c93; }
.sc-producto-audio-guardar:disabled { opacity: 0.6; cursor: default; }
.sc-modal-video-guardar { background: #2b6ca3; }
/* 22/9/2026: mismo verde que "Guardar traducción" — es la misma
   acción (guardar lo escrito en el modal), solo que Fabricación la
   guarda con su propio endpoint (postmeta, no IdiomaKit) en vez de
   idk_dicc_guardar_campo. Ver sc_render_producto_boton_traducir_fabricacion()
   en producto-ficha-tecnica.php. */
.sc-producto-traducir-fabricacion-guardar { background: #2e7d32; }
.sc-producto-traducir-fabricacion-guardar:disabled { opacity: 0.6; cursor: default; }

/* Selector de fichero + botón + estado de la carga, agrupados (31
   agosto 2026, a petición de Javier: "la carga del fichero al lado del
   botón de guardar vídeo, y de paso ver el estado de la carga") — viven
   juntos en .sc-modal-traducir-acciones, no sueltos en el bloque de
   arriba (ver sc_render_traducir_video_bloque() en categoria-render.php). */
.sc-modal-video-subida {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.sc-modal-video-campo { font-size: clamp(13.60px, calc(9.710px + 0.2848vw), 17px); max-width: 190px; }

.sc-modal-video-progreso {
    font-size: clamp(12.80px, calc(9.139px + 0.2680vw), 16px);
    color: #6b8fa8;
    white-space: nowrap;
}

/* "Traducir con IA" (26 agosto 2026) — mismo morado que su equivalente
   del Diccionario (includes/idioma/idioma-kit-diccionario.php), para
   que se reconozca como la misma función en toda la web. */
.sc-modal-traducir-ia,
.sc-modal-audio-ia-todos {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    background: #ede7f6;
    color: #5e35b1;
    border: none;
    border-radius: 7px;
    font-weight: 700;
    cursor: pointer;
}
.sc-modal-traducir-ia:disabled,
.sc-modal-audio-ia-todos:disabled { opacity: 0.5; cursor: default; }

.sc-validar-y-traducir { display: flex; gap: 10px; align-items: flex-start; flex-wrap: wrap; }
.sc-validar-y-traducir .sc-validar-acciones { margin-top: 0; }

/* Agrupa Ver historial + Traducir + Corregir (si aplica) + Eliminar
   (Administrador) en una sola fila de GESTIÓN, siempre juntos — a
   petición de Javier. Origen: agosto 2026, "el botón de audio debe ir
   al lado del de Traducir, no aparte", después lo mismo con Eliminar;
   ampliado el 31 de agosto de 2026 para incluir también Ver historial
   y separarla explícitamente de la fila PÚBLICA (Escuchar/Vídeo). Se
   usa en las 6 ramas de sc_render_detalle_entrada_categoria() (ver
   includes/categoria/categoria-render.php, sc_render_acciones_secundarias())
   y en la rama borrador. Regla de tamaño/espaciado unificada más abajo,
   junto a .sc-detalle-acciones-publico (ver esa sección para el
   detalle). */

/* Bloque de audio DENTRO de cada columna de "Traducir" (27 agosto 2026
   — sc_render_traducir_audio_bloque()). Antes cada idioma tenía su
   propia fila horizontal ancha (.sc-modal-audio-idioma, dentro del
   modal "Audio" de 640px de ancho); ahora vive apilado al final de una
   columna bastante más estrecha (una de tres dentro de los 1180px del
   modal único), así que pasa a diseño vertical en vez de fila. */
.sc-modal-traducir-audio {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px dashed #c8dff0;
}
.sc-modal-traducir-audio-etiqueta {
    display: block;
    font-size: clamp(12.80px, calc(9.139px + 0.2680vw), 16px);
    font-weight: 700;
    text-transform: uppercase;
    color: #6b8fa8;
    margin-bottom: 6px;
}

.sc-modal-traducir-audio .sc-modal-audio-preview { width: 100%; min-width: 0; height: 32px; }

/* Botón "Quitar este audio" (27 agosto 2026, tercer cambio del día —
   antes era una casilla, ver sc_render_traducir_audio_bloque() en
   categoria-render.php). Sin fondo, para que no compita visualmente
   con "Guardar traducción"/"Guardar audio" de abajo — solo texto en
   rojo, como antes lo era la casilla. */
.sc-modal-audio-eliminar {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: clamp(13.60px, calc(9.710px + 0.2848vw), 17px);
    color: #b3261e;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    white-space: nowrap;
    text-decoration: underline;
}
.sc-modal-audio-eliminar:disabled { opacity: 0.5; cursor: default; }

/* "Exportar al PC" (8/10/2026, Javier): guarda el mp3 en la carpeta que se
   elija. Con audio ya guardado, texto en azul junto a "Quitar este audio";
   con audio elegido o recién generado, icono suelto junto a "Generar con IA". */
.sc-modal-audio-exportar {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-left: 14px;
    font-size: clamp(13.60px, calc(9.710px + 0.2848vw), 17px);
    color: #1565c0;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    white-space: nowrap;
    text-decoration: underline;
}
.sc-modal-audio-exportar--icono {
    flex: 0 0 auto;
    justify-content: center;
    width: 32px;
    height: 32px;
    margin-left: 0;
    background: #e3f2fd;
    border-radius: 7px;
    text-decoration: none;
}
.sc-modal-audio-exportar:disabled { opacity: 0.5; cursor: default; }

.sc-modal-audio-campo { flex: 1 1 auto; min-width: 0; font-size: clamp(13.60px, calc(9.710px + 0.2848vw), 17px); }

/* "Generar con IA" (audio, 27 agosto 2026) — mismo morado que "Traducir
   con IA" en todas sus formas (Diccionario y este mismo modal), para
   que se reconozca como la misma función en toda la web. Icono suelto
   en vez de texto: va uno por idioma, dentro de una fila ya apretada
   junto al campo de archivo, y el título= del botón ya explica qué hace
   al pasar el ratón. */
.sc-modal-audio-campo-fila { display: flex; align-items: center; gap: 8px; flex: 1 1 auto; }
.sc-modal-audio-ia {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: #ede7f6;
    color: #5e35b1;
    border: none;
    border-radius: 7px;
    cursor: pointer;
}
.sc-modal-audio-ia:disabled { opacity: 0.5; cursor: default; }
.sc-modal-audio-preview-ia { width: 100%; height: 32px; margin-top: 6px; }

/* 22/9/2026: audio de Descripción/Fabricación de producto — MISMO
   aspecto que el bloque de arriba, con sus propias clases
   (.sc-producto-audio-*, ver producto-ficha-tecnica.php para el
   porqué de no reutilizar .sc-modal-audio-*). Reglas idénticas,
   repetidas a propósito para no acoplar el CSS de producto al de
   categoría por un simple cambio de nombre de clase. */
.sc-producto-traducir-audio {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px dashed #c8dff0;
}
.sc-producto-traducir-audio-etiqueta {
    display: block;
    font-size: clamp(12.80px, calc(9.139px + 0.2680vw), 16px);
    font-weight: 700;
    text-transform: uppercase;
    color: #6b8fa8;
    margin-bottom: 6px;
}
.sc-producto-traducir-audio .sc-producto-audio-preview { width: 100%; min-width: 0; height: 32px; }
.sc-producto-audio-eliminar {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: clamp(13.60px, calc(9.710px + 0.2848vw), 17px);
    color: #b3261e;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    white-space: nowrap;
    text-decoration: underline;
}
.sc-producto-audio-eliminar:disabled { opacity: 0.5; cursor: default; }
.sc-producto-audio-campo { flex: 1 1 auto; min-width: 0; font-size: clamp(13.60px, calc(9.710px + 0.2848vw), 17px); }
.sc-producto-audio-campo-fila { display: flex; align-items: center; gap: 8px; flex: 1 1 auto; }
.sc-producto-audio-ia {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: #ede7f6;
    color: #5e35b1;
    border: none;
    border-radius: 7px;
    cursor: pointer;
}
.sc-producto-audio-ia:disabled { opacity: 0.5; cursor: default; }
.sc-producto-audio-preview-ia { width: 100%; height: 32px; margin-top: 6px; }

/* ===== Vídeo dentro del modal "Traducir" (31 agosto 2026) — UN único
   bloque horizontal, fuera de las tres columnas de idioma (a
   diferencia de Audio, que va dentro de cada una) — ver
   sc_render_traducir_video_bloque() en categoria-render.php. */
.sc-modal-traducir-video {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 16px;
    padding-bottom: 14px;
    border-bottom: 1px dashed #c8dff0;
}

.sc-modal-traducir-video-etiqueta {
    font-size: clamp(12.80px, calc(9.139px + 0.2680vw), 16px);
    font-weight: 700;
    text-transform: uppercase;
    color: #6b8fa8;
    flex: 0 0 auto;
}

.sc-modal-video-preview { height: 90px; border-radius: 6px; }

.sc-modal-video-ayuda {
    font-size: clamp(12.80px, calc(9.139px + 0.2680vw), 16px);
    color: #6b8fa8;
    flex: 1 1 240px;
}

.sc-modal-video-eliminar {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: clamp(13.60px, calc(9.710px + 0.2848vw), 17px);
    color: #b3261e;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    white-space: nowrap;
    text-decoration: underline;
}
.sc-modal-video-eliminar:disabled { opacity: 0.5; cursor: default; }

/* Reels del relato (8/10/2026, includes/categoria/relatos-reels.php): una
   casilla por idioma en el modal Traducir, en el sitio del vídeo único. */
.sc-modal-relato-reels {
    flex: 0 0 auto;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 16px;
    padding-bottom: 14px;
    border-bottom: 1px dashed #c8dff0;
}
.sc-modal-relato-reels-etiqueta,
.sc-modal-relato-reel-idioma {
    font-size: clamp(12.80px, calc(9.139px + 0.2680vw), 16px);
    font-weight: 700;
    text-transform: uppercase;
    color: #6b8fa8;
}
.sc-modal-relato-reels-idiomas {
    flex: 1 1 600px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}
.sc-modal-relato-reel {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    min-width: 0;
}
.sc-modal-relato-reel-idioma { flex: 1 1 100%; }
.sc-modal-relato-reel-previa { height: 110px; border-radius: 6px; background: #000; }
.sc-modal-relato-reel-campo { flex: 1 1 140px; min-width: 0; font-size: clamp(13.60px, calc(9.710px + 0.2848vw), 17px); }
.sc-modal-relato-reel-subir {
    flex: 0 0 auto;
    height: 34px;
    padding: 0 12px;
    background: #e3f2fd;
    color: #1565c0;
    border: none;
    border-radius: 7px;
    font-size: clamp(13.60px, calc(9.710px + 0.2848vw), 17px);
    cursor: pointer;
}
.sc-modal-relato-reel-subir:disabled { opacity: 0.5; cursor: default; }
.sc-modal-relato-reel-quitar {
    font-size: clamp(13.60px, calc(9.710px + 0.2848vw), 17px);
    color: #b3261e;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    text-decoration: underline;
}
.sc-modal-relato-reel-quitar:disabled { opacity: 0.5; cursor: default; }
.sc-modal-relato-reel-progreso,
.sc-modal-relato-reels-ayuda {
    font-size: clamp(12.80px, calc(9.139px + 0.2680vw), 16px);
    color: #6b8fa8;
}
.sc-modal-relato-reels-ayuda { flex: 1 1 100%; }
@media (max-width: 800px) {
    .sc-modal-relato-reels-idiomas { grid-template-columns: 1fr; }
}

/* Voz del relato (8/10/2026, includes/categoria/relatos.php): lista de
   voces narrativas + "Probar voz", en una fila propia del modal Traducir
   debajo del vídeo, con el mismo aspecto que ese bloque. */
.sc-modal-relato-voz {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 16px;
    padding-bottom: 14px;
    border-bottom: 1px dashed #c8dff0;
}
.sc-modal-relato-voz-etiqueta {
    font-size: clamp(12.80px, calc(9.139px + 0.2680vw), 16px);
    font-weight: 700;
    text-transform: uppercase;
    color: #6b8fa8;
    flex: 0 0 auto;
    margin: 0;
}
.sc-modal-relato-voz-select {
    flex: 0 1 280px;
    min-width: 200px;
    height: 34px;
    padding: 0 8px;
    border: 1px solid #c8dff0;
    border-radius: 7px;
    background: #fff;
    color: #1f2d3a;
    font-size: clamp(13.60px, calc(9.710px + 0.2848vw), 17px);
}
.sc-modal-relato-voz-probar {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 34px;
    padding: 0 12px;
    background: #ede7f6;
    color: #5e35b1;
    border: none;
    border-radius: 7px;
    font-size: clamp(13.60px, calc(9.710px + 0.2848vw), 17px);
    cursor: pointer;
}
.sc-modal-relato-voz-probar:disabled { opacity: 0.5; cursor: default; }
.sc-modal-relato-voz-previa { height: 34px; flex: 0 1 260px; }
.sc-modal-relato-voz-ayuda {
    flex: 1 1 100%;
    font-size: clamp(12.80px, calc(9.139px + 0.2680vw), 16px);
    color: #6b8fa8;
}

/* ===== Modal público de reproducción de vídeo — sacado a
   assets/css/video-publico.css (22/9/2026). ===== */

.sc-historial-panel {
    display: flex;
    flex-direction: column;
}

.sc-historial-panel ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.sc-historial-panel li {
    font-size: var(--sc-fs-nav);
    display: flex;
    gap: 0.8rem;
}

.sc-historial-fecha {
    color: var(--sc-muted);
    white-space: nowrap;
    flex-shrink: 0;
}

.sc-historial-texto {
    color: var(--sc-text);
}

.sc-historial-motivo {
    display: block;
    color: var(--sc-muted);
    font-style: italic;
    margin-top: 2px;
}

/* ===== Modal de "Ver historial" (31 agosto 2026, a petición de Javier
   — antes era un panel que se desplegaba dentro de la propia fila,
   empujando los demás botones hacia abajo). Mismo mecanismo que
   .sc-modal-traducir (fondo + caja + botón cerrar, display:none por
   defecto, categoria.js lo pone a flex al pulsar "Ver historial"), pero
   con la estética oscura del sitio en vez de la caja blanca de
   Traducir — aquí solo se lee una lista, no hace falta la superficie
   clara que ayuda a leer/editar campos de texto. */
.sc-modal-historial {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
}

.sc-modal-historial-fondo { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.6); }

.sc-modal-historial-caja {
    position: relative;
    background: var(--sc-bg);
    border: 1px solid rgba(var(--sc-gold-rgb), 0.25);
    border-radius: 12px;
    padding: 1.6rem 1.8rem;
    width: 92%;
    max-width: 520px;
    max-height: 80vh;
    overflow-y: auto;
}

.sc-modal-historial-caja h3 {
    font-family: var(--sc-font-title);
    color: var(--sc-gold);
    font-size: clamp(14.40px, calc(10.281px + 0.3015vw), 18px);
    margin: 0 28px 1rem 0;
}

.sc-modal-historial-cerrar {
    position: absolute;
    top: 10px;
    right: 14px;
    background: none;
    border: none;
    font-size: clamp(20.80px, calc(14.851px + 0.4355vw), 26px);
    line-height: 1;
    cursor: pointer;
    color: var(--sc-muted);
}

.sc-modal-historial-cerrar:hover { color: var(--sc-gold); }

/* ===== Lista + detalle (entradas editoriales) =====
   Ocupa todo el alto que quede tras la cabecera/pestañas fijas
   (flex:1 del padre .sc-tab-panel-activa). La lista y el texto hacen
   su propio scroll interno si hiciera falta, en vez de estirar la
   página — así la página en sí nunca necesita scroll (decisión de
   Javier). */
.sc-lista-detalle {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 2rem;
    flex: 1 1 0%;
    min-height: 0;
}

.sc-lista-entradas {
    display: flex;
    flex-direction: column;
    gap: 2px;
    border-right: 1px solid rgba(var(--sc-gold-rgb), 0.15);
    padding-right: 1.5rem;
    overflow-y: auto;
    min-height: 0;
}

.sc-lista-item {
    text-align: left;
    background: none;
    border: none;
    border-left: 2px solid transparent;
    color: var(--sc-muted);
    font-family: var(--sc-font-body);
    font-size: var(--sc-fs-small);
    line-height: 1.4;
    padding: 0.7rem 0.9rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    flex-shrink: 0;
    transition: color 0.2s, background 0.2s, border-color 0.2s;
}

.sc-lista-item:hover {
    color: var(--sc-text);
    background: rgba(var(--sc-gold-rgb), 0.06);
}

.sc-lista-item.sc-lista-item-activo {
    color: var(--sc-gold);
    background: rgba(var(--sc-gold-rgb), 0.1);
    border-left-color: var(--sc-gold);
    font-weight: 600;
}

.sc-detalle-wrap {
    min-width: 0;
    min-height: 0;
}

.sc-detalle-entrada { display: none; }
.sc-detalle-entrada.sc-detalle-activo {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

/* Resalte breve al llegar directamente a una entrada desde el aviso de
   "Pendientes de validar" (cabecera.php + categoria.js, "Ir directo a
   una entrada pendiente", agosto 2026) — dos pulsos y desaparece solo,
   la clase se quita por JS a los 2.6s. */
@keyframes sc-pulso-destacado {
    0%, 100% { box-shadow: 0 0 0 0 rgba(var(--sc-gold-rgb), 0); }
    25%, 75% { box-shadow: 0 0 0 4px rgba(var(--sc-gold-rgb), 0.35); }
}
.sc-detalle-entrada.sc-entrada-destacada {
    animation: sc-pulso-destacado 1.3s ease-in-out 2;
    border-radius: 10px;
}

/* ===== "¿Sabías qué?" — carrusel SOLO para quien no puede editar =====
   25 agosto 2026, a petición de Javier — sustituye por completo el
   intento anterior del 24 agosto (rejilla de tarjetas para todo el
   mundo): "debería funcionar exactamente igual que historias,
   relatos... aunque no haya título debería poder verse igual". Para
   Autor/Administrador, "¿Sabías qué?" ya NO lleva ningún modificador
   — es el .sc-lista-detalle de siempre (lista lateral + panel grande),
   sin ninguna regla de aquí abajo, idéntico a historia/relatos. Todo
   este bloque solo se aplica a .sc-carrusel-tips, la vista que ve
   comprador/visitante (ver $es_carrusel_tips en
   astra-child/woocommerce/taxonomy-product_cat.php). El HTML de cada
   tarjeta lo sigue generando sc_render_detalle_entrada_categoria() sin
   cambios — aquí solo se coloca en fila y se mueve; el desplazamiento
   (medir ancho, mover la cinta, activar/desactivar flechas) vive en
   assets/js/categoria-carrusel.js. */
.sc-carrusel-tips {
    /* BUG corregido (25 agosto 2026): .sc-lista-detalle (arriba) define
       grid-template-columns: 280px 1fr, pensado para lista+detalle. El
       carrusel ya no tiene lista lateral — sus dos hijos directos
       (.sc-carrusel-tips-viewport y .sc-carrusel-tips-controles) caían
       cada uno en una de esas dos columnas heredadas: el viewport
       comprimido en los 280px (por eso las tarjetas salían partidas en
       tiras verticales) y los botones sueltos en el resto del ancho.
       Con una sola columna, ambos ocupan todo el ancho, uno debajo del
       otro. */
    grid-template-columns: 1fr;
}

.sc-carrusel-tips-viewport {
    overflow: hidden;
    width: 100%;
}

.sc-carrusel-tips-track {
    display: flex;
    gap: 1.5rem;
    transition: transform 0.35s ease;
}

/* Las tarjetas reutilizan .sc-detalle-entrada/.sc-detalle-activo de
   siempre (más abajo) — aquí solo se fija su ancho dentro de la cinta:
   3 visibles a la vez en escritorio, 2 en tablet, 1 en móvil (ver los
   media query al final de este bloque). categoria-carrusel.js MIDE el
   ancho real en vez de asumir "3", así que estos breakpoints se pueden
   ajustar sin tocar el JS. */
.sc-carrusel-tips-track > .sc-detalle-entrada {
    flex: 0 0 calc((100% - 2 * 1.5rem) / 3);
    min-width: 0;
    height: auto;
    background: var(--sc-surface);
    border: 1px solid rgba(var(--sc-gold-rgb), 0.2);
    border-radius: 10px;
    padding: 1.3rem 1.4rem;
}

.sc-carrusel-tips-controles {
    /* Sin margin-top propio: .sc-lista-detalle (gap: 2rem) ya separa
       esta fila del viewport de arriba, al ser ambos filas del mismo
       grid de una columna (ver .sc-carrusel-tips). */
    display: flex;
    justify-content: center;
    gap: 1rem;
}

/* Mismo formato que el botón "Ver más" del banner de portada (7/10/2026,
   Javier: "que las flechas salgan con el mismo formato que el ver más"):
   borde dorado entero, fondo negro, flecha dorada (la misma → / ←, no el
   ángulo de antes) y, al pasar el ratón, relleno dorado con la flecha
   oscura. Vale para Historia, Relatos, ¿Sabías qué? y Eventos, que
   comparten este carrusel. */
.sc-carrusel-tips-flecha {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #111;
    border: 1px solid var(--sc-gold);
    color: var(--sc-gold);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    font-size: clamp(14.40px, calc(10.281px + 0.3015vw), 18px);
    cursor: pointer;
    transition: background 0.2s, color 0.2s, opacity 0.2s;
}
.sc-carrusel-tips-flecha i { color: inherit; }
.sc-carrusel-tips-prev .ti-chevron-left:before { content: "\ea19"; }
.sc-carrusel-tips-next .ti-chevron-right:before { content: "\ea1f"; }

.sc-carrusel-tips-flecha:hover:not(:disabled) {
    background: var(--sc-gold);
    color: #111;
}

.sc-carrusel-tips-flecha:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

@media (max-width: 900px) {
    .sc-carrusel-tips-track > .sc-detalle-entrada {
        flex: 0 0 calc((100% - 1.5rem) / 2);
    }
}

@media (max-width: 700px) {
    .sc-carrusel-tips-track > .sc-detalle-entrada {
        flex: 0 0 100%;
    }
}

.sc-detalle-titulo {
    font-family: var(--sc-font-title);
    font-size: var(--sc-fs-title);
    color: var(--sc-text);
    font-weight: 700;
    margin-bottom: 1.2rem;
    flex-shrink: 0;
}

/* Título de una historia = enlace a su página propia (29/9/2026, SEO):
   mismo aspecto que el título, dorado al pasar el ratón. */
.sc-detalle-titulo-enlace,
.sc-detalle-titulo-enlace:visited {
    color: inherit !important;
    text-decoration: none !important;
}
.sc-detalle-titulo-enlace:hover,
.sc-detalle-titulo-enlace:focus-visible {
    color: var(--sc-gold) !important;
}

/* El título es opcional en un tip de "¿Sabías qué?" — si el autor no ha
   puesto ninguno, idk_t()/post_title devuelven cadena vacía y el <h3>
   queda vacío: se oculta entero en vez de dejar un hueco en blanco
   encima del texto. Regla general (25 agosto 2026, antes solo vivía
   dentro del carrusel) — Javier: "aunque no haya título debería poder
   verse igual", también en la vista de gestión de Autor/Administrador.
   Inofensiva para el resto de pestañas: su título nunca está vacío. */
.sc-detalle-titulo:empty {
    display: none;
}

.sc-detalle-contenido {
    flex: 1 1 0%;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.sc-detalle-contenido.sc-detalle-con-imagen {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 2rem;
    min-height: 0;
}

.sc-detalle-contenido.sc-detalle-con-imagen .sc-detalle-texto {
    max-width: 90ch;
}

.sc-detalle-contenido:not(.sc-detalle-con-imagen) .sc-detalle-texto {
    max-width: 124ch;
}

/* Historia: el texto ocupa todo el ancho disponible (29/9/2026, Javier:
   "más largo donde aparece el texto") — el límite de 124ch/90ch dejaba
   unos 400 px vacíos a la derecha en pantallas anchas. */
.sc-tab-panel[data-panel="historia"] .sc-detalle-contenido .sc-detalle-texto {
    max-width: none;
}

/* Historia: 3-4 líneas más de texto hacia el pie (29/9/2026, Javier).
   (1) La franja de botones de gestión de debajo del texto va vacía para el
   visitante pero ocupaba ~46 px de márgenes: fuera si no tiene nada.
   (2) Menos margen inferior de la página con la pestaña Historia abierta
   (68 px → 1rem). */
.sc-detalle-acciones-secundarias:not(:has(*)) {
    display: none;
}
main.sc-categoria:has(.sc-tab-panel-activa[data-panel="historia"]) {
    padding-bottom: 1rem;
}

.sc-detalle-imagen-col {
    min-width: 0;
    min-height: 0;
    /* La imagen puede llegar a ser más alta que el hueco disponible
       (columna estrecha + foto muy vertical) — en ese caso se encoge
       ella, nunca empuja la página. */
    max-height: 100%;
    display: flex;
}

.sc-detalle-imagen {
    display: block;
    width: 100%;
    height: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 6px;
    cursor: zoom-in;
    transition: transform 0.2s, box-shadow 0.2s;
}

.sc-detalle-imagen:hover {
    transform: scale(1.015);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.5);
}

.sc-detalle-texto {
    font-size: clamp(14.40px, calc(10.281px + 0.3015vw), 18px);
    color: var(--sc-muted);
    line-height: 1.85;
    flex: 1 1 0%;
    min-height: 0;
    overflow-y: auto;
    padding-right: 0.8rem;
}

.sc-detalle-texto p { margin-bottom: 1.1rem; }

/* Enlaces dentro del texto de una entrada editorial (4/9/2026, a
   petición de Javier: "al pasar el ratón por encima cambia de color y
   ya no se distingue" — el color de hover lo ponía el tema/Astra y
   quedaba casi negro sobre el fondo oscuro). Se fija aquí, con
   subrayado SIEMPRE para que se reconozcan como enlace también sin
   pasar el ratón, y un oro más claro al pasar por encima (sigue
   destacando, nunca se funde con el fondo). !important porque el
   contexto .woocommerce / Astra pisa los colores de <a>. */
.sc-detalle-texto a,
.sc-detalle-texto a:visited {
    color: var(--sc-gold) !important;
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color 0.15s;
}
.sc-detalle-texto a:hover,
.sc-detalle-texto a:focus {
    color: #f2e3b8 !important;
    text-decoration: underline;
}

/* Scrollbar discreta a juego con la paleta, en vez de la gris por
   defecto del navegador (WebKit/Blink + Firefox). */
.sc-detalle-texto::-webkit-scrollbar { width: 6px; }
.sc-detalle-texto::-webkit-scrollbar-track { background: transparent; }
.sc-detalle-texto::-webkit-scrollbar-thumb {
    background: rgba(var(--sc-gold-rgb), 0.3);
    border-radius: 3px;
}
.sc-detalle-texto { scrollbar-width: thin; scrollbar-color: rgba(var(--sc-gold-rgb), 0.3) transparent; }

@media (max-width: 900px) {
    .sc-detalle-contenido.sc-detalle-con-imagen {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 700px) {
    .sc-lista-detalle {
        grid-template-columns: 1fr;
        grid-template-rows: auto 1fr;
    }
    .sc-lista-entradas {
        flex-direction: row;
        overflow-x: auto;
        overflow-y: visible;
        border-right: none;
        border-bottom: 1px solid rgba(var(--sc-gold-rgb), 0.15);
        padding-right: 0;
        padding-bottom: 1rem;
    }
    .sc-lista-item { border-left: none; border-bottom: 2px solid transparent; white-space: nowrap; }
    .sc-lista-item.sc-lista-item-activo { border-left: none; border-bottom-color: var(--sc-gold); }
    .sc-editor-form-grid { grid-template-columns: 1fr; }
    /* En móvil, las tres columnas se apilan — con poco alto de pantalla
       disponible, el scroll independiente por columna (pensado para
       escritorio, ver más arriba) resultaría en varias cajitas de
       scroll diminutas dentro de una pantalla ya pequeña. Aquí se
       revierte a un único scroll natural de toda la caja del modal,
       como pasaba antes de fijar su tamaño (27 agosto 2026). */
    .sc-modal-traducir-caja { height: auto; max-height: 92vh; overflow-y: auto; }
    .sc-modal-traducir-idiomas { grid-template-columns: 1fr; overflow: visible; min-height: 0; }
    .sc-modal-traducir-original,
    .sc-modal-traducir-idioma { height: auto; max-height: none; overflow-y: visible; margin-bottom: 16px; }
}

/* ===== Responsive ===== */
@media (max-width: 900px) {
    .sc-categoria { padding: 2rem 1.2rem 3rem; }
    .sc-tabs { justify-content: flex-start; overflow-x: auto; }
}

/* ===== Lightbox de imagen ===== */
.sc-lightbox-imagen {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.92);
    z-index: 1100;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 3rem;
    cursor: zoom-out;
    animation: sc-previa-fondo 0.15s ease;
}

.sc-lightbox-imagen img {
    max-width: 100%;
    max-height: 100%;
    border-radius: 4px;
    box-shadow: 0 30px 90px rgba(0, 0, 0, 0.7);
}

/* ===== Fila de acciones (Ver historial / Corregir / Eliminar) =====
   A petición de Javier, agosto 2026: estos tres controles estaban
   sueltos, uno debajo de otro (cada uno es un elemento independiente
   dentro de .sc-detalle-entrada, que es un flex-column — así que cada
   uno caía en su propia línea). Se agrupan en una fila propia; el
   panel de historial (.sc-historial-panel, dentro de .sc-historial-wrap)
   sigue apareciendo debajo del botón "Ver historial" al abrirlo, sin
   afectar a Corregir/Eliminar a su lado. El formulario de "Corregir"
   se ha sacado de esta fila en la plantilla (sigue apareciendo debajo,
   a todo lo ancho, al pulsar el botón) — no tendría sentido apretarlo
   dentro de la fila de botones.
*/
/* Dos filas de acciones (31 agosto 2026, nuevo criterio del proyecto —
   ver categoria-render.php, sc_render_detalle_entrada_categoria() y
   sc_render_acciones_secundarias()): PÚBLICA (Escuchar, y mañana
   Vídeo — la ve cualquier visitante) y de GESTIÓN (Ver historial,
   Traducir, Corregir, Eliminar — solo Autor/Administrador). Comparten
   la misma disposición en fila y el mismo espaciado; se mantienen
   como dos clases separadas a propósito, para que nunca puedan
   mezclar sus botones sin querer. */
.sc-detalle-acciones-publico,
.sc-detalle-acciones-secundarias {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1.1rem;
}

/* Separación del texto (31 agosto 2026, a petición de Javier: "los
   botones están muy pegados al texto") — la fila de gestión viene
   justo detrás de .sc-detalle-contenido en el HTML (ver
   categoria-render.php), así que necesita su propio margin-top; la
   fila pública no lo necesita porque .sc-detalle-titulo ya lleva su
   propio margen inferior antes de ella. */
.sc-detalle-acciones-secundarias {
    margin-top: 1.6rem;
}

/* 4/9/2026 — la fila de gestión va justo DESPUÉS del formulario de
   corregir (ver categoria-render.php). Cuando ese formulario está
   ABIERTO (categoria.js le pone style="display:block"), sus "Guardar
   cambios / Cancelar" y esta fila tienen que leerse como un único grupo
   de botones al pie: se recorta la separación entre ambos. Con el
   formulario cerrado, esta fila mantiene su separación normal del
   contenido de arriba. */
.sc-editor-form-corregir[style*="block"] + .sc-detalle-acciones-secundarias {
    margin-top: 0.8rem;
}

.sc-detalle-acciones-publico .sc-historial-wrap,
.sc-detalle-acciones-secundarias .sc-historial-wrap,
.sc-editor-form-acciones .sc-historial-wrap {
    margin-top: 0;
    margin-bottom: 0;
}

.sc-detalle-acciones-publico .sc-editor-btn-mostrar-corregir,
.sc-detalle-acciones-secundarias .sc-editor-btn-mostrar-corregir {
    margin-bottom: 0;
}

/* ===== Guardar cambios (vista "validar") en la misma fila que
   Aprobar / Rechazar / Traducir — a petición de Javier, agosto 2026.
   El formulario de "validar" (sc_render_form_entrada_categoria) no
   tiene caja propia: usa la clase sc-editor-form-editar, que no tiene
   ninguna regla en este archivo (a diferencia de sc-editor-form, la
   de "Nueva entrada", que sí lleva fondo/borde) — así que convertirlo
   en display:contents no hace desaparecer ningún borde ni fondo
   visible. Sus hijos (los campos y el botón Guardar) pasan a contar
   como parte de la fila de .sc-validar-form-y-acciones. El botón
   Guardar sigue siendo un descendiente real del <form> en el DOM
   (display:contents solo cambia cómo se pinta, no la estructura), así
   que el envío y categoria.js (form.querySelector('.sc-editor-btn-guardar'))
   siguen funcionando exactamente igual. */
.sc-validar-form-y-acciones {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    column-gap: 1rem;
}

.sc-editor-form-validar {
    display: contents;
}

.sc-editor-form-validar .sc-editor-form-grid,
.sc-editor-form-validar .sc-histprod {
    flex: 0 0 100%;
}

.sc-editor-form-validar .sc-editor-form-acciones {
    flex: 0 0 auto;
}

.sc-validar-form-y-acciones .sc-validar-y-traducir {
    margin-top: 1.1rem;
}

/* El aviso de error del formulario (p.ej. "faltan traducciones...")
   es, por el display:contents de arriba, un elemento más de esta
   misma fila — sin esto, en cuanto tiene texto se mete EN MEDIO de
   Guardar Cambios y Aprobar/Rechazar y descuadra toda la línea. Con
   flex:1 1 100% pasa a ocupar su propia línea entera; con order:10 se
   coloca siempre al final (debajo de los botones), sea cual sea su
   posición en el HTML. Vacío (el caso normal) no se nota: un <p> sin
   texto no tiene altura. */
.sc-editor-form-validar .sc-editor-mensaje {
    flex: 1 1 100%;
    order: 10;
    margin-top: 0.6rem;
}

/* 7/9/2026, a petición de Javier (captura de la pestaña "Historia" de
   una categoría, entrada en espera de validación): "Traducir" (y "Ver
   historial") se iban a una SEGUNDA línea, separados de Guardar
   cambios / Aprobar / Rechazar. Va contra la convención de todo el
   proyecto — los botones de gestión SIEMPRE en un único bloque al
   final, nunca repartidos (ver también sc_render_acciones_secundarias(),
   y el mismo criterio ya aplicado a la vista "editar"/borrador y a
   "corregir").

   Causa: .sc-validar-y-traducir mete DOS sub-bloques —.sc-validar-bloque
   (Aprobar/Rechazar, con el textarea de motivo de rechazo y el <p> de
   mensaje dentro) y .sc-detalle-acciones-secundarias (Traducir/Ver
   historial)—, cada uno con sus propios márgenes verticales, y eso los
   parte en dos filas.

   Se APLANA .sc-validar-bloque con display:contents para que
   Aprobar/Rechazar y Traducir/Ver historial sean hermanos DIRECTOS en
   la misma fila flex, y se les quitan los márgenes. El textarea de
   motivo de rechazo y el <p> de mensaje, cuando aparecen, siguen
   ocupando su propia fila completa (flex:1 1 100%). */
.sc-validar-y-traducir {
    align-items: center;
    row-gap: 8px;
}
.sc-validar-y-traducir > .sc-validar-bloque {
    display: contents;
}
.sc-validar-y-traducir .sc-validar-acciones,
.sc-validar-y-traducir > .sc-detalle-acciones-secundarias {
    margin: 0;
}
.sc-validar-y-traducir > .sc-validar-form-rechazo,
.sc-validar-y-traducir > .sc-editor-mensaje {
    flex: 1 1 100%;
    margin: 0;
}

/* ===== "Productos relacionados" de una entrada de Historia (7/9/2026,
   a petición de Javier: "las historias... incorpore el botón de ver
   productos"). Ver includes/categoria/historia-productos.php. ===== */

/* Botón público "Ver productos" — misma familia visual que Escuchar /
   Vídeo (sus vecinos en .sc-detalle-acciones-publico). Es un <a>, así
   que hay que fijar text-decoration y TODOS los estados de :visited con
   !important — patrón obligado del proyecto para cualquier <a> con
   pinta de botón (Astra pisa el color de :visited sin !important; ya ha
   pasado varias veces con .sc-detalle-texto a y .sc-evento-btn-mas-info). */
.sc-verproductos-boton,
.sc-verproductos-boton:visited {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-decoration: none !important;
    background: none;
    border: 1px solid rgba(var(--sc-gold-rgb), 0.4);
    color: var(--sc-gold) !important;
}
.sc-verproductos-boton:hover,
.sc-verproductos-boton:focus {
    border-color: var(--sc-gold);
    background: rgba(var(--sc-gold-rgb), 0.08);
    color: var(--sc-gold) !important;
}
.sc-verproductos-cuenta { opacity: 0.7; }

/* Cabecera de la pestaña "Productos" cuando se ha llegado a ella desde
   "Ver productos" de una historia: cartel + botón de volver SIEMPRE
   visible. */
.sc-historia-productos-cabecera {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem 1.2rem;
    margin-bottom: 1.6rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(var(--sc-gold-rgb), 0.25);
}
.sc-historia-productos-volver,
.sc-historia-productos-volver:visited {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    text-decoration: none !important;
    font-family: var(--sc-font-body);
    font-size: clamp(11.60px, calc(8.282px + 0.2429vw), 14.5px);
    letter-spacing: 0.6px;
    text-transform: uppercase;
    font-weight: 600;
    border-radius: 4px;
    padding: 0.45rem 0.9rem;
    background: none;
    border: 1px solid rgba(var(--sc-gold-rgb), 0.4);
    color: var(--sc-gold) !important;
    transition: background 0.2s, border-color 0.2s;
}
.sc-historia-productos-volver:hover,
.sc-historia-productos-volver:focus {
    border-color: var(--sc-gold);
    background: rgba(var(--sc-gold-rgb), 0.08);
    color: var(--sc-gold) !important;
}
.sc-historia-productos-titulo {
    margin: 0;
    font-family: var(--sc-font-body);
    font-size: clamp(13.60px, calc(9.710px + 0.2848vw), 17px);
    color: var(--sc-text);
}

/* ----- Selector de productos en el editor de la entrada ----- */
.sc-histprod {
    margin-top: 0.9rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.sc-histprod-etiqueta {
    font-family: var(--sc-font-body);
    font-size: clamp(11.60px, calc(8.282px + 0.2429vw), 14.5px);
    letter-spacing: 0.6px;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--sc-gold);
}
.sc-histprod-select {
    width: 100%;
    max-width: 480px;
    padding: 0.5rem 0.6rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 4px;
    color: #fff;
    font-size: 17px;
    font-family: var(--sc-font-body);
}
.sc-histprod-select:focus {
    outline: none;
    border-color: var(--sc-gold);
    background: rgba(var(--sc-gold-rgb), 0.06);
}
/* Las <option> las pinta el sistema operativo con su propio tema — se
   fuerza fondo/color legibles donde el navegador lo respeta (Windows/
   Linux); en macOS las ignora, pero ahí el menú nativo ya se ve bien. */
.sc-histprod-select option {
    background: #201c17;
    color: #fff;
}
.sc-histprod-select option:disabled {
    color: var(--sc-muted);
}
.sc-histprod-elegidos {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.sc-histprod-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.3rem 0.3rem 0.6rem;
    background: rgba(var(--sc-gold-rgb), 0.1);
    border: 1px solid rgba(var(--sc-gold-rgb), 0.35);
    border-radius: 999px;
    font-size: clamp(12.80px, calc(9.139px + 0.2680vw), 16px);
    color: #fff;
}
.sc-histprod-chip-sku { color: var(--sc-gold); }
.sc-histprod-chip-quitar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.2rem;
    height: 1.2rem;
    line-height: 1;
    font-size: clamp(13.60px, calc(9.710px + 0.2848vw), 17px);
    color: var(--sc-muted);
    background: none;
    border: none;
    border-radius: 50%;
    cursor: pointer;
}
.sc-histprod-chip-quitar:hover { color: #fff; background: rgba(255, 255, 255, 0.12); }

/* Esquina superior derecha de la tarjeta (28/9/2026): el SKU y, debajo, el
   stock que solo ven Administrador/Autor. A la izquierda va la casilla de
   la selección múltiple. */
.sc-producto-card { position: relative; }
.sc-producto-esquina {
    position: absolute;
    top: 6px;
    right: 6px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    pointer-events: none;
}
/* Discreta (28/9/2026, Javier: "algo más discreto quedaría mejor"): sin
   borde, fondo más transparente, letra pequeña y fina. */
.sc-producto-esquina .sc-producto-sku {
    padding: 1px 6px;
    border-radius: 2px;
    background: rgba(0, 0, 0, 0.45);
    color: rgba(245, 240, 232, 0.8);
    font-size: var(--sc-fs-caption);
    font-weight: 400;
    letter-spacing: 0.03em;
    text-shadow: none;
}

/* Stock en la tarjeta para Administrador/Autor (26-27/9/2026, ver
   includes/producto/producto-visibilidad-stock.php): etiqueta arriba a la
   derecha con las unidades (a la izquierda va la casilla de selección múltiple); los ocultos al público, atenuados y en rojo. */
.sc-producto-card.sc-producto-oculto-stock { opacity: 0.6; }
.sc-producto-stock-gestion {
    padding: 2px 8px;
    border-radius: 3px;
    background: rgba(0, 0, 0, 0.8);
    color: var(--sc-gold);
    font-size: var(--sc-fs-small);
    font-weight: 600;
    pointer-events: none;
}
.sc-producto-stock-gestion-oculto { color: #e07a5f; }

/* ===== Texto de presentación de la categoría (30/9/2026, SEO) =====
   Al final de la pestaña "Productos", debajo de la rejilla — ver
   includes/categoria/categoria-texto-seo.php. Mismo aire que "Nuestra
   historia": título dorado (h2), texto en --sc-muted, viñetas doradas. */
.sc-cat-texto {
    margin: 3rem 0 1.5rem;
    padding-top: 2rem;
    border-top: 1px solid rgba(var(--sc-gold-rgb), 0.2);
    max-width: 900px;
    color: var(--sc-muted);
    font-size: clamp(15px, calc(10.5px + 0.33vw), 18px);
    line-height: 1.8;
}
.sc-cat-texto-titulo {
    margin: 0 0 1rem;
    font-family: var(--sc-font-title);
    font-size: clamp(20px, calc(12px + 0.6vw), 28px);
    color: var(--sc-gold);
    line-height: 1.3;
}
.sc-cat-texto-cuerpo p { margin: 0 0 0.9rem; }
.sc-cat-texto-cuerpo ul { margin: 0 0 1rem; padding-left: 1.3rem; }
.sc-cat-texto-cuerpo li { margin: 0 0 0.4rem; }
.sc-cat-texto-cuerpo li::marker { color: var(--sc-gold); }
.sc-cat-texto-cuerpo strong { color: var(--sc-text); font-weight: 600; }
/* Gestión (Traducir), siempre al final del apartado. */
.sc-cat-texto-gestion { margin-top: 1rem; }

/* ===== "¿Sabías qué?" — una curiosidad en grande (2/10/2026) =====
   Javier eligió la propuesta B ("la veo muy sosa"): una sola curiosidad a la
   vez, con letra grande, comillas doradas, el audio debajo y una foto de la
   categoría a la derecha fundida con el fondo; rayitas para saltar. Solo
   para quien no puede editar (.sc-tips-destacada va junto a
   .sc-carrusel-tips); el movimiento y la foto, en categoria-carrusel.js. */
/* Pantallas pequeñas (2/10/2026, Javier: "no se ve bien"): la pestaña tiene
   un alto fijo (sin scroll de página) y la rejilla encogía la caja por debajo
   de su contenido (350 px para 473 en móvil, 379 para 390 en 1366x768) y
   cortaba el audio y el botón. Ahora la caja mide siempre lo que su
   contenido; si no cabe, desplaza .sc-categoria (la zona interna). */
.sc-tips-destacada {
    flex: none !important;
    height: auto !important;
}
.sc-tips-destacada .sc-carrusel-tips-viewport {
    min-height: min-content;
    position: relative;
    border: 1px solid rgba(var(--sc-gold-rgb), 0.2);
    border-radius: 10px;
    background: #15120c;
}
.sc-tips-destacada .sc-tips-fondo {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 45%;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 0.5s ease;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 40%);
    mask-image: linear-gradient(to right, transparent 0%, #000 40%);
    pointer-events: none;
}
.sc-tips-destacada .sc-tips-fondo.sc-tips-fondo-visible { opacity: 0.9; }
/* Muchas fotos de producto tienen fondo gris claro: un poco más oscuras para
   que no deslumbren junto al negro. */
.sc-tips-destacada .sc-tips-fondo { filter: brightness(0.78); } /* fotos de fondo oscuro: con menos apenas se ven */
.sc-tips-destacada .sc-carrusel-tips-track {
    position: relative;
    gap: 0;
}
.sc-tips-destacada .sc-carrusel-tips-track > .sc-detalle-entrada {
    flex: 0 0 100%;
    min-height: clamp(260px, 42vh, 440px);
    justify-content: center;
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: clamp(1.6rem, 3vw, 3rem) clamp(1.4rem, 4vw, 4rem);
}
/* Texto primero, audio debajo. La imagen propia del tip va de fondo. */
.sc-tips-destacada .sc-detalle-contenido { order: 1; flex: 0 0 auto; display: block; max-width: 58%; }
.sc-tips-destacada .sc-detalle-acciones-publico { order: 2; margin-top: 1.6rem; max-width: 58%; flex-wrap: wrap; }
.sc-tips-destacada .sc-detalle-imagen-col { display: none; }
.sc-tips-destacada .sc-detalle-contenido::before {
    content: "\201C";
    display: block;
    height: 0.5em;
    margin-bottom: 0.15em;
    font-family: var(--sc-font-title);
    font-size: clamp(80px, 7vw, 120px);
    line-height: 1;
    color: var(--sc-gold);
}
.sc-tips-destacada .sc-detalle-texto,
.sc-tips-destacada .sc-detalle-texto p {
    max-width: none !important;
    font-family: var(--sc-font-body);
    font-weight: 300;
    font-size: clamp(19px, calc(12px + 0.75vw), 30px);
    line-height: 1.5;
    color: var(--sc-text);
}
.sc-tips-destacada .sc-tts-play-pausa {
    font-size: var(--sc-fs-small);
    padding: 0.6rem 1.3rem;
    border-radius: 999px;
}
.sc-tips-destacada .sc-carrusel-tips-controles { align-items: center; }
.sc-tips-puntos {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0 0.6rem;
}
.sc-tips-punto {
    all: unset;
    box-sizing: border-box;
    width: 26px;
    height: 16px;
    cursor: pointer;
    position: relative;
}
.sc-tips-punto::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 3px;
    transform: translateY(-50%);
    background: rgba(var(--sc-gold-rgb), 0.25);
    transition: background 0.2s;
}
.sc-tips-punto:hover::before { background: rgba(var(--sc-gold-rgb), 0.6); }
.sc-tips-punto.sc-tips-punto-activo::before { background: var(--sc-gold); }
.sc-tips-punto:focus-visible { outline: 1px solid var(--sc-gold); outline-offset: 2px; }

/* Pantallas estrechas: la foto pasa a todo el fondo, muy oscurecida, y el
   texto ocupa todo el ancho. */
/* Móvil (2/10/2026): la foto, de fondo de toda la tarjeta, la dejaba gris y
   sin leerse; pasa a ser una franja arriba que se funde hacia abajo, y el
   texto baja de tamaño para que quepa. */
@media (max-width: 700px) {
    .sc-tips-destacada .sc-tips-fondo {
        bottom: auto;
        width: 100%;
        height: 140px;
        -webkit-mask-image: linear-gradient(to bottom, #000 30%, transparent 100%);
        mask-image: linear-gradient(to bottom, #000 30%, transparent 100%);
    }
    .sc-tips-destacada .sc-carrusel-tips-track > .sc-detalle-entrada {
        min-height: 0;
        justify-content: flex-start;
        padding: 100px 1.2rem 1.4rem;
    }
    .sc-tips-destacada .sc-detalle-contenido,
    .sc-tips-destacada .sc-detalle-acciones-publico { max-width: none; }
    .sc-tips-destacada .sc-detalle-contenido::before { font-size: 56px; }
    .sc-tips-destacada .sc-detalle-texto,
    .sc-tips-destacada .sc-detalle-texto p { font-size: 17px; line-height: 1.55; }
    .sc-tips-destacada .sc-detalle-acciones-publico { margin-top: 1rem; }
    .sc-tips-punto { width: 18px; }
}

/* Flechas y rayitas DENTRO de la caja (5/10/2026, Javier: debajo, "en el móvil
   se ve muy mal"): los controles se superponen a la caja — una flecha a cada
   lado, a media altura, y las rayitas abajo. En el móvil van sobre la franja
   de la foto (flechas a los lados, rayitas entre ellas), para que texto,
   audio y botón quepan sin deslizar. Probado en la web a 375 y 800 px. */
.sc-tips-destacada { position: relative; }
.sc-tips-destacada .sc-carrusel-tips-controles {
    position: absolute;
    /* top/right/bottom/left y no "inset": Safari de iPhone anterior a 14.5 no
       lo entiende y dejaba los controles debajo de la caja (5/10/2026). */
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: 0;
    pointer-events: none;
}
.sc-tips-destacada .sc-carrusel-tips-flecha {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    padding: 0;
    pointer-events: auto;
}
.sc-tips-destacada .sc-carrusel-tips-prev { left: 12px; }
.sc-tips-destacada .sc-carrusel-tips-next { right: 12px; }
.sc-tips-destacada .sc-tips-puntos {
    position: absolute;
    left: 50%;
    bottom: 14px;
    transform: translateX(-50%);
    margin: 0;
    pointer-events: auto;
}
/* Sitio para la flecha izquierda y para las rayitas de abajo. */
.sc-tips-destacada .sc-carrusel-tips-track > .sc-detalle-entrada {
    padding-left: clamp(4.2rem, 6vw, 5.5rem);
    padding-bottom: 3.2rem;
}
@media (max-width: 700px) {
    .sc-tips-destacada .sc-tips-fondo { height: 120px; }
    .sc-tips-destacada .sc-carrusel-tips-flecha { top: 52px; width: 36px; height: 36px; }
    .sc-tips-destacada .sc-carrusel-tips-prev { left: 10px; }
    .sc-tips-destacada .sc-carrusel-tips-next { right: 10px; }
    .sc-tips-destacada .sc-tips-puntos {
        top: 44px;
        bottom: auto;
        padding: 0 8px;
        border-radius: 999px;
        background: rgba(17, 17, 17, 0.6);
    }
    .sc-tips-destacada .sc-carrusel-tips-track > .sc-detalle-entrada { padding: 92px 1.2rem 1.3rem; }
}

/* ===== Historia (y Relatos) "en grande" para el cliente (5/10/2026) =====
   Javier: "¿Sabías qué? se ve muy bien; algo parecido con las historias. Como
   el texto es más grande, que haga scroll, pero solamente él, y luego los
   botones de adelante y atrás". Misma caja que .sc-tips-destacada (foto a la
   derecha, flechas a los lados, rayitas abajo) con estas diferencias:
   la caja ocupa el alto disponible de la pestaña (no crece con el texto);
   título y botones (Escuchar, Vídeo, Ver productos) fijos arriba; debajo, el
   texto con su propio scroll; letra de lectura, sin comillas. */
.sc-tips-destacada.sc-historias-destacada {
    flex: 1 1 0% !important;
    min-height: 400px;
    grid-template-rows: minmax(0, 1fr);
}
.sc-historias-destacada .sc-carrusel-tips-viewport { min-height: 0; height: 100%; }
.sc-historias-destacada .sc-carrusel-tips-track { height: 100%; }
.sc-historias-destacada .sc-carrusel-tips-track > .sc-detalle-entrada {
    display: flex;
    height: 100%;
    min-height: 0;
    justify-content: flex-start;
    padding-top: clamp(1.4rem, 2.4vw, 2.4rem);
}
.sc-historias-destacada .sc-detalle-titulo {
    order: 0;
    max-width: 58%;
    margin: 0 0 0.9rem;
    font-size: clamp(18px, calc(12px + 0.7vw), 28px);
    color: var(--sc-gold);
}
.sc-historias-destacada .sc-detalle-acciones-publico { order: 1; margin: 0 0 1rem; }
/* La fila de gestión va vacía para el cliente, pero sus márgenes abrían un
   hueco de ~45 px entre el título y los botones: al final y sin márgenes. */
.sc-historias-destacada .sc-detalle-acciones-secundarias { order: 3; margin: 0; padding: 0; min-height: 0; border: 0; }
.sc-historias-destacada .sc-detalle-contenido,
.sc-historias-destacada .sc-detalle-contenido.sc-detalle-con-imagen {
    order: 2;
    display: flex;
    flex-direction: column;
    flex: 1 1 0%;
    min-height: 0;
    max-width: 58%;
}
.sc-historias-destacada .sc-detalle-contenido::before { content: none; }
.sc-historias-destacada .sc-detalle-texto {
    flex: 1 1 0%;
    min-height: 0;
    overflow-y: auto;
    padding-right: 0.9rem;
    scrollbar-width: thin;
    scrollbar-color: rgba(var(--sc-gold-rgb), 0.5) transparent;
}
.sc-historias-destacada .sc-detalle-texto,
.sc-historias-destacada .sc-detalle-texto p {
    font-weight: 400;
    font-size: clamp(15px, calc(11px + 0.4vw), 19px);
    line-height: 1.7;
}
@media (max-width: 700px) {
    .sc-tips-destacada.sc-historias-destacada { min-height: 520px; }
    .sc-historias-destacada .sc-carrusel-tips-track > .sc-detalle-entrada { padding-top: 92px; }
    .sc-historias-destacada .sc-detalle-titulo,
    .sc-historias-destacada .sc-detalle-contenido,
    .sc-historias-destacada .sc-detalle-contenido.sc-detalle-con-imagen { max-width: none; }
    .sc-historias-destacada .sc-detalle-titulo { font-size: 18px; margin-bottom: 0.7rem; }
    .sc-historias-destacada .sc-detalle-texto,
    .sc-historias-destacada .sc-detalle-texto p { font-size: 16px; }
}

/* Eventos en grande (6/10/2026): mismas reglas que las historias; aquí solo
   lo propio de un evento. Fecha/lugar y "Más información" bajo el título, el
   crédito de la imagen (obligatorio por licencia) al final, bajo el texto, y
   el combo de países encima de la caja, sin estirarse. */
.sc-historias-destacada .sc-evento-info-publica { order: 0; max-width: 58%; margin-bottom: 0.9rem; flex: 0 0 auto; }
.sc-historias-destacada .sc-evento-credito-imagen { order: 3; max-width: 58%; margin: 0.6rem 0 0; flex: 0 0 auto; }
.sc-tab-panel[data-panel="eventos"] > .sc-evento-selector-pais { flex: 0 0 auto; }
@media (max-width: 700px) {
    .sc-historias-destacada .sc-evento-info-publica,
    .sc-historias-destacada .sc-evento-credito-imagen { max-width: none; }
}

/* Contador "3 / 16" en lugar de rayitas cuando hay más de 10 (6/10/2026). */
.sc-tips-contador {
    padding: 2px 12px;
    border-radius: 999px;
    background: rgba(17, 17, 17, 0.6);
    color: var(--sc-gold);
    font-family: var(--sc-font-body);
    font-size: var(--sc-fs-small);
    letter-spacing: 0.08em;
    white-space: nowrap;
}

/* Lista de gestión de Relatos: "H2 ·" delante del título = historia a la que
   pertenece (12/10/2026: el número del relato va por historia). */
.sc-lista-item-historia { color: var(--sc-gold); opacity: 0.75; margin-right: 0.25em; white-space: nowrap; }