/* Lecteur du marketing · ce qui n'appartient qu'au lecteur. Socle, échelles et composants : diseno.css (système de design partagé),
   charte : tokens.css, tous deux via ../styles.css. Aucune couleur en dur, aucune valeur hors échelle. Bureau à partir de 840 px
   (classe de fenêtre « expanded » de Material, jeton breakpoint.expanded). */
.lector-body { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
.lector-top { max-width: none; }
.lector-top .vistas { flex: 0 1 320px; }
.lector-top .mini { flex: 1; }
.lector { flex: 1; display: grid; grid-template-columns: minmax(280px, 380px) 1fr; min-height: 0; }
.lista { border-right: 1px solid var(--hair); padding: var(--space-3) var(--space-4) var(--space-6); overflow-y: auto; max-height: calc(100vh - var(--size-bar)); max-height: calc(100dvh - var(--size-bar)); }
.lista .champ { margin-bottom: var(--space-2); }
.viaje { display: flex; gap: var(--space-3); align-items: flex-start; width: 100%; text-align: left; padding: var(--space-3) var(--space-1); border-bottom: 1px solid var(--hair); min-height: var(--tap); }
.viaje:active, .viaje.on { background: var(--subtle); }
.viaje.on { box-shadow: inset 3px 0 0 var(--ink); }
.viaje .vineta { position: relative; flex: 0 0 auto; width: var(--size-thumb); height: var(--size-thumb); border-radius: var(--r); overflow: hidden; background: var(--subtle); }
.viaje .vineta img { width: 100%; height: 100%; object-fit: cover; display: block; }
.viaje .bandera { position: absolute; left: var(--space-1); bottom: var(--space-1); font-size: var(--text-md); line-height: var(--leading-sm); background: var(--bg); border-radius: var(--radius-sm); padding: 0 var(--space-1); }
.viaje .vineta:not(:has(img)) .bandera { position: static; font-size: var(--text-xl); display: flex; width: 100%; height: 100%; align-items: center; justify-content: center; background: none; }
.viaje .grow { flex: 1; min-width: 0; }
.viaje .n { font-weight: var(--font-weight-semibold); font-size: var(--text-md); line-height: var(--leading-md); color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.viaje .s { color: var(--ink2); font-size: var(--text-sm); line-height: var(--leading-sm); }
.viaje .fecha { color: var(--meta); font-size: var(--text-xs); line-height: var(--leading-xs); font-variant-numeric: tabular-nums; }
.viaje .etiq { display: flex; gap: var(--space-1); flex-wrap: wrap; margin-top: var(--space-1); }
.viaje .etiq span { font-size: var(--text-xs); line-height: var(--leading-xs); font-weight: var(--font-weight-semibold); color: var(--ink2); border: 1px solid var(--hair); border-radius: var(--pill); padding: 0 var(--space-2); }
.nuevos { color: var(--ink); font-weight: var(--font-weight-semibold); margin: 0 0 var(--space-2); }
.viaje.nuevo .n::before { content: ""; display: inline-block; width: var(--space-2); height: var(--space-2); border-radius: 50%; background: var(--ink); margin-right: var(--space-2); vertical-align: middle; }
.viaje:not(.nuevo) .n { font-weight: var(--font-weight-regular); }
.viaje .estrella-mini { flex: 0 0 auto; align-self: center; color: var(--ink); }
.viaje .estrella-mini .i { fill: currentColor; stroke: none; }
.estrella[aria-pressed="true"] .i { fill: currentColor; }
.viaje .vineta.ilegible::after { content: "HEIC"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: var(--text-xs); font-weight: var(--font-weight-semibold); color: var(--ink2); }

/* La carte et ses capsules */
.derecha { position: relative; min-height: 0; display: flex; flex-direction: column; }
.carte-bloc { flex: 1; display: flex; flex-direction: column; min-height: 320px; }
.carte { flex: 1; position: relative; background: var(--subtle); min-height: 320px; }
.vide-carte { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--ink2); font-size: var(--text-sm); line-height: var(--leading-sm); }
#carteNota { padding: var(--space-1) var(--space-3); }
.carte-ayuda { padding: var(--space-1) var(--space-3) 0; color: var(--ink2); }
.marcador { width: var(--space-4); height: var(--space-4); border-radius: 50%; background: var(--ink); border: 2px solid var(--bg); cursor: pointer; }
.marcador.on { transform: scale(1.4); }
/* La capsule photo sur la carte : ronde, bordée (patron Polarsteps). MapLibre positionne la capsule par « transform » : on ne touche
   jamais à cette propriété ni à « position » sur l'élément lui-même ; la mise en avant se fait sur l'image, à l'intérieur.
   L'ombre est fonctionnelle : lire une photo posée sur les tuiles. */
.marcador.foto { width: var(--size-fab); height: var(--size-fab); border: 3px solid var(--bg); background: var(--subtle); box-shadow: 0 2px 8px rgba(0,0,0,.35); overflow: hidden; }
.marcador.foto img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .15s ease; }
.marcador.foto:hover img, .marcador.foto.on img { transform: scale(1.15); }
.marcador.foto.on { border-color: var(--ink); z-index: 2; }
.marcador.foto.nuevo { border-color: var(--ink); box-shadow: 0 0 0 3px var(--bg), 0 0 0 5px var(--ink), 0 2px 8px rgba(0,0,0,.35); }

