/* Estilos propios de la deck "Sistema hidráulico A320". Los colores de sistema siguen la convención
   de cabina (Green / Blue / Yellow); el ECAM usa verde = normal y ámbar = anomalía. */

:root {
  --sys-g: #3ddc84;
  --sys-b: #4c9dff;
  --sys-y: #ffd23f;
  --ecam-ok: #31e08a;
  --ecam-amber: #ffa23a;
  --ecam-white: #e8ecf5;
  --ecam-cyan: #4fd6ff;
  --du-bg: #07080d;
}

/* Portada */
.slide > .inner.cover { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .9fr); gap: clamp(20px, 4vw, 80px); align-items: center; }
.cover-art svg { width: 100%; max-width: 460px; display: block; margin: auto; }
.cv-num { font-family: var(--mono); font-size: 50px; fill: var(--text); }
.cv-unit { font-family: var(--mono); font-size: 18px; fill: var(--accent); letter-spacing: .3em; }
.spin-slow { transform-origin: 200px 200px; animation: spin 22s linear infinite; }
.spin-rev { transform-origin: 200px 200px; animation: spin 16s linear infinite reverse; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Tarjetas de sistema */
.sys-cards .card, .card.sys { border-top: 4px solid var(--c); }
.sys.g { --c: var(--sys-g); } .sys.b { --c: var(--sys-b); } .sys.y { --c: var(--sys-y); }
.sys .chip { color: var(--c); }
.sys h3 { margin-top: 12px; }
.ico { font-size: 34px; margin-bottom: 8px; }
.chip.ok-chip { color: var(--ok); } .chip.warn-chip { color: var(--amber); }

.sources { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.src-ico svg { width: 46px; height: 46px; fill: none; stroke: var(--accent); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; margin-bottom: 10px; }

.split.dia { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); }
.split.dia-r { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); }

