:root {
  --grad: linear-gradient(135deg, #14B8A6 0%, #6366F1 100%);
  --teal: #14B8A6;
  --indigo: #6366F1;
  --ink: #10172A;
  --text: #10172A;
  --grey: #6B7280;
  --grey-light: #9CA3AF;
  --line: #E5E7EB;
  --bg: #F7F8FC;
  --card-bg: #FFFFFF;
  --danger: #DC2626;
  --danger-bg: #FEF2F2;
  --success: #059669;
  --success-bg: #ECFDF5;
  --warn: #D97706;
  --warn-bg: #FFFBEB;

  /* Nexus UI Variables mapped to current theme */
  --nx-font-family: 'Inter', sans-serif;
  --nx-color-navy: var(--ink);
  --nx-color-navy-90: var(--bg);
  --nx-color-white: #FFFFFF;
  --nx-color-green: var(--teal);
  --nx-alpha-navy-10: rgba(16, 23, 42, 0.1);
  --nx-alpha-navy-12: rgba(16, 23, 42, 0.12);
  --nx-alpha-navy-20: rgba(16, 23, 42, 0.2);
  --nx-alpha-green-10: rgba(20, 184, 166, 0.1);
  --nx-alpha-green-12: rgba(20, 184, 166, 0.12);
  --nx-alpha-green-20: rgba(20, 184, 166, 0.2);
  --nx-space-2: 8px;
  --nx-space-3: 12px;
  --nx-space-4: 16px;
  --nx-space-6: 24px;
  --nx-radius-sm: 4px;
  --nx-radius-md: 8px;
  --nx-radius-full: 9999px;
  --nx-font-size-sm: 13px;
  --nx-font-size-lg: 18px;
  --nx-font-weight-medium: 500;
  --nx-font-weight-semibold: 600;
  --nx-font-weight-bold: 700;
  --nx-transition-fast: 0.15s ease;
  --nx-transition-slow: 0.3s ease;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', sans-serif;
  min-height: 100vh;
  position: relative;
}
.glow {
  position: fixed;
  top: -120px; right: -120px;
  width: 420px; height: 420px;
  border-radius: 50%;
  background: var(--grad);
  filter: blur(110px);
  opacity: 0.22;
  z-index: 0;
  pointer-events: none;
}
header.topbar, main, .login-wrap {
  position: relative;
  z-index: 1;
}
a { color: var(--indigo); }

header.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 24px;
  border-bottom: 1px solid var(--line);
  background: rgba(255,255,255,0.9);
  backdrop-filter: blur(6px);
}
header.topbar .brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 800;
  font-size: 15px;
  color: var(--ink);
  text-decoration: none;
}
header.topbar nav a { margin-right: 18px; font-size: 13px; text-decoration: none; color: var(--grey); font-weight: 600; }
header.topbar nav a:hover, header.topbar nav a.active { color: var(--indigo); }
header.topbar form { display: inline; }
header.topbar button.logout {
  background: none; border: 1px solid var(--line); color: var(--grey);
  padding: 6px 12px; border-radius: 7px; font-family: inherit; font-size: 12px; cursor: pointer; font-weight: 600;
}
header.topbar button.logout:hover { border-color: var(--indigo); color: var(--indigo); }

main { max-width: 1080px; margin: 32px auto; padding: 0 16px 80px; }

.login-wrap {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
}
.login-box {
  border: 1px solid var(--line); background: var(--card-bg);
  border-radius: 16px; padding: 40px; width: 100%; max-width: 380px;
  box-shadow: 0 20px 50px rgba(16,23,42,0.08);
}
.login-logo { display: flex; width: 100%; justify-content: center; margin-bottom: 16px; }
.tag-label {
  font-family: 'Inter', sans-serif; font-size: 11px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--indigo); font-weight: 700; margin: 0 0 10px;
}
.btn-outline {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 12px 22px; border: none; border-radius: 9px;
  background: var(--grad); color: #fff;
  font-family: 'Inter', sans-serif; font-weight: 700; font-size: 14px; cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s;
  box-shadow: 0 8px 20px rgba(99,102,241,0.25);
}
  box-shadow: 0 8px 20px rgba(99,102,241,0.25);
}
.btn-outline:hover { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(99,102,241,0.35); }

