/* ============================================================================
 * admin.css - Overrides locales del admin del ERP sobre Phoenix theme
 * ============================================================================
 * Solo overrides UI globales. Reglas que aplican a clases de Bootstrap/Phoenix
 * y que necesitamos reforzar/ajustar para nuestro look & feel.
 * ============================================================================ */


/* ----------------------------------------------------------------------------
 * Tabs estilo clásico Bootstrap reforzado.
 *
 * IMPORTANTE: Phoenix theme.css tiene DOS definiciones de .nav-tabs:
 *   1) Linea ~5364 — clásica Bootstrap con border-bottom 2px y lengüeta activa.
 *   2) Linea ~28807 — override Phoenix QUE LA ROMPE:
 *        .nav-tabs { border-bottom: 0px solid transparent; }
 *        .nav-tabs .nav-link { border: none; color: primary; }
 *      Esto hace que las nav-tabs de Phoenix se vean como links sueltos sin
 *      bordes. Por eso /admin/configuracion/antiguedades aparecía sin lengüeta.
 *
 * Aquí restauramos el aspecto clásico Bootstrap (el ejemplo de la doc oficial
 * https://getbootstrap.com/docs/5.3/components/navs-tabs/#tabs) sobrescribiendo
 * el override #2 de Phoenix. Reglas exhaustivas: tocamos cada propiedad que
 * Phoenix anula para que la cascada nos gane (admin.css se carga después).
 *
 * Aplica a TODAS las .nav-tabs del admin (antigüedades, elementos, cuenta-edit,
 * sips, usuario-edit y cualquier vista futura).
 * ---------------------------------------------------------------------------- */

/* Linea horizontal bajo los tabs (Phoenix la pone a 0px) */
.nav-tabs {
    border-bottom: 2px solid var(--phoenix-border-color);
}

/* Cada tab tiene su borde reservado en transparente (Phoenix lo quita con
   "border: none"). Esto es la base para que el active pueda dibujar
   border-top + border-left + border-right cuando se selecciona. */
.nav-tabs .nav-link {
    margin-bottom: -2px;
    border: 2px solid transparent;
    border-top-left-radius: var(--phoenix-border-radius);
    border-top-right-radius: var(--phoenix-border-radius);
    color: var(--phoenix-tertiary-color);
    padding: 0.625rem 1rem;
    font-weight: 500;
    background-color: transparent;
    transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}

/* Hover: gris claro de fondo + borde superior y lateral del fondo secundario
   para no romper la "lengüeta" del active vecino */
.nav-tabs .nav-link:hover:not(.active):not(.disabled),
.nav-tabs .nav-link:focus:not(.active):not(.disabled) {
    color: var(--phoenix-emphasis-color);
    background-color: var(--phoenix-secondary-bg);
    border-color: var(--phoenix-secondary-bg) var(--phoenix-secondary-bg) var(--phoenix-border-color);
    isolation: isolate;
}

/* Active: la "lengüeta" — borde top + laterales del color de borde y el
   bottom del fondo del body para fundir con el contenedor que está debajo */
.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
    color: var(--phoenix-primary);
    background-color: var(--phoenix-body-bg);
    border-color: var(--phoenix-border-color) var(--phoenix-border-color) var(--phoenix-body-bg);
    font-weight: 600;
}

/* Icono FontAwesome dentro de tab: separación uniforme del texto. Uniforma
   las vistas que usan distintas clases de margen (me-1 vs me-2). */
.nav-tabs .nav-link .me-1,
.nav-tabs .nav-link .me-2 {
    margin-right: 0.5rem !important;
}

/* ============================================================================
 * Sidebar (navbar-vertical) — iconos en subniveles - 2026-05-28
 * ----------------------------------------------------------------------------
 * Migrado desde partial sidebar-admin.php para que el <nav.navbar-vertical>
 * sea hermano INMEDIATO del <nav.navbar-top> en el DOM. Un <style> inline
 * entre ambos rompia el selector adyacente `+` de Phoenix
 *   `.navbar-vertical-collapsed .navbar-vertical.navbar-expand-lg + .navbar.navbar-top ~ .content`
 * que aplica `margin-left: 4rem` al `.content` cuando el sidebar se contrae.
 * Resultado del bug: al pulsar "Contraer" el sidebar se reducia pero el
 * container .content mantenia el margin-left grande, dejando un hueco vacio.
 * ============================================================================ */

/*
 * Iconos en subniveles del sidebar: MenuRenderer envuelve el SVG en un span
 * con clase .mb-icon-sub para distinguirlo del wrapper .nav-link-icon nativo
 * de Phoenix (usado solo en nivel 1).
 */
.navbar-vertical .mb-icon-sub svg {
    display: block;
}

