#practicasView[hidden] { display: none; }
#practicasView {
  position: absolute; z-index: 1; inset: 80px 0 0; overflow: auto;
  overscroll-behavior: contain; scrollbar-color: #385669 #0b1623;
  padding: clamp(22px, 4vw, 64px); color: #edf4fa;
  background: radial-gradient(ellipse at 72% 36%, #122e3aee, #0b1623ed 56%, #07101cf5);
}
.mob-layout {
  min-height: 100%; max-width: 1330px; margin: auto; display: grid;
  grid-template: 'intro display' auto 'notes display' auto / minmax(240px, .84fr) minmax(0, 1.45fr);
  align-content: center; gap: 24px clamp(32px, 5vw, 72px);
}
.mob-intro { grid-area: intro; align-self: end; }
.mob-eyebrow { font: 500 10px/1.5 var(--mono); color: #8ee2c8; letter-spacing: .12em; text-transform: uppercase; }
.mob-eyebrow span { margin: 0 .35em; color: #688693; }
.mob-intro h2 {
  margin: .28em 0 .3em; font: 600 clamp(32px, 4.25vw, 67px)/1.02 var(--sans);
  letter-spacing: -.05em; text-wrap: balance; outline: none;
}
.mob-org { color: #afd7d2; font: 500 13px/1.45 var(--sans); }
.mob-lead, .mob-notes p { color: #c2d1de; font: 400 16px/1.55 var(--sans); }
.mob-lead { margin-top: 18px; }
.mob-notes { grid-area: notes; }
.mob-notes details { border-top: 1px solid #334957; }
.mob-notes details:last-child { border-bottom: 1px solid #334957; }
.mob-notes summary {
  padding: 14px 2px; display: flex; justify-content: space-between; gap: 12px;
  list-style: none; cursor: pointer; font: 500 15px/1.4 var(--sans);
}
.mob-notes summary::-webkit-details-marker { display: none; }
.mob-notes summary::after { content: '+'; color: #9ce3d0; font: 400 20px/1 var(--mono); }
.mob-notes details[open] summary::after { content: '−'; }
.mob-notes p { margin-bottom: 12px; font-size: 14px; }
.mob-display {
  grid-area: display; min-width: 0; align-self: center; padding: clamp(16px, 2.5vw, 34px);
  border: 1px solid #41616c; border-radius: 12px;
  background: linear-gradient(150deg, #152d36, #0d1e2a 62%); box-shadow: 0 15px 52px #02081191;
}
.mob-chart-head, .mob-metric { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 14px; }
.mob-chart-head h3 { margin-top: 4px; font: 500 clamp(22px, 2.6vw, 32px)/1.15 var(--sans); letter-spacing: -.025em; }
.mob-tag { border: 1px solid #7d7455; border-radius: 99px; color: #f3dba1; padding: 5px 9px; font: 500 10px/1 var(--mono); }
.mob-metric { margin: 24px 0 18px; }
.mob-total { display: block; font: 500 clamp(36px, 4.6vw, 62px)/1 var(--sans); letter-spacing: -.05em; color: #c4ffe9; }
.mob-unit { font: 400 12px/1.7 var(--mono); color: #b5c9d2; }
.mob-switch { display: inline-flex; padding: 3px; border: 1px solid #3d5560; border-radius: 8px; background: #08141e; }
.mob-switch button {
  padding: 8px 11px; min-height: 40px; border: 1px solid transparent; border-radius: 5px;
  font: 500 12px/1.2 var(--sans); color: #bdcbd5; background: transparent; cursor: pointer;
}
.mob-switch button[aria-pressed="true"] { background: #1f423e; color: #d5ffed; border-color: #4c756a; }
#practicasView :is(button, summary):focus-visible { outline: 2px solid #9affd9; outline-offset: 2px; }
.mob-display table { table-layout: fixed; width: 100%; border-collapse: collapse; }
.mob-display th, .mob-display td { padding: 9px 0; vertical-align: middle; border-bottom: 1px solid #2e4552; }
.mob-display th:first-child { text-align: left; width: 48%; }
.mob-display th:not(:first-child), .mob-display td { text-align: right; }
.mob-display thead th { color: #b6c9d4; font: 400 10px/1.25 var(--mono); }
.mob-display tbody th { color: #e6eef3; font: 500 14px/1.3 var(--sans); }
.mob-display td { color: #d3e2ec; font: 500 13px/1.3 var(--mono); font-variant-numeric: tabular-nums; }
.mob-bar { display: block; height: 3px; margin: 5px 12px 0 0; background: #253c48; border-radius: 2px; overflow: hidden; }
.mob-bar i { display: block; height: 100%; background: #79d9bc; border-radius: inherit; }
.mob-footnote { margin-top: 14px; color: #a6bdc9; font: 400 12px/1.5 var(--sans); }
@media (max-width: 919px) {
  #practicasView { inset: 74px 0 0; padding: 20px max(16px, env(safe-area-inset-right)) max(32px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); }
  .mob-layout { max-width: 700px; align-content: start; grid-template: 'intro' auto 'display' auto 'notes' auto / minmax(0, 1fr); gap: 20px; }
  .mob-lead { margin-top: 12px; font-size: 15px; }
}
@media (max-width: 440px) {
  .mob-metric { margin: 18px 0 12px; gap: 8px; }
  .mob-switch button { padding: 7px; font-size: 11px; }
  .mob-display th, .mob-display td { padding-block: 8px; }
  .mob-display tbody th, .mob-display td { font-size: 12px; }
}

/* Monitor de movilidad: mismo aspecto que el del velero (ruta.css). */
.mob-display { padding: 0; overflow: hidden; background: #081d29; border-color: #3b5965; }
.mob-strip {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 20px; background: #0d2936;
}
.mob-strip h3 { font: 600 clamp(17px, 1.6vw, 21px)/1.2 var(--sans); letter-spacing: -.01em; }
.mob-strip span { color: #79e9c6; font: 600 10px var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.mob-map { display: block; width: 100%; height: clamp(250px, 30vw, 430px); background: #081b27; touch-action: pan-y; }
.mob-legend { display: flex; flex-wrap: wrap; gap: 8px; padding: 14px 20px 4px; border-top: 1px solid #304b56; }
.mob-legend button {
  display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 0 12px;
  border: 1px solid #36525e; border-radius: 99px; background: #0b2230; color: #dbe8ee;
  font: 500 13px/1 var(--sans); cursor: pointer; transition: opacity .2s, border-color .2s;
}
.mob-legend button i { width: 9px; height: 9px; border-radius: 50%; background: var(--c); box-shadow: 0 0 8px var(--c); }
.mob-legend button b { font: 600 12px/1 var(--mono); color: var(--c); }
.mob-legend button[aria-pressed="false"] { opacity: .45; border-color: #24363f; }
.mob-legend button[aria-pressed="false"] i { box-shadow: none; }
.mob-legend button:hover { border-color: #5f8a96; }
.mob-display .mob-footnote { margin: 0; padding: 8px 20px 16px; }
.mob-footnote b { color: #c4ffe9; font-weight: 600; }
@media (max-width: 440px) {
  .mob-legend button { min-height: 34px; padding: 0 10px; font-size: 12px; }
}
.mob-status { display: flex; align-items: center; gap: 10px; margin: 0; padding: 12px 20px 2px; color: #93ffdc; font: 500 15px/1.4 var(--sans); }
.mob-status i { flex: none; width: 8px; height: 8px; border-radius: 50%; background: #64ffc3; box-shadow: 0 0 10px #3fefbb; animation: ping 1.6s ease-out infinite; }
.mob-status b { color: #c4ffe9; font: 600 16px/1 var(--mono); font-variant-numeric: tabular-nums; min-width: 7ch; text-align: right; }
@media (prefers-reduced-motion: reduce) { .mob-status i { animation: none; } }
/* Atribución del callejero (obligatoria por la licencia de OpenStreetMap), discreta en la esquina del mapa. */
.mob-mapbox { position: relative; }
.mob-osm { position: absolute; right: 6px; bottom: 4px; color: rgba(190, 215, 225, .45); font: 400 9px/1 var(--sans); pointer-events: none; }
.mob-status { padding-bottom: 16px; }
/* Prácticas con el formato del TFG: el monitor un poco más ancho que la foto del velero. */
#practicasView .mob-layout { max-width: 1440px; grid-template: none; grid-template-columns: minmax(0, .8fr) minmax(0, 1.45fr); gap: clamp(28px, 4vw, 64px); align-content: normal; }
#practicasView .mob-map { height: clamp(240px, 26vw, 400px); }
#practicasView .mob-display { grid-area: auto; }
.mob-legend { padding-bottom: 16px; }
.boat-status .mob-count { display: inline-block; min-width: 7ch; text-align: right; color: #c4ffe9; font: 600 16px/1 var(--mono); font-variant-numeric: tabular-nums; }
@media (max-width: 919px) {
  #practicasView .mob-layout { grid-template-columns: 1fr; max-width: 640px; min-height: 0; align-content: start; }
}
@media (min-width: 920px) and (max-width: 1320px) {
  #practicasView .mob-layout { grid-template-columns: minmax(0, .72fr) minmax(0, 1.5fr); }
  .mob-legend { gap: 6px; padding-inline: 14px; }
  .mob-legend button { padding: 0 9px; gap: 6px; font-size: 12px; }
  .mob-legend button b { font-size: 11px; }
}