/*
 * COMPONENTES COMUNES
 *
 * Botones, formularios, menús, modales, tareas y editor.
 */

/* ==========================================================
 * FORMULARIOS
 * ========================================================== */
input,
select,
textarea,
.search-box,
.cc-desktop-tools-search,
.cc-mobile-search-panel,
.cc-admin-field input,
.cc-admin-field select,
.cc-admin-field textarea {
    color: var(--cc-text) !important;
    background: var(--cc-surface-0) !important;
    border-color: var(--cc-border) !important;
    box-shadow: none !important;
}

input::placeholder,
textarea::placeholder {
    color: var(--cc-text-muted) !important;
    opacity: 1 !important;
}

input:hover:not(:disabled),
select:hover:not(:disabled),
textarea:hover:not(:disabled) {
    border-color: var(--cc-border-strong) !important;
}

input:focus,
select:focus,
textarea:focus {
    border-color: var(--cc-accent) !important;
    box-shadow: 0 0 0 3px var(--cc-focus-ring) !important;
}

input[type="checkbox"],
input[type="radio"] {
    accent-color: var(--cc-accent) !important;
}

/* ==========================================================
 * BOTÓN ESTÁNDAR
 * ========================================================== */
.button,
.icon-button,
.carajillo-stable-action,
.cc-stable-viewer-button,
.media-header-button,
.editor-tool-button,
.cc-mobile-square-button,
.cc-mobile-search-close,
.cc-mobile-sheet-close,
.info-actions button,
.trash-toolbar button,
.shortcuts-help-card header button,
.archive-decision-card button,
.cc-task-toggle,
.cc-task-cancel,
.cc-task-close {
    color: var(--cc-text-secondary) !important;
    background: var(--cc-surface-0) !important;
    border: 1px solid var(--cc-border) !important;
    border-radius: var(--cc-control-radius) !important;
    box-shadow: none !important;
    font-weight: 650 !important;

    transition:
        color 120ms ease,
        background 120ms ease,
        border-color 120ms ease,
        transform 120ms ease !important;
}

.button,
.icon-button,
.carajillo-stable-action,
.cc-stable-viewer-button,
.media-header-button,
.editor-tool-button,
.cc-mobile-square-button,
.cc-mobile-search-close,
.cc-mobile-sheet-close,
.info-actions button,
.trash-toolbar button {
    min-height: var(--cc-control-height) !important;
    padding: 8px 12px !important;
}

.button:hover:not(:disabled),
.icon-button:hover:not(:disabled),
.carajillo-stable-action:hover:not(:disabled),
.cc-stable-viewer-button:hover:not(:disabled),
.media-header-button:hover:not(:disabled),
.editor-tool-button:hover:not(:disabled),
.cc-mobile-square-button:hover:not(:disabled),
.cc-mobile-search-close:hover:not(:disabled),
.cc-mobile-sheet-close:hover:not(:disabled),
.info-actions button:hover:not(:disabled),
.trash-toolbar button:hover:not(:disabled),
.shortcuts-help-card header button:hover:not(:disabled) {
    color: var(--cc-text) !important;
    background: var(--cc-surface-2) !important;
    border-color: var(--cc-border-strong) !important;
}

.button:active:not(:disabled),
.icon-button:active:not(:disabled),
.carajillo-stable-action:active:not(:disabled),
.cc-stable-viewer-button:active:not(:disabled),
.cc-mobile-square-button:active:not(:disabled) {
    transform: translateY(1px) !important;
}

.button.icon,
.icon-button,
.cc-stable-viewer-button,
.media-header-button,
.cc-mobile-square-button {
    width: var(--cc-control-height) !important;
    min-width: var(--cc-control-height) !important;
    max-width: var(--cc-control-height) !important;
    height: var(--cc-control-height) !important;
    padding: 0 !important;
}

.button.primary,
.button.primary:hover:not(:disabled) {
    color: var(--cc-on-accent) !important;
    background: var(--cc-accent) !important;
    border-color: var(--cc-accent) !important;
}

.button.primary:hover:not(:disabled) {
    background: var(--cc-accent-hover) !important;
    border-color: var(--cc-accent-hover) !important;
}

.button.danger,
button.danger {
    color: var(--cc-danger) !important;
    background: var(--cc-danger-soft) !important;
    border-color: color-mix(in srgb, var(--cc-danger) 34%, transparent) !important;
}

/* La topbar contiene reglas antiguas con !important y mayor especificidad. */
#appView > .topbar button,
#appView > .topbar .button,
#appView > .topbar .icon-button,
#appView > .topbar .carajillo-stable-action,
#contentLayout .main-panel > .topbar button,
#contentLayout .main-panel > .topbar .button,
#contentLayout .main-panel > .topbar .icon-button,
#contentLayout .main-panel > .topbar .carajillo-stable-action {
    color: var(--cc-text-secondary) !important;
    background: var(--cc-surface-0) !important;
    border-color: var(--cc-border) !important;
    box-shadow: none !important;
    filter: none !important;
}

