:root {
  --sidebar-bg: #111827;
  --sidebar-fg: #e2e8f0;
  --sidebar-active: #2563eb;
  --page-bg: #f3f4f6;
}

body { background: var(--page-bg); }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }

/* Layout */
.layout { display: flex; min-height: 100vh; }
/* !important: Bootstrap pone .offcanvas-lg transparente en pantallas grandes */
.sidebar { width: 250px; background-color: var(--sidebar-bg) !important; color: var(--sidebar-fg); flex-shrink: 0; }
@media (min-width: 992px) {
  .sidebar { position: sticky; top: 0; height: 100vh; }
}
.sidebar.offcanvas-lg { --bs-offcanvas-width: 250px; --bs-offcanvas-bg: var(--sidebar-bg); }
.sidebar-brand { display: flex; align-items: center; gap: .5rem; padding: 1.25rem 1.25rem; font-weight: 700; font-size: 1.15rem; color: #fff; }
.sidebar-brand span, .login-brand span { font-weight: 400; color: #93c5fd; }
.sidebar-nav { padding: .5rem .75rem; display: flex; flex-direction: column; gap: 2px; }
.nav-item, .nav-subitem {
  display: flex; align-items: center; gap: .65rem; width: 100%; padding: .6rem .75rem; border: 0; border-radius: .5rem;
  background: transparent; color: var(--sidebar-fg); text-decoration: none; text-align: left;
}
.nav-item:hover, .nav-subitem:hover { background: rgba(255,255,255,.06); color: #fff; }
.nav-item.active { background: var(--sidebar-active); color: #fff; }
.nav-subitem { padding-left: 2.6rem; font-size: .925rem; }
.nav-subitem.active { color: #fff; background: rgba(37,99,235,.35); font-weight: 500; }
.nav-toggle .chevron { margin-left: auto; font-size: .8rem; transition: transform .2s; }
.nav-toggle.collapsed .chevron { transform: rotate(-90deg); }

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar {
  display: flex; align-items: center; gap: .75rem; padding: .75rem 1.5rem; background: #fff; border-bottom: 1px solid #e5e7eb;
  position: sticky; top: 0; z-index: 1020; padding-top: max(.75rem, env(safe-area-inset-top));
}
.page-title { font-size: 1.15rem; margin: 0; font-weight: 600; flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.content { padding: 1.5rem; padding-bottom: max(1.5rem, env(safe-area-inset-bottom)); }
@media (max-width: 575.98px) {
  .content, .topbar { padding-left: 1rem; padding-right: 1rem; }
  .content { padding-top: 1rem; }
  .page-title { font-size: 1.05rem; }
}
@media (min-width: 576px) { .w-sm-auto { width: auto !important; } }

/* Componentes */
.card { border: 1px solid #e5e7eb; border-radius: .75rem; box-shadow: 0 1px 2px rgba(0,0,0,.03); }
.card-header { background: #fff; border-bottom: 1px solid #e5e7eb; }
.stat { background: #fff; border: 1px solid #e5e7eb; border-radius: .75rem; padding: 1rem 1.25rem; display: flex; flex-direction: column; }
.stat span { color: #6b7280; font-size: .875rem; }
.stat strong { font-size: 1.75rem; font-variant-numeric: tabular-nums; }
.stat-new strong { color: var(--sidebar-active); }

.badge.status-new { background: #dbeafe; color: #1d4ed8; }
.badge.status-in_review { background: #fef3c7; color: #92400e; }
.badge.status-resolved { background: #dcfce7; color: #166534; }

.app-badge {
  display: inline-flex; align-items: center; gap: .4rem; padding: .2rem .6rem; border-radius: 999px; white-space: nowrap;
  font-size: .8rem; font-weight: 600; color: var(--app-color);
  background: color-mix(in srgb, var(--app-color) 12%, #fff); border: 1px solid color-mix(in srgb, var(--app-color) 35%, #fff);
}
.app-badge::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: var(--app-color); }

.row-link { cursor: pointer; }
.ticket-table .c-folio a { text-decoration: none; }
.ticket-table .c-folio, .ticket-table .c-date, .app-table .c-code { white-space: nowrap; }
@media (min-width: 992px) { .ticket-table .c-email { max-width: 220px; } }

/* Tablas → tarjetas en móvil y tablet: cada fila es un bloque con su propio acomodo (grid-template-areas). */
@media (max-width: 991.98px) {
  .table-cards thead { display: none; }
  .table-cards, .table-cards tbody { display: block; }
  .table-cards tr { display: grid; gap: .3rem .75rem; align-items: center; padding: .85rem 1rem; border-bottom: 1px solid #e5e7eb; }
  .table-cards tr:last-child { border-bottom: 0; }
  .table-cards td { display: block; padding: 0; border: 0; min-width: 0; background: transparent; }
  .table-cards tr.empty-row { display: block; }
  .table-cards tr.empty-row td { padding: 1.25rem 0; }

  .ticket-table tr {
    grid-template-columns: auto 1fr auto;
    grid-template-areas: "folio date status" "app issue issue" "email email email" "device device images";
  }
  .ticket-table .c-folio { grid-area: folio; font-weight: 600; }
  .ticket-table .c-date { grid-area: date; justify-self: end; }
  .ticket-table .c-status { grid-area: status; }
  .ticket-table .c-app { grid-area: app; }
  .ticket-table .c-issue { grid-area: issue; font-weight: 500; }
  .ticket-table .c-email { grid-area: email; color: #4b5563; font-size: .875rem; }
  .ticket-table .c-device { grid-area: device; color: #6b7280; font-size: .8rem; }
  .ticket-table .c-images { grid-area: images; color: #6b7280; font-size: .8rem; justify-self: end; }

  .app-table tr { grid-template-columns: 1fr auto auto; grid-template-areas: "app status actions" "code tickets tickets"; }
  .app-table .c-app { grid-area: app; }
  .app-table .c-status { grid-area: status; }
  .app-table .c-actions { grid-area: actions; }
  .app-table .c-code { grid-area: code; color: #6b7280; }
  .app-table .c-tickets { grid-area: tickets; justify-self: end; font-size: .875rem; }
}

/* Soportes recientes (dashboard) */
.latest-item { display: flex; align-items: center; gap: .75rem; }
.latest-item .li-text { flex: 1 1 auto; min-width: 0; }
@media (max-width: 575.98px) {
  .latest-item { display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "folio date status" "app text text"; gap: .35rem .6rem; }
  .latest-item .li-folio { grid-area: folio; font-weight: 600; color: #111827 !important; }
  .latest-item .li-date { grid-area: date; justify-self: end; }
  .latest-item .li-status { grid-area: status; }
  .latest-item .li-app { grid-area: app; }
  .latest-item .li-text { grid-area: text; }
}

/* Detalle del ticket: dos columnas en escritorio; en móvil una sola, ordenada con `order`. */
.detail-layout { display: flex; flex-direction: column; gap: 1rem; }
.detail-col { display: contents; }
.d-order-1 { order: 1; } .d-order-2 { order: 2; } .d-order-3 { order: 3; }
.d-order-4 { order: 4; } .d-order-5 { order: 5; } .d-order-6 { order: 6; }
@media (min-width: 1200px) {
  .detail-layout { flex-direction: row; align-items: flex-start; }
  .detail-col { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
  .detail-col-main { flex: 2 1 0; }
  .detail-col-side { flex: 1 1 0; }
}
button.card-header { background: #fff; color: inherit; padding: var(--bs-card-cap-padding-y) var(--bs-card-cap-padding-x); }
.collapse-chevron { transition: transform .2s; }
.collapsed .collapse-chevron { transform: rotate(-90deg); }
.kv-list > div { display: grid; grid-template-columns: minmax(8rem, 35%) 1fr; gap: .75rem; padding: .45rem 1rem; border-top: 1px solid #f1f5f9; }
.kv-list dt { font-size: .8rem; color: #6b7280; font-weight: 500; overflow-wrap: anywhere; }
.kv-list dd { margin: 0; overflow-wrap: anywhere; }
.modal-fullscreen-sm-down .modal-body img { max-height: 100%; }
.table thead th { font-size: .8rem; text-transform: uppercase; letter-spacing: .03em; color: #6b7280; font-weight: 600; }

.info-grid { display: grid; grid-template-columns: max-content 1fr; gap: .4rem 1rem; margin: 0 0 1rem; }
.info-grid dt { color: #6b7280; font-weight: 500; }
.info-grid dd { margin: 0; min-width: 0; }
.card-body > .info-grid:last-child { margin-bottom: 0; }
@media (max-width: 575.98px) {
  .info-grid { grid-template-columns: 1fr; gap: 0; }
  .info-grid dt { font-size: .75rem; text-transform: uppercase; letter-spacing: .03em; margin-top: .65rem; }
  .info-grid dt:first-child { margin-top: 0; }
  .kv-list > div { grid-template-columns: 1fr; gap: .1rem; }
  .stat { padding: .85rem 1rem; }
  .stat strong { font-size: 1.5rem; }
}
.section-label { font-size: .8rem; text-transform: uppercase; color: #6b7280; letter-spacing: .03em; }
.message { background: #f9fafb; border: 1px solid #e5e7eb; border-radius: .5rem; padding: 1rem; white-space: normal; overflow-wrap: anywhere; }

.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .75rem; }
.thumb { border: 1px solid #e5e7eb; border-radius: .5rem; padding: 0; background: #f9fafb; overflow: hidden; display: flex; flex-direction: column; }
.thumb img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.thumb span { font-size: .75rem; color: #6b7280; padding: .35rem; }
.thumb:hover { border-color: var(--sidebar-active); }

/* En vivo */
.live-status { display: inline-flex; align-items: center; gap: .4rem; font-size: .8rem; color: #6b7280; }
.live-dot { width: .55rem; height: .55rem; border-radius: 50%; background: #9ca3af; }
.live-status[data-state="online"] .live-dot { background: #16a34a; box-shadow: 0 0 0 0 rgba(22,163,74,.5); animation: live-pulse 2s infinite; }
.live-status[data-state="offline"] .live-dot { background: #dc2626; }
@keyframes live-pulse { 70% { box-shadow: 0 0 0 .45rem rgba(22,163,74,0); } 100% { box-shadow: 0 0 0 0 rgba(22,163,74,0); } }
.live-flash { animation: live-flash 2.5s ease-out; }
@keyframes live-flash { from { background-color: #dbeafe; } to { background-color: transparent; } }
tr.live-flash > td { animation: live-flash 2.5s ease-out; }
.live-toast { border-left: 4px solid var(--sidebar-active); width: min(350px, calc(100vw - 2rem)); }
#liveToasts { padding-bottom: max(1rem, env(safe-area-inset-bottom)) !important; }
@media (prefers-reduced-motion: reduce) { .live-flash, tr.live-flash > td, .live-status .live-dot { animation: none !important; } }

/* Login */
.login-page { min-height: 100vh; display: grid; place-items: center; padding: 1rem; background: linear-gradient(135deg, #111827, #1e3a8a); }
.login-card { width: 100%; max-width: 380px; background: #fff; border-radius: 1rem; padding: 2rem; box-shadow: 0 20px 50px rgba(0,0,0,.25); }
.login-brand { font-size: 1.5rem; font-weight: 700; display: flex; gap: .5rem; align-items: center; }
.login-brand span { color: #2563eb; }