/* ============================================================
   Portal de Servicios Climáticos (DMC) — Catastro de estaciones
   Patrón "Lista larga" (Arquitectura §5.2): buscar, ordenar por
   columna, filtrar, paginar, exportar. Móvil = tarjetas.
   Reutiliza tokens.css + portada.css + catalogo.css (breadcrumb).
   Sin CSS inline.
   ============================================================ */

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

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

/* Barra de herramientas */
.dmc-catastro__tools { display:flex; flex-wrap:wrap; gap:var(--sp-3); align-items:center; margin: var(--sp-4) 0 var(--sp-3); }
.dmc-catastro__buscar { flex:1 1 260px; }
.dmc-catastro__region { flex:0 1 240px; }
.dmc-catastro__tools .btn { min-height: var(--touch); margin-left:auto; }
.dmc-catastro__resumen { margin:0 0 var(--sp-3); font-size:.88rem; color:var(--tinta-suave); }
.dmc-catastro__resumen .dmc-mono { color: var(--dmc-azul); font-weight:700; }

/* Contenedor de tabla (scroll horizontal en desktop si hace falta) */
.dmc-tabla-wrap { overflow-x:auto; border:1px solid var(--linea); border-radius:var(--radio); background:#fff; }

.dmc-tabla-larga { width:100%; border-collapse:collapse; font-size:.9rem; }
.dmc-tabla-larga caption { text-align:left; }
.dmc-tabla-larga th, .dmc-tabla-larga td { padding:9px 12px; text-align:left; border-bottom:1px solid var(--linea); white-space:nowrap; }
.dmc-tabla-larga thead th { background: var(--fondo-alt); position:sticky; top:0; z-index:1; }
.dmc-tabla-larga tbody tr:hover { background: color-mix(in srgb, var(--dmc-azul) 5%, #fff); }
.dmc-tabla-larga td.num { text-align:right; font-family: var(--font-mono); }
.dmc-tabla-larga td.mono { font-family: var(--font-mono); }
.dmc-est-punto { display:inline-block; width:9px; height:9px; border-radius:50%; margin-right:6px; vertical-align:baseline; background: var(--linea); }
.dmc-est-punto.tramo-1 { background: var(--temp-1); } .dmc-est-punto.tramo-2 { background: var(--temp-2); }
.dmc-est-punto.tramo-3 { background: var(--temp-3); } .dmc-est-punto.tramo-4 { background: var(--temp-4); }
.dmc-est-punto.tramo-5 { background: var(--temp-5); } .dmc-est-punto.tramo-6 { background: var(--temp-6); }

/* Encabezado ordenable (botón) */
.dmc-th { display:inline-flex; align-items:center; gap:6px; width:100%; background:transparent; border:0; padding:0; font:inherit; font-weight:700; color:var(--tinta); cursor:pointer; }
.dmc-th:hover { color: var(--dmc-azul); }
.dmc-th:focus-visible { outline: var(--foco); outline-offset:2px; }
.dmc-th__s { font-size:.8rem; color:var(--tinta-suave); }
th[aria-sort="ascending"] .dmc-th, th[aria-sort="descending"] .dmc-th { color: var(--dmc-azul); }

.dmc-catastro__vacio { padding: var(--sp-5); text-align:center; color:var(--tinta-suave); background:var(--fondo-alt); border:1px dashed var(--linea); border-radius:var(--radio); margin-top: var(--sp-3); }

/* Paginación */
.dmc-catastro__pag { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--sp-3); margin-top: var(--sp-4); }
.dmc-catastro__pag-tam { display:flex; align-items:center; gap:8px; font-size:.85rem; color:var(--tinta-suave); }
.dmc-catastro__pag-tam select { width:auto; }
.dmc-catastro__pag-ctrl { display:flex; align-items:center; gap:var(--sp-3); }
.dmc-catastro__pag-ctrl .btn { min-height: var(--touch); }
.dmc-catastro__pag-info { font-size:.85rem; color:var(--tinta); font-family:var(--font-mono); }

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

/* ===== Móvil: la tabla se vuelve tarjetas ===== */
@media (max-width: 700px) {
  .dmc-tabla-wrap { overflow:visible; border:0; background:transparent; }
  .dmc-tabla-larga thead { border:0; clip:rect(0 0 0 0); clip-path:inset(50%); height:1px; width:1px; overflow:hidden; position:absolute; white-space:nowrap; }
  .dmc-tabla-larga, .dmc-tabla-larga tbody, .dmc-tabla-larga tr, .dmc-tabla-larga td { display:block; width:100%; }
  .dmc-tabla-larga tr { border:1px solid var(--linea); border-radius:var(--radio); margin-bottom:var(--sp-3); padding:6px 12px; background:#fff; }
  .dmc-tabla-larga tr:hover { background:#fff; }
  .dmc-tabla-larga td { display:flex; justify-content:space-between; gap:var(--sp-4); border:0; padding:7px 0; text-align:right; white-space:normal; }
  .dmc-tabla-larga td + td { border-top:1px solid var(--fondo-alt); }
  .dmc-tabla-larga td::before { content: attr(data-label); font-weight:600; color:var(--tinta-suave); text-align:left; flex:0 0 auto; }
  .dmc-tabla-larga td.num { text-align:right; }
}

@media print {
  .dmc-header,.dmc-footer,.dmc-catastro__tools,.dmc-catastro__pag,.dmc-navsearch,.dmc-navsesion,.dmc-toggler { display:none !important; }
  .dmc-tabla-wrap { overflow:visible; border:0; }
  .dmc-tabla-larga th, .dmc-tabla-larga td { white-space:normal; }
}