.btn-danger {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 6px 12px; border: none; border-radius: 6px;
  background: var(--danger-bg); color: var(--danger); border: 1px solid #FCA5A5;
  font-family: inherit; font-weight: 600; font-size: 11px; cursor: pointer;
  transition: all 0.15s;
}
.btn-danger:hover { background: var(--danger); color: #fff; }

.page-title {
  font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; font-size: 22px; color: var(--ink);
  margin: 0 0 8px;
}
.login-box h1 { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; font-size: 22px; text-align: center; margin: 0 0 8px; color: var(--ink); }

.meta-bar { display: flex; gap: 10px; flex-wrap: wrap; margin: 14px 0 20px; }
.pill {
  border: 1px solid var(--line); background: var(--card-bg);
  padding: 7px 12px; border-radius: 20px; font-size: 12px; color: var(--grey);
}
.pill b { color: var(--indigo); }

.login-box label { display: block; font-size: 12px; color: var(--grey); margin-bottom: 6px; font-weight: 600; }
.login-box input {
  width: 100%; padding: 11px 13px; margin-bottom: 18px; background: #fff;
  border: 1px solid var(--line); border-radius: 8px; color: var(--text); font-family: inherit; font-size: 14px;
}
.login-box input:focus { outline: none; border-color: var(--indigo); box-shadow: 0 0 0 3px rgba(99,102,241,0.12); }
.login-box button { width: 100%; text-align: center; }
.login-error {
  background: var(--danger-bg); border: 1px solid #FCA5A5; color: var(--danger);
  padding: 10px 14px; border-radius: 8px; font-size: 13px; margin-bottom: 18px;
}

.badge {
  font-size: 10px; padding: 4px 10px; border-radius: 12px; letter-spacing: 0.3px;
  text-transform: uppercase; border: 1px solid var(--line); color: var(--grey); font-weight: 700;
}
.badge.time { border-color: #FDE68A; color: var(--warn); background: var(--warn-bg); }
.badge.done { border-color: #A7F3D0; color: var(--success); background: var(--success-bg); }
.badge.progress { border-color: #FDE68A; color: var(--warn); background: var(--warn-bg); }
.badge.blocked { border-color: #FCA5A5; color: var(--danger); background: var(--danger-bg); }
.badge.type-interno { border-color: var(--line); color: var(--grey); }

main form label, .modal-box form label { display: block; font-size: 13px; color: var(--grey); margin: 16px 0 8px; font-weight: 600; }
main form input[type=text], main form input[type=number], main form input[type=month], main form input[type=password], main form input[type=email], main form select, main form textarea,
.modal-box form input[type=text], .modal-box form input[type=number], .modal-box form input[type=password], .modal-box form input[type=email], .modal-box form select, .modal-box form textarea {
  width: 100%; padding: 12px 14px; background: #fff;
  border: 1px solid var(--line); border-radius: 8px; color: var(--text); font-family: inherit; font-size: 14px;
}
.logout {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  width: 100%; padding: 12px 14px; background: #fff;
  border: 1px solid var(--line); border-radius: 8px; color: var(--text); font-family: inherit; font-size: 14px;
  cursor: pointer;
}
main form input:focus, main form select:focus, main form textarea:focus,
.modal-box form input:focus, .modal-box form select:focus, .modal-box form textarea:focus { outline: none; border-color: var(--indigo); box-shadow: 0 0 0 3px rgba(99,102,241,0.12); }
main form .btn-outline, .modal-box form .btn-outline { padding: 10px 20px; font-size: 13px; }

.radio-card-group { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; margin-top: 4px; }
.radio-card input { display: none; }
.radio-card-content {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px; border: 1px solid var(--line); border-radius: 8px;
  cursor: pointer; transition: all 0.2s; background: #fff;
  font-size: 13px; font-weight: 600; color: var(--text);
}
.radio-card-content img { width: 16px; height: 16px; }
.radio-card input:checked + .radio-card-content {
  border-color: var(--indigo);
  background: rgba(99,102,241,0.05);
  box-shadow: 0 0 0 1px var(--indigo);
}
.radio-card:hover .radio-card-content { border-color: var(--indigo); }

.field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; }
.field-grid .field--full { grid-column: 1 / -1; }
.field-grid .field-row { grid-column: 1 / -1; display: grid; grid-template-columns: 2fr 1fr; column-gap: 24px; }
.field-grid .field-row--even { grid-template-columns: 1fr 1fr; }
@media (max-width: 720px) {
  .field-grid, .field-grid .field-row, .field-grid .field-row--even { grid-template-columns: 1fr; }
}

.modal-backdrop {
  position: fixed; inset: 0; z-index: 50; background: rgba(16,23,42,0.45);
  display: flex; align-items: center; justify-content: center; padding: 16px;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}
.modal-backdrop.open { opacity: 1; visibility: visible; pointer-events: auto; }
.modal-box {
  border: 1px solid var(--line); background: #fff; border-radius: 14px;
  padding: 24px; width: 100%; max-width: 440px; max-height: 90vh; overflow-y: auto;
  transform: scale(0.94); transition: transform 0.2s ease;
  box-shadow: 0 24px 60px rgba(16,23,42,0.2);
}
.modal-backdrop.open .modal-box { transform: scale(1); }
.modal-close {
  background: none; border: none; color: var(--grey); font-size: 22px; line-height: 1;
  cursor: pointer; padding: 0 4px;
}
.modal-close:hover { color: var(--danger); }

.data-table {
  width: 100%; border-collapse: collapse; margin-top: 8px; font-size: 13px;
  background: var(--card-bg); border: 1px solid var(--line); border-radius: 12px; overflow: hidden;
}
.data-table th {
  text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--grey); padding: 12px; border-bottom: 1px solid var(--line); background: #FAFBFF;
}
.data-table td {
  padding: 12px; border-bottom: 1px solid var(--line); color: var(--text); vertical-align: middle;
}
.data-table tr:last-child td { border-bottom: none; }
.data-table tr:hover td { background: #FAFBFF; }
.data-table code {
  background: #F1F2F8; padding: 2px 6px; border-radius: 4px; font-size: 12px;
}

.status-select {
  background: #fff; border: 1px solid var(--line); color: var(--grey);
  border-radius: 6px; padding: 3px 6px; font-family: inherit; font-size: 11px; cursor: pointer;
}

.data-table button.logout { font-size: 11px; padding: 4px 10px; width: auto; }
.btn-outline svg, .btn-danger svg, .logout svg { width: 1.2em; height: 1.2em; }
.data-table button.badge { font-family: inherit; cursor: pointer; }

/* Loader Animation */
.dots-loader { display: flex; gap: 6px; }
.dots-loader span {
  width: 8px; height: 8px; background: var(--indigo); border-radius: 50%;
  animation: bounce 1.4s infinite ease-in-out both;
}
.dots-loader span:nth-child(1) { animation-delay: -0.32s; }
.dots-loader span:nth-child(2) { animation-delay: -0.16s; }
@keyframes bounce {
  0%, 80%, 100% { transform: scale(0); }
  40% { transform: scale(1); }
}

/* Custom Dropdown / Select */
.custom-select-wrapper { position: relative; width: 100%; max-width: 100%; margin-bottom: 16px; margin-top: 8px; }
.custom-select-trigger { 
  display: flex; justify-content: space-between; align-items: center; 
  width: 100%; padding: 12px 14px; background: #fff; border: 1px solid var(--line); border-radius: 8px; cursor: pointer;
  font-family: inherit; font-size: 14px; color: var(--text);
  box-shadow: 0 1px 2px rgba(16,23,42,0.05);
}
.custom-select-trigger .cs-content { display: flex; align-items: center; gap: 8px; font-weight: 500; }
.custom-select-trigger img, .cs-option img { width: 18px; height: 18px; display: block; }
.custom-select-options {
  position: absolute; top: 100%; left: 0; right: 0; margin-top: 4px;
  background: #fff; border: 1px solid var(--line); border-radius: 8px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.1); z-index: 100;
  display: none; max-height: 200px; overflow-y: auto;
}
.custom-select-wrapper.open .custom-select-options { display: block; }
.custom-select-wrapper.open .custom-select-trigger { border-color: var(--indigo); box-shadow: 0 0 0 3px rgba(99,102,241,0.12); }
.cs-option {
  display: flex; align-items: center; gap: 8px; padding: 10px 14px; cursor: pointer;
  font-size: 14px; color: var(--text); transition: background 0.1s; font-weight: 500;
}
.cs-option:hover { background: #f8fafc; }

/* ── NX LAYOUT & SIDEBAR ──────────────────────────────────────── */

.nx-layout {
  display: flex;
  width: 100%;
  height: 100vh;
  font-family: var(--nx-font-family);
  background-color: var(--nx-color-navy-90);
  color: var(--text);
}

.nx-layout__sidebar {
  display: flex;
  flex-shrink: 0;
  height: 100vh;
  position: sticky;
  top: 0;
  z-index: 100;
}

.nx-layout__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

.nx-layout__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 64px;
  padding: 0 var(--nx-space-6);
  background-color: rgba(255,255,255,0.9);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 90;
}

.nx-layout__main {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: var(--nx-space-6);
  max-width: none;
  margin: 0;
}

.nx-sidebar {
  display: flex;
  flex-direction: column;
  width: 260px;
  height: 100%;
  background-color: var(--nx-color-navy);
  border-right: 1px solid var(--nx-alpha-navy-12);
  overflow: visible;
  position: relative;
  z-index: 100;
  transition: width var(--nx-transition-slow);
}

.nx-sidebar--collapsed .nx-sidebar {
  width: 64px;
}

.nx-sidebar__logo {
  display: flex;
  align-items: center;
  min-height: 64px;
  padding: var(--nx-space-4);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  overflow: hidden;
  white-space: nowrap;
  color: var(--nx-color-white);
  font-weight: var(--nx-font-weight-bold);
  font-size: var(--nx-font-size-lg);
  font-family: 'Plus Jakarta Sans', sans-serif;
  text-decoration: none;
}

.nx-sidebar--collapsed .nx-sidebar__logo {
  justify-content: center;
}

.nx-sidebar__logo span {
  transition: opacity var(--nx-transition-fast);
}

.nx-sidebar--collapsed .nx-sidebar__logo span {
  opacity: 0;
  display: none;
}

.nx-sidebar__toggle {
  position: absolute;
  top: 64px;
  right: -13px;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border: none;
  border-radius: var(--nx-radius-sm);
  background: var(--teal);
  color: #ffffff;
  cursor: pointer;
  transition: background var(--nx-transition-fast), border-color var(--nx-transition-fast);
  z-index: 20;
}

.nx-sidebar__toggle:hover {
  background: var(--indigo);
}

.nx-sidebar__toggle-icon {
  transition: transform var(--nx-transition-slow);
}

.nx-sidebar__toggle-icon--rotated {
  transform: rotate(180deg);
}

.nx-sidebar__nav {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: var(--nx-space-2) 0;
}

.nx-sidebar__nav a {
  display: flex;
  align-items: center;
  gap: var(--nx-space-3);
  padding: 0.65rem var(--nx-space-4);
  margin: 2px var(--nx-space-2);
  width: calc(100% - var(--nx-space-4));
  border-radius: var(--nx-radius-md);
  font-size: var(--nx-font-size-sm);
  font-weight: var(--nx-font-weight-medium);
  color: rgba(255, 255, 255, 0.6);
  text-decoration: none;
  background: transparent;
  border: none;
  cursor: pointer;
  transition: background var(--nx-transition-fast), color var(--nx-transition-fast), border-color var(--nx-transition-fast);
  white-space: nowrap;
  overflow: hidden;
  border-left: 3px solid transparent;
  box-sizing: border-box;
}

.nx-sidebar__nav a:hover {
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.9);
}

.nx-sidebar__nav a.active {
  background: var(--nx-alpha-green-10);
  color: var(--nx-color-white);
  border-left-color: var(--nx-color-green);
  font-weight: var(--nx-font-weight-semibold);
}

.nx-sidebar--collapsed .nx-sidebar__nav a span {
  display: none;
}

.nx-sidebar__footer {
  padding: var(--nx-space-3) var(--nx-space-4);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  overflow: hidden;
  white-space: nowrap;
}

.nx-sidebar__footer a {
  color: rgba(255, 255, 255, 0.6);
  text-decoration: none;
  font-size: var(--nx-font-size-sm);
  display: flex;
  align-items: center;
  gap: var(--nx-space-3);
}

.nx-sidebar__footer a:hover {
  color: var(--nx-color-white);
}

.nx-sidebar--collapsed .nx-sidebar__footer span {
  display: none;
}

/* --- Iconos del sidebar: SIEMPRE 20px, nunca se encogen (flex) --- */
.nx-sidebar__nav a svg,
.nx-sidebar__logout svg {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
}

/* --- Botón de cerrar sesión: icono siempre visible, mismo estilo que el nav --- */
.nx-sidebar__logout {
  display: flex;
  align-items: center;
  gap: var(--nx-space-3);
  width: calc(100% - var(--nx-space-4));
  margin: 2px var(--nx-space-2);
  padding: 0.65rem var(--nx-space-4);
  border: none;
  background: transparent;
  color: rgba(255, 255, 255, 0.75);
  font-size: var(--nx-font-size-sm);
  font-weight: var(--nx-font-weight-medium);
  font-family: inherit;
  border-radius: var(--nx-radius-md);
  cursor: pointer;
  white-space: nowrap;
  box-sizing: border-box;
}

.nx-sidebar__logout:hover {
  background: rgba(255, 255, 255, 0.06);
  color: #ffffff;
}

/* --- Colapsado: SOLO iconos, centrados y a tamaño completo (no se achican) --- */
.nx-sidebar--collapsed .nx-sidebar__nav a,
.nx-sidebar--collapsed .nx-sidebar__logout {
  justify-content: center;
  gap: 0;
  padding-left: 0;
  padding-right: 0;
}

.nx-sidebar--collapsed .nx-sidebar__footer {
  padding-left: 0;
  padding-right: 0;
}

/* --- Selector de idioma: pill con icono de globo + select --- */
.lang-switch {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border: 1px solid var(--line);
  border-radius: var(--nx-radius-full);
  background: var(--bg);
  color: var(--grey);
}

.lang-switch:hover {
  border-color: var(--indigo);
  color: var(--indigo);
}

.lang-switch select {
  background: transparent;
  border: none;
  outline: none;
  font-weight: 600;
  font-size: 13px;
  color: var(--grey);
  cursor: pointer;
  font-family: inherit;
}


/* --- Botones de proveedor de calendario (con logo oficial) --- */
.provider-buttons { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 16px; }
.provider-btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 10px 16px; border: 1px solid var(--line); border-radius: 8px;
  background: #fff; color: var(--ink); font-size: 13px; font-weight: 600;
  text-decoration: none; cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.provider-btn:hover { border-color: var(--indigo); box-shadow: 0 0 0 3px rgba(99,102,241,0.10); }
.provider-btn svg { flex-shrink: 0; }
.provider-btn--disabled {
  opacity: 0.55; cursor: not-allowed; background: var(--bg);
}
.provider-btn--disabled:hover { border-color: var(--line); box-shadow: none; }
.provider-btn .soon-badge {
  font-size: 10px; font-weight: 700; letter-spacing: 0.3px; text-transform: uppercase;
  background: var(--line); color: var(--grey); padding: 2px 7px; border-radius: 999px;
}

/* --- Tarjeta de cuenta de Google vinculada (bot-account) --- */
.account-card {
  display: flex; align-items: center; gap: 16px;
  background: #fff; border: 1px solid var(--line); border-radius: 12px;
  padding: 16px 18px; max-width: 560px; margin-top: 18px;
  box-shadow: 0 1px 3px rgba(16, 23, 42, 0.04);
}
.account-card__logo {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 10px;
  background: var(--bg); border: 1px solid var(--line); flex-shrink: 0;
}
.account-card__body { flex: 1; min-width: 0; }
.account-card__title {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700;
  font-size: 15px; color: var(--ink);
}
.account-card__meta { color: var(--grey); font-size: 12px; margin-top: 5px; }
.btn-unlink {
  padding: 9px 15px; border: 1px solid var(--line); border-radius: 8px;
  background: #fff; color: var(--grey); font-family: inherit; font-weight: 600;
  font-size: 13px; cursor: pointer; white-space: nowrap;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}
.btn-unlink:hover { border-color: #FCA5A5; color: var(--danger); background: var(--danger-bg); }
@media (max-width: 520px) {
  .account-card { flex-wrap: wrap; }
  .account-card__body { flex-basis: calc(100% - 60px); }
  .account-card form { width: 100%; }
  .btn-unlink { width: 100%; }
}

/* --- Tarjeta del resumen de la reunión (bot-detail) --- */
.summary-card {
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 32px 36px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--grey-dark, #334155);
  max-width: 100%;
  margin-top: 12px;
  box-shadow: 0 12px 32px -8px rgba(99,102,241,0.08), 0 4px 6px -2px rgba(99,102,241,0.04);
  position: relative;
  overflow: hidden;
}
.summary-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, #6366f1, #a855f7, #ec4899);
}
.summary-card p { margin: 0 0 16px; }
.summary-card p:last-child { margin-bottom: 0; }
.summary-card strong { font-weight: 700; color: var(--ink); }
.summary-card h1, .summary-card h2, .summary-card h3, .summary-card h4 {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 700;
  color: var(--ink);
  margin: 32px 0 12px;
  line-height: 1.3;
}
.summary-card h1 { font-size: 22px; }
.summary-card h2 { font-size: 18px; border-bottom: 1px solid var(--line); padding-bottom: 6px; }
.summary-card h3 { font-size: 15px; }
.summary-card h4 { font-size: 14px; color: var(--grey); }

.summary-card h1:first-child, .summary-card h2:first-child,
.summary-card h3:first-child, .summary-card h4:first-child {
  margin-top: 0;
}
.summary-card ul, .summary-card ol {
  margin: 0 0 16px;
  padding-left: 0;
  list-style: none;
}
.summary-card ul li {
  position: relative;
  padding-left: 22px;
  margin-bottom: 8px;
}
.summary-card ul li::before {
  content: "";
  position: absolute;
  left: 4px; top: 8px;
  width: 6px; height: 6px;
  border-radius: 2px;
  background-color: var(--indigo);
  opacity: 0.8;
}
.summary-card ol { counter-reset: custom-counter; }
.summary-card ol li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 8px;
  counter-increment: custom-counter;
}
.summary-card ol li::before {
  content: counter(custom-counter) ".";
  position: absolute;
  left: 0; top: 0;
  font-weight: 700;
  color: var(--indigo);
  font-size: 13px;
}
.summary-card li:last-child { margin-bottom: 0; }
.summary-card ul ul, .summary-card ul ol, .summary-card ol ul { margin: 8px 0 8px; }
.summary-card em { color: var(--grey); font-style: italic; }
.summary-card code {
  background: var(--panel, #f4f6fb);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 13px;
  font-family: monospace;
  color: #ec4899;
}
.summary-card table {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  margin: 16px 0;
  font-size: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
}
.summary-card th, .summary-card td {
  border-bottom: 1px solid var(--line);
  border-right: 1px solid var(--line);
  padding: 10px 14px;
  text-align: left;
  vertical-align: top;
}
.summary-card th:last-child, .summary-card td:last-child { border-right: none; }
.summary-card tr:last-child td { border-bottom: none; }
.summary-card th {
  background: #f8fafc;
  font-weight: 700;
  color: var(--ink);
}
.summary-card blockquote {
  margin: 0 0 16px;
  padding: 12px 18px;
  background: #eef2ff;
  border-left: 4px solid var(--indigo);
  border-radius: 0 6px 6px 0;
  color: #4338ca;
  font-style: normal;
}
.summary-card blockquote p { margin-bottom: 0; }

/* Fase A del dashboard (2026-08-21): tarjetas de stats, barra de
   participacion, pestanas Resumen/Transcripcion/Coaching -- solo se
   renderizan cuando el pipeline dejo un {prefijo}.transcript.json (ver
   dashboard.js#loadTranscriptData), asi que reuniones grabadas antes de
   esta fase siguen viendose igual que hoy, sin estos bloques. */
.detail-top-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: start;
  margin-top: 18px;
  width: 100%;
}
@media (max-width: 720px) {
  .detail-top-row { grid-template-columns: 1fr; }
}
.detail-top-row__video {
  min-width: 0;
}
.detail-video {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: #000;
  object-fit: cover;
}
.detail-video--empty {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--grey);
  font-size: 12.5px;
}
.detail-video__caption {
  font-size: 11.5px;
  color: var(--grey);
  margin-top: 6px;
}
.detail-top-row__stats {
  min-width: 0;
}

.meta-info-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 16px 0 0;
}
.pill--link {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
}
.pill--link:hover {
  border-color: var(--indigo);
  color: var(--indigo);
}
.pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.alert-danger {
  margin-top: 12px;
  max-width: 920px;
  background: var(--danger-bg);
  border: 1px solid #fca5a5;
  color: var(--danger);
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 12.5px;
  white-space: pre-wrap;
}

