/* ═══════════════════════════════════════════════════════════
   HERRAMIENTAS — Modal
   Dashboard técnico: overlay, panel, terminal, scripts.
   Archivo: bridge-child/sections/herramientas/css/modal.css
═══════════════════════════════════════════════════════════ */

/* ─── Overlay ────────────────────────────────────────────── */
.ht-modal {
  position: fixed !important;
  inset: 0 !important;
  z-index: 99999 !important;
  pointer-events: none !important;
  opacity: 0 !important;
  transition: opacity 0.25s ease !important;
}
.ht-modal--open {
  pointer-events: all !important;
  opacity: 1 !important;
}
.ht-modal__backdrop {
  position: absolute !important;
  inset: 0 !important;
  background: rgba(0,0,0,0.88) !important;
  backdrop-filter: blur(6px) !important;
}

/* ─── Panel principal ────────────────────────────────────── */
.ht-modal__panel {
  position: absolute !important;
  top: 50% !important; left: 50% !important;
  z-index: 1 !important;
  width: 90vw !important;
  max-width: 1080px !important;
  max-height: 85vh !important;
  background: #060a12 !important;
  border: 1px solid rgba(0,211,243,0.25) !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  transform: translate(-50%, calc(-50% + 24px)) scale(0.98) !important;
  transition: transform 0.32s cubic-bezier(0.22,1,0.36,1) !important;
}
.ht-modal--open .ht-modal__panel {
  transform: translate(-50%, -50%) scale(1) !important;
}

/* ─── Esquinas decorativas ───────────────────────────────── */
.ht-corner { position: absolute !important; width: 20px !important; height: 20px !important; border: 1px solid rgba(0,211,243,0.60) !important; pointer-events: none !important; z-index: 3 !important; }
.ht-corner--tl { top: -1px !important;    left: -1px !important;   border-right: none !important; border-bottom: none !important; }
.ht-corner--tr { top: -1px !important;    right: -1px !important;  border-left: none !important;  border-bottom: none !important; }
.ht-corner--bl { bottom: -1px !important; left: -1px !important;   border-right: none !important; border-top: none !important; }
.ht-corner--br { bottom: -1px !important; right: -1px !important;  border-left: none !important;  border-top: none !important; }

