/* Paez440Pro · Academia como RACK · v1 · 8-oct-2026
   Orden de Víctor: "La Academia es un rack". Reemplaza al estilo plano de academy-hub-v1.css (que queda huérfano).
   Se carga DESPUÉS de la pila de rack (rack-shell, hardware-blue, official-rack-art-v2, tools-*, single-scroll-tool-v3).
   Páginas: academy.html · academy-cursos.html · academy-tips.html · academy-tutoriales.html · academy-manuales.html
   Ganchos de QA visual:
     .rackRail .rackUnit.acU-audio|video|luces|plat  → título de la ranura en el color del dominio
     .acBack (barra "← Academia")  .acView (panel con scroll)  .acWin[data-area] (ventana 9-slice)  .acRow (unidad 1U de lista)
     .acRow[aria-current=true] (canal activo en el TV)  .acBtn (botón Package 07 con la etiqueta DEBAJO)  .acChip  .acEmpty  .acNote
   Colores: Audio azul #2aa4ff · Video verde #32d17d · Luces magenta #e30098 · Plataforma amarillo vintage #f2c94c · RiderPlot blanco. Orden SIEMPRE Audio → Video → Luces. */

:root {
  --ac-audio: #2aa4ff; --ac-video: #32d17d; --ac-luces: #e30098; --ac-plat: #f2c94c; --ac-white: #e8e4db;
  --ac-ink: #C9BBA6; --ac-sub: #B8AA95; --ac-joint: #071018; --ac-line: #26353b;
  --ac-font: "Arial Narrow", "Roboto Condensed", "Helvetica Neue", Arial, sans-serif;
}
.acRackPage [hidden] { display: none !important; }
.acHidden { display: none !important; }
body.acRackPage { --rack-accent: #43b8ff; --rack-accent-rgb: 67,184,255; }

/* ---------- ranuras del rack: el título toma el color del dominio ---------- */
body.rackApp .rackRail .rackUnit.acU-audio .rackUnitTitle { color: var(--ac-audio) !important; text-shadow: 0 0 10px rgba(42,164,255,.35), 0 2px 3px #000; }
body.rackApp .rackRail .rackUnit.acU-video .rackUnitTitle { color: var(--ac-video) !important; text-shadow: 0 0 10px rgba(50,209,125,.35), 0 2px 3px #000; }
body.rackApp .rackRail .rackUnit.acU-luces .rackUnitTitle { color: var(--ac-luces) !important; text-shadow: 0 0 10px rgba(227,0,152,.4), 0 2px 3px #000; }
body.rackApp .rackRail .rackUnit.acU-plat  .rackUnitTitle { color: var(--ac-plat)  !important; text-shadow: 0 0 10px rgba(242,201,76,.3), 0 2px 3px #000; }
body.acRackPage .rackRail .rackUnit > span { display: block; min-width: 0; }   /* título y subtítulo apilados (red de seguridad si rack-shell.css cambia) */
body.acRackPage .rackRail .rackUnitTitle, body.acRackPage .rackRail .rackUnitSub { display: block; }
body.rackApp .rackRail button.rackUnit { cursor: pointer; font-family: var(--ac-font); text-align: left; }
body.rackApp .rackRail button.rackUnit:focus-visible { outline: 3px solid #f2c94c; outline-offset: -5px; }

/* ---------- barra superior "← Academia" ---------- */
.acBack { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; width: 100%; padding: 8px 14px; background: var(--ac-joint); border-bottom: 1px solid #0b1a24; font-family: var(--ac-font); }
.acBackBtn { display: inline-flex; align-items: center; gap: 7px; min-height: 34px; padding: 0 14px; border: 1px solid #2d4150; border-radius: 3px; text-decoration: none; cursor: pointer;
  background: linear-gradient(#1c2a35, #0f1820); color: var(--ac-ink); font: 800 12px/1 var(--ac-font); letter-spacing: .1em; text-transform: uppercase; box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 2px 3px rgba(0,0,0,.5); }
.acBackBtn::before { content: "←"; font-size: 15px; line-height: 1; }
.acBackBtn:hover { border-color: #5a7b92; color: #eee6d6; }
.acBackBtn:active { transform: translateY(1px); }
.acBackBtn:focus-visible { outline: 3px solid #f2c94c; outline-offset: 2px; }
.acBackTag { margin-left: auto; font: 900 12px/1 var(--ac-font); letter-spacing: .14em; color: var(--ac, var(--ac-ink)); text-transform: uppercase; text-shadow: 0 0 10px var(--ac-soft, transparent); }

/* ---------- panel de contenido (arte SCROLL-PANEL de single-scroll-tool-v3.css) ---------- */
.acView.singleScrollFrame { min-height: 0; padding-top: 5.8%; }
.acViewBody { display: grid; gap: 18px; align-content: start; color: var(--ac-ink); font-family: var(--ac-font); }
.acTitle { display: flex; align-items: center; gap: 12px; margin: 0; font: 900 clamp(20px, 2.8vw, 32px)/1 var(--ac-font); letter-spacing: .06em; text-transform: uppercase; color: var(--ac, var(--ac-ink)); text-shadow: 0 0 12px var(--ac-soft, transparent), 0 2px 3px #000; }
.acTitle small { font: 800 12px/1.2 var(--ac-font); letter-spacing: .1em; color: var(--ac-sub); text-shadow: none; }
.acLead { margin: 0; max-width: 78ch; font: 700 15px/1.5 var(--ac-font); color: var(--ac-ink); }
.acLead b { color: #eee6d6; }
.acNote { display: flex; gap: 10px; align-items: flex-start; margin: 0; padding: 10px 14px; border: 1px dashed #8a6d2a; border-radius: 4px; background: rgba(242,201,76,.06); color: #e8d9a8; font: 700 13px/1.4 var(--ac-font); }
.acNote::before { content: "!"; flex: none; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: #f2c94c; color: #1a1400; font: 900 13px/1 var(--ac-font); }
.acPane { display: grid; gap: 18px; }

/* ---------- ventana (marco de pantalla 9-slice, igual que .innerBox / .scopeDeck) ---------- */
.acWin { --ac: var(--ac-ink); --ac-soft: rgba(201,187,166,.18); position: relative; margin: 0; padding: 14px; border: 22px solid transparent; background: #070e14; color: var(--ac-ink);
  border-image: url("/shared/design-system/rack/v1/assets/ventana/VENTANA-PANTALLA-9SLICE.png") 56 fill / 22px round; box-shadow: inset 0 0 40px var(--ac-soft); }
.acWin[data-area="audio"] { --ac: var(--ac-audio); --ac-soft: rgba(42,164,255,.2); }
.acWin[data-area="video"] { --ac: var(--ac-video); --ac-soft: rgba(50,209,125,.2); }
.acWin[data-area="luces"] { --ac: var(--ac-luces); --ac-soft: rgba(227,0,152,.22); }
.acWin[data-area="plataforma"] { --ac: var(--ac-plat); --ac-soft: rgba(242,201,76,.18); }
.acWin[data-area="white"] { --ac: var(--ac-white); --ac-soft: rgba(232,228,219,.16); }
.acWinHead { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; margin: 0 0 12px; padding: 0 0 8px; border-bottom: 1px solid var(--ac-line); }
.acWinHead h3 { margin: 0; font: 900 clamp(15px, 1.9vw, 20px)/1.1 var(--ac-font); letter-spacing: .06em; text-transform: uppercase; color: var(--ac); text-shadow: 0 0 10px var(--ac-soft); }
.acWinHead small { margin-left: auto; font: 800 11px/1.2 var(--ac-font); letter-spacing: .1em; color: var(--ac-sub); text-transform: uppercase; }
.acWinSub { margin: 12px 0 6px; padding: 0; font: 900 12px/1.2 var(--ac-font); letter-spacing: .14em; text-transform: uppercase; color: var(--ac-sub); }
.acWinSub:first-child { margin-top: 0; }
.acRows { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }

/* ---------- unidad 1U de lista (fila de rack) ---------- */
.acRow { --ac: var(--ac-ink); --ac-soft: rgba(201,187,166,.18); position: relative; display: flex; align-items: center; gap: 12px; min-height: 58px; padding: 8px 30px; border: 1px solid #04070a; border-radius: 3px; color: var(--ac-ink);
  background: linear-gradient(180deg, #1b2733 0%, #111b24 55%, #0b1219 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,.09), inset 0 -1px 0 rgba(0,0,0,.6), 0 2px 4px rgba(0,0,0,.45); font-family: var(--ac-font); }
.acRow::before, .acRow::after { content: ""; position: absolute; top: 50%; width: 10px; height: 10px; margin-top: -5px; border-radius: 50%;
  background: linear-gradient(135deg, transparent 44%, rgba(0,0,0,.65) 44% 56%, transparent 56%), radial-gradient(circle at 35% 30%, #d9d3c6, #6a665d 60%, #2b2823); box-shadow: inset 0 0 0 1px rgba(0,0,0,.55); }
.acRow::before { left: 10px; } .acRow::after { right: 10px; }
.acRow[data-area="audio"] { --ac: var(--ac-audio); --ac-soft: rgba(42,164,255,.25); }
.acRow[data-area="video"] { --ac: var(--ac-video); --ac-soft: rgba(50,209,125,.25); }
.acRow[data-area="luces"] { --ac: var(--ac-luces); --ac-soft: rgba(227,0,152,.28); }
.acRow[data-area="plataforma"] { --ac: var(--ac-plat); --ac-soft: rgba(242,201,76,.22); }
.acRow[data-area="white"] { --ac: var(--ac-white); --ac-soft: rgba(232,228,219,.2); }
.acLamp { flex: none; width: 11px; height: 11px; border-radius: 50%; background: color-mix(in srgb, var(--ac) 38%, #0a0f14); box-shadow: inset 0 1px 2px rgba(0,0,0,.7), 0 0 0 1px #000; }
.acRow[aria-current="true"] { border-color: var(--ac); box-shadow: inset 0 0 0 1px var(--ac), inset 0 0 22px var(--ac-soft), 0 2px 4px rgba(0,0,0,.45); }
.acRow[aria-current="true"] .acLamp, .acRow.is-lit .acLamp { background: var(--ac); box-shadow: 0 0 8px var(--ac), 0 0 0 1px #000; }
.acRowMain { flex: 1 1 auto; min-width: 0; display: grid; gap: 3px; margin: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; text-decoration: none; }
button.acRowMain { cursor: pointer; }
button.acRowMain:focus-visible { outline: 3px solid #f2c94c; outline-offset: 4px; border-radius: 3px; }
.acRowTitle { font: 800 clamp(14px, 1.6vw, 17px)/1.2 var(--ac-font); color: #eee6d6; letter-spacing: .01em; overflow-wrap: anywhere; }
.acRowSub { font: 700 12px/1.3 var(--ac-font); color: var(--ac-sub); overflow-wrap: anywhere; }
.acChips { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; justify-content: flex-end; }
.acChip { display: inline-block; padding: 2px 8px; border: 1px solid #3b4a56; border-radius: 99px; background: rgba(255,255,255,.03); color: var(--ac-sub); font: 800 10px/1.5 var(--ac-font); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }
.acChip.is-ok { border-color: #2f9a64; color: #7fd9a9; }
.acChip.is-warn { border-color: #a8832b; color: #f2c94c; }
.acChip.is-info { border-color: #2f6f9f; color: #7cc3f2; }
.acChip.is-price { border-color: #6c6350; color: #eee6d6; }
.acChip.is-white { border-color: #8d897f; color: var(--ac-white); }

/* ---------- botón Package 07 con la etiqueta DEBAJO (regla R4) ---------- */
.acBtn { flex: none; display: inline-flex; flex-direction: column; align-items: center; gap: 4px; min-width: 64px; padding: 2px 4px; border: 0; background: none; cursor: pointer; text-decoration: none;
  color: var(--p440-label-color, #C9BBA6); font: var(--p440-label-font, 800 11px/1.15 var(--ac-font)); letter-spacing: var(--p440-label-track, .06em); text-transform: uppercase; text-align: center; }
.acBtn i { display: block; width: 36px; aspect-ratio: 1; background: url("/assets/ui-controls/v2/pkg07-gray.webp") center top / 100% 200% no-repeat; filter: drop-shadow(0 2px 2px #000b); }
.acBtn.is-go i { background-image: url("/assets/ui-controls/v2/pkg07-green.webp"); }
.acBtn:hover i { background-position: center bottom; }
.acBtn:active i { transform: translateY(1px); }
.acBtn:focus-visible { outline: 3px solid #f2c94c; outline-offset: 2px; border-radius: 4px; }
.acBtn[disabled], .acBtn[aria-disabled="true"] { opacity: .45; pointer-events: none; }

/* ---------- estados vacíos ---------- */
.acEmpty { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border: 1px dashed #3b4a56; border-radius: 4px; background: rgba(255,255,255,.02); color: var(--ac-sub); font: 700 14px/1.4 var(--ac-font); }
.acEmpty b { display: block; margin-bottom: 2px; color: #eee6d6; font: 900 13px/1.2 var(--ac-font); letter-spacing: .14em; text-transform: uppercase; }
.acEmpty .acLamp { background: #3a2f10; }
.acLoading { padding: 14px; color: var(--ac-sub); font: 700 13px/1.3 var(--ac-font); letter-spacing: .08em; text-transform: uppercase; }

/* ---------- escenario del televisor ---------- */
.acStage { --ac: var(--ac-ink); display: grid; gap: 10px; padding: 6px 0 2px; }
.acStage[data-area="audio"] { --ac: var(--ac-audio); } .acStage[data-area="video"] { --ac: var(--ac-video); } .acStage[data-area="luces"] { --ac: var(--ac-luces); }
.acStageCap { margin: 0; text-align: center; font: 800 12px/1.3 var(--ac-font); letter-spacing: .12em; text-transform: uppercase; color: var(--ac-sub); }
.acStageCap b { color: var(--ac); }

/* ---------- formularios (Netlify) ---------- */
.acForm { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 14px; }
.acForm label { display: grid; gap: 4px; font: 800 12px/1.2 var(--ac-font); letter-spacing: .08em; text-transform: uppercase; color: var(--ac-sub); }
.acForm .full, .acForm .acFormGo { grid-column: 1 / -1; }
.acForm input, .acForm select, .acForm textarea { width: 100%; min-height: 40px; padding: 8px 10px; border: 1px solid #2d4150; border-radius: 3px; background: #0a141c; color: #eee6d6; font: 700 15px/1.3 var(--ac-font); letter-spacing: .01em; text-transform: none; }
.acForm textarea { min-height: 84px; resize: vertical; }
.acForm input:focus-visible, .acForm select:focus-visible, .acForm textarea:focus-visible { outline: 3px solid #f2c94c; outline-offset: 1px; }
.acFormGo { display: flex; justify-content: flex-end; }

/* ---------- ancho angosto ---------- */
@media (max-width: 760px) {
  .acBack { padding: 6px 10px; }
  .acWin { padding: 8px; border-width: 12px; border-image-width: 12px; }
  .acRow { flex-wrap: wrap; padding: 8px 22px; gap: 8px; }
  .acRow::before { left: 6px; } .acRow::after { right: 6px; }
  .acRowMain { flex: 1 1 120px; }
  .acChips { justify-content: flex-start; flex-basis: 100%; order: 3; }
  .acForm { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .acBackBtn:active, .acBtn:active i { transform: none; } }

/* ── botón ABRIR de cada ranura (mismo gesto que Tools440Pro: botón gris Package 07 con el nombre DEBAJO) — 8-oct-2026.
   rack-shell.css usa ::before/::after de .rackUnit para su brillo; por eso van con !important (probado contra el sitio real). ── */
body.acRackPage .rackRail button.rackUnit { position: relative; }
body.acRackPage .rackRail button.rackUnit::before {
  content: "" !important; display: block !important; position: absolute !important; inset: auto !important;
  right: 9.5% !important; top: 50% !important; width: 4.4% !important; min-width: 30px !important; height: auto !important; aspect-ratio: 1 !important;
  transform: translateY(-68%) !important; pointer-events: none !important; opacity: 1 !important; border: 0 !important; box-shadow: none !important;
  background: url("/assets/official/controls/button-package-07-gray-state-001.png") center/contain no-repeat !important;
  filter: drop-shadow(0 3px 3px rgba(0,0,0,.7)) !important;
}
body.acRackPage .rackRail button.rackUnit::after {
  content: "ABRIR" !important; display: block !important; position: absolute !important; inset: auto !important;
  right: 9.5% !important; top: 50% !important; width: 4.4% !important; min-width: 30px !important; margin-top: 2.6% !important;
  text-align: center !important; pointer-events: none !important; opacity: 1 !important; background: none !important;
  color: var(--p440-label-color, #e8e1cf) !important; letter-spacing: .06em !important; text-transform: uppercase !important; text-shadow: 0 1px 2px #000 !important;
  font: 800 clamp(7px, .85vw, 10px)/1 "Arial Narrow", Arial, sans-serif !important;
}
html[lang="en"] body.acRackPage .rackRail button.rackUnit::after { content: "OPEN" !important; }
body.acRackPage .rackRail button.rackUnit:hover::before, body.acRackPage .rackRail button.rackUnit:focus-visible::before { filter: drop-shadow(0 3px 3px rgba(0,0,0,.7)) brightness(1.18) !important; }
body.acRackPage .rackRail button.rackUnit:active::before { transform: translateY(-67%) !important; }