/* responsive.css */
/* Breakpoints y ajustes para tablet y desktop */
/* Base mobile first — estos estilos sobreescriben hacia arriba */

/* ============================================
   BREAKPOINTS
   sm:  640px  — mobile grande
   md:  768px  — tablet
   lg:  1024px — desktop chico
   xl:  1280px — desktop grande
   ============================================ */

/* ============================================
   SM — 640px+
   ============================================ */
.tickets-table-wrapper {
  display: none; /* se activa en LG+ */
}

@media (min-width: 640px) {

  .metrics-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .form-row {
    grid-template-columns: repeat(2, 1fr);
  }

  .agent-orb {
    width:  140px;
    height: 140px;
  }

  .filters-bar {
    flex-wrap: wrap;
    overflow-x: visible;
  }

}

/* ============================================
   MD — 768px+ (tablet)
   ============================================ */
@media (min-width: 768px) {

  /* Nav pasa a sidebar izquierdo en tablet */
  .app-nav {
    position:        fixed;
    top:             var(--header-height);
    left:            0;
    bottom:          0;
    right:           auto;
    width:           200px;
    height:          auto;
    flex-direction:  column;
    justify-content: flex-start;
    align-items:     stretch;
    padding:         var(--space-4) var(--space-2);
    border-top:      none;
    border-right:    1px solid var(--color-border);
    box-shadow:      2px 0 10px rgba(0,0,0,0.2);
    gap:             var(--space-1);
  }

  .app-nav button {
    flex-direction:  row;
    justify-content: flex-start;
    font-size:       var(--font-size-sm);
    padding:         var(--space-3) var(--space-4);
    gap:             var(--space-3);
    border-radius:   var(--radius-md);
  }

  .app-nav button.active {
    background: var(--color-primary-glow);
  }

  /* View container con espacio para sidebar */
  .view-container {
    margin-left:   200px;
    margin-bottom: 0;
    padding:       var(--space-6);
  }

  .agent-container {
    padding: var(--space-8) var(--space-6);
  }

  .agent-transcript {
    max-height: 400px;
  }

  .ticket-card-header {
    align-items: center;
  }

  .form-row-3 {
    grid-template-columns: repeat(3, 1fr);
  }

}

/* ============================================
   LG — 1024px+ (desktop)
   ============================================ */
@media (min-width: 1024px) {

  .app-nav {
    width: 220px;
  }

  .view-container {
    margin-left: 220px;
    max-width:   calc(var(--max-width) + 220px);
  }

  /* Dashboard — grid de 2 columnas */
  .dashboard-grid {
    display:               grid;
    grid-template-columns: 1fr 1fr;
    gap:                   var(--space-6);
    align-items:           start;
  }

  .dashboard-grid .full-width {
    grid-column: 1 / -1;
  }

  /* Tickets — tabla en lugar de cards */
  .tickets-table-wrapper {
    display: block;
  }

  .tickets-cards-wrapper {
    display: none;
  }

  /* Agente — layout horizontal */
  .agent-container {
    flex-direction:  row;
    align-items:     flex-start;
    justify-content: center;
    gap:             var(--space-10);
    padding-top:     var(--space-10);
  }

  .agent-left {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            var(--space-6);
    position:       sticky;
    top:            var(--space-6);
  }

  .agent-right {
    flex:      1;
    max-width: 500px;
  }

  .metrics-grid {
    grid-template-columns: repeat(4, 1fr);
  }

}

/* ============================================
   XL — 1280px+ (desktop grande)
   ============================================ */
@media (min-width: 1280px) {

  .view-container {
    padding: var(--space-8);
  }

  .agent-transcript {
    max-height: 500px;
  }

}

/* ============================================
   TABLA DE TICKETS (desktop)
   ============================================ */


.tickets-table {
  width:           100%;
  border-collapse: collapse;
  font-size:       var(--font-size-sm);
}

.tickets-table th {
  text-align:     left;
  padding:        var(--space-3) var(--space-4);
  color:          var(--color-text-muted);
  font-weight:    500;
  border-bottom:  1px solid var(--color-border);
  white-space:    nowrap;
}

.tickets-table td {
  padding:       var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border);
  vertical-align: middle;
}

.tickets-table tr:hover td {
  background: rgba(255,255,255,0.02);
  cursor:     pointer;
}

.tickets-table .col-id          { width: 130px; font-family: monospace; color: var(--color-text-muted); }
.tickets-table .col-client      { width: 150px; font-weight: 500; }
.tickets-table .col-description { max-width: 300px; }
.tickets-table .col-status      { width: 140px; }
.tickets-table .col-priority    { width: 90px; }
.tickets-table .col-nivel       { width: 60px; text-align: center; }
.tickets-table .col-time        { width: 90px; text-align: right; }
.tickets-table .col-date        { width: 120px; color: var(--color-text-muted); }
.tickets-table .col-agent       { width: 80px; }

.td-description {
  display:            -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow:           hidden;
}

/* ============================================
   PRINT — para reportes
   ============================================ */
@media print {

  .app-header,
  .app-nav,
  .btn,
  .filters-bar,
  .search-bar {
    display: none !important;
  }

  .view-container {
    margin:  0;
    padding: 0;
  }

  body {
    background: #fff;
    color:      #000;
  }

  .card,
  .ticket-card {
    border:     1px solid #ddd;
    box-shadow: none;
  }

}

/* ============================================
   PREFERENCIA DE MOVIMIENTO REDUCIDO
   ============================================ */
@media (prefers-reduced-motion: reduce) {

  *, *::before, *::after {
    animation-duration:   0.01ms !important;
    transition-duration:  0.01ms !important;
  }

}