/* ==========================================================================
   Herramientas web en estilo Atlas: CabraSpace Web, AutoGHS y PixelMath-teca.
   Se carga después de atlas/atlas.css (lo enlaza tools/sync_nav.py) y SOLO cambia el aspecto:
   ningún id, ninguna clase que lea el JavaScript, ningún tamaño que use el lienzo.
   ========================================================================== */

/* ---------- tarjetas (el filete dorado interior del Atlas) ---------- */
.simulator-card, .library-card, .piw-card {
  background: var(--s1) !important; border: 1px solid var(--line) !important; border-radius: 22px !important;
  box-shadow: 0 30px 70px -40px rgba(0,0,0,.9) !important;
}
/* la del simulador es sticky (se queda a la vista al bajar por la biblioteca): no pisarla con relative,
   que dejaba su top:100px como desplazamiento fijo */
.library-card { position: relative; }
section.simulator-card { position: relative; }   /* la de AutoGHS no es sticky: sin esto su filete se iba al contenedor */
@media (max-width: 1199px) { .simulator-card { position: relative !important; top: 0 !important; } }
.simulator-card::after, .library-card::after, .piw-card::after {
  content: ''; position: absolute; inset: 7px; border: 1px solid rgba(229,181,63,.14); border-radius: 16px; pointer-events: none;
}
.piw-container { --piw-panel: var(--s1); --piw-panel-border: var(--line); --piw-radius: 22px; }

/* ---------- cajas interiores oscuras ---------- */
.canvas-wrapper, .pm-console, .detail-code-box, .file-upload-zone, .detail-empty-state,
.piw-console, .piw-subcard, .piw-action-card, .piw-channel-row {
  background: #0d0a07 !important; border-color: var(--line) !important; border-radius: 14px !important;
}
.file-upload-zone { border-style: dashed !important; }
.file-upload-zone:hover, .piw-action-card:hover { border-color: rgba(229,181,63,.45) !important; }
.library-search-wrapper input, .piw-select {
  background: #0d0a07 !important; border: 1px solid var(--line) !important; border-radius: 999px !important;
  font-family: var(--a-sans) !important; color: var(--tx) !important;
}
.library-search-wrapper input:focus, .piw-select:focus { border-color: rgba(229,181,63,.55) !important; }
.piw-select { border-radius: 12px !important; }

/* ---------- rótulos: versalitas Bodoni, no mayúsculas de máquina ---------- */
.console-header, .inputs-title, .detail-code-title, .category-group-header, .piw-subcard-header, .piw-eyebrow,
.detail-category-badge, .piw-slots-label, .piw-readout-lbl {
  font-family: var(--a-disp) !important; font-weight: 500 !important; letter-spacing: .2em !important;
  font-size: 11px !important; color: var(--t3) !important;
}
.console-header, .detail-code-title, .piw-subcard-header { border-color: var(--line) !important; }
.detail-category-badge { border-radius: 999px !important; border-color: rgba(229,181,63,.4) !important; color: var(--gold2) !important; }

/* títulos de sección de CabraSpace Web: Bodoni, sin mayúsculas */
.piw-section-title {
  font-family: var(--a-disp) !important; font-size: 1.12rem !important; font-weight: 500 !important;
  text-transform: none !important; letter-spacing: -.005em !important; color: var(--tx) !important;
}
.piw-section { border-bottom: 1px dotted rgba(199,191,169,.3) !important; }
.control-title, .piw-label { color: var(--tx); }
.control-val, .piw-value { font-family: var(--a-mono) !important; color: var(--gold2) !important; font-weight: 500 !important; }

