/* =========================================
   1. ESTRUCTURA Y MARCA (CREATIGRAF)
   ========================================= */
.bg-login-custom {
    background-color: #052c3c;
    background-image: radial-gradient(circle at center, #052c3c 0%, #031a24 100%);
}

.bg-header-custom {
    background-color: #052c3c;
    border-bottom: 1px solid #0a3a4e;
}

.custom-scroll::-webkit-scrollbar { width: 6px; }
.custom-scroll::-webkit-scrollbar-thumb { background: #052c3c; border-radius: 10px; }

.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* =========================================
   2. ANIMACIONES Y ESTADOS
   ========================================= */
.fade-in { animation: fadeIn 0.4s ease-out; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

.scale-in, .zoom-in { animation: scaleIn 0.3s ease-out; }
@keyframes scaleIn { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: scale(1); } }

@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.7; } }

.stock-rojo { background: #fef2f2; border: 2px solid #ef4444; color: #991b1b; animation: pulse 2s infinite; }
.stock-naranja { background: #fff7ed; border: 2px solid #fb923c; color: #9a3412; }
.solo-lectura { opacity: 0.6; pointer-events: none; filter: grayscale(1); }

/* =========================================
   3. ESTILOS DE FORMULARIOS (MODERNO)
   ========================================= */

/* Para que los selectores y inputs nativos se vean Premium */
select, input {
    height: 54px !important;
    background-color: #f8fafc !important;
    border: 2px solid #e2e8f0 !important;
    border-radius: 18px !important;
    padding: 0 16px !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    transition: all 0.3s ease !important;
    outline: none !important;
    appearance: none; /* Quita el estilo viejo de sistema */
}

select:focus, input:focus {
    border-color: #009fe3 !important;
    background-color: #ffffff !important;
    box-shadow: 0 0 0 4px rgba(0, 159, 227, 0.1) !important;
}

/* Flecha personalizada para los select nativos */
select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%2394a3b8' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 12px center;
    background-repeat: no-repeat;
    background-size: 1.5em 1.5em;
    padding-right: 40px !important;
}

/* =========================================
   4. SEGURIDAD Y PERFIL
   ========================================= */
.role-vendedor #tab-produccion button,
.role-vendedor .btn-finalizar, 
.role-vendedor .btn-insumos {
    display: none !important;
}

.btn-insumos {
    display: flex !important; /* Esto lo hace visible en móvil y PC */
}

/* Si un vendedor entra, la regla de arriba de "vendedor" lo volverá a ocultar por seguridad */

*:focus { outline: none !important; }

#perfil_new_pin::placeholder, 
#perfil_confirm_pin::placeholder {
    letter-spacing: normal;
    font-size: 12px;
    font-weight: 700;
}
/* Esto evita que el modal mutile la lista flotante */
#modalMateriales .max-h-\[60vh\], 
#modalMateriales .overflow-y-auto {
    overflow-y: visible !important;
    overflow-x: visible !important;
}

/* Opcional: Para que el cuerpo del modal sí tenga scroll si hay muchas filas, 
pero la lista de búsqueda siempre flote por encima */
.fila-insumo {
    position: relative !important;
}
#whatsappMaster {
    padding-left: 40px !important; /* Esto le da un espacio fijo y seguro */
}