/* ===========================
   Transcriptor TEX — App Styles
   Variables via atlassian.css / crm-theme.css
   =========================== */

/* ===========================
   Navbar controls (project-specific)
   =========================== */
.navbar-controls {
  display:     flex;
  align-items: center;
  gap:         var(--ds-space-150);
}

.model-select {
  font-family:   var(--ds-font-family-body);
  font-size:     12px;
  color:         var(--ds-text);
  background:    var(--ds-background-neutral);
  border:        1px solid var(--ds-border);
  border-radius: var(--ds-radius);
  padding:       4px 8px;
  cursor:        pointer;
  outline:       none;
  transition:    border-color 0.15s, box-shadow 0.15s;
}

.model-select:hover { border-color: var(--ds-interactive); }
.model-select:focus {
  border-color: var(--ds-border-focused);
  box-shadow:   0 0 0 2px rgba(76, 154, 255, 0.2);
}

/* ===========================
   App Layout
   =========================== */
.app-layout {
  display:               grid;
  grid-template-columns: 1fr 320px;
  gap:                   var(--ds-space-300);
  max-width:             1200px;
  margin:                0 auto;
  padding:               var(--ds-space-300);
}

@media (max-width: 768px) {
  .app-layout { grid-template-columns: 1fr; }
  .panel--history { order: -1; }
}

/* ===========================
   Panel
   =========================== */
.panel {
  background:    var(--ds-surface);
  border:        1px solid var(--ds-border);
  border-radius: var(--ds-radius-medium);
  padding:       var(--ds-space-300);
}

.panel__header {
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  margin-bottom:   var(--ds-space-200);
}

.panel__title {
  margin:      0;
  font-size:   14px;
  font-weight: 600;
  color:       var(--ds-text);
}

/* ===========================
   Drop Zone
   =========================== */
.drop-zone {
  border:        2px dashed var(--ds-border);
  border-radius: var(--ds-radius-medium);
  padding:       var(--ds-space-500);
  text-align:    center;
  cursor:        pointer;
  background:    var(--ds-background-neutral);
  transition:    border-color 0.15s ease, background-color 0.15s ease;
  margin-bottom: var(--ds-space-200);
}

.drop-zone:hover,
.drop-zone--dragging {
  border-color: var(--ds-interactive);
  background:   var(--ds-background-information);
}

.drop-zone__content { pointer-events: none; }

.drop-zone__icon {
  font-size:     32px;
  margin-bottom: var(--ds-space-100);
}

.drop-zone__text {
  color:  var(--ds-text-subtle);
  margin: 0 0 var(--ds-space-050) 0;
}

.drop-zone__link {
  color:           var(--ds-link);
  text-decoration: underline;
}

.drop-zone__hint {
  color:     var(--ds-text-subtlest);
  font-size: 12px;
  margin:    0;
}

/* ===========================
   Health Badge
   =========================== */
.health-badge {
  display:     inline-flex;
  align-items: center;
  padding:     2px 8px;
  border-radius: var(--ds-radius);
  font-size:   12px;
  font-weight: 600;
  white-space: nowrap;
}

.health-badge--ok      { background: var(--ds-background-success);     color: var(--ds-text-success); }
.health-badge--warn    { background: var(--ds-background-warning);     color: var(--ds-text); }
.health-badge--error   { background: var(--ds-background-danger);      color: var(--ds-text-danger); }
.health-badge--loading { background: var(--ds-border);                 color: var(--ds-text-subtlest); }

/* ===========================
   Lozenge
   =========================== */
.lozenge {
  display:        inline-flex;
  align-items:    center;
  padding:        2px 8px;
  border-radius:  2px;
  font-size:      11px;
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  white-space:    nowrap;
}

.lozenge--default    { background: var(--ds-border);                color: var(--ds-text-subtle); }
.lozenge--inprogress { background: var(--ds-background-information); color: var(--ds-interactive); }
.lozenge--success    { background: var(--ds-background-success);     color: var(--ds-text-success); }
.lozenge--removed    { background: var(--ds-background-danger);      color: var(--ds-text-danger); }

/* ===========================
   Speaker Badge
   =========================== */
.speaker-badge {
  display:       inline-flex;
  align-items:   center;
  padding:       1px 6px;
  border-radius: var(--ds-radius);
  font-size:     11px;
  font-weight:   600;
  white-space:   nowrap;
  flex-shrink:   0;
}

.speaker-badge--a           { background: var(--ds-background-information); color: var(--ds-interactive); }
.speaker-badge--b           { background: var(--ds-background-success);     color: var(--ds-text-success); }
.speaker-badge--unknown     { background: var(--ds-background-neutral);     color: var(--ds-text-subtlest); }
.speaker-badge--usuario     { background: var(--ds-background-warning);     color: var(--ds-text-subtle); }
.speaker-badge--colaborador { background: var(--ds-background-success);     color: var(--ds-text-success); }
.speaker-badge--sistema     { background: var(--ds-background-neutral);     color: var(--ds-text-subtlest); font-style: italic; }