/* 2026-08-21: el badge de URL es solo informativo -- clic muestra un popover
   con el link completo (seleccionable/copiable) en vez de navegar de una,
   que era una sorpresa desagradable (perder la pagina) para algo que solo
   se queria consultar. */
.pill-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
}
.url-popover-wrap {
  position: relative;
}
.url-popover {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 50;
  background: var(--card-bg);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 12px;
  box-shadow: 0 8px 24px rgba(16, 23, 42, 0.12);
  display: flex;
  align-items: center;
  gap: 12px;
  white-space: nowrap;
}
.url-popover[hidden] { display: none; }
.url-popover__text {
  font-size: 12px;
  color: var(--ink);
  font-family: ui-monospace, monospace;
  user-select: all;
}
.url-popover__open {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--indigo);
  text-decoration: none;
  flex-shrink: 0;
}
.url-popover__open:hover { text-decoration: underline; }
.stat-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin: 0 0 14px;
}
.stat-tile {
  flex: 1;
  min-width: 160px;
  background: var(--card-bg);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px 16px;
}
.stat-label {
  font-size: 10.5px;
  color: var(--grey);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.stat-value {
  font-size: 20px;
  font-weight: 700;
  color: var(--ink);
  margin-top: 3px;
}

.meeting-bar-label {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--grey);
  margin: 4px 0 5px;
}
.meeting-bar {
  display: flex;
  width: 100%;
  height: 12px;
  border-radius: 99px;
  overflow: hidden;
  background: var(--line);
}
.meeting-bar__seg { height: 100%; }
.legend-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin: 8px 0 4px;
}
.legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
}
.legend-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
}
.balance-warn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--warn);
  background: var(--warn-bg);
  border: 1px solid #fde68a;
  border-radius: 6px;
  padding: 4px 9px;
  margin-top: 4px;
}

