/* ============================================
   ESTILOS PROFESIONALES - SISTEMA ABC
   Paleta EXACTA del base.html (dashboards)
   
   Fuente: base.html :root + body
   --menu-bg:        #0a1628    (sidebar, header)
   --menu-bg-hover:  #122440    (hover states)
   --menu-bg-active: #1a3a5c   (active states)
   --menu-border:    #1e3a50   (bordes)
   --menu-text:      #b0bec5   (texto secundario)
   --menu-text-hover:#e2e8f0   (texto hover)
   --menu-accent:    #00d4aa   (acento menú)
   --accent-color:   #3498db   (acento general/botones)
   --success-color:  #27ae60
   --warning-color:  #f39c12
   --danger-color:   #e74c3c
   body bg:          #0f172a
   card bg:          #1e293b
   text:             #e2e8f0
   font:             'Segoe UI', sans-serif
   ============================================ */

/* --- VARIABLES DE COLOR --- */
:root {
    --color-bg-primary: #0f172a;
    --color-bg-secondary: #0a1628;
    --color-bg-card: #1e293b;
    --color-bg-hover: #122440;
    --color-bg-active: #1a3a5c;
    --color-accent-cyan: #00d4aa;
    --color-accent-blue: #3498db;
    --color-accent-yellow: #f39c12;
    --color-accent-orange: #e74c3c;
    --color-text-primary: #e2e8f0;
    --color-text-secondary: #b0bec5;
    --color-border: #1e3a50;
    --color-border-subtle: rgba(30, 58, 80, 0.5);

    /* === OVERRIDE variables de Django base.css === */
    --primary: #00d4aa;
    --secondary: #1a3a5c;
    --accent: #3498db;
    --primary-fg: #e2e8f0;
    --body-fg: #e2e8f0;
    --body-bg: #0f172a;
    --body-quiet-color: #b0bec5;
    --body-medium-color: #b0bec5;
    --body-loud-color: #e2e8f0;
    --header-color: #0a1628;
    --header-branding-color: #00d4aa;
    --header-bg: #0a1628;
    --header-link-color: #e2e8f0;
    --breadcrumbs-fg: #b0bec5;
    --breadcrumbs-link-fg: #00d4aa;
    --breadcrumbs-bg: #0a1628;
    --link-fg: #00d4aa;
    --link-hover-color: #e2e8f0;
    --link-selected-fg: #00d4aa;
    --hairline-color: #1e3a50;
    --border-color: #1e3a50;
    --error-fg: #e74c3c;
    --message-success-bg: rgba(39, 174, 96, 0.15);
    --message-warning-bg: rgba(243, 156, 18, 0.15);
    --message-error-bg: rgba(231, 76, 60, 0.15);
    --darkened-bg: #0a1628;
    --selected-bg: #122440;
    --selected-row: #122440;
    --button-fg: #e2e8f0;
    --button-bg: #1e293b;
    --button-hover-bg: #122440;
    --default-button-bg: #1e293b;
    --default-button-hover-bg: #122440;
    --close-button-bg: #1e293b;
    --close-button-hover-bg: #122440;
    --delete-button-bg: rgba(231, 76, 60, 0.2);
    --delete-button-hover-bg: rgba(231, 76, 60, 0.3);
    --object-tools-fg: #e2e8f0;
    --object-tools-bg: #1e293b;
    --object-tools-hover-bg: #122440;
    color-scheme: dark;
}

/* --- FONDO PRINCIPAL --- */
body,
.admin-panel,
#content {
    background-color: var(--color-bg-primary) !important;
    color: var(--color-text-primary) !important;
    font-family: 'Segoe UI', sans-serif;
}

/* --- HEADER PRINCIPAL --- */
.header-title,
h1, h2 {
    color: var(--color-text-primary) !important;
    font-family: 'Segoe UI', sans-serif;
    font-weight: 600;
    letter-spacing: 0.5px;
}

