/* ============================================================
   BLOQUE 1 – VARIABLES, TEMA OSCURO Y ESTRUCTURA BASE GLOBAL
   ============================================================ */

/* ---------- Variables globales ---------- */
/* [base] */
:root {
  /* Colores principales */
  --accent: #0d6efd; /* azul primario bootstrap */
  --accent-hover: #0b5ed7; /* tono más oscuro al hover */

  /* Paneles y fondos */
  --panel-bg: #ffffffc4; /* fondo claro principal */
  --panel-border: #dee2e6; /* bordes suaves */
  --body-bg: #f8f9fa; /* gris de fondo general */

  /* Tipografía y texto */
  --text-color: #212529; /* texto principal */
  --muted-color: #6c757d; /* texto secundario */

  /* Sombras */
  --shadow-base: rgba(0, 0, 0, 0.08);
  --shadow-strong: rgba(0, 0, 0, 0.12);
}

/* ---------- Tema oscuro ---------- */
/* [base] */
[data-theme="dark"] {
  --accent: #66b0ff;
  --accent-hover: #5293da;

  --panel-bg: #1d1f23;
  --panel-border: #2a2c31;
  --body-bg: #121316;

  --text-color: #f5f6f7;
  --muted-color: #b5b7ba;

  --shadow-base: rgba(255, 255, 255, 0.06);
  --shadow-strong: rgba(255, 255, 255, 0.1);
}

/* ---------- Estructura general ---------- */
/* [base] */
html, body {
  overscroll-behavior-y: contain; /* evita rebote en scroll */
}

body {
  font-family: "Inter","Segoe UI","Roboto",sans-serif; /* [base] */
  background-color: var(--body-bg); /* [base] */
  color: var(--text-color); /* [base] */
  min-height: 100vh; /* [base] */
  transition: background .25s ease, color .25s ease; /* [base] */
}

/* ---------- Header general ---------- */
/* [base] */
.app-header {
  position: sticky; /* se mantiene visible arriba */
  top: 0;
  z-index: 1030;
  background: var(--panel-bg);
  border-bottom: 1px solid var(--panel-border);
  box-shadow: 0 2px 6px var(--shadow-base);
}
.app-header .logo-header {
  height: 40px;
  width: auto;
}

/* ---------- Contenedores de sección ---------- */
/* [template: farms] */
.section {
  margin-bottom: 1.5rem;
}
.section-title {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: .75rem;
}
.section-title i {
  font-size: 1.1rem;
  color: var(--accent);
}
.text-muted {
  color: var(--muted-color) !important;
}

/* ---------- Reglas divisorias ---------- */
/* [template: viewer_rotem_trio_farm] */
.section-rule {
  border-bottom: 1px solid var(--panel-border);
  opacity: .6;
}

/* ---------- Contenedores grid generales ---------- */
/* [base] */
.grid-6 {
  display: grid;
  justify-content: center;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1rem;
  max-width: 1600px;
  margin: 0 auto;
  padding: 0 1rem;
}

/* [base] ajustes responsive */
@media (max-width: 991.98px) {
  .grid-6 {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  }
}
@media (max-width: 767.98px) {
  .grid-6 {
    grid-template-columns: 1fr;
    padding: 0 1rem;
  }
}


/* ============================================================
   BLOQUE 2 – TARJETAS PRINCIPALES (HUB / FARM)
   ============================================================ */

/* ---------- Estilos base comunes ---------- */
/* [base] */
.hub-card,
.farm-card {
  background: var(--panel-bg); /* [base] */
  color: var(--text-color); /* [base] */
  border: 1px solid var(--panel-border); /* [base] */
  border-radius: 1rem; /* [base] */
  box-shadow: 0 3px 8px var(--shadow-base); /* [base] */
  cursor: pointer; /* [base] */
  width: 100%; /* [base] */
  transition: all .25s ease-in-out; /* [base] */
}

