/* YatesNuevos · ficha.css v1 (5-nov-2026, tanda P) · solo la ficha de embarcación.
   Va aparte de main.css para no tocar las otras 67 páginas. Solo variables de yatesnuevos-brand-tokens.css; Sol solo en botones de acción.
   1. Sin migas: las fotos abren la página.  2. Título en dos piezas (en celular, nombre grande y datos debajo).
   3. Guardar y compartir junto al nivel.  4. Panel para compartir en escritorio. */

/* ---------------------------------------------------------------- 1. fotos arriba, sin migas */
.ficha-medios { margin-top: 1.5rem; }
.ficha-medios--vacia { display: grid; place-items: center; min-height: 260px; border-radius: var(--yn-r-tarjeta); background: var(--yn-arena); }
.ficha-medios--vacia .foto-pendiente { aspect-ratio: auto; background: none; }
@media (max-width: 760px) {
  /* celular: la foto a sangre, pegada a la cabecera, como en las apps de viaje */
  body .ficha-medios.contenedor { width: 100%; margin: 0 0 1.4rem; }
  body .ficha-medios--sello.contenedor { margin-bottom: 1.4rem; }
  .ficha-medios--vacia { border-radius: 0; min-height: 220px; }
  .mosaico__contador { top: auto; bottom: .8rem; right: .8rem; }
  .ficha-medios--sello .mosaico__contador { right: auto; left: .8rem; }}

/* ---------------------------------------------------------------- 2. nivel, guardar y compartir en una fila */
.ficha-intro__fila { display: flex; align-items: center; justify-content: space-between; gap: .6rem 1rem; flex-wrap: wrap; margin: 0 0 .9rem; }
.ficha-intro__fila .ficha-intro__nivel { margin: 0; }
.ficha-intro__acciones { display: flex; gap: .5rem; flex: 0 0 auto; }
.ficha-intro__acciones .guardar, .ficha-intro__acciones .compartir { padding: .5rem .9rem; border-radius: var(--yn-r-pastilla); }
.ficha-intro__acciones .compartir span, .ficha-intro__acciones .guardar__txt { text-decoration: underline; text-underline-offset: .2em; }
.ficha-intro__acciones .compartir:hover, .ficha-intro__acciones .guardar:hover { background: color-mix(in srgb, var(--yn-arena) 55%, transparent); }
@media (max-width: 860px) { .ficha-intro__acciones { display: none; }}   /* en celular viven en la barra de abajo */

/* ---------------------------------------------------------------- 3. título: el mismo texto, partido en nombre + datos */
.ficha-intro h1.ficha-titulo { max-width: 30ch; margin-bottom: .5rem; }
.ficha-titulo__nombre, .ficha-titulo__datos { display: inline; }
@media (max-width: 700px) {
  /* celular: el nombre manda, grande y en dos líneas como mucho; los datos, debajo y más pequeños */
  .ficha-intro h1.ficha-titulo { font-size: clamp(1.95rem, 8.6vw, 2.6rem); line-height: 1.04; max-width: none; margin-bottom: .55rem; }
  .ficha-titulo__nombre { display: block; }
  .ficha-titulo__datos { display: block; margin-top: .45rem; font-size: 1.06rem; line-height: 1.35; font-stretch: 112%; font-weight: 600;
    letter-spacing: 0; color: var(--yn-laguna); }
  .ficha-titulo__sep { display: none; }
  .ficha-meta { font-size: .95rem; margin-bottom: 1.1rem; }
  .ficha-medios--sello + .ficha-cuerpo { padding-top: .6rem; }}

/* ---------------------------------------------------------------- 4. similares: el enlace a la categoría reemplaza a las migas */
.similares__cab { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .8rem 1.4rem; margin-bottom: 1.4rem; }
.similares__cab h2 { margin: 0; }
.seccion--similares-solo { padding-block: calc(var(--yn-aire) * .6); }
.seccion--similares-solo .similares__cab { margin: 0; }

/* ---------------------------------------------------------------- 5. panel para compartir (escritorio; en celular, hoja inferior) */
.cpanel { width: min(94vw, 540px); max-height: min(92vh, 760px); padding: 0; border: 0; border-radius: var(--yn-r-tarjeta); overflow: auto;
  background: var(--yn-espuma); color: var(--yn-profundo); box-shadow: 0 40px 90px color-mix(in srgb, var(--yn-profundo) 45%, transparent); }