.detail-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--line);
  margin: 26px 0 18px;
}
.detail-tab {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 9px 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--grey);
  cursor: pointer;
  font-family: inherit;
}
.detail-tab.active {
  color: var(--indigo);
  border-bottom-color: var(--indigo);
}

.transcript-split {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
.speaker-rail {
  width: 210px;
  flex-shrink: 0;
  background: var(--card-bg);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px;
}
.speaker-rail h4 {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--grey);
  margin: 0 0 8px;
}
.speaker-chip {
  display: flex;
  align-items: center;
  gap: 7px;
  width: 100%;
  background: none;
  border: none;
  border-radius: 8px;
  padding: 7px 8px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  margin-bottom: 2px;
}
.speaker-chip.selected,
.speaker-chip.active {
  background: rgba(99, 102, 241, 0.08);
  color: var(--indigo);
}
.speaker-chip__pct {
  margin-left: auto;
  color: var(--grey-light);
  font-weight: 600;
  font-size: 11px;
}

.transcript-card {
  flex: 1;
  min-width: 0;
  background: var(--card-bg);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 4px 18px;
}
.transcript-line {
  display: flex;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}
.transcript-line:last-child { border-bottom: none; }
.transcript-line.dim { opacity: 0.35; }
.transcript-line__ts {
  font-size: 11px;
  color: var(--grey-light);
  width: 40px;
  flex-shrink: 0;
  padding-top: 2px;
  font-variant-numeric: tabular-nums;
}
.transcript-line__speaker {
  font-size: 12px;
  font-weight: 700;
  color: var(--indigo);
  margin-bottom: 2px;
}
.transcript-line__text {
  font-size: 13.5px;
  color: var(--ink);
  line-height: 1.55;
}

