/* ═══════════════════════════════════════════════════════════════════════════
   🎨 SISTEMA DE TEMAS V3 - CON DATA-THEME ATTRIBUTE
   ═══════════════════════════════════════════════════════════════════════════
   
   CÓMO FUNCIONA:
   El body tiene un atributo data-theme="midnight|amethyst|emerald|etc"
   Cada tema tiene sus propios colores definidos
   
   USO: document.body.setAttribute('data-theme', 'amethyst');
   ═══════════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════════
   TEMA: MIDNIGHT BLUE (Default)
   ═══════════════════════════════════════════════════════════════════════════ */

:root,
body[data-theme="midnight"] {
    --color-primary: #3b82f6;
    --color-primary-dark: #2563eb;
    --color-primary-light: #60a5fa;
    --color-accent: #f59e0b;
    --color-bg: #0f172a;
    --color-bg-secondary: #1e293b;
    --color-bg-card: #1e293b;
    --color-text: #f1f5f9;
    --color-text-secondary: #94a3b8;
    --color-border: #334155;
}

/* ═══════════════════════════════════════════════════════════════════════════
   TEMA: NOMBRENT (identidad real de marca — fondo verde bosque + acento lima,
   la misma paleta que ya usan panel.html, las fichas publicitarias y el bot de
   WhatsApp en producción: #071411/#0d1f1a/#12261f de fondo, #dffb71 de acento)
   ═══════════════════════════════════════════════════════════════════════════ */

body[data-theme="nombrent"] {
    --color-primary: #dffb71;
    --color-primary-dark: #c8e85a;
    --color-primary-light: #eaffa8;
    --color-accent: #63c79b;
    --color-bg: #071411;
    --color-bg-secondary: #0d1f1a;
    --color-bg-card: #12261f;
    --color-text: #eef8f2;
    --color-text-secondary: #93aca2;
    --color-border: #1e3a31;
}

/* El lima es un color claro: texto blanco encima es ilegible. Todo botón que la
   regla de "colores primarios" (más abajo) pinta con --color-primary necesita
   texto oscuro SOLO en este tema -- en los demás temas (azul, rojo, morado...)
   el fondo es oscuro/saturado y el texto blanco sí funciona. */
body[data-theme="nombrent"] :is(
    .bg-blue-600, .bg-blue-500, .bg-red-600, .bg-red-500,
    .bg-purple-600, .bg-purple-500, .bg-indigo-600, .bg-indigo-500,
    .bg-cyan-600, .bg-cyan-500, .bg-emerald-600, .bg-emerald-500,
    .bg-teal-600, .bg-teal-500, .bg-sky-600, .bg-sky-500,
    .bg-amber-600, .bg-amber-500, .bg-yellow-600, .bg-yellow-500,
    .bg-violet-600, .bg-violet-500, .bg-fuchsia-600, .bg-fuchsia-500,
    .bg-pink-600, .bg-pink-500, .bg-rose-600, .bg-rose-500,
    .bg-lime-600, .bg-lime-500, .bg-green-600, .bg-green-500,
    .bg-orange-600, .bg-orange-500
) {
    color: #071411 !important;
}

/* Mismo problema pero en botones con estilo inline (background:var(--color-primary);
   color:#fff) en vez de clases de Tailwind -- el selector de arriba no los alcanza
   porque un estilo inline le gana a cualquier regla de clase, así que hace falta
   apuntarles por id/clase específica. */