.cpanel::backdrop { background: color-mix(in srgb, var(--yn-profundo) 62%, transparent); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.cpanel[open] { animation: cpanel-entra .28s cubic-bezier(.2, .8, .25, 1); }
@keyframes cpanel-entra { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; }}
.cpanel__cuerpo { padding: 1.4rem 1.5rem 1.3rem; }
.cpanel__cab { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.1rem; }
.cpanel__cab h2 { margin: 0; font-size: 1.45rem; max-width: none; }
.cpanel__cerrar { flex: 0 0 auto; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%;
  background: transparent; color: var(--yn-profundo); cursor: pointer; transition: background-color .15s; }
.cpanel__cerrar svg { width: 20px; height: 20px; }
.cpanel__cerrar:hover { background: var(--yn-arena); }
.cpanel__cerrar:focus-visible { outline: 3px solid var(--yn-laguna); outline-offset: 2px; }

.cpanel__ficha { display: flex; align-items: center; gap: .95rem; margin-bottom: 1.25rem; }
.cpanel__ficha img { flex: 0 0 auto; width: 72px; height: 72px; object-fit: cover; border-radius: var(--yn-r-bloque); background: var(--yn-arena); }
.cpanel__ficha-txt { min-width: 0; }
.cpanel__titulo { margin: 0 0 .15rem; font-stretch: 112%; font-weight: 600; font-size: 1rem; line-height: 1.3; }
.cpanel__linea { margin: 0; color: var(--yn-bruma); font-size: .9rem; line-height: 1.35; }

.cpanel__opciones { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; }
.cpanel__opciones li { max-width: none; }
.cpanel__opciones li[hidden] { display: none; }
.cpanel__op { position: relative; display: flex; align-items: center; gap: .8rem; width: 100%; min-height: 58px; padding: .85rem 1rem;
  border: 1.5px solid var(--yn-linea); border-radius: var(--yn-r-bloque); background: var(--yn-blanco); color: var(--yn-profundo);
  font: inherit; font-stretch: 112%; font-weight: 600; font-size: .98rem; line-height: 1.2; text-align: left; text-decoration: none; cursor: pointer;
  transition: border-color .15s, background-color .15s, transform .15s; }
.cpanel__op:hover { color: var(--yn-profundo); border-color: var(--yn-profundo); background: color-mix(in srgb, var(--yn-arena) 30%, var(--yn-blanco)); }
.cpanel__op:active { transform: scale(.985); }
.cpanel__op:focus-visible { outline: 3px solid var(--yn-laguna); outline-offset: 2px; }
.cpanel__ico, .cpanel__ok { flex: 0 0 auto; width: 24px; height: 24px; }
.cpanel__ok { display: none; color: var(--yn-laguna); }
.cpanel__op--hecho { border-color: var(--yn-laguna); background: color-mix(in srgb, var(--yn-bajamar) 22%, var(--yn-blanco)); }
.cpanel__op--hecho .cpanel__ico { display: none; }
.cpanel__op--hecho .cpanel__ok { display: block; }
.cpanel__nota { margin: 1.1rem 0 0; font-size: .82rem; line-height: 1.45; color: var(--yn-bruma); max-width: none; }

@media (max-width: 560px) {
  /* hoja que sube desde abajo */
  .cpanel { width: 100%; max-width: none; max-height: 88vh; margin: auto 0 0; border-radius: var(--yn-r-tarjeta) var(--yn-r-tarjeta) 0 0; }
  .cpanel[open] { animation-name: cpanel-sube; }
  @keyframes cpanel-sube { from { transform: translateY(100%); } to { transform: none; }}
  .cpanel__cuerpo { padding: 1.1rem 1.1rem calc(1.2rem + env(safe-area-inset-bottom)); }
  .cpanel__cab h2 { font-size: 1.25rem; }
  .cpanel__op { min-height: 54px; padding: .75rem .85rem; font-size: .93rem; }}
@media (prefers-reduced-motion: reduce) { .cpanel[open] { animation: none; }}
@media print { .ficha-intro__acciones, .cpanel { display: none !important; }}