/* ---------- Hover con efecto de profundidad ---------- */
/* [base + hubs] */
.hub-card:hover,
.farm-card:hover {
  transform: translateY(-2px); /* [base] */
  box-shadow: 0 6px 18px var(--shadow-strong); /* [base] */
}

/* ============================================================
   HUB CARD
   ============================================================ */

/* ---------- Tarjeta Hub general ---------- */
/* [base + template: farms] */
.hub-card {
  padding: 1.5rem 1.25rem; /* [base] */
  text-align: center; /* [base] */
  display: flex; /* [base] */
  flex-direction: column; /* [base] */
  justify-content: center; /* [base] */
  align-items: center; /* [base] */
  min-height: 180px; /* [base] */
}

/* [template: farms] refinado */
.hub-card {
  background: var(--panel-bg); /* reafirma fondo consistente */
  border: 1px solid var(--panel-border);
  border-radius: .5rem;
  transition: all .15s ease-in-out;
  min-height: 160px; /* menor que la general */
  padding: 1rem; /* más compacto */
}

/* ---------- Elementos internos ---------- */
/* [base] */
.hub-card .icon {
  font-size: 2rem;
  opacity: .9;
  margin-bottom: .5rem;
}
.hub-card .title {
  font-weight: 700;
  margin-bottom: .25rem;
}
.hub-card small {
  color: var(--muted-color);
}

/* ---------- Hover de hub-card ---------- */
/* [template: farms] */
.hub-card:hover {
  background: #f8f9fa;
  border-color: #0d6efd40;
  box-shadow: 0 .15rem .4rem rgba(13,110,253,.1);
  transform: translateY(-2px);
}

/* ---------- Logos y dimensiones ---------- */
/* [template: farms] */
.hub-logo {
  width: 90px;
  height: auto;
  object-fit: contain;
}

/* ============================================================
   FARM CARD
   ============================================================ */

/* ---------- Tarjeta de granja base ---------- */
/* [hubs + base] */
.farm-card {
  padding: 1rem; /* [base] */
  display: flex; /* [base] */
  flex-direction: column; /* [base] */
  gap: .75rem; /* [base] */
  min-height: 260px; /* [base] */
  text-align: center; /* [base] */
  justify-content: flex-start; /* [hubs] */
  background: var(--panel-bg); /* [hubs] */
  box-shadow: 0 4px 8px var(--shadow-base); /* [hubs] */
  transition: all 0.25s ease-in-out; /* [hubs] */
}

/* [hubs] hover más intenso */
.farm-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 16px var(--shadow-strong);
}

/* ---------- Encabezados ---------- */
/* [hubs] */
.farm-card h5,
.farm-card .farm-name {
  font-weight: 700;
  font-size: 1.05rem;
  margin-bottom: 0.25rem;
}
.farm-card small,
.farm-card .farm-id {
  color: var(--muted-color);
  font-size: .85rem;
}

/* ---------- Acciones internas ---------- */
/* [base + template: farms] */
.farm-card .farm-actions {
  display: flex !important;
  flex-wrap: wrap;
  justify-content: center;
  gap: .5rem;
}

/* ---------- Ajustes de grid dentro de hubs ---------- */
/* [hubs] */
.grid-6 .farm-card {
  margin: 0.25rem;
}
@media (max-width: 992px) {
  .grid-6 .farm-card {
    margin: 0.5rem 0;
  }
}

/* ---------- Modo oscuro para farm-card ---------- */
/* [hubs] */
[data-theme="dark"] .farm-card {
  background-color: #1f2125;
  border-color: #34373c;
  box-shadow: 0 3px 8px rgba(255,255,255,0.05);
}
[data-theme="dark"] .farm-card:hover {
  box-shadow: 0 8px 16px rgba(255,255,255,0.1);
}
[data-theme="dark"] .farm-card .btn-outline-info {
  color: #66b0ff;
  border-color: #66b0ff;
}
[data-theme="dark"] .farm-card .btn-outline-info:hover {
  background-color: #66b0ff;
  color: #000;
}
[data-theme="dark"] .farm-card,
[data-theme="dark"] .farm-card .btn {
  transition: all 0.25s ease-in-out;
}


