/* ==========================================================================
   PRESUPRO PREMIUM STYLES & LIGHT MODE OVERRIDES
   ========================================================================== */

/* 1. Global Transitions for Smooth Theme Switching */
*, *::before, *::after {
  transition: background-color 0.35s cubic-bezier(0.4, 0, 0.2, 1),
              border-color 0.35s cubic-bezier(0.4, 0, 0.2, 1),
              color 0.35s cubic-bezier(0.4, 0, 0.2, 1),
              fill 0.35s cubic-bezier(0.4, 0, 0.2, 1),
              stroke 0.35s cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Evitar transición en elementos que se mueven rápido para no causar lag */
.transform, .scale, input, textarea, select {
  transition-property: all;
}

/* ==========================================================================
   MODO CLARO (LIGHT THEME) OVERRIDES - SISTEMA TAILWIND V4
   ========================================================================== */
body.light-theme {
  /* Inversión matemática refinada de la escala Slate de Tailwind v4 */
  --color-slate-50: #0f172a !important;   /* Texto ultra oscuro / Títulos principales */
  --color-slate-100: #1e293b !important;  /* Títulos de sección */
  --color-slate-200: #334155 !important;  /* Texto primario legible */
  --color-slate-300: #475569 !important;  /* Texto cuerpo / secundario */
  --color-slate-400: #64748b !important;  /* Texto secundario de tarjetas */
  --color-slate-500: #94a3b8 !important;  /* Texto muted / bordes suaves */
  --color-slate-600: #cbd5e1 !important;  /* Bordes de inputs / divisores */
  --color-slate-700: #e2e8f0 !important;  /* Bordes generales del layout */
  --color-slate-800: #f1f5f9 !important;  /* Fondo de inputs y elementos secundarios */
  --color-slate-900: #ffffff !important;  /* Fondo de tarjetas, tablas y cabeceras */
  --color-slate-950: #f4f7fb !important;  /* Fondo global de la aplicación */

  /* Fondo global más elegante */
  background-color: #f4f7fb !important;
  color: #1e293b !important;
}

/* Escala Slate Refinada para Light Mode (Clases estáticas como salvaguarda) */
body.light-theme .bg-slate-950, body.light-theme .bg-\[\#020617\] { background-color: #f4f7fb !important; }
body.light-theme .bg-slate-900, body.light-theme .bg-\[\#0f172a\] { background-color: #ffffff !important; box-shadow: 0 4px 20px rgba(15, 23, 42, 0.04) !important; }
body.light-theme .bg-slate-800, body.light-theme .bg-\[\#1e293b\] { background-color: #f1f5f9 !important; border-color: #e2e8f0 !important; }
body.light-theme .bg-slate-700, body.light-theme .bg-\[\#334155\] { background-color: #f1f5f9 !important; border-color: #cbd5e1 !important; }

/* Textos adaptados para contraste excelente */
body.light-theme .text-slate-50, body.light-theme .text-white { color: #0f172a !important; }
body.light-theme .text-slate-100 { color: #1e293b !important; }
body.light-theme .text-slate-200, body.light-theme .text-slate-300 { color: #334155 !important; }
body.light-theme .text-slate-400 { color: #475569 !important; }
body.light-theme .text-slate-500 { color: #64748b !important; }

/* Bordes en Light Mode */
body.light-theme .border-slate-800, body.light-theme .border-slate-700 { border-color: #e2e8f0 !important; }

/* ==========================================================================
   CORRECCIONES DE INTERFAZ Y DESBORDAMIENTO
   ========================================================================== */
/* Prevenir que el número de presupuesto/factura salga cortado */
input[placeholder*="PRE-"], 
input[placeholder*="FAC-"],
input[name="quoteNumber"],
input[name="invoiceNumber"] {
  min-width: 160px !important;
  width: 100% !important;
  text-overflow: clip !important;
}

h1.truncate, h2.truncate, h3.truncate, 
div.truncate > h1, div.truncate > h2 {
  overflow: visible !important;
  white-space: normal !important;
  word-wrap: break-word !important;
  text-overflow: clip !important;
}

/* Salvaguarda para botones primary (no invertir textos en botones de colores) */
body.light-theme button.bg-cyan-500 *, body.light-theme button.bg-cyan-600 *,
body.light-theme button.bg-purple-500 *, body.light-theme button.bg-purple-600 *,
body.light-theme button.bg-red-500 *, body.light-theme button.bg-red-600 *,
body.light-theme .bg-gradient-to-r *,
body.light-theme .btn-primary *,
body.light-theme .status-badge {
  color: #ffffff !important;
}

/* Botón secundario (Imprimir / Volver) */
body.light-theme button.btn-secondary, 
body.light-theme button.bg-slate-800:not(.theme-toggle-btn) {
  background-color: #ffffff !important;
  color: #1e293b !important;
  border: 1px solid #cbd5e1 !important;
}
body.light-theme button.btn-secondary:hover, 
body.light-theme button.bg-slate-800:not(.theme-toggle-btn):hover {
  background-color: #f1f5f9 !important;
}
body.light-theme button.btn-secondary *, 
body.light-theme button.bg-slate-800:not(.theme-toggle-btn) * {
  color: #1e293b !important;
}

/* ==========================================================================
   GLASSMORPHISM & PREMIUM CARDS
   ========================================================================== */
/* Modo Oscuro Premium */
body:not(.light-theme) .glass-card, 
body:not(.light-theme) div.bg-slate-900 {
  background: rgba(15, 23, 42, 0.7) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
  border-radius: 24px !important;
}

body:not(.light-theme) .text-slate-900,
body:not(.light-theme) .text-slate-800,
body:not(.light-theme) .text-slate-700 {
  color: #1e293b !important; /* Mantener oscuro en la factura blanca */
}

/* Modo Claro Premium */
body.light-theme .glass-card, 
body.light-theme div.bg-slate-900,
body.light-theme div.bg-white,
body.light-theme div.bg-slate-50 {
  background: rgba(255, 255, 255, 0.85) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(15, 23, 42, 0.06) !important;
  box-shadow: 0 10px 40px rgba(30, 41, 59, 0.06), inset 0 1px 0 rgba(255, 255, 255, 1) !important;
  border-radius: 24px !important;
}

/* Efectos Hover en Tarjetas */
body:not(.light-theme) .hover-effect:hover {
  transform: translateY(-2px);
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}
body.light-theme .hover-effect:hover {
  transform: translateY(-2px);
  box-shadow: 0 15px 50px rgba(30, 41, 59, 0.12), inset 0 1px 0 rgba(255, 255, 255, 1) !important;
}

/* ==========================================================================
   TABLAS PREMIUM (DATATABLES Y LISTAS)
   ========================================================================== */
.table-container table {
  border-collapse: separate !important;
  border-spacing: 0 !important;
}

.table-container th {
  background-color: rgba(30, 41, 59, 0.5) !important;
  backdrop-filter: blur(8px);
  color: #94a3b8 !important;
  font-weight: 600 !important;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.75rem !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
}

.table-container td {
  border-bottom: 1px solid rgba(255, 255, 255, 0.03) !important;
  color: #f8fafc !important;
  transition: all 0.2s ease;
}

.table-container tr:hover td {
  background-color: rgba(255, 255, 255, 0.03) !important;
}

/* Tablas Modo Claro */
body.light-theme .table-container th {
  background-color: rgba(241, 245, 249, 0.7) !important;
  color: #475569 !important;
  border-bottom: 1px solid rgba(15, 23, 42, 0.06) !important;
}
body.light-theme .table-container td {
  border-bottom: 1px solid rgba(15, 23, 42, 0.04) !important;
  color: #1e293b !important;
}
body.light-theme .table-container tr:hover td {
  background-color: rgba(15, 23, 42, 0.02) !important;
}

/* ==========================================================================
   INPUTS Y FORMULARIOS ELEGANTES
   ========================================================================== */
.form-input, input, textarea, select {
  background-color: rgba(15, 23, 42, 0.5) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 12px !important;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1) !important;
  color: #f8fafc !important;
  padding-top: 10px !important;
  padding-bottom: 10px !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Padding horizontal base (sin !important para respetar los iconos pl-10 de Tailwind) */
.form-input, input:not([type="checkbox"]):not([type="radio"]), textarea, select {
  padding-left: 14px;
  padding-right: 14px;
}

/* Si React ya inyecta pl-10 (40px) para el icono, lo forzamos suavemente si algo se rompe */
input.pl-10 { padding-left: 2.5rem !important; }
input.pl-12 { padding-left: 3rem !important; }
input.pl-8 { padding-left: 2rem !important; }

.form-input:focus, input:focus, textarea:focus, select:focus {
  background-color: rgba(15, 23, 42, 0.8) !important;
  border-color: #a855f7 !important; /* Púrpura sutil */
  box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.25), inset 0 2px 4px rgba(0, 0, 0, 0.1) !important;
  outline: none !important;
  color: #ffffff !important; /* Asegurar que el texto siempre sea blanco en oscuro */
}

/* Opciones de Select para evitar opciones blancas con texto blanco en Windows */
select option {
  background-color: #1e293b !important;
  color: #ffffff !important;
}

body.light-theme .form-input, body.light-theme input, body.light-theme textarea, body.light-theme select,
.bg-white .form-input, .bg-white input, .bg-white textarea, .bg-white select,
.bg-slate-50 .form-input, .bg-slate-50 input, .bg-slate-50 textarea, .bg-slate-50 select {
  background-color: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  box-shadow: inset 0 2px 4px rgba(15, 23, 42, 0.02) !important;
  color: #0f172a !important;
}

body.light-theme .form-input:focus, body.light-theme input:focus, body.light-theme textarea:focus, body.light-theme select:focus,
.bg-white .form-input:focus, .bg-white input:focus, .bg-white textarea:focus, .bg-white select:focus,
.bg-slate-50 .form-input:focus, .bg-slate-50 input:focus, .bg-slate-50 textarea:focus, .bg-slate-50 select:focus {
  background-color: #ffffff !important;
  border-color: #4f46e5 !important;
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.2), inset 0 2px 4px rgba(15, 23, 42, 0.02) !important;
  color: #0f172a !important; /* Asegurar que el texto sea oscuro en modo claro */
}

body.light-theme select option,
.bg-white select option,
.bg-slate-50 select option {
  background-color: #ffffff !important;
  color: #0f172a !important;
}

/* ==========================================================================
   FIXES ESPECÍFICOS DE COMPONENTES
   ========================================================================== */
/* Fix para el selector de IVA: evitar que el % se solape con la flecha */
table select, .grid select, select[title*="IVA"], select[aria-label*="IVA"] {
  min-width: 85px !important;
  padding-right: 28px !important; /* Espacio extra para la flechita */
  background-position: right 0.5rem center !important;
}

/* ==========================================================================
   TOP BAR (CABECERA ACCIONES)
   ========================================================================== */
.no-print.sticky.top-0, .no-print.bg-slate-900\/80.sticky {
  background-color: rgba(15, 23, 42, 0.85) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

body.light-theme .no-print.sticky.top-0, body.light-theme .no-print.bg-slate-900\/80.sticky {
  background-color: rgba(255, 255, 255, 0.85) !important;
  backdrop-filter: blur(16px) !important;
  border-bottom: 1px solid rgba(15, 23, 42, 0.06) !important;
  box-shadow: 0 4px 20px rgba(15, 23, 42, 0.03) !important;
}

/* ==========================================================================
   FONDOS SEMÁNTICOS Y BADGES (CLARO/OSCURO)
   ========================================================================== */
body.light-theme .bg-cyan-400\/10, body.light-theme .bg-cyan-500\/10 {
  background-color: rgba(8, 145, 178, 0.08) !important; border: 1px solid rgba(8, 145, 178, 0.15) !important;
}
body.light-theme .bg-purple-400\/10, body.light-theme .bg-purple-500\/10 {
  background-color: rgba(124, 58, 237, 0.08) !important; border: 1px solid rgba(124, 58, 237, 0.15) !important;
}
body.light-theme .bg-emerald-400\/10, body.light-theme .bg-emerald-500\/10 {
  background-color: rgba(5, 150, 105, 0.08) !important; border: 1px solid rgba(5, 150, 105, 0.15) !important;
}
body.light-theme .bg-amber-400\/10, body.light-theme .bg-amber-500\/10 {
  background-color: rgba(217, 119, 6, 0.08) !important; border: 1px solid rgba(217, 119, 6, 0.15) !important;
}
body.light-theme .bg-red-400\/10, body.light-theme .bg-red-500\/10 {
  background-color: rgba(220, 38, 38, 0.08) !important; border: 1px solid rgba(220, 38, 38, 0.15) !important;
}

/* Textos semánticos (WCAG AA) */
body.light-theme .text-cyan-400 { color: #0891b2 !important; }
body.light-theme .text-purple-400 { color: #7c3aed !important; }
body.light-theme .text-emerald-400 { color: #059669 !important; }
body.light-theme .text-amber-400 { color: #d97706 !important; }
body.light-theme .text-indigo-400 { color: #4f46e5 !important; }
body.light-theme .text-red-400 { color: #dc2626 !important; }

/* ==========================================================================
   MODALES PREMIUM (Fondo superpuesto y caja)
   ========================================================================== */
.fixed.inset-0 .bg-black\/80 {
  background-color: rgba(2, 6, 23, 0.6) !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
}

body.light-theme .fixed.inset-0 .bg-black\/80 {
  background-color: rgba(15, 23, 42, 0.3) !important;
  backdrop-filter: blur(8px) !important;
}

/* ==========================================================================
   BOTÓN FLOTANTE MODO OSCURO / CLARO
   ========================================================================== */
.theme-toggle-btn {
  position: fixed; bottom: 24px; right: 24px;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: rgba(15, 23, 42, 0.85);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; z-index: 99999;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  color: #f59e0b; /* Color del Sol */
}
.theme-toggle-btn:hover {
  transform: scale(1.1) translateY(-3px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4), 0 0 20px rgba(245, 158, 11, 0.4);
  border-color: rgba(245, 158, 11, 0.4);
}
.theme-toggle-btn:active { transform: scale(0.95); }
.theme-toggle-btn svg {
  width: 24px; height: 24px;
  transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

body.light-theme .theme-toggle-btn {
  background: rgba(255, 255, 255, 0.95);
  border-color: rgba(79, 70, 229, 0.2);
  box-shadow: 0 8px 32px rgba(31, 41, 55, 0.1), inset 0 1px 0 rgba(255, 255, 255, 1);
  color: #4f46e5; /* Color de la Luna */
}
body.light-theme .theme-toggle-btn:hover {
  box-shadow: 0 12px 40px rgba(79, 70, 229, 0.2), 0 0 20px rgba(79, 70, 229, 0.3);
  border-color: rgba(79, 70, 229, 0.4);
}

/* ==========================================================================
   RECHARTS (GRÁFICOS) EN MODO CLARO
   ========================================================================== */
body.light-theme .recharts-text, body.light-theme .recharts-label, body.light-theme svg text {
  fill: #64748b !important; color: #64748b !important; font-size: 11px !important;
}
body.light-theme .recharts-cartesian-grid-horizontal line, body.light-theme .recharts-cartesian-grid-vertical line {
  stroke: #e2e8f0 !important;
}

/* ==========================================================================
   SELECTOR DE IMÁGENES (IMAGE PICKER) - ESTÉTICA MEJORADA
   ========================================================================== */
.form-image-picker-container {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  padding: 24px; border: 2px dashed rgba(168, 85, 247, 0.3);
  border-radius: 20px; background: rgba(168, 85, 247, 0.03);
  margin-bottom: 24px; transition: all 0.3s ease;
  position: relative; overflow: hidden; text-align: center;
}
body.light-theme .form-image-picker-container {
  border-color: rgba(79, 70, 229, 0.3); background: rgba(79, 70, 229, 0.02);
}
.form-image-picker-container.dragover {
  border-color: #a855f7; background: rgba(168, 85, 247, 0.1); transform: scale(1.02);
}
body.light-theme .form-image-picker-container.dragover {
  border-color: #4f46e5; background: rgba(79, 70, 229, 0.1);
}
.form-image-picker-preview {
  width: 110px; height: 110px; border-radius: 50%; object-fit: cover;
  border: 4px solid #a855f7; box-shadow: 0 8px 24px rgba(168, 85, 247, 0.3);
  background: #1e293b; display: none; transition: all 0.3s ease;
}
body.light-theme .form-image-picker-preview {
  border-color: #4f46e5; box-shadow: 0 8px 24px rgba(79, 70, 229, 0.2); background: #f1f5f9;
}
.form-image-picker-placeholder {
  width: 110px; height: 110px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.05); border: 2px dashed rgba(255, 255, 255, 0.15);
  display: flex; align-items: center; justify-content: center;
  color: #94a3b8; transition: all 0.2s ease;
}
body.light-theme .form-image-picker-placeholder {
  background: rgba(15, 23, 42, 0.03); border-color: rgba(15, 23, 42, 0.12); color: #475569;
}
.form-image-picker-label {
  font-size: 0.85rem; font-weight: 600; color: #e2e8f0; cursor: pointer;
  padding: 8px 18px; background: rgba(255, 255, 255, 0.08);
  border-radius: 30px; border: 1px solid rgba(255, 255, 255, 0.1);
  transition: all 0.2s ease;
}
.form-image-picker-label:hover { background: rgba(255, 255, 255, 0.15); color: #ffffff; }
body.light-theme .form-image-picker-label {
  color: #0f172a; background: rgba(0, 0, 0, 0.05); border-color: rgba(0, 0, 0, 0.08);
}
body.light-theme .form-image-picker-label:hover { background: rgba(0, 0, 0, 0.1); }
.form-image-picker-sublabel { font-size: 0.75rem; color: #64748b; }
.form-image-picker-input { display: none; }
.form-image-picker-delete-btn {
  position: absolute; top: 12px; right: 12px;
  background: rgba(239, 68, 68, 0.1); color: #ef4444; border: 1px solid rgba(239, 68, 68, 0.2);
  padding: 6px 12px; border-radius: 10px; font-size: 0.75rem; font-weight: 600;
  cursor: pointer; transition: all 0.2s ease; display: none;
}
.form-image-picker-delete-btn:hover {
  background: #ef4444; color: #ffffff; box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
}

/* ==========================================================================
   RESPONSIVE DESIGN PREMIUM (MÓVIL, TABLET Y PANTALLAS PEQUEÑAS)
   ========================================================================== */
@media (max-width: 850px) {
  /* Prevención absoluta de desbordamiento horizontal */
  body, html { overflow-x: hidden !important; width: 100% !important; max-width: 100vw !important; }

  /* Reajuste del layout principal */
  #root, #root > div, .flex.h-screen {
    width: 100% !important; max-width: 100vw !important; overflow-x: hidden !important;
    flex-direction: column !important; height: auto !important; min-height: 100vh !important;
    overflow-y: auto !important; padding-bottom: 85px !important;
  }

  /* Sidebar convertido en Navbar Horizontal INFERIOR estilo iPhone */
  aside, aside.w-64 {
    width: 100% !important; max-width: 100vw !important; height: auto !important; min-height: auto !important;
    position: fixed !important; bottom: 0 !important; top: auto !important; left: 0 !important; z-index: 9999 !important;
    border-right: none !important; border-bottom: none !important; border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.4) !important; background: rgba(15, 23, 42, 0.85) !important;
    backdrop-filter: blur(24px) !important; -webkit-backdrop-filter: blur(24px) !important;
    padding-bottom: env(safe-area-inset-bottom, 10px) !important;
    display: flex !important; flex-direction: row !important; align-items: center !important;
    justify-content: space-between !important; padding-left: 5px !important; padding-right: 5px !important;
  }
  
  body.light-theme aside {
    background: rgba(255, 255, 255, 0.9) !important; border-top: 1px solid rgba(15,23,42,0.06) !important;
    box-shadow: 0 -10px 30px rgba(31, 41, 55, 0.08) !important;
  }

  /* Ocultar el logo/perfil superior */
  aside div.p-6, aside div[class*="p-6"] { display: none !important; }

  /* Menú de navegación horizontal scrollable */
  aside nav {
    display: flex !important; flex-direction: row !important; overflow-x: auto !important; overflow-y: hidden !important;
    padding: 10px 0 !important; gap: 4px !important; -webkit-overflow-scrolling: touch; scrollbar-width: none;
    flex: 1 1 0% !important; min-width: 0 !important; justify-content: flex-start !important;
  }
  aside nav::-webkit-scrollbar { display: none; }

  aside nav > *:not(a):not(button), aside nav div.text-\[10px\], aside nav div[class*="uppercase"] { display: none !important; }

  /* Iconos del Menú (iPhone style) */
  aside nav a, aside nav button, aside nav div[class*="rounded-lg"], aside div.p-4 a, aside div.p-4 button {
    display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important;
    padding: 12px 14px !important; margin: 0 !important; flex-shrink: 0 !important; border-radius: 14px !important;
    background: transparent !important; font-size: 0 !important; color: transparent !important;
  }

  aside nav a > *:not(svg), aside nav button > *:not(svg), aside div.p-4 a > *:not(svg), aside div.p-4 button > *:not(svg) { display: none !important; }

  aside nav a svg, aside nav button svg, aside div.p-4 a svg, aside div.p-4 button svg {
    width: 24px !important; height: 24px !important; margin: 0 !important; stroke-width: 1.5 !important;
    color: #64748b !important; transition: all 0.2s ease !important;
  }
  
  body.light-theme aside nav a svg, body.light-theme aside nav button svg, body.light-theme aside div.p-4 a svg, body.light-theme aside div.p-4 button svg {
    color: #94a3b8 !important;
  }

  /* Estado activo de los iconos */
  aside nav a.bg-slate-800 svg, aside nav a.bg-slate-800\/50 svg, aside nav a.text-white svg,
  aside nav a[class*="bg-cyan"] svg, aside nav a[class*="bg-purple"] svg, aside nav a[class*="text-purple"] svg {
    color: #a855f7 !important; transform: scale(1.15) !important; stroke-width: 2 !important;
    filter: drop-shadow(0 2px 8px rgba(168, 85, 247, 0.4)) !important;
  }
  
  /* Sección de Ajustes pegada a la derecha */
  aside div.p-4, aside div[class*="p-4"] {
    display: flex !important; flex-direction: row !important; padding: 10px 4px !important; border-top: none !important;
    border-left: 1px solid rgba(255,255,255,0.05) !important; margin-left: 4px !important; flex-shrink: 0 !important;
  }
  body.light-theme aside div.p-4 { border-left: 1px solid #e2e8f0 !important; }

  /* Contenedor principal de contenidos */
  main, main.flex-1 {
    padding: 16px !important; width: 100% !important; max-width: 100vw !important;
    overflow-x: hidden !important; overflow-y: visible !important;
  }

  /* Forzar cuadrículas a 1 columna */
  .grid, form .grid, form div[class*="grid-cols-"] { grid-template-columns: 1fr !important; gap: 12px !important; }
  
  @media (min-width: 500px) {
    .grid-cols-2, .grid-cols-3, .grid-cols-4, .grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  }

  /* Modales responsive */
  .fixed.inset-0 .bg-slate-900, div[role="dialog"] {
    width: 95% !important; max-width: 500px !important; margin: 10px auto !important; padding: 20px !important;
    border-radius: 24px !important; max-height: 90vh !important; overflow-y: auto !important;
  }

  /* Tablas adaptables */
  .overflow-x-auto, .table-responsive, table {
    display: block !important; overflow-x: auto !important; width: 100% !important;
    max-width: 100vw !important; -webkit-overflow-scrolling: touch;
  }
  table { white-space: nowrap !important; }
  table th, table td { min-width: 110px !important; }

  /* Botón flotante */
  .theme-toggle-btn { bottom: 96px !important; right: 16px !important; width: 50px !important; height: 50px !important; }
}

/* ==========================================================================
   OPTIMIZACIONES DE IMPRESIÓN Y PDF
   ========================================================================== */
@media print {
  aside, aside.w-64, .theme-toggle-btn, #theme-toggle-btn-el, button:not([class*="print-only"]),
  .no-print, header, footer { display: none !important; }
  
  main, main.flex-1, #root, #root > div {
    display: block !important; width: 100% !important; max-width: 100% !important;
    margin: 0 !important; padding: 0 !important; background: transparent !important; color: #000000 !important;
  }
  
  .glass-card, div.bg-slate-900, body.light-theme div.bg-slate-900 {
    background: transparent !important; border: none !important; box-shadow: none !important;
    padding: 0 !important; margin: 0 !important;
  }

  table { width: 100% !important; min-width: 100% !important; border-collapse: collapse !important; }
  th, td { color: #000000 !important; border-bottom: 1px solid #cbd5e1 !important; }
}