/* components.css */
/* Componentes reutilizables — botones, cards, badges, forms, etc */

/* ============================================
   BOTONES
   ============================================ */
.btn {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  gap:             var(--space-2);
  padding:         var(--space-3) var(--space-5);
  border:          1px solid transparent;
  border-radius:   var(--radius-md);
  font-size:       var(--font-size-sm);
  font-weight:     500;
  cursor:          pointer;
  transition:      background var(--transition-fast),
                   border-color var(--transition-fast),
                   box-shadow var(--transition-fast),
                   transform var(--transition-fast);
  white-space:     nowrap;
  user-select:     none;
  -webkit-tap-highlight-color: transparent;
}

.btn:active {
  transform: scale(0.97);
}

.btn:disabled {
  opacity: 0.5;
  cursor:  not-allowed;
}

/* Variantes */
.btn-primary {
  background: var(--color-primary);
  color:      var(--color-text-inverse);
}
.btn-primary:hover:not(:disabled) {
  background:  var(--color-primary-dark);
  box-shadow:  var(--shadow-glow);
}

.btn-secondary {
  background:   transparent;
  border-color: var(--color-border);
  color:        var(--color-text);
}
.btn-secondary:hover:not(:disabled) {
  background:   rgba(255,255,255,0.05);
  border-color: var(--color-primary);
}

.btn-danger {
  background: transparent;
  border-color: var(--color-danger);
  color:        var(--color-danger);
}
.btn-danger:hover:not(:disabled) {
  background: var(--color-danger);
  color:      #fff;
}

.btn-ghost {
  background:  transparent;
  border:      none;
  color:       var(--color-text-muted);
  padding:     var(--space-2) var(--space-3);
}
.btn-ghost:hover:not(:disabled) {
  color:       var(--color-text);
  background:  rgba(255,255,255,0.05);
}

/* Tamaños */
.btn-sm {
  padding:   var(--space-2) var(--space-3);
  font-size: var(--font-size-xs);
}

.btn-lg {
  padding:   var(--space-4) var(--space-8);
  font-size: var(--font-size-lg);
}

.btn-full {
  width: 100%;
}

/* Botón de logout en header */
.btn-logout {
  background:    transparent;
  border:        1px solid var(--color-border);
  color:         var(--color-text-muted);
  font-size:     var(--font-size-xs);
  padding:       var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  cursor:        pointer;
  transition:    all var(--transition-fast);
}
.btn-logout:hover {
  border-color: var(--color-danger);
  color:        var(--color-danger);
}

/* ============================================
   CARDS
   ============================================ */
.card {
  background:    var(--color-bg-card);
  border:        1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding:       var(--space-4);
  box-shadow:    var(--shadow-sm);
}

.card-header {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  margin-bottom:   var(--space-4);
  padding-bottom:  var(--space-3);
  border-bottom:   1px solid var(--color-border);
}

.card-title {
  font-size:   var(--font-size-md);
  font-weight: 600;
  color:       var(--color-text);
}

.card-body {
  color: var(--color-text);
}

/* Card de ticket en lista */
.ticket-card {
  background:    var(--color-bg-card);
  border:        1px solid var(--color-border);
  border-left:   3px solid var(--color-primary);
  border-radius: var(--radius-lg);
  padding:       var(--space-4);
  margin-bottom: var(--space-3);
  cursor:        pointer;
  transition:    border-color var(--transition-fast),
                 box-shadow var(--transition-fast),
                 transform var(--transition-fast);
  animation:     fadeIn var(--transition-normal) ease;
}

.ticket-card:hover {
  border-color: var(--color-primary);
  box-shadow:   var(--shadow-glow);
  transform:    translateY(-1px);
}

.ticket-card[data-priority="critica"] { border-left-color: var(--color-prio-critica); }
.ticket-card[data-priority="alta"]    { border-left-color: var(--color-prio-alta); }
.ticket-card[data-priority="media"]   { border-left-color: var(--color-prio-media); }
.ticket-card[data-priority="baja"]    { border-left-color: var(--color-prio-baja); }

.ticket-card-header {
  display:         flex;
  align-items:     flex-start;
  justify-content: space-between;
  gap:             var(--space-2);
  margin-bottom:   var(--space-2);
}

.ticket-id {
  font-size:  var(--font-size-xs);
  color:      var(--color-text-muted);
  font-family: monospace;
}

.ticket-client {
  font-weight: 600;
  font-size:   var(--font-size-sm);
}