h1 {
    font-size: 2rem;
    margin-bottom: 0.5rem;
}

/* --- SECCIONES (ABC_COSTING, AUTHENTICATION) --- */
.module,
.section-header,
h2[style*="background"] {
    background: var(--color-bg-card) !important;
    border: 1px solid var(--color-border) !important;
    border-left: 4px solid var(--color-accent-cyan) !important;
    border-radius: 12px;
    padding: 12px 20px !important;
    margin: 20px 0 15px 0 !important;
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.08);
    color: var(--color-text-primary) !important;
}

/* --- TABLA DE ADMINISTRACIÓN --- */
table,
.changelist,
.admin-table {
    background-color: var(--color-bg-card) !important;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.08);
}

/* Filas de tabla */
tr,
.row1, .row2 {
    background-color: transparent !important;
    border-bottom: 1px solid var(--color-border-subtle) !important;
    transition: background 0.3s ease;
}

tr:hover,
.row1:hover,
.row2:hover {
    background-color: var(--color-bg-hover) !important;
}

/* Alternancia de colores sutiles */
tr:nth-child(even) {
    background-color: rgba(10, 22, 40, 0.3) !important;
}

/* Celdas */
td, th {
    color: var(--color-text-primary) !important;
    padding: 14px 16px !important;
    border: none !important;
    font-family: 'Segoe UI', sans-serif;
}

th {
    background-color: var(--color-bg-hover) !important;
    color: var(--color-accent-cyan) !important;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 0.5px;
}

/* Enlaces en tabla */
td a {
    color: var(--color-accent-cyan) !important;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.3s ease;
}

td a:hover {
    color: var(--color-accent-blue) !important;
}

/* --- BOTONES DE ACCIÓN --- */
.addlink,
.add-button,
a[href*="add"],
button[name*="add"],
.button.default,
input[type="submit"] {
    background: #1e293b !important;
    color: #e2e8f0 !important;
    border: 1px solid #1e3a50 !important;
    padding: 8px 16px !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    font-family: 'Segoe UI', sans-serif !important;
    cursor: pointer;
    transition: background 0.3s ease;
}

.addlink:hover,
input[type="submit"]:hover {
    background: #122440 !important;
    border-color: #00d4aa !important;
}

/* Botón Change */
.changelink,
.change-button,
a[href*="change"] {
    background: #1e293b !important;
    color: #e2e8f0 !important;
    border: 1px solid #1e3a50 !important;
    padding: 8px 16px !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    transition: background 0.3s ease;
}

.changelink:hover {
    background: #122440 !important;
    border-color: #3498db !important;
}

/* Botón Delete */
.deletelink,
.delete-button,
a[href*="delete"] {
    background: #1e293b !important;
    color: #e74c3c !important;
    border: 1px solid rgba(231, 76, 60, 0.3) !important;
    padding: 8px 16px !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    transition: background 0.3s ease;
}

.deletelink:hover {
    background: rgba(231, 76, 60, 0.15) !important;
    border-color: #e74c3c !important;
}

/* --- PANEL "RECENT ACTIONS" --- */
.module.recent-actions,
#recent-actions-module,
.sidebar {
    background-color: var(--color-bg-card) !important;
    border-radius: 12px;
    padding: 20px;
    border: 1px solid var(--color-border);
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.08);
}

.module.recent-actions h2 {
    background: none !important;
    color: var(--color-accent-cyan) !important;
    border-left: none !important;
    font-size: 1.1rem;
    margin-bottom: 15px;
    padding: 0 0 10px 0 !important;
    border-bottom: 1px solid var(--color-border) !important;
}

/* Items de acciones recientes */
.module.recent-actions li,
.recent-action-item {
    padding: 10px 0;
    border-bottom: 1px solid var(--color-border-subtle);
    color: var(--color-text-secondary) !important;
}

.module.recent-actions li:last-child {
    border-bottom: none;
}