.coach-note {
  font-size: 11.5px;
  color: var(--grey);
  margin-bottom: 12px;
}
.coach-narrative {
  margin-top: 20px;
}
.coach-card {
  background: var(--card-bg);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 18px 20px;
}
.coach-card--wide {
  margin-bottom: 18px;
}
.coach-card h4 {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 10px;
}
.coach-metric {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 6px 0;
  border-top: 1px solid var(--line);
}
.coach-metric:first-of-type { border-top: none; }
.coach-metric__label {
  font-size: 12px;
  color: var(--grey);
}
.coach-metric__value {
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
}
.coach-metric__value small {
  font-size: 11px;
  font-weight: 600;
  color: var(--grey-light);
}

/* Medidor de Ritmo de Habla + acordeon de metricas (2026-08-21) */
.coach-gauge {
  text-align: center;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 6px;
}
.coach-gauge__label {
  font-size: 11px;
  color: var(--grey);
  text-align: left;
  margin-bottom: 6px;
}
.coach-gauge__svg {
  width: 100%;
  max-width: 220px;
  height: auto;
  display: block;
  margin: 0 auto;
}
.coach-gauge__value {
  font-size: 26px;
  font-weight: 800;
  margin-top: 6px;
  line-height: 1.2;
}
.coach-gauge__unit {
  font-size: 11px;
  font-weight: 600;
  color: var(--grey-light);
  margin-top: 1px;
}
.coach-gauge__range {
  font-size: 11px;
  color: var(--grey);
  margin-top: 8px;
}

