/* ===== TEMA NEGRO Y ROJO - TODAS LAS PÁGINAS ===== */

/* Variables de colores */
:root {
    --color-primary: #dc2626;
    --color-primary-dark: #991b1b;
    --color-bg-dark: #0f0f0f;
    --color-bg-medium: #1a1a1a;
    --color-bg-light: #262626;
    --color-text: #ffffff;
    --color-text-secondary: #a3a3a3;
}

/* ===== FONDO GENERAL ===== */
body {
    background: var(--color-bg-dark) !important;
    color: var(--color-text) !important;
}

/* ===== PÁGINA DE LOGIN ===== */
body.login {
    background: linear-gradient(135deg, #1a1a1a 0%, #0f0f0f 50%, #1a0000 100%) !important;
}

.card, .card.floating {
    background: var(--color-bg-medium) !important;
    border: 2px solid var(--color-primary) !important;
    border-radius: 15px !important;
    box-shadow: 0 8px 32px rgba(220, 38, 38, 0.3) !important;
}

/* ===== HEADER/BARRA SUPERIOR ===== */
.header, header {
    background: var(--color-bg-medium) !important;
    border-bottom: 2px solid var(--color-primary) !important;
}

.action {
    color: var(--color-text) !important;
}

.action:hover {
    background: var(--color-bg-light) !important;
    color: var(--color-primary) !important;
}

/* ===== SIDEBAR/MENÚ LATERAL ===== *
.sidebar {
    background: var(--color-bg-medium) !important;
    border-right: 2px solid var(--color-primary) !important;
}

.sidebar nav a {
    color: var(--color-text-secondary) !important;
}

.sidebar nav a:hover,
.sidebar nav a.active {
    background: var(--color-bg-light) !important;
    color: var(--color-primary) !important;
    border-left: 3px solid var(--color-primary) !important;
}

/* ===== BOTONES ===== */
.button, button {
    transition: all 0.3s ease !important;
}

.button:hover, button:hover {
    box-shadow: 0 4px 12px rgba(220, 38, 38, 0.5) !important;
}

.button--flat {
    color: var(--color-primary) !important;
}
.button--block{
    background: var(--color-bg-light) !important;;

}
/*
.button--flat:hover {
    background: var(--color-primary) !important;
    color: white !important;
}

/* ===== INPUTS ===== *
input, textarea, select {
    background: var(--color-bg-light) !important;
    color: var(--color-text) !important;
    border: 2px solid #404040 !important;
    border-radius: 8px !important;
}

input:focus, textarea:focus, select:focus {
    border-color: var(--color-primary) !important;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.2) !important;
    outline: none !important;
}

/* ===== LISTA DE ARCHIVOS ===== */
.item {
    background: var(--color-bg-medium) !important;
    border-bottom: 1px solid #333 !important;
    color: var(--color-text) !important;
}

.item:hover {
    /*background: var(--color-bg-light) !important;*/
    border-left: 3px solid var(--color-primary) !important;
}

.item.selected {
    background: rgba(220, 38, 38, 0.2) !important;
    border-left: 3px solid var(--color-primary) !important;
}

/* ===== BREADCRUMB/RUTA ===== */
.breadcrumbs {
    background: var(--color-bg-dark) !important;
    border-bottom: 1px solid var(--color-primary) !important;
    padding-left: 5px;
}

.breadcrumbs a {
    color: var(--color-text-secondary) !important;
}

.breadcrumbs a:hover {
    color: var(--color-primary) !important;
}

/* ===== MODALES/DIÁLOGOS ===== */
.overlay {
    background: rgba(0, 0, 0, 0.8) !important;
}

.prompt, .card {
    background: var(--color-bg-medium) !important;
    border: 2px solid var(--color-primary) !important;
    color: var(--color-text) !important;
}

.prompt h2, .prompt h3 {
    color: var(--color-text) !important;
    border-bottom: 2px solid var(--color-primary) !important;
}

/* ===== SCROLLBAR ===== */
::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

::-webkit-scrollbar-track {
    background: var(--color-bg-dark);
}

::-webkit-scrollbar-thumb {
    background: var(--color-primary);
    border-radius: 6px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--color-primary-dark);
}

/* ===== ICONOS Y ACCIONES ===== */
.action svg, i {
    color: var(--color-text-secondary) !important;
}

.action:hover svg, .action:hover i {
    color: var(--color-primary) !important;
}

/* ===== EDITOR DE TEXTO ===== */
.editor {
    background: var(--color-bg-dark) !important;
    color: var(--color-text) !important;
}

.editor .toolbar {
    background: var(--color-bg-medium) !important;
    border-bottom: 1px solid var(--color-primary) !important;
}

/* ===== TABLAS ===== */
table {
    background: var(--color-bg-medium) !important;
    color: var(--color-text) !important;
}

th {
    background: var(--color-bg-light) !important;
    color: var(--color-primary) !important;
    border-bottom: 2px solid var(--color-primary) !important;
}

tr:hover {
    background: var(--color-bg-light) !important;
}

/* ===== DROPZONE (subir archivos) ===== */
.dropzone {
    background: var(--color-bg-light) !important;
    border: 2px dashed var(--color-primary) !important;
    color: var(--color-text) !important;
}

.dropzone.active {
    background: rgba(220, 38, 38, 0.1) !important;
    border-color: var(--color-primary) !important;
}

/* ===== PROGRESS BAR ===== */
progress {
    background: var(--color-bg-light) !important;
}

progress::-webkit-progress-bar {
    background: var(--color-bg-light) !important;
}

progress::-webkit-progress-value {
    background: var(--color-primary) !important;
}

progress::-moz-progress-bar {
    background: var(--color-primary) !important;
}

/* ===== CHIPS/TAGS ===== */
.chip {
    background: var(--color-bg-light) !important;
    color: var(--color-text) !important;
    border: 1px solid var(--color-primary) !important;
}

/* ===== LINKS ===== */
a {
    color: var(--color-primary) !important;
}

a:hover {
    color: var(--color-primary-dark) !important;
    text-decoration: underline !important;
}