/* ===========================
   Segment
   =========================== */
.segment {
  padding:      var(--ds-space-100) var(--ds-space-150);
  border-radius: var(--ds-radius);
  cursor:        pointer;
  display:       flex;
  gap:           var(--ds-space-100);
  align-items:   baseline;
  border-left:   3px solid transparent;
  transition:    background-color 0.1s ease;
}

.segment:hover    { background: var(--ds-background-neutral); }

.segment--active {
  background:        var(--ds-background-information);
  border-left-color: var(--ds-interactive);
}

.segment__time {
  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
  font-size:   12px;
  color:       var(--ds-text-subtlest);
  flex-shrink: 0;
  min-width:   120px;
}

.segment__text {
  color:       var(--ds-text);
  line-height: var(--ds-line-height-body);
}

/* ===========================
   History List
   =========================== */
.history-list {
  overflow-y: auto;
  max-height: calc(100vh - 200px);
}

.history-item {
  padding:         var(--ds-space-100) var(--ds-space-150);
  border-bottom:   1px solid var(--ds-border);
  cursor:          pointer;
  display:         flex;
  flex-direction:  column;
  gap:             4px;
  transition:      background-color 0.1s ease;
}

.history-item:hover        { background: var(--ds-background-neutral); }
.history-item--active      { background: var(--ds-background-information); }
.history-item:last-child   { border-bottom: none; }

.history-item__id   { font-family: 'SFMono-Regular', Consolas, monospace; font-size: 11px; color: var(--ds-text-subtlest); }
.history-item__date { font-size: 11px; color: var(--ds-text-subtlest); }
.history-item__meta { font-size: 12px; color: var(--ds-text-subtle); }
.history-item__row  { display: flex; justify-content: space-between; align-items: center; }

/* ===========================
   Audio Player
   =========================== */
.audio-section { margin-bottom: var(--ds-space-200); }

.audio-section__toolbar {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             var(--ds-space-100);
}

.btn-export {
  display:       inline-flex;
  align-items:   center;
  padding:       4px 12px;
  border-radius: var(--ds-radius);
  border:        1px solid var(--ds-border);
  background:    var(--ds-surface);
  color:         var(--ds-interactive);
  font-size:     12px;
  font-weight:   600;
  cursor:        pointer;
  white-space:   nowrap;
  flex-shrink:   0;
  transition:    background 0.15s, border-color 0.15s;
}

.btn-export:hover {
  background:   var(--ds-background-information);
  border-color: var(--ds-interactive);
}

.audio-player {
  width:         100%;
  margin-bottom: var(--ds-space-200);
}

/* ===========================
   Transcription Meta
   =========================== */
.transcription-meta {
  font-size:   12px;
  color:       var(--ds-text-subtlest);
  margin-bottom: var(--ds-space-200);
  display:     flex;
  gap:         var(--ds-space-200);
  flex-wrap:   wrap;
}

/* ===========================
   Button
   =========================== */
.btn {
  font-family:   var(--ds-font-family-body);
  font-size:     14px;
  border-radius: var(--ds-radius);
  cursor:        pointer;
  border:        none;
  display:       inline-flex;
  align-items:   center;
  justify-content: center;
  transition:    background-color 0.1s ease;
}

.btn--subtle {
  background: transparent;
  color:      var(--ds-link);
  padding:    4px 8px;
}

.btn--subtle:hover { background: var(--ds-background-information); }
.btn--sm           { font-size: 12px; }

/* ===========================
   Job Status
   =========================== */
.job-status {
  display:       flex;
  align-items:   center;
  gap:           var(--ds-space-100);
  padding:       var(--ds-space-100) 0;
  margin-bottom: var(--ds-space-100);
}

.job-status__text { font-size: 13px; color: var(--ds-text-subtle); }

/* ===========================
   Empty / Error States
   =========================== */
.empty-state {
  text-align: center;
  color:      var(--ds-text-subtlest);
  padding:    var(--ds-space-300) 0;
  font-size:  13px;
  margin:     0;
}

/* ===========================
   Segments Container
   =========================== */
.segments-container { margin-top: var(--ds-space-100); }

/* ===========================
   Chart Dashboard (Phase 09)
   =========================== */

.chart-dashboard {
  margin-bottom: var(--ds-space-200);
}

.chart-tabs {
  display: flex;
  gap: var(--ds-space-050);
  margin-bottom: var(--ds-space-100);
}