/* Le visualiseur : la photo d'abord, le texte à côté, rien d'autre ; au-dessus des contrôles MapLibre (z-index 2) */
.visor { position: absolute; inset: 0; z-index: 3; background: var(--bg); display: flex; flex-direction: column; min-height: 0; }
.visor-top { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-4); border-bottom: 1px solid var(--hair); }
.visor-top .fila { display: contents; } /* au bureau, les gestes et le titre sur une ligne ; au téléphone, deux rangées sur la photo */
.visor-top .grow-fila { display: none; }
.visor-top #btnCerrar { order: 0; } .visor-top .grow { order: 1; } .visor-top .fila > :not(#btnCerrar) { order: 2; }
.visor-top h2 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.visor-top .grow { flex: 1; min-width: 0; }
.visor-cuerpo { flex: 1; display: grid; grid-template-columns: minmax(0, 3fr) minmax(280px, 2fr); min-height: 0; }
.escena { display: flex; flex-direction: column; min-height: 0; background: var(--subtle); }
.foto-marco { flex: 1; position: relative; min-height: 240px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.foto-marco img, .foto-marco video { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; display: block; }
.nav { position: absolute; top: 50%; transform: translateY(-50%); width: var(--tap); height: var(--tap); border-radius: 50%; background: var(--bg); color: var(--ink); border: 1px solid var(--border); display: inline-flex; align-items: center; justify-content: center; }
.nav.prev { left: var(--space-3); } .nav.next { right: var(--space-3); }
.nav[disabled] { opacity: 0.3; cursor: default; }
.contador { position: absolute; bottom: var(--space-2); left: 50%; transform: translateX(-50%); font-size: var(--text-xs); line-height: var(--leading-xs); color: var(--ink2); background: var(--bg); padding: 0 var(--space-2); border-radius: var(--pill); font-variant-numeric: tabular-nums; }
.miniaturas { display: flex; gap: var(--space-2); padding: var(--space-2) var(--space-3); overflow-x: auto; border-top: 1px solid var(--hair); background: var(--bg); }
.miniaturas button { flex: 0 0 auto; width: var(--size-thumb); height: var(--size-thumb); border-radius: var(--r); overflow: hidden; border: 2px solid transparent; background: var(--subtle); }
.miniaturas button.on { border-color: var(--ink); }
.miniaturas img, .miniaturas video { width: 100%; height: 100%; object-fit: cover; display: block; }
.texto-col { padding: var(--space-4) var(--space-4) var(--space-6); overflow-y: auto; border-left: 1px solid var(--hair); display: flex; flex-direction: column; gap: var(--space-3); }
.texto-top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
.texto { white-space: pre-wrap; font-size: var(--text-md); line-height: var(--leading-md); color: var(--ink); }
.texto.vacio { color: var(--ink2); font-size: var(--text-sm); line-height: var(--leading-sm); }
.selIdioma { width: auto; min-height: var(--tap); padding: var(--space-1) var(--space-2); font-size: var(--text-sm); }
.pestanas-fila { display: flex; align-items: center; gap: var(--space-2); }
.pestanas-fila .pestanas { flex: 1; margin-bottom: 0; }
.baseline { font-size: var(--text-lg); line-height: var(--leading-lg); font-weight: var(--font-weight-semibold); color: var(--ink); margin: 0 0 var(--space-2); }
.puntos { margin: 0; padding-left: var(--space-4); display: grid; gap: var(--space-2); color: var(--ink); }
.puntos li::marker { color: var(--ink2); }
#sintesis, #transcripcion { display: flex; flex-direction: column; }
.copiar { align-self: flex-start; min-height: var(--tap); padding: var(--space-1) var(--space-3); font-size: var(--text-sm); margin-top: var(--space-2); }

/* Modifier, supprimer, corbeille (dueño, 2026-09-29) */
.edicion { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--hair); background: var(--subtle); }
.edicion .lab { margin-top: var(--space-1); }
.edicion-fila { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }
.edicion-fila > div { min-width: 0; display: flex; flex-direction: column; gap: var(--space-1); }
.edicion-acciones { display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; margin-top: var(--space-1); }
.edicion-acciones .grow { flex: 1; }
.papelera-bt { margin-top: var(--space-4); width: 100%; font-size: var(--text-sm); }
.papelera { border-top: 1px solid var(--hair); margin-top: var(--space-2); }
.papelera-fila { display: flex; gap: var(--space-3); align-items: center; padding: var(--space-2) var(--space-1); border-bottom: 1px solid var(--hair); }
.papelera-fila .n { font-size: var(--text-md); line-height: var(--leading-md); color: var(--ink); }
.papelera-fila .fecha { color: var(--meta); font-size: var(--text-xs); line-height: var(--leading-xs); font-variant-numeric: tabular-nums; }
.papelera-fila .bt { flex: 0 0 auto; padding: var(--space-2) var(--space-3); font-size: var(--text-sm); }