.ticket-user {
  font-size: var(--font-size-sm);
  color:     var(--color-text-muted);
}

.ticket-description {
  font-size:   var(--font-size-sm);
  color:       var(--color-text);
  margin:      var(--space-2) 0;
  display:     -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow:    hidden;
}

.ticket-meta {
  display:     flex;
  align-items: center;
  gap:         var(--space-2);
  flex-wrap:   wrap;
  margin-top:  var(--space-2);
}

/* ============================================
   BADGES
   ============================================ */
.badge {
  display:       inline-flex;
  align-items:   center;
  padding:       2px var(--space-2);
  border-radius: var(--radius-full);
  font-size:     var(--font-size-xs);
  font-weight:   500;
  white-space:   nowrap;
}

/* Estados */
.badge-abierto            { background: rgba(96,165,250,0.15);  color: var(--color-status-abierto); }
.badge-en_progreso        { background: rgba(167,139,250,0.15); color: var(--color-status-en-progreso); }
.badge-pendiente_cliente  { background: rgba(250,204,21,0.15);  color: var(--color-status-pendiente-cliente); }
.badge-resuelto           { background: rgba(74,222,128,0.15);  color: var(--color-status-resuelto); }
.badge-cancelado          { background: rgba(107,114,128,0.15); color: var(--color-status-cancelado); }

/* Prioridades */
.badge-baja    { background: rgba(74,222,128,0.15);  color: var(--color-prio-baja); }
.badge-media   { background: rgba(250,204,21,0.15);  color: var(--color-prio-media); }
.badge-alta    { background: rgba(251,146,60,0.15);  color: var(--color-prio-alta); }
.badge-critica { background: rgba(248,113,113,0.15); color: var(--color-prio-critica); }

/* Tipos */
.badge-type {
  background: rgba(74,158,255,0.1);
  color:      var(--color-primary);
}