.chart-tab {
  background: var(--ds-background-neutral);
  border: 1px solid var(--ds-border);
  color: var(--ds-text-subtle);
  border-radius: var(--ds-radius);
  padding: 4px 10px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  transition: background 0.1s, border-color 0.1s;
  font-family: var(--ds-font-family-body);
}

.chart-tab:hover {
  background: var(--ds-background-information);
  border-color: var(--ds-interactive);
  color: var(--ds-interactive);
}

.chart-tab--active {
  background: var(--ds-background-information);
  border-color: var(--ds-interactive);
  color: var(--ds-interactive);
}

.chart-tab-info {
  margin-left: 5px;
  font-size: 11px;
  opacity: 0.55;
  cursor: help;
  vertical-align: middle;
  pointer-events: all;
}

.chart-tab-info:hover {
  opacity: 1;
}

.chart-area {
  height: 160px;
  position: relative;
  background: var(--ds-background-neutral);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius);
  overflow: hidden;
}

.chart-panel {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.chart-panel svg {
  display: block;
  width: 100%;
  height: 160px;
}

.chart-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--ds-text-subtlest);
  font-size: 13px;
}

/* ===========================
   Chart Tooltip (Phase 10)
   =========================== */
#chart-tooltip {
  position: fixed;
  display: none;
  background: var(--ds-surface);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius);
  padding: 4px 8px;
  font-size: 11px;
  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
  color: var(--ds-text);
  white-space: normal;
  max-width: 240px;
  line-height: 1.4;
  pointer-events: none;
  z-index: 1000;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

/* ===========================
   Visor List View (Phase 12)
   =========================== */

.navbar-tabs {
  display: flex;
  gap: 0;
}

.navbar-tab {
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 0 var(--ds-space-200);
  height: 56px;
  cursor: pointer;
  font-family: var(--ds-font-family-body);
  font-size: 14px;
  font-weight: 600;
  color: rgba(255,255,255,0.65);
  transition: color 0.15s, border-color 0.15s;
}

.navbar-tab:hover {
  color: rgba(255,255,255,0.9);
}

.navbar-tab--active {
  color: #fff;
  border-bottom-color: #F98727;
}

.visor-layout {
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--ds-space-300);
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-200);
}

.visor-filters {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--ds-space-100);
  align-items: center;
  padding: var(--ds-space-150);
  background: var(--ds-surface);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-medium);
  overflow-x: auto;
}

.visor-filter-input {
  font-family: var(--ds-font-family-body);
  font-size: 13px;
  color: var(--ds-text);
  background: var(--ds-background-neutral);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius);
  padding: var(--ds-space-050) var(--ds-space-150);
  outline: none;
  transition: border-color 0.15s;
  flex-shrink: 0;
}

.visor-filter-input:focus {
  border-color: var(--ds-border-focused);
  box-shadow: 0 0 0 2px rgba(76, 154, 255, 0.2);
}

#visor-search { flex: 1 1 auto; min-width: 120px; flex-shrink: 1; }
#visor-source { width: 170px; }

.visor-filter-input--date { width: 130px; }

.visor-filter-input--select { width: 150px; }

.visor-list {
  background: var(--ds-surface);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-medium);
  overflow: hidden;
}

.visor-item {
  padding: var(--ds-space-100) var(--ds-space-150);
  border-bottom: 1px solid var(--ds-border);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-050);
  transition: background-color 0.1s ease;
  border-left: 3px solid transparent;
  outline: none;
}

.visor-item:hover,
.visor-item:focus-visible {
  background: var(--ds-background-neutral);
  border-left-color: var(--ds-interactive);
}

.visor-item:last-child { border-bottom: none; }

.visor-item__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--ds-space-100);
}

.visor-item__filename {
  font-size: 14px;
  font-weight: 600;
  color: var(--ds-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 60%;
}

.visor-item__date {
  font-size: 12px;
  color: var(--ds-text-subtlest);
  white-space: nowrap;
  flex-shrink: 0;
}

.visor-item__duration {
  font-family: 'SFMono-Regular', Consolas, monospace;
  font-size: 11px;
  color: var(--ds-text-subtlest);
}

.visor-item__speakers {
  display: flex;
  gap: var(--ds-space-050);
  flex-wrap: wrap;
}

.visor-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: var(--ds-text-subtlest);
  padding: 0 var(--ds-space-050);
}

.visor-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--ds-space-100);
  padding: var(--ds-space-100) 0;
}

.visor-pagination__label {
  font-size: 12px;
  color: var(--ds-text-subtlest);
  min-width: 80px;
  text-align: center;
}

.visor-page-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

.visor-loading {
  padding: var(--ds-space-500) 0;
  text-align: center;
  color: var(--ds-text-subtlest);
  font-size: 13px;
}

/* ===== Visor Detail (Phase 13) ===== */

#visor-detail {
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-200);
  padding: var(--ds-space-300);
}

