/* =================================================================
   SINAPSE OS v5.0 - HOJA DE ESTILOS UNIFICADA
   ================================================================= */

/* --- 1. Paleta de Colores y Variables Globales --- */
:root {
    --c-dark-abyss: #0D1117;       /* Negro profundo, para el fondo principal */
    --c-dark-surface: #161B22;    /* Superficie oscura para tarjetas y paneles */
    --c-dark-border: #30363D;     /* Borde sutil para separar elementos */
    --c-text-primary: #E6EDF3;    /* Texto principal, blanco suave */
    --c-text-secondary: #848D97;  /* Texto secundario, gris claro */
    --c-cyan-accent: #38BDF8;      /* Acento principal, cian brillante */
    --c-cyan-hover: #7DD3FC;       /* Acento para interacciones */
    --c-red-danger: #DA3633;       /* Rojo para alertas y botones de peligro */
    --c-green-success: #2DA44E;    /* Verde para confirmaciones */
    --c-yellow-warning: #D29922;  /* Amarillo para advertencias */

    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --border-radius-md: 8px;
    --transition-speed: 0.2s;
}

/* --- 2. Estilos Base y Tipografía --- */
body {
    background-color: var(--c-dark-abyss);
    color: var(--c-text-primary);
    font-family: var(--font-sans);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--c-text-primary);
    font-weight: 600;
}

a {
    color: var(--c-cyan-accent);
    text-decoration: none;
    transition: color var(--transition-speed);
}
a:hover {
    color: var(--c-cyan-hover);
    text-decoration: underline;
}

/* --- 3. Componentes Principales (Navbar, Login, Contenedores) --- */
.navbar {
    background-color: rgba(22, 27, 34, 0.8);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--c-dark-border);
}

.nav-link {
    color: var(--c-text-secondary);
    transition: color var(--transition-speed);
}

.nav-link.active, .nav-link:hover {
    color: var(--c-text-primary);
}

#login-screen {
    background-color: var(--c-dark-abyss);
}

.content-view { display: none; }
.content-view.active { display: block; }

/* --- 4. Tarjetas y Modales --- */
.card, .modal-content {
    background-color: var(--c-dark-surface);
    border: 1px solid var(--c-dark-border);
    border-radius: var(--border-radius-md);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.modal-header, .modal-footer {
    border-color: var(--c-dark-border);
}

.text-muted {
    color: var(--c-text-secondary) !important;
}

/* --- 5. Formularios y Botones --- */
.form-control, .form-select {
    background-color: var(--c-dark-abyss) !important;
    border-color: var(--c-dark-border) !important;
    color: var(--c-text-primary) !important;
    border-radius: 6px;
    transition: border-color var(--transition-speed), box-shadow var(--transition-speed);
}

.form-control:focus, .form-select:focus {
    border-color: var(--c-cyan-accent);
    box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.25);
}

.form-control::placeholder, textarea::placeholder {
    color: var(--c-text-secondary);
    opacity: 0.6;
}

.btn {
    border-radius: 6px;
    font-weight: 600;
    transition: all var(--transition-speed);
}

.btn-primary {
    background-color: var(--c-cyan-accent);
    border-color: var(--c-cyan-accent);
    color: var(--c-dark-abyss);
}
.btn-primary:hover {
    background-color: var(--c-cyan-hover);
    border-color: var(--c-cyan-hover);
    transform: translateY(-2px);
}

/* --- 6. Módulos Específicos (Kanban, Herramientas) --- */
.kanban-column {
    background-color: rgba(13, 17, 23, 0.5);
    border-radius: var(--border-radius-md);
    min-height: 400px;
    padding: 15px;
}

.tasks-container {
    min-height: 350px;
}

.task-card {
    background-color: var(--c-dark-surface);
    border: 1px solid var(--c-dark-border);
    border-left: 4px solid var(--c-text-secondary);
    cursor: grab;
    margin-bottom: 10px;
    padding: 12px;
    border-radius: 6px;
    transition: box-shadow var(--transition-speed);
}
.task-card:hover {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}
.task-card.dragging {
    opacity: 0.5;
}

.tool-card-launcher {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    background-color: var(--c-dark-surface);
    border: 1px solid var(--c-dark-border);
    border-radius: var(--border-radius-md);
    padding: 2rem;
    cursor: pointer;
    transition: transform var(--transition-speed), box-shadow var(--transition-speed), border-color var(--transition-speed);
    height: 100%;
}
.tool-card-launcher:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.4);
    border-color: var(--c-cyan-accent);
}
.tool-card-launcher i { font-size: 2.5rem; color: var(--c-cyan-accent); }
.tool-card-launcher h5 { margin-top: 1rem; }

