/* semitonos.css v2 */
:root {
    --st-bg-app: #0d0d0d;
    --st-bg-workspace: #1b1b1b;
    --st-bg-sidebar: #141414;
    --st-bg-card: #232323;
    --st-bg-input: #1a1a1a;
    --st-bg-toolbar: rgba(28, 28, 28, 0.96);
    --st-border: #333333;
    --st-border-soft: rgba(255, 255, 255, 0.08);
    --st-text: #f0f0f0;
    --st-text-muted: #9a9a9a;
    --st-text-dim: #666666;
    --st-accent: #d4ff00;
    --st-accent-dim: rgba(212, 255, 0, 0.12);
    --st-sidebar-width: 360px;
    --st-radius: 8px;
    --st-radius-sm: 5px;
    --st-radius-lg: 12px;
    --st-font: 'Exo 2', 'Segoe UI', sans-serif;
    --st-shadow-canvas: 0 18px 42px rgba(0, 0, 0, 0.5), 0 4px 14px rgba(0, 0, 0, 0.3);
    --st-checker-a: #2a2a2a;
    --st-checker-b: #1f1f1f;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body.semitonos-app {
    height: 100%;
}

body.semitonos-app {
    font-family: var(--st-font);
    background: var(--st-bg-app);
    color: var(--st-text);
    height: 100vh;
    overflow: hidden;
}

/* ── Sidebar ── */
.st-sidebar {
    width: var(--st-sidebar-width);
    min-width: var(--st-sidebar-width);
    max-width: var(--st-sidebar-width);
    height: 100vh;
    background: var(--st-bg-sidebar);
    border-right: 3px solid var(--st-accent);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.st-sidebar__scroll {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 1.1rem 1rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}

/* ── Cards ── */
.st-card {
    background: var(--st-bg-card);
    border: 1px solid var(--st-border-soft);
    border-radius: var(--st-radius);
    padding: 1rem 1.05rem;
}

.st-card__heading {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--st-accent);
    margin-bottom: 0.75rem;
}

.st-card__desc {
    font-size: 0.72rem;
    font-style: italic;
    color: var(--st-text-muted);
    line-height: 1.45;
    margin-bottom: 0.85rem;
}

.st-card__hint {
    font-size: 0.65rem;
    color: var(--st-text-dim);
    line-height: 1.45;
    margin-top: 0.65rem;
}

.st-card__output {
    font-size: 0.65rem;
    color: var(--st-text-dim);
    margin-top: 0.7rem;
    line-height: 1.4;
}

/* ── Form controls ── */
.st-field {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.st-field__label {
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--st-text-muted);
}

.st-input,
.st-select {
    width: 100%;
    background: var(--st-bg-input);
    border: 1px solid var(--st-border);
    border-radius: var(--st-radius-sm);
    color: var(--st-text);
    font-family: var(--st-font);
    font-size: 0.8rem;
    padding: 0.48rem 0.6rem;
    outline: none;
}

.st-input--accent,
.st-select.st-input--accent {
    border-color: rgba(212, 255, 0, 0.55);
}

.st-select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%23d4ff00' viewBox='0 0 16 16'%3E%3Cpath d='M1.5 5.5l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.55rem center;
    padding-right: 1.6rem;
}

.st-measures-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.65rem;
    margin-bottom: 0.85rem;
}

.st-check {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.75rem;
    color: var(--st-text-muted);
    cursor: default;
    user-select: none;
}

.st-check--compact {
    margin: 0;
    gap: 0;
}

.st-check input[type="checkbox"] {
    appearance: none;
    width: 15px;
    height: 15px;
    border: 1.5px solid var(--st-accent);
    border-radius: 3px;
    background: transparent;
    flex-shrink: 0;
    position: relative;
}

.st-check input[type="checkbox"]:checked {
    background: var(--st-accent);
}

.st-check input[type="checkbox"]:checked::after {
    content: '';
    position: absolute;
    left: 4px;
    top: 1px;
    width: 4px;
    height: 8px;
    border: solid #000;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.st-range {
    width: 100%;
    height: 3px;
    appearance: none;
    background: #555;
    border-radius: 999px;
    outline: none;
}

.st-range::-webkit-slider-thumb {
    appearance: none;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: var(--st-accent);
    border: none;
    cursor: default;
}

