/* ---------------------------------------------------------------------
   Mesa de Ayuda - estilos propios.
   Se apoya en Bootstrap 5.3 (CDN) y replica las medidas del sidebar del
   Sistema de Insumos para que los tres sistemas se sientan iguales.
   --------------------------------------------------------------------- */

/* Altura del navbar global fijo: una sola fuente de verdad que derivan el
   sidebar (arranca debajo) y el contenido (padding-top para no quedar oculto).
   z-index del navbar (1030 via Bootstrap fixed-top) > sidebar (1020) >
   contenido; los modales de Bootstrap (1050+) siguen por encima del navbar. */
:root {
    --navbar-height: 56px;
    /* Lado de todo boton de icono del navbar. Una sola medida para lupa,
       campana, tema, zoom y avatar: asi el bloque derecho ocupa siempre lo
       mismo, sin depender de que icono este pintado en cada momento. */
    --nav-btn-size: 34px;
}

body { background: #f5f6f8; }

/* --- Navbar global fijo (todas las paginas y modulos) ---
   Mismo color que el navbar vigente del Sistema de Insumos (topbar.php):
   degradado morado, para que los sistemas se sientan un unico producto. */
.mesa-navbar {
    height: var(--navbar-height);
    min-height: var(--navbar-height);
    background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
    box-shadow: 0 2px 4px rgba(0, 0, 0, .1);
    border-bottom: 1px solid rgba(0, 0, 0, .1);
}

/* ---------------------------------------------------------------------
   NAVBAR: bloque de acciones de la derecha.

   Toda la geometria vive aqui, nunca en un tema. Cambiar de claro a oscuro
   solo puede alterar color, fondo, borde y sombra; si un tema declara
   padding o font-size sobre estos controles, el bloque entero se desplaza
   -que es exactamente lo que ocurria-.
   --------------------------------------------------------------------- */
.mesa-navbar-acciones {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex: none;
}

/* Boton de icono del navbar: lado fijo, contenido centrado. El icono se
   dibuja dentro; cambiarlo (luna por sol) no puede mover nada. */
.mesa-nav-btn {
    width: var(--nav-btn-size);
    height: var(--nav-btn-size);
    min-width: var(--nav-btn-size);
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    position: relative;
    border-radius: 50%;
    font-size: 1rem;
    line-height: 1;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .55);
    background: transparent;
    text-decoration: none;
    transition: background-color .12s ease, border-color .12s ease;
}
.mesa-nav-btn:hover,
.mesa-nav-btn:focus-visible {
    background: rgba(255, 255, 255, .18);
    border-color: #fff;
    color: #fff;
}
.mesa-nav-btn:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}
.mesa-nav-btn > i { line-height: 1; }

/* Contador de notificaciones: se ancla al boton sin participar del flujo,
   asi que su presencia o su numero no cambian el ancho de la barra. */
.mesa-nav-btn .mesa-nav-contador {
    position: absolute;
    top: -3px;
    right: -3px;
    min-width: 1.1rem;
    height: 1.1rem;
    padding: 0 .2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .62rem;
    font-weight: 700;
    line-height: 1;
    border-radius: 999px;
    font-variant-numeric: tabular-nums;
}

/* Selector de tema: AMBOS iconos viven en el mismo boton de lado fijo,
   superpuestos y fuera del flujo. Se alterna cual es visible, nunca cual
   existe, para que el ancho no dependa del tema activo. */
