:root {
    /* Primary Colors */
    --primary-color: #f59e0b; /* Orange */
    --primary-foreground: #000000; /* Black */

    /* Secondary Colors */
    --secondary-color: #262626; /* Dark Gray */
    --secondary-foreground: #e5e5e5; /* Light Gray */

    /* Accent Colors */
    --accent-color: #92400e; /* Darker Orange/Brown */
    --accent-foreground: #fde68a; /* Light Yellow */

    /* Base Colors */
    --background-color: #171717; /* Very Dark Gray */
    --foreground-color: #e5e5e5; /* Light Gray */

    /* Card Colors */
    --card-background: #262626; /* Dark Gray */
    --card-foreground: #e5e5e5; /* Light Gray */

    /* Popover Colors */
    --popover-background: #262626; /* Dark Gray */
    --popover-foreground: #e5e5e5; /* Light Gray */

    /* Muted Colors */
    --muted-color: #262626; /* Dark Gray */
    --muted-foreground: #a3a3a3; /* Medium Gray */

    /* Destructive Colors */
    --destructive-color: #ef4444; /* Red */
    --destructive-foreground: #ffffff; /* White */

    /* Border & Input Colors */
    --border-color: #404040; /* Medium Dark Gray */
    --input-color: #404040; /* Medium Dark Gray */
    --ring-color: #f59e0b; /* Orange */

    /* Chart Colors (using provided chart colors) */
    --chart-1: #fbbf24; /* Light Orange */
    --chart-2: #d97706; /* Dark Orange */
    --chart-3: #92400e; /* Darker Orange/Brown */
    --chart-4: #b45309; /* Medium Dark Orange */
    --chart-5: #92400e; /* Darker Orange/Brown */

    /* Sidebar Colors (using provided sidebar colors) */
    --sidebar-background: #0f0f0f; /* Even Darker Gray */
    --sidebar-foreground: #e5e5e5; /* Light Gray */
    --sidebar-primary: #f59e0b; /* Orange */
    --sidebar-primary-foreground: #ffffff; /* White */
    --sidebar-accent: #92400e; /* Darker Orange/Brown */
    --sidebar-accent-foreground: #fde68a; /* Light Yellow */
    --sidebar-border: #404040; /* Medium Dark Gray */
    --sidebar-ring: #f59e0b; /* Orange */

    /* General UI variables */
    --card-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.3); /* Más pronunciada para fondos oscuros */
    --border-radius: 0.5rem;

    /* Priority Colors Mapping */
    --priority-high: var(--destructive-color); /* Rojo */
    --priority-medium: var(--primary-color); /* Naranja */
    --priority-low: var(--muted-foreground); /* Gris claro para menos énfasis */
}

body {
    font-family: 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    background-color: var(--background-color);
    color: var(--foreground-color);
}

.navbar {
    background-color: var(--card-background) !important;
    box-shadow: var(--card-shadow);
    color: var(--card-foreground);
}

.navbar .navbar-brand, .navbar .nav-link {
    color: var(--foreground-color) !important;
}

.card {
    border: 1px solid var(--border-color); /* Añadir un borde sutil */
    border-radius: var(--border-radius);
    box-shadow: var(--card-shadow);
    overflow: hidden;
    background-color: var(--card-background);
    color: var(--card-foreground);
}

.card-header {
    background-color: var(--secondary-color);
    color: var(--secondary-foreground);
    border-bottom: 1px solid var(--border-color);
    padding: 1.5rem;
    font-size: 1.25rem;
    font-weight: 500;
}

.card-header.register-header {
    background-color: var(--accent-color);
    color: var(--accent-foreground);
}

/* Botones */
.btn-primary {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: var(--primary-foreground);
    transition: all 0.2s ease-in-out;
}

.btn-primary:hover {
    background-color: var(--accent-color);
    border-color: var(--accent-color);
    color: var(--accent-foreground);
}

.btn-success {
    background-color: var(--secondary-color);
    border-color: var(--secondary-color);
    color: var(--secondary-foreground);
    transition: all 0.2s ease-in-out;
}