/* ─── Header ─────────────────────────────────────────────── */
.ht-modal__header { display: flex !important; align-items: center !important; justify-content: space-between !important; padding: 18px 28px 16px !important; border-bottom: 1px solid rgba(0,211,243,0.10) !important; flex-shrink: 0 !important; background: rgba(0,0,0,0.35) !important; gap: 16px !important; }
.ht-modal__header-left { display: flex !important; align-items: center !important; gap: 12px !important; min-width: 0 !important; flex-wrap: wrap !important; }
.ht-modal__num { font-family: 'Consolas', monospace !important; font-size: 14px !important; letter-spacing: 3px !important; color: rgba(0,211,243,0.5) !important; flex-shrink: 0 !important; }
.ht-modal__suite-label { font-family: 'Consolas', monospace !important; font-size: 14px !important; letter-spacing: 3px !important; color: rgba(255,255,255,0.30) !important; text-transform: uppercase !important; flex-shrink: 0 !important; }
.ht-modal__title { font-family: 'Roboto Mono', monospace !important; font-weight: 700 !important; font-size: clamp(24px,3vw,36px) !important; letter-spacing: 4px !important; color: #fff !important; text-transform: uppercase !important; }
.ht-modal__cat-pill { font-family: 'Consolas', monospace !important; font-size: 12px !important; letter-spacing: 2px !important; color: #00d3f3 !important; border: 1px solid rgba(0,211,243,0.35) !important; padding: 4px 10px !important; text-transform: uppercase !important; flex-shrink: 0 !important; }
.ht-modal__close { font-family: 'Roboto Mono', monospace !important; font-size: 16px !important; font-weight: 700 !important; color: rgba(255,255,255,0.55) !important; background: rgba(255,255,255,0.04) !important; border: 1px solid rgba(255,255,255,0.15) !important; width: 40px !important; height: 40px !important; display: flex !important; align-items: center !important; justify-content: center !important; cursor: pointer !important; flex-shrink: 0 !important; transition: color 0.2s, border-color 0.2s, background 0.2s !important; }
.ht-modal__close:hover { color: #ff4d4d !important; border-color: rgba(255,77,77,0.50) !important; background: rgba(255,77,77,0.08) !important; }

/* ─── Clases renombradas (Bridge override via JS) ────────── */
.ht-body-grid {
  flex: 1 !important; min-height: 0 !important;
  display: grid !important;
  grid-template-columns: 55% 45% !important;
  grid-template-rows: 1fr !important;
  overflow: hidden !important;
}
.ht-pane-term {
  display: flex !important; flex-direction: column !important;
  background: #03070f !important; overflow: hidden !important;
  border-right: 1px solid rgba(0,211,243,0.08) !important;
  min-width: 0 !important;
}
.ht-pane-scripts {
  display: flex !important; flex-direction: column !important;
  overflow: hidden !important; background: #060a12 !important;
  min-width: 0 !important;
}

/* ─── Body: terminal + scripts ───────────────────────────── */
.ht-modal__body {
  flex: 1 !important;
  min-height: 0 !important;
  display: grid !important;
  grid-template-columns: 55% 45% !important;
  grid-template-rows: 1fr !important;
  overflow: hidden !important;
}
/* Override Bridge theme — alta especificidad */
#ht-modal .ht-modal__body {
  display: grid !important;
  grid-template-columns: 55% 45% !important;
  grid-template-rows: 1fr !important;
  flex-direction: unset !important;
  flex-wrap: unset !important;
}
.ht-modal__terminal-col {
  border-right: 1px solid rgba(0,211,243,0.08) !important;
  display: flex !important;
  flex-direction: column !important;
  background: #03070f !important;
  overflow: hidden !important;
  min-width: 0 !important;
  width: 100% !important;
  visibility: visible !important;
  opacity: 1 !important;
}
/* Override Bridge theme — alta especificidad */
#ht-modal .ht-modal__terminal-col {
  display: flex !important;
  flex-direction: column !important;
  background: #03070f !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
}
.ht-term { flex: 1 !important; display: flex !important; flex-direction: column !important; overflow: hidden !important; }
.ht-term__chrome { display: flex !important; align-items: center !important; gap: 6px !important; padding: 10px 16px !important; background: rgba(255,255,255,0.03) !important; border-bottom: 1px solid rgba(255,255,255,0.05) !important; flex-shrink: 0 !important; }
.ht-term__dot { width: 10px !important; height: 10px !important; border-radius: 50% !important; flex-shrink: 0 !important; }
.ht-term__chrome-title { font-family: 'Consolas', monospace !important; font-size: 12px !important; letter-spacing: 4px !important; color: rgba(255,255,255,0.35) !important; text-transform: uppercase !important; margin-left: 8px !important; }
.ht-term__section { padding: 14px 20px 10px !important; flex-shrink: 0 !important; }
.ht-term__section--output { flex: 1 !important; display: flex !important; flex-direction: column !important; overflow: hidden !important; min-height: 0 !important; }
.ht-term__prompt { font-family: 'Consolas', monospace !important; font-size: 16px !important; letter-spacing: 3px !important; color: rgba(0,211,243,0.70) !important; margin-bottom: 10px !important; text-transform: uppercase !important; font-weight: 600 !important; }
.ht-term__code { font-family: 'Source Code Pro','Consolas',monospace !important; font-size: 17px !important; line-height: 1.8 !important; color: rgba(255,255,255,0.85) !important; margin: 0 !important; white-space: pre !important; overflow-x: auto !important; }
.ht-term__code--output { flex: 1 !important; min-height: 0 !important; overflow-y: auto !important; scrollbar-width: thin !important; scrollbar-color: rgba(0,211,243,0.2) transparent !important; }
.ht-term__blink { color: #00d3f3 !important; animation: ht-blink 1s step-end infinite !important; }
.ht-term__idle  { color: rgba(255,255,255,0.18) !important; font-style: italic !important; }
.ht-term__run-btn { display: inline-flex !important; align-items: center !important; gap: 10px !important; margin: 2px 20px 16px !important; align-self: flex-start !important; background: rgba(0,211,243,0.08) !important; border: 1px solid rgba(0,211,243,0.40) !important; color: #00d3f3 !important; font-family: 'Consolas', monospace !important; font-size: 16px !important; letter-spacing: 3px !important; text-transform: uppercase !important; padding: 14px 32px !important; cursor: pointer !important; transition: background 0.2s, border-color 0.2s, box-shadow 0.2s !important; }
.ht-term__run-btn:hover:not(:disabled) { background: rgba(0,211,243,0.16) !important; border-color: #00d3f3 !important; box-shadow: 0 0 18px rgba(0,211,243,0.22) !important; }
.ht-term__run-btn:disabled { opacity: 0.45 !important; cursor: not-allowed !important; }
.ht-term__run-icon { font-size: 10px !important; }

/* ─── Colores de sintaxis terminal ───────────────────────── */
.ht-c-comment { color: rgba(148,163,184,0.60) !important; }
.ht-c-key     { color: #67e8f9 !important; }
.ht-c-str     { color: #86efac !important; }
.ht-c-val     { color: #fdba74 !important; }
.ht-c-num     { color: #fde047 !important; }
.ht-c-ok      { color: #4ade80 !important; }
.ht-c-err     { color: #f87171 !important; }

/* ─── Columna scripts ────────────────────────────────────── */
.ht-modal__scripts-col { display: flex !important; flex-direction: column !important; overflow: hidden !important; background: #060a12 !important; }
.ht-scripts-header { display: flex !important; align-items: center !important; justify-content: space-between !important; padding: 16px 20px 12px !important; border-bottom: 1px solid rgba(255,255,255,0.05) !important; flex-shrink: 0 !important; }
.ht-scripts-header__label { font-family: 'Consolas', monospace !important; font-size: 13px !important; letter-spacing: 4px !important; color: rgba(255,255,255,0.40) !important; text-transform: uppercase !important; }
.ht-scripts-header__count { font-family: 'Consolas', monospace !important; font-size: 13px !important; letter-spacing: 2px !important; color: #00d3f3 !important; }
.ht-scripts-list { list-style: none !important; margin: 0 !important; padding: 10px !important; flex: 1 !important; min-height: 0 !important; overflow-y: auto !important; scrollbar-width: thin !important; scrollbar-color: rgba(0,211,243,0.20) transparent !important; }
.ht-sc { display: flex !important; align-items: center !important; gap: 12px !important; padding: 14px !important; border: 1px solid rgba(255,255,255,0.06) !important; background: rgba(255,255,255,0.015) !important; margin-bottom: 8px !important; transition: border-color 0.2s, background 0.2s !important; cursor: pointer !important; }
.ht-sc:hover { border-color: rgba(0,211,243,0.35) !important; background: rgba(0,211,243,0.04) !important; }
.ht-sc--active { border-color: rgba(0,211,243,0.60) !important; background: rgba(0,211,243,0.08) !important; }
.ht-sc--active .ht-sc__num { color: #00d3f3 !important; }
.ht-sc__num  { font-family: 'Consolas', monospace !important; font-size: 12px !important; color: rgba(255,255,255,0.22) !important; flex-shrink: 0 !important; width: 22px !important; text-align: right !important; }
.ht-sc__badge { font-family: 'Consolas', monospace !important; font-size: 11px !important; letter-spacing: 1px !important; padding: 3px 6px !important; border: 1px solid !important; flex-shrink: 0 !important; }
.ht-sc__badge--colab { color: #F9AB00 !important; border-color: rgba(249,171,0,0.40) !important; }
.ht-sc__badge--gh    { color: rgba(255,255,255,0.7) !important; border-color: rgba(255,255,255,0.22) !important; }
.ht-sc__badge--drive { color: #4285F4 !important; border-color: rgba(66,133,244,0.40) !important; }
.ht-sc__name { font-family: 'Roboto Mono', monospace !important; font-size: 17px !important; color: rgba(255,255,255,0.85) !important; flex: 1 !important; min-width: 0 !important; line-height: 1.4 !important; }
.ht-sc__link { flex-shrink: 0 !important; color: rgba(0,211,243,0.50) !important; display: flex !important; align-items: center !important; justify-content: center !important; width: 32px !important; height: 32px !important; border: 1px solid rgba(0,211,243,0.20) !important; text-decoration: none !important; transition: color 0.2s, border-color 0.2s, background 0.2s !important; }
.ht-sc__link:hover { color: #00d3f3 !important; border-color: rgba(0,211,243,0.55) !important; background: rgba(0,211,243,0.06) !important; }

/* ─── Footer navegación ──────────────────────────────────── */
.ht-modal__footer { display: flex !important; align-items: center !important; justify-content: space-between !important; padding: 12px 24px !important; border-top: 1px solid rgba(255,255,255,0.06) !important; flex-shrink: 0 !important; background: rgba(0,0,0,0.25) !important; }
.ht-modal__nav { font-family: 'Consolas', monospace !important; font-size: 15px !important; letter-spacing: 2px !important; color: rgba(255,255,255,0.50) !important; background: none !important; border: 1px solid rgba(255,255,255,0.15) !important; padding: 12px 24px !important; cursor: pointer !important; text-transform: uppercase !important; transition: color 0.2s, border-color 0.2s, box-shadow 0.2s !important; }
.ht-modal__nav:hover { color: #00d3f3 !important; border-color: rgba(0,211,243,0.50) !important; box-shadow: 0 0 8px rgba(0,211,243,0.15) !important; }
.ht-modal__counter { font-family: 'Consolas', monospace !important; font-size: 13px !important; letter-spacing: 2px !important; color: rgba(255,255,255,0.30) !important; }

/* ─── Animación cursor terminal ──────────────────────────── */
@keyframes ht-blink { 0%,100%{ opacity:1 } 50%{ opacity:0 } }

/* ─── Responsive modal ───────────────────────────────────── */
@media (max-width: 720px) {
  .ht-modal__body { grid-template-columns: 1fr !important; grid-template-rows: auto 1fr !important; }
  .ht-modal__terminal-col { border-right: none !important; border-bottom: 1px solid rgba(0,211,243,0.08) !important; max-height: 280px !important; }
  .ht-sc__name { font-size: 11px !important; }
}