/* ============================================================
   canto-app.css — HOJA COMPARTIDA DE LA NUEVA INTERFAZ DE CANTO
   ------------------------------------------------------------
   Version reutilizable del piloto V2 aprobado. Una sola hoja
   para todas las paginas de canto que la carguen; no hay ni
   habra un CSS por canto.

   Lenguaje visual tomado de la PWA propia (carpeta app/):
   paleta, buscador en pastilla, chips, tarjeta con cabecera
   roja, bloque de audio con etiqueta y visor a pantalla
   completa. NO se copia su arquitectura (pantallas fijas,
   router, service worker): esto sigue siendo una pagina HTML
   normal que se desplaza de arriba a abajo.

   REGLA DE ORO
   Todos los selectores empiezan por .canto-app, clase que solo
   existe en el <body> de las paginas adaptadas. Asi es
   imposible que alcancen a las 714 paginas que todavia usan
   solo estilcantespa.css.

   NO se modifica estilcantespa.css ni mainespa.js.
   ============================================================ */

/* ---- Tokens tomados de app/app.css ------------------------- */
.canto-app {
    --rojo:       #bc0009;
    --rojo-osc:   #8b0606;
    --fondo:      #f2f2f7;
    --blanco:     #ffffff;
    --texto:      #1c1c1e;
    --gris:       #8e8e93;
    --borde:      #e5e5ea;
    --safe-t:     env(safe-area-inset-top, 0px);
    --safe-b:     env(safe-area-inset-bottom, 0px);
}

/* ============================================================
   1. LIENZO
   ============================================================ */
body.canto-app {
    /* .imagpreca1 fija height:100vh y corta el fondo. */
    height: auto;
    min-height: 100vh;
    max-width: 100%;
    margin: 0;
    /* En movil no hay margenes donde lucir una foto: manda la
       zona de lectura. El fondo vuelve a partir de 768px. */
    background-color: var(--blanco);
    background-image: none;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                 "Helvetica Neue", Arial, sans-serif;
    color: var(--texto);
    -webkit-font-smoothing: antialiased;
}

.canto-app img,
.canto-app audio {
    max-width: 100%;
}

/* ============================================================
   2. CABECERA — compacta y pegajosa
   Fila 1: [logo + marca] ................. [menu]
   Fila 2: [buscador a todo lo ancho]
   position:sticky reserva su hueco en el flujo: no hace falta
   compensar su altura con ningun margen magico.
   ============================================================ */
.canto-app header {
    position: sticky;
    top: 0;
    z-index: 900;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    /* Presupuesto en movil (sin la muesca):
       6 + 40 (logo) + 5 + 40 (buscador) + 6 + 3 borde = 100px */
    gap: 5px 10px;
    padding: calc(var(--safe-t) + 6px) 12px 6px;
    /* Blanca con filo rojo, como la barra superior de app/. Si
       fuese roja se fundiria con la cabecera de la tarjeta. */
    background-color: var(--blanco);
    border-bottom: 3px solid var(--rojo);
    box-shadow: 0 1px 8px rgba(0, 0, 0, 0.1);
}

.canto-app .marca {
    display: flex;
    align-items: center;
    gap: 9px;
    text-decoration: none;
    min-height: 36px;
}

.canto-app .logo {
    width: 34px;
    max-width: 34px;
    height: auto;
    display: block;
    border-radius: 7px;
}

.canto-app .marca-txt {
    font-size: 17px;
    font-weight: 800;
    letter-spacing: 0.01em;
    color: var(--rojo-osc);
}

/* ---- Buscador: pastilla (lenguaje de app/.searchbar) -------
   El original lo saca del flujo (fixed / absolute) y acaba
   montandose sobre el boton del menu. Aqui vuelve al flujo y
   ocupa su propia fila: el solape desaparece por construccion,
   no a base de z-index.                                       */
.canto-app .buscador-container {
    position: static;
    transform: none;
    order: 3;
    flex: 1 0 100%;
    display: flex;
    align-items: center;
    gap: 8px;
    width: auto;
    max-width: none;
    background: var(--fondo);
    border-radius: 21px;
    padding: 3px 3px 3px 13px;
}

.canto-app .buscador-icono {
    color: var(--gris);
    font-size: 15px;
    flex: 0 0 auto;
    line-height: 1;
}

.canto-app #buscador {
    flex: 1 1 auto;
    min-width: 0;          /* sin esto un flex-item no baja de su contenido */
    width: auto;
    border: none;
    background: transparent;
    outline: none;
    /* 16px evita que iOS haga zoom al enfocar el campo */
    font-size: 16px;
    font-family: inherit;
    color: var(--texto);
    caret-color: var(--rojo);
    padding: 6px 0;
    border-radius: 0;
}

.canto-app #buscador::placeholder { color: var(--gris); }