/* ---------- botones: píldoras, sin mayúsculas forzadas ---------- */
.btn-action, .btn-primary-action, .piw-btn, .btn-reset-inputs {
  border-radius: 999px !important; text-transform: none !important; letter-spacing: .01em !important;
  font-family: var(--a-sans) !important; border-color: var(--line) !important;
  transition: background-color .6s var(--ease), border-color .6s var(--ease), color .6s var(--ease) !important;
}
.btn-action:hover:not(:disabled), .piw-btn:hover:not(:disabled), .btn-reset-inputs:hover {
  border-color: rgba(229,181,63,.55) !important; color: var(--tx) !important;
}
.btn-primary-action, .piw-btn.primary {
  border-color: rgba(229,181,63,.7) !important; color: var(--gold2) !important; background: rgba(229,181,63,.06) !important;
}
.btn-primary-action:hover:not(:disabled), .piw-btn.primary:hover:not(:disabled) {
  background: var(--gold) !important; color: var(--ink) !important; border-color: var(--gold) !important;
}
.btn-reset-inputs { border-color: rgba(229,181,63,.35) !important; color: var(--gold2) !important; background: transparent !important; cursor: pointer; }
.piw-tool-btn, .piw-slot-btn, .piw-segment-btn { border-radius: 999px !important; }
/* los botones de acción pueden partir el texto en dos líneas: redondeo moderado, no píldora */
.btn-action, .btn-primary-action { border-radius: 16px !important; }
.piw-tabs-nav { border-radius: 14px !important; border-color: var(--line) !important; background: #0d0a07 !important; }
.piw-tab-btn { font-family: var(--a-sans) !important; }  /* su forma de flecha (clip-path) se respeta */

/* estados que marca el JavaScript: se respetan encima de las cajas oscuras */
.piw-channel-row.loaded { border-color: var(--gold) !important; background: rgba(229,181,63,.07) !important; }
.piw-channel-row:hover { border-color: rgba(229,181,63,.4) !important; }
.piw-action-card.active-cc { border-color: var(--gold) !important; background: rgba(229,181,63,.06) !important; }
.piw-action-card.disabled:hover { border-color: var(--line) !important; }

/* ---------- listas de la biblioteca de fórmulas ---------- */
.formula-list-item { border-radius: 12px !important; background: #0d0a07 !important; border-color: var(--line) !important; }
.formula-list-item:hover { border-color: rgba(229,181,63,.4) !important; }
.formula-list-item.active { background: rgba(229,181,63,.07) !important; border-color: var(--gold) !important; }
.pm-console, .piw-console, .detail-code-box { font-family: var(--a-mono) !important; }

/* ---------- CabraSpace Web: rótulos en una línea ---------- */
.piw-slots-label { letter-spacing: .12em !important; }
@media (min-width: 1101px) { .piw-slots-label { white-space: nowrap; } }
.piw-channel-name { font-size: .78rem; line-height: 1.25; min-width: 0; margin-left: 6px !important; }
.piw-channel-file { flex-shrink: 1; min-width: 0; max-width: 62px !important; font-size: .64rem !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.piw-channel-dot, .piw-drop-icon { flex-shrink: 0; }

/* ---------- cabecera Atlas de la PixelMath-teca (misma lámina que Astro Forecast) ---------- */
.tl-top { padding: calc(var(--ah) + clamp(32px, 5vw, 72px)) var(--gx) clamp(24px, 3vw, 40px); display: flex; flex-direction: column; align-items: center; text-align: center; gap: 20px; }
.tl-top .ret { background-position: center top; opacity: .8; }
.tl-top .glow { background: radial-gradient(ellipse 50% 80% at 50% 30%, var(--glow), transparent 70%); }
.tl-top > :not(.ret):not(.glow):not(.grain):not(.tl-art) { position: relative; }
.tl-top h1 { font-family: var(--a-disp); font-size: clamp(44px, 6vw, 84px); font-weight: 400; line-height: 1; letter-spacing: -0.02em; color: var(--tx); }
.tl-top p { max-width: 640px; font-size: 18px; line-height: 1.7; color: var(--t2); }
.tl-top p strong { color: var(--tx); font-weight: 500; }
/* lámina de cada herramienta (tools/pizarra.py, tools/histograma.py): máscara pintada con el oro;
   en modo noche, roja */
.tl-art { position: absolute; left: max(8px, calc(50% - 704px)); bottom: 0; width: clamp(200px, 18vw, 265px); aspect-ratio: 480 / 420; pointer-events: none; opacity: .27; background: var(--gold); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center bottom; mask-position: center bottom; -webkit-mask-size: contain; mask-size: contain; }
.tl-art.art-pizarra { -webkit-mask-image: url(img/pizarra.svg); mask-image: url(img/pizarra.svg); }
.tl-art.art-histograma { -webkit-mask-image: url(img/histograma.svg); mask-image: url(img/histograma.svg); width: clamp(170px, 15vw, 225px); }
.tl-art.art-placa { -webkit-mask-image: url(img/placa.svg); mask-image: url(img/placa.svg); width: 108px; }
.tl-art.art-factorias { -webkit-mask-image: url(img/factorias.svg); mask-image: url(img/factorias.svg); }
@media (max-width: 1100px) { .tl-art { width: 150px; left: 6px; opacity: .24; } }
@media (max-width: 700px) { .tl-art { width: min(76%, 290px); left: 50%; transform: translateX(-50%); opacity: .08; } }
@media (max-width: 1100px) { .tl-art.art-histograma { width: 130px; } }
@media (max-width: 700px) { .tl-art.art-histograma { width: min(64%, 250px); } }
.tl-top + main .pm-grid { margin-top: 12px; }
/* la biblioteca (lista 290 px + detalle) no cabía en su columna y se salía 90 px del contenedor */
.tl-top + main.container:has(aside.simulator-card) { max-width: 1320px; }   /* solo PixelMath-teca */
.tl-top h1 .nw { white-space: nowrap; }

/* ---------- CabraSpace Web: franja compacta. El cockpit ocupa la pantalla sin scroll, así que la
   franja mide 88 px bajo la barra y la rejilla se encoge exactamente eso (+1 px del margen) ---------- */
.tl-top.tl-compact { height: calc(var(--ah) + 88px); box-sizing: border-box; padding: calc(var(--ah) + 10px) var(--gx) 10px; gap: 6px; justify-content: center; }
.tl-compact h1 { font-size: clamp(30px, 3vw, 44px); }
.tl-top + main.piw-container { padding-top: 6px; min-height: calc(100vh - 217px); }
@media (min-width: 768px) { .tl-top + main .piw-grid { height: calc(100vh - 207px); } }
@media (max-width: 1100px) { .tl-art.art-placa { width: 92px; } }
@media (max-width: 700px) { .tl-art.art-placa { width: 120px; opacity: .12; } }
@media (max-width: 767px) { .tl-top.tl-compact { height: auto; } }   /* en móvil el cockpit ya hace scroll */

/* ---------- Contaminación: los dos mapas externos, principal y alternativa ---------- */
.cm-maps { display: grid; grid-template-columns: 1.25fr 1fr; gap: 24px; max-width: 980px; margin: 0 auto; padding: 12px var(--gx) clamp(64px, 8vw, 110px); box-sizing: content-box; }
.cm-maps .card { padding: 36px 34px 34px; gap: 14px; }
.cm-maps h2 { font-family: var(--a-disp); font-weight: 400; font-size: clamp(30px, 3vw, 40px); line-height: 1.05; letter-spacing: -0.01em; }
.cm-maps p { color: var(--t2); font-size: 16px; line-height: 1.7; }
.cm-maps .cm-go { margin-top: auto; padding-top: 10px; }
.cm-note { grid-column: 1 / -1; text-align: center; font-family: var(--a-disp); font-style: italic; color: var(--t3); font-size: 15px; }
@media (max-width: 820px) { .cm-maps { grid-template-columns: 1fr; } .cm-maps .card { padding: 28px 24px 26px; } }