/* Niveles de soporte */
.badge-nivel-L1 { background: rgba(74,222,128,0.15);  color: #4ade80; }
.badge-nivel-L2 { background: rgba(251,146,60,0.15);  color: #fb923c; }
.badge-nivel-L3 { background: rgba(167,139,250,0.15); color: #a78bfa; }

/* Facturable */
.badge-facturable     { background: rgba(74,222,128,0.1); color: var(--color-success); }
.badge-no-facturable  { background: rgba(107,114,128,0.1); color: var(--color-text-muted); }

/* ============================================
   FORMULARIOS
   ============================================ */
.form-group {
  margin-bottom: var(--space-4);
}

.form-label {
  display:       block;
  font-size:     var(--font-size-sm);
  font-weight:   500;
  color:         var(--color-text-muted);
  margin-bottom: var(--space-2);
}

.form-control {
  width:         100%;
  background:    var(--color-bg-input);
  border:        1px solid var(--color-border);
  border-radius: var(--radius-md);
  color:         var(--color-text);
  padding:       var(--space-3) var(--space-4);
  font-size:     var(--font-size-md);
  transition:    border-color var(--transition-fast),
                 box-shadow var(--transition-fast);
  appearance:    none;
}

.form-control:focus {
  outline:      none;
  border-color: var(--color-border-focus);
  box-shadow:   0 0 0 3px var(--color-primary-glow);
}

.form-control::placeholder {
  color: var(--color-text-muted);
}

select.form-control {
  background-image:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%238888aa' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat:   no-repeat;
  background-position: right var(--space-3) center;
  padding-right:       var(--space-8);
}

textarea.form-control {
  resize:     vertical;
  min-height: 80px;
}

.form-row {
  display: grid;
  gap:     var(--space-4);
}

/* ============================================
   AGENTE DE VOZ
   ============================================ */
.agent-container {
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  padding:         var(--space-6) var(--space-4);
  gap:             var(--space-6);
  min-height:      calc(100vh - var(--header-height) - var(--nav-height));
}

.agent-orb {
  width:         120px;
  height:        120px;
  border-radius: var(--radius-full);
  background:    radial-gradient(circle at 35% 35%,
                   var(--color-primary),
                   var(--color-primary-dark));
  display:       flex;
  align-items:   center;
  justify-content: center;
  font-size:     3rem;
  box-shadow:    var(--shadow-glow);
  cursor:        pointer;
  transition:    transform var(--transition-normal),
                 box-shadow var(--transition-normal);
  user-select:   none;
  -webkit-tap-highlight-color: transparent;
}

.agent-orb:hover {
  transform:  scale(1.05);
  box-shadow: 0 0 40px var(--color-primary-glow);
}

.agent-orb.listening {
  animation: orbPulse 1s ease infinite;
}

.agent-orb.speaking {
  animation: orbSpeak 0.5s ease infinite alternate;
}

@keyframes orbPulse {
  0%, 100% { transform: scale(1);    box-shadow: 0 0 20px var(--color-primary-glow); }
  50%       { transform: scale(1.08); box-shadow: 0 0 50px var(--color-primary-glow); }
}

@keyframes orbSpeak {
  from { transform: scale(1);    }
  to   { transform: scale(1.04); }
}

.agent-status {
  font-size:      var(--font-size-sm);
  color:          var(--color-text-muted);
  text-align:     center;
  letter-spacing: 0.05em;
  min-height:     1.5em;
}

.agent-transcript {
  width:         100%;
  max-width:     500px;
  background:    var(--color-bg-card);
  border:        1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding:       var(--space-4);
  min-height:    120px;
  max-height:    300px;
  overflow-y:    auto;
}

.agent-message {
  margin-bottom: var(--space-3);
  animation:     fadeIn var(--transition-fast) ease;
}

.agent-message.user {
  text-align: right;
}

.agent-message.user span {
  background:    var(--color-primary);
  color:         var(--color-text-inverse);
  padding:       var(--space-2) var(--space-3);
  border-radius: var(--radius-lg) var(--radius-lg) var(--space-1) var(--radius-lg);
  display:       inline-block;
  max-width:     80%;
  font-size:     var(--font-size-sm);
}

.agent-message.agent span {
  background:    var(--color-bg-input);
  color:         var(--color-text);
  padding:       var(--space-2) var(--space-3);
  border-radius: var(--radius-lg) var(--radius-lg) var(--radius-lg) var(--space-1);
  display:       inline-block;
  max-width:     80%;
  font-size:     var(--font-size-sm);
}

.agent-input-row {
  width:       100%;
  max-width:   500px;
  display:     flex;
  gap:         var(--space-2);
  align-items: center;
}

.agent-text-input {
  flex: 1;
}

/* ============================================
   DASHBOARD — métricas
   ============================================ */
.metrics-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap:     var(--space-3);
}

.metric-card {
  background:    var(--color-bg-card);
  border:        1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding:       var(--space-4);
  text-align:    center;
}

.metric-value {
  font-size:   var(--font-size-3xl);
  font-weight: 700;
  color:       var(--color-primary);
  line-height: 1;
}

.metric-label {
  font-size:  var(--font-size-xs);
  color:      var(--color-text-muted);
  margin-top: var(--space-1);
}

/* ============================================
   FILTROS
   ============================================ */
.filters-bar {
  display:       flex;
  gap:           var(--space-2);
  margin-bottom: var(--space-4);
  overflow-x:    auto;
  padding-bottom: var(--space-1);
  scrollbar-width: none;
}

.filters-bar::-webkit-scrollbar {
  display: none;
}

.filter-chip {
  display:       inline-flex;
  align-items:   center;
  gap:           var(--space-1);
  padding:       var(--space-2) var(--space-3);
  background:    var(--color-bg-card);
  border:        1px solid var(--color-border);
  border-radius: var(--radius-full);
  font-size:     var(--font-size-xs);
  color:         var(--color-text-muted);
  cursor:        pointer;
  white-space:   nowrap;
  transition:    all var(--transition-fast);
}

.filter-chip:hover,
.filter-chip.active {
  background:   var(--color-primary-glow);
  border-color: var(--color-primary);
  color:        var(--color-primary);
}

/* ============================================
   EMPTY STATE
   ============================================ */
.empty-state {
  text-align:  center;
  padding:     var(--space-12) var(--space-4);
  color:       var(--color-text-muted);
}

.empty-state-icon {
  font-size:     3rem;
  margin-bottom: var(--space-4);
  display:       block;
}

.empty-state-text {
  font-size: var(--font-size-sm);
}

/* ============================================
   SEARCH BAR
   ============================================ */
.search-bar {
  position:      relative;
  margin-bottom: var(--space-4);
}

.search-bar input {
  width:         100%;
  background:    var(--color-bg-card);
  border:        1px solid var(--color-border);
  border-radius: var(--radius-full);
  color:         var(--color-text);
  padding:       var(--space-3) var(--space-4) var(--space-3) var(--space-10);
  font-size:     var(--font-size-sm);
  transition:    border-color var(--transition-fast);
}

.search-bar input:focus {
  outline:      none;
  border-color: var(--color-border-focus);
}

.search-bar::before {
  content:   '🔍';
  position:  absolute;
  left:      var(--space-4);
  top:       50%;
  transform: translateY(-50%);
  font-size: var(--font-size-sm);
}

/* ============================================
   DIVIDER
   ============================================ */
.divider {
  border:        none;
  border-top:    1px solid var(--color-border);
  margin:        var(--space-4) 0;
}

/* ============================================
   TOOLTIP
   ============================================ */
#app-tooltip {
  position:       fixed;
  z-index:        9000;
  background:     #1e1e35;
  color:          var(--color-text);
  border:         1px solid var(--color-border);
  border-radius:  var(--radius-md);
  padding:        var(--space-2) var(--space-3);
  font-size:      var(--font-size-xs);
  line-height:    1.5;
  max-width:      320px;
  white-space:    pre-wrap;
  word-break:     break-word;
  box-shadow:     var(--shadow-lg);
  pointer-events: none;
  opacity:        0;
  transition:     opacity 0.15s ease;
}

#app-tooltip.visible {
  opacity: 1;
}