.st-range::-moz-range-thumb {
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: var(--st-accent);
    border: none;
    cursor: default;
}

.st-range-row {
    display: flex;
    align-items: center;
    gap: 0.65rem;
}

.st-range-row .st-range { flex: 1; }

.st-range-value {
    flex-shrink: 0;
    min-width: 2.75rem;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--st-text-muted);
    text-align: right;
    white-space: nowrap;
}

/* ── Dropzone ── */
.st-file-input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
    opacity: 0;
    pointer-events: none;
}

.st-dropzone {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 88px;
    border: 1.5px dashed rgba(212, 255, 0, 0.65);
    border-radius: var(--st-radius);
    padding: 1.1rem 1rem;
    text-align: center;
    background: rgba(0, 0, 0, 0.2);
    cursor: pointer;
}

.st-dropzone__text {
    font-size: 0.78rem;
    font-style: italic;
    color: var(--st-text-muted);
    line-height: 1.4;
    pointer-events: none;
}

/* ── Buttons ── */
.st-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    width: 100%;
    padding: 0.7rem 1rem;
    border: 1px solid var(--st-border);
    border-radius: var(--st-radius-sm);
    background: var(--st-bg-input);
    color: var(--st-text);
    font-family: var(--st-font);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    cursor: default;
}

.st-btn--primary {
    background: var(--st-accent);
    border-color: var(--st-accent);
    color: #000;
}

.st-btn--ghost {
    background: transparent;
}

.st-btn--sm {
    width: auto;
    padding: 0.4rem 0.75rem;
    font-size: 0.68rem;
}

.st-btn-group {
    display: flex;
    gap: 0.5rem;
}

.st-btn-group .st-btn { flex: 1; }

.st-btn-group .st-btn.is-active {
    background: var(--st-accent-dim);
    border-color: rgba(212, 255, 0, 0.45);
    color: var(--st-accent);
}

.st-link-btn {
    display: inline-flex;
    align-items: center;
    background: transparent;
    border: none;
    color: var(--st-accent);
    font-family: var(--st-font);
    font-size: 0.78rem;
    font-weight: 600;
    padding: 0.2rem 0;
    cursor: pointer;
}

.st-color-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.st-color-count {
    font-size: 0.68rem;
    color: var(--st-text-dim);
    white-space: nowrap;
}

.st-card__hint {
    margin-top: 0.45rem;
    margin-bottom: 0.35rem;
}

/* ── Color list ── */
.st-color-list {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    margin-bottom: 0.7rem;
}

.st-color-item {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.5rem 0.55rem;
    background: var(--st-bg-input);
    border: 1px solid var(--st-border);
    border-radius: var(--st-radius-sm);
    transition: border-color 0.15s, box-shadow 0.15s;
}

.st-color-item.is-picking {
    border-color: rgba(212, 255, 0, 0.65);
    box-shadow: 0 0 0 1px rgba(212, 255, 0, 0.25);
}

.st-color-picker-wrap {
    position: relative;
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    border-radius: 5px;
    overflow: hidden;
    border: 1px solid rgba(212, 255, 0, 0.45);
    cursor: pointer;
}

.st-color-picker {
    position: absolute;
    inset: -4px;
    width: calc(100% + 8px);
    height: calc(100% + 8px);
    padding: 0;
    border: none;
    cursor: pointer;
    background: transparent;
}

.st-color-picker::-webkit-color-swatch-wrapper { padding: 0; }
.st-color-picker::-webkit-color-swatch {
    border: none;
    border-radius: 4px;
}