/* ============================================================
   BLOQUE 3 – CHIPS DE GRANJA (FARM-CHIPS / RESPONSIVE)
   ============================================================ */

/* ---------- Contenedor de chips ---------- */
/* [template: farms] */
.farm-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.75rem; /* espacio entre chips */
  width: 100%;
  margin-top: auto;
}

/* ---------- Chip individual ---------- */
/* [template: farms] */
.farm-chip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2.5rem;
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  border-radius: 999px; /* forma de píldora */
  padding: 0.6rem 1rem;
  font-size: 0.95rem;
  color: var(--text-color);
  text-decoration: none;
  box-shadow: 0 2px 6px var(--shadow-base);
  flex: 0 0 200px;
  height: 65px;
  transition: all 0.2s ease-in-out;
}

/* ---------- Hover de chip ---------- */
/* [template: farms] */
.farm-chip:hover {
  background: #f8f9fa;
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 4px 10px var(--shadow-strong);
}

/* ---------- Icono del chip ---------- */
/* [template: farms] */
.chip-icon {
  width: 65px;
  height: 36px;
  object-fit: contain;
}

/* ---------- Etiqueta del chip ---------- */
/* [template: farms] */
.chip-label {
  font-weight: 600;
  font-size: 0.9rem;
  line-height: 1;
}

/* ============================================================
   VISTA MEDIA – ADAPTACIÓN RESPONSIVE DE CHIPS
   ============================================================ */

@media (max-width: 991.98px) {
  /* Contenedor pasa a grid de dos columnas */
  /* [template: farms] */
  .farm-chips {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.6rem;
    justify-items: center;
    align-items: center;
  }

  /* Ocultar etiqueta para ahorrar espacio */
  /* [template: farms] */
  .chip-label {
    display: none;
  }

  /* Ajuste de tamaño del chip */
  /* [template: farms] */
  .farm-chip {
    flex: 0 0 65px;
    height: 75px;
    border-radius: .75rem;
    padding: 0.4rem;
    justify-content: center;
    align-items: center;
  }

  /* Icono más grande y centrado */
  /* [template: farms] */
  .chip-icon {
    width: 60px;
    height: 60px;
    object-fit: contain;
  }
}


/* ============================================================
   BLOQUE 4 – BOTONES, MODALES Y ALERTAS
   ============================================================ */

/* ============================================================
   BOTONES
   ============================================================ */

/* ---------- Paleta principal ---------- */
/* [base] */
.btn-primary,
.btn-outline-primary {
  --bs-btn-bg: var(--accent);
  --bs-btn-border-color: var(--accent);
  --bs-btn-hover-bg: var(--accent-hover);
  --bs-btn-hover-border-color: var(--accent-hover);
  --bs-btn-color: #fff;
}

/* ---------- Info ---------- */
/* [base + hubs] */
.btn-info,
.btn-outline-info {
  --bs-btn-bg: #0dcaf0;
  --bs-btn-border-color: #0dcaf0;
  --bs-btn-hover-bg: #0bb3d6;
  --bs-btn-hover-border-color: #0bb3d6;
  --bs-btn-color: #083a47;
}

/* ---------- Éxito ---------- */
/* [base] */
.btn-success,
.btn-outline-success {
  --bs-btn-bg: #198754;
  --bs-btn-border-color: #198754;
  --bs-btn-hover-bg: #146c43;
  --bs-btn-hover-border-color: #146c43;
  --bs-btn-color: #fff;
}

/* ---------- Advertencia ---------- */
/* [base] */
.btn-warning,
.btn-outline-warning {
  --bs-btn-bg: #ffc107;
  --bs-btn-border-color: #ffc107;
  --bs-btn-hover-bg: #e0a800;
  --bs-btn-hover-border-color: #e0a800;
  --bs-btn-color: #212529;
}

