/* =========================================================
   LISTA DE OBRAS DE UN COMPOSITOR (compositores/obras-compositor.php)
   MOBILE FIRST: lo de arriba es para celular; los @media (min-width) agrandan
   hacia tablet (600 / 768 px) y escritorio (1024 px), como catalogo.css.
   Las obras usan las clases de siempre (czm-work-entry, czm-entry-title...),
   así cada página conserva su estilo; aquí van solo las piezas nuevas.
   Dos fondos: .czm-obras--pagina (oscuro sobre arena) y .czm-obras--catalogo (blanco sobre terracota).
   ========================================================= */

.czm-obras [hidden] { display: none !important; }
/* Sin el recuadro azul que el celular pinta al tocar algo que se puede presionar (se veía sobre toda la obra) */
.czm-obras, .czm-obras *, .cen-bar-cats, .cen-bar-cats * { -webkit-tap-highlight-color: transparent; }

.czm-obras {
    --ob-tinta: #1a1a1a;
    --ob-gris: #6b6760;
    --ob-gris-2: #9a958b;
    --ob-linea: #d1cdc4;
    --ob-campo: #ffffff;
    --ob-campo-borde: #d1cdc4;
    --ob-riel: rgba(26, 26, 26, 0.06);
    --ob-activo-fondo: #1a1a1a;
    --ob-activo-texto: #f2efe8;
    --ob-activo-num: rgba(242, 239, 232, 0.65);
    --ob-acento: #307c56;
    --ob-foco: #307c56;
    --ob-flecha-fondo: #ffffff;
    --ob-flecha-borde: #d1cdc4;
    --ob-flecha-icono: #1a1a1a;
    --ob-titulo-seccion: #1a1a1a;
    --ob-cuenta-seccion: #9a958b;
    --ob-destacar: rgba(48, 124, 86, 0.12);
}
.czm-obras--catalogo {
    --ob-tinta: #ffffff;
    --ob-gris: rgba(255, 255, 255, 0.8);
    --ob-gris-2: rgba(255, 255, 255, 0.55);
    --ob-linea: rgba(0, 0, 0, 0.15);
    --ob-campo: rgba(0, 0, 0, 0.14);
    --ob-campo-borde: transparent;
    --ob-riel: rgba(0, 0, 0, 0.14);
    --ob-activo-fondo: #ffffff;
    --ob-activo-texto: #b44f34;
    --ob-activo-num: rgba(180, 79, 52, 0.7);
    --ob-acento: #ffe8e2;
    --ob-foco: #ffffff;
    --ob-flecha-fondo: #ffffff;
    --ob-flecha-borde: transparent;
    --ob-flecha-icono: #1a1a1a;
    --ob-titulo-seccion: #612010;
    --ob-cuenta-seccion: rgba(0, 0, 0, 0.4);
    --ob-destacar: rgba(255, 255, 255, 0.16);
}

.czm-obras button, .czm-obras select, .czm-obras input { font-family: 'Montserrat', sans-serif; }
.czm-obras form { margin: 0; } /* algunos navegadores/temas le ponen margen y desalinean la fila */
.czm-obras :focus-visible { outline: 2px solid var(--ob-foco); outline-offset: 2px; }
.czm-obras-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Barra: fila 1 (buscador + orden + vista) y fila 2 (categorías) ---------- */
.czm-obras-barra { display: flex; flex-direction: column; gap: 14px; margin-bottom: 6px; }
/* Página del compositor: la barra se queda fija debajo del menú del sitio al bajar por las obras.
   --czm-obras-top = alto del menú fijo (lo mide obras-compositor.js; 72px de respaldo). */
