/*
 * MODALES, TAREAS Y VISORES
 *
 * Elementos flotantes que comparten una capa elevada.
 */

/* ==========================================================
 * MODALES Y OVERLAYS
 * ========================================================== */
.modal-backdrop,
#modalBackdrop,
.shortcuts-help,
.archive-working-overlay,
.archive-decision-overlay,
.carajillo-location-overlay,
.carajillo-password-overlay,
.cc-admin-v2-backdrop {
    background: var(--cc-overlay) !important;
}

.modal,
.carajillo-location-modal,
.cc-location-manage-modal,
.carajillo-password-card,
.archive-working-card,
.archive-decision-card,
.shortcuts-help-card,
.cc-code-editor,
.cc-media-viewer {
    color: var(--cc-text) !important;
    background: var(--cc-surface-elevated) !important;
    border-color: var(--cc-border) !important;
    box-shadow: var(--cc-shadow-2) !important;
}

.modal-header,
.carajillo-location-header,
.editor-modal-header,
.editor-actions,
.shortcuts-help-card header,
.archive-decision-card header,
.cc-media-viewer-header {
    color: var(--cc-text) !important;
    background: var(--cc-toolbar) !important;
    border-color: var(--cc-border) !important;
}

.carajillo-location-field label,
.carajillo-location-help,
.carajillo-location-status,
.archive-decision-card small {
    color: var(--cc-text-secondary) !important;
}

/* ==========================================================
 * BARRAS DE TAREAS
 * ========================================================== */
.cc-task-card {
    color: var(--cc-text) !important;
    background: var(--cc-surface-elevated) !important;
    border-color: var(--cc-border) !important;
    box-shadow: var(--cc-shadow-1) !important;
    backdrop-filter: none !important;
}

.cc-task-icon {
    color: var(--cc-accent) !important;
    background: var(--cc-accent-soft) !important;
    border-color: var(--cc-border) !important;
}

.cc-task-toggle,
.cc-task-close,
.cc-task-cancel {
    background: transparent !important;
    border-color: transparent !important;
}

.cc-task-toggle:hover,
.cc-task-close:hover,
.cc-task-cancel:hover {
    background: var(--cc-surface-2) !important;
}

.cc-task-track {
    background: var(--cc-surface-3) !important;
}

.cc-task-bar {
    background: linear-gradient(
        90deg,
        var(--cc-accent),
        var(--cc-accent-hover)
    ) !important;
}

.cc-task-summary,
.cc-task-details span,
.cc-task-details p {
    color: var(--cc-text-muted) !important;
}

.cc-task-summary > strong,
.cc-task-details strong {
    color: var(--cc-text-secondary) !important;
}

.cc-task-details {
    background: var(--cc-surface-1) !important;
    border-color: var(--cc-border) !important;
}

.cc-task-card.success .cc-task-icon {
    color: var(--cc-success) !important;
    background: var(--cc-success-soft) !important;
}

.cc-task-card.warning .cc-task-icon {
    color: var(--cc-warning) !important;
    background: var(--cc-warning-soft) !important;
}

.cc-task-card.error .cc-task-icon {
    color: var(--cc-danger) !important;
    background: var(--cc-danger-soft) !important;
}

/* ==========================================================
 * AYUDA DE ATAJOS
 * ========================================================== */
.shortcuts-help-card header {
    background: var(--cc-toolbar) !important;
}

.shortcuts-help-list {
    background: var(--cc-border) !important;
}

.shortcuts-help-row {
    background: var(--cc-surface-0) !important;
}

.shortcuts-help-row kbd {
    color: var(--cc-text) !important;
    background: var(--cc-surface-2) !important;
    border-color: var(--cc-border-strong) !important;
}

.shortcuts-help-row span {
    color: var(--cc-text-secondary) !important;
}

/* ==========================================================
 * EDITOR
 * ========================================================== */
.cc-code-editor .editor-codemirror-toolbar,
.cc-code-editor .editor-statusbar {
    color: var(--cc-text-secondary) !important;
    background: var(--cc-surface-1) !important;
    border-color: var(--cc-border) !important;
}

.cc-code-editor .editor-codemirror-host,
.cc-code-editor .CodeMirror,
.cc-code-editor .CodeMirror-scroll,
.cc-code-editor .CodeMirror-gutters {
    color: var(--cc-code-text) !important;
    background: var(--cc-code-bg) !important;
    border-color: var(--cc-code-surface) !important;
}

.cc-code-editor .CodeMirror-gutters {
    background: var(--cc-code-surface) !important;
}

.editor-language-badge,
.editor-dirty-badge {
    color: var(--cc-accent) !important;
    background: var(--cc-accent-soft) !important;
    border-color: var(--cc-border) !important;
}

/* ==========================================================
 * VISOR MULTIMEDIA
 * ========================================================== */
.cc-media-viewer {
    background: var(--cc-code-bg) !important;
}

.cc-media-viewer-header {
    color: var(--cc-code-text) !important;
    background: var(--cc-code-surface) !important;
    border-color: color-mix(in srgb, var(--cc-code-text) 14%, transparent) !important;
}

.cc-media-viewer .viewer-stage {
    background: var(--cc-code-bg) !important;
}

.cc-media-viewer .viewer-side-arrow {
    color: var(--cc-code-text) !important;
    background: color-mix(in srgb, var(--cc-code-bg) 76%, transparent) !important;
    border-color: color-mix(in srgb, var(--cc-code-text) 20%, transparent) !important;
}

/* ==========================================================
 * TOASTS Y ESTADOS
 * ========================================================== */
.toast,
.task-card,
.carajillo-operation-card,
.carajillo-operation-item {
    color: var(--cc-text) !important;
    background: var(--cc-surface-elevated) !important;
    border-color: var(--cc-border) !important;
    box-shadow: var(--cc-shadow-1) !important;
}

.toast.error,
.carajillo-operation-error {
    color: var(--cc-danger) !important;
    background: var(--cc-danger-soft) !important;
}