/* ---------- Secundario ---------- */
/* [base] */
.btn-secondary,
.btn-outline-secondary {
  --bs-btn-bg: #6c757d;
  --bs-btn-border-color: #6c757d;
  --bs-btn-hover-bg: #5a6268;
  --bs-btn-hover-border-color: #5a6268;
  --bs-btn-color: #fff;
}

/* ---------- Hover personalizado (solo hubs) ---------- */
/* [hubs] */
.farm-card .btn-outline-info:hover {
  background-color: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.farm-card .btn-outline-info:focus {
  box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
}

/* ---------- Ajustes responsive ---------- */
/* [base] */
@media (max-width: 768px) {
  .farm-actions .btn-lg {
    font-size: 1rem;
    padding: .8rem 1rem;
  }
}

/* ============================================================
   MODALES
   ============================================================ */

/* ---------- Contenedor principal ---------- */
/* [base + endpoints] */
.modal-content {
  background: var(--panel-bg);
  color: var(--text-color);
  border: 1px solid var(--panel-border);
  box-shadow: 0 8px 16px var(--shadow-base);
}

/* ---------- Cabecera y pie ---------- */
/* [base + endpoints] */
.modal-header,
.modal-body,
.modal-footer {
  border-color: var(--panel-border);
}

/* [endpoints.css] ajustes de padding */
#endpointEditModal .modal-header,
#endpointEditModal .modal-footer {
  padding-top: .5rem;
  padding-bottom: .5rem;
}

/* ============================================================
   ALERTAS
   ============================================================ */

/* ---------- Alerta informativa ---------- */
/* [base] */
.alert-info {
  background: rgba(13,110,253,.05);
  border-color: var(--accent);
  color: var(--text-color);
}

/* ---------- Variantes usadas en plantillas ---------- */
/* [template: viewer_hub_unified, farms] */
.alert {
  border-radius: .5rem;
  padding: 1rem 1.25rem;
  margin-bottom: 1rem;
}

/* ---------- Color y contraste en modo oscuro ---------- */
/* [template: viewer_vnc_lite] */
[data-theme="dark"] .alert-info {
  background: rgba(255,255,255,0.06);
  border-color: #66b0ff;
  color: var(--text-color);
}


/* ============================================================
   BLOQUE 5 – LAYOUTS ESPECÍFICOS (Endpoints, Hubs, Dashboard)
   ============================================================ */

/* ============================================================
   A) ENDPOINTS (ADMIN)
   ============================================================ */

/* Panel principal de endpoints */
/* [endpoints.css] */
#endpoints-panel .card { margin-top: .5rem; } /* [endpoints.css] */
#endpoints-panel .form-label { margin-bottom: .25rem; } /* [endpoints.css] */
#endpoints-panel .form-control-sm,
#endpoints-panel .form-select-sm {
  font-size: .875rem; /* [endpoints.css] */
  padding: .35rem .5rem; /* [endpoints.css] */
}

/* Modal de edición de endpoint */
/* (padding ya consolidado en Bloque 4) */


/* ============================================================
   B) HUBS (Vistas unificadas / globales / locales)
   ============================================================ */

/* Sección contenedora de hubs globales */
/* [viewer_hub_unified] */
.hub-global { max-width: 1400px; margin: 0 auto; } /* [viewer_hub_unified] */

/* Separadores por granja dentro del hub */
/* [viewer_hub_unified] */
.farm-section { border-bottom: 1px solid #e9ecef; padding-bottom: 1rem; } /* [viewer_hub_unified] */
.farm-section:last-child { border-bottom: none; } /* [viewer_hub_unified] */

/* Título de sección por granja */
/* [viewer_hub_unified] */
.farm-section h4.h6 {
  font-weight: 600;              /* [viewer_hub_unified] */
  letter-spacing: .3px;          /* [viewer_hub_unified] */
  color: #0d6efd;                /* [viewer_hub_unified] */
}

/* Grilla de aplicaciones dentro de hubs */
/* [viewer_hub_unified] */
.farm-apps-grid {
  display: grid;                                /* [viewer_hub_unified] */
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); /* [viewer_hub_unified] */
  gap: 10px;                                    /* [viewer_hub_unified] */
}
@media (min-width: 1400px) {
  .farm-apps-grid { grid-template-columns: repeat(6, 1fr); }   /* [viewer_hub_unified] */
}
@media (max-width: 991.98px) {
  .farm-apps-grid { grid-template-columns: 1fr; }               /* [viewer_hub_unified] */
}

