/* --- VARIABLES & THEME --- */
:root { 
    --primary-bg: #f3f4f6; 
    --card-bg: rgba(255, 255, 255, 0.95);
    --card-border: rgba(255, 255, 255, 0.5);
    --text-main: #1f2937;
    --text-muted: #6b7280;
    --table-header: #f9fafb;
    --border-color: #e5e7eb;
}

[data-theme="dark"] {
    --primary-bg: #111827;
    --card-bg: rgba(31, 41, 55, 0.95);
    --card-border: rgba(255, 255, 255, 0.05);
    --text-main: #f9fafb;
    --text-muted: #9ca3af;
    --table-header: #1f2937;
    --border-color: #374151;
}

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

body { 
    background-color: var(--primary-bg); 
    font-family: 'Inter', system-ui, sans-serif; 
    color: var(--text-main);
    transition: background-color 0.3s, color 0.3s;
}

/* Glassmorphism & Containers */
.glass-panel {
    background: var(--card-bg);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--card-border);
    border-radius: 16px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.05);
}

h2, h3, h4, h5, h6 { color: var(--text-main); }
.text-muted { color: var(--text-muted) !important; }

/* --- Tabla Principal --- */
.table-container { 
    background: var(--card-bg); 
    border-radius: 15px; 
    box-shadow: 0 10px 25px rgba(0,0,0,0.03); 
    overflow: hidden; 
    border: 1px solid var(--card-border);
}
.table { color: var(--text-main); }
.table-prod thead th { 
    background-color: var(--table-header); 
    color: var(--text-muted); 
    font-size: 0.8rem; 
    text-transform: uppercase; 
    letter-spacing: 0.5px; 
    border-bottom: 2px solid var(--border-color); 
    vertical-align: middle;
}
.table-prod td { vertical-align: middle; padding: 12px 10px; border-bottom: 1px solid var(--border-color); color: var(--text-main); }
.table-hover tbody tr:hover { background-color: rgba(0,0,0,0.02); }
[data-theme="dark"] .table-hover tbody tr:hover { background-color: rgba(255,255,255,0.05); }

/* --- Elementos UI --- */
.cliente-nombre { font-weight: 700; font-size: 0.95rem; }
.badge-serv { font-size: 0.7rem; background: #e0e7ff; color: #4338ca; padding: 4px 8px; border-radius: 6px; font-weight: 600; text-transform: uppercase; }
.badge-resp { font-size: 0.75rem; padding: 5px 10px; border-radius: 20px; font-weight: 600; }
.bg-mauricio { background-color: #d1fae5; color: #065f46; border: 1px solid #a7f3d0; }
.bg-rebeca { background-color: #fce7f3; color: #9d174d; border: 1px solid #fbcfe8; }

[data-theme="dark"] .bg-mauricio { background-color: #064e3b; color: #a7f3d0; border-color: #065f46; }
[data-theme="dark"] .bg-rebeca { background-color: #831843; color: #fbcfe8; border-color: #9d174d; }

/* --- Estados de Fila --- */
.vencido-row { border-left: 5px solid #dc3545; }
.hoy-row { border-left: 5px solid #ffc107; }
.ok-row { border-left: 5px solid transparent; }
[data-theme="light"] .vencido-row { background-color: #fff5f5 !important; }
[data-theme="light"] .hoy-row { background-color: #fffbf0 !important; }

/* --- Inputs y Checks --- */
.input-fb { border: 1px solid var(--border-color); border-radius: 6px; padding: 4px 8px; font-size: 0.85rem; width: 100%; max-width: 140px; background: transparent; color: var(--text-main); }
.input-fb:focus { border-color: #4f46e5; outline: none; }
.check-group { display: flex; gap: 6px; justify-content: center; }
.form-check-input { width: 1.1em; height: 1.1em; cursor: pointer; border: 2px solid #adb5bd; margin-top: 0; }
.form-check-input:checked { background-color: #10b981; border-color: #10b981; }

/* Modals */
.modal-content { background-color: var(--card-bg); color: var(--text-main); }
.form-control, .form-select { background-color: transparent; border-color: var(--border-color); color: var(--text-main); }
.form-control:focus, .form-select:focus { background-color: transparent; color: var(--text-main); border-color: #4f46e5; box-shadow: 0 0 0 0.25rem rgba(79, 70, 229, 0.25); }

/* --- Toast Notification --- */
#toastBox { position: fixed; bottom: 30px; right: 30px; z-index: 9999; display: none; }
.toast-content { background: #374151; color: #fff; padding: 12px 25px; border-radius: 50px; box-shadow: 0 5px 15px rgba(0,0,0,0.3); display: flex; align-items: center; gap: 10px; font-weight: 500; }

/* --- Kanban --- */
.kanban-col { background: rgba(0,0,0,0.03); border-radius: 12px; padding: 15px; min-height: 60vh; }
[data-theme="dark"] .kanban-col { background: rgba(255,255,255,0.03); }
.kanban-card { background: var(--card-bg); border-radius: 8px; padding: 15px; margin-bottom: 10px; box-shadow: 0 2px 5px rgba(0,0,0,0.05); border: 1px solid var(--card-border); transition: transform 0.2s; }
.kanban-card:hover { transform: translateY(-2px); }

/* --- ESTILOS POST-IT --- */
.postit-container { display: flex; gap: 15px; overflow-x: auto; padding: 10px 5px; }
.postit { background: #fef3c7; min-width: 220px; max-width: 220px; padding: 15px; border-radius: 2px 2px 10px 2px; box-shadow: 2px 4px 6px rgba(0,0,0,0.1); position: relative; border-top: 1px solid #fde68a; transform: rotate(-1deg); transition: transform 0.2s; color: #1f2937; }
.postit:nth-child(even) { transform: rotate(1deg); background: #dcfce7; border-color: #a7f3d0; }
.postit:hover { transform: scale(1.05) rotate(0deg); z-index: 10; }
.postit-close { position: absolute; top: 5px; right: 8px; cursor: pointer; color: #9ca3af; transition: color 0.2s; }
.postit-close:hover { color: #dc2626; }
.postit-from { font-size: 0.75rem; font-weight: bold; color: #6b7280; text-transform: uppercase; margin-bottom: 5px; }
.postit-body { font-family: 'Comic Sans MS', cursive, sans-serif; font-size: 0.95rem; line-height: 1.3; }
.postit-date { font-size: 0.7rem; color: #9ca3af; margin-top: 8px; text-align: right; }

/* --- ANIMACIÓN CAMPANA --- */
@keyframes bell-dance { 0% { transform: rotate(0); } 10% { transform: rotate(15deg); } 20% { transform: rotate(-15deg); } 30% { transform: rotate(10deg); } 40% { transform: rotate(-10deg); } 50% { transform: rotate(0); } 100% { transform: rotate(0); } }
.bell-dancing { animation: bell-dance 1.5s infinite; color: #dc3545; }