.module.recent-actions a {
    color: var(--color-accent-cyan) !important;
    text-decoration: none;
    transition: color 0.3s ease;
}

.module.recent-actions a:hover {
    color: var(--color-accent-blue) !important;
}

/* --- FORMULARIOS --- */
.form-row,
.field-box {
    background-color: var(--color-bg-card);
    padding: 15px;
    margin-bottom: 15px;
    border-radius: 8px;
    border: 1px solid var(--color-border);
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
select,
textarea {
    background-color: var(--color-bg-secondary) !important;
    border: 1px solid var(--color-border) !important;
    color: var(--color-text-primary) !important;
    padding: 10px !important;
    border-radius: 6px !important;
    font-family: 'Segoe UI', sans-serif !important;
    transition: border-color 0.3s ease;
}

input:focus,
select:focus,
textarea:focus {
    border-color: var(--color-accent-cyan) !important;
    box-shadow: 0 0 0 2px rgba(0, 212, 170, 0.15) !important;
    outline: none !important;
}

/* --- BREADCRUMBS --- */
.breadcrumbs,
.breadcrumb {
    background-color: var(--color-bg-secondary) !important;
    padding: 12px 20px !important;
    border-bottom: 1px solid var(--color-border);
    color: var(--color-text-secondary) !important;
}

.breadcrumbs a {
    color: var(--color-accent-cyan) !important;
    text-decoration: none;
}

.breadcrumbs a:hover {
    color: #e2e8f0 !important;
}

/* --- MENSAJES DE SISTEMA --- */
.success,
.messagelist .success {
    background-color: rgba(39, 174, 96, 0.15) !important;
    border-left: 4px solid #27ae60 !important;
    color: var(--color-text-primary) !important;
}

.error,
.messagelist .error {
    background-color: rgba(231, 76, 60, 0.15) !important;
    border-left: 4px solid #e74c3c !important;
}

.warning,
.messagelist .warning {
    background-color: rgba(243, 156, 18, 0.15) !important;
    border-left: 4px solid #f39c12 !important;
}

/* --- PAGINACIÓN --- */
.pagination,
.paginator {
    background-color: var(--color-bg-card);
    padding: 15px;
    border-radius: 8px;
    margin-top: 20px;
    border: 1px solid var(--color-border);
}

.pagination a {
    color: var(--color-accent-cyan) !important;
    padding: 8px 12px;
    border-radius: 4px;
    transition: background 0.3s ease;
}

.pagination a:hover {
    background-color: var(--color-bg-hover);
}

.pagination .current {
    background-color: var(--color-accent-cyan);
    color: var(--color-bg-secondary);
    padding: 8px 12px;
    border-radius: 4px;
    font-weight: 600;
}

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

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

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

::-webkit-scrollbar-thumb:hover {
    background: var(--color-accent-cyan);
}

/* --- BOTÓN SEARCH --- */
#toolbar input[type="submit"],
#changelist-search input[type="submit"] {
    background: #1e293b !important;
    color: #e2e8f0 !important;
    border: 1px solid #1e3a50 !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    padding: 8px 16px !important;
}

#toolbar input[type="submit"]:hover,
#changelist-search input[type="submit"]:hover {
    background: #122440 !important;
    border-color: #00d4aa !important;
}

/* --- LINKS DE CÓDIGO (CC-001, etc.) en tablas --- */
#result_list td a {
    color: #00d4aa !important;
    background: transparent !important;
    text-decoration: none;
    font-weight: 500;
}

#result_list td a:hover {
    color: #e2e8f0 !important;
}

/* --- OBJECT TOOLS (ADD CENTRO DE COSTO, etc.) --- */
.object-tools a,
.object-tools li a {
    background: #1e293b !important;
    color: #e2e8f0 !important;
    border: 1px solid #1e3a50 !important;
    border-radius: 8px !important;
    padding: 8px 16px !important;
}

.object-tools a:hover,
.object-tools li a:hover {
    background: #122440 !important;
    border-color: #00d4aa !important;
}