.btn-success:hover {
    background-color: var(--muted-color);
    border-color: var(--muted-color);
    color: var(--muted-foreground);
}

.btn-outline-secondary {
    border-color: var(--border-color);
    color: var(--foreground-color);
    transition: all 0.2s ease-in-out;
}

.btn-outline-secondary:hover {
    background-color: var(--border-color);
    color: var(--foreground-color);
}

.btn-outline-primary {
    border-color: var(--primary-color);
    color: var(--primary-color);
    transition: all 0.2s ease-in-out;
}

.btn-outline-primary:hover {
    background-color: var(--primary-color);
    color: var(--primary-foreground);
}

.btn-outline-info {
    border-color: var(--info-color);
    color: var(--info-color);
    transition: all 0.2s ease-in-out;
}

.btn-outline-info:hover {
    background-color: var(--info-color);
    color: var(--primary-foreground);
}

.form-control {
    border-radius: 0.25rem;
    background-color: var(--input-color);
    border: 1px solid var(--border-color);
    color: var(--foreground-color);
}

.form-control:focus {
    border-color: var(--ring-color);
    box-shadow: 0 0 0 0.25rem rgba(245, 158, 11, 0.25); /* Usar el color del ring */
    background-color: var(--input-color);
    color: var(--foreground-color);
}

/* Placeholder color for dark inputs */
.form-control::placeholder {
    color: var(--muted-foreground);
    opacity: 0.7;
}

/* Estilos específicos para login/register */
.auth-container {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background-color: var(--background-color);
}

.auth-card {
    width: 100%;
    max-width: 400px;
}

/* Estilos para el dashboard */
.list-group-item {
    border-left-width: 5px;
    border-radius: var(--border-radius);
    margin-bottom: 0.5rem;
    transition: all 0.2s ease-in-out;
    background-color: var(--card-background);
    color: var(--card-foreground);
    border: 1px solid var(--border-color);
}

.list-group-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.2);
}

.list-group-item.task-completed {
    text-decoration: line-through;
    color: var(--muted-foreground);
    background-color: var(--muted-color);
    border-left-color: var(--muted-foreground) !important;
}

/* Colores de borde de tarea según prioridad */
.list-group-item.border-danger { border-left-color: var(--priority-high) !important; }
.list-group-item.border-warning { border-left-color: var(--priority-medium) !important; }
.list-group-item.border-success { border-left-color: var(--priority-low) !important; }

/* Calendario */
#calendar-container .table {
    background-color: var(--card-background);
    color: var(--card-foreground);
    border-color: var(--border-color);
    table-layout: fixed; /* Asegura que las columnas tengan el mismo ancho */
    width: 100%;
}

#calendar-container .table th {
    color: var(--primary-color); /* Días de la semana en naranja */
    border-color: var(--border-color);
    padding: 0.75rem 0.25rem; /* Ajustar padding */
}

#calendar-container .table td {
    border-color: var(--border-color);
    vertical-align: top; /* Alinear contenido al top */
    height: 100px; /* Altura fija para las celdas del día */
    padding: 5px; /* Espaciado interno */
    position: relative; /* Para posicionar elementos internos */
}

#calendar-container .day {
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.2s ease;
    border-radius: var(--border-radius);
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 5px; /* Padding dentro de la celda del día */
    box-sizing: border-box; /* Incluir padding en el tamaño */
}

#calendar-container .day:hover {
    background-color: var(--muted-color);
    transform: translateY(-2px);
    box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.2);
}

#calendar-container .today {
    background-color: var(--primary-color);
    color: var(--primary-foreground);
    border-radius: var(--border-radius);
}

#calendar-container .today small.fw-bold {
    color: var(--primary-foreground);
}

#calendar-container .day small.fw-bold {
    color: var(--foreground-color);
    position: absolute;
    top: 5px;
    right: 5px;
}

