/* ------------------------------------------------------------------
   Rochem de México — Dashboard de productividad CHRONOS
   Paleta basada en el azul del logo de la empresa.
   ------------------------------------------------------------------ */
:root {
  --rochem-navy: #0b3d67;
  --rochem-blue: #1a5f9e;
  --rochem-blue-light: #4a90c4;
  --rochem-bg: #f2f5f8;
  --rochem-danger: #c0392b;
  --rochem-warning: #e08e0b;
  --rochem-success: #2f855a;
  --rochem-gray: #6c757d;
  --rochem-teal: #178f79;

  /* Semáforo por agente — colores de estado reservados, no se reutilizan en gráficas. */
  --status-good: #0ca30c;
  --status-warning: #fab219;
  --status-critical: #d03b3b;
}

html, body {
  height: 100%;
}

body {
  background-color: var(--rochem-bg);
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
  color: #1f2933;
}

.app-navbar {
  background: linear-gradient(90deg, var(--rochem-navy) 0%, var(--rochem-blue) 100%);
  box-shadow: 0 2px 8px rgba(11, 61, 103, 0.25);
}

.app-navbar-logo {
  height: 34px;
  border-radius: 4px;
  background: #fff;
  padding: 2px 6px;
}

.app-navbar-title {
  font-weight: 600;
  letter-spacing: 0.02em;
}

.app-main {
  padding: 1.5rem 0 2.5rem;
}

.app-footer {
  border-top: 1px solid #dde3ea;
  background: #fff;
}

/* ---------------- Login ---------------- */
.login-page {
  min-height: calc(100vh - 60px);
}

.login-card {
  width: 100%;
  max-width: 380px;
  border: none;
  border-radius: 12px;
}

.login-logo {
  max-width: 220px;
}

.btn-brand {
  background-color: var(--rochem-navy);
  border-color: var(--rochem-navy);
  color: #fff;
  font-weight: 600;
}

.btn-brand:hover, .btn-brand:focus {
  background-color: var(--rochem-blue);
  border-color: var(--rochem-blue);
  color: #fff;
}

/* ---------------- Dashboard ---------------- */
.dashboard-page .card {
  border: none;
  border-radius: 10px;
  box-shadow: 0 1px 4px rgba(15, 35, 60, 0.08);
}

.kpi-card {
  border-left: 4px solid var(--rochem-blue);
}

.kpi-card .card-body {
  padding: 0.65rem 0.85rem;
}

.kpi-value {
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1.1;
  color: #1f2933;
  white-space: nowrap;
}

.kpi-label {
  font-size: 0.7rem;
  color: var(--rochem-gray);
  margin-top: 0.2rem;
  line-height: 1.2;
}

.kpi-primary { border-left-color: var(--rochem-navy); }
.kpi-alta { border-left-color: var(--rochem-danger); }
.kpi-atencion { border-left-color: var(--rochem-warning); }
.kpi-visita { border-left-color: var(--rochem-blue-light); }
.kpi-cerrado { border-left-color: var(--rochem-success); }
.kpi-neutral { border-left-color: var(--rochem-gray); }
.kpi-unidades { border-left-color: var(--rochem-teal); }

/* ---------------- Gráficas / cross-filter ---------------- */
.chart-card-sm .card-body {
  padding: 0.85rem 0.9rem;
}

.donut-wrap {
  position: relative;
  max-width: 210px;
  margin: 0 auto;
  aspect-ratio: 1 / 1;
}

/* La dona "Por estado" se destaca a propósito — es la que responde "¿cómo va la
   operación ahora mismo?" para decisiones rápidas, así que ocupa más espacio. */
.chart-card-lg .card-body {
  padding: 1rem 1.1rem;
}

.donut-wrap-lg {
  max-width: 300px;
  width: 100%;
}

.dashboard-page .card.chart-placeholder {
  border: 1px dashed #c3ccd6;
  box-shadow: none;
  background: transparent;
}

.chart-placeholder .card-body {
  min-height: 90px;
}

#filter-bar.d-flex {
  display: flex !important;
}

.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: #eaf1f8;
  color: var(--rochem-navy);
  border-radius: 999px;
  padding: 0.25rem 0.7rem;
  font-size: 0.78rem;
  font-weight: 600;
}

.filter-chip button {
  border: none;
  background: none;
  color: var(--rochem-navy);
  font-weight: 700;
  line-height: 1;
  padding: 0;
  cursor: pointer;
}

.filter-clear-all {
  font-size: 0.78rem;
  color: var(--rochem-gray);
  text-decoration: underline;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}

.donut-wrap canvas {
  cursor: pointer;
}

/* ---------------- Cuadrícula de agentes (reemplaza la gráfica de barras) ---------------- */
.agent-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(131px, 1fr));
  gap: 1.15rem 0.9rem;
}

.agent-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  padding-bottom: 0.3rem;
  border-radius: 10px;
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.agent-tile:hover {
  transform: translateY(-2px);
}