.tool-card-launcher.small-card {
    padding: 1rem;
    height: 120px;
}
.tool-card-launcher .small-icon {
    font-size: 2rem;
    margin-bottom: 0.5rem;
}
.tool-card-launcher .small-title {
    font-size: 0.85rem;
}
/* --- 7. Componentes Nuevos (Offcanvas, Gráficas, Tutorial) --- */

/* 7.1 Barra Lateral de Configuración (Offcanvas) */
.offcanvas {
    background-color: var(--c-dark-surface);
    border-left: 1px solid var(--c-dark-border);
    color: var(--c-text-primary);
}

.offcanvas-header {
    border-bottom: 1px solid var(--c-dark-border);
}

.offcanvas-title {
    color: var(--c-text-primary);
}

.btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

/* 7.2 Contenedores de Gráficas (Dashboard) */
.chart-container {
    background-color: var(--c-dark-surface);
    border: 1px solid var(--c-dark-border);
    padding: 1.5rem;
    border-radius: var(--border-radius-md);
    height: 350px; /* Altura fija para consistencia */
}

/* --- REEMPLAZO PARA ESTILOS DE TUTORIAL (Shepherd.js) --- */

/* 1. Contenedor y texto principal */
.shepherd-element {
    background: var(--c-dark-surface);
    border: 1px solid var(--c-dark-border);
}
.shepherd-header {
    background: rgba(13, 17, 23, 0.5);
    border-bottom: 1px solid var(--c-dark-border);
}
.shepherd-title {
    color: var(--c-text-primary) !important;
}
/* Esta es la regla clave para el texto negro en fondo oscuro */
.shepherd-text {
    color: var(--c-text-secondary) !important;
}

/* 2. Anulación explícita para TODOS los botones del pie de página del tutorial */
.shepherd-footer .shepherd-button {
    background-color: var(--c-dark-border);      /* FONDO OSCURO para botones por defecto (Atrás, Salir) */
    color: var(--c-text-primary) !important;     /* TEXTO CLARO para que contraste */
    border: none;
    transition: background-color 0.2s;
}

/* 3. Regla específica para el botón de acción principal */
/* Esta es la regla clave para el texto blanco en fondo blanco */
.shepherd-footer .shepherd-button.shepherd-button-primary {
    background-color: var(--c-cyan-accent);      /* FONDO CLARO para el botón principal (Siguiente, Fin) */
    color: var(--c-dark-abyss) !important;       /* TEXTO OSCURO para que contraste */
}

/* 4. Efectos hover para ambos tipos de botones */
.shepherd-footer .shepherd-button:hover {
     background-color: #484f58;
}
.shepherd-footer .shepherd-button.shepherd-button-primary:hover {
    background-color: var(--c-cyan-hover);
}

/* 5. Flecha del tooltip */
.shepherd-arrow::before {
    background-color: var(--c-dark-surface) !important;
}
/* --- 8. Anulaciones Globales para Consistencia del Tema --- */

/* Esta sección fuerza los colores de texto correctos en elementos clave
  para anular cualquier estilo predeterminado de Bootstrap que pueda entrar en conflicto.
*/
.card-title, .modal-title, .kanban-title, .offcanvas-title, h1, h2, h3, h4, h5, h6 {
    color: var(--c-text-primary) !important; /* Forzar texto principal (blanco suave) */
}

.card-subtitle, .text-muted {
    color: var(--c-text-secondary) !important; /* Forzar texto secundario (gris claro) */
}
/* --- 9. Forzado de Color de Texto Global --- */

/* Esta regla es más general y asegura que los elementos de texto comunes
   dentro de la app principal hereden el color correcto. */
#app-container, .modal-body, .offcanvas-body {
    color: var(--c-text-primary);
}

#app-container .form-label, #app-container label {
    color: var(--c-text-secondary);
}
/* --- BLOQUE DE ESTILOS FINAL Y BALANCEADO --- */

/* 1. Regla base para el contenido principal. Anula el color negro de .card */
#app-container .content-view .card {
    color: var(--c-text-primary) !important;
}

/* 2. Regla general para párrafos y etiquetas que no estén ya definidos */
#app-container .content-view p,
#app-container .content-view label {
    color: var(--c-text-primary) !important;
}

/* 3. Regla de ALTA PRIORIDAD para textos pequeños y secundarios.
   Esta anulará a las reglas anteriores para estos elementos específicos. */
#app-container .content-view small,
#app-container .content-view .text-muted {
    color: var(--c-text-secondary) !important;
}

/* 4. Reglas de protección para Títulos y Enlaces, para asegurar que no se vean afectados. */
#app-container .content-view h1,
#app-container .content-view h2,
#app-container .content-view h3,
#app-container .content-view h4,
#app-container .content-view h5,
#app-container .content-view h6 {
    color: var(--c-text-primary) !important;
}

#app-container .content-view a {
    color: var(--c-cyan-accent) !important;
}