@media (max-width: 839px) {
  /* Téléphone et tablette (design des benchmarks, 2026-09-29) : la carte prend l'écran, la liste est un panneau à deux crans par-dessus */
  .lector { display: block; }
  .derecha { position: fixed; left: 0; right: 0; top: var(--cab, var(--size-bar)); bottom: 0; min-height: 0; z-index: 0; }
  /* Un bloc fixé fait son propre empilement : le visualiseur (dedans) ne passe au-dessus de l'en-tête et du panneau que si le bloc y passe */
  .derecha:has(.visor:not([hidden])) { z-index: 20; }
  .carte-bloc, .carte { min-height: 0; height: 100%; }
  #carteAyuda, #carteNota { display: none; } /* l'attribution de la carte, en haut à droite, suffit */
  .lista { position: fixed; left: 0; right: 0; bottom: 0; top: 46%; z-index: 2; max-height: none; border-right: 0; border-top: 1px solid var(--hair); border-radius: var(--r-sheet) var(--r-sheet) 0 0; padding: 0 var(--space-4) var(--space-6); overflow-y: auto; background: var(--bg); transition: top .25s ease; }
  .lista.plena { top: calc(var(--cab, var(--size-bar)) + var(--space-2)); }
  /* En-tête étroit : le menu des vues et l'état du réseau ; le compte des voyages est dans la liste */
  .lector-top .mini { display: none; }
  .lector-top .vistas { flex: 1 1 auto; max-width: none; }
  /* Le visualiseur : la photo sur tout le cadre, le titre et les gestes dessus, le texte dans un panneau clair dessous */
  .visor { position: fixed; inset: 0; z-index: 10; display: block; background: var(--color-stage); }
  .visor-cuerpo { display: flex; flex-direction: column; height: 100%; }
  .escena { flex: 1 1 54%; min-height: 0; background: var(--color-stage); }
  .foto-marco { min-height: 0; }
  .miniaturas { background: var(--color-stage); border-top: 0; }
  .miniaturas button { background: var(--color-scrim-soft); }
  .texto-col { flex: 1 1 46%; min-height: 0; max-height: none; border-left: 0; border-top: 0; border-radius: var(--r-sheet) var(--r-sheet) 0 0; background: var(--bg); overflow-y: auto; }
  .visor-top { position: absolute; left: 0; right: 0; top: 0; z-index: 3; border: 0; flex-wrap: wrap; gap: var(--space-2); padding: var(--space-2) var(--space-3) var(--space-4); padding-top: max(var(--space-2), env(safe-area-inset-top)); background: linear-gradient(to bottom, var(--color-scrim), transparent); color: var(--color-on-photo); }
  .visor-top .grow { order: 9; flex-basis: 100%; }
  .visor-top h2 { color: var(--color-on-photo); white-space: normal; }
  .visor-top .mini { color: var(--color-on-photo); opacity: .9; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .visor-top .ico, .visor-top .bs { background: var(--color-scrim-soft); color: var(--color-on-photo); border: 0; }
  .visor-top .bs { width: var(--tap); height: var(--tap); padding: 0; border-radius: 50%; justify-content: center; font-size: 0; gap: 0; flex: 0 0 auto; }
  .visor-top .bs .i { width: var(--size-icon); height: var(--size-icon); }
  .nav { background: var(--color-scrim-soft); color: var(--color-on-photo); border: 0; }
  .visor-top button:focus-visible, .visor-top a:focus-visible, .nav:focus-visible, .miniaturas button:focus-visible { outline-color: var(--color-on-photo); } /* sur la scène noire, un contour encre serait invisible (WCAG 2.4.7) */
  .contador { background: var(--color-scrim-soft); color: var(--color-on-photo); }
  /* Pendant la modification, l'en-tête redevient normal et le formulaire prend l'écran */
  .visor:has(.edicion:not([hidden])) { background: var(--bg); }
  .visor:has(.edicion:not([hidden])) .visor-top { position: static; background: var(--bg); color: var(--ink); border-bottom: 1px solid var(--hair); }
  .visor:has(.edicion:not([hidden])) .visor-top h2, .visor:has(.edicion:not([hidden])) .visor-top .mini { color: var(--ink); }
  .visor:has(.edicion:not([hidden])) .visor-top .ico { background: transparent; color: var(--ink); }
  .visor:has(.edicion:not([hidden])) .visor-top .bs { background: transparent; color: var(--ink); border: 1px solid var(--ink); }
  .visor:has(.edicion:not([hidden])) .visor-cuerpo { display: none; }
}
@media (prefers-reduced-motion: reduce) { .lista { transition: none; } }

/* ---------- Composition des écrans de référence Mira (dueño, 2026-09-30) ---------- */
/* En-tête : le titre Archivo au téléphone, les pilules de vues au bureau ; « N neuves » en pastille soleil */
.lector-titre { display: none; flex: 1; font-size: var(--text-lg); line-height: var(--leading-lg); }
.lector-top .a-terrain { display: none; }
.lector-top .nuevos { flex: 0 0 auto; }
/* Le bandeau des pays : une couverture par pays, le nom en mono, anneau soleil s'il reste du neuf, anneau encre s'il est choisi */
#filtroPais { gap: var(--space-4); flex-wrap: nowrap; overflow-x: auto; padding: var(--space-1) 0 var(--space-3); scrollbar-width: none; }
#filtroPais::-webkit-scrollbar { display: none; }
.filtro.pais { flex: 0 0 auto; flex-direction: column; width: var(--size-thumb); min-height: var(--tap); padding: 0; border: 0; border-radius: 0; gap: var(--space-2); font-family: var(--mono); font-size: var(--text-xs); line-height: var(--leading-xs); letter-spacing: var(--font-tracking-wide); text-transform: uppercase; font-weight: var(--font-weight-semibold); color: var(--ink2); background: none; }
.filtro.pais .cov { width: var(--size-thumb); height: var(--size-thumb); border-radius: var(--r-card); overflow: hidden; background: var(--subtle); box-shadow: 0 0 0 2px var(--surface), 0 0 0 3px var(--border); display: flex; align-items: center; justify-content: center; font-size: var(--text-xl); }
.filtro.pais .cov img { width: 100%; height: 100%; object-fit: cover; display: block; }
.filtro.pais.neuf .cov { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--primary); }
.filtro.pais.neuf { color: var(--ink); }
.filtro.pais[aria-pressed="true"] { background: none; color: var(--ink); }
.filtro.pais[aria-pressed="true"] .cov { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--ink); }
.filtro.pais .c { display: none; }
.filtro.pais .lbl { width: calc(var(--size-thumb) + var(--space-4)); margin-inline: calc(-1 * var(--space-2)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: center; } /* le nom déborde de 8 px de chaque côté de sa couverture : « Guatemala » tient sur une ligne */
.filtros .filtro:not(.pais) { font-family: var(--mono); font-size: var(--text-xs); letter-spacing: var(--font-tracking-wide); text-transform: uppercase; }
/* La ligne d'un voyage (aperçu et bureau) : vignette 64 à coins 8, point soleil s'il est neuf, date en mono */
.viaje { border: 1px solid var(--hair); border-radius: var(--r); background: var(--surface); padding: var(--space-2) var(--space-3) var(--space-2) var(--space-2); margin-bottom: var(--space-2); align-items: center; }
.viaje .vineta { border-radius: var(--radius-sm); }
.viaje.on { box-shadow: inset 0 0 0 1px var(--ink); }
.viaje.nuevo .n::before { background: var(--color-accent-soft); }
.viaje .fecha { font-family: var(--mono); text-transform: uppercase; letter-spacing: var(--font-tracking-wide); }
.viaje .s { color: var(--meta); }
/* Les onglets du contenu (Transcription | Synthèse) : soulignés, en mono, comme la planche */
.texto-col .pestanas { background: none; padding: 0; gap: 0; border-radius: 0; }
.texto-col .pestana { border-radius: 0; box-shadow: inset 0 -2px 0 var(--hair); font-family: var(--mono); font-size: var(--text-xs); letter-spacing: var(--font-tracking-wide); text-transform: uppercase; color: var(--meta); }
.texto-col .pestana.on { background: none; color: var(--primary); box-shadow: inset 0 -2px 0 var(--primary); }
.selIdioma { border-radius: var(--pill); }
.baseline { font-size: var(--text-lg); line-height: var(--leading-lg); }
#sintesisNota { font-family: var(--mono); font-size: var(--text-xs); letter-spacing: var(--font-tracking-wide); text-transform: uppercase; color: var(--meta); }
.contador { font-family: var(--mono); letter-spacing: var(--font-tracking-wide); border-radius: var(--radius-sm); }
.lector-tabbar { display: none; }

@media (max-width: 839px) {
  /* Téléphone : Voyages (grille), Carte (panneau en aperçu sur la carte), Ma shortlist ; les onglets en bas, le titre en haut */
  .lector-top .vistas { display: none; }
  .lector-titre { display: block; }
  .lector-top .a-terrain { display: inline-flex; }
  .lector-tabbar { display: grid; }
  .lector-tabbar .tab { background: none; font-family: var(--mono); letter-spacing: var(--font-tracking-wide); text-transform: uppercase; padding-top: var(--space-2); }
  .lector-tabbar .tab.on::before { content: ""; position: absolute; top: calc(-1 * var(--space-2)); left: 20%; right: 20%; height: 2px; background: var(--primary); }
  .lista { padding-bottom: var(--space-16); }
  .lista .pestanas { display: none; }
  .lista.plena { top: var(--cab, var(--size-bar)); border-radius: 0; border-top: 0; }
  /* La grille des voyages : deux colonnes de carrés, le nom posé sur la photo, point soleil s'il est neuf */
  .vue-grille #viajes { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-1); }
  .vue-grille .viaje { position: relative; aspect-ratio: 1; display: block; padding: 0; margin: 0; border: 0; border-radius: var(--r); overflow: hidden; background: var(--subtle); }
  .vue-grille .viaje .vineta { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 0; }
  .vue-grille .viaje .bandera { position: absolute; left: var(--space-2); top: var(--space-2); bottom: auto; background: var(--color-scrim-soft); border-radius: var(--radius-sm); }
  .vue-grille .viaje .grow { position: absolute; left: 0; right: 0; bottom: 0; padding: var(--space-2) var(--space-3); background: linear-gradient(180deg, transparent, var(--color-scrim)); }
  .vue-grille .viaje .n { color: var(--color-on-photo); font-size: var(--text-sm); line-height: var(--leading-sm); font-weight: var(--font-weight-semibold); }
  .vue-grille .viaje:not(.nuevo) .n { font-weight: var(--font-weight-regular); }
  .vue-grille .viaje.nuevo .n::before { content: none; }
  .vue-grille .viaje.nuevo::after { content: ""; position: absolute; top: var(--space-2); right: var(--space-2); width: var(--space-3); height: var(--space-3); border-radius: 50%; background: var(--color-accent-soft); box-shadow: 0 0 0 2px var(--color-scrim-soft); }
  .vue-grille .viaje .s, .vue-grille .viaje .fecha, .vue-grille .viaje .etiq { display: none; }
  .vue-grille .viaje .estrella-mini { position: absolute; right: var(--space-2); top: var(--space-2); color: var(--color-on-photo); }
  .vue-grille .viaje.on { box-shadow: inset 0 0 0 2px var(--color-on-photo); }
  /* Le visualiseur : titre Archivo 24 sur le voile, compteur et « Dossier source » en pilules sur voile */
  .visor-top h2 { font-size: var(--text-xl); line-height: var(--leading-xl); }
  .visor-top .bs { width: auto; height: var(--tap); padding: 0 var(--space-4); border-radius: var(--pill); font-size: var(--text-sm); line-height: var(--leading-sm); gap: var(--space-2); }
  .visor-top .bs .lbl { display: inline; }
  .texto-col { padding-top: var(--space-2); flex: 0 0 46%; }
  /* La photo remplit la scène (52 %) ; les gestes en haut sur un voile, le titre en bas sur un voile ; le texte dans le panneau dessous */
  .escena { flex: 0 0 54%; }
  .foto-marco img { width: 100%; height: 100%; object-fit: cover; }
  .visor-top { bottom: 46%; display: flex; flex-direction: column; justify-content: space-between; align-content: flex-start; padding: 0; background: none; pointer-events: none; }
  .visor-top > * { pointer-events: auto; }
  .visor-top .fila { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); padding-top: max(var(--space-2), env(safe-area-inset-top)); background: linear-gradient(to bottom, var(--color-scrim), transparent); width: 100%; }
  .visor-top .grow-fila { display: block; flex: 1; order: 0; }
  .visor-top .fila > * { order: 0; }
  .visor-top .grow { order: 1; flex: 0 0 auto; width: 100%; padding: var(--space-12) var(--space-4) var(--space-3); background: linear-gradient(to bottom, transparent, var(--color-scrim)); margin-top: auto; }
  .visor-top h2 { text-wrap: balance; }
  .visor:has(.miniaturas:not([hidden])) .visor-top { bottom: calc(46% + var(--size-thumb) + var(--space-4)); } /* la bande des miniatures reste sous la photo : le titre se pose au-dessus d'elle */
  .contador { bottom: auto; top: var(--space-2); left: auto; right: var(--space-3); transform: none; }
}