/* CRM CORPORATIVO JED RESOLUTION S.A.S. - ESTILOS CORPORATIVOS */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap');

:root {
  --primary-blue: #1d4ed8;
  --primary-blue-light: #3b82f6;
  --primary-blue-dark: #1e40af;
  --bg-slate-dark: #0f172a;
  --bg-slate-card: #1e293b;
  --border-slate: #334155;
  --text-main: #f8fafc;
  --text-muted: #94a3b8;
}

body {
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background-color: #0b0f19;
  color: #f1f5f9;
  -webkit-font-smoothing: antialiased;
}

/* Scrollbar estilizada */
::-webkit-scrollbar {
  width: 7px;
  height: 7px;
}
::-webkit-scrollbar-track {
  background: #0f172a;
}
::-webkit-scrollbar-thumb {
  background: #273549;
  border-radius: 9999px;
}
::-webkit-scrollbar-thumb:hover {
  background: #3b82f6;
}

/* Drag and Drop visual feedback */
.widget-card {
  transition: transform 0.18s ease, box-shadow 0.18s ease, opacity 0.18s ease;
  cursor: grab;
}
.widget-card:active {
  cursor: grabbing;
}
.widget-card.dragging {
  opacity: 0.45;
  transform: scale(0.98);
  border: 2px dashed #3b82f6 !important;
}
.widget-card.drag-over {
  border-color: #60a5fa !important;
  box-shadow: 0 0 20px rgba(59, 130, 246, 0.35);
  transform: translateY(-2px);
}

/* Glassmorphism sutil y bordes limpios */
.glass-panel {
  background: rgba(30, 41, 59, 0.75);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(51, 65, 85, 0.6);
}

/* Kanban column and cards */
.kanban-col {
  min-height: calc(100vh - 270px);
}
.kanban-card {
  cursor: grab;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.kanban-card:active {
  cursor: grabbing;
}
.kanban-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.3);
}

/* Semáforo de vencimientos */
.badge-traffic-red {
  background: rgba(225, 29, 72, 0.15);
  color: #fb7185;
  border: 1px solid rgba(244, 63, 94, 0.3);
}
.badge-traffic-orange {
  background: rgba(249, 115, 22, 0.15);
  color: #fb923c;
  border: 1px solid rgba(249, 115, 22, 0.3);
}
.badge-traffic-yellow {
  background: rgba(234, 179, 8, 0.15);
  color: #facc15;
  border: 1px solid rgba(234, 179, 8, 0.3);
}
.badge-traffic-blue {
  background: rgba(59, 130, 246, 0.15);
  color: #60a5fa;
  border: 1px solid rgba(59, 130, 246, 0.3);
}

/* Toast notifications */
#toast-container .toast-notice,
.toast-notice {
  animation: slideInRight 0.25s ease-out forwards;
  background-color: #0f172a !important;
  color: #ffffff !important;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 8px 10px -6px rgba(0, 0, 0, 0.5) !important;
  border-width: 1px !important;
  z-index: 9999 !important;
}

#toast-container .toast-notice.toast-success,
.toast-notice.toast-success {
  background-color: #047857 !important;
  border-color: #059669 !important;
  color: #ffffff !important;
}

#toast-container .toast-notice div,
#toast-container .toast-notice span,
#toast-container .toast-notice p,
.toast-notice div,
.toast-notice span,
.toast-notice p {
  color: #ffffff !important;
}

