/* styles.css */

/* Fuente base y desplazamiento suave */
body, html {
  font-family: 'Inter', sans-serif;
  scroll-behavior: smooth;
  height: 100%;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
 
/* Transición de entrada suave */
.fade-in {
  opacity: 0;
  animation: fadein 0.5s ease-in-out forwards;
}

@keyframes fadein {
  to { opacity: 1; }
}

/* Botón activo del menú lateral */
.menu-button.active {
  background-color: rgba(99, 102, 241, 0.2);
  border-left: 4px solid #6366f1;
}

/* Mapa ajustado a pantalla */
#map {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}

/* Tablas con scroll horizontal */
.scroll-table {
  overflow-x: auto;
  max-width: 100%;
}

/* Estilo de botones del menú */
.menu-button {
  transition: all 0.3s ease;
}

/* Mostrar texto del sidebar al expandir */
#sidebar:hover .menu-button span,
#sidebar:not(.w-16) .menu-button span {
  display: inline-block;
  opacity: 1;
  width: auto;
  pointer-events: auto;
}


#sidebar .menu-button span {
  display: none;
  transition: opacity 0.3s ease;
}

#sidebar.w-16 .menu-button span {
  opacity: 0;
  pointer-events: none; 
  width: 0;
}

/* Textos del sidebar */
.sidebar-text {
  transition: opacity 0.2s ease;
  white-space: nowrap;
}

.w-16 .sidebar-text {
  display: none;
} 

/* Botón colapsar del sidebar */
#toggleSidebar {
  position: fixed;
  top: 1rem;
  left: 1rem;
  z-index: 100;
}

/* Estilo del contenido principal */

#mainContent {
  transition: padding-left 0.3s ease-in-out;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  max-height: 100vh;
}


section {
  flex-grow: 1;
  overflow-y: auto;
  padding-bottom: 2rem;
}

@media (min-width: 768px) {
  #seccion-resumen .grid {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}

#menu-flotante {
  transition: opacity 0.2s ease;
  box-shadow: 0 4px 12px rgba(0,0,0,0.12);
}

.card-kpi {
  @apply rounded-2xl border p-5 shadow-sm hover:shadow-md transition-all duration-300 transform hover:scale-[1.015] bg-white backdrop-blur-lg;
}
.card-title {
  @apply text-sm font-semibold text-gray-800 font-[Poppins] tracking-tight;
}
.card-value {
  @apply text-sm mt-1 font-bold font-[Poppins];
}
.card-list {
  @apply text-xs text-gray-700 font-[Poppins] text-left;
}
.icon-wrapper {
  @apply w-12 h-12 flex items-center justify-center rounded-full shadow-inner ring-1 ring-black/5;
}
@keyframes fade-in-up {
  0% { opacity: 0; transform: translateY(12px); }
  100% { opacity: 1; transform: translateY(0); }
}
.animate-fade-in-up {
  animation: fade-in-up 0.6s ease-out both;
}

/* 🎨 Estilo personalizado para Tom Select */
.ts-wrapper.single {
  @apply border border-gray-300 rounded-xl shadow-sm focus-within:shadow-lg focus-within:ring-2 focus-within:ring-indigo-400 transition-all duration-200;
}
.ts-control {
  @apply bg-white text-sm font-medium text-gray-700 px-3 py-2 rounded-xl min-h-[42px];
}
.ts-dropdown {
  @apply z-50 bg-white rounded-xl shadow-lg border border-gray-200 mt-1;
}
.ts-dropdown .option {
  @apply px-3 py-2 text-sm text-gray-700 hover:bg-indigo-50 cursor-pointer;
}
.ts-dropdown .option.selected {
  @apply bg-indigo-100 text-indigo-700 font-semibold;
}
.ts-control input {
  @apply text-sm focus:ring-0 focus:outline-none;
}
.toast-telemetria {
  opacity: 1;
  pointer-events: none;
}
.toast-telemetria.opacity-0 {
  opacity: 0;
  transition: opacity 1s ease;
}

.metric-card {
  @apply p-4 rounded-lg border shadow flex flex-col;
}
.metric-title {
  @apply text-sm font-medium text-gray-500;
}
.metric-value {
  @apply text-2xl font-bold mt-1;
}
.tabla-card {
  @apply bg-white rounded-xl border shadow flex flex-col max-h-[calc(100vh-380px)] overflow-y-auto;
}
.tabla-title {
  @apply bg-indigo-50 px-4 py-2 font-semibold text-indigo-700 border-b;
}
.tabla-base {
  @apply w-full text-sm text-gray-700;
}
.submodulo-btn {
  @apply text-sm px-4 py-2 rounded-lg border border-gray-300 text-gray-700 hover:bg-indigo-100 transition;
}
.submodulo-btn.active {
  @apply bg-white text-indigo-700 border-indigo-500 font-semibold shadow-sm;
}
.btn-actualizar {
  @apply bg-green-600 text-white px-4 py-2 rounded-lg hover:bg-green-700 transition;
}
.btn-export {
  @apply bg-indigo-600 text-white px-4 py-2 rounded-lg hover:bg-indigo-700 transition;
}
.btn-submenu-edp {
  @apply px-4 py-2 rounded-lg bg-slate-100 hover:bg-blue-100 text-sm font-medium transition;
}

