/* ============================================================
   Xpotlite Admin — ajustes propios sobre DashCode
   ------------------------------------------------------------
   OJO: `dashcode/css/app.css` es un build de Tailwind YA PURGADO.
   Sólo existen las ~2,860 clases que el template usaba en su HTML;
   escribir una utilidad nueva (p. ej. `gap-9` o `grid-cols-7`) NO
   funciona porque esa regla no está compilada.

   Por eso todo lo que necesitemos y no exista en el template va
   aquí, como CSS normal. Este archivo se carga DESPUÉS de app.css.
   ============================================================ */

:root {
  --xpot-primary: #074B87;
  --xpot-primary-600: #063F77;
}

/* ------------------------------------------------------------
   Utilidades que el build purgado de DashCode NO trae.

   Cada una se comprobó contra `app.css` antes de escribirla aquí:
   la regla no existe compilada, así que se define a mano con el
   mismo valor que tendría en Tailwind.
   ------------------------------------------------------------ */

/* Color al pasar el cursor sobre los iconos de acción de las tablas.
   El build sólo trae `hover:text-danger-500`, no las demás variantes. */
.hover\:text-primary-500:hover { color: #074B87; }
.hover\:text-success-500:hover { color: #10b981; }

/* Fondo tenue de los círculos de icono (bg-<color>-500 + bg-opacity-10).
   El build sólo llega hasta bg-opacity-20. */
.bg-opacity-10 { --tw-bg-opacity: 0.1; }

/* ------------------------------------------------------------
   Marca la entrada activa del menú lateral. DashCode sólo trae
   estilo para el submenú abierto, no para un enlace directo.
   ------------------------------------------------------------ */
.sidebar-menu > li > a.navItem.active {
  background-color: var(--xpot-primary);
  color: #fff;
  box-shadow: 0 4px 12px rgba(7, 75, 135, 0.25);
}

.sidebar-menu > li > a.navItem.active span,
.sidebar-menu > li > a.navItem.active iconify-icon {
  color: #fff;
}

.dark .sidebar-menu > li > a.navItem.active {
  box-shadow: none;
}

/* ------------------------------------------------------------
   Tablas: alinear a la derecha la columna de acciones y evitar
   que `table-fixed` corte los nombres largos de establecimientos.
   ------------------------------------------------------------ */
.tabla-xpot {
  table-layout: auto;
}

.tabla-xpot .col-acciones {
  text-align: right;
  white-space: nowrap;
}

.tabla-xpot .td-truncado {
  max-width: 320px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Miniatura del logo de cada local dentro de las tablas */
.logo-local {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  object-fit: cover;
  flex: none;
}

.logo-local-vacio {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f1f5f9;
  color: #94a3b8;
}

.dark .logo-local-vacio {
  background-color: #334155;
  color: #64748b;
}

/* ------------------------------------------------------------
   DataTables en español: el `dom` de DashCode mete los controles
   dentro de una rejilla de 12 columnas; en móvil se encimaban.
   ------------------------------------------------------------ */
@media (max-width: 640px) {
  .dashcode-data-table .dataTables_length,
  .dashcode-data-table .dataTables_filter {
    grid-column: span 12 / span 12;
    justify-content: flex-start !important;
  }
}

.dashcode-data-table .dataTables_filter input {
  margin-left: 0.5rem;
}

/* ------------------------------------------------------------
   Botón de mostrar/ocultar contraseña en las pantallas de acceso.
   ------------------------------------------------------------ */
.ver-clave {
  background: none;
  border: 0;
  line-height: 1;
}

.ver-clave:focus {
  outline: none;
}

/* ------------------------------------------------------------
   Ajuste fino: el pie del panel quedaba pegado al contenido
   cuando la pantalla tenía poco que mostrar.
   ------------------------------------------------------------ */
#content_layout {
  padding-bottom: 1.5rem;
}

/* ------------------------------------------------------------
   Campana de avisos del panel de negocio.

   `w-72`, `lg:right-0` y `-right-[6px]` no existen en el build
   purgado de DashCode, así que el ancho del desplegable y la
   posición del contador se definen aquí.
   ------------------------------------------------------------ */
.menu-avisos {
  width: 18rem;
}

@media (max-width: 380px) {
  .menu-avisos {
    width: calc(100vw - 2rem);
  }
}

.insignia-campana {
  top: -6px;
  right: -6px;
}

@media (min-width: 1024px) {
  .insignia-campana {
    top: 0;
    right: 0;
  }
}