/* Estilos para las tareas dentro del calendario */
#calendar-container .task-list-calendar {
    list-style: none;
    padding: 0;
    margin: 0.5rem 0 0 0; /* Ajustar margen superior */
    font-size: 0.75rem;
    line-height: 1.2;
    max-height: calc(100% - 25px); /* Altura máxima para la lista de tareas */
    overflow-y: auto; /* Scroll si hay muchas tareas */
}

#calendar-container .task-list-calendar li {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 2px;
    padding-left: 5px; /* Espacio para el punto */
    position: relative;
}

#calendar-container .task-list-calendar li::before {
    content: '\2022'; /* Bullet point */
    color: var(--primary-color); /* Color del bullet */
    font-weight: bold;
    display: inline-block;
    width: 1em;
    margin-left: -1em;
}

#calendar-container .task-list-calendar li .badge {
    font-size: 0.6em;
    padding: 0.2em 0.4em;
    vertical-align: middle;
    margin-left: 5px;
}

/* Modal de Tareas */
.modal-content {
    background-color: var(--card-background);
    color: var(--card-foreground);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
}

.modal-header {
    background-color: var(--secondary-color);
    color: var(--secondary-foreground);
    border-bottom: 1px solid var(--border-color);
    border-top-left-radius: var(--border-radius);
    border-top-right-radius: var(--border-radius);
    padding: 1.5rem; /* Ensure good padding */
}

.modal-title {
    color: var(--secondary-foreground);
}

.modal-body {
    padding: 1.5rem; /* Add more padding to the body */
}

.modal-body label {
    color: var(--foreground-color);
    margin-bottom: 0.5rem; /* Increase margin-bottom for labels */
    display: block; /* Ensure label takes full width */
}

.modal-body .mb-3 {
    margin-bottom: 1.25rem !important; /* Increase spacing between form groups */
}

.modal-body .input-group-text {
    background-color: var(--border-color); /* Match border color */
    border: 1px solid var(--border-color);
    color: var(--foreground-color);
}

.modal-body .form-control, .modal-body .form-select {
    background-color: #333333; /* Slightly lighter dark gray for inputs */
    border: 1px solid var(--border-color);
    color: var(--foreground-color); /* Light gray text */
    padding: 0.75rem 1rem; /* More padding for inputs */
}

.modal-body .form-control:focus, .modal-body .form-select:focus {
    border-color: var(--ring-color);
    box-shadow: 0 0 0 0.25rem rgba(245, 158, 11, 0.25);
    background-color: #333333; /* Keep background consistent on focus */
    color: var(--foreground-color);
}

.modal-footer {
    border-top: 1px solid var(--border-color);
    background-color: var(--card-background);
    border-bottom-left-radius: var(--border-radius);
    border-bottom-right-radius: var(--border-radius);
    padding: 1rem 1.5rem; /* Adjust padding */
}

/* Buttons in modal footer */
.modal-footer .btn-secondary {
    background-color: var(--muted-color); /* Dark gray */
    border-color: var(--muted-color);
    color: var(--muted-foreground); /* Medium gray text */
}

.modal-footer .btn-secondary:hover {
    background-color: var(--border-color); /* Slightly darker on hover */
    border-color: var(--border-color);
    color: var(--foreground-color);
}

.modal-footer .btn-primary {
    background-color: var(--primary-color); /* Orange */
    border-color: var(--primary-color);
    color: var(--primary-foreground); /* Black text */
}

.modal-footer .btn-primary:hover {
    background-color: var(--accent-color); /* Darker orange/brown */
    border-color: var(--accent-color);
    color: var(--accent-foreground); /* Light yellow text */
}

/* Ajustes para responsividad */
@media (max-width: 768px) {
    .card {
        margin-bottom: 1rem;
    }
    .card-header {
        padding: 1rem;
        font-size: 1rem;
    }
    .auth-card {
        max-width: 90%;
    }
    #calendar-container .table td {
        height: 80px; /* Altura ajustada para móviles */
        padding: 3px;
    }
    #calendar-container .task-list-calendar {
        font-size: 0.65rem;
    }
    #calendar-container .day small.fw-bold {
        font-size: 0.7rem;
        top: 3px;
        right: 3px;
    }
}