/* Variante en linea (2026-08-21): gauge chico a la izquierda + numero a la
   derecha, para el ritmo general y dentro de cada fila de participante --
   la version apilada/centrada original queda sin usar pero no se borra. */
.coach-general-row {
  display: flex;
  align-items: center;
  gap: 32px;
  flex-wrap: wrap;
}
.coach-narrative-inline {
  flex: 1;
  min-width: 260px;
  font-size: 13.5px;
  color: var(--ink);
  line-height: 1.6;
  padding-left: 24px;
  border-left: 1px solid var(--line);
}
.coach-narrative-inline p { margin: 0 0 10px; }
.coach-narrative-inline p:last-child { margin-bottom: 0; }
.coach-narrative-inline ul { margin: 0; padding-left: 18px; }
.coach-narrative-inline li { margin-bottom: 6px; }
.coach-narrative-inline strong { color: var(--ink); font-weight: 700; }
.coach-gauge--inline {
  display: flex;
  align-items: center;
  gap: 20px;
  text-align: left;
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 0;
  flex-shrink: 0;
}
.coach-gauge--inline .coach-gauge__svg {
  max-width: 150px;
  flex-shrink: 0;
  margin: 0;
}

/* Participacion en el tiempo (2026-08-21): dato 100% real, ver
   participationSeriesSvg -- llena el espacio en blanco a la derecha del
   gauge de cada participante en vez de dejarlo vacio. */
