/* Overrides globales del panel sobre Mosaic (cargar DESPUÉS de mosaic.css).
   Correcciones de tema que las utilidades purgadas de Tailwind no cubren. */

/* Cursor de mano en los elementos interactivos. Tailwind v4 dejó los <button> con
   `cursor: default`; se restaura el `pointer` (el mismo de los enlaces) en botones y
   elementos con rol de botón. Los deshabilitados mantienen su cursor por defecto. */
button:not(:disabled),
[type="button"]:not(:disabled),
[type="submit"]:not(:disabled),
[type="reset"]:not(:disabled),
[role="button"]:not([aria-disabled="true"]) {
  cursor: pointer;
}

/* `<select>` nativo en modo oscuro: `.form-select` fija fondo blanco y no recibe el dark
   (las utilidades dark:* no están en el CSS purgado). Se ennegrece el control y, con
   color-scheme dark, el desplegable nativo de opciones también sale oscuro. */
.dark select,
.dark select.form-select {
  color-scheme: dark;
  background-color: var(--color-gray-800);
  color: var(--color-gray-300);
  border-color: var(--color-gray-700);
}
.dark select option,
.dark select optgroup {
  background-color: var(--color-gray-800);
  color: var(--color-gray-300);
}

/* Tooltip propio de [data-tooltip] (lo monta panel.js en <body> con position:fixed).
   Sus estilos vivían en panel.css, que dejó de cargarse en la migración a Mosaic y además
   usaba variables de Tabler (--tblr-*): el tooltip se creaba sin estilo y no se veía. Se
   reescribe aquí (CSS global ya cargado) con el aspecto del componente Tooltip de Mosaic:
   caja blanca con borde, sombra y esquinas redondeadas; sin flecha. */
.panel-tooltip {
  position: fixed;
  z-index: 1080;
  max-width: 20rem;
  padding: 0.5rem;
  border: 1px solid var(--color-gray-200);
  border-radius: 0.5rem;
  background: #fff;
  color: var(--color-gray-600);
  font-size: 0.75rem;
  line-height: 1rem;
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  pointer-events: none;
}
.dark .panel-tooltip {
  border-color: var(--color-gray-700);
  background: var(--color-gray-800);
  color: var(--color-gray-300);
}

/* Barra de fortaleza de contraseña (alta/edición de usuario, cambio de contraseña...). El JS
   (user-form-validate / user-edit-validate / account-password) sigue marcando los segmentos con
   is-weak/is-fair/is-good/is-strong, pero sus estilos también se quedaron en panel.css: sin
   ellos los segmentos median 0px y no se veía nada. Colores del tema en vez de vars de Tabler. */
.pw-strength {
  display: flex;
  gap: 4px;
}
.pw-strength-seg {
  flex: 1;
  height: 4px;
  border-radius: 2px;
  background: var(--color-gray-200);
  transition: background 0.15s ease-in-out;
}
.dark .pw-strength-seg {
  background: var(--color-gray-700);
}
.pw-strength-seg.is-weak {
  background: var(--color-red-500);
}
.pw-strength-seg.is-fair {
  background: var(--color-yellow-500);
}
.pw-strength-seg.is-good {
  background: var(--color-sky-500);
}
.pw-strength-seg.is-strong {
  background: var(--color-green-500);
}

/* Barra de progreso superior en las navegaciones (page-loader.js). Mismo caso: su CSS estaba en
   panel.css y el color venía de --tblr-primary. */
.page-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0;
  z-index: 2147483647;
  background: var(--color-violet-500);
  opacity: 0;
  transition:
    width 0.3s ease-out,
    opacity 0.15s 0.15s ease-in;
  transform: translate3d(0, 0, 0);
}

/* Cabeceras de tabla ordenables: el <thead> lleva `uppercase`, pero el reset de formularios
   fija `text-transform: none` en <button>, que gana a la herencia y dejaba las columnas con
   botón de orden (p. ej. Nombre, Último acceso) en minúsculas mientras el resto salía en
   mayúsculas. */
thead th button {
  text-transform: inherit;
}

/* Item "peligroso" (rojo) de los menús de acciones. Los items comparten una base con
   `dark:text-gray-300`, cuya especificidad (:is(.dark *)) gana a `text-red-500` en oscuro y
   los volvía grises. Este hook fija el rojo en ambos temas con especificidad suficiente. */
.menu-item-danger {
  color: var(--color-red-500);
}
.dark .menu-item-danger {
  color: var(--color-red-400);
}

/* Zebra de la lista de metadatos del Drawer de colas. Se usa `nth-of-type(div)` en vez de
   `nth-child`/Tailwind `odd:` porque Alpine deja los `<template x-if>` de las filas condicionales
   en el DOM: `nth-child` los contaría y desalinearía las bandas; `div:nth-of-type` solo cuenta las
   filas reales (los <div>), respetando el orden visual. */
.qd-meta > div:nth-of-type(odd) {
  background-color: var(--color-gray-50);
}
.dark .qd-meta > div:nth-of-type(odd) {
  background-color: rgb(55 65 81 / 0.35);
}

/* Filas alternas (zebra) para tablas de listado. Añade la clase `zebra-rows` al <tbody>.
   Se usa `tr:nth-of-type(even)` (no `nth-child`/Tailwind `even:`) para IGNORAR el `<template
   x-for>` y las <tr> de estado vacío/error que Alpine deja en el DOM: contarlas desalinearía las
   bandas. El `:hover` va DESPUÉS y con la misma especificidad, así gana por orden y resalta la fila
   apuntada por encima de la banda. */
.zebra-rows > tr:nth-of-type(even),
.zebra-rows > label:nth-of-type(even),
.zebra-rows > button:nth-of-type(even),
.zebra-rows > li:nth-of-type(even),
.zebra-rows > div:nth-of-type(even) {
  background-color: var(--color-gray-50);
}
.dark .zebra-rows > tr:nth-of-type(even),
.dark .zebra-rows > label:nth-of-type(even),
.dark .zebra-rows > button:nth-of-type(even),
.dark .zebra-rows > li:nth-of-type(even),
.dark .zebra-rows > div:nth-of-type(even) {
  background-color: rgb(55 65 81 / 0.25);
}
.zebra-rows > tr:hover,
.zebra-rows > label:hover,
.zebra-rows > button:hover,
.zebra-rows > li:hover,
.zebra-rows > div:hover {
  background-color: var(--color-gray-100);
}
.dark .zebra-rows > tr:hover,
.dark .zebra-rows > label:hover,
.dark .zebra-rows > button:hover,
.dark .zebra-rows > div:hover {
  background-color: rgb(55 65 81 / 0.45);
}

/* ── Icono de calendario en TODOS los campos de fecha ──────────────────────────────────────
   Air Datepicker se engancha a `input[data-datepicker]`; el icono va como background para
   que lo herede cualquier campo de fecha del panel, incluidos los que Alpine crea al vuelo
   (alta por IA, filas de componentes…), sin repetir el <span> en cada plantilla.
   Es el mismo trazo de calendario que se usaba a mano, en gray-400 (vale en claro y oscuro). */
input[data-datepicker] {
  padding-right: 2.5rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12z'/%3E%3Cpath d='M16 3v4'/%3E%3Cpath d='M8 3v4'/%3E%3Cpath d='M4 11h16'/%3E%3Cpath d='M11 15h1'/%3E%3Cpath d='M12 15v3'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 1.3rem 1.3rem;
}

/* ── Texto que nunca desborda su caja ──────────────────────────────────────────────────────
   Para nombres largos en anchos fijos (el nombre del equipo en su sidebar, p. ej.). No existe
   como utilidad de Tailwind: `break-words` es `break-word` y no parte una palabra larguísima
   sin espacios (referencias, códigos), mientras que `break-all` rompe siempre. `anywhere` es
   el punto medio: parte solo cuando de verdad no cabe. */
.break-anywhere {
  overflow-wrap: anywhere;
}

/* ── Avatar de iniciales de los listados ───────────────────────────────────────────────────
   Mismos tonos que el placeholder de avatar de Mosaic (add-user.html): fondo gris suave y
   contenido en gris medio, en vez del violeta sólido. Va como clase porque `dark:bg-gray-700`
   sólido no está en el CSS purgado de Tailwind (solo las variantes translúcidas). */
.avatar-initials {
  background-color: var(--color-gray-100);
  color: var(--color-gray-400);
}
.dark .avatar-initials {
  background-color: var(--color-gray-700);
  color: var(--color-gray-500);
}

/* Selector de ciclo de facturación (mensual / anual) de los add-ons del portal.

   El resaltado sale del propio radio (`.peer:checked ~ span`) y no del servidor: calculado en
   Jinja se quedaba congelado hasta recargar la página, y el build CSP de Alpine no evalúa
   expresiones dentro de un atributo para arreglarlo por JavaScript.

   Va aquí y no como utilidades de Tailwind porque `mosaic.css` se genera purgado: las clases que
   no estaban ya en una plantilla al construirlo no existen en el fichero, y `peer-checked:bg-
   violet-500` es una de ellas. */
.period-toggle > label > input.peer:checked ~ span {
  background-color: var(--color-violet-500);
  color: #fff;
}
.period-toggle > label > input.peer:focus-visible ~ span {
  outline: 2px solid var(--color-violet-400);
  outline-offset: -2px;
}


/* Tarjeta recomendada («el más contratado»): la cinta va sobre el marco de color y la tarjeta
   blanca cuelga debajo.

   El hueco superior se fija aquí y no con una utilidad de Tailwind porque `mosaic.css` se genera
   purgado y no llegó a entrar ninguna `pt-` mayor que `pt-5` (1,25rem), que deja el texto de la
   cinta pegado al borde de la tarjeta. */
.ribbon-card {
  padding: 0.25rem;
  /* 0,5rem por encima del texto, 0,75rem de línea y 0,5rem hasta la tarjeta: el mismo aire
     arriba y abajo. La banda no puede medir menos que su propio texto. */
  padding-top: 1.75rem;
}
.ribbon-card > .ribbon-label {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  padding: 0.5rem;
  line-height: 1;
}

/* Tarjeta con el canto de arriba recto y el de abajo redondeado.

   Existe aquí y no como utilidad de Tailwind porque `mosaic.css` se genera purgado: de todas las
   variantes de radio solo entraron `rounded-xl` y `rounded-none`, así que `rounded-t-none` o
   `rounded-b-xl` se escribirían en la plantilla sin que aplicaran, y el fallo sería mudo. El
   valor es el mismo `--radius-xl` que usa `rounded-xl`, para que las dos esquinas de abajo
   midan exactamente lo que miden en el resto de tarjetas. */
.card-flat-top {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-bottom-left-radius: var(--radius-xl);
  border-bottom-right-radius: var(--radius-xl);
}

/* ── Visor de fotos de campo (GLightbox) ──

   La librería fija sus botones en 26×44 con el icono a 25 px, medidas de galería de escaparate:
   dentro del panel, con el aspa y las flechas del sprite Solar —que son de trazo fino y respiran
   más—, se quedan pequeñas y cuesta acertarles con el ratón. Se suben a 44×44 de zona pulsable
   con el icono a 34, que es el tamaño que el panel usa para un icono de acción grande.

   Va aquí y no en la hoja de GLightbox porque esa es la librería tal cual se descargó: si un día
   se actualiza, se sustituye el fichero sin arrastrar nuestros retoques.

   Los selectores llevan el contenedor delante a propósito: `glightbox.css` se carga DESPUÉS de
   esta hoja (va en el `page_css` de la ficha del equipo) y con la misma especificidad ganaba
   siempre él, así que el retoque no se veía. */
.glightbox-container .gclose,
.glightbox-container .gnext,
.glightbox-container .gprev,
/* El tema «clean» —el que usa el visor— vuelve a fijar el aspa aparte, más pequeña que las
   flechas. Se repite con las DOS clases del contenedor para ganarle: con `.glightbox-clean
   .gclose` a secas empatan en especificidad y manda la hoja que se carga después, que es la
   suya. */
.glightbox-container.glightbox-clean .gclose {
  width: 44px;
  height: 44px;
}
.glightbox-container .gclose svg,
.glightbox-container .gnext svg,
.glightbox-container .gprev svg,
.glightbox-container.glightbox-clean .gclose svg {
  width: 34px;
  height: 34px;
}