/* Mini-tarjetas de apps dentro del hub */
/* [viewer_hub_unified] */
.app-card {
  display: flex;                                  /* [viewer_hub_unified] */
  flex-direction: column;                         /* [viewer_hub_unified] */
  align-items: center; justify-content: center;   /* [viewer_hub_unified] */
  padding: 0.75rem 0.5rem;                        /* [viewer_hub_unified] */
  border: 1px solid var(--bs-border-color);       /* [viewer_hub_unified] */
  border-radius: .5rem;                           /* [viewer_hub_unified] */
  background: #fff;                               /* [viewer_hub_unified] */
  transition: all 0.15s ease-in-out;              /* [viewer_hub_unified] */
  text-align: center;                             /* [viewer_hub_unified] */
  min-height: 90px;                               /* [viewer_hub_unified] */
}
.app-card:hover {
  background: #f8f9fa;                            /* [viewer_hub_unified] */
  border-color: #0d6efd40;                        /* [viewer_hub_unified] */
  box-shadow: 0 .15rem .4rem rgba(13,110,253,0.1);/* [viewer_hub_unified] */
  transform: translateY(-2px);                    /* [viewer_hub_unified] */
}
.app-card .label {
  color: #212529;           /* [viewer_hub_unified] */
  font-weight: 500;         /* [viewer_hub_unified] */
  font-size: 0.85rem;       /* [viewer_hub_unified] */
}

/* Logos dentro de mini-tarjetas */
/* [viewer_hub_unified] */
.app-logo {
  width: 40px; height: 40px;          /* [viewer_hub_unified] */
  object-fit: contain;                /* [viewer_hub_unified] */
  opacity: 0.9;                       /* [viewer_hub_unified] */
  transition: transform .2s, opacity .2s; /* [viewer_hub_unified] */
}
.app-card:hover .app-logo { transform: scale(1.05); opacity: 1; } /* [viewer_hub_unified] */

/* Logo de Rotem Trio en tarjeta de hub local */
/* [viewer_hub_unified] */
.farm-logo { width: 70px; height: auto; object-fit: contain; } /* [viewer_hub_unified] */

/* Icono de sección en dashboard de granjas */
/* [farms.html] */
.granjas-icon { width: 48px; height: auto; object-fit: contain; } /* [farms] */

/* ============================================================
   C) DASHBOARD DE GRANJAS (tarjetas y hubs iniciales)
   ============================================================ */

/* Hub principal (portada) — estilo compacto usado en farms */
/* [farms.html] */
.hub-card {
  /* Estos ajustes complementan el bloque 2 sin cambiar visual actual */
  background: var(--panel-bg);     /* [farms] */
  border: 1px solid var(--panel-border); /* [farms] */
  border-radius: .5rem;            /* [farms] */
  transition: all .15s ease-in-out;/* [farms] */
  min-height: 160px;               /* [farms] */
  padding: 1rem;                   /* [farms] */
}
.hub-card:hover {
  background: #f8f9fa;             /* [farms] */
  border-color: #0d6efd40;         /* [farms] */
  box-shadow: 0 .15rem .4rem rgba(13,110,253,.1); /* [farms] */
  transform: translateY(-2px);     /* [farms] */
}

/* Logo genérico en hub de portada */
/* [farms.html] */
.hub-logo { width: 90px; height: auto; object-fit: contain; } /* [farms] */


/* ============================================================
   BLOQUE 6 – VIEWER EMBED (iframe y hub-embed)
   ============================================================ */

/* ---------- Contenedor principal de embeds ---------- */
/* [template: viewer_embed] */
.hub-embed {
  width: 100%;
  max-width: 1600px;
  border-radius: .75rem;
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  box-shadow: 0 6px 18px var(--shadow-base);
  height: auto;
  min-height: 80vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y pinch-zoom;
}