.st-color-meta {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.st-color-name {
    font-size: 0.72rem;
    color: var(--st-text-muted);
    line-height: 1.2;
}

.st-color-hex {
    font-size: 0.65rem;
    color: var(--st-text-dim);
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.st-color-actions {
    display: flex;
    align-items: center;
    gap: 0.2rem;
    flex-shrink: 0;
}

.st-color-action {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--st-border);
    border-radius: 5px;
    color: var(--st-text-dim);
    font-size: 0.85rem;
    cursor: pointer;
    flex-shrink: 0;
}

.st-color-action:hover,
.st-color-action.is-active {
    color: var(--st-accent);
    border-color: rgba(212, 255, 0, 0.45);
    background: var(--st-accent-dim);
}

/* ── Workspace ── */
.st-workspace {
    height: 100vh;
    background:
        radial-gradient(ellipse 80% 60% at 50% 40%, rgba(255, 255, 255, 0.02) 0%, transparent 60%),
        radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.015) 0%, transparent 2px),
        radial-gradient(circle at 70% 60%, rgba(255, 255, 255, 0.012) 0%, transparent 1.5px),
        radial-gradient(circle at 40% 80%, rgba(255, 255, 255, 0.01) 0%, transparent 1px),
        var(--st-bg-workspace);
    overflow: hidden;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.st-workspace__inner {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* ── Canvas toolbar ── */
.st-canvas-toolbar {
    position: absolute;
    top: 1.1rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 20;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem 0.55rem;
    max-width: calc(100% - 2rem);
    padding: 0.5rem 0.75rem;
    background: var(--st-bg-toolbar);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    backdrop-filter: blur(12px);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.4);
}

.st-toolbar-divider {
    width: 1px;
    height: 22px;
    background: #444;
    flex-shrink: 0;
}

.st-toolbar-group {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.st-toolbar-label {
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--st-text-muted);
    white-space: nowrap;
}

.st-tool-btn {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #2a2a2a;
    border: 1px solid #444;
    border-radius: 5px;
    color: var(--st-text-muted);
    font-size: 0.9rem;
    cursor: default;
    flex-shrink: 0;
}

.st-tool-btn--accent,
.st-tool-btn.is-active {
    background: var(--st-accent);
    border-color: var(--st-accent);
    color: #000;
}

.st-tool-letter {
    font-size: 0.85rem;
    font-weight: 800;
    font-style: italic;
    line-height: 1;
    color: inherit;
}

.st-tool-letter--light {
    color: #111;
    background: #fff;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
}

.st-swatch {
    width: 22px;
    height: 22px;
    border-radius: 3px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    padding: 0;
    cursor: default;
    flex-shrink: 0;
}

.st-swatch.is-active {
    outline: 2px solid var(--st-accent);
    outline-offset: 1px;
}

.st-zoom-slider {
    width: 100px;
}

.st-zoom-value {
    min-width: 2.5rem;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--st-text);
    text-align: left;
}

.st-brush-slider {
    width: 80px;
}

.st-toolbar-action {
    padding: 0.38rem 0.7rem;
    background: #1f1f1f;
    border: 1px solid rgba(212, 255, 0, 0.45);
    border-radius: 5px;
    color: var(--st-text-muted);
    font-family: var(--st-font);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    cursor: default;
    white-space: nowrap;
}

.st-toolbar-action--primary {
    background: var(--st-accent);
    border-color: var(--st-accent);
    color: #000;
}

/* ── Editor canvas ── */
.st-canvas-frame {
    width: 80%;
    height: 80%;
    max-width: 80%;
    max-height: 80%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 1.5rem;
}

#editorCanvas.st-editor-canvas {
    width: 100%;
    height: 100%;
    border-radius: var(--st-radius-lg);
    box-shadow: var(--st-shadow-canvas);
    background-color: var(--st-checker-b);
    border: 1px solid rgba(255, 255, 255, 0.05);
    overflow: hidden;
    position: relative;
}

/* Evitar que Bootstrap rompa el canvas (max-width/height:auto) */
.semitonos-app canvas.st-display-canvas,
#stDisplayCanvas {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    cursor: default;
    touch-action: none;
}

.st-dropzone.is-dragover {
    border-color: var(--st-accent);
    background: rgba(212, 255, 0, 0.06);
}

.st-tool-btn.is-active:not(.st-tool-btn--accent) {
    background: var(--st-accent-dim);
    border-color: rgba(212, 255, 0, 0.45);
    color: var(--st-accent);
}

/* ── Scrollbar ── */
.st-sidebar__scroll::-webkit-scrollbar { width: 5px; }
.st-sidebar__scroll::-webkit-scrollbar-track { background: transparent; }
.st-sidebar__scroll::-webkit-scrollbar-thumb {
    background: #3a3a3a;
    border-radius: 3px;
}

/* Neutralizar componentes Bootstrap por defecto */
.semitonos-app .btn,
.semitonos-app .form-control,
.semitonos-app .form-select {
    all: unset;
    box-sizing: border-box;
}