/* --- HEADER USER TOOLS (CHANGE PASSWORD, VIEW SITE) --- */
#user-tools a {
    color: #b0bec5 !important;
    border: none !important;
    text-decoration: none !important;
}

#user-tools a:hover {
    color: #00d4aa !important;
}

/* Forzar CHANGE PASSWORD sin fondo chillante */
#user-tools a[href*="password"] {
    background: #1e293b !important;
    color: #e2e8f0 !important;
    border: 1px solid #1e3a50 !important;
    border-radius: 6px !important;
    padding: 4px 12px !important;
}

#user-tools a[href*="password"]:hover {
    border-color: #00d4aa !important;
    background: #122440 !important;
}

/* --- SIDEBAR NAV --- */
#nav-sidebar {
    background: var(--color-bg-secondary) !important;
    border-right: 1px solid var(--color-border) !important;
}

#nav-sidebar .module {
    background: transparent !important;
    border: none !important;
    border-left: none !important;
    box-shadow: none !important;
}

#nav-sidebar .module caption {
    background: var(--color-bg-hover) !important;
    color: var(--color-accent-cyan) !important;
    font-weight: 700 !important;
    border: none !important;
    box-shadow: none !important;
}

#nav-sidebar .module th {
    background: transparent !important;
    border: none !important;
}

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

#nav-sidebar a:hover {
    color: #e2e8f0 !important;
    background: var(--color-bg-hover) !important;
}

/* --- QUITAR FONDOS VERDES/NARANJAS DE LINKS EN TABLAS --- */
#result_list a[href],
.change-list a[href],
td a[href] {
    background-color: transparent !important;
    background-image: none !important;
    background: transparent !important;
}

/* --- FILTER SIDEBAR --- */
#changelist-filter {
    background: var(--color-bg-card) !important;
    border: 1px solid var(--color-border) !important;
    border-radius: 12px !important;
}

#changelist-filter h2 {
    color: var(--color-accent-cyan) !important;
    background: var(--color-bg-hover) !important;
    border: none !important;
    box-shadow: none !important;
}

#changelist-filter h3 {
    color: var(--color-text-primary) !important;
    border-bottom: 1px solid var(--color-border) !important;
}

#changelist-filter li {
    color: var(--color-text-secondary) !important;
}

#changelist-filter a {
    color: var(--color-text-secondary) !important;
}

#changelist-filter a:hover {
    color: #e2e8f0 !important;
}

#changelist-filter li.selected a {
    color: var(--color-accent-cyan) !important;
    font-weight: 700 !important;
}

/* --- ACTIONS BAR --- */
.actions {
    background: var(--color-bg-hover) !important;
    border: 1px solid var(--color-border) !important;
    border-radius: 8px !important;
}

.actions label,
.actions .action-counter {
    color: var(--color-text-primary) !important;
}

/* --- SUBMIT ROW --- */
.submit-row {
    background: var(--color-bg-secondary) !important;
    border: 1px solid var(--color-border) !important;
}

/* --- HELP TEXT --- */
.help,
p.help {
    color: var(--color-text-secondary) !important;
}

/* --- RELATED WIDGET WRAPPER --- */
.related-widget-wrapper {
    color: var(--color-text-primary) !important;
}

/* --- CALENDAR --- */
.calendarbox,
.clockbox {
    background: var(--color-bg-card) !important;
    border: 1px solid var(--color-border) !important;
}

/* --- LOGIN PAGE --- */
body.login {
    background: var(--color-bg-secondary) !important;
}

body.login #content {
    background: var(--color-bg-card) !important;
    border: 1px solid var(--color-border) !important;
    border-radius: 12px !important;
}

body.login label {
    color: var(--color-text-primary) !important;
}

/* ============================================
   CORRECCIÓN GLOBAL DE BLANCOS
   Forzar #e2e8f0 en vez de #e2e8f0 en todo
   ============================================ */

