/*
 * ESTRUCTURA DEL EXPLORADOR
 *
 * Paneles, barra superior, ubicaciones, archivos e información.
 */

/* ==========================================================
 * PANELES PRINCIPALES
 * ========================================================== */
#contentLayout.content-layout,
.content-layout {
    background: transparent !important;
}

#contentLayout.content-layout > #locationsSidebar.locations-sidebar,
#contentLayout.content-layout > .locations-sidebar,
#contentLayout.content-layout > #appView.main-panel,
#contentLayout.content-layout > .main-panel,
#contentLayout.content-layout > #infoDrawer.info-drawer,
#contentLayout.content-layout > .info-drawer {
    color: var(--cc-text) !important;
    background: var(--cc-surface-0) !important;
    border-color: var(--cc-border) !important;
    box-shadow: none !important;
}

#contentLayout.content-layout > #locationsSidebar.locations-sidebar,
#contentLayout.content-layout > #infoDrawer.info-drawer {
    overflow: hidden !important;
}

.locations-header,
#contentLayout .locations-header,
.info-header,
#contentLayout .info-header,
#appView > .topbar,
#contentLayout .main-panel > .topbar,
.file-toolbar {
    color: var(--cc-text) !important;
    background: var(--cc-toolbar) !important;
    border-color: var(--cc-border) !important;
}

.locations-header strong,
.info-header strong,
#appView > .topbar strong,
.breadcrumb.current,
.carajillo-breadcrumb-part.current {
    color: var(--cc-text) !important;
}

/* ==========================================================
 * BARRA SUPERIOR Y NAVEGACIÓN
 * ========================================================== */
#appView > .topbar {
    box-shadow: inset 0 -1px 0 var(--cc-border-subtle) !important;
}

#navigationRow,
.breadcrumbs,
.carajillo-breadcrumbs,
.carajillo-breadcrumbs-row {
    color: var(--cc-text-secondary) !important;
    background: transparent !important;
    border-color: transparent !important;
}

.breadcrumb,
.carajillo-breadcrumb-part {
    color: var(--cc-text-secondary) !important;
    background: transparent !important;
    border-color: transparent !important;
}

.breadcrumb:hover,
.carajillo-breadcrumb-part:hover,
.breadcrumb.current,
.carajillo-breadcrumb-part.current {
    color: var(--cc-accent) !important;
    background: var(--cc-accent-soft) !important;
}

.carajillo-breadcrumb-separator,
.carajillo-breadcrumb-separator-v2 {
    color: var(--cc-text-muted) !important;
}

/* ==========================================================
 * UBICACIONES
 * ========================================================== */
.location-button {
    color: var(--cc-text) !important;
    background: transparent !important;
    border: 1px solid transparent !important;
    border-radius: 10px !important;
}

.location-button:hover {
    background: var(--cc-surface-1) !important;
    border-color: var(--cc-border-subtle) !important;
}

.location-button.active {
    color: var(--cc-text) !important;
    background: var(--cc-accent-soft) !important;
    border-color: var(--cc-accent) !important;
}

.location-button.active .location-real-path {
    color: var(--cc-text-secondary) !important;
}

.location-name {
    color: inherit !important;
}

.location-symbol,
.carajillo-location-symbol {
    color: var(--cc-on-accent) !important;
    background: var(--cc-accent) !important;
    border-color: var(--cc-accent) !important;
    box-shadow: none !important;
}

/* ==========================================================
 * ÁREA DE ARCHIVOS
 * ========================================================== */
#fileContent.file-content,
.file-content,
.content-area {
    color: var(--cc-text) !important;
    background: var(--cc-surface-0) !important;
}

.files-grid,
.file-grid,
.view-grid,
.view-list {
    color: var(--cc-text) !important;
    background: transparent !important;
}

.file-card {
    color: var(--cc-text) !important;
    background: var(--cc-surface-0) !important;
    border-color: var(--cc-border) !important;
    box-shadow: none !important;
}

.file-card:hover {
    background: var(--cc-surface-1) !important;
    border-color: var(--cc-border-strong) !important;
}