body[data-theme="nombrent"] #nm-crear,
body[data-theme="nombrent"] #am-guardar,
body[data-theme="nombrent"] #dm-save,
body[data-theme="nombrent"] .np-view-tab.active {
    color: #071411 !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   TEMA: AMETHYST DREAM
   ═══════════════════════════════════════════════════════════════════════════ */

body[data-theme="amethyst"] {
    --color-primary: #a855f7;
    --color-primary-dark: #9333ea;
    --color-primary-light: #c084fc;
    --color-accent: #ec4899;
    --color-bg: #1a0f2e;
    --color-bg-secondary: #2d1b4e;
    --color-bg-card: #3d2560;
    --color-text: #f5f3ff;
    --color-text-secondary: #c4b5fd;
    --color-border: #6d28d9;
}

/* ═══════════════════════════════════════════════════════════════════════════
   TEMA: EMERALD FOREST
   ═══════════════════════════════════════════════════════════════════════════ */

body[data-theme="emerald"] {
    --color-primary: #10b981;
    --color-primary-dark: #059669;
    --color-primary-light: #34d399;
    --color-accent: #fbbf24;
    --color-bg: #0a1f1a;
    --color-bg-secondary: #1a3a2e;
    --color-bg-card: #234d3e;
    --color-text: #ecfdf5;
    --color-text-secondary: #86efac;
    --color-border: #047857;
}

/* ═══════════════════════════════════════════════════════════════════════════
   TEMA: CRIMSON NIGHTS
   ═══════════════════════════════════════════════════════════════════════════ */

body[data-theme="crimson"] {
    --color-primary: #dc2626;
    --color-primary-dark: #b91c1c;
    --color-primary-light: #ef4444;
    --color-accent: #f59e0b;
    --color-bg: #1a0a0a;
    --color-bg-secondary: #2d1515;
    --color-bg-card: #3d1f1f;
    --color-text: #fef2f2;
    --color-text-secondary: #fca5a5;
    --color-border: #991b1b;
}

/* ═══════════════════════════════════════════════════════════════════════════
   TEMA: SUNSET ORANGE
   ═══════════════════════════════════════════════════════════════════════════ */

body[data-theme="sunset"] {
    --color-primary: #f97316;
    --color-primary-dark: #ea580c;
    --color-primary-light: #fb923c;
    --color-accent: #fbbf24;
    --color-bg: #1a0f0a;
    --color-bg-secondary: #2d1f15;
    --color-bg-card: #3d2a1a;
    --color-text: #fff7ed;
    --color-text-secondary: #fdba74;
    --color-border: #c2410c;
}

/* ═══════════════════════════════════════════════════════════════════════════
   TEMA: DEEP OCEAN
   ═══════════════════════════════════════════════════════════════════════════ */

body[data-theme="ocean"] {
    --color-primary: #0ea5e9;
    --color-primary-dark: #0284c7;
    --color-primary-light: #38bdf8;
    --color-accent: #06b6d4;
    --color-bg: #0a1929;
    --color-bg-secondary: #1e3a5f;
    --color-bg-card: #2e4a6f;
    --color-text: #e0f2fe;
    --color-text-secondary: #7dd3fc;
    --color-border: #0369a1;
}

/* ═══════════════════════════════════════════════════════════════════════════
   TEMA: FILM NOIR
   ═══════════════════════════════════════════════════════════════════════════ */

body[data-theme="noir"] {
    --color-primary: #ffffff;
    --color-primary-dark: #e5e5e5;
    --color-primary-light: #ffffff;
    --color-accent: #ef4444;
    --color-bg: #000000;
    --color-bg-secondary: #0a0a0a;
    --color-bg-card: #1a1a1a;
    --color-text: #ffffff;
    --color-text-secondary: #a3a3a3;
    --color-border: #404040;
}

/* ═══════════════════════════════════════════════════════════════════════════
   TEMA: ROSE GOLD
   ═══════════════════════════════════════════════════════════════════════════ */

body[data-theme="rose"] {
    --color-primary: #f43f5e;
    --color-primary-dark: #e11d48;
    --color-primary-light: #fb7185;
    --color-accent: #fbbf24;
    --color-bg: #1f0a14;
    --color-bg-secondary: #3d1527;
    --color-bg-card: #4d1f35;
    --color-text: #fff1f2;
    --color-text-secondary: #fda4af;
    --color-border: #be123c;
}

/* ═══════════════════════════════════════════════════════════════════════════
   TEMA: MODO CLARO
   ═══════════════════════════════════════════════════════════════════════════ */

body[data-theme="light"] {
    --color-primary: #2563eb;
    --color-primary-dark: #1d4ed8;
    --color-primary-light: #3b82f6;
    --color-accent: #d97706;
    --color-bg: #f1f5f9;
    --color-bg-secondary: #ffffff;
    --color-bg-card: #f8fafc;
    --color-text: #0f172a;
    --color-text-secondary: #475569;
    --color-border: #cbd5e1;
}

/* En modo claro los textos "blancos" y los fondos oscuros puntuales del
   markup (tarjetas, badges) deben invertirse para seguir siendo legibles,
   ya que el resto del CSS de temas solo cubre las clases grises/slate. */
body[data-theme="light"] .text-white,
body[data-theme="light"] .text-gray-50,
body[data-theme="light"] .text-gray-100,
body[data-theme="light"] .text-gray-200 {
    color: var(--color-text) !important;
}

body[data-theme="light"] input::placeholder {
    color: #94a3b8 !important;
}

/* El resto del sistema de temas solo remapea las clases oscuras "planas"
   (bg-gray-900, border-gray-700, etc). Pero la mayoría de las tarjetas y
   paneles de la app usan variantes con opacidad (bg-gray-800/50,
   border-gray-700/50, bg-[#1e293b]/60...) que Tailwind compila como una
   clase distinta con su propio rgba fijo — esas nunca coinciden con las
   reglas de arriba y se quedaban oscuras encima de un fondo claro,
   viéndose como manchas sucias. Con selectores de atributo por substring
   se capturan todas las variantes de opacidad sin listarlas una por una. */
body[data-theme="light"] [class*="bg-gray-900/"],
body[data-theme="light"] [class*="bg-gray-800/"],
body[data-theme="light"] [class*="bg-slate-900/"],
body[data-theme="light"] [class*="bg-slate-800/"],
body[data-theme="light"] [class*="bg-[#0f172a]/"],
body[data-theme="light"] [class*="bg-[#1e293b]/"] {
    background-color: rgba(15, 23, 42, 0.05) !important;
}

body[data-theme="light"] [class*="border-gray-700"],
body[data-theme="light"] [class*="border-gray-800"],
body[data-theme="light"] [class*="border-slate-700"],
body[data-theme="light"] [class*="border-slate-800"] {
    border-color: var(--color-border) !important;
}

/* Estados hover de botones/filas neutros — sin esto parpadean oscuros
   sobre un fondo claro al pasar el mouse. */
body[data-theme="light"] [class*="hover:bg-gray-700"]:hover,
body[data-theme="light"] [class*="hover:bg-gray-800"]:hover,
body[data-theme="light"] [class*="hover:bg-slate-700"]:hover,
body[data-theme="light"] [class*="hover:bg-slate-800"]:hover {
    background-color: rgba(15, 23, 42, 0.06) !important;
}

/* Sombras: los shadow-* oscuros de Tailwind (pensados para fondos negros)
   se ven como un halo sucio sobre blanco — se suavizan en modo claro. */
body[data-theme="light"] .shadow-2xl,
body[data-theme="light"] .shadow-xl,
body[data-theme="light"] .shadow-lg {
    box-shadow: 0 10px 20px -8px rgba(15, 23, 42, 0.12), 0 3px 6px -3px rgba(15, 23, 42, 0.08) !important;
}



/* ═══════════════════════════════════════════════════════════════════════════
   PREFERENCIAS DE USUARIO - Variables dinámicas
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
    /* Tamaño de fuente */
    --base-font-size: 14px;
    --font-scale: 1;
    
    /* Densidad de tabla */
    --table-padding: 12px;
    --table-line-height: 1.6;
    
    /* Animaciones */
    --transition-duration: 300ms;
    
    /* Toggles */
    --show-avatars: 1;
    --border-radius: 12px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   APLICAR TAMAÑO DE FUENTE
   ═══════════════════════════════════════════════════════════════════════════ */

body {
    font-size: var(--base-font-size) !important;
}

/* Escalar textos según el tamaño base */
.text-xs { font-size: calc(0.75rem * var(--font-scale)) !important; }
.text-sm { font-size: calc(0.875rem * var(--font-scale)) !important; }
.text-base { font-size: calc(1rem * var(--font-scale)) !important; }
.text-lg { font-size: calc(1.125rem * var(--font-scale)) !important; }
.text-xl { font-size: calc(1.25rem * var(--font-scale)) !important; }
.text-2xl { font-size: calc(1.5rem * var(--font-scale)) !important; }
.text-3xl { font-size: calc(1.875rem * var(--font-scale)) !important; }
.text-4xl { font-size: calc(2.25rem * var(--font-scale)) !important; }
.text-5xl { font-size: calc(3rem * var(--font-scale)) !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   APLICAR DENSIDAD DE TABLA
   ═══════════════════════════════════════════════════════════════════════════ */

/* Padding de celdas */
table td,
table th {
    padding: var(--table-padding) !important;
    line-height: var(--table-line-height) !important;
}

/* También aplicar a elementos de formulario en la tabla */
table input,
table select,
table textarea {
    padding-top: calc(var(--table-padding) * 0.6) !important;
    padding-bottom: calc(var(--table-padding) * 0.6) !important;
    padding-left: 2.5rem !important; /* Espacio para iconos */
    padding-right: calc(var(--table-padding) * 0.6) !important;
}

/* En modo compacto, reducir padding izquierdo si hay icono */
[style*="--table-padding: 8px"] table input,
[style*="--table-padding: 8px"] table select {
    padding-left: 2rem !important;
    font-size: 0.875rem !important;
}

/* Botones dentro de la tabla */
table button {
    padding: calc(var(--table-padding) * 0.5) calc(var(--table-padding) * 0.8) !important;
}

/* Iconos dentro de celdas - ajustar posición según densidad */
table td .absolute.left-3 {
    left: 0.5rem !important;
}

[style*="--table-padding: 8px"] table td .absolute.left-3 {
    left: 0.35rem !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   APLICAR ANIMACIONES
   ═══════════════════════════════════════════════════════════════════════════ */

* {
    transition-duration: var(--transition-duration) !important;
}

/* Excepciones que no deberían animarse */
.no-transition,
.no-transition * {
    transition: none !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   MOSTRAR/OCULTAR AVATARES
   ═══════════════════════════════════════════════════════════════════════════ */

.avatar-img,
img[alt*="avatar"],
img[alt*="Avatar"] {
    opacity: var(--show-avatars) !important;
    transition: opacity 0.3s !important;
}

/* Si está oculto, no ocupa espacio */
.avatar-img {
    display: inline-block;
    width: calc(40px * var(--show-avatars));
    height: calc(40px * var(--show-avatars));
}

/* ═══════════════════════════════════════════════════════════════════════════
   ESQUINAS REDONDEADAS DINÁMICAS
   ═══════════════════════════════════════════════════════════════════════════ */

.rounded,
.rounded-md,
.rounded-lg,
.rounded-xl,
.rounded-2xl,
.rounded-3xl {
    border-radius: var(--border-radius) !important;
}

.rounded-full {
    border-radius: 9999px !important; /* Siempre redondo */
}

/* ═══════════════════════════════════════════════════════════════════════════
   TRANSICIONES SUAVES
   ═══════════════════════════════════════════════════════════════════════════ */

body {
    transition: background-color 0.3s ease, color 0.3s ease;
}

* {
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

/* ═══════════════════════════════════════════════════════════════════════════
   APLICACIÓN GLOBAL DE COLORES
   ═══════════════════════════════════════════════════════════════════════════ */

/* FONDOS PRINCIPALES */
body {
    background-color: var(--color-bg) !important;
    color: var(--color-text) !important;
}

/* Fondos secundarios y terciarios */
.bg-slate-950, .bg-\[\#0f172a\], .bg-gray-950 {
    background-color: var(--color-bg) !important;
}

.bg-slate-900, .bg-gray-900, .bg-\[\#1e293b\] {
    background-color: var(--color-bg-secondary) !important;
}

.bg-slate-800, .bg-gray-800, .bg-slate-800\/50, .bg-gray-800\/50 {
    background-color: var(--color-bg-card) !important;
}

/* COLORES PRIMARIOS - Sobreescribir TODAS las clases azules, rojas, moradas, indigo
   (+ cyan/emerald/teal/sky/amber, agregadas porque Nombrent Panel las usa en pantallas
   nuevas -- Cuentas/Clientes/Vendedores/etc. cada una con un color Tailwind distinto,
   sin esto cada pestaña se ve con un color de botón diferente en vez de uno solo) */
.bg-blue-600, .bg-blue-500, .bg-red-600, .bg-red-500,
.bg-purple-600, .bg-purple-500, .bg-indigo-600, .bg-indigo-500,
.bg-cyan-600, .bg-cyan-500, .bg-emerald-600, .bg-emerald-500,
.bg-teal-600, .bg-teal-500, .bg-sky-600, .bg-sky-500, .bg-amber-600, .bg-amber-500,
.bg-yellow-600, .bg-yellow-500, .bg-violet-600, .bg-violet-500,
.bg-fuchsia-600, .bg-fuchsia-500, .bg-pink-600, .bg-pink-500,
.bg-rose-600, .bg-rose-500, .bg-lime-600, .bg-lime-500,
.bg-green-600, .bg-green-500, .bg-orange-600, .bg-orange-500 {
    background-color: var(--color-primary) !important;
    color: white !important;
}

.hover\:bg-blue-500:hover, .hover\:bg-blue-600:hover,
.hover\:bg-red-500:hover, .hover\:bg-red-600:hover,
.hover\:bg-purple-500:hover, .hover\:bg-purple-600:hover,
.hover\:bg-purple-700:hover,
.hover\:bg-indigo-500:hover, .hover\:bg-indigo-600:hover,
.hover\:bg-cyan-500:hover, .hover\:bg-cyan-600:hover,
.hover\:bg-emerald-500:hover, .hover\:bg-emerald-600:hover,
.hover\:bg-teal-500:hover, .hover\:bg-teal-600:hover,
.hover\:bg-sky-500:hover, .hover\:bg-sky-600:hover,
.hover\:bg-amber-500:hover, .hover\:bg-amber-600:hover,
.hover\:bg-yellow-500:hover, .hover\:bg-yellow-600:hover,
.hover\:bg-violet-500:hover, .hover\:bg-violet-600:hover,
.hover\:bg-fuchsia-500:hover, .hover\:bg-fuchsia-600:hover,
.hover\:bg-pink-500:hover, .hover\:bg-pink-600:hover,
.hover\:bg-rose-500:hover, .hover\:bg-rose-600:hover,
.hover\:bg-lime-500:hover, .hover\:bg-lime-600:hover,
.hover\:bg-green-500:hover, .hover\:bg-green-600:hover,
.hover\:bg-orange-500:hover, .hover\:bg-orange-600:hover {
    background-color: var(--color-primary-dark) !important;
}

/* TEXTOS PRIMARIOS */
.text-blue-400, .text-blue-500, .text-blue-600,
.text-red-400, .text-red-500, .text-red-600,
.text-purple-400, .text-purple-300,
.text-indigo-400, .text-indigo-300,
.text-cyan-400, .text-cyan-300, .text-emerald-400, .text-emerald-300,
.text-teal-400, .text-teal-300, .text-sky-400, .text-sky-300,
.text-amber-400, .text-amber-300,
.text-yellow-400, .text-yellow-300, .text-violet-400, .text-violet-300,
.text-fuchsia-400, .text-fuchsia-300, .text-pink-400, .text-pink-300,
.text-rose-400, .text-rose-300, .text-lime-400, .text-lime-300,
.text-green-400, .text-green-300, .text-orange-400, .text-orange-300 {
    color: var(--color-primary-light) !important;
}

/* BORDES PRIMARIOS */
.border-blue-500, .border-blue-600,
.border-red-500, .border-red-600,
.border-purple-500, .border-purple-600,
.border-indigo-500, .border-indigo-600,
.border-cyan-500, .border-cyan-600, .border-emerald-500, .border-emerald-600,
.border-teal-500, .border-teal-600, .border-sky-500, .border-sky-600,
.border-amber-500, .border-amber-600,
.border-blue-500\/20, .border-blue-500\/30,
.border-purple-500\/20, .border-purple-500\/30 {
    border-color: var(--color-primary) !important;
}

/* GRADIENTES */
.from-blue-600, .from-red-600, .from-purple-600, .from-indigo-600 {
    --tw-gradient-from: var(--color-primary) !important;
}

.to-blue-600, .to-red-600, .to-purple-600, .to-indigo-600 {
    --tw-gradient-to: var(--color-primary) !important;
}

.via-blue-600, .via-purple-600 {
    --tw-gradient-via: var(--color-primary) !important;
}

/* BORDERS GENERALES */
.border-gray-700, .border-slate-700, .border-gray-600,
.border-gray-800, .border-slate-800 {
    border-color: var(--color-border) !important;
}

/* TEXTOS */
.text-white, .text-gray-50 {
    color: var(--color-text) !important;
}

.text-gray-400, .text-gray-500, .text-slate-400, .text-gray-300 {
    color: var(--color-text-secondary) !important;
}

/* INPUTS */
input, select, textarea {
    background-color: var(--color-bg-card) !important;
    border-color: var(--color-border) !important;
    color: var(--color-text) !important;
}

input:focus, select:focus, textarea:focus {
    border-color: var(--color-primary) !important;
    outline-color: var(--color-primary) !important;
}

input::placeholder {
    color: var(--color-text-secondary) !important;
    opacity: 0.6;
}

/* PEER CHECKED (Radio buttons y checkboxes) */
.peer:checked ~ .peer-checked\:bg-purple-600,
.peer:checked ~ .peer-checked\:bg-indigo-600,
.peer:checked ~ .peer-checked\:bg-pink-600 {
    background-color: var(--color-primary) !important;
}

.peer:checked ~ .peer-checked\:border-purple-500,
.peer:checked ~ .peer-checked\:border-indigo-500 {
    border-color: var(--color-primary) !important;
}

/* SIDEBAR */
#sidebar {
    background-color: var(--color-bg-secondary) !important;
    border-color: var(--color-border) !important;
}

.nav-btn:hover, .otros-nav-btn:hover,
.nav-btn.active, .otros-nav-btn.active {
    background-color: color-mix(in srgb, var(--color-primary) 15%, transparent) !important;
    color: var(--color-primary-light) !important;
}

/* TABLA */
table {
    background-color: var(--color-bg-secondary) !important;
}

table tbody tr:hover {
    background-color: color-mix(in srgb, var(--color-primary) 8%, transparent) !important;
}

/* SHADOWS */
.shadow-blue-900\/20, .shadow-blue-900\/30,
.shadow-red-900\/20, .shadow-purple-900\/20,
.shadow-indigo-900\/20 {
    --tw-shadow-color: var(--color-primary) !important;
}

/* SCROLLBAR */
::-webkit-scrollbar-thumb {
    background: var(--color-border);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--color-primary);
}

/* BOTÓN CERRAR SESIÓN */
#logout-btn {
    background-color: var(--color-primary) !important;
    color: white !important;
}

#logout-btn:hover {
    background-color: var(--color-primary-dark) !important;
}

/* MODAL DE PERSONALIZACIÓN */
.theme-option.active {
    border-color: var(--color-primary) !important;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-primary) 20%, transparent);
}

