/* ── Color variables ── */
:root {
    --bg:               #0f172a;
    --card-bg:          #1e293b;
    --input-bg:         #0f172a;
    --border:           #334155;
    --text:             #e2e8f0;
    --text-input:       #f1f5f9;
    --text-muted:       #64748b;
    --text-subtle:      #94a3b8;
    --text-secondary:   #cbd5e1;
    --guide-bg:         #0c1e35;
    --aspec-bg:         #0a1222;
    --table-header-bg:  #131f32;
    --border-subtle:    #1c2d44;
    --row-stripe:       rgba(255,255,255,0.025);
    --row-hover:        rgba(167,139,250,0.08);
}

[data-theme="light"] {
    --bg:               #fdf8f2;
    --card-bg:          #ffffff;
    --input-bg:         #fef9f5;
    --border:           #f0a84e;
    --text:             #1a0e06;
    --text-input:       #1e1208;
    --text-muted:       #a06530;
    --text-subtle:      #c07830;
    --text-secondary:   #7a4520;
    --guide-bg:         #fff3e0;
    --aspec-bg:         #fff8ef;
    --table-header-bg:  #fef0dc;
    --border-subtle:    #fcd9a8;
    --row-stripe:       rgba(240,168,78,0.07);
    --row-hover:        rgba(240,168,78,0.16);
}

/* ── Toggle button ── */
#themeToggle {
    position: fixed;
    top: 0.9rem;
    right: 1rem;
    width: auto;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text);
    padding: 0.35rem 0.7rem;
    font-size: 1rem;
    line-height: 1.4;
    cursor: pointer;
    z-index: 200;
    margin: 0;
    transition: opacity 0.15s;
}
#themeToggle:hover  { opacity: 0.7; }
#themeToggle:active { transform: scale(0.96); }

/* ── Modo día: botones / badges ── */
[data-theme="light"] .btn-copy   { background: #dbeafe; color: #1e40af; border-color: #93c5fd; }
[data-theme="light"] .btn-copy:hover { background: #bfdbfe; color: #1e3a8a; }
[data-theme="light"] .webrtc-badge   { background: #d1fae5; border-color: #6ee7b7; color: #065f46; }
[data-theme="light"] .processing-warn { background: #fef3c7; border-color: #fbbf24; color: #92400e; }