/* ============================================
   ÁRBOL DE AYUDA
   ============================================ */
.help-row {
  display:       flex;
  align-items:   center;
  gap:           var(--space-2);
  padding:       var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  cursor:        default;
  transition:    background var(--transition-fast);
  user-select:   none;
}

.help-row-type,
.help-row-cat {
  cursor: pointer;
}

.help-row:hover {
  background: rgba(255,255,255,0.04);
}

.help-toggle {
  font-size:  10px;
  color:      var(--color-text-muted);
  min-width:  12px;
  transition: transform var(--transition-fast);
}
#r-datepicker-panel {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 9999;
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 0;
  min-width: 640px;
  font-size: var(--font-size-sm);
  color: var(--color-text);
}

.dp-layout {
  display: flex;
}

.dp-shortcuts {
  padding: var(--space-3) var(--space-2);
  border-right: 1px solid var(--color-border);
  min-width: 148px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.dp-shortcut {
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  cursor: pointer;
  white-space: nowrap;
  color: var(--color-text);
  transition: background var(--transition-fast);
  font-size: var(--font-size-xs);
}
.dp-shortcut:hover {
  background: var(--color-primary-glow);
  color: var(--color-primary);
}
.dp-shortcut.active {
  background: var(--color-primary);
  color: var(--color-text-inverse);
}

.dp-calendars {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.dp-months {
  display: flex;
  gap: 0;
  padding: var(--space-3) var(--space-2) var(--space-1);
}

.dp-month {
  flex: 1;
  padding: 0 var(--space-2);
}

.dp-month-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-2);
  font-weight: 600;
  font-size: var(--font-size-sm);
  color: var(--color-text);
}

.dp-nav-btn {
  background: none;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  width: 26px;
  height: 26px;
  cursor: pointer;
  font-size: var(--font-size-xs);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
  transition: background var(--transition-fast);
}
.dp-nav-btn:hover {
  background: rgba(255,255,255,0.05);
  color: var(--color-text);
}

.dp-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  text-align: center;
  font-size: var(--font-size-xs);
  font-weight: 600;
  color: var(--color-text-muted);
  margin-bottom: var(--space-1);
}

.dp-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1px;
}

.dp-day {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: var(--font-size-xs);
  transition: background var(--transition-fast), color var(--transition-fast);
}
.dp-day:empty {
  cursor: default;
}
.dp-day:not(:empty):hover {
  background: var(--color-primary-glow);
  color: var(--color-primary);
}
.dp-day.in-range {
  background: var(--color-primary-glow);
  border-radius: 0;
}
.dp-day.range-start,
.dp-day.range-end {
  background: var(--color-primary) !important;
  color: var(--color-text-inverse) !important;
}
.dp-day.range-start { border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
.dp-day.range-end   { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.dp-day.range-start.range-end { border-radius: var(--radius-sm); }
.dp-day.today {
  font-weight: 700;
  color: var(--color-primary);
}
.dp-day.other-month {
  opacity: 0.3;
}

.dp-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid var(--color-border);
}

.dp-preview {
  flex: 1;
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}