#appView > .topbar button:hover:not(:disabled),
#appView > .topbar .button:hover:not(:disabled),
#appView > .topbar .carajillo-stable-action:hover:not(:disabled),
#contentLayout .main-panel > .topbar button:hover:not(:disabled),
#desktopToolsMenuButton.active {
    color: var(--cc-accent) !important;
    background: var(--cc-accent-soft) !important;
    border-color: var(--cc-accent) !important;
}

#appView > .topbar button:disabled,
#appView > .topbar .button:disabled,
#appView > .topbar .carajillo-stable-action:disabled {
    color: var(--cc-text-disabled) !important;
    background: var(--cc-surface-1) !important;
}

/* ==========================================================
 * MENÚ HERRAMIENTAS
 *
 * El ID aumenta la especificidad sobre las reglas antiguas.
 * ========================================================== */
#desktopToolsMenuPanel.cc-desktop-tools-menu-panel,
#contentLayout .main-panel > .topbar > #desktopToolsMenuPanel {
    color: var(--cc-text) !important;
    background: var(--cc-surface-elevated) !important;
    border-color: var(--cc-border) !important;
    box-shadow: var(--cc-shadow-2) !important;
}

#desktopToolsMenuPanel .cc-desktop-tools-menu-title {
    color: var(--cc-text) !important;
}

#desktopToolsMenuPanel .cc-desktop-tools-menu-title::before {
    color: var(--cc-accent) !important;
    background: var(--cc-accent-soft) !important;
    border-color: var(--cc-border) !important;
    box-shadow: none !important;
}

#desktopToolsMenuPanel .cc-desktop-tools-menu-title::after {
    color: var(--cc-text-muted) !important;
}

#desktopToolsMenuPanel .cc-desktop-tools-search,
#desktopToolsMenuPanel .cc-desktop-tools-check,
#desktopToolsMenuPanel .cc-desktop-tools-menu-empty {
    color: var(--cc-text) !important;
    background: var(--cc-surface-0) !important;
    border-color: var(--cc-border) !important;
    box-shadow: none !important;
}

#desktopToolsMenuPanel .cc-desktop-tools-check:hover {
    background: var(--cc-surface-2) !important;
    border-color: var(--cc-border-strong) !important;
}

#desktopToolsMenuPanel .cc-desktop-tools-menu-divider {
    background: var(--cc-border) !important;
}

#contentLayout .main-panel > .topbar #desktopToolsMenuPanel button.cc-desktop-tools-menu-item,
#desktopToolsMenuPanel button.cc-desktop-tools-menu-item {
    color: var(--cc-text) !important;
    background: var(--cc-surface-0) !important;
    border-color: var(--cc-border-subtle) !important;
    box-shadow: none !important;
}

#contentLayout .main-panel > .topbar #desktopToolsMenuPanel button.cc-desktop-tools-menu-item:hover:not(:disabled),
#desktopToolsMenuPanel button.cc-desktop-tools-menu-item:hover:not(:disabled) {
    color: var(--cc-text) !important;
    background: var(--cc-surface-2) !important;
    border-color: var(--cc-border-strong) !important;
}

#contentLayout .main-panel > .topbar #desktopToolsMenuPanel button.cc-desktop-tools-menu-item:disabled,
#desktopToolsMenuPanel button.cc-desktop-tools-menu-item:disabled {
    color: var(--cc-text-disabled) !important;
    background: var(--cc-surface-1) !important;
}

#desktopToolsMenuPanel .cc-desktop-tools-menu-icon {
    color: var(--cc-accent) !important;
    background: var(--cc-accent-soft) !important;
    border-color: var(--cc-border) !important;
    box-shadow: none !important;
}

#desktopToolsMenuPanel .cc-desktop-tools-menu-label {
    color: inherit !important;
}

/* ==========================================================
 * MENÚS CONTEXTUALES Y DESPLEGABLES
 * ========================================================== */
.context-menu,
.carajillo-background-menu-v2,
.carajillo-context-menu-online,
.cc-location-context-menu,
.carajillo-location-context,
.cc-media-viewer-menu {
    color: var(--cc-text) !important;
    background: var(--cc-surface-elevated) !important;
    border-color: var(--cc-border) !important;
    box-shadow: var(--cc-shadow-2) !important;
}

.context-menu button,
.cc-location-context-item,
.cc-media-viewer-menu .media-menu-item {
    color: var(--cc-text) !important;
    background: transparent !important;
    border-color: transparent !important;
}

.context-menu button:hover,
.cc-location-context-item:hover,
.cc-media-viewer-menu .media-menu-item:hover {
    color: var(--cc-text) !important;
    background: var(--cc-surface-2) !important;
}

.context-menu-separator,
.cc-location-context-divider,
.context-menu-section {
    border-color: var(--cc-border) !important;
    background: var(--cc-border) !important;
}

.context-shortcut,
.context-menu-icon,
.cc-location-context-icon,
.media-menu-icon {
    color: var(--cc-accent) !important;
}