/* Modo muro (videowall): mosaico de zonas, foco automático y lista de incidencias. */
body.wall { height: 100vh; overflow: hidden; display: flex; flex-direction: column; }
.wall-top { display: flex; align-items: center; gap: 18px; padding: 8px 16px; background: var(--surface-1); border-bottom: 1px solid var(--border); flex: none; }
.wall-top .brand { text-decoration: none; color: inherit; }
.trial-tag { font-size: 11px; letter-spacing: .06em; color: #9cc3f5; border: 1px solid rgba(57, 135, 229, .45); background: rgba(57, 135, 229, .10); border-radius: 6px; padding: 2px 8px; white-space: nowrap; }
.wall-filters { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.wall-filters .chip { padding: 4px 10px; font-size: 12.5px; }
.wall-filters .toggle-chip { color: var(--text-muted); }
.wall-filters .toggle-chip[aria-pressed="true"] { color: var(--text-primary); }
.wall-kpis { display: flex; gap: 22px; margin-left: auto; }
.wk { display: flex; flex-direction: column; line-height: 1.1; }
.wk b { font-size: 22px; font-variant-numeric: tabular-nums; }
.wk b small { font-size: 13px; color: var(--text-secondary); font-weight: 500; margin-left: 2px; }
.wk span { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .05em; }
.wk.alarm b { color: #f08a8a; }
.wall-right { display: flex; align-items: center; gap: 14px; }
.feed-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--nodata); box-shadow: 0 0 0 3px rgba(255,255,255,.06); }
.feed-dot.ok { background: var(--good); }
.feed-dot.warn { background: var(--warning); }
.feed-dot.bad { background: var(--critical); }

.wall-grid { flex: 1; min-height: 0; display: grid; gap: 8px; padding: 8px; }
/* Disposición según la forma de la pantalla (la elige muro.js; se puede forzar con ?formato=) */
.wall-grid.mosaic.f-estandar {          /* 16:9 y 16:10 */
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: repeat(3, minmax(0, 1fr));
  grid-template-areas:
    "pais pais foco incidencias"
    "pais pais z1 z2"
    "z3 z4 z5 z6";
}
.wall-grid.mosaic.f-panoramica {        /* 21:9 y más anchas: foco e incidencias a toda altura */
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1.25fr) repeat(3, minmax(0, 1fr)) minmax(0, 1.15fr) minmax(0, .95fr);
  grid-template-rows: repeat(2, minmax(0, 1fr));
  grid-template-areas:
    "pais pais z1 z2 z5 foco incidencias"
    "pais pais z3 z4 z6 foco incidencias";
}
.wall-grid.mosaic.f-superpanoramica {   /* 32:9: dos filas de zonas más estrechas */
  grid-template-columns: repeat(2, minmax(0, 1.3fr)) repeat(4, minmax(0, 1fr)) minmax(0, 1.3fr) minmax(0, 1fr);
  grid-template-rows: repeat(2, minmax(0, 1fr));
  grid-template-areas:
    "pais pais z1 z2 z5 z6 foco incidencias"
    "pais pais z3 z4 z5 z6 foco incidencias";
}
.wall-grid.mosaic.f-cuadrada {          /* 4:3 y 5:4 */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(4, minmax(0, 1fr));
  grid-template-areas:
    "pais pais foco"
    "pais pais incidencias"
    "z1 z2 z5"
    "z3 z4 z6";
}
.wall-grid.mosaic.f-vertical {          /* monitor girado */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: 1.6fr repeat(4, minmax(0, 1fr));
  grid-template-areas:
    "pais pais"
    "foco incidencias"
    "z1 z2"
    "z3 z4"
    "z5 z6";
}
/* Muro europeo: Europa en grande (pais), España (z1) y Finlandia (z2), foco e incidencias */
.wall-grid.mosaic.europa.f-estandar {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  grid-template-areas:
    "pais pais z1 foco"
    "pais pais z2 incidencias";
}
.wall-grid.mosaic.europa.f-panoramica {
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1.15fr) minmax(0, .95fr);
  grid-template-rows: repeat(2, minmax(0, 1fr));
  grid-template-areas:
    "pais pais z1 foco incidencias"
    "pais pais z2 foco incidencias";
}
.wall-grid.mosaic.europa.f-superpanoramica {   /* una fila: Finlandia es alta y estrecha */
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1.45fr) minmax(0, .8fr) minmax(0, 1.3fr) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  grid-template-areas: "pais z1 z2 foco incidencias";
}
.wall-grid.mosaic.europa.f-cuadrada {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(3, minmax(0, 1fr));
  grid-template-areas:
    "pais pais z1"
    "pais pais z2"
    "foco foco incidencias";
}
.wall-grid.mosaic.europa.f-vertical {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: 1.6fr repeat(2, minmax(0, 1fr));
  grid-template-areas:
    "pais pais"
    "z1 z2"
    "foco incidencias";
}
.wall-grid.single { grid-template-columns: minmax(0, 1fr) 360px; grid-template-rows: minmax(0, 1fr); }
.wall-grid.single.full { grid-template-columns: minmax(0, 1fr); }