.agent-tile-dimmed {
  opacity: 0.32;
}

.agent-tile-selected .agent-photo-wrap {
  box-shadow: 0 0 0 3px var(--rochem-navy), 0 2px 6px rgba(15, 35, 60, 0.25);
}

/* Agente con tickets "En Atención" que no son de hoy (carga pendiente/atrasada):
   un anillo naranja alrededor de la foto para que salte a la vista al recorrer
   la cuadrícula, más el número exacto en una insignia sobre la esquina. */
.agent-tile-backlog .agent-photo-wrap {
  box-shadow: 0 0 0 3px var(--status-warning), 0 1px 4px rgba(15, 35, 60, 0.18);
}

.agent-tile-backlog.agent-tile-selected .agent-photo-wrap {
  box-shadow: 0 0 0 3px var(--rochem-navy), 0 0 0 6px var(--status-warning), 0 2px 6px rgba(15, 35, 60, 0.25);
}

.agent-photo-frame {
  position: relative;
  display: inline-flex;
}

/* Fondo blanco a propósito (antes era relleno naranja sólido) — se pidió que
   el círculo de "tickets pendientes rezagados" resalte con fondo blanco y el
   número/borde en naranja, en vez de un círculo naranja sólido. */
.agent-backlog-badge {
  position: absolute;
  top: -3px;
  right: -3px;
  min-width: 22px;
  height: 22px;
  padding: 0 5px;
  border-radius: 999px;
  background: #fff;
  color: var(--status-warning);
  font-size: 0.72rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--status-warning);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}

.agent-photo-wrap {
  width: 113px;
  height: 113px;
  border-radius: 50%;
  overflow: hidden;
  background: #eef2f6;
  box-shadow: 0 0 0 2px #fff, 0 1px 4px rgba(15, 35, 60, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.6rem;
  color: var(--rochem-navy);
  flex-shrink: 0;
}

.agent-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.agent-photo-fallback {
  background: #dde7f0;
}

/* El semáforo ahora lleva el número de tickets de hoy incrustado adentro (antes
   iba aparte, en .agent-count-badge, encima del semáforo) — por eso el círculo
   creció de 11px a 30px y ahora es flex para centrar el número. */
.agent-semaphore {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  margin-top: 0.4rem;
  color: #fff;
  font-weight: 800;
  font-size: 0.85rem;
  line-height: 1;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.agent-semaphore-green { background: var(--status-good); }
.agent-semaphore-orange { background: var(--status-warning); }
.agent-semaphore-red { background: var(--status-critical); }

.alert-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--rochem-danger);
  margin-right: 4px;
}

/* Punto naranja para el panel "Tickets EN ATENCION por Agente" — el rojo se
   reserva para alertas de SLA superado; este panel muestra un estado, no una alerta. */
.alert-dot-atencion {
  background: var(--status-warning);
}

.sla-badge {
  background-color: var(--rochem-blue-light);
  color: #fff;
  font-weight: 500;
}

/* Cabecera de SECCIÓN (el título "Detalle por agente" / "Tickets EN ATENCION
   por Agente" arriba del acordeón, no cada renglón de agente) con el mismo
   degradado azul marino del logo/navbar y letra más grande. Usa márgenes
   negativos para "sangrar" hasta el borde de la tarjeta (mismo truco que
   .ticket-modal-header). Los renglones de cada agente (.accordion-button) se
   quedan como estaban antes: sin color de fondo. */
.section-header-bar {
  background: linear-gradient(90deg, var(--rochem-navy) 0%, var(--rochem-blue) 100%);
  color: #fff;
  margin: -1rem -1rem 1rem;
  padding: 0.9rem 1.25rem;
  border-radius: 10px 10px 0 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.section-header-bar h2 {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 700;
  color: #fff;
}

.accordion-button:not(.collapsed) {
  background-color: #eaf1f8;
  color: var(--rochem-navy);
}

.accordion-button:focus {
  box-shadow: 0 0 0 0.2rem rgba(26, 95, 158, 0.25);
}

.agent-name {
  font-weight: 600;
}

#btn-refresh {
  min-width: 140px;
}

/* ---------------- Filtro de fecha ---------------- */
.date-filter input[type="date"] {
  max-width: 160px;
}

/* ---------------- Ticket clickeable (abre la ventana emergente de detalle) ---------------- */
.ticket-link {
  border: none;
  background: none;
  padding: 0;
  color: var(--rochem-blue);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: transparent;
  cursor: pointer;
  transition: text-decoration-color 0.15s ease;
}

.ticket-link:hover, .ticket-link:focus {
  text-decoration-color: var(--rochem-blue);
  color: var(--rochem-navy);
}

/* Nombre del agente junto al número de ticket, en el título de la ventana emergente. */
.ticket-modal-title-agent {
  font-weight: 400;
  font-size: 0.82em;
  color: var(--rochem-gray);
  margin-left: 0.35rem;
}

