/* ==========================================================================
   Thikeo Cloud (thikeo.com) — Sistema de Diseño Dual (Modo Oscuro & Modo Claro Pro)
   ========================================================================== */

*, *::before, *::after {
  box-sizing: border-box;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.font-mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

.tabular-nums {
  font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   MODO CLARO DE ALTA PRECISIÓN (STRIPE / MERCURY / APPLE LIGHT THEME)
   Corrige todos los fondos, casillas, bordes, tablas y etiquetas
   ========================================================================== */
html.light body,
html.light #landingView,
html.light #appShell {
  background-color: #f4f6fb !important;
  color: #0f172a !important;
}

/* Barra superior y menú lateral en Modo Claro */
html.light header,
html.light aside,
html.light footer {
  background-color: #ffffff !important;
  border-color: #e2e8f0 !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04) !important;
}

/* Tarjetas principales blancas y limpias */
html.light .bg-slate-900,
html.light .bg-slate-900\/70,
html.light .bg-slate-900\/75,
html.light .bg-slate-900\/80,
html.light .bg-slate-900\/90 {
  background-color: #ffffff !important;
  border-color: #cbd5e1 !important;
  box-shadow: 0 4px 14px -3px rgba(15, 23, 42, 0.06) !important;
}

/* Superficies secundarias y cajas internas en gris perla suave */
html.light .bg-slate-950,
html.light .bg-slate-950\/40,
html.light .bg-slate-950\/60,
html.light .bg-slate-950\/80,
html.light .bg-slate-950\/85,
html.light .bg-slate-950\/90 {
  background-color: #f8fafc !important;
  border-color: #cbd5e1 !important;
}

/* Casillas, botones secundarios y píldoras grises */
html.light .bg-slate-800,
html.light .bg-slate-800\/60,
html.light .bg-slate-800\/80,
html.light .bg-slate-800\/90 {
  background-color: #eef2f6 !important;
  border-color: #cbd5e1 !important;
  color: #1e293b !important;
}

/* Gradientes oscuros convertidos a gradientes claros elegantes */
html.light .from-indigo-950\/60,
html.light .from-indigo-950\/50 {
  background: linear-gradient(180deg, #eef2ff 0%, #ffffff 100%) !important;
  border-color: #a5b4fc !important;
}

html.light .from-emerald-500\/10 {
  background: linear-gradient(180deg, #ecfdf5 0%, #ffffff 100%) !important;
  border-color: #6ee7b7 !important;
}

html.light .from-amber-500\/15 {
  background: linear-gradient(180deg, #fffbeb 0%, #ffffff 100%) !important;
  border-color: #fcd34d !important;
}

html.light .from-rose-500\/15 {
  background: linear-gradient(180deg, #fff1f2 0%, #ffffff 100%) !important;
  border-color: #fda4af !important;
}

/* Fondos de etiquetas / alertas semánticas en Modo Claro */
html.light .bg-emerald-950\/15,
html.light .bg-emerald-500\/10,
html.light .bg-emerald-500\/15,
html.light .bg-emerald-500\/20 {
  background-color: #ecfdf5 !important;
  border-color: #6ee7b7 !important;
}

html.light .bg-indigo-500\/10,
html.light .bg-indigo-500\/15,
html.light .bg-indigo-500\/20 {
  background-color: #eef2ff !important;
  border-color: #a5b4fc !important;
}

html.light .bg-amber-950\/20,
html.light .bg-amber-950\/30,
html.light .bg-amber-500\/10,
html.light .bg-amber-500\/15,
html.light .bg-amber-500\/20 {
  background-color: #fffbeb !important;
  border-color: #fcd34d !important;
}

html.light .bg-rose-950\/20,
html.light .bg-rose-500\/10,
html.light .bg-rose-500\/15,
html.light .bg-rose-500\/20 {
  background-color: #fff1f2 !important;
  border-color: #fda4af !important;
}

html.light .bg-cyan-950\/40,
html.light .bg-cyan-500\/15,
html.light .bg-sky-500\/10,
html.light .bg-sky-500\/15,
html.light .bg-sky-500\/20,
html.light .bg-blue-500\/10,
html.light .bg-blue-500\/15 {
  background-color: #f0f9ff !important;
  border-color: #7dd3fc !important;
}

html.light .bg-violet-500\/20 {
  background-color: #f5f3ff !important;
  border-color: #c4b5fd !important;
}

/* Tipografía de alto contraste en Modo Claro */
html.light .text-white,
html.light .text-slate-100,
html.light .text-slate-200 {
  color: #0f172a !important;
}

html.light .text-slate-300 {
  color: #334155 !important;
}

html.light .text-slate-400,
html.light .text-slate-500 {
  color: #475569 !important;
}

/* Colores de acento legibles sobre fondo blanco */
html.light .text-emerald-200,
html.light .text-emerald-300,
html.light .text-emerald-400 {
  color: #047857 !important;
}

html.light .text-indigo-200,
html.light .text-indigo-300,
html.light .text-indigo-400 {
  color: #4338ca !important;
}

html.light .text-amber-200,
html.light .text-amber-200\/80,
html.light .text-amber-300,
html.light .text-amber-300\/90,
html.light .text-amber-400 {
  color: #b45309 !important;
}

html.light .text-rose-200,
html.light .text-rose-300,
html.light .text-rose-400 {
  color: #be123c !important;
}

html.light .text-cyan-200,
html.light .text-cyan-300,
html.light .text-cyan-400,
html.light .text-sky-300,
html.light .text-sky-400,
html.light .text-blue-300 {
  color: #0369a1 !important;
}

html.light .text-violet-300,
html.light .text-violet-400 {
  color: #6d28d9 !important;
}

/* Bordes y divisores en Modo Claro */
html.light .border-slate-800,
html.light .border-slate-800\/70,
html.light .border-slate-800\/80,
html.light .border-slate-800\/90,
html.light .border-slate-700,
html.light .border-slate-700\/80 {
  border-color: #cbd5e1 !important;
}

html.light .divide-slate-800\/70 > :not([hidden]) ~ :not([hidden]) {
  border-color: #e2e8f0 !important;
}

/* Casillas de formulario (Inputs, Selects, Textareas) impecables en Modo Claro */
html.light input:not([type="checkbox"]):not([type="radio"]),
html.light select,
html.light textarea {
  background-color: #ffffff !important;
  color: #0f172a !important;
  border: 1.5px solid #cbd5e1 !important;
  box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.03) !important;
}

html.light input:focus,
html.light select:focus,
html.light textarea:focus {
  border-color: #4f46e5 !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.15) !important;
}

/* Filas de tabla hover en Modo Claro */
html.light tr.hover\:bg-slate-800\/40:hover {
  background-color: #f1f5f9 !important;
}

html.light tr.bg-emerald-950\/15:hover {
  background-color: #d1fae5 !important;
}

/* Botones primarios que siempre conservan texto blanco */
html.light .keep-white,
html.light .keep-white * {
  color: #ffffff !important;
}

/* ==========================================================================
   SISTEMA DE PESTAÑAS Y ANIMACIONES
   ========================================================================== */
.tab-panel {
  display: none;
  animation: fadeSlideIn 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.tab-panel.active {
  display: block;
}

@keyframes fadeSlideIn {
  from {
    opacity: 0;
    transform: translateY(5px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.tab-btn.active {
  background: linear-gradient(90deg, rgba(79, 70, 229, 0.18) 0%, rgba(16, 185, 129, 0.08) 100%) !important;
  color: #ffffff !important;
  border-left: 3px solid #6366f1;
}

html.light .tab-btn.active {
  background: linear-gradient(90deg, rgba(79, 70, 229, 0.14) 0%, rgba(16, 185, 129, 0.08) 100%) !important;
  color: #312e81 !important;
  border-left: 3px solid #4f46e5;
}

/* Scrollbars elegantes */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: rgba(15, 23, 42, 0.2);
}

::-webkit-scrollbar-thumb {
  background: rgba(100, 116, 139, 0.45);
  border-radius: 9999px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(99, 102, 241, 0.7);
}