/* ✅ Botón activo del menú lateral principal */
.menu-principal-activo {
  @apply bg-gray-100 text-indigo-700 font-bold;
}
@media print {
  .no-print {
    display: none !important;
  }
}

/* Ajustes para mantener el footer visible y contenido scrollable */
section.flex {
  min-height: 0;
}

.tab-button {
  @apply px-4 py-2 text-sm font-medium text-gray-600 bg-white rounded-full border border-gray-300 shadow-sm hover:bg-indigo-50 hover:text-indigo-700 transition-all duration-200 ease-in-out;
}

.tab-button-active {
  @apply px-4 py-2 text-sm font-semibold text-white bg-indigo-600 rounded-full shadow-md ring-2 ring-indigo-300 hover:bg-indigo-700 transition-all duration-200 ease-in-out;
}

.custom-html-marker {
  all: unset;
}
.custom-scroll::-webkit-scrollbar {
  width: 6px;
}
.custom-scroll::-webkit-scrollbar-track {
  background: transparent;
}
.custom-scroll::-webkit-scrollbar-thumb {
  background-color: rgba(100, 116, 139, 0.4); /* slate-500 */
  border-radius: 10px;
}
@keyframes fadeSlideIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-slide-in {
  animation: fadeSlideIn 0.4s ease-out forwards;
}
.monitoreo-tab {
  padding: 0.5rem 1rem;
  font-size: 0.75rem;
  font-weight: 600;
  border-bottom: 2px solid transparent;
  background: white;
}
.monitoreo-tab:hover {
  background: #f9f9f9;
}
.monitoreo-tab.active {
  border-bottom: 2px solid #1f2937; /* gris oscuro */
}
#map-monitoreo, #map-alertas {
  min-height: 100vh; /* o puedes usar height: 100%; si el contenedor padre tiene altura definida */
}

.tab-archivos {
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  color: #4B5563;
  border-bottom: 2px solid transparent;
  transition: all 0.2s ease;
}

.tab-archivos:hover {
  color: #1F2937;
  border-bottom: 2px solid #CBD5E0;
}


.subtab-archivos {
  animation: fadeIn 0.3s ease-in-out;
}
.tab-archivos-active {
  border-bottom-width: 2px;
  border-color: #4f46e5; /* Indigo-600 */
  color: #4f46e5;
}

.tab-btn {
    @apply px-4 py-2 flex items-center gap-2 text-sm font-medium text-gray-600 
            hover:bg-gray-100 hover:text-indigo-600 transition border-b-2 border-transparent;
  }

  .tab-btn.active {
    @apply text-indigo-600 border-indigo-600 bg-gray-50;
  }
.item-activo-geozona {
  background-color: #e0e7ff; /* indigo-100 */
  border-left: 4px solid #4f46e5; /* indigo-600 */
}
#lista-geozonas li {
  min-height: 48px;
}

/* Estilo responsivo para el formulario de importar zona */
#vista-importar-zona {
  max-width: 100%;
  width: 100%;
  max-height: calc(100vh - 80px); /* evita desbordar el viewport */
  overflow-y: auto;
  margin: 0 auto;
  left: 0;
  right: 0;
  top: 64px;
  z-index: 40;
  padding: 1rem;
  display: none; /* default: oculto */
}

@media (min-width: 768px) {
  #vista-importar-zona {
    width: 400px;
    left: 1rem;
    right: auto;
    border-radius: 1rem;
  }
}
#mapa-crear-geozona {
  height: 100%;
  min-height: 500px;
}
.bg-green { background-color: #16a34a; }   /* ✅ */
.bg-yellow { background-color: #facc15; }  /* ⚠️ */
.bg-orange { background-color: #fb923c; }  /* ⏳ */
.bg-red { background-color: #ef4444; }     /* ❌ */

<!-- Botón primario -->

  .btn-primary {
    @apply bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-md text-sm transition;
  }
  .input {
    @apply p-2 border border-gray-300 rounded-md shadow-sm text-sm focus:ring-indigo-500 focus:border-indigo-500;
  }


.kpi-card {
  @apply bg-white shadow rounded p-4 flex flex-col justify-between;
}

.kpi-label {
  @apply text-sm text-gray-500;
}

.kpi-value {
  @apply text-2xl font-bold;
}

.filtros-horizontal-utilizacion {
  @apply flex flex-col sm:flex-row sm:items-end sm:justify-end gap-2 w-full lg:w-auto;
}

.filtro-item {
  @apply flex flex-col;
}

.filtro-label {
  @apply text-xs font-medium text-gray-500 mb-1;
}

.filtro-select {
  @apply tom-select text-sm w-full;
}

.flash-highlight {
  animation: flash 2s ease-in-out;
  background-color: #d1fae5 !important; /* bg-emerald-100 */
}

@keyframes flash {
  0%   { background-color: #d1fae5; }
  50%  { background-color: #a7f3d0; }
  100% { background-color: #d1fae5; }
}
/* Puedes incluirlo en tu CSS */
.scroll-horizontal {
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}