/* Diagramas */
.diagram { background: var(--bg-2); border: 1px solid var(--line); border-radius: 18px; padding: clamp(10px, 1.4vw, 22px); }
.diagram svg { width: 100%; height: auto; display: block; max-height: 64vh; }
.diagram.du { background: var(--du-bg); }
.sys-detail h3, .comp-detail h3 { display: flex; align-items: center; gap: 10px; }
.sys-detail dl { margin: 0; display: grid; gap: 10px; }
.sys-detail dt { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--kicker); }
.sys-detail dd { margin: 0; color: var(--text-2); font-size: calc(var(--fs-body) * .85); line-height: 1.45; }
.sys-pick .btn[data-sys="G"][aria-pressed="true"] { background: var(--sys-g); color: #0b1a12; border-color: var(--sys-g); }
.sys-pick .btn[data-sys="B"][aria-pressed="true"] { background: var(--sys-b); color: #07142a; border-color: var(--sys-b); }
.sys-pick .btn[data-sys="Y"][aria-pressed="true"] { background: var(--sys-y); color: #2a2205; border-color: var(--sys-y); }

/* Esquema hidráulico (arquitectura / ECAM) */
.schematic text { font-family: var(--mono); }
.schematic .nm { font-size: 26px; font-weight: 700; letter-spacing: .06em; }
.schematic .pr { font-size: 38px; }
.schematic .lbl:not([font-size]) { font-size: 19px; }
.schematic .lbl { fill: var(--muted); letter-spacing: .04em; }
.schematic .ln { fill: none; stroke-width: 6; stroke-linecap: round; transition: stroke .3s; }
.schematic .ln.flow { stroke-dasharray: 14 12; }
.schematic .ln.flow.on { animation: flow 1s linear infinite; }
@keyframes flow { to { stroke-dashoffset: -26; } }
.schematic .box { fill: var(--du-bg); stroke-width: 3; transition: stroke .3s; }
.schematic .rsv-fill { transition: height .5s, y .5s, fill .3s; }
.schematic .dim { opacity: .18; transition: opacity .3s; }
.schematic g.sys { transition: opacity .3s; }
.mode-system { --on-g: var(--sys-g); --on-b: var(--sys-b); --on-y: var(--sys-y); --off: #6a6e86; --idle: #6a6e86; --nm-g: var(--sys-g); --nm-b: var(--sys-b); --nm-y: var(--sys-y); }
.mode-ecam { --on-g: var(--ecam-ok); --on-b: var(--ecam-ok); --on-y: var(--ecam-ok); --off: var(--ecam-amber); --idle: #5d6275; --nm-g: var(--ecam-white); --nm-b: var(--ecam-white); --nm-y: var(--ecam-white); }
.schematic .ptu-sym { transition: transform .3s; }
.schematic .ptu-run .ptu-arrow { animation: blink .5s steps(2) infinite; }
@keyframes blink { 50% { opacity: .25; } }
.schematic .rat-g { transition: transform .8s cubic-bezier(.2,.7,.2,1), opacity .4s; }
.schematic .rat-blade { transform-box: fill-box; transform-origin: center; }
.schematic .rat-on .rat-blade { animation: spin .35s linear infinite; }
.schematic .hot { cursor: pointer; }

/* Circuito anatómico */
#circuit-svg .part { cursor: pointer; }
#circuit-svg .part .shape { fill: var(--card); stroke: var(--accent-3); stroke-width: 3; transition: fill .2s, stroke .2s; }
#circuit-svg .part:hover .shape, #circuit-svg .part.sel .shape { fill: #2f2a55; stroke: var(--accent); }
#circuit-svg .part text:not([font-size]) { font-size: 19px; }
#circuit-svg .part text { fill: var(--text-2); font-family: var(--font); pointer-events: none; }
#circuit-svg .pipe { fill: none; stroke: var(--sys-g); stroke-width: 6; stroke-dasharray: 14 12; animation: flow 1s linear infinite; }
#circuit-svg .pipe.air { stroke: #a7b3d6; stroke-width: 4; stroke-dasharray: 4 8; }
#circuit-svg .num { font-size: 15px; font-family: var(--mono); fill: var(--accent); }

/* PTU */
.ptu-ctrl { margin-top: 18px; display: grid; gap: 8px; }
.ptu-ctrl label { display: flex; justify-content: space-between; font-size: 15px; color: var(--text-2); }
.ptu-ctrl output { font-family: var(--mono); color: var(--text); }
.rng { width: 100%; accent-color: var(--c); height: 28px; }
.rng.g { --c: var(--sys-g); } .rng.y { --c: var(--sys-y); }
.ptu-status { margin: 8px 0 0; font-weight: 600; font-size: 16px; }
.ptu-status.run { color: var(--sys-y); } .ptu-status.idle { color: var(--muted); }
#ptu-svg text { font-family: var(--mono); }
#ptu-svg .rotor { transform-box: fill-box; transform-origin: center; }
#ptu-svg.running .rotor { animation: spin .5s linear infinite; }
#ptu-svg.running .rotor.rev { animation-direction: reverse; }
#ptu-svg.running .shaft { stroke-dasharray: 10 8; animation: flow .4s linear infinite; }

/* RAT */
.facts { list-style: none; padding: 0; margin: 18px 0 0; display: grid; gap: 10px; }
.facts li { display: grid; grid-template-columns: minmax(130px, .7fr) 1fr; gap: 14px; padding: 12px 16px; background: var(--card); border-radius: 12px; border: 1px solid var(--line); font-size: calc(var(--fs-body) * .82); }
.facts span { color: var(--muted); } .facts b { color: var(--text); font-weight: 600; }
#rat-svg .rat-arm { transform-origin: 300px 120px; transform: rotate(-88deg); transition: transform 1.2s cubic-bezier(.3,.8,.3,1); }
#rat-svg.out .rat-arm { transform: rotate(0); }
#rat-svg .rat-prop { transform-box: fill-box; transform-origin: center; }
#rat-svg:not(.out) .rat-prop { opacity: 0; }
#rat-svg.out .rat-prop { animation: spin .3s linear infinite; }
#rat-svg .wind { opacity: 0; stroke: #9fb2e8; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 30 300; }
#rat-svg.out .wind { opacity: .7; animation: wind 1.1s linear infinite; }
@keyframes wind { from { stroke-dashoffset: 330; } to { stroke-dashoffset: 0; } }
#rat-svg .bus { transition: fill .4s; }

/* Avión (mapa de consumidores) */
.map-split { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
.plane .body { fill: #2a2d40; stroke: #4a4e6a; stroke-width: 2; }
.plane .surf { fill: #4a4f72; stroke: #161826; stroke-width: 1.5; cursor: pointer; transition: fill .25s, opacity .25s; }
.plane .surf:hover { fill: #5b5394; }
.plane .surf.sel { fill: var(--accent); }
.plane .surf.f-G { fill: var(--sys-g); } .plane .surf.f-B { fill: var(--sys-b); } .plane .surf.f-Y { fill: var(--sys-y); }
.plane .surf.fade { opacity: .25; }
.plane .surf.st-ok { fill: #6e66b8; } .plane .surf.st-degraded { fill: var(--ecam-amber); } .plane .surf.st-lost { fill: var(--red); }
.plane text { font-family: var(--font); font-size: 20px; fill: var(--muted); pointer-events: none; }
.extra-consumers .btn { font-size: 13px; padding: 7px 12px; }
.sys-dots { display: inline-flex; gap: 6px; }
.sys-dots .chip { font-size: 12px; }
.chip.g { color: var(--sys-g); } .chip.b { color: var(--sys-b); } .chip.y { color: var(--sys-y); }

/* Matriz */
.matrix-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 16px; }
.matrix { width: 100%; border-collapse: collapse; font-size: calc(var(--fs-body) * .78); }
.matrix th, .matrix td { padding: 9px 16px; border-bottom: 1px solid var(--line); text-align: left; white-space: nowrap; }
.matrix thead th { position: sticky; top: 0; background: var(--bg-2); font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.matrix thead th.g { color: var(--sys-g); } .matrix thead th.b { color: var(--sys-b); } .matrix thead th.y { color: var(--sys-y); }
.matrix td.c { text-align: center; }
.matrix td.c i { display: inline-block; width: 14px; height: 14px; border-radius: 50%; }
.matrix td.c.g i { background: var(--sys-g); } .matrix td.c.b i { background: var(--sys-b); } .matrix td.c.y i { background: var(--sys-y); }
.matrix tbody tr:hover { background: var(--card); }

/* Overhead: ver Panel HYD 40VU (SVG) */
/* Leyenda ECAM */
.legend-list { margin: 0; padding-left: 1.3em; display: grid; gap: 14px; color: var(--text-2); font-size: calc(var(--fs-body) * .85); line-height: 1.45; }
.legend-list b { color: var(--text); }
.amb { color: var(--ecam-amber); font-family: var(--mono); }

/* Fallas dobles */
.dual-head { display: flex; gap: 8px; margin-bottom: 12px; }
.dot { width: 22px; height: 22px; border-radius: 50%; position: relative; display: inline-block; }
.dot.g { background: var(--sys-g); } .dot.b { background: var(--sys-b); } .dot.y { background: var(--sys-y); }
.dot.x { background: #3a3e58; border: 2px solid var(--red); }
.dot.x::after { content: "×"; position: absolute; inset: 0; display: grid; place-items: center; color: var(--red); font-weight: 700; font-size: 16px; line-height: 1; }

/* Simulador */
.sim-slide { --pad-top: 60px; }
.sim-slide h2.title { margin-bottom: 16px; font-size: clamp(26px, 2.6vw, 46px); }
.sim { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(14px, 2vw, 28px); align-items: start; }
.sim-left { display: grid; gap: 14px; }
.sim-left .diagram svg { max-height: 40vh; }

.sim-right { display: grid; gap: 14px; }
.sim-scen .kicker { margin-bottom: 8px; }
.sim-scen .btn { font-size: 13px; padding: 7px 12px; }
.sim-text { margin: 12px 0 0; font-size: calc(var(--fs-body) * .72); color: var(--text-2); min-height: 3em; }
.sim-toggles .btn { font-size: 12px; padding: 6px 10px; font-family: var(--mono); }
.sim-toggles .btn[aria-pressed="false"] { opacity: .6; }
.sim-toggles .btn.leak[aria-pressed="true"] { background: var(--red); border-color: var(--red); }
.sim-status { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.sim-status > div { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; }
.sim-status span { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.sim-status b { font-size: 14px; color: var(--text); font-weight: 600; }
.sim-status b.warn { color: var(--ecam-amber); } .sim-status b.okc { color: var(--ecam-ok); }
.sim-status .btn { font-size: 12px; padding: 4px 8px; }
.sim-plane { background: var(--bg-2); border: 1px solid var(--line); border-radius: 16px; padding: 8px; }
.sim-plane svg { width: 100%; display: block; }
.legend { display: flex; gap: 16px; justify-content: center; font-size: 12px; color: var(--muted); padding: 4px 0 2px; }
.lg { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.lg.ok { background: #6e66b8; } .lg.degraded { background: var(--ecam-amber); } .lg.lost { background: var(--red); }

/* Puntos clave y cierre */
.keys { margin: 0; padding: 0; list-style: none; counter-reset: k; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 40px; }
.keys li { counter-increment: k; position: relative; padding-left: 64px; font-size: var(--fs-body); line-height: 1.45; color: var(--text-2); }
.keys li::before { content: counter(k, decimal-leading-zero); position: absolute; left: 0; top: -2px; font-family: var(--mono); font-size: 30px; color: var(--num); }
.keys b { color: var(--text); }
.close-logo { height: 48px; width: auto; align-self: flex-start; margin-bottom: 28px; }

@media (max-width: 1100px) {
  .sources { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sim { grid-template-columns: minmax(0, 1fr); }
  .sim-left .diagram svg, .sim-plane svg { max-height: none; }
}
@media (max-width: 760px) {
  .split.dia, .split.dia-r { grid-template-columns: minmax(0, 1fr); }
  .slide > .inner.cover { grid-template-columns: minmax(0, 1fr); }
  .cover-art { order: -1; } .cover-art svg { max-width: 200px; }
  .sources { grid-template-columns: minmax(0, 1fr); }
  .keys { grid-template-columns: minmax(0, 1fr); }
  .map-split { grid-template-columns: minmax(0, 1fr); }
  .sim-status { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .facts li { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .diagram svg { max-height: none; }
}

/* Etiqueta flotante sobre las superficies del avión */
.plane-host { position: relative; }
.plane-float { position: absolute; z-index: 5; transform: translate(-50%, calc(-100% - 14px)); pointer-events: none; opacity: 0; transition: opacity .15s; background: #0e0f18; border: 1px solid var(--accent-3); border-radius: 10px; padding: 8px 12px; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; font-size: 14px; color: var(--text); white-space: nowrap; box-shadow: 0 8px 24px rgba(0,0,0,.4); }
.plane-float.on { opacity: 1; }
.plane-float .chip { font-size: 11px; padding: 2px 8px; }
.plane-tip { margin: 6px 4px 2px; font-size: 13px; color: var(--muted); display: flex; flex-wrap: wrap; gap: 8px; align-items: center; min-height: 24px; }
.plane-tip b, .plane-float b { color: var(--text); font-weight: 600; }
.st { font-size: 12px; font-weight: 600; }
.st.st-ok { color: #b5abfc; } .st.st-degraded { color: var(--ecam-amber); } .st.st-lost { color: var(--red); }

/* Matrices y siglas */
.matrices { align-items: start; }
.matrices .matrix th, .matrices .matrix td { padding: 7px 14px; }
.glossary { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 40px; }
.glossary div { display: grid; grid-template-columns: 150px 1fr; gap: 16px; padding: 7px 0; border-bottom: 1px solid var(--line); }
.glossary dt { font-family: var(--mono); color: var(--accent); font-weight: 600; font-size: calc(var(--fs-body) * .8); }
.glossary dd { margin: 0; color: var(--text-2); font-size: calc(var(--fs-body) * .7); line-height: 1.45; }
@media (max-width: 760px) {
  .glossary { grid-template-columns: minmax(0, 1fr); }
  .glossary div { grid-template-columns: 110px 1fr; }
  .plane-float { white-space: normal; max-width: 220px; }
}
@media (min-width: 1300px) {
  .glossary { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .glossary div { grid-template-columns: 120px 1fr; }
}

/* Agenda de 10 secciones */
@media (min-width: 1101px) { .agenda { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

/* Tabla de fallas dobles (FCTM) */
.dual-table th { white-space: nowrap; }
.dual-table th .dot { width: 14px; height: 14px; vertical-align: -2px; margin-right: 2px; }
.dual-table th .dot.x::after { font-size: 11px; }
.dual-table td { white-space: normal; padding: 6px 14px; }
.dual-table td:first-child { color: var(--text); white-space: nowrap; }
.dual-table td.no { color: var(--red); }
.dual-table td.warn { color: var(--ecam-amber); }
.dual-table tr.grp td { background: var(--bg-2); color: var(--kicker); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; padding: 6px 14px; }
.footnotes { margin: 14px 0 0; padding-left: 1.3em; display: grid; gap: 6px; color: var(--muted); font-size: calc(var(--fs-body) * .7); line-height: 1.45; }

/* Leyes de control */
.law-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; position: relative; }
.law { border-top: 4px solid var(--c); }
.law .chip { color: var(--c); font-family: var(--mono); }
.law h3 { margin-top: 12px; }
.law.l1 { --c: var(--ecam-ok); } .law.l2 { --c: var(--ecam-amber); } .law.l3 { --c: #ff7a59; } .law.l4 { --c: var(--red); }
.small-card h3 { font-size: calc(var(--fs-body) * .95); margin-bottom: 4px; }
.small-card p { margin: 0; }
#law-svg text { font-family: var(--mono); }

/* Procedimientos */
.ecam-list { list-style: none; padding: 0; margin: 8px 0 18px; display: grid; gap: 8px; font-family: var(--mono); font-size: calc(var(--fs-body) * .82); }
.ecam-list li { background: var(--du-bg); border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px; }
.ecam-action { display: inline-flex; align-items: center; gap: 10px; background: var(--du-bg); border: 1px solid var(--line); border-radius: 10px; padding: 12px 18px; font-family: var(--mono); font-size: calc(var(--fs-body) * .95); color: var(--ecam-cyan); }
.ecam-action i { width: 120px; border-bottom: 2px dotted var(--ecam-cyan); }
.ecam-action b { color: var(--ecam-cyan); }

/* Panel HYD 40VU (SVG) */
.ovhd-svg { width: 100%; height: auto; display: block; border-radius: 10px; }
.ovhd-svg text { font-family: "Arial Narrow", Arial, var(--font); }
.ovhd-svg .pbg { cursor: pointer; }
.ovhd-svg .pbg:hover .pb-face { stroke: #b5abfc; }
.ovhd-svg .pbg.sel .pb-face { stroke: var(--accent); stroke-width: 3; }
.ovhd-svg .lt { font-weight: 700; font-size: 13px; letter-spacing: .04em; fill: #3a3d44; }
.ovhd-svg .lt.lit.amber { fill: var(--ecam-amber); filter: drop-shadow(0 0 4px rgba(255,162,58,.9)); }
.ovhd-svg .lt.lit.white { fill: #fff; filter: drop-shadow(0 0 4px rgba(255,255,255,.8)); }
.ovhd-svg .lt.lit.cyan { fill: var(--ecam-cyan); filter: drop-shadow(0 0 4px rgba(79,214,255,.9)); }
.ovhd-svg .guard-cover { transition: transform .35s; transform-box: fill-box; transform-origin: top; }
.ovhd-svg .pbg.open .guard-cover { transform: scaleY(.18); }
@media (max-width: 760px) { .law-steps { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 1100px) and (min-width: 761px) { .law-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

#panel-info-host .ovhd-svg { max-width: 1100px; margin: 0 auto; }

/* Columnas G/B/Y: mismo ancho y centradas en encabezado y celdas */
.matrices .matrix th:not(:first-child), .matrices .matrix td.c { width: 64px; text-align: center; padding-left: 0; padding-right: 0; }

/* Esquema real con puntos */
.ref-fig { margin: 0; }
.ref-wrap { position: relative; border-radius: 14px; overflow: hidden; border: 1px solid var(--line); background: #fff; }
.ref-wrap img { display: block; width: 100%; height: auto; cursor: zoom-in; }
.hotspots { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.hotspots .hs { pointer-events: auto; cursor: pointer; }
.hotspots .hs circle { fill: #5a3fa0; stroke: #fff; stroke-width: 3; opacity: .92; transition: fill .2s, r .2s; }
.hotspots .hs text { fill: #fff; font: 700 16px var(--font); pointer-events: none; }
.hotspots .hs:hover circle, .hotspots .hs.sel circle { fill: #ff7a59; }
.hotspots .hs.sel circle { r: 20; }
.ref-fig figcaption { margin-top: 8px; }
.ref-img { display: block; width: 100%; height: auto; border-radius: 10px; cursor: zoom-in; }
.ref-ecam { display: flex; flex-direction: column; align-items: center; }
.ref-ecam .ref-img { max-width: 520px; image-rendering: auto; }

/* Pestañas Interactivo / Real */
.tablist { display: inline-flex; gap: 4px; padding: 4px; margin-bottom: 12px; background: var(--card); border: 1px solid var(--line); border-radius: 999px; }
.tablist button { border: 0; background: none; cursor: pointer; padding: 7px 16px; border-radius: 999px; font-size: 14px; color: var(--muted); }
.tablist button[aria-selected="true"] { background: var(--accent-3); color: #fff; }

/* Simulador: el avión ocupa todo el ancho para tocar cómodo las superficies */
.sim .sim-plane { grid-column: 1 / -1; }
.sim .sim-plane svg { max-height: 72vh; }

/* Bibliografía */
.biblio { margin: 0; padding-left: 1.4em; display: grid; gap: 12px; color: var(--text-2); font-size: calc(var(--fs-body) * .82); line-height: 1.45; max-width: 1100px; }
.biblio i { color: var(--text); }

/* Mapa: con relleno de sistema, hover y selección se marcan con el borde */
#map-svg .surf:hover { stroke: #fff; stroke-width: 2.5; }
#map-svg .surf.sel { stroke: #fff; stroke-width: 3.5; }

/* Panel: sin el contorno de foco del navegador; el foco por teclado se marca en la cara del botón */
.ovhd-svg .pbg:focus { outline: none; }
.ovhd-svg .pbg:focus-visible .pb-face { stroke: var(--accent); stroke-width: 3; }