/* ===================================================================
   Mesa de Ayuda — Intersystems del Golfo
   Extiende admin.css (mismo shell de panel interno: sidebar #0D2278,
   fondo #F0F2F8) con los componentes propios de tickets que no existen
   en el panel de administración del sitio principal: badges de estado/
   prioridad de ticket, indicador de SLA, y el selector de rol de demo
   usado solo en este mockup (Fase 1, sin backend).
   =================================================================== */

/* -- Folio de ticket (JetBrains Mono, mismo tratamiento que datos técnicos) -- */
.ticket-folio { font-family: 'JetBrains Mono', monospace; font-weight: 500; color: var(--igd-azul); }

/* -- Badges de estado de ticket (PRD §5.4 — enum estado) -- */
.badge-ticket { font-size: .75rem; font-weight: 600; border-radius: 4px; padding: 4px 9px; white-space: nowrap; }
.badge-ticket.abierto      { background: rgba(113,155,226,.15); color: var(--igd-azul); }
.badge-ticket.en_proceso   { background: #fdf3e0; color: #93650a; }
.badge-ticket.resuelto     { background: #e6f4ea; color: #1e7e34; }
.badge-ticket.reabierto    { background: #fdeaea; color: #b3261e; }
.badge-ticket.cerrado      { background: #f1f2f4; color: var(--igd-texto-sec); }

/* -- Badges de prioridad (PRD §5.4 — enum prioridad) -- */
.badge-prioridad { font-size: .75rem; font-weight: 600; border-radius: 4px; padding: 4px 9px; white-space: nowrap; display: inline-flex; align-items: center; gap: 5px; }
.badge-prioridad::before { content: ""; width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.badge-prioridad.baja     { background: #f1f2f4; color: var(--igd-texto-sec); }
.badge-prioridad.baja::before     { background: #8a94a6; }
.badge-prioridad.media    { background: rgba(113,155,226,.15); color: var(--igd-azul); }
.badge-prioridad.media::before    { background: var(--igd-acento); }
.badge-prioridad.alta     { background: #fdf3e0; color: #93650a; }
.badge-prioridad.alta::before     { background: #d18a1c; }
.badge-prioridad.urgente  { background: #fdeaea; color: #b3261e; }
.badge-prioridad.urgente::before  { background: #b3261e; }

/* -- Indicador de ticket fuera de SLA (PRD §4.2 — "indicador visual de tickets fuera de SLA") -- */
.sla-fuera { color: #b3261e; font-size: .75rem; font-weight: 600; display: inline-flex; align-items: center; gap: 4px; }
.sla-fuera .bi { font-size: .8125rem; }
tr.fila-sla-vencido { background: #fdf6f6; }
tr.fila-sla-vencido:hover { background: #fbebeb; }

/* -- Selector de rol de demostración --
   Solo existe en este mockup para poder mostrar, en un mismo archivo, cómo
   el mismo panel cambia de contenido según el rol (Admin / Técnico / Cliente).
   En producción el rol viene de la sesión autenticada, no de un <select>. */
.demo-role-switch {
  background: #fff7e6; border: 1px dashed #d18a1c; border-radius: 4px;
  padding: 10px 16px; margin-bottom: 22px; display: flex; align-items: center;
  gap: 12px; flex-wrap: wrap; font-size: .8125rem; color: #6b4a05;
}
.demo-role-switch select { font-size: .8125rem; padding: 4px 10px; width: auto; }
.demo-role-switch .bi { color: #d18a1c; }

/* -- Filtros del dashboard -- */
.filtros-ticket { display: flex; gap: 10px; flex-wrap: wrap; }
.filtros-ticket .form-select, .filtros-ticket .form-control { font-size: .8125rem; min-width: 150px; }

/* -- Avatar circular con iniciales (asignación de ticket / usuario) -- */
.avatar-mini {
  width: 26px; height: 26px; border-radius: 4px; background: var(--igd-fondo-alt);
  color: var(--igd-azul); display: inline-flex; align-items: center; justify-content: center;
  font-size: .6875rem; font-weight: 700; flex-shrink: 0;
}

/* -- Elementos que se ocultan/muestran según el rol seleccionado (demo) -- */
[data-rol-visible] { }

/* ===================================================================
   Sidebar responsive (offcanvas de Bootstrap real, #sidebarMenu en
   dashboard.php) — admin.css fue escrito para el panel de administración
   del sitio principal, que el PRD marca "solo escritorio" y por eso no
   trae media queries. Aquí sí las necesitamos, porque el mismo panel
   ahora también sirve el portal del cliente (responsive obligatorio,
   PRD Mesa de Ayuda §7). Selectores por #id para ganarle en especificidad
   a las reglas de una sola clase de admin.css sin tener que tocar ese
   archivo (lo sigue usando el panel del sitio principal tal cual).

   Verificado contra el CSS real de Bootstrap 5.3.3: la clase
   .offcanvas-lg solo aplica position:fixed/transform/backdrop dentro de
   "@media (max-width:991.98px)"; a partir de 992px lo único que fuerza
   es "background-color:transparent!important" en el propio offcanvas y
   en .offcanvas-body — de ahí el !important de abajo, es la única forma
   de recuperar el azul de marca en escritorio. -- */
#sidebarMenu.offcanvas-lg { --bs-offcanvas-width: 250px; }

@media (max-width: 991.98px) {
  #sidebarMenu.offcanvas-lg { position: fixed; height: 100vh; }
}

@media (min-width: 992px) {
  #sidebarMenu.offcanvas-lg {
    position: sticky;
    top: 0;
    height: 100vh;
    background-color: var(--igd-azul) !important;
  }
}

/* Botón hamburguesa del topbar (solo <992px, ver .btn-icono en admin.css) */
.admin-topbar .btn-icono { border: none; background: transparent; }
.admin-topbar .btn-icono:hover { background: var(--igd-fondo-alt); }

/* Padding más compacto en móvil */
@media (max-width: 575.98px) {
  .admin-topbar { padding: 14px 16px; }
  .admin-content { padding: 18px 16px 40px; }
}

/* ===================================================================
   Blindaje contra desborde horizontal en pantallas angostas.
   admin.css asume escritorio (sin min-width:0 en los flex children del
   topbar), y aquí el mismo panel sí tiene que caber en celular. Sin
   min-width:0, un flex item nunca se encoge más allá del ancho mínimo
   de su contenido (el título "Dashboard — Administración" en Barlow
   bold, por ejemplo), lo que empuja el resto del topbar fuera de la
   pantalla. -- */
.min-w-0 { min-width: 0; }

body.admin-body { overflow-x: hidden; }

.topbar-titulo-wrap { min-width: 0; flex: 1 1 auto; overflow: hidden; }
.admin-topbar .admin-titulo { font-size: clamp(1rem, 0.7rem + 2vw, 1.375rem); }

/* Filtros del panel: en vez de forzar 150px mínimo (3 selects = 450px,
   más ancho que un celular chico), en móvil ocupan todo el ancho y se
   apilan en vez de comprimirse hasta desbordar. */
@media (max-width: 575.98px) {
  .filtros-ticket { width: 100%; }
  .filtros-ticket .form-select, .filtros-ticket .form-control { min-width: 0; flex: 1 1 100%; }
}