.visor-detail__header {
  display: flex;
  align-items: center;
  gap: var(--ds-space-200);
  flex-wrap: wrap;
  background: var(--ds-surface);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-medium);
  padding: var(--ds-space-150) var(--ds-space-200);
}

.visor-detail__meta {
  font-size: 12px;
  color: var(--ds-text-subtlest);
  display: flex;
  gap: var(--ds-space-150);
  flex-wrap: wrap;
  align-items: center;
}

.visor-detail__meta span + span::before {
  content: '·';
  margin-right: var(--ds-space-150);
  color: var(--ds-border);
}

.visor-detail__charts {
  background: var(--ds-surface);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-medium);
  padding: var(--ds-space-200);
}

.visor-detail__segments {
  display: flex;
  flex-direction: column;
  background: var(--ds-surface);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-medium);
  overflow: hidden;
}

/* ===========================
   Login page (login.html) — diseño 3 columnas estilo hub-hycamp
   =========================== */

/* Layout raíz */
.lp-layout {
  display:    flex;
  min-height: 100vh;
  font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* Franjas laterales — lavanda suave */
.lp-side {
  display:        none;
  flex-direction: column;
  width:          25%;
  overflow:       hidden;
  background:     hsl(271, 30%, 97%);
}

@media (min-width: 1024px) {
  .lp-side { display: flex; }
}

.lp-side--left {
  padding:         32px;
  justify-content: space-between;
}

.lp-side--right {
  align-items:     center;
  justify-content: flex-end;
}

.lp-logo {
  height:     32px;
  width:      auto;
  object-fit: contain;
}

.lp-hand {
  max-width: 100%;
  height:    auto;
  display:   block;
}

/* Centro — gradiente púrpura oscuro */
.lp-center {
  flex:            1;
  display:         flex;
  align-items:     center;
  justify-content: center;
  padding:         40px 24px;
  background:      linear-gradient(160deg, hsl(271, 52%, 14%) 0%, hsl(271, 52%, 24%) 100%);
}

.lp-center__content {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            32px;
  width:          100%;
  max-width:      320px;
  text-align:     center;
}

/* Hero text */
.lp-hero__title {
  font-size:   24px;
  font-weight: 600;
  color:       #ffffff;
  margin:      0 0 8px 0;
  line-height: 1.3;
}

.lp-hero__sub {
  font-size: 14px;
  color:     rgba(255, 255, 255, 0.6);
  margin:    0;
}

/* Botón Microsoft */
.lp-btn {
  display:         flex;
  align-items:     center;
  justify-content: center;
  gap:             8px;
  width:           100%;
  height:          44px;
  background:      #ffffff;
  color:           #0f172a;
  border:          none;
  border-radius:   6px;
  font-size:       14px;
  font-weight:     500;
  cursor:          pointer;
  transition:      background 0.15s;
}

.lp-btn:hover  { background: rgba(255, 255, 255, 0.92); }
.lp-btn:active { background: rgba(255, 255, 255, 0.82); }

.lp-btn__icon {
  width:      16px;
  height:     16px;
  flex-shrink: 0;
}

/* Estados */
.lp-loading {
  font-size: 14px;
  color:     rgba(255, 255, 255, 0.5);
  margin:    0;
}

.lp-error {
  font-size:  13px;
  color:      #f87171;
  margin:     0;
  background: rgba(248, 113, 113, 0.1);
  padding:    10px 16px;
  border-radius: 4px;
  width: 100%;
}

/* ===========================
   Navbar user display + logout
   =========================== */
.navbar-user {
  display:     flex;
  align-items: center;
  gap:         8px;
  font-size:   13px;
  color:       rgba(255, 255, 255, 0.85);
  white-space: nowrap;
}

.navbar-user__avatar {
  width:           30px;
  height:          30px;
  border-radius:   50%;
  overflow:        hidden;
  flex-shrink:     0;
  background:      rgba(255, 255, 255, 0.25);
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-size:       11px;
  font-weight:     700;
  color:           rgba(255, 255, 255, 0.9);
  letter-spacing:  0.5px;
}

.navbar-user__avatar img {
  width:      100%;
  height:     100%;
  object-fit: cover;
  display:    block;
}

.navbar-user__name {
  max-width:     140px;
  overflow:      hidden;
  text-overflow: ellipsis;
}

.navbar-user__logout {
  background:    transparent;
  border:        1px solid rgba(255, 255, 255, 0.3);
  border-radius: 12px;
  padding:       3px 10px;
  cursor:        pointer;
  font-size:     12px;
  font-weight:   500;
  color:         rgba(255, 255, 255, 0.85);
  transition:    background 0.15s, border-color 0.15s;
}

.navbar-user__logout:hover {
  background:   rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.5);
}