.canto-app #botonBuscar {
    flex: 0 0 auto;
    background-color: var(--rojo);
    color: #ffffff;
    border: none;
    border-radius: 17px;
    padding: 0 16px;
    height: 34px;
    font-size: 14px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
}

/* ============================================================
   3. MENU
   Un unico menu en todos los anchos. Por encima de 1100px
   estilcantespa.css oculta el boton y despliega la lista en
   horizontal; aqui se unifica.
   ============================================================ */
.canto-app .abrir-menu,
.canto-app .cerrar-menu {
    display: block;
    border: 0;
    background-color: transparent;
    cursor: pointer;
    margin-right: 0;
    padding: 0;
    width: 40px;
    height: 40px;
    max-width: none;
    font-size: 26px;
    line-height: 1;
    /* El original lo pinta casi negro (#1c1c1c) sobre rojo
       oscuro y practicamente no se ve. */
    color: var(--rojo-osc);
}

.canto-app .abrir-menu { order: 2; }

/* El panel es hijo de <header>, y header es sticky (= posicionado).
   Si siguiera en position:absolute se anclaria al header y solo
   mediria su alto. Con fixed cubre la pantalla entera. */
.canto-app .nav {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: auto;
    width: min(86vw, 360px);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    z-index: 1200;
    background-color: #8d0000;
    padding: calc(var(--safe-t) + 12px) 18px calc(var(--safe-b) + 28px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    opacity: 0;
    visibility: hidden;
    box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0.5);
    transition: opacity 0.2s ease;
}

.canto-app .nav.visible {
    opacity: 1;
    visibility: visible;
}

.canto-app .cerrar-menu {
    align-self: flex-end;
    color: #ececec;
    font-size: 30px;
    background-color: transparent;
    margin-bottom: 4px;
}

