/* ============================================================
   Portal de Servicios Climáticos (DMC) — Visor de imágenes (P22/P23)
   Selector de producto + imagen + navegación + descarga.
   Reutiliza tokens.css + portada.css + catalogo.css (breadcrumb).
   Sin CSS inline.
   ============================================================ */

.dmc-visor { padding-block: var(--sp-5) var(--sp-7); }

.dmc-visor__head { margin-bottom: var(--sp-4); }
.dmc-visor__titulo { font-size: clamp(1.6rem,3vw,2.1rem); font-weight:700; letter-spacing:-.02em; margin:0 0 var(--sp-2); }
.dmc-visor__intro { color: var(--tinta-suave); margin:0; max-width:72ch; }

.dmc-campo__lbl { display:block; font-size:.9rem; font-weight:600; margin:0 0 6px; color:var(--tinta); }

.dmc-visor__tools { display:flex; flex-wrap:wrap; gap:var(--sp-3); align-items:flex-end; margin: var(--sp-4) 0 var(--sp-3); }
.dmc-visor__prod { flex:1 1 280px; max-width:360px; }
.dmc-visor__tools .btn { min-height: var(--touch); margin-left:auto; }

/* Navegación */
.dmc-visor__nav { display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3); margin-bottom: var(--sp-3); }
.dmc-visor__nav .btn { min-height: var(--touch); }
.dmc-visor__label { margin:0; font-weight:700; font-family:var(--font-mono); font-size:.95rem; text-align:center; }

/* Lienzo de imagen */
.dmc-visor__lienzo { background: var(--fondo-alt); border:1px solid var(--linea); border-radius:var(--radio); padding: var(--sp-3); display:flex; justify-content:center; }
.dmc-visor__img { display:block; width:100%; max-width:720px; height:auto; background:#fff; border-radius:6px; }

/* Miniaturas / selector */
.dmc-visor__tiras { display:flex; flex-wrap:wrap; gap:var(--sp-2); margin-top: var(--sp-3); }
.dmc-visor__tira { border:1px solid var(--linea); background:#fff; border-radius:var(--radio); padding:6px 12px; font:inherit; font-size:.82rem; color:var(--tinta); cursor:pointer; min-height:38px; font-family:var(--font-mono); }
.dmc-visor__tira:hover { border-color: var(--dmc-azul); color: var(--dmc-azul); }
.dmc-visor__tira[aria-selected="true"] { background: var(--dmc-azul); color:#fff; border-color: var(--dmc-azul); }
.dmc-visor__tira:focus-visible { outline: var(--foco); outline-offset:2px; }

.dmc-visor__nota { margin-top: var(--sp-4); font-size:.78rem; color:var(--tinta-suave); }

@media print {
  .dmc-header,.dmc-footer,.dmc-visor__tools,.dmc-visor__nav,.dmc-visor__tiras,.dmc-navsearch,.dmc-navsesion,.dmc-toggler { display:none !important; }
}