/* Indicadores visuales de prioridad (Borde izquierdo de colores). */ .p-low { border-left: 4px solid #28a745; /* Verde para prioridad baja. */ } .p-mid { border-left: 4px solid #ffc107; /* Amarillo para prioridad media. */ } /* Estilo especial para prioridad alta: Borde rojo, negrita y sombra. Defino esto aquí para no tener que inyectar estilos complejos desde JavaScript. */ .p-high { border-left: 4px solid #dc3545; font-weight: bold; box-shadow: 0 4px 12px rgba(220, 53, 69, 0.3); } /* Colores de fondo según el estado de la tarea. */ .s-pending { background-color: #fff3cd; /* Amarillo suave. */ } .s-progress { background-color: #cfe2ff; /* Azul suave. */ } .s-done { background-color: #d1e7dd; /* Verde suave. */ } /* Diseño base de la tarjeta de hábito. */ .habit-card { padding: 12px; margin-bottom: 10px; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* Sombra ligera para dar profundidad. */ cursor: move; /* El cursor cambia para indicar que se puede arrastrar. */ transition: all 0.3s ease; /* Suavizo las animaciones de movimiento y hover. */ } /* Efecto cuando paso el mouse por encima de una tarjeta. */ .habit-card:hover { transform: translateY(-2px); /* La tarjeta sube un poquito. */ box-shadow: 0 4px 8px rgba(0,0,0,0.15); /* La sombra crece. */ } /* Tipografía del título dentro de la tarjeta. */ .habit-card h4 { font-size: 1.1rem; margin-bottom: 8px; font-weight: 600; } /* Estilo para los textos pequeños (frecuencia, estado). */ .habit-card small { display: block; /* Hago que ocupen su propia línea. */ color: #6c757d; /* Gris oscuro para texto secundario. */ margin-bottom: 4px; } /* Espaciado para los botones de acción dentro de la tarjeta. */ .habit-card .btn { margin-right: 5px; margin-top: 8px; } /* --- CONFIGURACIÓN DEL MODO OSCURO --- */ /* Estas reglas solo se aplican si el tiene la clase 'dark-mode'. */ body.dark-mode { background-color: #1a1d20 !important; /* Fondo casi negro. */ color: #e9ecef !important; /* Texto casi blanco. */ } /* Ajusto los colores de las tarjetas contenedoras en modo oscuro. */ body.dark-mode .card { background-color: #2d3238 !important; color: #e9ecef !important; border-color: #495057 !important; } body.dark-mode .card-header { background-color: #3a3f47 !important; color: #ffffff !important; border-bottom: 1px solid #495057 !important; } /* Ajusto los inputs y selects para que no brillen en blanco. */ body.dark-mode .form-control, body.dark-mode .form-select { background-color: #3a3f47 !important; color: #e9ecef !important; border-color: #495057 !important; } /* El texto de ayuda dentro de los inputs (placeholder). */ body.dark-mode .form-control::placeholder { color: #adb5bd !important; } body.dark-mode .form-label { color: #e9ecef !important; } /* Ajusto las tarjetas de hábitos individuales para el modo oscuro. */ body.dark-mode .habit-card { background-color: #383d45 !important; color: #e9ecef !important; border: 1px solid #495057 !important; } body.dark-mode .habit-card h4 { color: #ffffff !important; } body.dark-mode .habit-card small { color: #adb5bd !important; } /* Redefino los colores de estado para que tengan buen contraste en oscuro. */ body.dark-mode .s-pending { background-color: #5a4a1a !important; color: #ffc107 !important; } body.dark-mode .s-progress { background-color: #1a3a5a !important; color: #66b3ff !important; } body.dark-mode .s-done { background-color: #1a4a2a !important; color: #66ff99 !important; } /* Ajusto los bordes de prioridad para que resalten en oscuro. */ body.dark-mode .p-low { border-left-color: #66ff99 !important; } body.dark-mode .p-mid { border-left-color: #ffc107 !important; } body.dark-mode .p-high { border-left-color: #ff6b6b !important; } /* Ajusto los encabezados de las columnas. */ body.dark-mode .bg-warning { background-color: #7a5c1e !important; color: #ffc107 !important; } body.dark-mode .bg-info { background-color: #1e4a5c !important; color: #66b3ff !important; } body.dark-mode .bg-success { background-color: #1e5c3a !important; color: #66ff99 !important; } /* Clase que se agrega a la tarjeta que estoy moviendo actualmente. */ .dragging { opacity: 0.5; /* La hago semitransparente. */ } .drag-over { background-color: #e9ecef; border: 2px dashed #6c757d; /* Borde punteado para indicar zona de aterrizaje. */ } /* Ajuste del borde punteado para el modo oscuro. */ body.dark-mode .drag-over { background-color: #3a3f47 !important; border: 2px dashed #adb5bd !important; } /* Mensaje cuando una columna no tiene tareas. */ .empty-message { text-align: center; color: #6c757d; padding: 20px; font-style: italic; /* Ajusto el color para modo oscuro aquí mismo si es necesario. */ } body.dark-mode .empty-message { color: #adb5bd !important; }