.canto-app .nav-list {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    font-size: 16px;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

.canto-app .nav-list li a {
    display: block;
    color: #f2f2f2;
    text-decoration: none;
    font-weight: 600;
    padding: 11px 6px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

/* El submenu solo se abria al pasar el raton: en tactil era
   inalcanzable. Se muestra siempre, sangrado. Su enlace tiene
   href="" (recargaria la pagina): se neutraliza como rotulo. */
.canto-app .nav-list > li > a[href=""] {
    pointer-events: none;
    color: rgba(255, 255, 255, 0.6);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding-top: 16px;
    border-bottom: none;
}

.canto-app .nav-list ul {
    display: block;
    position: static;
    background-color: transparent;
    /* estilcantespa.css le pone visibility:visible. Como
       visibility se hereda, el submenu seguia recibiendo clics
       con el menu CERRADO y tapaba la pagina. Debe seguir a su
       padre. */
    visibility: inherit;
    margin: 0;
    padding: 0;
    list-style: none;
}

.canto-app .nav-list ul li a {
    display: block;
    color: #f2f2f2;
    padding: 11px 6px;
    font-weight: 500;
}

/* ============================================================
   4. TARJETA DEL CANTO
   Orden: titulo -> chips -> AUDIOS -> PARTITURAS.
   ============================================================ */
.canto-app .canto {
    padding: 0 0 calc(var(--safe-b) + 28px);
}

.canto-app .canto-card {
    max-width: 900px;
    margin: 0 auto;
    background: var(--blanco);
    overflow: hidden;
}

.canto-app .canto-head {
    background-color: var(--rojo-osc);
    padding: 16px 16px 14px;
    text-align: center;
}

.canto-app .canto-titulo {
    margin: 0;
    font-size: clamp(19px, 5.2vw, 26px);
    font-weight: 800;
    line-height: 1.25;
    color: #ffffff;
    overflow-wrap: break-word;
}

/* ---- Chips (lenguaje de app/.detail-cat) ------------------- */
.canto-app .tag {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin: 12px 0 0;
    text-align: center;
}

.canto-app .tag:empty { display: none; }

.canto-app .tag-link {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    background-color: var(--blanco);
    color: var(--rojo-osc);
    padding: 6px 14px;
    border-radius: 9px;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
}

/* ---- Contenedor heredado: solo agrupa, ya no maqueta -------
   Se conserva SIEMPRE porque mainespa.js hace
   document.querySelector(".imgaudio-cont") sin comprobar null
   y reventaria en cada redimensionado si desapareciera.       */
.canto-app .imgaudio-cont {
    display: block;
    margin: 0;
    padding: 0;
    text-align: left;
}

/* ---- Rotulo de seccion ------------------------------------
   Texto de interfaz, NO un dato del canto. Se usa <p>, nunca
   <h2>: mainespa.js empareja <h2> + <audio> y los reposiciona
   en absoluto; con <p> esa funcion no se dispara.             */
.canto-app .canto-bloque-titulo {
    margin: 0;
    padding: 16px 16px 0;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--gris);
}

/* ============================================================
   5. AUDIOS
   Puede haber 0, 1 o varios. El maximo real del sitio son 4.
   El orden y las etiquetas vienen del HTML y no se tocan.
   Solo cambia la presentacion: ni el archivo, ni la extension,
   ni la URL, ni el tipo MIME se modifican.
   ============================================================ */
.canto-app .canto-audios {
    display: block;
    padding: 0 0 4px;
    border-bottom: 1px solid var(--fondo);
}

.canto-app .canto-audio {
    padding: 10px 16px 12px;
    background: var(--blanco);
}

.canto-app .canto-audios .canto-audio + .canto-audio {
    border-top: 1px solid var(--fondo);
}

.canto-app .canto-audio-label {
    margin: 0 0 8px;
    font-size: 13px;
    font-weight: 700;
    color: var(--texto);
}

/* Nombre puesto por la interfaz porque el canto no trae
   ninguna etiqueta (caso "Delante de los angeles"). Se pinta
   en gris para que no parezca un dato del canto. */
.canto-app .canto-audio-label[data-etiqueta-interfaz] {
    font-weight: 600;
    color: var(--gris);
}

/* Original: width:500px; height:80px -> desbordaba en movil. */
.canto-app .imgaudio-cont audio {
    width: 100%;
    height: 44px;
    border-radius: 10px;
    accent-color: var(--rojo);
    display: block;
}

/* estilcantespa.css pinta el reproductor de azul celeste. Se
   neutraliza a gris para que forme parte de la tarjeta. Solo
   afecta a Chrome/Android: en Safari iOS el reproductor es
   nativo y no cambia. */
.canto-app .imgaudio-cont audio::-webkit-media-controls-panel {
    background-color: var(--fondo);
}
.canto-app .imgaudio-cont audio::-webkit-media-controls-timeline {
    background-color: #d6d6dc;
    border-radius: 3px;
}
.canto-app .imgaudio-cont audio::-webkit-media-controls-play-button,
.canto-app .imgaudio-cont audio::-webkit-media-controls-mute-button,
.canto-app .imgaudio-cont audio::-webkit-media-controls-volume-slider {
    background-color: transparent;
}

/* ---- Hueco sin grabacion ----------------------------------
   187 cantos tienen el reproductor puesto pero sin archivo.
   En vez de un control gris que no suena, un estado limpio.
   El HTML conserva la constancia del hueco en
   data-audio-vacio, que el validador comprueba.              */
.canto-app .canto-sin-audio {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0;
    min-height: 44px;
    padding: 0 14px;
    border: 1px dashed #d1d1d6;
    border-radius: 10px;
    background: var(--fondo);
    color: var(--gris);
    font-size: 14px;
}

.canto-app .canto-sin-audio::before {
    content: "\2014";          /* raya, no icono: no depende de fuentes */
    font-weight: 700;
}

/* ============================================================
   6. PARTITURAS
   Puede haber 0, 1, 2 o 3. Todas en el orden original y todas
   ampliables. El contador "1 / 3" es interfaz, no un dato.
   ============================================================ */
.canto-app .canto-parts {
    display: block;
    padding: 0 0 6px;
}

.canto-app .canto-part {
    margin: 0;
    padding: 12px 16px 14px;
    background: var(--blanco);
}

.canto-app .canto-part-inner {
    display: block;
    width: 100%;
    padding: 0;
    border: none;
    background: var(--blanco);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
    cursor: zoom-in;
}

/* Original: width:900px fijos. Con 100% la imagen nunca crece
   por encima del ancho disponible ni desborda. */
.canto-app .imagcan {
    width: 100%;
    max-width: 100%;
    height: auto;
    margin: 0;
    display: block;
}

.canto-app .canto-part-pie {
    margin: 9px 0 0;
    font-size: 12px;
    color: var(--gris);
    text-align: center;
}

.canto-app .canto-part-num {
    display: inline-block;
    min-width: 40px;
    padding: 2px 8px;
    margin-right: 6px;
    border-radius: 20px;
    background: var(--fondo);
    color: var(--texto);
    font-weight: 700;
}

/* ---- Referencia de imagen que no se puede pintar ----------
   Caso "Voi siete la luce del mondo": el src apunta a una
   pagina HTML. NO se adivina cual deberia ser. Se muestra un
   estado limpio y se conserva la referencia literal en
   data-img-src, que el validador lee como partitura presente
   y como rotura YA existente.                                */
.canto-app .canto-part-rota .canto-sin-partitura {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0;
    min-height: 64px;
    padding: 0 14px;
    border: 1px dashed #d1d1d6;
    border-radius: 10px;
    background: var(--fondo);
    color: var(--gris);
    font-size: 14px;
}

.canto-app .canto-part-rota .canto-sin-partitura::before {
    content: "\2014";
    font-weight: 700;
}

.canto-app .canto-part-ref {
    margin: 8px 0 0;
    font-size: 11px;
    line-height: 1.5;
    color: var(--gris);
    text-align: center;
    overflow-wrap: anywhere;
}

.canto-app .canto-part-ref code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 11px;
}