.file-card.selected,
.file-card.carajillo-mouse-selected,
.file-card.carajillo-v5-copied,
.file-card.carajillo-v5-cut {
    background: var(--cc-accent-soft) !important;
    border-color: var(--cc-accent) !important;
    box-shadow: 0 0 0 2px var(--cc-focus-ring) !important;
}

.file-card.carajillo-v5-cut {
    opacity: 0.68 !important;
}

.file-card .file-visual,
.file-visual,
.file-preview-loading,
.cloud-folder-loading-card,
.info-preview {
    background: var(--cc-surface-1) !important;
    border-color: var(--cc-border-subtle) !important;
}

.file-card:hover .file-visual {
    background: var(--cc-surface-2) !important;
}

.file-name,
.file-name-text,
.file-list-name,
.file-text {
    color: var(--cc-text) !important;
}

.file-list-size {
    color: var(--cc-success) !important;
}

/* Carpeta coherente en todos los temas. */
.folder-icon,
.file-icon.folder,
.classic-icon.folder {
    color: var(--cc-folder-bottom) !important;
    filter: drop-shadow(0 5px 8px var(--cc-folder-shadow));
}

/* ==========================================================
 * CABECERA DEL LISTADO
 *
 * Se fuerza una superficie opaca y un contexto de apilamiento.
 * Las filas no pueden atravesarla visualmente.
 * ========================================================== */
#fileContent.file-content {
    position: relative !important;
    isolation: isolate !important;
}

#fileContent.file-content:has(.view-list) .file-list-sort-header,
.file-content:has(.view-list) .file-list-sort-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 300 !important;

    margin: 0 !important;

    color: var(--cc-text) !important;
    background: var(--cc-surface-1) !important;
    border-top: 0 !important;
    border-right: 0 !important;
    border-bottom: 1px solid var(--cc-border) !important;
    border-left: 0 !important;

    box-shadow: 0 7px 14px rgba(0, 0, 0, 0.08) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    overflow: hidden !important;
}

#fileContent.file-content:has(.view-list) .file-list-sort-header::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    background: var(--cc-surface-1) !important;
}

#fileContent .view-list {
    position: relative !important;
    z-index: 1 !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
}

#fileContent .view-list .file-card {
    position: relative !important;
    z-index: 0 !important;
}

.file-list-sort-button {
    color: var(--cc-text-secondary) !important;
    background: transparent !important;
    border-color: transparent !important;
}

.file-list-sort-button:hover,
.file-list-sort-button.active {
    color: var(--cc-accent) !important;
    background: var(--cc-accent-soft) !important;
}

/* ==========================================================
 * PANEL DE INFORMACIÓN
 * ========================================================== */
#contentLayout.content-layout > #infoDrawer.info-drawer,
#contentLayout > #infoDrawer,
.info-drawer {
    color: var(--cc-text) !important;
    background: var(--cc-surface-0) !important;
}

#contentLayout #infoDrawer .info-header,
.info-drawer .info-header {
    color: var(--cc-text) !important;
    background: var(--cc-toolbar) !important;
    border-color: var(--cc-border) !important;
}

.info-body,
.info-empty {
    color: var(--cc-text-secondary) !important;
    background: var(--cc-surface-0) !important;
}

.info-preview {
    color: var(--cc-text) !important;
    background: var(--cc-surface-1) !important;
    border-color: var(--cc-border) !important;
}

.info-value,
.info-body strong {
    color: var(--cc-text) !important;
}

.info-key {
    color: var(--cc-text-muted) !important;
}

.info-row,
.info-section,
.info-metadata {
    border-color: var(--cc-border-subtle) !important;
}

/* ==========================================================
 * ESTADOS VACÍOS Y CARGA
 * ========================================================== */
.empty-folder,
.empty,
.cloud-folder-loading-grid {
    color: var(--cc-text-secondary) !important;
    background: transparent !important;
}

.carajillo-spinner,
.cloud-loading-spinner,
.carajillo-inline-spinner {
    border-color: var(--cc-border) !important;
    border-top-color: var(--cc-accent) !important;
}