/* css/global.css - Estilos Maestros de BINA */

/* Tipografía y Fondos Base */
body { font-family: 'Roboto', sans-serif; transition: background-color 0.3s, color 0.3s; }

/* Scrollbars Elegantes */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; }
.dark ::-webkit-scrollbar-thumb { background: #475569; }
.custom-scroll::-webkit-scrollbar { width: 6px; }
.custom-scroll::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; }
.dark .custom-scroll::-webkit-scrollbar-thumb { background: #475569; }

/* Animaciones Generales */
.fade-in { animation: fadeIn 0.4s ease-out forwards; }
@keyframes fadeIn { 
    from { opacity: 0; transform: translateY(10px); } 
    to { opacity: 1; transform: translateY(0); } 
}

/* Textos */
.uppercase-input { text-transform: uppercase; }

/* ------------------------------------------
   FORMULARIOS Y ENTRADAS (INPUTS)
   ------------------------------------------ */
.label { display: block; font-size: 0.7rem; font-weight: 700; color: #64748b; text-transform: uppercase; margin-bottom: 0.4rem; letter-spacing: 0.05em; }
.dark .label { color: #94a3b8; }

.input, .input-suave { width: 100%; padding: 0.8rem; border-radius: 0.75rem; border: 2px solid #e2e8f0; outline: none; transition: all 0.2s; background: white; font-size: 0.9rem; color: #1e293b; font-weight: 500; }
.input:focus, .input-suave:focus { border-color: #E27D60; box-shadow: 0 0 0 3px rgba(226, 125, 96, 0.1); }
.dark .input, .dark .input-suave { background: #1e293b; border-color: #334155; color: white; }

.input[readonly] { background-color: #f1f5f9; color: #64748b; border-color: #cbd5e1; cursor: not-allowed; }
.dark .input[readonly] { background-color: #0f172a; border-color: #1e293b; }

input[type="time"]::-webkit-calendar-picker-indicator,
input[type="date"]::-webkit-calendar-picker-indicator { cursor: pointer; opacity: 0.6; transition: 0.2s; }
input[type="time"]::-webkit-calendar-picker-indicator:hover,
input[type="date"]::-webkit-calendar-picker-indicator:hover { opacity: 1; }

/* Buscadores Superiores */
.filter-input { background: white; border-radius: 99px; padding: 0.6rem 1rem; border: 1px solid #e2e8f0; font-size: 0.85rem; font-weight: 600; outline: none; }
.filter-input:focus { border-color: #E27D60; }
.dark .filter-input { background: #1e293b; border-color: #334155; color: #f8fafc; }

/* ------------------------------------------
   COMPONENTES BINA
   ------------------------------------------ */
   
/* Tarjetas de Galería (Inventario) */
.photo-card { position: relative; border-radius: 12px; overflow: hidden; background: #fff; aspect-ratio: 1; border: 2px solid #e2e8f0; transition: all 0.2s; }
.photo-card.is-cover { border-color: #E27D60; box-shadow: 0 4px 12px rgba(226, 125, 96, 0.2); }
.photo-card img { width: 100%; height: 100%; object-fit: cover; }
.photo-actions { position: absolute; bottom: 0; left: 0; right: 0; background: rgba(30, 41, 59, 0.9); padding: 8px; display: flex; justify-content: space-around; opacity: 0; transition: opacity 0.2s; backdrop-filter: blur(2px); }
.photo-card:hover .photo-actions { opacity: 1; }

/* Botones de Documentos */
.doc-btn { transition: all 0.2s; background: white; border: 2px solid #e2e8f0; }
.dark .doc-btn { background: #1e293b; border-color: #334155; }
.doc-uploaded { background-color: #D5F2EF !important; border-color: #2dd4bf !important; color: #0f766e !important; }
.dark .doc-uploaded { background-color: #0f766e !important; color: #D5F2EF !important; border-color: #115e59 !important; }

/* Agenda y Tareas */
.task-checkbox:checked + div { text-decoration: line-through; opacity: 0.6; }
.priority-high, .status-pendiente { border-left-color: #ef4444; }
.priority-medium, .status-proceso { border-left-color: #f59e0b; }
.priority-low, .status-completado { border-left-color: #10b981; }
.status-completado { opacity: 0.6; }

/* Modales */
.modal-overlay { transition: opacity 0.3s ease; }
.modal-container { transition: transform 0.3s ease, opacity 0.3s ease; transform: scale(0.9) translateY(20px); opacity: 0; }
.prop-modal-open .modal-container { transform: scale(1) translateY(0); opacity: 1; }

/* Privacidad (Lentes / Modo Incógnito) */
body.blur-sensitive .sensitive-data { filter: blur(6px); transition: filter 0.3s; }
body.blur-sensitive .sensitive-data:hover { filter: blur(0); cursor: help; }

/* ==========================================
   MODO OSCURO PREMIUM: Inputs sin tono azul
   ========================================== */
.dark .input-suave, 
.dark .input,
.dark .filter-input,
.dark input[type="text"],
.dark input[type="date"],
.dark input[type="time"],
.dark input[type="email"],
.dark input[type="tel"],
.dark input[type="password"],
.dark select,
.dark textarea {
    background-color: rgba(255, 255, 255, 0.04) !important; /* Cristal oscuro translúcido */
    border-color: rgba(255, 255, 255, 0.08) !important;     /* Borde gris muy sutil */
    color: #F8FAFC !important;
}

/* Efecto al hacer clic en un campo (Focus) */
.dark .input-suave:focus, 
.dark .input:focus,
.dark .filter-input:focus,
.dark input:focus,
.dark select:focus,
.dark textarea:focus {
    background-color: rgba(255, 255, 255, 0.07) !important;
    border-color: #E27D60 !important; /* Tu Naranja BINA */
    box-shadow: 0 0 0 2px rgba(226, 125, 96, 0.15) !important;
}

/* Arreglar los íconos dentro de los campos para que no se vean azules */
.dark .fa-user, 
.dark .fa-users, 
.dark .fa-search {
    color: rgba(255, 255, 255, 0.3) !important;
}

/* ==========================================================================
   REGLAS GLOBALES PARA MODO OSCURO (FORMULARIOS Y NAVEGADOR)
   ========================================================================== */

/* 1. Le dice al navegador que use scrollbars y controles nativos oscuros */
html.dark {
    color-scheme: dark;
}

/* 2. Fuerza a todas las opciones de los selectores a tener fondo oscuro y texto claro */
.dark select option {
    background-color: #0f172a !important; /* slate-900 */
    color: #f1f5f9 !important; /* slate-100 */
    padding: 10px; /* Le da un poco más de aire a las opciones */
}

/* ==========================================================================
   MOTOR DE PRIVACIDAD DINÁMICO (BLINDADO)
   ========================================================================== */
body.privacy-active.hide-precios .dato-precio {
    filter: blur(8px) !important; 
    opacity: 0.5 !important; 
    pointer-events: none !important; 
    user-select: none !important;
}

body.privacy-active.hide-telefonos .dato-telefono {
    filter: blur(8px) !important; 
    opacity: 0.5 !important; 
    pointer-events: none !important; 
    user-select: none !important;
}

body.privacy-active.hide-comisiones .dato-comision {
    filter: blur(8px) !important; 
    opacity: 0.5 !important; 
    pointer-events: none !important; 
    user-select: none !important;
}

.dato-precio, .dato-telefono, .dato-comision {
    transition: all 0.3s ease !important;
}