/* ============================================================
   7. VISOR DE PARTITURA A PANTALLA COMPLETA
   El marcado lo crea canto-app.js: asi el HTML de cada canto
   contiene exactamente las partituras originales y ni una mas.
   (lenguaje de app/.img-viewer, con zoom por toque anadido)
   ============================================================ */
.canto-app .visor {
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: rgba(0, 0, 0, 0.94);
    display: flex;
    flex-direction: column;
}

.canto-app .visor[hidden] { display: none; }

.canto-app .visor-lienzo {
    flex: 1;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: calc(var(--safe-t) + 56px) 10px 10px;
}

.canto-app .visor-img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 8px;
    background: #ffffff;
    cursor: zoom-in;
}

/* Estado ampliado: la imagen desborda y el lienzo la desplaza. */
.canto-app .visor-lienzo.ampliado {
    align-items: flex-start;
    justify-content: flex-start;
}

.canto-app .visor-lienzo.ampliado .visor-img {
    max-width: none;
    max-height: none;
    width: 230%;
    height: auto;
    cursor: zoom-out;
}

.canto-app .visor-cerrar {
    position: absolute;
    top: calc(var(--safe-t) + 12px);
    right: 12px;
    z-index: 2;
    width: 44px;
    height: 44px;
    /* Ampliada, la partitura pasa por debajo del boton. Sobre
       blanco un boton translucido desaparece: opaco y con aro
       claro para que destaque sobre cualquier fondo. */
    border: 1.5px solid rgba(255, 255, 255, 0.85);
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.72);
    color: #ffffff;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
}

.canto-app .visor-pie {
    flex: 0 0 auto;
    margin: 0;
    padding: 10px 16px calc(var(--safe-b) + 14px);
    text-align: center;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.7);
}

/* Evita que la pagina de detras se desplace con el visor abierto */
body.canto-app.visor-abierto { overflow: hidden; }

/* ============================================================
   8. PANTALLAS MUY PEQUENAS (320 px)
   ============================================================ */
@media screen and (max-width: 360px) {
    .canto-app .marca-txt { font-size: 15px; }
    .canto-app .logo { width: 30px; max-width: 30px; }
    .canto-app #botonBuscar { padding: 0 12px; font-size: 13px; }
    .canto-app .buscador-container { padding-left: 11px; gap: 6px; }
}

/* ============================================================
   9. TABLET Y ESCRITORIO
   Misma interfaz, respirando. Aqui si hay margenes, asi que el
   fondo original vuelve — velado, como decoracion, nunca bajo
   el texto.
   ============================================================ */
@media screen and (min-width: 768px) {
    body.canto-app {
        background-color: var(--fondo);
        background-image:
            linear-gradient(rgba(242, 242, 247, 0.84), rgba(242, 242, 247, 0.84)),
            url(iconos/Fondo.png);
    }

    .canto-app header {
        padding: calc(var(--safe-t) + 10px) 24px 12px;
        gap: 10px 16px;
    }

    .canto-app .logo { width: 40px; max-width: 40px; }
    .canto-app .marca-txt { font-size: 19px; }

    /* Con sitio de sobra, el buscador vuelve a la primera fila */
    .canto-app .buscador-container {
        order: 1;
        flex: 0 1 420px;
    }

    .canto-app .abrir-menu { order: 2; }

    .canto-app .canto {
        padding: 22px 18px calc(var(--safe-b) + 40px);
    }

    .canto-app .canto-card {
        border-radius: 16px;
        box-shadow: 0 6px 28px rgba(0, 0, 0, 0.16);
    }

    .canto-app .canto-head { padding: 22px 24px 20px; }
    .canto-app .canto-titulo { font-size: 28px; }
    .canto-app .canto-bloque-titulo { padding: 20px 24px 0; }
    .canto-app .canto-audio { padding: 12px 24px 14px; }
    .canto-app .canto-part { padding: 16px 24px 18px; }

    /* La partitura no crece sin limite: se centra y se para. */
    .canto-app .canto-part-inner {
        max-width: 620px;
        margin: 0 auto;
    }

    .canto-app .canto-part-rota .canto-sin-partitura,
    .canto-app .canto-part-ref {
        max-width: 620px;
        margin-left: auto;
        margin-right: auto;
    }
}

@media screen and (min-width: 1200px) {
    .canto-app .canto-part-inner { max-width: 700px; }
}