.hub-embed iframe { width: 100%; height: auto; min-height: 80vh; border: none; touch-action: pan-y pinch-zoom; }


/* ---------- iframe interno ---------- */
/* [template: viewer_embed] */

/* ============================================================
   BLOQUE 7 – VIEWER ROTEM TRIO (Farm y Grid)
   ============================================================ */

/* ---------- Grid adaptable para TRIO (modo por granja) ---------- */
/* [template: viewer_rotem_trio_farm] */
.rt-grid {
  display: grid;
  grid-gap: 12px;
  grid-template-columns: repeat(1, 1fr);
}
@media (min-width:576px){.rt-grid{grid-template-columns:repeat(2,1fr);} }
@media (min-width:768px){.rt-grid{grid-template-columns:repeat(3,1fr);} }
@media (min-width:992px){.rt-grid{grid-template-columns:repeat(4,1fr);} }
@media (min-width:1200px){.rt-grid{grid-template-columns:repeat(6,1fr);} }

/* Tarjetas de galpones TRIO */
/* [template: viewer_rotem_trio_farm] */
.shed-card {
  border: 1px solid var(--bs-border-color);
  border-radius: .5rem;
  transition: transform .1s, box-shadow .1s;
}
.shed-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 .25rem .75rem rgba(0,0,0,.06);
}

/* ---------- Grid multi viewer TRIO (vista GRID) ---------- */
/* [template: viewer_rotem_trio_grid] */


/* ============================================================
   BLOQUE 8 – VIEWER VNC LITE + SCROLLBARS Y EFECTOS GLOBALES
   ============================================================ */

/* ============================================================
   VIEWER VNC LITE
   ============================================================ */

/* ---------- Contenedor principal ---------- */
/* [template: viewer_vnc_lite] */
#vnc-root {
  height: 100vh; /* ocupa toda la ventana */
}

/* ---------- Contenedor del canvas ---------- */


/* ============================================================
   SCROLLBARS Y EFECTOS GLOBALES
   ============================================================ */

/* ---------- Scrollbars globales ---------- */
/* [base] */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-thumb {
  background-color: rgba(160,160,160,.5);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background-color: rgba(120,120,120,.7);
}

/* ---------- Transiciones y sombras comunes ---------- */
/* [base + hubs + farms] */
.transition-all { transition: all .25s ease-in-out; }
.shadow-base { box-shadow: 0 3px 8px var(--shadow-base); }
.shadow-strong { box-shadow: 0 8px 16px var(--shadow-strong); }


/* ============================================================
   BLOQUE 9 – AJUSTES DE TEMA OSCURO (COHERENCIA VISUAL)
   ============================================================ */

/* ---------- Tarjetas (Farm, Hub, App) ---------- */
/* Corrige bajo contraste de íconos/logos y fondos dispares */
[data-theme="dark"] .farm-card,
[data-theme="dark"] .hub-card,
[data-theme="dark"] .app-card {
  background-color: #23262b; /* tono más claro que el panel-bg original */
  border-color: #3a3d42;     /* bordes más definidos */
  box-shadow: 0 4px 10px rgba(255,255,255,0.04);
  color: var(--text-color);
}

[data-theme="dark"] .farm-card:hover,
[data-theme="dark"] .hub-card:hover,
[data-theme="dark"] .app-card:hover {
  background-color: #2b2e34; /* leve aclarado al hover */
  box-shadow: 0 6px 18px rgba(255,255,255,0.08);
}

/* ---------- Íconos / textos dentro de tarjetas ---------- */
[data-theme="dark"] .farm-card small,
[data-theme="dark"] .hub-card small,
[data-theme="dark"] .app-card .label {
  color: #c8c9cc; /* mejora legibilidad en fondo gris */
}