.czm-obras--pagina .czm-obras-barra { position: -webkit-sticky; position: sticky; top: var(--czm-obras-top, 72px); z-index: 30; background: #f2efe8; padding-top: 12px; margin-top: -12px; }
.czm-obras-fila1 { display: flex; align-items: center; gap: 8px; }
.czm-obras-espacio { flex: 1 1 0; } /* empuja orden y vista a la derecha cuando no hay buscador (catálogo) */
.czm-obras-buscar + .czm-obras-espacio { display: none; }

.czm-obras-buscar { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 14px; border-radius: 22px; background: var(--ob-campo); border: 1px solid var(--ob-campo-borde); transition: border-color .2s, box-shadow .2s; }
.czm-obras-buscar:focus-within { border-color: var(--ob-foco); box-shadow: 0 0 0 3px rgba(48, 124, 86, 0.12); }
.czm-obras-buscar svg { flex-shrink: 0; color: var(--ob-gris-2); }
.czm-obras-q { flex: 1; min-width: 0; margin: 0; padding: 0; border: 0; outline: 0; background: transparent; color: var(--ob-tinta); font-size: 16px; /* 16px: el iPhone no hace zoom al escribir */ }
.czm-obras-q::placeholder { color: var(--ob-gris-2); }
/* Sin el rectángulo verde dentro del buscador: el foco ya se ve en el borde redondeado (.czm-obras-buscar:focus-within) */
.czm-obras .czm-obras-q:focus, .czm-obras .czm-obras-q:focus-visible { outline: none !important; box-shadow: none !important; border: 0 !important; }

/* Orden: en celular solo el ícono (44 px para el dedo); desde tablet también el texto.
   El <select> nativo va encima, invisible: al tocar, el celular abre su propia lista. */
.czm-obras-orden { position: relative; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 44px; min-width: 44px; margin: 0; padding: 0 10px; border-radius: 22px; color: var(--ob-gris); cursor: pointer; transition: background .2s, color .2s; }
.czm-obras-orden-txt, .czm-obras-chev { display: none; }
.czm-obras-orden-txt { font-size: 0.72rem; font-weight: 600; white-space: nowrap; }
.czm-obras-orden-sel { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; font-size: 16px; }
.czm-obras-orden-sel option { color: #1a1a1a; }
.czm-obras-orden:focus-within { box-shadow: 0 0 0 2px var(--ob-foco); }

/* Vista. Celular: un solo botón que cambia a la otra vista (deja espacio al buscador).
   Desde 600 px: los dos íconos en un riel suave, con el activo resaltado. */
.czm-obras-vista { flex-shrink: 0; display: inline-flex; gap: 2px; }
.czm-obras-vista button { width: 44px; height: 44px; margin: 0; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--ob-gris); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: background .2s, color .2s, box-shadow .2s; }
.czm-obras-vista button[aria-pressed="true"] { display: none; }

/* Categorías sin bordes; la elegida, rellena. Celular: una línea que se desliza, con flechas A LOS LADOS
   (en su propio espacio, no tapan ninguna categoría) que se atenúan en los extremos. */
.czm-obras-cats-caja { position: relative; display: flex; align-items: flex-start; border-bottom: 1px solid var(--ob-linea); }
.czm-obras-filtros { flex: 1; min-width: 0; display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; padding: 2px 0 12px; scroll-behavior: smooth; }
.czm-obras-filtros::-webkit-scrollbar { display: none; }
.czm-obras-cats-caja.hay-der .czm-obras-filtros { -webkit-mask-image: linear-gradient(to right, #000 85%, transparent); mask-image: linear-gradient(to right, #000 85%, transparent); }
.czm-obras-cats-caja.hay-izq .czm-obras-filtros { -webkit-mask-image: linear-gradient(to left, #000 85%, transparent); mask-image: linear-gradient(to left, #000 85%, transparent); }
.czm-obras-cats-caja.hay-izq.hay-der .czm-obras-filtros { -webkit-mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent); }

.czm-obras-chip { flex-shrink: 0; display: inline-flex; align-items: baseline; gap: 6px; min-height: 36px; margin: 0; padding: 9px 14px; border: 0; border-radius: 999px; background: transparent; color: var(--ob-gris); font-size: 0.66rem; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; line-height: 1.2; white-space: nowrap; cursor: pointer; transition: background .2s, color .2s; }
.czm-obras-chip .czm-obras-n { font-weight: 500; font-size: 0.95em; color: var(--ob-gris-2); font-variant-numeric: tabular-nums; }
.czm-obras-chip[aria-pressed="true"] { background: var(--ob-activo-fondo); color: var(--ob-activo-texto); }
.czm-obras-chip[aria-pressed="true"] .czm-obras-n { color: var(--ob-activo-num); }
.czm-obras-chip.is-empty:not([aria-pressed="true"]) { opacity: 0.4; }

.czm-obras-flecha { flex-shrink: 0; display: none; align-items: center; justify-content: center; width: 36px; height: 36px; margin: 2px 0 0; padding: 0; border: 1px solid var(--ob-flecha-borde); border-radius: 50%; background: var(--ob-flecha-fondo); color: var(--ob-flecha-icono); cursor: pointer; transition: opacity .2s; }
.czm-obras-flecha-izq { margin-right: 6px; }
.czm-obras-flecha-der { margin-left: 6px; }
.czm-obras-flecha:disabled { opacity: 0.3; cursor: default; }
.czm-obras-cats-caja.con-flechas .czm-obras-flecha { display: inline-flex; }

/* ---------- Acordeón de categorías: un botón "Categoría: Todas · 99 ▾" que las despliega ----------
   Lo usan la página del compositor (siempre) y la barra negra del catálogo. Al elegir una categoría se cierra
   y el botón la muestra, con una × para quitarla (la × solo aparece si hay filtro). */
.czm-obras-cats-caja [hidden] { display: none !important; } /* también cuando se muda fuera de .czm-obras */
.czm-obras-cats-cabeza { display: none; }
.czm-obras-cats-caja--acordeon { flex-wrap: wrap; align-items: center; }
.czm-obras-cats-caja--acordeon .czm-obras-cats-cabeza { display: flex; align-items: center; gap: 6px; }
.czm-obras-cats-caja--acordeon .czm-obras-flecha,
.czm-obras-cats-caja--acordeon.con-flechas .czm-obras-flecha { display: none !important; }
.czm-obras-cats-caja--acordeon .czm-obras-filtros { display: none; flex: 1 0 100%; flex-wrap: wrap; row-gap: 6px; overflow: visible; padding: 10px 0 2px; -webkit-mask-image: none !important; mask-image: none !important; }
.czm-obras-cats-caja--acordeon.is-abierto .czm-obras-filtros { display: flex; }
/* Como la barra va fija, el acordeón abierto no debe tapar toda la pantalla: si son muchas categorías, se desplaza por dentro */
.czm-obras-cats-caja--acordeon.is-abierto .czm-obras-filtros { max-height: 45vh; overflow-y: auto; overscroll-behavior: contain; }
/* En la página del compositor la línea de abajo separa el acordeón de la lista */
.czm-obras--pagina .czm-obras-cats-caja--acordeon { padding-bottom: 12px; }
/* Celular: el botón de categorías (y las categorías al abrirlo) centrados, con aire respecto a lo de arriba.
   Desde tablet vuelven a alinearse a la izquierda. */
.czm-obras-cats-caja--acordeon,
.czm-obras-cats-caja--acordeon .czm-obras-filtros { justify-content: center; }
.czm-obras--pagina .czm-obras-barra { gap: 18px; }

.czm-obras-cats-toggle { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; margin: 0; padding: 0 14px; border: 1px solid var(--ob-toggle-borde, #d1cdc4); border-radius: 18px; background: var(--ob-toggle-fondo, #ffffff); color: var(--ob-toggle-texto, #1a1a1a); font-family: 'Montserrat', sans-serif; font-size: 0.64rem; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; line-height: 1; cursor: pointer; transition: background .2s, border-color .2s; }
.czm-obras-cats-toggle-lbl { font-weight: 600; color: var(--ob-toggle-lbl, #6b6760); }
.czm-obras-cats-toggle-n { font-weight: 500; color: var(--ob-toggle-num, #9a958b); font-variant-numeric: tabular-nums; }
.czm-obras-cats-toggle-chev { transition: transform .2s; }
.czm-obras-cats-caja--acordeon.is-abierto .czm-obras-cats-toggle-chev { transform: rotate(180deg); }
.czm-obras-cats-toggle.con-filtro { background: var(--ob-activo-fondo); border-color: var(--ob-activo-fondo); color: var(--ob-activo-texto); }
.czm-obras-cats-toggle.con-filtro .czm-obras-cats-toggle-lbl,
.czm-obras-cats-toggle.con-filtro .czm-obras-cats-toggle-n { color: var(--ob-activo-num); }
.czm-obras-cats-limpiar { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; margin: 0; padding: 0; border: 1px solid var(--ob-toggle-borde, #d1cdc4); border-radius: 50%; background: var(--ob-toggle-fondo, #ffffff); color: var(--ob-toggle-texto, #1a1a1a); cursor: pointer; }

/* ---------- Catálogo: categorías dentro de la barra negra fija (siguen a la vista al bajar por la lista) ---------- */
.cen-bar-cats { padding-top: 14px; padding-bottom: 2px; } /* celular: aire entre el título/buscador y las categorías */
.cen-bar-cats[hidden] { display: none !important; }
.czm-obras-cats-caja--barra {
    --ob-tinta: #ffffff;
    --ob-gris: rgba(255, 255, 255, 0.72);
    --ob-gris-2: rgba(255, 255, 255, 0.45);
    --ob-riel: rgba(255, 255, 255, 0.1);
    --ob-activo-fondo: #ffffff;
    --ob-activo-texto: #1a1a1a;
    --ob-activo-num: rgba(26, 26, 26, 0.55);
    --ob-foco: #ffffff;
    --ob-toggle-fondo: transparent;
    --ob-toggle-borde: rgba(255, 255, 255, 0.22);
    --ob-toggle-texto: #ffffff;
    --ob-toggle-lbl: rgba(255, 255, 255, 0.6);
    --ob-toggle-num: rgba(255, 255, 255, 0.5);
    border-bottom: 0;
    font-family: 'Montserrat', sans-serif;
}
.czm-obras-cats-caja--barra :focus-visible { outline: 2px solid #ffffff; outline-offset: 2px; }
.czm-obras-cats-caja--barra .czm-obras-chip { min-height: 32px; padding: 7px 12px; }
.czm-obras-cats-caja--barra .czm-obras-cats-toggle { min-height: 32px; padding: 0 12px; border-radius: 16px; }
.czm-obras-cats-caja--barra .czm-obras-cats-limpiar { width: 32px; height: 32px; }

/* ---------- Estado: solo al filtrar o buscar ---------- */
.czm-obras-estado { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 14px; margin: 14px 0 2px; }
.czm-obras-estado-txt { margin: 0; font-family: 'Cormorant Garamond', 'Playfair Display', Georgia, serif; font-style: italic; font-size: 1.05rem; line-height: 1.4; color: var(--ob-gris); }
.czm-obras-estado-txt strong { font-family: 'Montserrat', sans-serif; font-style: normal; font-size: 0.66rem; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--ob-tinta); }
.czm-obras-estado-acciones { display: inline-flex; flex-wrap: wrap; gap: 0 16px; }
.czm-obras-link { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; margin: 0; padding: 0; border: 0; background: none; color: var(--ob-acento); font-size: 0.62rem; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; text-decoration: none; cursor: pointer; }

/* ---------- En cada obra ---------- */
/* Año: pastilla negra junto al título (antes "(2014)" en cursiva gris, que se perdía sobre el terracota).
   Título y año van en el mismo renglón: si el título ocupa dos líneas, el año queda al final de la última.
   Es "inline" (no inline-block) a propósito: así el navegador no puede cortar entre la última palabra y el año. */
.czm-obras .czm-title-wrapper { display: block; line-height: 1.15; }
.czm-obras .czm-entry-year { display: inline; margin-left: 10px; padding: 5px 9px 4px; border-radius: 999px; background: #1a1a1a; color: #f2efe8; font-family: 'Montserrat', sans-serif; font-size: 0.66rem; font-style: normal; font-weight: 600; letter-spacing: 0.08em; line-height: 1; font-variant-numeric: tabular-nums; white-space: nowrap; vertical-align: 0.4em; }

/* Categorías: texto en versalitas separado por punto (antes, cajitas con borde). Al tocarlas se filtra. */
.czm-obra-cats { display: flex; flex-wrap: wrap; align-items: center; margin: 0 0 8px; }
.czm-obra-cats-lbl { font-size: 0.55rem; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; color: var(--ob-gris-2); margin-right: 8px; }
.czm-obra-cat { margin: 0; padding: 2px 0; border: 0; background: none; color: var(--ob-acento); font-size: 0.58rem; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; line-height: 1.6; text-underline-offset: 3px; cursor: pointer; }
.czm-obra-cat + .czm-obra-cat::before { content: '·'; color: var(--ob-gris-2); margin: 0 8px; font-weight: 400; }
.czm-obra-cat.is-current { text-decoration: underline; }

/* Duración: sola en su línea, debajo de la dotación ("09'"). Va en Montserrat porque las cifras de la tipografía
   del título (Playfair) son "de texto": el 0 y el 9 salen chiquitos y bajos y casi no se leían. */
.czm-obras .czm-obra-dur { margin: 6px 0 0; font-family: 'Montserrat', sans-serif; font-size: 1.25rem; font-weight: 600; font-style: normal; line-height: 1.2; letter-spacing: 0.02em; font-variant-numeric: lining-nums tabular-nums; color: var(--ob-tinta); white-space: nowrap; }
@media (min-width: 768px) { .czm-obras .czm-obra-dur { font-size: 1.35rem; } }

/* Obra sin "Más información": no se abre ni se mueve al pasar el mouse */
.czm-obras .czm-work-entry--simple { cursor: default; }
.czm-obras .czm-work-entry--simple:hover { padding-left: 0; }
/* En pantallas táctiles el "hover" se queda pegado al tocar: sin el corrimiento de 12 px (catalogo.css y la página
   del compositor lo ponen para el mouse), que reacomodaba los botones del pie y descuadraba el menú Compartir */
@media (hover: none) {
    .czm-obras .czm-work-entry:hover { padding-left: 0; }
}

/* Pie: Más información (si hay) · Partitura de muestra (si hay) · Solicitar (en celular, siempre a la vista) */
.czm-obra-pie { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 12px; }
.czm-obras .czm-obra-pie .czm-entry-expand { margin: 0; cursor: pointer; }
.czm-obra-muestra { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; margin: 0; padding: 0; border: 0; background: none; color: var(--ob-tinta); font-size: 0.6rem; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--ob-linea); cursor: pointer; }
.czm-obras .czm-obra-solicitar-cel { margin-left: auto; min-height: 34px; padding: 0 14px; }
.czm-obras-ico { flex-shrink: 0; }

/* Compartir: enlace directo a la obra para mandarlo por WhatsApp o copiarlo (el menú lo abre obras-compositor.js).
   Celular y tablet: en el pie, junto a Solicitar. Escritorio: junto a Solicitar, a la derecha del título.
   Se ve igual que "Partitura de muestra". El ícono se dibuja aquí (máscara SVG) para no repetirlo en cada obra. */
.czm-obra-compartir { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; margin: 0; padding: 0; border: 0; background: none; color: var(--ob-tinta); font-size: 0.6rem; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--ob-linea); line-height: 1.2; cursor: pointer; }
.czm-obra-compartir::before {
    content: ''; flex-shrink: 0; width: 14px; height: 14px; background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='18' cy='5' r='3'/%3E%3Ccircle cx='6' cy='12' r='3'/%3E%3Ccircle cx='18' cy='19' r='3'/%3E%3Cpath d='M8.6 13.5l6.8 4M15.4 6.5l-6.8 4'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='18' cy='5' r='3'/%3E%3Ccircle cx='6' cy='12' r='3'/%3E%3Ccircle cx='18' cy='19' r='3'/%3E%3Cpath d='M8.6 13.5l6.8 4M15.4 6.5l-6.8 4'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* Compartir y Solicitar siempre juntos a la derecha: en escritorio junto al título (.czm-obra-acciones),
   en celular y tablet en el pie (.czm-obra-pie-acciones). Si no caben, bajan juntos a la siguiente línea. */
.czm-obras .czm-obra-acciones,
.czm-obras .czm-obra-pie-acciones { margin-left: auto; align-items: center; gap: 18px; }
.czm-obras .czm-obra-acciones .czm-header-solicitar,
.czm-obras .czm-obra-pie-acciones .czm-obra-solicitar-cel { margin-left: 0; }

/* Obra a la que se llegó con un enlace compartido: se resalta un momento y se apaga sola (irAObra en el JS) */
.czm-obras .czm-work-entry.czm-obra-destacada { border-radius: 6px; animation: czm-obra-destacar 3s ease-out both; }
@keyframes czm-obra-destacar {
    0%, 55% { background-color: var(--ob-destacar); box-shadow: 0 0 0 12px var(--ob-destacar); }
    100% { background-color: transparent; box-shadow: 0 0 0 12px transparent; }
}

/* Menú "Compartir": uno solo para toda la página, flotando junto al botón (va fuera de .czm-obras) */
.czm-compartir-menu { position: fixed; top: 0; left: 0; z-index: 10050; box-sizing: border-box; width: max-content; min-width: 220px; max-width: calc(100vw - 32px); margin: 0; padding: 6px; border-radius: 12px; background: #ffffff; color: #1a1a1a; box-shadow: 0 14px 36px rgba(0, 0, 0, 0.22), 0 2px 6px rgba(0, 0, 0, 0.08); font-family: 'Montserrat', sans-serif; text-align: left; -webkit-tap-highlight-color: transparent; }
.czm-compartir-menu[hidden] { display: none !important; }
.czm-compartir-menu .czm-compartir-titulo { margin: 0; padding: 8px 12px 6px; font-size: 0.56rem; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; line-height: 1.3; color: #9a958b; }
.czm-compartir-menu .czm-compartir-op { display: flex; align-items: center; gap: 12px; box-sizing: border-box; width: 100%; min-height: 44px; margin: 0; padding: 0 12px; border: 0; border-radius: 8px; background: none; box-shadow: none; color: #1a1a1a; font-family: inherit; font-size: 0.8rem; font-weight: 600; letter-spacing: normal; line-height: 1.2; text-align: left; text-transform: none; text-decoration: none; white-space: nowrap; cursor: pointer; }
.czm-compartir-menu .czm-compartir-op i { width: 20px; flex-shrink: 0; font-size: 1.2rem; line-height: 1; text-align: center; color: #1a1a1a; }
.czm-compartir-menu .czm-compartir-wa i { color: #25d366; } /* el mismo verde de los botones de WhatsApp del sitio */
.czm-compartir-menu .czm-compartir-op.is-hecho,
.czm-compartir-menu .czm-compartir-op.is-hecho i { color: #307c56; }
.czm-compartir-menu .czm-compartir-op:focus-visible { outline: 2px solid #307c56; outline-offset: -2px; }
/* Solo si el navegador no deja copiar: el enlace a la vista, ya seleccionado, para copiarlo a mano.
   16px para que el iPhone no haga zoom al tocarlo. */
.czm-compartir-menu .czm-compartir-url { display: block; box-sizing: border-box; width: 100%; margin: 4px 0 2px; padding: 9px 10px; border: 1px solid #d1cdc4; border-radius: 8px; background: #f7f5f0; color: #1a1a1a; font-family: inherit; font-size: 16px; line-height: 1.2; }
.czm-compartir-menu .czm-compartir-url[hidden] { display: none; }

/* Notas de la obra: solo la tarjeta, sin la línea de color a la izquierda (venía del CSS de cada página) */
.czm-obras .czm-detail-notes { border-left: 0; }
/* En la página del compositor (fondo crema) la tarjeta crema se perdía: fondo negro y texto claro */
.czm-obras--pagina .czm-detail-notes { background: #1a1a1a; }
.czm-obras--pagina .czm-detail-notes strong { color: rgba(242, 239, 232, 0.6); }
.czm-obras--pagina .czm-detail-notes p { color: #f2efe8; }
/* En el catálogo (fondo terracota): tarjeta blanca con texto negro */
.czm-obras--catalogo .czm-detail-notes { background: #ffffff; }
.czm-obras--catalogo .czm-detail-notes strong { color: rgba(26, 26, 26, 0.55); }
.czm-obras--catalogo .czm-detail-notes p { color: #1a1a1a; }

/* Tarjetas con datos: "Grabación" (pestaña Fonoteca del Gestor) y "Otros datos" (campos que se agreguen al Gestor
   después). Son la misma tarjeta que las notas. Catálogo: tarjeta blanca, botón negro. Página del compositor:
   tarjeta negra, botón crema. */
.czm-obras .czm-detail-notes { --ob-nota-texto: #1a1a1a; --ob-nota-suave: rgba(26, 26, 26, 0.55); --ob-nota-boton: #1a1a1a; --ob-nota-boton-texto: #ffffff; }
.czm-obras--pagina .czm-detail-notes { --ob-nota-texto: #f2efe8; --ob-nota-suave: rgba(242, 239, 232, 0.6); --ob-nota-boton: #f2efe8; --ob-nota-boton-texto: #1a1a1a; }
.czm-obras .czm-grab { display: flex; align-items: flex-start; gap: 14px; margin-top: 8px; }
/* Medidas fijas: el panel calcula su alto al abrirse y la portada no debe crecer después, al terminar de cargar */
.czm-obras .czm-grab-portada { flex-shrink: 0; width: 72px; height: 72px; border-radius: 4px; object-fit: cover; background: rgba(0, 0, 0, 0.08); }
.czm-obras .czm-grab-portada:only-child { width: 120px; height: 120px; } /* sin datos del disco al lado, la portada es lo principal */
.czm-obras .czm-ficha-datos { flex: 1; min-width: 0; display: grid; gap: 10px 24px; margin: 0; }
.czm-obras .czm-detail-otros .czm-ficha-datos { margin-top: 8px; }
.czm-obras .czm-ficha-datos dt { margin: 0 0 2px; font-family: 'Montserrat', sans-serif; font-size: 0.5rem; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--ob-nota-suave); }
.czm-obras .czm-ficha-datos dd { margin: 0; font-family: var(--font-editorial, var(--font-serif, Georgia, serif)); font-size: 0.95rem; line-height: 1.4; color: var(--ob-nota-texto); overflow-wrap: anywhere; }
/* Enlaces: el botón dice adónde lleva ("Escuchar en Bandcamp", "Ver en urtextonline.com") y se abre en pestaña nueva */
.czm-obras .czm-obra-enlaces { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-top: 12px; }
.czm-obras dd .czm-obra-enlaces { margin-top: 6px; }
.czm-obras dd .czm-obra-enlaces:first-child { margin-top: 2px; }
.czm-obras .czm-obra-enlace,
.czm-obras .czm-obra-enlace:visited,
.czm-obras .czm-obra-enlace:hover,
.czm-obras .czm-obra-enlace:focus { display: inline-flex; align-items: center; gap: 8px; box-sizing: border-box; max-width: 100%; min-height: 44px; padding: 8px 18px; border: 0; border-radius: 22px; background: var(--ob-nota-boton); color: var(--ob-nota-boton-texto); box-shadow: none; font-family: 'Montserrat', sans-serif; font-size: 0.62rem; font-weight: 700; letter-spacing: 1.2px; line-height: 1.3; text-align: left; text-transform: uppercase; text-decoration: none; }
.czm-obras .czm-obra-enlace span { overflow-wrap: anywhere; } /* un dominio largo baja de renglón en vez de salirse */
@media (min-width: 600px) {
    .czm-obras .czm-ficha-datos { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
}
@media (min-width: 768px) {
    .czm-obras .czm-grab { gap: 18px; }
    .czm-obras .czm-grab-portada { width: 96px; height: 96px; }
    .czm-obras .czm-grab-portada:only-child { width: 140px; height: 140px; }
    .czm-obras .czm-ficha-datos dd { font-size: 1rem; }
}

/* Más información / Cerrar, traducidos (antes el texto estaba fijo en el CSS de cada página) */
.czm-obras .czm-expand-label::before { content: attr(data-abrir); }
.czm-obras .czm-work-entry.is-open .czm-expand-label::before { content: attr(data-cerrar); }

/* ---------- Vista "Por categoría" ---------- */
.czm-obras-grupos .czm-cat-title { display: flex; align-items: baseline; gap: 10px; color: var(--ob-titulo-seccion); }
.czm-obras-grupos .czm-cat-number { font-family: 'Playfair Display', serif; font-size: 0.9rem; font-weight: 700; color: rgba(0, 0, 0, 0.3); }
.czm-obras-grupos .czm-cat-cnt { margin-left: auto; font-family: 'Montserrat', sans-serif; font-style: normal; font-size: 0.56rem; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--ob-cuenta-seccion); white-space: nowrap; }
.czm-obras-grupos .czm-cat-title:first-child { margin-top: 1.5rem; }

/* ---------- Sin resultados ---------- */
.czm-obras-vacio { padding: 36px 0 12px; text-align: center; }
.czm-obras-vacio p { margin: 0 0 8px; font-family: 'Cormorant Garamond', 'Playfair Display', Georgia, serif; font-style: italic; font-size: 1.2rem; color: var(--ob-gris); }

/* ---------- Barra oscura del catálogo: total de obras junto al nombre ---------- */
.cen-main-count { display: none; color: #aaaaaa; font-family: 'Montserrat', sans-serif; font-size: 0.6rem; font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ---------- Hover solo donde hay mouse (en celular se queda "pegado" al tocar) ---------- */
@media (hover: hover) {
    .czm-obras-cats-toggle:not(.con-filtro):hover, .czm-obras-cats-limpiar:hover { background: var(--ob-riel); }
    .czm-obras-orden:hover { background: var(--ob-riel); color: var(--ob-tinta); }
    .czm-obras-vista button:not([aria-pressed="true"]):hover { color: var(--ob-tinta); }
    .czm-obras-chip:not([aria-pressed="true"]):hover { background: var(--ob-riel); color: var(--ob-tinta); }
    .czm-obra-cat:hover { text-decoration: underline; }
    .czm-obra-muestra:hover, .czm-obra-compartir:hover { text-decoration-color: currentColor; }
    .czm-obras .czm-obra-enlace:hover { opacity: 0.85; }
    .czm-obras-link:hover { opacity: 0.75; }
    .czm-compartir-menu .czm-compartir-op:hover { background: #f2efe8; color: #1a1a1a; }
}

/* ---------- Tablet chica ---------- */
@media (min-width: 600px) {
    .czm-obras-orden { padding: 0 14px; }
    .czm-obras-orden-txt, .czm-obras-chev { display: inline; }
    .czm-obras-vista { padding: 3px; border-radius: 22px; background: var(--ob-riel); }
    .czm-obras-vista button { width: 38px; height: 38px; }
    .czm-obras-vista button[aria-pressed="true"] { display: inline-flex; background: #ffffff; color: #1a1a1a; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12); }
}

/* ---------- Tablet: todas las categorías a la vista (en dos líneas si hace falta), sin flechas ---------- */
@media (min-width: 768px) {
    .czm-obras-filtros { flex-wrap: wrap; row-gap: 4px; overflow: visible; }
    /* Tablet y escritorio: categorías alineadas a la izquierda y la barra negra más compacta */
    .czm-obras-cats-caja--acordeon,
    .czm-obras-cats-caja--acordeon .czm-obras-filtros { justify-content: flex-start; }
    .czm-obras--pagina .czm-obras-barra { gap: 14px; }
    .cen-bar-cats { padding-top: 8px; padding-bottom: 10px; }
    .czm-obras-cats-caja.hay-der .czm-obras-filtros,
    .czm-obras-cats-caja.hay-izq .czm-obras-filtros { -webkit-mask-image: none; mask-image: none; }
    .czm-obras-flecha, .czm-obras-cats-caja.con-flechas .czm-obras-flecha { display: none; }
    .czm-obras-grupos .czm-cat-number { font-size: 1.1rem; }
    .cen-main-count:not([hidden]) { display: inline; }
}

/* ---------- Escritorio: Solicitar va junto al título ---------- */
@media (min-width: 1024px) {
    .czm-obras-buscar { max-width: 460px; }
    .czm-obras-buscar + .czm-obras-espacio { display: block; }
    .czm-obras-fila1 { gap: 12px; }
    .czm-obra-pie--solo-solicitar { display: none; } /* sin Más información ni partitura: no queda nada abajo */
}

@media (prefers-reduced-motion: reduce) {
    .czm-obras-chip, .czm-obras-flecha, .czm-obras-orden { transition: none; }
    .czm-obras-filtros { scroll-behavior: auto; }
    /* Sin animación: la obra queda resaltada unos segundos y luego se quita (lo hace el JS) */
    .czm-obras .czm-work-entry.czm-obra-destacada { animation: none; background-color: var(--ob-destacar); box-shadow: 0 0 0 12px var(--ob-destacar); }
}