/* El .nav-link-text de Phoenix lleva padding-left:15px en viewports >=992px
   (navbar-vertical.scss:271) — asume que va detras del wrapper grande
   .nav-link-icon de nivel 1. En nivel 2+ usamos .mb-icon-sub (mas compacto),
   asi que ese padding deja un hueco artificial entre el icono y el texto. */
.navbar-vertical .mb-icon-sub + .nav-link-text {
    padding-left: 0 !important;
}

/* Compensacion fina solo para iconos Feather con aire intrinseco MUY notable
   (el path del glyph ocupa <50% del viewBox). Si descubres otro icono que se
   vea "despegado", añade su clase feather-<nombre> aqui. */
.navbar-vertical .mb-icon-sub svg.feather-dollar-sign,
.navbar-vertical .mb-icon-sub svg.feather-minus,
.navbar-vertical .mb-icon-sub svg.feather-divide,
.navbar-vertical .mb-icon-sub svg.feather-percent {
    margin-right: -1px;
    margin-left:  -1px;
}

/* ============================================================================
 * Campanita de notificaciones (modulo notificaciones, F1) - 2026-05-28
 * ----------------------------------------------------------------------------
 * Migrado desde partial topbar-admin.php por la misma razon que el bloque
 * del sidebar arriba (el <style> entre <nav.navbar-vertical> y
 * <nav.navbar-top> rompia el selector adyacente de Phoenix).
 *
 * 4 efectos coordinados que se activan cuando hay >=1 no leida (clase
 * .mb-bell-active aplicada por notificaciones-campanita.js):
 *   1. Badge rojo Facebook-style, mas grande, invadiendo la campana.
 *   2. Shake (tilin tilin): la campana se balancea cada 8 segundos.
 *   3. Ripple: dos ondas concentricas salen del centro de la campana.
 *   4. Color del icono toma un acento sutil rojo cuando hay no leidas.
 * ============================================================================ */