.coach-participation {
  flex: 1;
  min-width: 220px;
  padding-left: 24px;
  border-left: 1px solid var(--line);
}
.coach-participation__label {
  font-size: 11px;
  color: var(--grey);
  margin-bottom: 4px;
}
.coach-participation__chart {
  display: flex;
  flex-direction: column;
}
.coach-participation__body {
  display: flex;
  align-items: stretch;
  gap: 6px;
}
.coach-participation__yaxis {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex-shrink: 0;
  width: 28px;
  padding: 2px 0;
  font-size: 10px;
  color: var(--grey-light);
  text-align: right;
}
.coach-participation__xaxis {
  display: flex;
  justify-content: space-between;
  margin-top: 2px;
  padding-left: calc(28px + 6px);
  font-size: 10px;
  color: var(--grey-light);
}
.coach-participation__svg {
  width: 100%;
  height: 90px;
  display: block;
}
.coach-participation__grid {
  stroke: var(--line);
  stroke-width: 1;
}
.coach-participation__point {
  fill: transparent;
  cursor: pointer;
  transition: fill 0.1s;
}
.coach-participation__point:hover {
  fill: var(--indigo);
  fill-opacity: 0.35;
}
.coach-tooltip {
  position: fixed;
  z-index: 200;
  background: var(--ink);
  color: #fff;
  font-size: 11.5px;
  font-weight: 600;
  padding: 8px 11px;
  border-radius: 8px;
  pointer-events: none;
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(16, 23, 42, 0.25);
}
.coach-tooltip[hidden] { display: none; }
.coach-tooltip__time {
  font-size: 10.5px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 4px;
}
.coach-tooltip__name {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 3px;
}
.coach-tooltip__dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.coach-tooltip__pct { color: rgba(255, 255, 255, 0.85); font-weight: 500; }
.coach-gauge--inline .coach-gauge__value { margin-top: 0; }
.coach-gauge--inline .coach-gauge__range { margin-top: 4px; }

.coach-participants {
  width: 100%;
  background: var(--card-bg);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 0 20px;
}
.coach-participant__toggle {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: none;
  border: none;
  border-top: 1px solid var(--line);
  padding: 16px 0;
  font: inherit;
  cursor: pointer;
  text-align: left;
}
.coach-participant__toggle:first-of-type { border-top: none; }
.coach-participant__name {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ink);
}
.coach-participant__summary {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--grey);
}
.coach-participant__toggle [data-lucide] {
  transition: transform 0.15s;
  color: var(--grey-light);
}
.coach-participant__toggle.open [data-lucide] {
  transform: rotate(180deg);
}
.coach-participant__panel {
  padding: 0 0 20px;
}

.coach-accordion__row {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: none;
  border: none;
  border-top: 1px solid var(--line);
  padding: 9px 0;
  font: inherit;
  font-size: 12.5px;
  color: var(--ink);
  cursor: pointer;
  text-align: left;
}
.coach-accordion__row:first-of-type { border-top: none; }
.coach-accordion__row-right {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
}
.coach-accordion__row-right small {
  font-weight: 600;
  color: var(--grey-light);
}
.coach-accordion__row [data-lucide] {
  transition: transform 0.15s;
  color: var(--grey-light);
}
.coach-accordion__row.open [data-lucide] {
  transform: rotate(180deg);
}
.coach-accordion__panel {
  padding: 0 0 10px;
  font-size: 11.5px;
  color: var(--grey);
  line-height: 1.5;
}

/* Rediseño de Calendarios (2026-08-22): lista de cuentas conectadas como
   tarjetas con avatar, en vez de la tabla plana original -- probado en 3
   prototipos con Angel, quedo esta direccion (tarjetas grandes) pero con
   los botones de proveedor SIN tocar (esos ya se veian bien como boton,
   ponerlos en tarjeta cuadrada con descripcion les quitaba la lectura de
   "esto es un boton"). */
.section-label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--grey);
  margin: 0 0 12px;
}
.cal-acct-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 640px;
}
.cal-acct-card {
  background: var(--card-bg);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.cal-acct-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--grad);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 15px;
  flex-shrink: 0;
}
.cal-acct-info { flex: 1; min-width: 0; }
.cal-acct-email {
  font-weight: 600;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.cal-acct-provider {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 600;
  color: var(--grey);
  background: var(--bg);
  border: 1px solid var(--line);
  padding: 2px 8px 2px 6px;
  border-radius: 20px;
}
.cal-acct-provider svg { flex-shrink: 0; }
.cal-acct-meta {
  font-size: 12px;
  color: var(--grey);
  margin-top: 2px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.cal-acct-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--success);
  flex-shrink: 0;
}
.cal-acct-actions { display: flex; gap: 8px; flex-shrink: 0; }