/* Nombre del cliente, junto al del agente (separados por "·" desde JS), en el
   mismo título. Un poco más marcado que el del agente para distinguir de un
   vistazo "quién atiende" (gris) de "a quién" (azul). */
.ticket-modal-title-cliente {
  font-weight: 600;
  font-size: 0.82em;
  color: var(--rochem-blue);
}

/* ---------------- Gráfica de barras "Últimos 7 días" ---------------- */
/* Ahora vive en la columna angosta (debajo de "Por estado", junto a la
   cuadrícula de agentes) en vez de a ancho completo, así que la altura es más
   baja que antes. Necesita una altura explícita porque usa
   maintainAspectRatio:false. */
.weekly-chart-wrap {
  position: relative;
  height: 200px;
  width: 100%;
}

/* ---------------- Ventana emergente de detalle de ticket ---------------- */
.ticket-modal-content {
  border: none;
  border-radius: 12px;
  overflow: hidden;
}

.ticket-modal-header {
  background: linear-gradient(90deg, var(--rochem-navy) 0%, var(--rochem-blue) 100%);
  color: #fff;
  margin: -1rem -1rem 1rem;
  padding: 1rem 1.25rem;
}

.ticket-modal-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.6rem;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.92);
  margin-bottom: 0.5rem;
}

.ticket-modal-badge {
  background: rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  padding: 0.15rem 0.65rem;
  font-weight: 700;
  font-size: 0.78rem;
}

.ticket-modal-description {
  font-size: 0.88rem;
  color: rgba(255, 255, 255, 0.92);
  line-height: 1.5;
}

.ticket-modal-observaciones {
  margin-top: 0.65rem;
  padding-top: 0.65rem;
  border-top: 1px solid rgba(255, 255, 255, 0.22);
  font-size: 0.88rem;
  color: rgba(255, 255, 255, 0.92);
  line-height: 1.5;
}

.ticket-modal-label {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 0.2rem;
}

.ticket-modal-empty {
  color: rgba(255, 255, 255, 0.65);
  font-style: italic;
}

.ticket-activities-title {
  color: var(--rochem-navy);
  font-weight: 700;
  margin-bottom: 0.75rem;
}

.ticket-activities-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.ticket-activity {
  border-left: 3px solid var(--rochem-blue-light);
  padding: 0.15rem 0 0.15rem 0.85rem;
}

.ticket-activity-date {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.5rem;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--rochem-gray);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin-bottom: 0.2rem;
}

/* Usuario que agregó el comentario (TicketsDet.NombreUsuario), junto a su fecha. */
.ticket-activity-user {
  font-weight: 600;
  text-transform: none;
  letter-spacing: normal;
  color: var(--rochem-blue);
}

.ticket-activity-user::before {
  content: "· ";
  color: var(--rochem-gray);
}

.ticket-activity-text {
  font-size: 0.88rem;
  color: #1f2933;
  line-height: 1.4;
}

/* ---------------- Pestañas del dashboard ("Tiempo real" / "KPIs y Productividad") ---------------- */
.dashboard-tabs .nav-link {
  color: var(--rochem-gray);
  font-weight: 600;
  border: none;
  border-bottom: 3px solid transparent;
  padding: 0.55rem 1rem;
}

.dashboard-tabs .nav-link:hover {
  color: var(--rochem-blue);
  border-color: transparent;
}

.dashboard-tabs .nav-link.active {
  color: var(--rochem-navy);
  background: transparent;
  border-bottom-color: var(--rochem-blue);
}

/* ---------------- Pestaña "KPIs y Productividad" ---------------- */
.kpi-card .card-body {
  padding: 1rem 1.15rem;
  border-left: 4px solid var(--rochem-blue);
}

.kpi-card-cerrados .card-body {
  border-left-color: var(--rochem-success);
}

.kpi-card-atencion .card-body {
  border-left-color: var(--status-warning);
}

.kpi-card-label {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--rochem-gray);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.kpi-card-value {
  font-size: 1.9rem;
  font-weight: 700;
  color: var(--rochem-navy);
  line-height: 1.2;
}

.kpi-card-pct {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--rochem-gray);
}

/* Altura explícita porque las gráficas de KPIs usan maintainAspectRatio:false. */
.kpi-chart-wrap {
  position: relative;
  height: 260px;
  width: 100%;
}

/* ---------------- Pestaña "Productividad por Agente" ---------------- */
/* Las tarjetas (.kpi-card) y el wrap base (.kpi-chart-wrap) ya están arriba —
   esta pestaña los reutiliza tal cual. .agentes-chart-wrap solo recibe su alto
   final por JS (agentes.js la ajusta según cuántos agentes tienen datos, para
   que una gráfica horizontal con ~35-40 agentes no quede amontonada). */
.agentes-chart-wrap {
  min-height: 260px;
}

.agentes-table th[data-sort] {
  user-select: none;
  white-space: nowrap;
}

.agentes-table th[data-sort]:hover {
  color: var(--rochem-blue);
}

.agentes-table td:first-child {
  font-weight: 600;
  color: var(--rochem-navy);
}