/* ---------- Botones Outline (Usuarios, etc.) ---------- */
/* Refuerza contraste de los bordes en tema oscuro */
[data-theme="dark"] .btn-outline-secondary,
[data-theme="dark"] .btn-outline-dark {
  color: #e4e7eb;         /* texto claro */
  border-color: #6c757d;  /* borde gris visible */
}
[data-theme="dark"] .btn-outline-secondary:hover,
[data-theme="dark"] .btn-outline-dark:hover {
  background-color: #6c757d; /* fondo gris en hover */
  color: #fff;
}

/* ---------- Botones primarios ---------- */
/* Ajuste leve de tono en modo oscuro */
[data-theme="dark"] .btn-primary,
[data-theme="dark"] .btn-outline-primary {
  --bs-btn-bg: #66b0ff;
  --bs-btn-border-color: #66b0ff;
  --bs-btn-hover-bg: #4d9ae6;
  --bs-btn-hover-border-color: #4d9ae6;
  --bs-btn-color: #fff;
}

/* ---------- Fondos de hubs y secciones ---------- */
/* Alinea el color de los contenedores con las tarjetas */
[data-theme="dark"] .hub-global,
[data-theme="dark"] .farm-section,
[data-theme="dark"] .hub-embed {
  background-color: #1d1f23;
  border-color: #2f3238;
}

/* ---------- Tablas / paneles administrativos ---------- */
/* (opcional, mejora visual en endpoints o listados) */
[data-theme="dark"] table,
[data-theme="dark"] .table {
  background-color: #1c1e22;
  color: #e2e3e5;
}
[data-theme="dark"] .table thead {
  background-color: #22252a;
}
[data-theme="dark"] .table tr:hover {
  background-color: #2b2e34;
}

/* ---------- Ajuste global de sombra ---------- */
[data-theme="dark"] .shadow-base {
  box-shadow: 0 3px 8px rgba(255,255,255,0.05);
}
[data-theme="dark"] .shadow-strong {
  box-shadow: 0 8px 16px rgba(255,255,255,0.08);
}


/* ---------- Chips en modo oscuro ---------- */
/* Mantiene los chips de granja con fondo claro para conservar visibilidad */
[data-theme="dark"] .farm-chip {
  background: #f8f9fa;       /* mismo fondo que en modo claro */
  border-color: #dee2e6;     /* borde gris claro */
  color: #212529;            /* texto oscuro */
  box-shadow: 0 2px 6px rgba(0,0,0,0.15); /* sombra estándar */
}

[data-theme="dark"] .farm-chip:hover {
  background: #ffffff;       /* fondo blanco al hover */
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(0,0,0,0.25);
}

[data-theme="dark"] .chip-label {
  color: #212529; /* asegura contraste del texto */
}

[data-theme="dark"] .chip-icon {
  filter: brightness(0.95); /* mejora contraste en fondos claros */
}


/* ---------- Chips en modo oscuro (granjas + hubs) ---------- */
/* Mantiene todos los chips visibles en modo oscuro con fondo claro */
[data-theme="dark"] .farm-chip,
[data-theme="dark"] .hub-card .farm-chip,
[data-theme="dark"] .hub-card .hub-chip,
[data-theme="dark"] .app-card .hub-chip {
  background: #f8f9fa;       /* fondo claro uniforme */
  border-color: #dee2e6;     /* borde gris claro */
  color: #212529;            /* texto oscuro */
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}

/* Hover */
[data-theme="dark"] .farm-chip:hover,
[data-theme="dark"] .hub-card .farm-chip:hover,
[data-theme="dark"] .hub-card .hub-chip:hover,
[data-theme="dark"] .app-card .hub-chip:hover {
  background: #ffffff;
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(0,0,0,0.25);
}

/* Texto e íconos */
[data-theme="dark"] .hub-chip .chip-label,
[data-theme="dark"] .farm-chip .chip-label {
  color: #212529; /* texto oscuro */
}
[data-theme="dark"] .hub-chip .chip-icon,
[data-theme="dark"] .farm-chip .chip-icon {
  filter: brightness(0.95); /* mejora contraste de íconos */
}