/* Badge: rojo fijo, mas grande, invadiendo la campana */
.mb-bell-badge {
    top: 2px;
    right: 0;
    transform: translate(35%, -25%);
    background: #dc3545;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    padding: 3px 6px;
    min-width: 18px;
    text-align: center;
    box-shadow: 0 0 0 2px var(--phoenix-body-bg, #fff);
    z-index: 3;
}

/* Icono campana base */
.mb-bell-icon {
    position: relative;
    z-index: 2;
    transform-origin: 50% 0%; /* pivota desde arriba como una campana real */
}

/* Cuando hay no leidas, tinte sutil rojizo + comienzan animaciones */
.mb-bell-active .mb-bell-icon { color: #dc3545; }

/* --- Shake (tilin tilin) ----------------------------------------------- */
@keyframes mb-bell-shake {
    0%, 87.5%, 100% { transform: rotate(0deg); }
    89%   { transform: rotate(-15deg); }
    91%   { transform: rotate(13deg);  }
    93%   { transform: rotate(-10deg); }
    95%   { transform: rotate(8deg);   }
    97%   { transform: rotate(-4deg);  }
    99%   { transform: rotate(2deg);   }
}
.mb-bell-active .mb-bell-icon {
    animation: mb-bell-shake 4s ease-in-out infinite;
}

/* --- Ripple (ondas concentricas) -------------------------------------- */
/* Firefox: el wrapper .mb-bell debe permitir overflow visible para que el
   ripple no se recorte al crecer. */
.mb-bell { overflow: visible !important; }

.mb-bell-ripple {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: rgba(220, 53, 69, 0.35);
    transform: translate(-50%, -50%) scale(0.4);
    opacity: 0;
    pointer-events: none;
    z-index: 1;
    will-change: transform, opacity;
}
@keyframes mb-bell-ripple-anim {
    0%   { transform: translate(-50%, -50%) scale(0.4); opacity: 0.6; }
    80%  { opacity: 0; }
    100% { transform: translate(-50%, -50%) scale(2.6); opacity: 0; }
}
.mb-bell-active .mb-bell-ripple-1 { animation: mb-bell-ripple-anim 4s ease-out infinite; }
.mb-bell-active .mb-bell-ripple-2 { animation: mb-bell-ripple-anim 4s ease-out infinite; animation-delay: 2s; }

/* NOTA: Firefox a veces considera `prefers-reduced-motion: reduce` activa
   sin que el usuario lo haya pedido (2026-05-27). Por eso la preferencia
   del usuario en /admin/notificaciones/preferencias (campanita_silenciada=1)
   es la UNICA fuente de verdad, aplicada via .mb-bell-silenciada. */

.mb-bell-silenciada .mb-bell-icon,
.mb-bell-silenciada .mb-bell-ripple-1,
.mb-bell-silenciada .mb-bell-ripple-2,
.mb-bell-silenciada .mb-bell-badge {
    animation: none !important;
}
.mb-bell-silenciada .mb-bell-ripple-1,
.mb-bell-silenciada .mb-bell-ripple-2 {
    opacity: 0 !important;
}
.mb-bell-silenciada .mb-bell-icon {
    color: inherit !important;
}

/* --- Bounce del badge al llegar una notif nueva (F2) ------------------ */
@keyframes mb-bell-badge-bounce {
    0%   { transform: translate(35%, -25%) scale(1);   }
    30%  { transform: translate(35%, -45%) scale(1.4); }
    60%  { transform: translate(35%, -15%) scale(0.9); }
    100% { transform: translate(35%, -25%) scale(1);   }
}
.mb-bell-bouncing .mb-bell-badge {
    animation: mb-bell-badge-bounce 600ms ease-out;
}

/* --- Tabs del panel desplegable de la campanita ----------------------- */
.notification-dropdown-menu .nav-tabs-sm {
    border-bottom: 1px solid var(--phoenix-border-color);
}
.notification-dropdown-menu .nav-tabs-sm .nav-link {
    border-radius: 0;
    color: var(--phoenix-body-tertiary-color);
    border-color: transparent;
    margin-bottom: -1px;
}
.notification-dropdown-menu .nav-tabs-sm .nav-link.active {
    color: var(--phoenix-primary);
    border-color: transparent transparent var(--phoenix-primary) transparent;
    background: transparent;
    font-weight: 600;
}

/* Items dentro del panel (lista) — 2 filas (info + acciones) */
.notification-dropdown-menu .mb-panel-item {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    padding: .65rem .75rem;
    border-bottom: 1px solid var(--phoenix-border-color);
    cursor: pointer;
    transition: background .12s;
}
.notification-dropdown-menu .mb-panel-item:hover {
    background: var(--phoenix-tertiary-bg);
}
.notification-dropdown-menu .mb-panel-item:last-child { border-bottom: 0; }
.notification-dropdown-menu .mb-panel-item.mb-panel-leida {
    opacity: .65;
}
.notification-dropdown-menu .mb-panel-item.mb-panel-leida .mb-panel-titulo {
    font-weight: 400;
}

.notification-dropdown-menu .mb-panel-info {
    display: flex;
    gap: .5rem;
    align-items: flex-start;
}
.notification-dropdown-menu .mb-panel-titulo {
    line-height: 1.2;
}
.notification-dropdown-menu .mb-panel-mensaje {
    line-height: 1.3;
    word-wrap: break-word;
    overflow-wrap: break-word;
}
.notification-dropdown-menu .mb-panel-meta {
    margin-top: .15rem;
}

.notification-dropdown-menu .mb-panel-actions {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    gap: 2px;
    opacity: .45;
    transition: opacity .12s;
    padding-top: .15rem;
    border-top: 1px dashed var(--phoenix-border-color);
}
.notification-dropdown-menu .mb-panel-item:hover .mb-panel-actions {
    opacity: 1;
}
.notification-dropdown-menu .mb-panel-act {
    width: 22px;
    height: 22px;
    line-height: 1;
    padding: 0 !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.notification-dropdown-menu .mb-panel-act span {
    font-size: 11px;
}

/* ============================================================================
 * Hamburguesa del sidebar en tablet/movil (modo vertical) - 2026-05-28
 * ----------------------------------------------------------------------------
 * El navbar-top en modo vertical usa `navbar-expand` SIN sufijo de breakpoint
 * (necesario para que la cabecera no se colapse a <992px, ver topbar-admin.php
 * commits 58a98b4 / 5ceb9d9). Pero Bootstrap aplica entonces
 *     .navbar-expand .navbar-toggler { display: none }   (theme.css:5999)
 * que OCULTA la hamburguesa SIEMPRE, dejando al usuario sin forma de abrir
 * el sidebar offcanvas en pantallas pequenas.
 *
 * Fix: forzar la hamburguesa visible por debajo del breakpoint lg (donde el
 * sidebar SE COLAPSA y necesitamos abrirlo manualmente). En >=992px la regla
 * Phoenix `.navbar-vertical.navbar-expand-lg ~ .navbar-top .navbar-toggler
 * { display: none }` la oculta de nuevo en desktop, que es lo correcto.
 * ============================================================================ */
@media (max-width: 991.98px) {
    .navbar-top .navbar-toggler {
        display: -webkit-box !important;
        display: -ms-flexbox !important;
        display: flex !important;
    }
}

/* ============================================================================
 * Aire entre el contenido y el footer - GLOBAL todo el ERP - 2026-05-29
 * ----------------------------------------------------------------------------
 * El footer es `.footer.position-absolute` (bottom:0, height:4rem) dentro de
 * `.content`. El tema Phoenix daba a `.content` un padding-bottom de 4rem,
 * EXACTAMENTE el alto del footer -> el contenido terminaba pegado al footer,
 * sin margen, en TODAS las paginas. Subimos el padding-bottom para dejar aire
 * (4rem del footer + ~1.5rem de separacion). Global: no hay que tocar pagina
 * por pagina.
 * ============================================================================ */
.content {
    padding-bottom: 5.5rem;
}

/* ============================================================================
 * Barra de scroll de las tablas (PhoenixTable / DataTables scrollX+scrollY)
 * ----------------------------------------------------------------------------
 * Con scrollX/scrollY el cuerpo de la tabla es `.dt-scroll-body`. Su barra de
 * scroll nativa se veia gruesa/oscura. La dejamos fina y con el color de
 * scrollbar de Phoenix (coherente con el resto del shell). La barra horizontal
 * "fantasma" que salia antes era de un wrapper sobrante (.scrollbar.mx-n1),
 * ya eliminado del helper PhoenixTable.
 * ============================================================================ */
.dt-scroll-body,
.dt-scroll-head,
.dt-scroll {
    scrollbar-width: thin !important;
    scrollbar-color: var(--phoenix-scrollbar-bg, rgba(120,130,150,.55)) transparent !important;
}
/* DataTables-Bootstrap5 mete un `border-bottom: 3px` oscuro (rgb(49,55,74)) en
 * el cuerpo con scrollY -> se veia como una "barra negra" fea bajo la tabla.
 * La quitamos: el contenedor gris ya aporta su propio borde inferior translucido. */
.dt-scroll-body {
    border-bottom: 0 !important;
}

/* ============================================================================
 * Delimitadores verticales sutiles SOLO EN LA CABECERA (estilo Docker Desktop).
 * Separan las columnas y ayudan a ver el ancho con el resize, sin "enjaular" el
 * cuerpo con lineas verticales. Scopeado a .phoenix-dt. Ultima columna sin borde.
 * ============================================================================ */
.phoenix-dt thead th:not(:last-child) {
    border-right: 1px solid var(--phoenix-border-color-translucent, rgba(203, 208, 221, 0.4));
}

/* Aire en la última columna: con scrollY el cuerpo tiene barra de scroll vertical
 * a la derecha y el contenido de la última columna quedaba pegado/solapado con
 * ella. Reservamos un margen (cabecera y cuerpo igual, para no desalinear). */
.phoenix-dt thead th:last-child,
.phoenix-dt tbody td:last-child {
    padding-right: 1.25rem !important;
}

/* Cabeceras: en REPOSO cursor normal (se ordenan con click; la mano siempre
 * puesta inducia a pensar que solo se arrastran). La "mano agarrando" (grabbing)
 * aparece SOLO mientras se arrastra una cabecera para reordenar — la clase
 * .pt-col-grabbing la pone phoenix-table.js al detectar movimiento real. Durante
 * el resize manda col-resize. */
body.pt-col-grabbing,
body.pt-col-grabbing * { cursor: grabbing !important; }
body.pt-col-resizing,
body.pt-col-resizing * { cursor: col-resize !important; }

/* ============================================================================
 * Filtros Select2 de las tablas (PhoenixTable, type=select2) - 2026-05-29
 * Alinear la altura con los botones de filtro (≈38px) y que el desplegable
 * quede por encima de la tabla.
 * ============================================================================ */
.select2-container--bootstrap-5 .select2-selection {
    min-height: 38px;
}
.select2-container--bootstrap-5 {
    z-index: 1;
}
.select2-container--open {
    z-index: 1056;   /* el desplegable por encima de la tabla y su scroll */
}
/* ============================================================================
 * Resize de columnas (PhoenixTable): tirador en el borde derecho de cada
 * cabecera. El ancho se persiste por usuario hasta que resetea la estructura.
 * ============================================================================ */
.dt-scroll-head thead th { position: relative; }
.pt-col-resizer {
    position: absolute;
    top: 0;
    right: -4px;
    width: 8px;
    height: 100%;
    cursor: col-resize;
    z-index: 3;
    -webkit-user-select: none;
    user-select: none;
    touch-action: none;
}
.pt-col-resizer:hover,
body.pt-col-resizing .pt-col-resizer {
    background: var(--phoenix-primary, #3874ff);
    opacity: .35;
}
body.pt-col-resizing {
    cursor: col-resize !important;
    -webkit-user-select: none !important;
    user-select: none !important;
}

/* Listado de municipios de una comarca (modal): fluye en columnas "hacia abajo"
 * para aprovechar el ancho del modal-xl; cada fila no se parte entre columnas. */
.comarca-muni-cols {
    column-width: 260px;
    column-gap: 2rem;
}
.comarca-muni-cols .comarca-muni-row {
    break-inside: avoid;
    border-bottom: 1px solid var(--phoenix-border-color-translucent, rgba(203, 208, 221, 0.4));
}

/* Multi compacto: chip contador "+N más" (lo inyecta phoenix-table.js) */
.select2-selection__choice.pt-more-count {
    padding: 0 .5rem !important;
    opacity: .75;
    cursor: default;
    font-weight: 600;
}
/* Fuente de los filtros Select2 de tabla: alinear con el resto de la UI
 * (los chips por defecto salian demasiado grandes). Scopeado al contenedor
 * .pt-select2-filter para no tocar los Select2 de otras pantallas. */
.pt-select2-filter .select2-selection,
.pt-select2-filter .select2-selection__rendered,
.pt-select2-filter .select2-selection__choice,
.pt-select2-filter .select2-selection__placeholder,
.pt-select2-filter .select2-search__field {
    font-size: 0.8rem !important;
    line-height: 1.4 !important;
}
.dt-scroll-body::-webkit-scrollbar,
.dt-scroll-head::-webkit-scrollbar {
    width: 8px !important;
    height: 8px !important;
}
.dt-scroll-body::-webkit-scrollbar-thumb,
.dt-scroll-head::-webkit-scrollbar-thumb {
    background: var(--phoenix-scrollbar-bg, rgba(120,130,150,.55)) !important;
    border-radius: 4px !important;
}
.dt-scroll-body::-webkit-scrollbar-track,
.dt-scroll-head::-webkit-scrollbar-track {
    background: transparent !important;
}

/* =========================================================================
   PhoenixTable — panel de filtros colapsable (acordeon).
   Usamos max-height (no display:none) para que Select2 calcule bien su ancho
   aunque el panel arranque colapsado. Estado persistido por listado en JS.
   ========================================================================= */
.pt-filters-panel {
    overflow: hidden;
    max-height: 80vh;
    opacity: 1;
    transition: max-height .28s ease, opacity .2s ease, margin .2s ease;
}
.pt-filters-panel.pt-collapsed {
    max-height: 0;
    opacity: 0;
    margin-bottom: 0 !important;
    pointer-events: none;
}
.pt-filters-chevron {
    transition: transform .2s ease;
}
[data-phoenix-table-filters-toggle][aria-expanded="true"] .pt-filters-chevron {
    transform: rotate(180deg);
}

/* =========================================================================
   PhoenixTable — columna de ACCIONES fija a la derecha (sticky) y separada
   visualmente. La clase pt-col-actions la pone el JS; tambien la excluye de
   los exports. El fondo opaco evita que el contenido al hacer scroll-x se
   transparente bajo los botones.
   ========================================================================= */
.phoenix-dt th.pt-col-actions,
.phoenix-dt td.pt-col-actions {
    position: sticky;
    right: 0;
    z-index: 2;
    background-color: var(--phoenix-emphasis-bg, #fff) !important;
    box-shadow: -8px 0 8px -8px rgba(0, 0, 0, .18);
}

/* Acciones: que los botones no se salgan de la columna (una linea + padding
   ajustado; el ancho de columna lo fija PhoenixTable segun el nº de botones). */
.phoenix-dt th.pt-col-actions,
.phoenix-dt td.pt-col-actions {
    white-space: nowrap;
    padding-left: .25rem !important;
    padding-right: .4rem !important;
}

/* Filas a UNA sola linea (densidad escritorio tipo ContaPlus): nowrap +
   ellipsis. Antes el contenido largo (emails, razon social...) hacia wrap a 2
   lineas e inflaba la fila al doble; ahora cada fila ocupa una linea y el texto
   que no cabe se corta con "...". Ademas resuelve el solapamiento al estrechar
   una columna (trunca limpio en vez de desbordar sobre la vecina). El ancho de
   cada columna lo decide el auto-layout / el resize del usuario (sin max-width,
   para no capar el ensanchado). */
.phoenix-dt > tbody > tr > td {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* La columna de acciones no se trunca (sus botones van visibles). */
.phoenix-dt > tbody > tr > td.pt-col-actions {
    overflow: visible;
    text-overflow: clip;
}

/* =========================================================================
   PhoenixTable — indicador de columna BUSCABLE. La lupa (.pt-search-hint) la
   pinta PhoenixTable en la cabecera de las columnas que entran en la busqueda
   global (flag 'search' => true en la config de columna). Discreta y atenuada;
   se intensifica al pasar el raton por la cabecera. Documentado en la ayuda.
   ========================================================================= */
.phoenix-dt thead th .pt-search-hint {
    font-size: .72em;
    opacity: .4;
    margin-left: .3rem;
    vertical-align: middle;
    cursor: help;
}
.phoenix-dt thead th:hover .pt-search-hint {
    opacity: .75;
}

/* =========================================================================
   PhoenixTable — DENSIDAD COMPACTA (estilo escritorio tipo ContaPlus): mas
   filas visibles a la vez. Solo tocamos MARGENES/PADDING (la fuente sigue en
   fs-9). Global a todos los listados. Si en algun listado se quiere "respirado"
   se puede excluir con una clase, pero por defecto: compacto.
   ========================================================================= */
/* Filas: padding vertical minimo (table-sm trae .25rem; lo bajamos) +
   line-height ajustado. Resultado: fila ~28px (antes 46px). */
.phoenix-dt > tbody > tr > td {
    padding-top: .2rem !important;
    padding-bottom: .2rem !important;
    line-height: 1.35;
}
/* Cabecera: tambien algo mas ajustada para no romper la proporcion. */
.phoenix-dt > thead > tr > th {
    padding-top: .35rem !important;
    padding-bottom: .35rem !important;
}

/* Botones de accion COMPACTOS (pt-action-btn): icono pequeno (13px desde el JS)
   y padding minimo para que ocupen lo justo. */
.phoenix-dt .pt-action-btn {
    padding: .15rem .3rem !important;
    line-height: 1;
    border-radius: .3rem;
}
.phoenix-dt .pt-action-btn svg {
    vertical-align: middle;
}

/* =========================================================================
   PhoenixTable — CABECERA con fondo gris (un poco de "vidilla", no tan blanca)
   y SELECCION de filas (extension Select). Global a todos los listados.
   ========================================================================= */
/* Cabecera con fondo gris sobrio. !important + selector con `table` para ganar
   a phoenix-table.css (que es mas especifico). Adapta a modo oscuro via var. */
table.phoenix-dt thead th {
    background-color: var(--phoenix-secondary-bg, #eef1f6) !important;
}
/* La cabecera de la columna de acciones (sticky) tambien gris, no blanca. */
.phoenix-dt thead th.pt-col-actions {
    background-color: var(--phoenix-secondary-bg, #eef1f6) !important;
}

/* Fila SELECCIONADA: tinte azul Phoenix + barrita izquierda. Click alterna la
   seleccion (style 'multi'). Prevalece sobre el hover. La celda de acciones es
   sticky con su propio fondo, asi que tambien la tintamos al seleccionar. */
.phoenix-dt tbody tr.selected > td,
.phoenix-dt tbody tr.selected:hover > td {
    background-color: var(--phoenix-primary-bg-subtle, #e3edfb) !important;
    /* Select pinta el texto en blanco por defecto (azul fuerte). Como nuestro
       fondo es azul CLARO, forzamos texto oscuro normal para que se lea. */
    color: var(--phoenix-body-color, #31374a) !important;
    --dt-row-selected: transparent;        /* anula el azul fuerte de fondo */
    --dt-row-selected-text: inherit;        /* y su texto blanco */
}
.phoenix-dt tbody tr.selected > td a,
.phoenix-dt tbody tr.selected > td .text-body-tertiary {
    color: inherit !important;
}
.phoenix-dt tbody tr.selected > td:first-child {
    box-shadow: inset 3px 0 0 0 var(--phoenix-primary, #2A7BE4);
}
/* Cursor de "seleccionable" sobre las celdas que alternan seleccion. */
.phoenix-dt tbody td:not(.pt-col-actions) {
    cursor: pointer;
}

/* =========================================================================
   PhoenixTable — grupo de filtros EN CASCADA resaltado con color base. Lo marca
   PhoenixTable cuando el grupo tiene filtros con dependencias (optionData). Asi
   se ve de un vistazo que esos filtros interactuan entre si (jerarquia, geo...).
   Cada grupo en su propia caja => grupos de cascada distintos no se confunden.
   ========================================================================= */
.pt-filter-group-cascade {
    background-color: var(--phoenix-primary-bg-subtle, #ecf3fd);
    border: 1px solid var(--phoenix-primary-border-subtle, #cfe1fa);
}

/* ==========================================================================
   Indicador de estado de fichaje en el topbar (modulo fichajes)
   Punto de color sobre el icono de reloj: trabajando=verde, pausa=naranja,
   fuera=gris. (fichaje-topbar.js cambia la clase is-* segun el estado.)
   ========================================================================== */
.fich-topbar-dot {
    top: 5px;
    right: 3px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    border: 2px solid var(--phoenix-navbar-top-bg, #fff);
    background-color: #6c757d;
}
.fich-topbar-dot.is-trabajando { background-color: #25b003; }
.fich-topbar-dot.is-pausa      { background-color: #f5803e; }
.fich-topbar-dot.is-fuera      { background-color: #9fa6b2; }

/* ----------------------------------------------------------------------------
 * Modo enfoque (focus-mode.js): maximiza un contenedor a pantalla completa
 * tapando sidebar+topbar, sin Fullscreen API. Escape sale.
 * -------------------------------------------------------------------------- */
.focus-active {
    position: fixed !important;
    inset: 0 !important;
    margin: 0 !important;
    max-width: none !important;
    width: 100vw !important;
    height: 100vh !important;
    overflow: auto !important;
    z-index: 1040;
    background: var(--phoenix-body-bg, #fff);
    padding: 1.1rem 1.5rem 2rem !important;
}
body.focus-mode-on { overflow: hidden; }

/* Icono del boton: por defecto "expandir"; en modo activo, "comprimir". */
[data-focus-toggle] { cursor: pointer; }
[data-focus-toggle] .fm-i-close { display: none; }
[data-focus-toggle].fm-on .fm-i-open { display: none; }
[data-focus-toggle].fm-on .fm-i-close { display: inline-block; }

/* Boton flotante para salir del modo enfoque (el topbar queda tapado). */
.fm-exit-float {
    position: fixed;
    top: .75rem; right: 1rem;
    z-index: 1046;
    box-shadow: 0 2px 10px rgba(0,0,0,.15);
    opacity: .85;
}
.fm-exit-float:hover { opacity: 1; }
.fm-exit-float .fm-esc {
    border: 1px solid currentColor; border-radius: .25rem;
    padding: 0 .3rem; margin-left: .35rem; font-size: .7em; opacity: .7;
}

/* PhoenixTable con opcion 'uppercase' => true: TODAS las celdas de datos en
   MAYUSCULAS (lo pide el cliente en los listados CRM). Se excluye la columna de
   acciones (iconos) y se respeta la cabecera. */
table.phoenix-dt.pt-uppercase tbody td:not(.pt-col-actions) { text-transform: uppercase; }

/* ---------------------------------------------------------------------------
 * Campo de SOLO LECTURA "bloqueado". Convencion de proyecto: cuando un input
 * sea de solo visualizacion (readonly), anadir .form-control-locked para que se
 * VEA bloqueado (fondo secundario mas oscuro + cursor no permitido), en vez de
 * parecer editable como un readonly normal de Bootstrap. Respeta claro/oscuro
 * via variables de Phoenix. Sigue siendo seleccionable (copiar) pero no editable.
 * ------------------------------------------------------------------------- */
.form-control-locked,
.form-control-locked:focus,
.form-control-locked:hover {
    background-color: var(--phoenix-secondary-bg);
    color: var(--phoenix-emphasis-color);
    border-color: var(--phoenix-border-color);
    cursor: not-allowed;
    box-shadow: none;
}

/* ---------------------------------------------------------------------------
 * Buscador global: panel ancho de resultados en VARIAS COLUMNAS (masonry via
 * CSS columns). Cada grupo no se parte entre columnas. El texto de cada item
 * AJUSTA (Bootstrap pone white-space:nowrap en .dropdown-item y cortaba los
 * nombres largos). Asi el resultado usa el ancho de pantalla y es legible.
 * ------------------------------------------------------------------------- */
/* Grupos repartidos en FILA (flex-wrap): usan el ancho de pantalla y bajan
   menos en vertical. Cada grupo es una "tarjeta" de ~20rem. */
#globalSearchResults { display: flex; flex-wrap: wrap; align-items: flex-start; gap: .5rem; }
/* Cada grupo scrollea por dentro (hasta 20 resultados) sin estirar el panel. */
#globalSearchResults .gs-group { flex: 1 1 20rem; min-width: 17rem; max-width: 30rem; max-height: 62vh; overflow-y: auto; }
#globalSearchDropdown .dropdown-item { white-space: normal; border-radius: .375rem; }
#globalSearchDropdown .dropdown-item:hover { background-color: var(--phoenix-secondary-bg); }
/* Cabecera de grupo RESALTADA y FIJA al hacer scroll dentro del grupo. */
#globalSearchResults .dropdown-header {
    position: sticky; top: 0; z-index: 1;
    background: var(--phoenix-primary-bg-subtle, var(--phoenix-secondary-bg));
    color: var(--phoenix-primary-text-emphasis, var(--phoenix-emphasis-color));
    border-radius: .375rem;
    border-bottom: 0 !important;
    margin-bottom: .25rem;
}
/* Backdrop oscuro tras el panel del buscador (resalta el contenido). Empieza
   BAJO el topbar para no tapar el input mientras escribes. */
#globalSearchBackdrop { position: fixed; top: 3.5rem; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,.45); z-index: 1050; }

/* ---------------------------------------------------------------------------
 * Tarjetas de "Accesos directos" del dashboard: hover con elevacion, icono en
 * badge que se rellena al pasar, y flecha que se desplaza. Aspecto mas vistoso.
 * ------------------------------------------------------------------------- */
.dash-access { transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
.dash-access:hover {
    transform: translateY(-3px);
    box-shadow: 0 .5rem 1.5rem rgba(0,0,0,.12);
    border-color: var(--phoenix-primary) !important;
}
.dash-access-icon {
    width: 3rem; height: 3rem;
    display: flex; align-items: center; justify-content: center;
    background: var(--phoenix-primary-bg-subtle);
    color: var(--phoenix-primary);
    transition: background-color .15s ease, color .15s ease;
}
.dash-access-icon svg { width: 20px; height: 20px; }
.dash-access:hover .dash-access-icon { background: var(--phoenix-primary); color: #fff; }
.dash-access-caret { opacity: .35; transition: opacity .15s ease, transform .15s ease; }
.dash-access:hover .dash-access-caret { opacity: 1; transform: translateX(3px); }
.dash-grip { cursor: grab; }
.dash-grip:active { cursor: grabbing; }
.sortable-ghost { opacity: .4; }

/* ---- PRUEBA: tarjetas de acceso con GRADIENTE (estilo colorido) ---- */
.dash-tile { color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.22); transition: transform .15s ease, box-shadow .15s ease, filter .15s ease; }
.dash-tile * { color: #fff; }
.dash-tile:hover { transform: translateY(-4px); box-shadow: 0 .7rem 1.6rem rgba(0,0,0,.22); filter: saturate(1.08); }
.dash-tile-icon {
    width: 3rem; height: 3rem; display: flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,.22); border: 1px solid rgba(255,255,255,.25);
}
.dash-tile-icon svg { width: 20px; height: 20px; }
.dash-tile-label { font-size: 1.15rem; letter-spacing: .03em; line-height: 1.15; }
.dash-tile-caret { opacity: .75; transition: transform .15s ease; }
.dash-tile:hover .dash-tile-caret { transform: translateX(3px); }
.dash-tile-grad-1 { background-image: linear-gradient(135deg, #f093fb, #f5576c); }
.dash-tile-grad-2 { background-image: linear-gradient(135deg, #a18cd1, #7b5cf0); }
.dash-tile-grad-3 { background-image: linear-gradient(135deg, #0ba360, #3cba92); }
.dash-tile-grad-4 { background-image: linear-gradient(135deg, #4facfe, #2b7cf6); }
.dash-tile-grad-5 { background-image: linear-gradient(135deg, #fa709a, #f6656b); }
.dash-tile-grad-6 { background-image: linear-gradient(135deg, #30cfd0, #5b2fb0); }

/* ---------------------------------------------------------------------------
 * Hero de bienvenida del dashboard: fondo relajante (degradado por defecto, o
 * una foto si se coloca en /assets/img/dashboard/hero.jpg), overlay para
 * legibilidad, avatar con inicial y saludo en blanco.
 * ------------------------------------------------------------------------- */
.dash-hero { position: relative; overflow: hidden; color: #fff; background-size: cover; background-position: center; }
.dash-hero-overlay { position: absolute; inset: 0; background: linear-gradient(100deg, rgba(0,0,0,.45), rgba(0,0,0,.10) 60%, rgba(0,0,0,0)); }
.dash-hero > .dash-hero-content { position: relative; z-index: 1; }
.dash-hero-1 { background-image: linear-gradient(135deg, #667eea, #764ba2); }
.dash-hero-2 { background-image: linear-gradient(135deg, #43cea2, #185a9d); }
.dash-hero-3 { background-image: linear-gradient(135deg, #c471f5, #fa71cd); }
.dash-hero-4 { background-image: linear-gradient(135deg, #0f2027, #203a43, #2c5364); }
.dash-hero-avatar {
    width: 4.25rem; height: 4.25rem; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,.22); color: #fff;
    font-weight: 700; font-size: 1.6rem;
    border: 2px solid rgba(255,255,255,.7);
    backdrop-filter: blur(2px);
}

/* Filtros rapidos (pills) de PhoenixTable: enlaces de texto con contador,
   estilo project-list-view (no tabs). Activo = primary; inactivo = emphasis. */
.pt-quickfilters .pt-qf-pill { color: var(--phoenix-emphasis-color); font-weight: 600; padding: 0; }
.pt-quickfilters .pt-qf-pill:hover { color: var(--phoenix-primary); }
.pt-quickfilters .pt-qf-pill.active { color: var(--phoenix-primary); }
.pt-quickfilters .pt-qf-count { color: var(--phoenix-body-tertiary-color); font-weight: 500; margin-left: .15rem; }
.pt-quickfilters .pt-qf-count::before { content: '('; }
.pt-quickfilters .pt-qf-count::after  { content: ')'; }
.pt-quickfilters .pt-qf-pill.active .pt-qf-count { color: var(--phoenix-primary); }

/* Resaltado de error (validacion tipo cliente) para grupo de dias y select2. */
#grupo-dias.pt-invalid-box { border: 1px solid var(--phoenix-danger); border-radius: .375rem; padding: 3px; }
.pt-invalid-select2 .select2-selection { border-color: var(--phoenix-danger) !important; }