/* Select de rol en la fila de equipo (2026-08-22) -- cambia el rol de un
   miembro ya existente sin modal aparte, se auto-envia con data-autosubmit
   (mismo patron ya usado en el selector de idioma). */
.role-select {
  font-size: 12px;
  font-weight: 600;
  padding: 6px 10px;
  border-radius: 7px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--text);
  cursor: pointer;
}

/* Variante de stat-tile con icono de degradado (2026-08-22, pagina Equipo) --
   clases nuevas (__icon/__body/__value/__label), no tocan el .stat-tile
   plano que ya usa Coaching en bot-detail.ejs. Layout horizontal: icono a
   la izquierda, numero y leyenda en linea (no apilados), todo centrado
   verticalmente -- version final tras 2 rondas de feedback de Angel. */
.stat-tile { display: flex; align-items: center; gap: 14px; }
.stat-tile__icon {
  width: 42px;
  height: 42px;
  border-radius: 11px;
  background: var(--grad);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.stat-tile__icon svg { width: 20px; height: 20px; }
.stat-tile__body { display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; }
.stat-tile__value {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 800;
  font-size: 22px;
  color: var(--ink);
  line-height: 1;
}
.stat-tile__label { font-size: 12px; color: var(--grey); }

/* Rediseno de Ajustes (2026-08-22): sub-menu lateral + una seccion a la vez,
   mismo patron que usan Vercel/Linear en su configuracion (investigado con
   busqueda real antes de disenar, no solo memoria) -- Angel eligio esta
   direccion sobre tarjetas apiladas y el hibrido con scroll-spy. */
.settings-layout {
  display: flex;
  gap: 28px;
  align-items: flex-start;
  max-width: 920px;
}
.settings-subnav {
  width: 190px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  position: sticky;
  top: 20px;
}
.settings-subnav__link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 8px;
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--grey);
  cursor: pointer;
  text-align: left;
}
.settings-subnav__link svg { width: 16px; height: 16px; flex-shrink: 0; }
.settings-subnav__link.active {
  background: #fff;
  color: var(--indigo);
  box-shadow: 0 1px 3px rgba(16, 23, 42, 0.08);
}
.settings-content {
  flex: 1;
  background: var(--card-bg);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 26px 28px;
  min-width: 0;
}
.settings-content__title { font-weight: 700; font-size: 16px; margin: 0 0 4px; }
.settings-content__desc { font-size: 12.5px; color: var(--grey); margin: 0 0 22px; }
.settings-content .field { margin-bottom: 16px; }
.settings-content .field:last-child { margin-bottom: 0; }
.settings-content .field-row {
  display: grid;
  grid-template-columns: 2fr 1fr;
  column-gap: 14px;
  margin-bottom: 16px;
}
.settings-content .field-row--even { grid-template-columns: 1fr 1fr; }
.settings-content .help { font-size: 11.5px; color: var(--grey-light); margin: 4px 0 0; }

/* Rediseno de Licencia (2026-08-22): estilo portal de facturacion (barra de
   acento + zona de peligro con borde rojo), opcion C elegida por Angel de
   4 alternativas -- el texto de advertencia real (instrucciones de
   migracion a otro servidor) se preserva completo, no se recorto al
   rediseñar. */
.license-plan-card {
  max-width: 680px;
  background: var(--card-bg);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  margin-bottom: 16px;
}
.license-plan-card__accent { width: 6px; background: var(--grad); flex-shrink: 0; }
.license-plan-card__body { padding: 22px 26px; flex: 1; }
.license-plan-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  gap: 12px;
  flex-wrap: wrap;
}
.license-plan-card__name { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; font-size: 19px; }
.license-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  white-space: nowrap;
}
.license-status__dot { width: 6px; height: 6px; border-radius: 50%; }
.license-status--active { color: var(--success); }
.license-status--active .license-status__dot { background: var(--success); }
.license-status--inactive { color: var(--grey); }
.license-status--inactive .license-status__dot { background: var(--grey-light); }
.license-status--blocked { color: var(--danger); }
.license-status--blocked .license-status__dot { background: var(--danger); }
.license-detail-row {
  display: flex;
  justify-content: space-between;
  padding: 10px 0;
  border-top: 1px solid var(--line);
  font-size: 13px;
  gap: 12px;
}
.license-detail-row .k { color: var(--grey); }
.license-detail-row .v { font-weight: 600; text-align: right; }
.license-danger-zone {
  max-width: 680px;
  border: 1px solid #FCA5A5;
  border-left: 3px solid var(--danger);
  border-radius: 10px;
  padding: 18px 22px;
  background: #fff;
}
.license-danger-zone__title { font-weight: 700; font-size: 14px; margin-bottom: 6px; }
.license-danger-zone__text { font-size: 12.5px; color: var(--grey); line-height: 1.5; margin: 0 0 14px; }