/* =========================================
   ESTILOS GLOBALES - TORQUIA
   ========================================= */

/* Fuente base para consistencia en todo el sistema */
body {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* =========================================
   COMPONENTES UI: SPINNERS
   ========================================= */

/* Spinner Base (Violeta por defecto - usado en Backup) */
.spinner {
    border: 4px solid rgba(0, 0, 0, 0.1);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border-left-color: #7c3aed; /* Violeta base */
    animation: spin 1s ease infinite;
}

/* Variaciones de Color por Módulo */
.spinner-cyan { border-left-color: #0891b2; }   /* Agenda */
.spinner-lime { border-left-color: #65a30d; }   /* Seguimiento y Pedidos */
.spinner-blue { border-left-color: #0099ff; }   /* Reloj */
.spinner-red  { border-left-color: #991b1b; }   /* Usuarios */
.spinner-teal { border-left-color: #14b8a6; }   /* Tareas */
.spinner-brown { border-left-color: #78350f; }  /* Proveedores (Nuevo) */

/* Animación de rotación compartida */
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* =========================================
   TARJETAS DEL DASHBOARD (INDEX)
   ========================================= */
.card-dashboard {
    background-color: white;
    padding: 1.5rem; /* p-6 */
    border-radius: 0.75rem; /* rounded-xl */
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); /* shadow-sm */
    border: 1px solid #e7e5e4; /* border-stone-200 */
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transition: all 0.3s ease;
    cursor: pointer;
    text-decoration: none;
    height: 100%;
    position: relative;
    overflow: hidden;
}

.card-dashboard:hover {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}

.card-icon-circle {
    width: 4rem;
    height: 4rem;
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
    transition: all 0.3s ease;
}

/* Colores Específicos de Tarjetas */
.card-cyan:hover { border-color: #06b6d4; }
.card-cyan .card-icon-circle { background-color: #ecfeff; color: #0891b2; }
.card-cyan:hover .card-icon-circle { background-color: #0891b2; color: white; }

.card-blue:hover { border-color: #3b82f6; }
.card-blue .card-icon-circle { background-color: #eff6ff; color: #2563eb; }
.card-blue:hover .card-icon-circle { background-color: #2563eb; color: white; }

.card-lime:hover { border-color: #84cc16; }
.card-lime .card-icon-circle { background-color: #f7fee7; color: #65a30d; }
.card-lime:hover .card-icon-circle { background-color: #65a30d; color: white; }

.card-teal:hover { border-color: #14b8a6; }
.card-teal .card-icon-circle { background-color: #f0fdfa; color: #0d9488; }
.card-teal:hover .card-icon-circle { background-color: #0d9488; color: white; }

.card-orange:hover { border-color: #f97316; }
.card-orange .card-icon-circle { background-color: #fff7ed; color: #ea580c; }
.card-orange:hover .card-icon-circle { background-color: #ea580c; color: white; }

.card-red:hover { border-color: #ef4444; }
.card-red .card-icon-circle { background-color: #fef2f2; color: #dc2626; }
.card-red:hover .card-icon-circle { background-color: #dc2626; color: white; }

.card-violet:hover { border-color: #8b5cf6; }
.card-violet .card-icon-circle { background-color: #f5f3ff; color: #7c3aed; }
.card-violet:hover .card-icon-circle { background-color: #7c3aed; color: white; }

/* NUEVO: Tema Marrón (Proveedores) */
.card-brown:hover { border-color: #d97706; } /* amber-600 */
.card-brown .card-icon-circle { background-color: #fffbeb; color: #92400e; } /* amber-50, amber-800 */
.card-brown:hover .card-icon-circle { background-color: #92400e; color: white; }


/* =========================================
   ANIMACIONES
   ========================================= */

.animate-fade-in { animation: fadeIn 0.5s ease-out forwards; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

.animate-in { animation-duration: 0.3s; animation-fill-mode: both; }
.fade-in { animation-name: fadeInOpacity; }
.zoom-in { animation-name: zoomInScale; }

@keyframes fadeInOpacity { from { opacity: 0; } to { opacity: 1; } }
@keyframes zoomInScale { from { transform: scale(0.95); } to { transform: scale(1); } }

.slide-in-from-top-2 { animation-name: slideInFromTop; }
@keyframes slideInFromTop { from { opacity: 0; transform: translateY(-0.5rem); } to { opacity: 1; transform: translateY(0); } }

.slide-in-from-bottom-4 { animation-name: slideInFromBottom; }
@keyframes slideInFromBottom { from { opacity: 0; transform: translateY(1rem); } to { opacity: 1; transform: translateY(0); } }

@keyframes pulse-soft { 0%, 100% { opacity: 1; } 50% { opacity: .7; } }
.animate-pulse { animation: pulse-soft 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }

@keyframes slideUpFade { from { opacity: 0; transform: translateY(20px); }o { opacity: 1; transform: translateY(0); }}
.animate-slide-up { animation: slideUpFade 0.3s ease-out forwards; }


.toast-centered-bottom {
    left: 50%;
    transform: translateX(-50%); /* Centrado horizontal inicial */
    animation: slideUpCenter 0.3s ease-out forwards;
    
    /* --- CORRECCIÓN PARA MÓVIL --- */
    width: fit-content;       /* Ajusta el ancho al contenido real */
    max-width: 90vw;          /* Evita que sea más ancho que el 90% de la pantalla */
    white-space: normal;      /* Permite que el texto baje de línea si es muy largo */
    text-align: center;       /* Centra el texto si hay varias líneas */
}

@keyframes slideUpCenter {
    from { 
        opacity: 0; 
        transform: translate(-50%, 20px); /* Mantiene centro X, baja en Y */
    }
    to { 
        opacity: 1; 
        transform: translate(-50%, 0); /* Mantiene centro X, posición final Y */
    }
}


/* =========================================
   COMPONENTES DE FORMULARIO (Inputs, Sliders, Checks)
   ========================================= */

/* --- Sliders (Range) --- */
/* Base (Cyan - Agenda) */
input[type=range] { -webkit-appearance: none; width: 100%; background: transparent; }
input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none; height: 16px; width: 16px; border-radius: 50%;
    background: #0891b2; cursor: pointer; margin-top: -6px; 
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}
input[type=range]::-webkit-slider-runnable-track { width: 100%; height: 4px; cursor: pointer; background: #cbd5e1; border-radius: 2px; }

/* Variación Slider Rojo (Pedidos) */
.range-red::-webkit-slider-thumb { background: #dc2626; height: 20px; width: 20px; margin-top: -8px; }

/* Variación Slider Teal (Tareas) */
.range-teal::-webkit-slider-thumb { background: #0d9488; height: 20px; width: 20px; margin-top: -8px; }
.range-teal::-webkit-slider-runnable-track { background: #ccfbf1; }

/* --- Checkboxes & Switches --- */
/* Toggle Switch (Usuarios) */
.toggle-checkbox:checked { right: 0; border-color: #ef4444; }
.toggle-checkbox:checked + .toggle-label { background-color: #ef4444; }

/* Checkbox Tareas (Circular Teal) */
.checkbox-wrapper input:checked + div {
    background-color: #14b8a6; /* teal-500 */
    border-color: #14b8a6;
}
.checkbox-wrapper input:checked + div svg {
    display: block;
}

/* =========================================
   UTILIDADES & DECORACIÓN
   ========================================= */

/* Scrollbar personalizado */
.day-view-scroll::-webkit-scrollbar { width: 8px; }
.day-view-scroll::-webkit-scrollbar-track { background: #f1f5f9; }
.day-view-scroll::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
.day-view-scroll::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

/* Ocultar scrollbar (Tareas) */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* Cursores */
.cursor-grab { cursor: grab; }
.cursor-grabbing { cursor: grabbing !important; }
.draggable-item { cursor: grab; }
.draggable-item:active { cursor: grabbing; }
.dragging { opacity: 0.5; background: #f3f4f6; }

/* Fondo Decorativo (404) */
.pattern-bg {
    background-image: radial-gradient(#fecaca 1px, transparent 1px); /* Red-200 dots */
    background-size: 24px 24px;
}

/* =========================================
   COMPONENTES SEGUIMIENTO & PEDIDOS
   ========================================= */

.bg-olive-900 { background-color: #3f4e38; }
.text-olive-700 { color: #4d5e44; }
.border-olive-200 { border-color: #e7e5e4; }

/* Badges de Estado */
.st-Pedir { background: #FEE2E2; color: #991B1B; border: 1px solid #FCA5A5; }
.st-Prox_Mes { background: #CCFBF1; color: #115E59; border: 1px solid #5EEAD4; }
.st-Pedido { background: #DBEAFE; color: #1E40AF; border: 1px solid #93C5FD; }
.st-Recibido { background: #F3E8FF; color: #6B21A8; border: 1px solid #D8B4FE; }
.st-Entregado { background: #DCFCE7; color: #166534; border: 1px solid #86EFAC; }
.st-Cita { background: #FAF5FF; color: #6B21A8; border: 1px solid #D8B4FE; }
.st-Citado { background: #FEF3C7; color: #92400E; border: 1px solid #FCD34D; }
.st-Cancelado { background: #F3F4F6; color: #374151; border: 1px solid #D1D5DB; text-decoration: line-through; }
.st-Pedido_Incompleto { background: #FFEDD5; color: #9A3412; border: 1px solid #FDBA74; }
.st-Avisado___Completo, .st-Avisado { background: #E0F7FA; color: #006064; border: 1px solid #4DD0E1; }


/* =========================================
   IMPRESIÓN (RELOJ)
   ========================================= */

.print-only { display: none; }

@media print {
    @page { size: A4 landscape; margin: 0mm; } 
    body { 
        background-color: white !important; 
        -webkit-print-color-adjust: exact !important; 
        print-color-adjust: exact !important; 
        padding: 1cm !important; 
    }
    #root > div { background-color: white !important; min-height: 0 !important; }
    .no-print { display: none !important; }
    .print-only { display: block !important; }
    .print-container { box-shadow: none !important; border: none !important; width: 100% !important; }
    tr { break-inside: avoid; }
    .break-inside-avoid { page-break-inside: avoid; }
    ::-webkit-scrollbar { display: none; }
    table { font-size: 11px !important; }
}

.custom-scrollbar::-webkit-scrollbar {
    width: 6px;
}
.custom-scrollbar::-webkit-scrollbar-track {
    background: transparent;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
    background-color: #d6d3d1; /* stone-300 */
    border-radius: 20px;
}
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background-color: #a8a29e; /* stone-400 */
}

.custom-scrollbar::-webkit-scrollbar { width: 6px; }
.custom-scrollbar::-webkit-scrollbar-track { background: #f5f5f4; }
.custom-scrollbar::-webkit-scrollbar-thumb { background-color: #d6d3d1; border-radius: 20px; }
.day-view-scroll { scrollbar-width: thin; }
.dragging-active { opacity: 0.5; pointer-events: none !important; filter: grayscale(100%); }


/* [UX] Loader CSS para evitar pantalla blanca mientras carga React */
#initial-loader {
    position: fixed; inset: 0; background-color: #f5f5f4; 
    display: flex; justify-content: center; align-items: center; z-index: 9999;
}
.spinner {
    width: 40px; height: 40px; border: 4px solid #d6d3d1; 
    border-top-color: #ea580c; border-radius: 50%; animation: spin 1s linear infinite;
}
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
/* Ocultar contenido sin estilizar */
.cloak { visibility: hidden; }

.dnd-poly-drag-image {
    opacity: .5 !important;
}

.dnd-poly-drag-image.dnd-poly-snapback {
    transition-property: transform, -webkit-transform !important;
    transition-duration: 250ms !important;
    transition-timing-function: ease-out !important;
}

.dnd-poly-drag-image.dnd-poly-snapback {
    transition-property: transform, -webkit-transform !important;
    transition-duration: 250ms !important;
    transition-timing-function: ease-out !important;
}

/* =========================================
   UTILIDADES FORMULARIOS (Inputs Numéricos)
   ========================================= */

/* Ocultar flechas (spin-buttons) en inputs de tipo número */
/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}

/* Estilos para la vista previa impresa */
.print-preview h1 { font-size: 24px; font-weight: bold; margin-bottom: 10px; }
.print-preview p { margin-bottom: 5px; }
.print-preview hr { border: 0; border-top: 1px solid #ccc; margin: 15px 0; }
.animate-fade-in { animation: fadeIn 0.3s ease-out; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }