/*
 * Tema visual "GR y Asociados" — rediseño profesional (Cloud Design).
 * CSS plano sobre las clases nativas de Filament 5 (fi-*). Paleta guinda + marino,
 * tipografia Instrument Sans, tarjetas redondeadas y tablas refinadas.
 * Se carga por render hook (panels::head.end); no requiere build de Tailwind.
 */

:root {
  --gr-bg: #F7F5F2;
  --gr-navy: #0E2036;
  --gr-navy-2: #11273F;
  --gr-maroon: #7E1206;
  --gr-maroon-hover: #6B0F05;
  --gr-border: #ECE7E0;
  --gr-border-soft: #F1EEE9;
  --gr-ink: #1A1613;
  --gr-muted: #8B857D;
  --gr-sidebar-text: #C7D2E0;
}

/* ----------------------------------------------------------------- Base */
.fi-body,
.fi-main-ctn,
.fi-main {
  background-color: var(--gr-bg);
}

.fi-main {
  padding-top: 2rem;
  padding-bottom: 3.5rem;
}

.fi-header-heading {
  letter-spacing: -0.01em;
  color: var(--gr-ink);
}

/* ------------------------------------------- Layout a 2 columnas (escritorio)
   Por defecto Filament v5 pone el topbar full-width arriba y el sidebar debajo.
   El diseño es a 2 columnas: sidebar de arriba a abajo a la izquierda, y el
   header (topbar) SOLO sobre el contenido. Fijamos el sidebar a toda la altura y
   corremos topbar + contenido a la derecha. Solo en escritorio (lg+); en móvil
   el sidebar sigue siendo cajón. */
@media (min-width: 1024px) {
  aside.fi-sidebar.fi-main-sidebar {
    position: fixed !important;
    top: 0 !important;
    bottom: 0 !important;
    inset-inline-start: 0 !important;
    height: 100vh !important;
    z-index: 50 !important;
  }
  .fi-topbar-ctn,
  .fi-main-ctn {
    margin-inline-start: var(--sidebar-width, 260px) !important;
  }
}

/* --------------------------------------------------------------- Sidebar */
.fi-sidebar,
.fi-sidebar-nav,
.fi-sidebar-header {
  background-color: var(--gr-navy) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

.fi-sidebar {
  border-right: 1px solid rgba(255, 255, 255, 0.08) !important;
}

/* El logotipo lo inyectamos nosotros DENTRO del sidebar (render hook
   SIDEBAR_NAV_START → filament.hooks.sidebar-logo), como el diseño. Por eso
   ocultamos el logo por defecto de Filament, que en escritorio vive en el topbar
   (.fi-topbar-start) y en móvil en el header del sidebar (.fi-sidebar-header). */
.fi-topbar-start,
.fi-sidebar-header,
.fi-sidebar-header-ctn {
  display: none !important;
}

/* Scrollbar delgado y discreto (el default es grueso y se ve mal sobre el navy). */
.fi-sidebar-nav {
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
  padding: 2px 16px 16px !important;
}
.fi-sidebar-nav::-webkit-scrollbar {
  width: 6px;
}
.fi-sidebar-nav::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.18);
  border-radius: 3px;
}
.fi-sidebar-nav::-webkit-scrollbar-track {
  background: transparent;
}

.fi-sidebar-group-label {
  color: rgba(199, 210, 224, 0.5) !important;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  font-size: 10.5px !important;
  font-weight: 700 !important;
}

.fi-sidebar-item-btn {
  border-radius: 10px !important;
  color: var(--gr-sidebar-text) !important;
  font-weight: 500;
  padding: 0.6rem 0.875rem !important;
  gap: 0.6875rem !important;
  font-size: 13.5px !important;
}

/* Iconos del sidebar a 18px, como el diseño (Filament los pone a 24px). */
.fi-sidebar-item-icon,
.fi-sidebar-item-btn .fi-sidebar-item-icon svg {
  width: 18px !important;
  height: 18px !important;
}

.fi-sidebar-item-btn .fi-sidebar-item-icon,
.fi-sidebar-item-btn .fi-sidebar-item-label {
  color: var(--gr-sidebar-text) !important;
}

.fi-sidebar-item-btn:hover {
  background-color: rgba(255, 255, 255, 0.07) !important;
}

.fi-sidebar-item-btn:hover .fi-sidebar-item-icon,
.fi-sidebar-item-btn:hover .fi-sidebar-item-label {
  color: #ffffff !important;
}

/* Item activo: pastilla guinda con texto blanco. */
.fi-sidebar-item.fi-active .fi-sidebar-item-btn,
.fi-sidebar-item-btn.fi-active,
.fi-sidebar-item-btn[aria-current="page"] {
  background-color: var(--gr-maroon) !important;
  font-weight: 700;
}

.fi-sidebar-item.fi-active .fi-sidebar-item-icon,
.fi-sidebar-item.fi-active .fi-sidebar-item-label,
.fi-sidebar-item-btn.fi-active .fi-sidebar-item-icon,
.fi-sidebar-item-btn.fi-active .fi-sidebar-item-label,
.fi-sidebar-item-btn[aria-current="page"] .fi-sidebar-item-icon,
.fi-sidebar-item-btn[aria-current="page"] .fi-sidebar-item-label {
  color: #ffffff !important;
}

/* Submenú de los clústeres (p. ej. Configuración): reutiliza las clases
   .fi-sidebar-item-btn del sidebar navy, pero vive sobre fondo claro, así que el
   texto azul claro se perdía. Aquí le damos color oscuro (el activo mantiene su
   pastilla guinda con texto blanco, definida arriba). */
.fi-page-sub-navigation-sidebar .fi-sidebar-item-btn,
.fi-page-sub-navigation-sidebar .fi-sidebar-item-icon,
.fi-page-sub-navigation-sidebar .fi-sidebar-item-label {
  color: var(--gr-ink) !important;
}
.fi-page-sub-navigation-sidebar .fi-sidebar-item-btn:hover {
  background-color: var(--gr-border-soft) !important;
}
.fi-page-sub-navigation-sidebar .fi-sidebar-item-btn:hover .fi-sidebar-item-icon,
.fi-page-sub-navigation-sidebar .fi-sidebar-item-btn:hover .fi-sidebar-item-label {
  color: var(--gr-ink) !important;
}

/* ---------------------------------------------------------------- Topbar */
.fi-topbar,
.fi-topbar-ctn > nav,
.fi-topbar nav {
  background-color: #ffffff !important;
  border-bottom: 1px solid #EDE9E3 !important;
  box-shadow: none !important;
}

/* El contenedor del topbar recorta con overflow:hidden, lo que cortaba el popup
   de resultados del buscador global. Lo dejamos visible para que el desplegable
   pueda bajar sobre el contenido. */
.fi-topbar-ctn {
  overflow: visible !important;
}

/* Como el diseño: el buscador pegado a la izquierda del topbar, y el perfil +
   campana a la derecha. El grupo derecho (.fi-topbar-end) ocupa todo el ancho y
   el buscador empuja lo demás a la derecha con margin-right:auto. */
.fi-topbar-end {
  flex: 1 1 auto !important;
}
.fi-topbar-end .fi-global-search-ctn,
.fi-topbar-end .fi-global-search {
  margin-right: auto !important;
}

/* Buscador un poco más largo. */
.fi-topbar-end .fi-global-search,
.fi-topbar-end .fi-global-search-field,
.fi-topbar-end .fi-global-search .fi-input-wrp {
  width: 360px !important;
  max-width: 360px !important;
}

/* En móvil el buscador no debe forzar 360px: encogía el resto y empujaba la
   campana y el avatar fuera de la pantalla, provocando scroll horizontal (y de
   paso escondía el botón flotante del asistente, que es fixed:right). Aquí el
   buscador se vuelve elástico (min-width:0) y deja que campana y avatar queden
   siempre visibles a la derecha. */
@media (max-width: 1023px) {
  .fi-topbar-end {
    gap: 0.5rem !important;
    min-width: 0 !important;
  }
  .fi-topbar-end .fi-global-search-ctn,
  .fi-topbar-end .fi-global-search {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    margin-right: 0.5rem !important;
  }
  .fi-topbar-end .fi-global-search,
  .fi-topbar-end .fi-global-search-field,
  .fi-topbar-end .fi-global-search .fi-input-wrp {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* Popup de resultados: por defecto Filament lo pone width:1440px (todo el ancho)
   con right:0 y campo padre estático, así que se extendía bajo el sidebar y
   quedaba detrás (z:10 < sidebar z:50). Lo anclamos al campo de búsqueda, con
   ancho acotado, dentro de la columna de contenido y por encima del sidebar. */
.fi-topbar-end .fi-global-search-field {
  position: relative !important;
}
.fi-global-search-results-ctn {
  position: absolute !important;
  top: calc(100% + 0.5rem) !important;
  left: 0 !important;
  right: auto !important;
  width: 30rem !important;
  max-width: calc(100vw - var(--sidebar-width, 260px) - 3rem) !important;
  z-index: 60 !important;
}

/* --------------------------------------------------------- Secciones/cards */
.fi-section,
.fi-wi-stats-overview-stat,
.fi-ta-ctn,
.fi-fo-component-ctn > .fi-section {
  border-radius: 16px !important;
}

.fi-section {
  border: 1px solid var(--gr-border) !important;
  box-shadow: 0 1px 2px rgba(17, 39, 63, 0.04) !important;
}

.fi-section-header,
.fi-section-content {
  border-color: var(--gr-border) !important;
}

/* KPIs del tablero */
.fi-wi-stats-overview-stat {
  border: 1px solid var(--gr-border) !important;
  box-shadow: none !important;
}

/* --------------------------------------------------------------- Tablas */
.fi-ta-table thead .fi-ta-header-cell {
  background-color: #FAFAF8 !important;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: var(--gr-muted) !important;
  border-bottom: 1px solid var(--gr-border) !important;
}

.fi-ta-row {
  border-color: var(--gr-border-soft) !important;
}

.fi-ta-row:hover {
  background-color: #FBFAF8 !important;
}

/* -------------------------------------------------------------- Botones */
.fi-btn {
  border-radius: 10px !important;
}

.fi-btn.fi-color-primary {
  box-shadow: 0 10px 22px -10px rgba(126, 18, 6, 0.5);
}

/* ------------------------------------------------- Controles de formulario */
/* Filament dibuja el "borde" del campo como un ring (box-shadow) muy tenue y los
   deja bajitos. El diseño usa un borde cálido visible, más alto y con foco guinda.
   Se aplica al contenedor .fi-input-wrp, que es el elemento con fondo/forma. */
.fi-input-wrp {
  border-radius: 10px !important;
  border: 1.5px solid #E7E3DD !important;
  box-shadow: none !important;
  background-color: #ffffff !important;
}

.fi-input-wrp:focus-within {
  border-color: #7E1206 !important;
  box-shadow: 0 0 0 3px rgba(126, 18, 6, 0.12) !important;
}

/* Campo inválido: borde guinda claro para no perder la señal de error. */
.fi-fo-field-wrp-error-message ~ * .fi-input-wrp,
.fi-input-wrp:has(.fi-input[aria-invalid="true"]) {
  border-color: #B03A2E !important;
}

/* Más aire vertical: campos más altos, como el diseño. */
.fi-input,
.fi-select-input {
  border-radius: 10px !important;
  padding-top: 0.6rem !important;
  padding-bottom: 0.6rem !important;
}

/* Etiquetas más marcadas. */
.fi-fo-field-lbl,
.fi-fo-field-label,
.fi-fo-field-wrp label {
  color: #3A342E !important;
  font-weight: 600 !important;
}

/* ---------------------------------------------------- Pagina de acceso (login) */
.fi-simple-layout {
  background: radial-gradient(circle at 22% 18%, #FBF1EF 0%, #F7F5F2 42%, #EEF1F4 100%) !important;
}

.fi-simple-main {
  border-radius: 20px !important;
  border: 1px solid #EFEAE4 !important;
  box-shadow: 0 30px 60px -24px rgba(17, 39, 63, 0.28),
              0 2px 10px rgba(17, 39, 63, 0.06) !important;
}

/* --------------------------------------------------------------- Paginación */
/* Filament oculta el total de registros y los números de página salvo en
   contenedores muy anchos; se fuerzan siempre visibles para que se vea cuántas
   páginas hay y el total (también en las tablas de la ficha del cliente). */
.fi-pagination-overview {
  display: block !important;
}

.fi-pagination-items {
  display: flex !important;
}

/* Que la barra de paginación acomode todo sin desbordarse en columnas angostas. */
.fi-pagination {
  flex-wrap: wrap !important;
  gap: 0.5rem !important;
}

/* ------------------------------------------------- Selector de código de país */
/* En el valor SELECCIONADO se muestra solo bandera + código; el nombre del país
   (.gr-tel-name) queda visible únicamente en el desplegable. */
.fi-select-input-value-label .gr-tel-name {
  display: none !important;
}

/* Bandera + código en una sola línea compacta (evita que el selector se estire).
   Acotado SOLO al selector de país (:has con .gr-tel-flag): antes este nowrap
   aplicaba a TODOS los selects y desbordaba etiquetas largas (p. ej. el agente). */
.fi-select-input-value-label:has(.gr-tel-flag) {
  flex-direction: row !important;
  align-items: center !important;
  line-height: 1.3 !important;
  white-space: nowrap !important;
}

/* Valor seleccionado largo (p. ej. "Agente — Compañía (clave)"): se recorta con
   puntos suspensivos dentro del campo en vez de desbordarse. */
.fi-select-input-value-label {
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.gr-tel-code {
  margin-inline-start: 0.4rem;
}

.gr-tel-flag {
  display: inline-block !important;
  width: 20px !important;
  height: 15px !important;
  flex: 0 0 auto !important;
  vertical-align: -2px;
}

/* ------------------------------------ Efecto al arrastrar un PDF sobre el campo */
/* La clase la alterna Alpine (x-on:dragover/leave/drop) en la captura por PDF,
   para que se note que el archivo se está arrastrando y soltando. */
.fi-fo-file-upload.gr-dropzone-activa {
  outline: 2px dashed #7E1206 !important;
  outline-offset: 6px;
  border-radius: 14px;
  background: rgba(126, 18, 6, 0.05);
  transition: background 0.12s ease, outline-color 0.12s ease;
}

.fi-fo-file-upload.gr-dropzone-activa .filepond--drop-label,
.fi-fo-file-upload.gr-dropzone-activa .filepond--label-action {
  color: #7E1206 !important;
}