/* Laboratorio de aguas: complementos sobre css/lab.css (misma paleta, tipografía y componentes que los demás laboratorios).
   Aquí solo queda lo propio: fotos con marcas, simuladores SVG, plano, visor 3D, etiquetas 3D y guía del procedimiento. */

/* Colores funcionales del agua y las tuberías (SVG y 3D) y alias usados por el JS (tok("--sunk"), var(--muted)…). */
:root {
  --water: #1d6aa3; --water-soft: #d4e5f3; --pvc: #b88c00; --pipe: #c3ccd6;
  --muted: var(--ink-2); --sunk: var(--surface-2); --warn: var(--obs); --crit: var(--cal);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --water: #5ba8de; --water-soft: #1c3651; --pvc: #e2b52b; --pipe: #3d5270; }
}
:root[data-theme="dark"] { --water: #5ba8de; --water-soft: #1c3651; --pvc: #e2b52b; --pipe: #3d5270; }

/* Cabecera: con las etiquetas cortas las 8 pestañas caben junto a la marca en escritorio; en pantallas
   medianas pasan a una segunda fila desplazable, igual que lab.css hace en móvil. */
.marca { flex: none; }
.nav { scrollbar-width: thin; }
@media (max-width: 1180px) {
  .top { flex-wrap: wrap; row-gap: 8px; }
  .nav { order: 3; width: 100%; margin: 0; }
  .btn-icono { margin-left: auto; }
}

/* Las vistas usan pilas con separación propia: sin márgenes heredados. */
#view { min-width: 0; }
#view p { margin: 0; }
#view h2, #view h3 { margin: 0; }
.head h2, .hero h2 { font-size: clamp(1.6rem, 3.4vw, 2.4rem); letter-spacing: -.02em; }
.stack { display: flex; flex-direction: column; gap: 12px; }
.head { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; }
.head .eyebrow, .hero .eyebrow { margin: 0; }

/* Paneles con el mismo aspecto que las tarjetas planas de los demás laboratorios. */
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; min-width: 0; }
.panel > b:first-child, .cap b { color: var(--brand); }
.grid2 { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 18px; align-items: start; }
@media (max-width: 920px) { .grid2 { grid-template-columns: minmax(0, 1fr); } }
.cap { font-size: .85rem; color: var(--ink-2); display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.legend { display: flex; flex-wrap: wrap; gap: 10px 14px; font-size: .88rem; color: var(--ink-2); }

/* Insignias de evidencia (aspecto de .badge) y etiquetas de las tarjetas */
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { display: inline-block; border: 0; font-size: .74rem; font-weight: 700; padding: 3px 9px; border-radius: 999px; background: var(--surface-2); color: var(--brand-2); cursor: default; }
.ev { display: inline-flex; align-items: center; gap: 5px; font-size: .74rem; font-weight: 700; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.ev-c { background: var(--ok-bg); color: var(--ok); }
.ev-i { background: var(--obs-bg); color: var(--obs); }
.ev-n { background: var(--surface-2); color: var(--ink-2); }
.illus { font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--obs); }

/* Portada */
.hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 24px; margin-bottom: 24px; }
@media (max-width: 860px) { .hero { grid-template-columns: minmax(0, 1fr); } }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); gap: 16px; }
.card img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.card > div { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.card p { font-size: .88rem; color: var(--ink-2); }

/* Plano esquemático y simuladores SVG */
.svgbox { overflow-x: auto; }
.svgbox svg { display: block; width: 100%; height: auto; min-width: 300px; }
svg text { font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; font-size: 11px; fill: var(--ink-2); }
svg .lbl { fill: var(--ink); font-weight: 600; }
.pipe { fill: none; stroke: var(--pipe); stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; }
.flow { fill: none; stroke: var(--water); stroke-width: 3; stroke-dasharray: 7 7; stroke-linecap: round; stroke-linejoin: round; animation: fl .9s linear infinite; }
@keyframes fl { to { stroke-dashoffset: -14; } }
@media (prefers-reduced-motion: reduce) { .flow { animation: none; } }
.vlv { cursor: pointer; }
.zone { cursor: pointer; }
.zone rect { fill: var(--water-soft); stroke: var(--water); stroke-width: 1.5; }
.zone:hover rect, .zone:focus rect { fill: var(--water); fill-opacity: .35; }
.vlv:focus-visible, .zone:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

/* Foto con marcas numeradas */
.fig { position: relative; border-radius: 12px; overflow: hidden; background: var(--surface-2); }
.fig img { width: 100%; height: auto; }
.fig.tall { max-width: 420px; margin: 0 auto; }
.hs { position: absolute; transform: translate(-50%, -50%); width: 26px; height: 26px; border-radius: 50%; border: 2px solid #fff; background: #0f2d52; color: #fff; font: 700 .75rem/1 system-ui, sans-serif; cursor: pointer; display: grid; place-items: center; padding: 0; box-shadow: 0 1px 4px rgba(0, 0, 0, .45); }
.hs.on { background: var(--accent); color: #3b2a00; transform: translate(-50%, -50%) scale(1.18); }
.thumbs { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px; }
.thumbs button { flex: 0 0 auto; border: 2px solid transparent; border-radius: 8px; padding: 0; background: none; cursor: pointer; width: 84px; height: 56px; overflow: hidden; }
.thumbs button img { width: 100%; height: 100%; object-fit: cover; }
.thumbs button[aria-pressed="true"] { border-color: var(--brand-2); }

/* Lista de elementos identificados */
.els { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.els li { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 10px; padding: 10px 8px; border-top: 1px solid var(--line); cursor: pointer; border-radius: 10px; margin: 0; }
.els li:first-child { border-top: 0; }
.els li:hover { background: var(--surface-2); }
.els li.on { background: var(--info-bg); }
.els .num { position: static; font-size: .8rem; font-weight: 700; width: 26px; height: 26px; padding: 0; border-radius: 50%; background: var(--surface-2); color: var(--ink); display: grid; place-items: center; }
.els li.on .num { background: var(--brand); color: var(--surface); }
.els .t { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-weight: 600; }
.els .d { color: var(--ink-2); font-size: .92rem; }

/* Procedimiento (áreas sin laboratorio 3D) y observaciones */
.steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.steps li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 10px; align-items: start; padding: 10px 12px; border-radius: 10px; background: var(--surface-2); margin: 0; }
.steps li.done { opacity: .6; }
.steps li.done span { text-decoration: line-through; }
.steps input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--ok); }
.prog { height: 8px; background: var(--surface-2); border-radius: 99px; overflow: hidden; }
.prog i { display: block; height: 100%; background: linear-gradient(90deg, var(--brand-2), var(--accent)); transition: width .3s; }
.note { font-size: .9rem; color: var(--ink); background: var(--obs-bg); border-left: 4px solid var(--obs); padding: 8px 12px; border-radius: 0 10px 10px 0; }

/* Controles, lecturas y estado de los simuladores */
.ctrls { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.ctrl { display: flex; flex-direction: column; gap: 4px; font-size: .85rem; min-width: 0; }
.ctrl label { font-weight: 600; color: var(--ink-2); }
.ctrl output { font-weight: 700; color: var(--brand-2); font-variant-numeric: tabular-nums; }
input[type=range] { width: 100%; accent-color: var(--brand-2); }
#view select, #view input[type=number] { font: inherit; font-size: .92rem; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); width: 100%; }
#view select:focus, #view input[type=number]:focus { border-color: var(--brand-2); }
.btns { display: flex; flex-wrap: wrap; gap: 8px; }
.btn[aria-pressed="true"] { background: var(--brand); border-color: var(--brand); color: var(--surface); }
.btn.ghost { background: transparent; }
.flowchips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.flowchips .btn { min-height: 34px; padding: 6px 12px; font-size: .85rem; }
.arrow { color: var(--ink-2); }
.reads { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; }
.read { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.read small { font-size: .8rem; color: var(--ink-2); }
.read b { font-size: 1.1rem; font-variant-numeric: tabular-nums; }
.state { display: flex; align-items: center; gap: 8px; font-weight: 600; padding: 10px 12px; border-radius: 10px; background: var(--surface-2); }
.dot { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto; background: var(--ink-2); }
.s-ok .dot { background: var(--ok); } .s-warn .dot { background: var(--obs); } .s-crit .dot { background: var(--cal); }

/* Tablas (aspecto de .tabla-res) */
.tbl { overflow-x: auto; }
.tbl table, #view table { border-collapse: collapse; width: 100%; font-size: .9rem; }
#view th { text-align: left; background: var(--surface-2); color: var(--ink-2); font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; padding: 8px 10px; vertical-align: top; }
#view td { text-align: left; border-top: 1px solid var(--line); padding: 8px 10px; vertical-align: top; }
td.n { font-variant-numeric: tabular-nums; }
.tbl > b + table, .tbl > b + .illus + table { margin-top: 10px; }

/* Laboratorio 3D */
.lab { margin-bottom: 20px; }
.lab-grid { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); gap: 16px; align-items: start; }
@media (max-width: 980px) { .lab-grid { grid-template-columns: minmax(0, 1fr); } }
.lab-view { position: relative; height: 520px; border-radius: 12px; overflow: hidden; background: var(--surface-2); border: 1px solid var(--line); touch-action: none; }
@media (max-width: 600px) { .lab-view { height: 380px; } }
.lab-view canvas { display: block; width: 100%; height: 100%; }
.lab-tags { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 1; }
.tag3 { position: absolute; left: 0; top: 0; pointer-events: auto; font-size: .7rem; font-weight: 600; padding: 2px 7px; border-radius: 6px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); white-space: nowrap; cursor: pointer; opacity: .92; }
.tag3:not([data-id]) { cursor: default; pointer-events: none; opacity: .75; }
.tag3.on { background: var(--brand); color: var(--surface); border-color: var(--brand); opacity: 1; z-index: 2; }
.hud { position: absolute; left: 10px; top: 10px; z-index: 3; max-width: min(330px, 68%); background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; font-size: .76rem; line-height: 1.5; font-variant-numeric: tabular-nums; pointer-events: none; opacity: .95; box-shadow: var(--shadow); }
.hud-w { color: var(--obs); font-weight: 600; }
.btn.tg { position: absolute; right: 10px; top: 10px; z-index: 3; min-height: 34px; padding: 6px 12px; font-size: .82rem; }
.g-card { background: var(--info-bg); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; min-height: 120px; }
.g-t { font-weight: 600; font-size: 1.02rem; line-height: 1.45; }
.g-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; font-size: .85rem; color: var(--ink-2); max-height: 230px; overflow: auto; }
.g-list li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 6px; padding: 3px 6px; border-radius: 6px; margin: 0; }
.g-list li.cur { color: var(--ink); background: var(--surface-2); font-weight: 600; }
.g-list li.ok { color: var(--ok); }

/* Móvil: el plano esquemático conserva un ancho legible (se desplaza dentro de su caja), el estado del visor
   no tapa el botón de etiquetas y las tablas de fuentes no se comprimen. */
@media (max-width: 600px) {
  .svgbox svg[viewBox="0 0 610 320"] { min-width: 560px; }
  .hud { max-width: calc(100% - 120px); font-size: .72rem; }
  .tbl table { min-width: 520px; }
  .tbl th { white-space: nowrap; }
}