/* Títulos principales */
#content h1,
#content h2,
#content-main h1,
#content-main h2,
.content h1,
.content h2 {
    color: #b0bec5 !important;
    font-family: 'Segoe UI', sans-serif !important;
}

/* Texto general del body */
body {
    color: #e2e8f0 !important;
}

/* Módulos - captions y headers */
.module > h2,
.module > caption,
.module > table > caption {
    color: #b0bec5 !important;
    background: var(--color-bg-hover) !important;
    border-left: 4px solid var(--color-accent-cyan) !important;
}

/* Sidebar captions (AUTHENTICATION, SISTEMA ABC) */
#nav-sidebar .module caption,
.sidebar .module caption {
    color: #00d4aa !important;
    font-size: 0.75rem !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
}

/* Sidebar links */
#nav-sidebar .module th a,
#nav-sidebar .module a,
.sidebar .module th a {
    color: #b0bec5 !important;
    font-size: 0.85rem !important;
}

/* Sidebar Add buttons */
#nav-sidebar .module th a.addlink,
.sidebar .addlink {
    color: #b0bec5 !important;
    background: var(--color-bg-hover) !important;
    border: 1px solid var(--color-border) !important;
    padding: 4px 10px !important;
    border-radius: 6px !important;
    font-size: 0.75rem !important;
}

#nav-sidebar .module th a.addlink:hover,
.sidebar .addlink:hover {
    color: #e2e8f0 !important;
    border-color: #00d4aa !important;
}

/* Filter panel - título FILTER */
#changelist-filter h2 {
    color: #b0bec5 !important;
    font-size: 0.85rem !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
}

/* Filter - Show counts */
#changelist-filter a {
    color: #b0bec5 !important;
}

/* Filter - By carpeta título */
#changelist-filter h3 {
    color: #b0bec5 !important;
    font-size: 0.8rem !important;
}

/* Filter - lista de items */
#changelist-filter ul li a {
    color: #8892a0 !important;
    font-size: 0.8rem !important;
}

#changelist-filter ul li a:hover {
    color: #e2e8f0 !important;
}

#changelist-filter li.selected a {
    color: #00d4aa !important;
}

/* Tabla headers */
#result_list th,
table th {
    color: #b0bec5 !important;
    font-size: 0.8rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

/* Tabla celdas */
#result_list td,
table td {
    color: #e2e8f0 !important;
    font-size: 0.85rem !important;
}

/* Object tools (ADD CENTRO DE COSTO) */
.object-tools a {
    font-size: 0.8rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    color: #b0bec5 !important;
}

.object-tools a:hover {
    color: #e2e8f0 !important;
}

/* User tools en header */
#user-tools {
    color: #b0bec5 !important;
    font-size: 0.85rem !important;
}

#user-tools a {
    color: #b0bec5 !important;
}

#user-tools a:hover {
    color: #00d4aa !important;
}

/* Breadcrumbs */
div.breadcrumbs {
    color: #8892a0 !important;
    font-size: 0.8rem !important;
}

div.breadcrumbs a {
    color: #b0bec5 !important;
}

div.breadcrumbs a:hover {
    color: #00d4aa !important;
}

/* Dashboard botones (Dashboard Principal, Rentabilidad, etc.) */
#content-main a.section[href],
.dashboard a[href*="dashboard"],
.dashboard a[href*="rentabilidad"],
.dashboard a[href*="analisis"],
.dashboard a[href*="costos"] {
    color: #b0bec5 !important;
}

/* Badges (4 modelos, 3 modelos, etc.) */
.module .badge,
.module span[style*="background"] {
    font-size: 0.75rem !important;
}

/* Actions bar texto */
.actions label,
.actions select,
.actions .action-counter {
    color: #b0bec5 !important;
    font-size: 0.85rem !important;
}

/* Forzar que NADA sea blanco puro */
#container * {
    --admin-color-white: #e2e8f0;
}