.mp { position: relative; min-width: 0; min-height: 0; background: var(--surface-1); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; display: flex; flex-direction: column; }
.mp.flash { animation: mpflash 1.4s ease-out 3; }
@keyframes mpflash { 0% { box-shadow: inset 0 0 0 3px var(--critical); } 100% { box-shadow: inset 0 0 0 0 transparent; } }
.mp-head { display: flex; align-items: center; gap: 10px; padding: 6px 10px; border-bottom: 1px solid var(--border); flex: none; z-index: 2; background: var(--surface-1); }
.mp-head a { color: var(--text-primary); font-weight: 600; text-decoration: none; font-size: 13px; white-space: nowrap; }
.mp-head a:hover { text-decoration: underline; }
.mp-head a.kiosk { color: var(--text-muted); font-weight: 400; font-size: 14px; text-decoration: none; }
.mp-head a.kiosk:hover { color: var(--text-primary); }
.mp-stats { margin-left: auto; display: flex; gap: 10px; align-items: center; font-size: 12px; color: var(--text-secondary); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; }
.mp-stats .sev { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; color: var(--text-primary); }
.mp-stats .sev i { width: 8px; height: 8px; border-radius: 2px; background: var(--sev); }
.mp-map { flex: 1; min-height: 0; background: #121315; }
.mp-map.zoom-hi .tm-lbl { display: block; }

/* tarjeta del foco automático */
.focus-card { position: absolute; left: 10px; right: 10px; bottom: 10px; z-index: 500; background: rgba(23, 24, 26, .94); border: 1px solid var(--border); border-left: 4px solid var(--sev, var(--accent)); border-radius: 8px; padding: 8px 12px; }
.focus-card .ft { font-weight: 600; font-size: 14px; line-height: 1.3; }
.focus-card .fm { display: flex; gap: 10px; align-items: center; font-size: 12px; color: var(--text-secondary); margin-top: 3px; flex-wrap: wrap; }
.focus-card .dots { margin-left: auto; display: flex; gap: 4px; }
.focus-card .dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--surface-3); }
.focus-card .dots i.on { background: var(--text-primary); }
.focus-empty { color: var(--text-muted); }

/* lista de incidencias del muro */
.wall-inc { flex: 1; min-height: 0; overflow: hidden; padding: 6px; display: flex; flex-direction: column; gap: 5px; }
.wall-inc .alert { cursor: pointer; padding: 6px 8px 6px 11px; color: inherit; text-decoration: none; }
.wall-inc .alert:hover { border-color: var(--sev); }
.focus-card a.ft { color: inherit; text-decoration: none; display: block; }
.focus-card a.ft:hover { text-decoration: underline; }
a.wall-safety { color: inherit; text-decoration: none; cursor: pointer; }
.wall-inc .alert .t { font-size: 12px; }
.wall-inc .alert .m { font-size: 11px; }
.wall-inc .more { color: var(--text-muted); font-size: 12px; text-align: center; padding: 4px; }

.leaflet-container .leaflet-control-attribution { font-size: 9px; }
@media (max-width: 1100px) {
  body.wall { height: auto; overflow: auto; }
  .wall-grid.mosaic.f-compacta { grid-template-columns: 1fr 1fr; grid-template-rows: none; grid-auto-rows: 320px; grid-template-areas: "pais pais" "foco incidencias" "z1 z2" "z3 z4" "z5 z6"; }
  .wall-grid.mosaic.europa.f-compacta { grid-template-areas: "pais pais" "z1 z2" "foco incidencias"; }
  .wall-grid.single { grid-template-columns: 1fr; grid-template-rows: 70vh auto; }
  .wall-kpis { display: none; }
  .wall-top { flex-wrap: wrap; }
}

@media (max-width: 640px) {
  .wall-grid.mosaic.f-compacta { grid-template-columns: 1fr; grid-auto-rows: 300px; grid-template-areas: "pais" "foco" "incidencias" "z1" "z2" "z3" "z4" "z5" "z6"; }
  .wall-grid.mosaic.europa.f-compacta { grid-template-areas: "pais" "z1" "z2" "foco" "incidencias"; }
  .trial-tag { display: none; }
}
.wall-grid.single.f-panoramica, .wall-grid.single.f-superpanoramica { grid-template-columns: minmax(0, 1fr) 460px; }
.wall-grid.single.f-vertical { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1.8fr) minmax(0, 1fr); }