.mesa-tema-iconos {
    position: relative;
    width: 1em;
    height: 1em;
    display: inline-block;
}
.mesa-tema-iconos > i {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.mesa-tema-iconos .mesa-icono-oscuro { opacity: 0; }
body.dark-mode .mesa-tema-iconos .mesa-icono-claro  { opacity: 0; }
body.dark-mode .mesa-tema-iconos .mesa-icono-oscuro { opacity: 1; }

/* Menu de usuario: alto fijo para que alinee con los botones redondos. */
.mesa-navbar-acciones .mesa-usuario {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    height: var(--nav-btn-size);
    padding: 0 .5rem;
    border-radius: 999px;
    color: #fff;
    text-decoration: none;
    max-width: 15rem;
}
.mesa-navbar-acciones .mesa-usuario:hover,
.mesa-navbar-acciones .mesa-usuario:focus-visible {
    background: rgba(255, 255, 255, .18);
    color: #fff;
}
.mesa-navbar-acciones .mesa-usuario .mesa-usuario-nombre {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* El distintivo DEMO no debe crecer ni encoger con el tema. */
.mesa-navbar .mesa-demo-badge {
    padding: .35rem .6rem;
    font-size: .75rem;
    line-height: 1.2;
    border-radius: .375rem;
}

/* ---------------------------------------------------------------------
   SIDEBAR: marco fijo + lista de menus desplazable.

   El sidebar ocupa exactamente el alto disponible bajo el navbar y el
   scroll lo pone la LISTA, no el marco. Sin esto, con todos los modulos
   visibles el ultimo menu quedaba fuera de la pantalla y no habia forma
   de alcanzarlo.

   Mesa no tiene cabecera de sidebar -la marca vive en el navbar-, asi que
   la lista ocupa el alto completo. Si algun dia se ancla algo arriba,
   basta con ponerlo como hijo directo con `flex: none`.
   --------------------------------------------------------------------- */
.mesa-sidebar {
    background: #f8f9fa;
    position: fixed;
    left: 0;
    top: var(--navbar-height);
    width: 250px;
    height: calc(100vh - var(--navbar-height));
    display: flex;
    flex-direction: column;
    overflow: hidden;             /* el scroll lo pone la lista, no el marco */
    padding: 0;
    z-index: 1020;
}
.mesa-sidebar-menu {
    flex: 1 1 auto;
    min-height: 0;                /* sin esto, flex no deja encoger y no hay scroll */
    overflow-y: auto;
    overflow-x: hidden;
    padding: .75rem;
    overscroll-behavior: contain; /* al llegar al final no arrastra la pagina */

    /* Bootstrap da `flex-wrap: wrap` a `.nav`. Con el alto ya acotado, eso
       NO desborda: parte el menu en una segunda columna que cae fuera de
       los 250px y queda invisible e inalcanzable -la mitad de las
       entradas desaparecian sin que nada lo delatara-. */
    flex-wrap: nowrap;
}
/* Y los items no deben encogerse para «caber»: si se comprimen tampoco hay
   desbordamiento que scrollear. */
.mesa-sidebar-menu > * { flex: 0 0 auto; }
.mesa-sidebar .nav-link { color: #333; border-radius: .375rem; }
.mesa-sidebar .nav-link:hover { background: #e9ecef; }
.mesa-sidebar .nav-link.active { background: #0d6efd; color: #fff; }

/* Barra de desplazamiento: discreta en claro, legible en oscuro. Se declara
   para ambos motores; donde no haya soporte cae a la nativa, que funciona
   igual. */
.mesa-sidebar-menu {
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, .28) transparent;
}
.mesa-sidebar-menu::-webkit-scrollbar { width: 10px; }
.mesa-sidebar-menu::-webkit-scrollbar-track { background: transparent; }
.mesa-sidebar-menu::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, .25);
    border-radius: 999px;
    border: 3px solid transparent;
    background-clip: content-box;
}
.mesa-sidebar-menu::-webkit-scrollbar-thumb:hover { background: rgba(0, 0, 0, .42); background-clip: content-box; }

/* El contenido reserva la altura del navbar fijo para que titulos, filtros,
   tablas y alertas nunca queden ocultos debajo. */
.mesa-contenido {
    margin-left: 250px;
    width: calc(100% - 250px);
    padding: calc(var(--navbar-height) + 24px) 24px 24px;
}

@media (max-width: 767.98px) {
    .mesa-sidebar {
        transform: translateX(-110%);
        transition: transform .25s ease;
    }
    .mesa-sidebar.sidebar-abierto {
        transform: translateX(0);
        box-shadow: 4px 0 18px rgba(0,0,0,.35);
    }
    .mesa-contenido {
        margin-left: 0;
        width: 100%;
        padding: calc(var(--navbar-height) + 16px) 12px 16px;
    }
}

/* --- Login --- */
.mesa-login { min-height: 100vh; padding: 24px; }
.mesa-login-card { width: 100%; max-width: 420px; }

/* ---------------------------------------------------------------------
   Indicadores accesibles.
   El color NUNCA es el unico portador de significado (punto 14): cada
   distintivo lleva ademas un icono y texto legible por lector de pantalla.
   --------------------------------------------------------------------- */
.mesa-estado, .mesa-prioridad {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: .8125rem;
    padding: .2rem .55rem;
    border-radius: 999px;
    border: 1px solid transparent;
    white-space: nowrap;
}
.mesa-prioridad-critica { background:#f8d7da; color:#842029; border-color:#f5c2c7; font-weight:600; }
.mesa-prioridad-alta    { background:#fff3cd; color:#664d03; border-color:#ffecb5; }
.mesa-prioridad-media   { background:#cff4fc; color:#055160; border-color:#b6effb; }
.mesa-prioridad-baja    { background:#e2e3e5; color:#41464b; border-color:#d3d6d8; }

/* Comentario publico vs nota interna: se distinguen por borde, fondo y
   una franja lateral, no solo por color. */
.mesa-comentario { border-left: 4px solid #0d6efd; background: #fff; }
.mesa-nota-interna {
    border-left: 4px dashed #b8860b;
    background: repeating-linear-gradient(
        45deg, #fffdf5, #fffdf5 10px, #fff9e6 10px, #fff9e6 20px);
}
.mesa-nota-interna .mesa-nota-etiqueta {
    font-weight: 600;
    color: #664d03;
    text-transform: uppercase;
    font-size: .6875rem;
    letter-spacing: .04em;
}

/* Linea de tiempo del ticket */
.mesa-timeline { position: relative; padding-left: 28px; }
.mesa-timeline::before {
    content: ''; position: absolute; left: 9px; top: 0; bottom: 0;
    width: 2px; background: #dee2e6;
}
.mesa-timeline-item { position: relative; margin-bottom: 1rem; }
.mesa-timeline-item::before {
    content: ''; position: absolute; left: -23px; top: .5rem;
    width: 10px; height: 10px; border-radius: 50%;
    background: #fff; border: 2px solid #0d6efd;
}

/* Foco visible: nunca se elimina el outline sin sustituirlo. */
a:focus-visible, button:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible {
    outline: 3px solid #0d6efd;
    outline-offset: 2px;
}

/* Tarjetas de caso en el portal del solicitante */
.mesa-caso { transition: transform .12s ease, box-shadow .12s ease; }
.mesa-caso:hover { transform: translateY(-2px); box-shadow: 0 .5rem 1rem rgba(0,0,0,.1) !important; }

/* ---------------------------------------------------------------------
   Control de zoom global (mismo control que el Sistema de Insumos).
   Ubicado en el navbar fijo; usa la propiedad CSS `zoom` sobre el body,
   que refluye el layout como el zoom nativo y no descoloca los elementos
   position:fixed ni los modales.
   --------------------------------------------------------------------- */
.zoom-control { display: inline-flex; align-items: center; gap: 3px; }
/* La geometria se declara aqui y con la especificidad suficiente para que
   ningun tema la pise: el tema oscuro traia `.btn-sm { padding: .4rem .8rem }`
   heredado de Insumos y ensanchaba estos botones al alternar el tema. */
.mesa-navbar .zoom-control .btn {
    padding: 0;
    font-size: 14px;
    line-height: 1;
    width: var(--nav-btn-size);
    height: var(--nav-btn-size);
}
.zoom-control .zoom-btn { border-radius: 50%; }
.mesa-navbar .zoom-control .zoom-level {
    width: auto;
    min-width: 3.2rem;
    padding: 0 .35rem;
    font-size: 12px;
    font-weight: 600;
    border-radius: 999px;
    font-variant-numeric: tabular-nums;
}
.zoom-control .btn:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.45);
}
.zoom-control .btn:disabled { opacity: 0.45; }

#zoomToast {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(33, 37, 41, 0.96);
    color: #fff;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 13px;
    z-index: 2000;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
    display: flex;
    align-items: center;
    gap: 12px;
    opacity: 0;
    transition: opacity 0.2s ease;
    pointer-events: none;
}
#zoomToast.show { opacity: 1; pointer-events: auto; }
#zoomToast a { color: #9ec5fe; text-decoration: underline; cursor: pointer; font-size: 12px; }
#zoomToast a:focus-visible { outline: 2px solid #9ec5fe; outline-offset: 2px; }

/* ---------------------------------------------------------------------
   Encabezado de pagina reutilizable (components/page_header.php).
   El icono hereda color (currentColor -> se adapta a claro/oscuro) y usa
   em, por lo que escala con el zoom. Sin estilos aislados por pagina.
   --------------------------------------------------------------------- */
.mesa-page-header .mesa-ph-icon {
    font-size: 1em;
    line-height: 1;
    flex: none;
    opacity: .9;
}
.mesa-page-header .breadcrumb { --bs-breadcrumb-divider: '›'; }
.mesa-ph-title { min-width: 0; }               /* permite truncar sin romper el flex */
.mesa-ph-title h1 { text-wrap: balance; }
.mesa-ph-actions { flex-wrap: wrap; }
@media (max-width: 575.98px) {
    /* En movil, las acciones bajan bajo el titulo sin truncarlo. */
    .mesa-page-header .ms-auto { margin-left: 0 !important; }
}

/* ---------------------------------------------------------------
   Distintivo de MODO DEMOSTRACION en la barra superior.
   Debe leerse igual en modo claro y oscuro y no competir con los
   controles del navbar: por eso usa el amarillo de aviso con texto
   oscuro fijo, que contrasta sobre la navbar en ambos temas.
   --------------------------------------------------------------- */
.mesa-demo-badge {
  font-weight: 600;
  letter-spacing: .02em;
  white-space: nowrap;
  padding: .35rem .6rem;
  border: 1px solid rgba(0, 0, 0, .15);
}

/* ---------------------------------------------------------------
   TARJETAS E INDICADORES NAVEGABLES

   Toda cifra de tickets lleva a la lista que la compone. Se usa un
   <a> real, no un div con onclick: asi el teclado la alcanza con Tab,
   Enter la abre, el lector de pantalla la anuncia como enlace y el
   navegador ofrece «abrir en pestana nueva» sin trabajo extra.

   El color no es el unico indicio de que la tarjeta es interactiva:
   hay una flecha visible, cursor de mano y un desplazamiento al
   pasar por encima. Quien no distingue el matiz sigue viendo que
   es pulsable.
   --------------------------------------------------------------- */
.mesa-tarjeta-navegable {
  color: inherit;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
  border: 1px solid transparent !important;
}
.mesa-tarjeta-navegable:hover,
.mesa-tarjeta-navegable:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .12) !important;
  border-color: var(--bs-primary) !important;
  color: inherit;
}
.mesa-tarjeta-navegable:focus-visible {
  outline: 2px solid var(--bs-primary);
  outline-offset: 2px;
}
.mesa-tarjeta-navegable:active { transform: translateY(0); }

/* La flecha solo aparece del todo al enfocar o pasar por encima, pero
   nunca se oculta: un indicio permanente de que hay adonde ir. */
.mesa-tarjeta-flecha {
  opacity: .35;
  font-size: 1.15em;
  transition: opacity .12s ease, transform .12s ease;
}
.mesa-tarjeta-navegable:hover .mesa-tarjeta-flecha,
.mesa-tarjeta-navegable:focus-visible .mesa-tarjeta-flecha {
  opacity: 1;
  transform: translateX(2px);
}

@media (prefers-reduced-motion: reduce) {
  .mesa-tarjeta-navegable,
  .mesa-tarjeta-flecha { transition: none; }
  .mesa-tarjeta-navegable:hover,
  .mesa-tarjeta-navegable:focus-visible { transform: none; }
}

/* ---------------------------------------------------------------
   FILTROS ACTIVOS (chips)

   Cada filtro aplicado se ve y se puede quitar de uno en uno. El chip
   ES el boton de quitar, por eso lleva su propia etiqueta accesible.
   --------------------------------------------------------------- */
.mesa-chip {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .2rem .55rem;
  border-radius: 999px;
  border: 1px solid var(--bs-border-color, #dee2e6);
  background: var(--bs-tertiary-bg, #f8f9fa);
  color: inherit;
  text-decoration: none;
  font-size: .8rem;
  line-height: 1.6;
  max-width: 100%;
}
.mesa-chip:hover,
.mesa-chip:focus-visible {
  border-color: var(--bs-danger);
  color: var(--bs-danger);
}
.mesa-chip:focus-visible { outline: 2px solid var(--bs-danger); outline-offset: 2px; }
.mesa-chip .mesa-chip-k { opacity: .7; }
.mesa-chip .bi-x-lg { font-size: .7em; opacity: .6; }
.mesa-chip:hover .bi-x-lg { opacity: 1; }

/* ---------------------------------------------------------------------
   BUSQUEDA RAPIDA DE TICKET (lupa del navbar)

   Panel propio en lugar de un dropdown de Bootstrap: necesita enfocar el
   campo al abrirse y responder a Escape sin pelear con el gestor de
   dropdowns. Se ancla al boton, asi que abrirlo no mueve nada del navbar.
   --------------------------------------------------------------------- */
.mesa-busqueda { position: relative; display: inline-flex; flex: none; }

.mesa-busqueda-panel {
    position: absolute;
    top: calc(100% + .5rem);
    right: 0;
    z-index: 1035;                 /* sobre el navbar (1030), bajo los modales */
    width: min(22rem, calc(100vw - 1.5rem));
    padding: .75rem;
    border-radius: .5rem;
    background: #fff;
    color: #212529;
    border: 1px solid rgba(0, 0, 0, .12);
    box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .18);
}
.mesa-busqueda-panel[hidden] { display: none; }
.mesa-busqueda-resultado:empty { display: none; }
.mesa-busqueda-resultado a { text-decoration: none; }

/* En pantallas estrechas el panel se centra bajo el navbar en vez de
   colgar del boton, que quedaria medio fuera de la pantalla. */
@media (max-width: 575.98px) {
    .mesa-busqueda-panel {
        position: fixed;
        top: calc(var(--navbar-height) + .5rem);
        left: .75rem;
        right: .75rem;
        width: auto;
    }
}

/* ---------------------------------------------------------------------
   MODALES: sin capa gris de fondo

   Bootstrap oscurece la pagina al abrir un modal con
   `.modal-backdrop { background: #000 }` + `.show { opacity: .5 }`.

   Aqui se separan las dos cosas que ese elemento hacia a la vez:

     - La capa FUNCIONAL se conserva. Sigue existiendo, ocupando la
       pantalla y capturando clics, asi que el fondo sigue inerte y todo
       el ciclo de vida de Bootstrap -foco, scroll, cierre- funciona sin
       tocarlo.
     - La capa VISUAL desaparece. Sin color, sin opacidad, sin filtros.

   Se declara para el elemento y para las variables que Bootstrap 5.3
   usa por debajo: pisar solo `background-color` dejaria la variable
   viva y cualquier componente que la lea volveria a oscurecer.
   --------------------------------------------------------------------- */
.modal-backdrop,
.modal-backdrop.show,
.offcanvas-backdrop,
.offcanvas-backdrop.show {
    --bs-backdrop-bg: transparent;
    --bs-backdrop-opacity: 1;
    background-color: transparent;
    opacity: 1;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    filter: none;
}

/* Sin penumbra detras, el modal necesita separarse por si mismo: fondo
   solido, borde definido y una sombra algo mas marcada que la de serie.
   La sombra es DEL MODAL, nunca del contenido de fondo. */
.modal-content {
    background-color: var(--bs-body-bg, #fff);
    border: 1px solid rgba(0, 0, 0, .18);
    box-shadow:
        0 .5rem 1.5rem rgba(0, 0, 0, .22),
        0 0 0 1px rgba(0, 0, 0, .04);
}

/* El dialogo captura el puntero; el resto del contenedor lo deja pasar a
   la capa funcional de debajo, que es la que bloquea el fondo. Asi el
   clic fuera del modal sigue cerrandolo donde corresponde. */
.modal .modal-dialog { pointer-events: auto; }

@media (prefers-reduced-motion: reduce) {
    .modal.fade .modal-dialog { transition: none; }
}