/* ============================================
   Terminal Code Block — terminal-codeblock.css
   ============================================ */

/* ---------- Variables ---------- */
.tcb-wrapper {
    --tcb-radius:     10px;
    --tcb-font:       'JetBrains Mono', 'Fira Code', 'Cascadia Code', 'Courier New', monospace;
    --tcb-font-size:  14px;
    --tcb-line-h:     1.75;

    /* Dark theme (defecto) */
    --tcb-bg-bar:     #1e1e2e;
    --tcb-bg-body:    #13131f;
    --tcb-border:     #2e2e45;
    --tcb-text:       #cdd6f4;
    --tcb-text-muted: #6c6f93;
    --tcb-dot-red:    #f38ba8;
    --tcb-dot-yellow: #f9e2af;
    --tcb-dot-green:  #a6e3a1;
    --tcb-btn-bg:     #2e2e45;
    --tcb-btn-hover:  #3d3d5c;
    --tcb-btn-text:   #89b4fa;
    --tcb-accent:     #89b4fa;
    --tcb-selection:  #313244;
    --tcb-scrollbar:  #313244;
}

/* Light theme override */
.tcb-wrapper.tcb-theme-light {
    --tcb-bg-bar:     #f0f0f4;
    --tcb-bg-body:    #fafafa;
    --tcb-border:     #d8d8e0;
    --tcb-text:       #24273a;
    --tcb-text-muted: #8087a2;
    --tcb-dot-red:    #e55e64;
    --tcb-dot-yellow: #e5a032;
    --tcb-dot-green:  #40a02b;
    --tcb-btn-bg:     #e4e4ed;
    --tcb-btn-hover:  #d0d0dd;
    --tcb-btn-text:   #1e66f5;
    --tcb-accent:     #1e66f5;
    --tcb-selection:  #dce0f4;
    --tcb-scrollbar:  #c5c5d4;
}

/* ---------- Wrapper ---------- */
.tcb-wrapper {
    border-radius: var(--tcb-radius);
    border:        1px solid var(--tcb-border);
    overflow:      hidden;
    margin:        1.5rem 0;
    font-family:   var(--tcb-font);
}

/* ---------- Top bar ---------- */
.tcb-topbar {
    display:         flex;
    align-items:     center;
    gap:             10px;
    padding:         0 14px;
    height:          40px;
    background:      var(--tcb-bg-bar);
    border-bottom:   1px solid var(--tcb-border);
    user-select:     none;
}

/* Dots macOS */
.tcb-dots {
    display:    flex;
    align-items: center;
    gap:         6px;
    flex-shrink: 0;
}

.tcb-dot {
    width:         12px;
    height:        12px;
    border-radius: 50%;
    display:       block;
}

.tcb-dot--red    { background: var(--tcb-dot-red); }
.tcb-dot--yellow { background: var(--tcb-dot-yellow); }
.tcb-dot--green  { background: var(--tcb-dot-green); }

/* Título centrado */
.tcb-title {
    flex:        1;
    text-align:  center;
    font-size:   12px;
    color:       var(--tcb-text-muted);
    white-space: nowrap;
    overflow:    hidden;
    text-overflow: ellipsis;
}

/* ---------- Botón copiar ---------- */
.tcb-copy-btn {
    display:       flex;
    align-items:   center;
    gap:           5px;
    flex-shrink:   0;
    padding:       4px 10px;
    background:    var(--tcb-btn-bg);
    color:         var(--tcb-btn-text);
    border:        1px solid transparent;
    border-radius: 6px;
    font-family:   var(--tcb-font);
    font-size:     11px;
    cursor:        pointer;
    transition:    background 0.15s ease, color 0.15s ease, transform 0.1s ease;
    line-height:   1;
}

.tcb-copy-btn:hover {
    background: var(--tcb-btn-hover);
}

.tcb-copy-btn:active {
    transform: scale(0.96);
}

/* Estado "copiado" */
.tcb-copy-btn.is-copied {
    color: var(--tcb-dot-green);
}

/* Iconos dentro del botón */
.tcb-icon {
    width:  14px;
    height: 14px;
    flex-shrink: 0;
}

.tcb-icon--check { display: none; }

.tcb-copy-btn.is-copied .tcb-icon--copy  { display: none; }
.tcb-copy-btn.is-copied .tcb-icon--check { display: block; }

/* Etiqueta del botón */
.tcb-copy-label { line-height: 1; }

/* ---------- Cuerpo con código ---------- */
.tcb-body {
    background:  var(--tcb-bg-body);
    overflow-x:  auto;
    padding:     0;
}

/* Scrollbar personalizada */
.tcb-body::-webkit-scrollbar { height: 6px; }
.tcb-body::-webkit-scrollbar-track { background: transparent; }
.tcb-body::-webkit-scrollbar-thumb {
    background:    var(--tcb-scrollbar);
    border-radius: 3px;
}

.tcb-pre {
    margin:       0;
    padding:      18px 20px;
    overflow:     visible;
    background:   transparent;
    border:       none;
    font-family:  var(--tcb-font);
    font-size:    var(--tcb-font-size);
    line-height:  var(--tcb-line-h);
    white-space:  pre;
    word-break:   normal;
    tab-size:     4;
}

.tcb-code {
    display:      block;
    color:        var(--tcb-text);
    font-family:  inherit;
    font-size:    inherit;
    background:   transparent;
    border:       none;
    padding:      0;
}

.tcb-code::selection,
.tcb-code *::selection {
    background: var(--tcb-selection);
}

/* ---------- Numeración de líneas (opcional, via JS) ---------- */
.tcb-wrapper.has-line-numbers .tcb-pre {
    padding-left: 0;
    display:      flex;
    gap:          0;
}

.tcb-line-numbers {
    user-select:    none;
    text-align:     right;
    padding:        18px 14px 18px 20px;
    color:          var(--tcb-text-muted);
    font-size:      var(--tcb-font-size);
    line-height:    var(--tcb-line-h);
    border-right:   1px solid var(--tcb-border);
    margin-right:   16px;
    flex-shrink:    0;
}

/* ---------- Responsive ---------- */
@media (max-width: 600px) {
    .tcb-copy-label { display: none; }
    .tcb-copy-btn   { padding: 5px 8px; }
}