@keyframes slideInRight {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

/* ============================================================= */
/* NORMALIZACIÓN VISUAL Y CONTRASTE EN MODO CLARO (html.light)  */
/* ============================================================= */

/* 1. Normalización de Badges de Documento/NIT y Códigos de Radicado en Tablas */
html.light .bg-slate-800,
html.light .bg-slate-900,
html.light .bg-gray-800,
html.light .bg-gray-900 {
  background-color: #f1f5f9 !important;
  color: #0f172a !important;
  border: 1px solid #cbd5e1 !important;
}

/* 2. Píldoras de Estado (Verde / Completado / Resuelto) en tablas */
html.light td [class*="bg-emerald-9"],
html.light td [class*="bg-green-9"],
html.light td .bg-emerald-950,
html.light td .bg-green-950 {
  background-color: #dcfce7 !important;
  color: #15803d !important;
  border: 1px solid #86efac !important;
}
html.light td [class*="bg-emerald-9"] *,
html.light td [class*="bg-green-9"] *,
html.light td .bg-emerald-950 *,
html.light td .bg-green-950 * {
  color: #15803d !important;
}

/* 3. Badges de Modalidad, Líneas de Suministro y Servicios Secundarios */
html.light td [class*="bg-blue-9"],
html.light td [class*="bg-indigo-9"],
html.light td .bg-blue-950,
html.light td .bg-indigo-950 {
  background-color: #e0e7ff !important;
  color: #3730a3 !important;
  border: 1px solid #c7d2fe !important;
}
html.light td [class*="bg-blue-9"] *,
html.light td [class*="bg-indigo-9"] *,
html.light td .bg-blue-950 *,
html.light td .bg-indigo-950 * {
  color: #3730a3 !important;
}

/* 4. Barras de Valor Estimado y Tarjetas en el Embudo Kanban */
html.light .kanban-card [class*="bg-slate-8"],
html.light .kanban-card [class*="bg-slate-9"],
html.light .kanban-card div[class*="rounded"][class*="bg-"] {
  background-color: #f8fafc !important;
  color: #0f172a !important;
  border: 1px solid #e2e8f0 !important;
}
html.light .kanban-card span,
html.light .kanban-card p {
  color: #334155 !important;
}

/* 5. Contenedores de Almacenamiento Dual (SSD / HDD) en Ficha Técnica */
html.light .card-storage-wrapper {
  background-color: #ffffff !important;
  border-color: #e2e8f0 !important;
}
html.light .card-disk-storage,
html.light .disk-storage-box,
html.light div.card-disk-storage {
  background-color: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  color: #0f172a !important;
}
html.light .card-disk-storage span,
html.light .disk-storage-box span,
html.light .card-storage-wrapper span {
  color: #0f172a !important;
}
html.light .card-disk-storage button,
html.light .disk-storage-box button {
  background-color: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  color: #334155 !important;
}
html.light .card-disk-storage button:hover,
html.light .disk-storage-box button:hover {
  background-color: #e2e8f0 !important;
  color: #0f172a !important;
}
html.light .card-disk-storage input,
html.light .card-disk-storage select,
html.light .disk-storage-box input,
html.light .disk-storage-box select {
  background-color: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  color: #0f172a !important;
}

/* 6. Badges Morados / Púrpura (ej: "Tarifa Plena", "Diagnóstico TI") */
html.light td [class*="bg-purple-"],
html.light td [class*="bg-fuchsia-"],
html.light td .bg-purple-950,
html.light td .bg-purple-900 {
  background-color: #f3e8ff !important; /* Lila suave pastel */
  color: #6b21a8 !important;            /* Púrpura oscuro legible */
  border: 1px solid #d8b4fe !important;
}
html.light td [class*="bg-purple-"] *,
html.light td [class*="bg-fuchsia-"] * {
  color: #6b21a8 !important;
}

/* 7. Badges Teal / Cian / Esmeralda Oscuro (ej: "Bolsa de Horas disponibles") */
html.light td [class*="bg-teal-"],
html.light td [class*="bg-cyan-9"],
html.light td .bg-teal-950,
html.light td .bg-teal-900 {
  background-color: #ccfbf1 !important; /* Teal pastel */
  color: #115e59 !important;            /* Verde azulado oscuro */
  border: 1px solid #99f6e4 !important;
}
html.light td [class*="bg-teal-"] *,
html.light td [class*="bg-cyan-9"] * {
  color: #115e59 !important;
}

/* Regla comodín: Asegurar que ningún badge o span pequeño dentro de celdas <td> tenga texto blanco forzado sobre fondos claros */
html.light td span[class*="rounded"] {
  font-weight: 500;
}

/* 8. Corrección de Contraste en Modales de Vista Previa de Informes (Modo Claro) */
html.light #quick-preview-modal .bg-slate-900,
html.light #quick-preview-modal .bg-slate-950,
html.light #quick-preview-modal .bg-slate-950\/50,
html.light #quick-preview-modal .bg-slate-950\/60,
html.light #quick-preview-modal .bg-slate-950\/70,
html.light #quick-preview-modal .bg-slate-900\/50 {
  background-color: #ffffff !important;
  border-color: #e2e8f0 !important;
  color: #0f172a !important;
}
html.light #quick-preview-modal .border-slate-800,
html.light #quick-preview-modal .border-slate-800\/80,
html.light #quick-preview-modal .border-slate-800\/60,
html.light #quick-preview-modal .border-slate-800\/50 {
  border-color: #e2e8f0 !important;
}
html.light #quick-preview-modal #preview_report_code,
html.light #quick-preview-modal h3,
html.light #quick-preview-modal h4,
html.light #quick-preview-modal strong {
  color: #0f172a !important;
}
html.light #quick-preview-modal p,
html.light #quick-preview-modal span {
  color: inherit;
}
html.light #quick-preview-modal #preview_technician {
  color: #0f172a !important;
}
html.light #quick-preview-modal #preview_duration {
  color: #b45309 !important;
}
html.light #quick-preview-modal #preview_location {
  color: #0369a1 !important;
}
html.light #quick-preview-modal .bg-slate-800 {
  background-color: #f1f5f9 !important;
  color: #475569 !important;
  border: 1px solid #cbd5e1 !important;
}
html.light #quick-preview-modal .bg-slate-800 * {
  color: #475569 !important;
}