/* ANIMACIONES */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

body[data-theme] {
    animation: fadeIn 0.3s ease;
}




/* SOLO los iconos que están DENTRO del contenedor del input (position absolute) */
.relative > .absolute > i[data-lucide],
.relative > .absolute.left-3 > i[data-lucide] {
    pointer-events: none !important;
}

/* El contenedor del icono tampoco debe bloquear */
.relative > .absolute.left-3 {
    pointer-events: none !important;
}

/* Los inputs deben estar por encima */
input {
    position: relative;
}

/* IMPORTANTE: Los iconos en botones y otros lugares SÍ deben funcionar */
button i[data-lucide],
a i[data-lucide],
[role="button"] i[data-lucide] {
    pointer-events: auto !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   FIX SIMPLE: Inputs clickeables con iconos decorativos
   ═══════════════════════════════════════════════════════════════════════════ */

/* Solo el CONTENEDOR del icono (no el icono en sí) no debe bloquear clicks */
input ~ .absolute.left-3,
.relative > .absolute:has(i[data-lucide]) {
    pointer-events: none !important;
}

/* PERO el icono dentro SÍ debe ser visible */
.absolute i[data-lucide] {
    pointer-events: none !important;
    display: inline-block !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Todos los demás iconos funcionan normalmente */
i[data-lucide] {
    display: inline-block !important;
    opacity: 1 !important;
    visibility: visible !important;
}



/* Asegurar que TODOS los iconos sean visibles */
i[data-lucide],
i[data-lucide] svg {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Los inputs deben permitir clicks en toda su área */
input[type="text"],
input[type="search"],
input[type="email"],
input[type="password"],
input[type="number"] {
    cursor: text !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   FIX DEFINITIVO: ICONOS CON WIDTH/HEIGHT CORRECTOS
   ═══════════════════════════════════════════════════════════════════════════ */

/* El problema: Los SVGs tienen width/height 0 
   Solución: Forzar tamaño mínimo */

svg.lucide {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    min-width: 1rem !important;
    min-height: 1rem !important;
    flex-shrink: 0 !important;
}

/* Asegurar que los contenedores no colapsen */
i svg,
button svg,
a svg,
div svg {
    display: inline-block !important;
}

/* Para iconos con clases de tamaño específico */
.w-3 svg,
.w-3\.5 svg,
svg.w-3,
svg.w-3\.5 {
    width: 0.875rem !important;
    height: 0.875rem !important;
}

.w-4 svg,
svg.w-4 {
    width: 1rem !important;
    height: 1rem !important;
}

.w-5 svg,
svg.w-5 {
    width: 1.25rem !important;
    height: 1.25rem !important;
}

.w-6 svg,
svg.w-6 {
    width: 1.5rem !important;
    height: 1.5rem !important;
}

.w-8 svg,
svg.w-8 {
    width: 2rem !important;
    height: 2rem !important;
}

.w-16 svg,
svg.w-16 {
    width: 4rem !important;
    height: 4rem !important;
}

/* Inputs siguen siendo clickeables */
input[type="text"],
input[type="search"],
input[type="email"],
input[type="password"],
input[type="number"] {
    cursor: text !important;
    position: relative !important;
    z-index: 1 !important;
}