/* ============================================================
   Portal de Servicios Climáticos (DMC) — Selector / ficha de estación
   Responsivo: selector (lista de estaciones) + ficha de la estación.
   Reutiliza tokens.css + portada.css (dmc-punto, dmc-escala, sw-N).
   Sin CSS inline.
   ============================================================ */

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

/* Ruta de navegación (igual que catálogo) */
.dmc-breadcrumb ol { list-style:none; display:flex; flex-wrap:wrap; gap:var(--sp-2); margin:0 0 var(--sp-4); padding:0; font-size:.88rem; color:var(--tinta-suave); }
.dmc-breadcrumb li { display:inline-flex; align-items:center; }
.dmc-breadcrumb li + li::before { content:"›"; margin-right:var(--sp-2); }
.dmc-breadcrumb a { color:var(--dmc-azul); text-decoration:none; }
.dmc-breadcrumb a:hover { text-decoration:underline; }
.dmc-breadcrumb [aria-current="page"] { color:var(--tinta); }

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

/* Etiqueta de campo (compartida con ficha, no cargada aquí) */
.dmc-campo__lbl { display:block; font-size:.85rem; font-weight:600; margin:0 0 4px; color:var(--tinta); }

/* Botón selector (móvil) */
.dmc-est-sel-toggle { margin-bottom: var(--sp-4); min-height: var(--touch); }

/* ===== Selector ===== */
.dmc-est-selector {
  background: var(--fondo-alt); border: 1px solid var(--linea); border-radius: var(--radio);
  padding: var(--sp-4);
}
@media (min-width: 992px) {
  .dmc-est-selector { display: block !important; position: sticky; top: var(--sp-4); }
}
.dmc-est-lista__conteo { margin: var(--sp-3) 0 var(--sp-2); font-size:.85rem; color:var(--tinta-suave); }
.dmc-est-lista__conteo .dmc-mono { color: var(--dmc-azul); font-weight:700; }

.dmc-est-lista {
  list-style:none; margin:0; padding:0; max-height: 60vh; overflow-y:auto;
  border:1px solid var(--linea); border-radius:var(--radio); background:#fff;
}
.dmc-est-item {
  display:flex; align-items:center; gap:var(--sp-3); width:100%;
  border:0; border-bottom:1px solid var(--linea); background:transparent;
  padding:10px 12px; text-align:left; font:inherit; color:var(--tinta); cursor:pointer;
  min-height: var(--touch);
}
.dmc-est-lista li:last-child .dmc-est-item { border-bottom:0; }
.dmc-est-item:hover { background: var(--fondo-alt); }
.dmc-est-item.is-sel { background: color-mix(in srgb, var(--dmc-azul) 10%, #fff); box-shadow: inset 3px 0 0 var(--dmc-azul); }
.dmc-est-item:focus-visible { outline: var(--foco); outline-offset:-2px; }
.dmc-est-item__txt { flex:1 1 auto; min-width:0; }
.dmc-est-item__nom { display:block; font-weight:600; font-size:.9rem; line-height:1.2; }
.dmc-est-item__reg { display:block; font-size:.76rem; color:var(--tinta-suave); }
.dmc-est-item__temp { flex:0 0 auto; display:inline-flex; align-items:center; gap:5px; font-family:var(--font-mono); font-size:.82rem; color:var(--tinta-dato); }
.dmc-est-item__temp .dmc-punto { width:10px; height:10px; }

.dmc-est-vacio { padding: var(--sp-4); text-align:center; color:var(--tinta-suave); }

/* ===== Ficha de estación ===== */
.dmc-est-ficha { border:1px solid var(--linea); border-radius:var(--radio); background:#fff; padding: var(--sp-5); }
.dmc-est-ficha__head { border-bottom:1px solid var(--linea); padding-bottom:var(--sp-3); margin-bottom:var(--sp-4); }
.dmc-est-ficha__eyebrow { font-size:.74rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--dmc-azul); margin:0 0 4px; }
.dmc-est-ficha__nombre { font-size: clamp(1.4rem,2.6vw,1.9rem); font-weight:700; letter-spacing:-.02em; margin:0 0 4px; }
.dmc-est-ficha__ref { margin:0; font-size:.85rem; color:var(--tinta-suave); }

.dmc-est-ficha__grid { display:grid; grid-template-columns: minmax(0,1fr) minmax(0,1.2fr); gap: var(--sp-5); align-items:start; }
@media (max-width: 575.98px) { .dmc-est-ficha__grid { grid-template-columns: 1fr; gap: var(--sp-4); } }

/* Condición actual */
.dmc-est-cond { background: var(--fondo-alt); border:1px solid var(--linea); border-radius:var(--radio); padding: var(--sp-4); }
.dmc-est-cond__dato { display:flex; align-items:center; gap:10px; margin:6px 0 2px; }
.dmc-est-cond__punto { width:16px; height:16px; flex:0 0 16px; }
.dmc-est-cond__num { font-size: clamp(2rem,6vw,2.8rem); font-weight:700; line-height:1; letter-spacing:-.02em; }
.dmc-est-cond__tramo { margin:0; font-size:.82rem; color:var(--tinta-suave); }
.dmc-est-cond__act { margin: var(--sp-2) 0 0; font-size:.78rem; color:var(--tinta-suave); }

/* Ubicación */
.dmc-est-meta { margin:0; }
.dmc-est-meta > div { display:flex; justify-content:space-between; gap:var(--sp-3); padding:7px 0; border-bottom:1px solid var(--linea); }
.dmc-est-meta > div:last-child { border-bottom:0; }
.dmc-est-meta dt { font-size:.82rem; color:var(--tinta-suave); margin:0; }
.dmc-est-meta dd { font-size:.9rem; font-weight:600; margin:0; text-align:right; }

/* Escala de referencia */
.dmc-est-escala { display:flex; flex-wrap:wrap; align-items:center; gap: 6px 14px; margin: var(--sp-4) 0 0; padding-top: var(--sp-4); border-top:1px solid var(--linea); }

/* Productos disponibles */
.dmc-est-productos { margin-top: var(--sp-5); }
.dmc-est-productos__nota { font-size:.8rem; color:var(--tinta-suave); margin: 2px 0 var(--sp-3); }
.dmc-est-productos__acc { display:flex; flex-wrap:wrap; gap: var(--sp-3); }
.dmc-est-productos__acc .btn { min-height: var(--touch); }

.dmc-est-ficha__fuente { margin: var(--sp-5) 0 0; font-size:.78rem; color:var(--tinta-suave); }

/* ===== Impresión ===== */
@media print {
  .dmc-header,.dmc-footer,.dmc-est-selector,.dmc-est-sel-toggle,.dmc-navsearch,.dmc-navsesion,.dmc-toggler { display:none !important; }
  .dmc-est-ficha { border:0; padding:0; }
}