/* Estado Completado / Óptimo: fondo #dcfce7, texto #15803d, borde #86efac */
html.light #quick-preview-modal .bg-emerald-950,
html.light #quick-preview-modal [class*="bg-emerald-9"],
html.light #quick-preview-modal [class*="bg-green-9"],
html.light .badge-status-completed,
html.light .badge-health-optimo {
  background-color: #dcfce7 !important;
  color: #15803d !important;
  border: 1px solid #86efac !important;
}
html.light #quick-preview-modal .bg-emerald-950 *,
html.light #quick-preview-modal [class*="bg-emerald-9"] *,
html.light #quick-preview-modal [class*="bg-green-9"] *,
html.light .badge-status-completed *,
html.light .badge-health-optimo * {
  color: #15803d !important;
}

/* Estado Próximo Mantenimiento / En Proceso: fondo #fef3c7, texto #b45309, borde #fcd34d */
html.light #quick-preview-modal .bg-amber-950,
html.light #quick-preview-modal [class*="bg-amber-9"],
html.light #quick-preview-modal [class*="bg-yellow-9"],
html.light .badge-status-in-progress,
html.light .badge-health-warning {
  background-color: #fef3c7 !important;
  color: #b45309 !important;
  border: 1px solid #fcd34d !important;
}
html.light #quick-preview-modal .bg-amber-950 *,
html.light #quick-preview-modal [class*="bg-amber-9"] *,
html.light #quick-preview-modal [class*="bg-yellow-9"] *,
html.light .badge-status-in-progress *,
html.light .badge-health-warning * {
  color: #b45309 !important;
}

/* Estado Crítico: fondo #fee2e2, texto #b91c1c, borde #fca5a5 */
html.light #quick-preview-modal .bg-rose-950,
html.light #quick-preview-modal .bg-red-950,
html.light #quick-preview-modal [class*="bg-rose-9"],
html.light #quick-preview-modal [class*="bg-red-9"],
html.light .badge-status-critical,
html.light .badge-health-critical {
  background-color: #fee2e2 !important;
  color: #b91c1c !important;
  border: 1px solid #fca5a5 !important;
}
html.light #quick-preview-modal .bg-rose-950 *,
html.light #quick-preview-modal .bg-red-950 *,
html.light #quick-preview-modal [class*="bg-rose-9"] *,
html.light #quick-preview-modal [class*="bg-red-9"] *,
html.light .badge-status-critical *,
html.light .badge-health-critical * {
  color: #b91c1c !important;
}

/* ========================================================================= */
/* MODO CLARO - CORRECCIÓN UNIVERSAL DE TABLAS, PRECIOS Y HOVER              */
/* ========================================================================= */
html.light table tbody tr:hover {
  background-color: #f8fafc !important;
}

html.light table tbody tr:hover td {
  background-color: transparent !important;
}

html.light .hover\:bg-slate-850\/50:hover,
html.light .hover\:bg-slate-800:hover,
html.light .hover\:bg-slate-900:hover,
html.light .hover\:bg-slate-500:hover {
  background-color: #f8fafc !important;
}

/* Forzar contraste nítido en valores y textos en Modo Claro */
html.light .text-slate-100 {
  color: #0f172a !important;
}

html.light .text-slate-200 {
  color: #1e293b !important;
}

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

html.light .text-slate-400 {
  color: #475569 !important; /* Elevado a slate-600 para cumplimiento WCAG AA en Modo Claro */
}

html.light .text-slate-500 {
  color: #475569 !important; /* Elevado a slate-600 para cumplimiento WCAG AA en Modo Claro */
}

html.light .text-slate-600 {
  color: #334155 !important; /* Elevado a slate-700 para contraste óptimo */
}

/* ============================================================= */
/* MEJORAS DE CONTRASTE Y ACCESIBILIDAD WCAG AA (DASHBOARD)     */
/* ============================================================= */
.ticket-meta-text,
.asset-meta-text,
.dashboard-meta-text {
  color: #cbd5e1;
}

html.light .ticket-meta-text,
html.light .asset-meta-text,
html.light .dashboard-meta-text {
  color: #334155 !important; /* slate-700 estricto en modo claro */
}