:root {
  --bg: #f6f8fb;
  --surface: #ffffff;
  --surface-soft: #f9fbfd;

  --primary: #2563eb;
  --primary-dark: #1e40af;
  --accent: #06b6d4;

  --text: #0f172a;
  --muted: #64748b;
  --border: #e2e8f0;

  --success: #10b981;
  --warning: #f59e0b;
  --danger: #ef4444;

  --shadow: 0 18px 45px rgba(15, 23, 42, 0.08);
  --radius: 24px;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: var(--bg);
  color: var(--text);
}

button,
input,
textarea {
  font: inherit;
}

button {
  cursor: pointer;
}

.hidden {
  display: none !important;
}

.auth-page {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
}

.auth-card {
  width: min(440px, 100%);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 32px;
  padding: 32px;
  box-shadow: var(--shadow);
}

.auth-card h1 {
  margin: 28px 0 8px;
  font-size: 32px;
}

.auth-card p {
  color: var(--muted);
  line-height: 1.5;
}

.auth-form {
  display: grid;
  gap: 14px;
  margin-top: 22px;
}

.auth-form input,
.form-grid input,
.form-grid textarea,
.search-input {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 13px 14px;
  background: #fff;
  outline: none;
}

.auth-form input:focus,
.form-grid input:focus,
.form-grid textarea:focus,
.search-input:focus {
  border-color: var(--accent);
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.brand-mark,
.brand-logo {
  width: 58px !important;
  height: 58px !important;
  min-width: 58px !important;
  max-width: 58px !important;
  min-height: 58px !important;
  max-height: 58px !important;
  flex: 0 0 58px !important;
  border-radius: 18px;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #ffffff;
}

.brand-mark {
  border: 2px solid #1e3a8a;
  font-size: 26px;
  font-weight: 900;
  color: #1e3a8a;
}

.brand-logo img {
  display: block !important;
  width: 58px !important;
  height: 58px !important;
  min-width: 58px !important;
  max-width: 58px !important;
  min-height: 58px !important;
  max-height: 58px !important;
  object-fit: contain !important;
}

.brand h1 { margin: 0; font-size: 24px; }



.brand-logo img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.brand strong {
  display: block;
  font-size: 18px;
}

.brand span {
  display: block;
  color: var(--muted);
  font-size: 13px;
}

.app-shell {
  min-height: 100vh;

  display: grid;

  grid-template-columns:
    280px
    minmax(0, 1fr);

  transition:
    grid-template-columns .26s ease;
}

.app-shell.sidebar-collapsed {
  grid-template-columns:
    92px
    minmax(0, 1fr);
}

.sidebar-overlay,
.mobile-topbar {
  display: none;
}

.sidebar {
  background: #ffffff;
  border-right: 1px solid var(--border);

  padding: 24px;

  display: flex;
  flex-direction: column;
  gap: 14px;

  position: sticky;
  top: 0;

  height: 100vh;

  overflow-y: auto;
  overflow-x: hidden;

  transition:
    width .26s ease,
    padding .26s ease;
}

.desktop-sidebar-toggle {
  position: absolute;

  top: 18px;
  right: 18px;

  z-index: 50;

  width: 42px;
  height: 42px;

  border: 0;
  border-radius: 999px;

  background: #eef4ff;

  color: #0f172a;

  font-size: 28px;
  font-weight: 800;

  display: grid;
  place-items: center;

  cursor: pointer;

  transition:
    transform .18s ease,
    background .18s ease;
}

.desktop-sidebar-toggle:hover {
  transform: scale(1.04);

  background: #dbeafe;
}

.app-shell.sidebar-collapsed .desktop-sidebar-toggle {
  transform: rotate(180deg);

  top: 10px;
  right: 50%;
  margin-right: -21px;
}

.app-shell.sidebar-collapsed .nav-label,
.app-shell.sidebar-collapsed .nav-title,
.app-shell.sidebar-collapsed .user-box,
.app-shell.sidebar-collapsed .sidebar-footer .secondary-btn {
  display: none;
}

.app-shell.sidebar-collapsed .sidebar {
  padding-left: 14px;
  padding-right: 14px;
}

.app-shell.sidebar-collapsed .brand-sidebar-logo {
  justify-content: center;
}

.app-shell.sidebar-collapsed .brand-logo-large {
  width: 54px;
}

.app-shell.sidebar-collapsed .brand-sidebar-logo {
  padding-top: 56px;
}

.app-shell.sidebar-collapsed .nav-item {
  justify-content: center;

  padding-left: 0;
  padding-right: 0;
}

.app-shell.sidebar-collapsed .nav-icon {
  margin: 0;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 14px;
}

.nav-icon {
  display: flex;
  align-items: center;
  justify-content: center;

  flex-shrink: 0;
}

.sidebar::-webkit-scrollbar {
  width: 6px;
}

.sidebar::-webkit-scrollbar-thumb {
  background: rgba(15, 23, 42, 0.18);
  border-radius: 999px;
}

.sidebar::-webkit-scrollbar-track {
  background: transparent;
}

.nav {
  display: grid;
  gap: 8px;
}

.nav-item {
  border: 0;
  background: transparent;
  text-align: left;
  padding: 13px 14px;
  border-radius: 16px;
  color: var(--muted);
}

.nav-item.active,
.nav-item:hover {
  background: #e0f2fe;
  color: var(--primary-dark);
}

.sidebar-footer {
  margin-top: auto;
  display: grid;
  gap: 14px;
}

.user-box {
  padding: 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
}

.user-box strong,
.user-box span {
  display: block;
}

.user-box span {
  color: var(--muted);
  font-size: 13px;
  margin-top: 4px;
}

.main {
  padding: 34px;
}

.page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 24px;
}

.fixed-cost-page-header-content {
  width: 100%;

  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
}

.fixed-cost-header-actions {
  display: flex;
  align-items: center;
  gap: 12px;

  flex-wrap: wrap;

  flex-shrink: 0;
}

#openFixedCostModal,
#openFixedCostSuggestionsModal {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  min-height: 46px !important;

  border-radius: 999px !important;

  padding: 12px 18px !important;

  font-weight: 700 !important;

  white-space: nowrap !important;

  visibility: visible !important;
  opacity: 1 !important;
}

#openFixedCostSuggestionsModal {
  background: #e0f2fe !important;
  color: #1e40af !important;
  border: 1px solid #bfdbfe !important;
}

#openFixedCostModal {
  background: linear-gradient(
    135deg,
    var(--primary),
    var(--primary-dark)
  ) !important;

  color: #ffffff !important;
}

.fixed-cost-header-actions .primary-btn,
.fixed-cost-header-actions .secondary-btn {
  white-space: nowrap;
}

@media (max-width: 900px) {

  .fixed-cost-page-header-content {
    flex-direction: column;
    align-items: stretch;
  }

  .fixed-cost-header-actions {
    width: 100%;
  }

  .fixed-cost-header-actions .primary-btn,
  .fixed-cost-header-actions .secondary-btn {
    flex: 1;
    justify-content: center;
  }

}

.eyebrow {
  margin: 0 0 8px;
  color: var(--primary);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: .08em;
}

.page-header h1 {
  margin: 0;
  font-size: clamp(30px, 4vw, 46px);
  letter-spacing: -0.04em;
}

.page-header p {
  max-width: 720px;
  color: var(--muted);
  line-height: 1.5;
}

.primary-btn,
.secondary-btn,
.link-btn,
.icon-btn {
  border: 0;
  border-radius: 999px;
  padding: 12px 18px;
  font-weight: 700;
}

.primary-btn {
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: #fff;
  box-shadow: 0 12px 26px rgba(95, 70, 56, .18);
}

.secondary-btn {
  background: #e0f2fe;
  color: var(--primary-dark);
}

.link-btn {
  background: transparent;
  color: var(--primary-dark);
  padding-left: 0;
}

.icon-btn {
  width: 38px;
  height: 38px;
  padding: 0;
  font-size: 24px;
  background: #eef6ff;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 22px;
}

.stat-card,
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.stat-card {
  padding: 22px;
}

.stat-card span {
  display: block;
  color: var(--muted);
  margin-bottom: 8px;
}

.stat-card strong {
  font-size: 34px;
}

.card {
  padding: 24px;
}

.card h2 {
  margin-top: 0;
}

.card p {
  color: var(--muted);
  line-height: 1.6;
}

.card-head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
  margin-bottom: 18px;
}

.search-input {
  max-width: 360px;
}

.list {
  display: grid;
  gap: 10px;
}

.list-row {
  display: grid;
  grid-template-columns: 1.4fr 1.2fr auto;
  gap: 16px;
  align-items: center;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--surface-soft);
}

.list-row strong,
.list-row span {
  display: block;
}

.list-row span {
  color: var(--muted);
  font-size: 14px;
  margin-top: 4px;
}

.pill {
  display: inline-flex !important;
  padding: 7px 12px;
  border-radius: 999px;
  background: #ecfdf5;
  color: var(--success) !important;
  font-weight: 700;
  font-size: 12px !important;
}

.empty-state {
  text-align: center;
  padding: 40px 20px;
  color: var(--muted);
}

.empty-state strong {
  display: block;
  color: var(--text);
  margin-bottom: 6px;
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(44, 37, 32, .34);
  display: grid;
  place-items: center;
  padding: 20px;
  z-index: 20;
}

.modal {
  width: min(720px, 100%);
  max-height: 90vh;
  overflow: auto;
  background: var(--surface);
  border-radius: 28px;
  padding: 24px;
  box-shadow: var(--shadow);
}

.modal-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 18px;
}

.modal-head h2 {
  margin: 0;
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.form-grid label {
  display: grid;
  gap: 7px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 700;
}

.form-grid .full {
  grid-column: 1 / -1;
}

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

.error-text {
  color: var(--danger) !important;
  font-size: 14px;
}

@media (max-width: 900px) {

  .app-shell {
    display: block;
  }

  .sidebar {
  position: fixed;

  top: 0;
  left: 0;

  width: 310px;
  max-width: 88vw;
  height: 100vh;

  background: #ffffff;

  z-index: 2000;

  transform: translateX(-105%);
  transition: transform .28s ease;

  box-shadow:
    0 0 0 rgba(0,0,0,0),
    0 24px 60px rgba(15,23,42,.18);

  overflow-y: auto;

  padding:
    max(24px, env(safe-area-inset-top))
    24px
    calc(110px + env(safe-area-inset-bottom));
}

.app-shell.mobile-sidebar-open .sidebar {
  transform: translateX(0);
}

.sidebar-overlay {
  position: fixed;
  inset: 0;

  background: rgba(15,23,42,.45);

  backdrop-filter: blur(4px);

  z-index: 1100;

  opacity: 0;
  pointer-events: none;

  transition: opacity .25s ease;
}

.app-shell.mobile-sidebar-open .sidebar-overlay {
  opacity: 1;
  pointer-events: auto;
}

.sidebar-overlay {
  display: block;

  position: fixed;
  inset: 0;

  background: rgba(15,23,42,.45);

  opacity: 0;
  pointer-events: none;

  transition: opacity .25s ease;

  z-index: 1900;
}

.app-shell.mobile-sidebar-open .sidebar-overlay {
  opacity: 1;
  pointer-events: auto;
}

.app-shell {
  overflow-x: hidden;
}

.mobile-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;

  margin-bottom: 22px;
}

.mobile-topbar-brand {
  display: flex;
  align-items: center;
  gap: 14px;
}

.mobile-topbar-brand img {
  width: 52px;
  height: 52px;
  object-fit: contain;
}

.mobile-topbar-brand strong {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -.03em;
  color: #0f172a;
}

.sidebar-open-btn {
  position: relative;

  width: 52px;
  height: 52px;

  border: 0;
  border-radius: 24px;

  background:
    linear-gradient(
      145deg,
      #ffffff,
      #f3f7ff
    );

  box-shadow:
    0 18px 40px rgba(15,23,42,.10),
    inset 0 1px 0 rgba(255,255,255,.95);

  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;

  flex-shrink: 0;

  cursor: pointer;

  transition:
    transform .18s ease,
    box-shadow .18s ease;
}

.sidebar-open-btn:hover {
  transform: translateY(-1px);

  box-shadow:
    0 22px 50px rgba(15,23,42,.14);
}

.sidebar-open-btn span {
  width: 26px;
  height: 3px;

  border-radius: 999px;

  background:
    linear-gradient(
      90deg,
      #2563eb,
      #1d4ed8
    );

  box-shadow:
    0 1px 4px rgba(37,99,235,.25);
}

  .sidebar-close-btn {
    display: grid !important;
  }

  .main {
    width: 100%;
    padding: 20px;
  }

  .stats-grid,
  .procedure-summary-grid,
  .patient-summary-grid,
  .costs-summary-grid {
    grid-template-columns: 1fr;
  }

  .form-grid,
  .list-row,
  .procedure-row,
  .patient-row {
    grid-template-columns: 1fr;
  }

  .desktop-sidebar-toggle {
    display: none !important;
  }
}

.nav-title {
  margin: 14px 8px 4px;
  font-size: 11px;
  font-weight: 800;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .08em;
}

.onboarding-card {
  width: min(620px, 100%);
}

.auth-form select,
.auth-form input[type="color"] {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 13px 14px;
  background: #fff;
  outline: none;
}

.color-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.profile-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

@media (max-width: 900px) {
  .profile-grid,
  .color-row {
    grid-template-columns: 1fr;
  }
}


.success-text {
  color: var(--success);
  font-size: 14px;
  font-weight: 700;
}

.clinic-preview {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: var(--surface-soft);
}

.clinic-logo-preview {
  width: 64px;
  height: 64px;
  border-radius: 20px;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  color: #fff;
  font-size: 28px;
  font-weight: 800;
}

.clinic-logo-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.clinic-preview strong {
  display: block;
  font-size: 18px;
}

.clinic-preview p {
  margin: 4px 0 0;
  color: var(--muted);
}

.phone-row {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 12px;
}

.upload-field {
  display: grid;
  gap: 8px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 700;
}

.upload-field input[type="file"] {
  border: 1px dashed var(--border);
  border-radius: 16px;
  padding: 14px;
  background: #fff;
}

@media (max-width: 700px) {
  .phone-row {
    grid-template-columns: 1fr;
  }
}


.brand-logo {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  object-fit: contain;
  background: #ffffff;
}

.brand-sidebar-logo {
  justify-content: center;
  padding: 4px 0 6px;
}

.brand-logo-large {
  width: 128px;
  max-width: 100%;
  height: auto;
  object-fit: contain;
}

.dashboard-brand-header {
  display: flex;
  align-items: center;
  gap: 18px;
}

.dashboard-clinic-logo {
  width: 76px;
  height: 76px;
  border-radius: 24px;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  color: #fff;
  font-size: 32px;
  font-weight: 800;
  box-shadow: var(--shadow);
  flex: 0 0 auto;
}

.dashboard-clinic-logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 700px) {
  .dashboard-brand-header {
    align-items: flex-start;
  }

  .dashboard-clinic-logo {
    width: 60px;
    height: 60px;
    border-radius: 18px;
  }
}


.calendar-toolbar {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 22px;
}

.calendar-toolbar label {
  display: grid;
  gap: 7px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 700;
  min-width: 220px;
}

.calendar-toolbar input {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 13px 14px;
  background: #fff;
  outline: none;
}

.appointments-list {
  display: grid;
  gap: 12px;
}

.appointment-row {
  display: grid;
  grid-template-columns: 110px 1fr auto auto;
  gap: 16px;
  align-items: center;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: var(--surface-soft);
}

.appointment-time strong,
.appointment-time span,
.appointment-main strong,
.appointment-main span,
.appointment-main small {
  display: block;
}

.appointment-time strong {
  font-size: 18px;
}

.appointment-time span,
.appointment-main span,
.appointment-main small {
  color: var(--muted);
  margin-top: 4px;
}

.appointment-main strong {
  font-size: 16px;
}

.pill-danger {
  background: #fef2f2 !important;
  color: var(--danger) !important;
}

.form-grid select {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 13px 14px;
  background: #fff;
  outline: none;
}

@media (max-width: 900px) {
  .calendar-toolbar {
    display: grid;
  }

  .appointment-row {
    grid-template-columns: 1fr;
  }

  .appointment-actions {
    display: flex;
    justify-content: flex-start;
  }
}

.calendar-embed-card {
  width: 100%;
  height: calc(100vh - 170px);
  min-height: 720px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.calendar-embed-frame {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  background: #fff;
}


.procedure-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 22px;
}

.procedure-table {
  display: grid;
  gap: 12px;
}

.procedure-row {
  display: grid;
  grid-template-columns: 1.5fr .7fr .8fr .8fr .8fr auto auto;
  gap: 16px;
  align-items: center;
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: var(--surface-soft);
}

.procedure-main strong,
.procedure-main span,
.procedure-label {
  display: block;
}

.procedure-main strong {
  font-size: 16px;
}

.procedure-main span,
.procedure-label {
  color: var(--muted);
  font-size: 13px;
  margin-top: 4px;
}

.procedure-row > div > strong {
  font-size: 15px;
}

.procedure-actions {
  display: flex;

  align-items: center;

  justify-content: flex-end;

  gap: 10px;

  flex-wrap: wrap;

  min-width: 0;
}

.pill-muted {
  background: #f1f5f9 !important;
  color: var(--muted) !important;
}

.procedure-modal {
  width: min(860px, 100%);
}

.procedure-modal .modal-head p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 14px;
}

@media (max-width: 1100px) {
  .procedure-row {
    grid-template-columns: 1fr 1fr;
  }

  .procedure-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .procedure-actions {
    justify-content: flex-start;
  }
}

@media (max-width: 700px) {
  .procedure-row {
    grid-template-columns: 1fr;
  }

  .procedure-summary-grid {
    grid-template-columns: 1fr;
  }
}


.patient-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 22px;
}

.patient-table {
  display: grid;
  gap: 12px;
}

.patient-actions .icon-btn {
    width: 38px;
    height: 38px;

    border: 1px solid #dbe5f2;
    background: #ffffff;

    padding: 0;

    color: #64748b;

    font-size: 18px;
    font-weight: 700;

    line-height: 1;

    border-radius: 12px;

    display: flex;
    align-items: center;
    justify-content: center;

    cursor: pointer;

    transition:
      background .18s ease,
      border-color .18s ease,
      transform .18s ease;
}

.patient-actions .icon-btn:hover {
    background: #f8fbff;
    border-color: #bfdbfe;
    transform: translateY(-1px);
}

.cost-items-table {
  display: grid;
  gap: 10px;
}

.cost-item-row {
  display: grid;
  grid-template-columns: 1.5fr .9fr 1fr 1fr auto 1.2fr;
  gap: 16px;
  align-items: center;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--surface-soft);
}

.cost-item-row.is-inactive {
  opacity: .58;
}

.cost-item-main strong,
.cost-item-main span {
  display: block;
}

.cost-item-main span {
  color: var(--muted);
  font-size: 14px;
  margin-top: 4px;
}

@media (max-width: 1100px) {
  .cost-item-row {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 680px) {
  .cost-item-row {
    grid-template-columns: 1fr;
  }
}

.calculation-modal {
  width: min(860px, 100%);
}

.calculation-summary-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 18px;
}

.calculation-breakdown {
  display: grid;
  gap: 10px;
  margin: 18px 0;
}

.calculation-breakdown div {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface-soft);
}

.calculation-breakdown span {
  color: var(--muted);
  font-weight: 700;
}

.calculation-breakdown strong {
  color: var(--text);
}

.calculation-warnings {
  margin-top: 18px;
  padding: 16px;
  border-radius: 18px;
  background: #fff7ed;
  border: 1px solid #fed7aa;
}

.calculation-warnings strong {
  display: block;
  margin-bottom: 8px;
  color: #9a3412;
}

.calculation-warnings p {
  margin: 6px 0;
  color: #9a3412;
}

@media (max-width: 760px) {
  .calculation-summary-grid {
    grid-template-columns: 1fr;
  }

  .calculation-breakdown div {
    display: grid;
  }
}

.fixed-cost-table {
  display: grid;
  gap: 10px;
}

.fixed-cost-row {
  display: grid;

  grid-template-columns:
    minmax(220px, 1.6fr)
    minmax(120px, .8fr)
    minmax(160px, 1fr)
    auto
    auto;

  gap: 18px;

  align-items: center;

  padding: 18px 20px;

  border-radius: 22px;

  border: 1px solid #e7edf5;

  background: #ffffff;

  min-width: 0;

  overflow: hidden;
}

.fixed-cost-row > div {
  min-width: 0;
}

.fixed-cost-row strong,
.fixed-cost-row span {
  overflow-wrap: anywhere;
  word-break: break-word;
}

.fixed-cost-row.is-inactive {
  opacity: .58;
}

.fixed-cost-row strong,
.fixed-cost-row span {
  display: block;
}

.fixed-cost-row span {
  color: var(--muted);
  font-size: 14px;
  margin-top: 4px;
}

@media (max-width: 1100px) {
  .fixed-cost-row {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 680px) {
  .fixed-cost-row {
    grid-template-columns: 1fr;
  }
}

.staff-section-card {
  margin-bottom: 18px;
}

.staff-table {
  display: grid;
  gap: 10px;
}

.staff-row {
  display: grid;
  grid-template-columns: 1.6fr 1.1fr 1fr 1fr .8fr auto 1.2fr;
  gap: 14px;
  align-items: center;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--surface-soft);
}

.staff-row.is-inactive {
  opacity: .58;
}

.staff-main strong,
.staff-main span,
.staff-row strong,
.staff-row span {
  display: block;
}

.staff-main span,
.staff-row span {
  color: var(--muted);
  font-size: 14px;
  margin-top: 4px;
}

.staff-modal {
  width: min(880px, 100%);
}

.staff-modal-note {
  padding: 14px 16px;
  border-radius: 18px;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  color: #1e3a8a;
  line-height: 1.5;
}

@media (max-width: 1200px) {
  .staff-row {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 680px) {
  .staff-row {
    grid-template-columns: 1fr;
  }
}

.inline-create-field {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: center;
}

.inline-create-field select {
  width: 100%;
}

.success-text {
  margin-top: 14px;
  color: #047857;
  font-weight: 700;
}

.cost-volume-card {
  margin-top: 18px;
}

.volume-mix-table {
  display: grid;
  gap: 10px;
}

.volume-mix-row {
  display: grid;
  grid-template-columns: 1.6fr .8fr 1fr auto;
  gap: 16px;
  align-items: center;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--surface-soft);
}

.volume-mix-main strong,
.volume-mix-main span {
  display: block;
}

.volume-mix-main span {
  color: var(--muted);
  font-size: 14px;
  margin-top: 4px;
}

.volume-mix-row label {
  display: grid;
  gap: 7px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 700;
}

.volume-mix-row input {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 13px 14px;
  background: #fff;
  outline: none;
}

.volume-mix-row input:focus {
  border-color: var(--accent);
}

@media (max-width: 1000px) {
  .volume-mix-row {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 680px) {
  .volume-mix-row {
    grid-template-columns: 1fr;
  }
}

.compound-table,
.compound-items-list,
.compound-result-items {
  display: grid;
  gap: 10px;
}

.compound-row {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr auto 1.2fr;
  gap: 16px;
  align-items: center;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--surface-soft);
}

.compound-row.is-inactive {
  opacity: .58;
}

.compound-main strong,
.compound-main span {
  display: block;
}

.compound-main span {
  color: var(--muted);
  font-size: 14px;
  margin-top: 4px;
}

.compound-modal {
  width: min(980px, 100%);
}

.compound-builder {
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: var(--surface-soft);
}

.compound-builder h3 {
  margin: 0;
}

.compound-add-row {
  display: grid;
  grid-template-columns: 1.5fr .6fr .8fr auto;
  gap: 12px;
  align-items: center;
  margin-bottom: 14px;
}

.compound-add-row select,
.compound-add-row input {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 13px 14px;
  background: #fff;
  outline: none;
}

.compound-item-row,
.compound-result-item {
  display: grid;
  grid-template-columns: 1.5fr .7fr .8fr auto;
  gap: 12px;
  align-items: center;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: #fff;
}

.compound-result-items-card {
  margin-top: 16px;
  box-shadow: none;
}

.compound-result-items-card h3 {
  margin-top: 0;
}

.compound-result-item {
  grid-template-columns: 1.5fr 1fr 1fr;
}

.compound-result-item strong,
.compound-result-item span,
.compound-item-row strong,
.compound-item-row span {
  display: block;
}

.compound-result-item span,
.compound-item-row span {
  color: var(--muted);
  font-size: 14px;
  margin-top: 4px;
}

@media (max-width: 1100px) {
  .compound-row,
  .compound-add-row,
  .compound-item-row,
  .compound-result-item {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 680px) {
  .compound-row,
  .compound-add-row,
  .compound-item-row,
  .compound-result-item {
    grid-template-columns: 1fr;
  }
}

.fixed-cost-assistant-modal {
  width: min(980px, calc(100vw - 32px));
}

.fixed-cost-assistant-step {
  display: grid;
  gap: 20px;
}

.fixed-cost-assistant-fields {
  display: grid;
  gap: 18px;
}

.fixed-cost-assistant-field-card {
  padding: 20px;
  border: 1px solid #dbe5f2;
  border-radius: 22px;
  background: #f8fbff;
}

.fixed-cost-assistant-field-head {
  margin-bottom: 18px;
}

.fixed-cost-assistant-field-head strong {
  display: block;
  font-size: 18px;
  color: #0f172a;
}

.fixed-cost-assistant-field-head span {
  display: block;
  margin-top: 6px;
  color: #64748b;
  line-height: 1.45;
}

.fixed-cost-assistant-field-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 14px;
}

.fixed-cost-assistant-field-grid input,
.fixed-cost-assistant-field-grid select,
.fixed-cost-assistant-field-card textarea {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 13px 14px;
  background: #fff;
  outline: none;
}

.fixed-cost-assistant-field-card textarea {
  resize: vertical;
}

@media (max-width: 760px) {

  .fixed-cost-assistant-field-grid {
    grid-template-columns: 1fr;
  }

}
.fixed-cost-group-card {
  margin-bottom: 18px;
}

.fixed-cost-group-card .card-head {
  align-items: flex-start;
}

.fixed-cost-group-card .pill {
  white-space: nowrap;
}

.sidebar-close-btn {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 999px;
  background: #eef6ff;
  color: var(--text);
  font-size: 30px;
  font-weight: 800;
  line-height: 1;
  display: grid;
  place-items: center;
  z-index: 2;
}

.page-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 60vh;
  gap: 12px;
  color: #6b7280;
}

.spinner {
  width: 36px;
  height: 36px;
  border: 4px solid #e5e7eb;
  border-top: 4px solid #2563eb;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.calculation-sale-price-card {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 16px;
  align-items: end;
  margin: 18px 0;
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: var(--surface-soft);
}

.calculation-sale-price-card strong {
  display: block;
  font-size: 16px;
  margin-bottom: 4px;
}

.calculation-sale-price-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.5;
}

.calculation-sale-price-form {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
}

.calculation-sale-price-form input {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 13px 14px;
  background: #fff;
  outline: none;
}

.calculation-positive {
  margin-top: 18px;
  padding: 16px;
  border-radius: 18px;
  background: #ecfdf5;
  border: 1px solid #bbf7d0;
}

.calculation-positive strong {
  display: block;
  margin-bottom: 8px;
  color: #047857;
}

.calculation-positive p {
  margin: 0;
  color: #047857;
}

@media (max-width: 760px) {
  .calculation-sale-price-card,
  .calculation-sale-price-form {
    grid-template-columns: 1fr;
  }
}

.calculation-sale-price-form input {
  font-size: 20px;
  font-weight: 600;
  padding: 16px 18px;
  border-radius: 14px;
}

.pricing-status-label {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.3;
}

.positive {
  color: #047857;
}

.negative {
  color: #b91c1c;
}

.calculation-modal {
  width: min(900px, calc(100vw - 32px));
  overflow-x: hidden;
}

.calculation-modal .stat-card strong,
.calc-card strong {
  font-size: 24px;
  line-height: 1.15;
}

.calculation-top-grid,
.calculation-margin-grid {
  display: grid;
  gap: 12px;
  margin-bottom: 16px;
}

.calculation-top-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.calculation-margin-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.calc-card {
  min-width: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 16px;
}

.calc-card span {
  display: block;
  color: var(--muted);
  font-size: 13px;
  margin-bottom: 8px;
}

.calc-card strong {
  display: block;
  overflow-wrap: anywhere;
}

.calculation-sale-price-card {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 14px;
  align-items: center;
  margin: 16px 0;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--surface-soft);
}

.calculation-sale-price-card strong {
  font-size: 15px;
}

.calculation-sale-price-card p {
  margin: 4px 0 0;
  color: var(--muted);
  line-height: 1.4;
  font-size: 14px;
}

.calculation-sale-price-form {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
}

.calculation-sale-price-form input {
  width: 100%;
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 12px 14px;
  background: #fff;
  font-size: 16px;
  font-weight: 700;
}

.calculation-sale-price-form .primary-btn {
  padding-inline: 16px;
  white-space: nowrap;
}

.positive {
  color: #047857 !important;
}

.negative {
  color: #b91c1c !important;
}

.compact-warning {
  margin-top: 12px;
  margin-bottom: 14px;
  padding: 14px;
}

.compact-warning p {
  font-size: 14px;
  line-height: 1.4;
}

.calculation-positive {
  margin: 12px 0 14px;
  padding: 14px;
  border-radius: 18px;
  background: #ecfdf5;
  border: 1px solid #bbf7d0;
}

.calculation-positive strong,
.calculation-positive p {
  color: #047857;
}

.calculation-positive p {
  margin: 4px 0 0;
  font-size: 14px;
}

@media (max-width: 900px) {
  .calculation-top-grid,
  .calculation-margin-grid,
  .calculation-sale-price-card {
    grid-template-columns: 1fr;
  }

  .calculation-sale-price-form {
    grid-template-columns: 1fr;
  }
}

.procedure-card-row {
  display: block;
  padding: 18px;
}

.procedure-card-header {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 16px;
  align-items: center;
  margin-bottom: 16px;
}

.procedure-card-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.procedure-card-metrics {
  display: grid;
  grid-template-columns: repeat(7, minmax(120px, 1fr));
  gap: 10px;
}

.procedure-card-metrics > div {
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: #fff;
}

.procedure-card-metrics strong {
  display: block;
  margin-top: 4px;
  font-size: 14px;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.pill-danger {
  background: #fef2f2 !important;
  color: #b91c1c !important;
}

.pill-warning {
  background: #fffbeb !important;
  color: #92400e !important;
}

@media (max-width: 1280px) {
  .procedure-card-metrics {
    grid-template-columns: repeat(4, minmax(120px, 1fr));
  }
}

@media (max-width: 900px) {
  .procedure-card-header {
    grid-template-columns: 1fr;
  }

  .procedure-card-actions {
    justify-content: flex-start;
  }

  .procedure-card-metrics {
    grid-template-columns: repeat(2, minmax(120px, 1fr));
  }
}

@media (max-width: 560px) {
  .procedure-card-metrics {
    grid-template-columns: 1fr;
  }
}

.calculation-professional-detail {
  margin: 16px 0;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--surface-soft);
}

.calculation-professional-detail > strong {
  display: block;
  margin-bottom: 12px;
  font-size: 15px;
}

.field-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}

.field-label-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.required-badge {
  font-size: 11px;
  font-weight: 700;
  color: #92400e;
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-radius: 999px;
  padding: 3px 8px;
}

.field-help-btn {
  width: 22px;
  height: 22px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: #fff;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}

.field-help-btn:hover {
  color: var(--primary);
  border-color: var(--primary);
}

.small-modal {
  width: min(520px, calc(100vw - 32px));
}

.help-example {
  margin-top: 12px;
  padding: 12px;
  border-radius: 14px;
  background: var(--surface-soft);
  color: var(--muted);
  line-height: 1.45;
}

.stacked-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.danger-btn {
  border: 1px solid #fecaca;
  background: #fef2f2;
  color: #b91c1c;
  border-radius: 999px;
  padding: 11px 16px;
  font-weight: 700;
  cursor: pointer;
}

.missing-fields-list {
  margin: 12px 0 0;
  padding-left: 20px;
  color: var(--muted);
}

.missing-fields-list li {
  margin-bottom: 6px;
}

.field-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}

.field-label-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.required-badge {
  font-size: 11px;
  font-weight: 700;
  color: #92400e;
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-radius: 999px;
  padding: 3px 8px;
}

.field-help-btn {
  width: 22px;
  height: 22px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: #fff;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}

.field-help-btn:hover {
  color: var(--primary);
  border-color: var(--primary);
}

.procedure-subsection {
  margin-top: 10px;
}

.procedure-subsection h3 {
  margin: 0 0 4px;
}

.procedure-subsection p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
}

.small-modal {
  width: min(520px, calc(100vw - 32px));
}

.help-example {
  margin-top: 12px;
  padding: 12px;
  border-radius: 14px;
  background: var(--surface-soft);
  color: var(--muted);
  line-height: 1.45;
}

.stacked-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.danger-btn {
  border: 1px solid #fecaca;
  background: #fef2f2;
  color: #b91c1c;
  border-radius: 999px;
  padding: 11px 16px;
  font-weight: 700;
  cursor: pointer;
}

.missing-fields-list {
  margin: 12px 0 0;
  padding-left: 20px;
  color: var(--muted);
}

.missing-fields-list li {
  margin-bottom: 6px;
}

/* =========================
   COSTS PAGE - KLYNIC PREMIUM
========================= */

.costs-page {
  max-width: 1280px;
  margin: 0 auto;
}

.costs-hero {
  display: grid;
  grid-template-columns: 1.2fr .9fr;
  gap: 42px;
  align-items: center;
  margin-bottom: 28px;
}

.costs-hero h1 {
  max-width: 650px;
  margin: 0;
  font-size: clamp(34px, 4vw, 52px);
  line-height: 1.02;
  letter-spacing: -0.055em;
  color: #0b1735;
}

.costs-hero p {
  max-width: 620px;
  margin: 18px 0 0;
  color: #64748b;
  font-size: 17px;
  line-height: 1.55;
}

.costs-help-card {
  display: flex;
  gap: 18px;
  padding: 26px;
  border: 1px solid #bfdbfe;
  border-radius: 22px;
  background: rgba(255, 255, 255, .62);
  box-shadow: 0 18px 48px rgba(37, 99, 235, .08);
}

.costs-help-icon,
.costs-summary-icon,
.costs-material-icon,
.add-material-option-icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: #eaf3ff;
  color: #2563eb;
  font-weight: 900;
}

.costs-help-icon {
  width: 42px;
  height: 42px;
  background: linear-gradient(135deg, #dbeafe, #bfdbfe);
  color: #ffffff;
  font-size: 20px;
  font-family: Georgia, serif;
}

.costs-help-card strong {
  display: block;
  color: #0b1735;
  font-size: 18px;
  margin-bottom: 6px;
}

.costs-help-card p {
  margin: 0;
  color: #334155;
  font-size: 15px;
  line-height: 1.55;
}

.costs-step-card,
.costs-materials-card {
  background: rgba(255,255,255,.9);
  border: 1px solid #dbe5f2;
  border-radius: 22px;
  box-shadow: 0 18px 45px rgba(15, 23, 42, .08);
}

.costs-step-card {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 24px;
  align-items: center;
  padding: 26px;
  margin-bottom: 24px;
}

.costs-step-title {
  display: flex;
  align-items: center;
  gap: 18px;
}

.costs-step-title h2 {
  margin: 0;
  color: #0b1735;
  font-size: 24px;
  letter-spacing: -.03em;
}

.costs-step-title p {
  margin: 8px 0 0;
  color: #64748b;
}

.costs-step-number {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  color: #fff;
  font-weight: 900;
  font-size: 22px;
  box-shadow: 0 14px 30px rgba(37, 99, 235, .22);
}

.costs-select {
  max-width: none;
  min-height: 54px;
  border-radius: 16px;
  box-shadow: 0 10px 24px rgba(15, 23, 42, .04);
}

.costs-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  margin-bottom: 24px;
}

.costs-summary-card {
  display: flex;
  gap: 18px;
  align-items: center;
  min-height: 128px;
  padding: 24px;
  background: rgba(255,255,255,.92);
  border: 1px solid #dbe5f2;
  border-radius: 20px;
  box-shadow: 0 16px 42px rgba(15, 23, 42, .07);
}

.costs-summary-icon {
  width: 54px;
  height: 54px;
  font-size: 28px;
}

.costs-summary-card span {
  display: block;
  color: #64748b;
  font-size: 14px;
  font-weight: 700;
}

.costs-summary-card strong {
  display: inline-block;
  margin-top: 6px;
  color: #0b1735;
  font-size: 30px;
  line-height: 1.1;
  letter-spacing: -.04em;
}

.costs-summary-card small {
  margin-left: 8px;
  color: #334155;
  font-weight: 700;
}

.costs-materials-card {
  padding: 26px;
}

.costs-materials-head {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 24px;
  align-items: start;
  margin-bottom: 26px;
}

.costs-add-wrap {
  display: grid;
  justify-items: end;
  gap: 10px;
  position: relative;
}

.costs-add-wrap small {
  max-width: 260px;
  color: #2563eb;
  font-weight: 700;
  font-size: 13px;
  line-height: 1.35;
}

.costs-add-btn {
  min-height: 48px;
  border-radius: 14px;
  padding-inline: 24px;
  box-shadow: 0 14px 30px rgba(37, 99, 235, .22);
}

.costs-table {
  overflow: hidden;
  border: 1px solid #dbe5f2;
  border-radius: 16px;
  background: #fff;
}

.costs-table-head,
.costs-material-row {
  display: grid;
  grid-template-columns: 1.6fr .9fr .9fr .9fr auto;
  gap: 16px;
  align-items: center;
}

.costs-table-head {
  padding: 16px 22px;
  background: #f8fbff;
  border-bottom: 1px solid #e2e8f0;
}

.costs-table-head span {
  color: #64748b;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .07em;
}

.cost-items-table {
  gap: 0;
}

.costs-material-row {
  padding: 18px 22px;
  border: 0;
  border-bottom: 1px solid #e8eef7;
  border-radius: 0;
  background: #fff;
  box-shadow: none;
}

.costs-material-row:last-child {
  border-bottom: 0;
}

.cost-item-main {
  display: flex;
  align-items: center;
  gap: 14px;
}

.costs-material-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  font-size: 18px;
}

.costs-material-row strong {
  color: #1e293b;
  font-size: 15px;
}

.costs-row-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.costs-row-actions .secondary-btn,
.costs-row-actions .danger-btn {
  border-radius: 10px;
  padding: 9px 12px;
}

.costs-row-actions .danger-btn {
  border: 1px solid #fecaca;
  background: #fff;
  color: #ef4444;
}

.costs-note {
  margin-top: 18px;
  padding: 14px 18px;
  border: 1px solid #bfdbfe;
  border-radius: 12px;
  background: #eff6ff;
  color: #557197;
  font-weight: 700;
  font-size: 14px;
}

.add-material-choice-modal {
  width: min(520px, 100%);
}

.add-material-options {
  display: grid;
  gap: 14px;
}

.add-material-option {
  width: 100%;
  display: grid;
  grid-template-columns: 54px 1fr auto auto;
  gap: 14px;
  align-items: center;
  text-align: left;
  padding: 18px;
  border: 1px solid #dbe5f2;
  border-radius: 16px;
  background: #fff;
  color: #0b1735;
}

.add-material-option:hover {
  border-color: #93c5fd;
  background: #f8fbff;
}

.add-material-option-icon {
  width: 42px;
  height: 42px;
  font-size: 24px;
}

.add-material-option strong,
.add-material-option small {
  display: block;
}

.add-material-option small {
  margin-top: 4px;
  color: #64748b;
  line-height: 1.35;
}

.add-material-option em {
  padding: 4px 8px;
  border-radius: 8px;
  background: #2563eb;
  color: #fff;
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
}

.add-material-option b {
  color: #64748b;
  font-size: 28px;
  line-height: 1;
}

@media (max-width: 1100px) {
  .costs-hero,
  .costs-step-card,
  .costs-materials-head {
    grid-template-columns: 1fr;
  }

  .costs-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .costs-add-wrap {
    justify-items: start;
  }

  .costs-table-head {
    display: none;
  }

  .costs-material-row {
    grid-template-columns: 1fr 1fr;
    border-radius: 16px;
    border: 1px solid #e2e8f0;
    margin: 10px;
  }
}

@media (max-width: 680px) {
  .costs-summary-grid,
  .costs-material-row {
    grid-template-columns: 1fr;
  }

  .costs-materials-card,
  .costs-step-card {
    padding: 18px;
  }

  .costs-hero h1 {
    font-size: 34px;
  }
}

/* Ajuste fino iconos costs */

.costs-summary-icon {
  width: 54px;
  height: 54px;
  border-radius: 999px;
  background: #eaf3ff;
  color: #2563eb;
  display: grid;
  place-items: center;
}

.costs-summary-icon svg {
  width: 29px;
  height: 29px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.costs-summary-icon-text {
  font-size: 31px;
  font-weight: 500;
  line-height: 1;
}

.costs-material-name-only {
  padding-left: 0;
}

.costs-row-actions .secondary-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: #eaf6ff;
  color: #2563eb;
  border: 1px solid #cfe9ff;
  border-radius: 10px;
  padding: 9px 13px;
}

.costs-action-icon {
  width: 16px;
  height: 16px;
  display: inline-grid;
  place-items: center;
}

.costs-action-icon svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.costs-row-actions .danger-btn {
  width: 38px;
  height: 38px;
  padding: 0;
  display: inline-grid;
  place-items: center;
  border: 1px solid #fecaca;
  background: #fff;
  color: #ef4444;
  border-radius: 10px;
}

.costs-row-actions .danger-btn svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}


/* Ajuste final: iconos tarjetas y centrado tabla materiales */

.costs-summary-card {
  align-items: center;
}

.costs-summary-icon {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: #eaf3ff;
  color: #2563eb;
  display: grid;
  place-items: center;
}

.costs-summary-icon svg {
  width: 31px;
  height: 31px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.85;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.costs-summary-card span:not(.costs-summary-icon) {
  line-height: 1.15;
}

.costs-table-head,
.costs-material-row {
  grid-template-columns: 1.45fr .95fr .95fr .95fr 150px;
}

.costs-table-head span:nth-child(n+2),
.costs-material-row > div:nth-child(n+2) {
  text-align: center;
  justify-self: center;
}

.costs-table-head span:first-child,
.costs-material-row > div:first-child {
  text-align: left;
  justify-self: stretch;
}

.costs-row-actions {
  justify-self: center;
  justify-content: center;
  width: 150px;
}

/* Corrección centrado real de iconos en tarjetas de resumen */

.costs-summary-icon {
  position: relative;
  display: block;
  flex: 0 0 58px;
}

.costs-summary-icon svg {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 31px;
  height: 31px;
  transform: translate(-50%, -50%);
}

.costs-summary-icon svg path,
.costs-summary-icon svg circle {
  vector-effect: non-scaling-stroke;
}

/* Color azul para iconos de tarjetas resumen */

.costs-summary-icon {
  color: #2563eb !important;
}

.costs-summary-icon svg,
.costs-summary-icon svg path,
.costs-summary-icon svg circle {
  stroke: #2563eb !important;
}

.costs-summary-icon svg path[fill],
.costs-summary-icon svg circle[fill] {
  fill: none !important;
}

/* Modal materiales sugeridos */

.suggested-materials-modal {
  width: min(760px, 100%);
  padding: 28px;
  border-radius: 28px;
}

.suggested-materials-head {
  margin-bottom: 18px;
}

.suggested-materials-head h2 {
  color: #0b1735;
  font-size: 24px;
  letter-spacing: -0.035em;
}

.suggested-materials-head p {
  margin-top: 10px;
  color: #52647e;
  font-size: 14px;
  line-height: 1.55;
}

.suggested-close-btn {
  background: transparent;
  color: #64748b;
  font-size: 28px;
}

.suggested-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  margin-bottom: 18px;
  border: 1px solid #dbe5f2;
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
}

.suggested-tab {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 86px;
  padding: 18px 22px;
  border: 0;
  background: #fff;
  text-align: left;
  color: #0b1735;
}

.suggested-tab:first-child {
  border-right: 1px solid #dbe5f2;
}

.suggested-tab.is-active {
  background: #f8fbff;
  outline: 2px solid #8bb8ff;
  outline-offset: -2px;
}

.suggested-tab-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: #eaf3ff;
  color: #2563eb;
  flex: 0 0 auto;
}

.suggested-tab-icon svg {
  width: 25px;
  height: 25px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.suggested-tab strong,
.suggested-tab small {
  display: block;
}

.suggested-tab strong {
  font-size: 15px;
  color: #0b1735;
}

.suggested-tab small {
  margin-top: 4px;
  color: #64748b;
  font-size: 12px;
}

.suggested-info {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 22px;
  padding: 13px 16px;
  border: 1px solid #dbeafe;
  border-radius: 13px;
  background: #f3f7ff;
  color: #52647e;
  font-size: 13px;
  font-weight: 700;
}

.suggested-info span {
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: #dbeafe;
  color: #2563eb;
  font-size: 12px;
  font-weight: 900;
  font-family: Georgia, serif;
}

.suggested-section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 14px;
}

.suggested-section-head h3 {
  margin: 0;
  color: #0b1735;
  font-size: 19px;
}

.suggested-section-head p {
  margin: 6px 0 0;
  color: #7a8ba3;
  font-size: 13px;
}

.suggested-link-btn {
  border: 0;
  background: transparent;
  color: #2563eb;
  font-size: 13px;
  font-weight: 800;
}

.suggested-table {
  overflow: hidden;
  border: 1px solid #dbe5f2;
  border-radius: 16px;
  background: #fff;
}

.suggested-table-head,
.suggested-row {
  display: grid;
  grid-template-columns: 42px 1.45fr .8fr .75fr 28px;
  align-items: center;
  gap: 12px;
}

.suggested-table-head {
  padding: 13px 16px;
  background: #f8fbff;
  border-bottom: 1px solid #e2e8f0;
}

.suggested-table-head span {
  color: #7a8ba3;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.suggested-table-head span:first-child {
  grid-column: 2;
}

.suggested-row {
  min-height: 58px;
  padding: 11px 16px;
  border-bottom: 1px solid #edf2f7;
  color: #0b1735;
  cursor: pointer;
}

.suggested-row:last-child {
  border-bottom: 0;
}

.suggested-check-wrap {
  display: grid;
  place-items: center;
}

.suggested-row input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: #2563eb;
}

.suggested-material-name strong {
  font-size: 14px;
  color: #17233c;
}

.suggested-material-unit {
  font-size: 13px;
  color: #17233c;
  font-weight: 800;
}

.suggested-badge {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 5px 12px;
  border-radius: 999px;
  background: #eaf3ff;
  color: #2563eb;
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
}

.suggested-row-info {
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  border: 1px solid #9fb0c9;
  border-radius: 999px;
  color: #7a8ba3;
  font-size: 11px;
  font-weight: 900;
  font-family: Georgia, serif;
}

.suggested-specialty-toggle {
  width: 100%;
  display: grid;
  grid-template-columns: 44px 1fr auto;
  gap: 14px;
  align-items: center;
  margin-top: 22px;
  padding: 18px;
  border: 1px solid #dbe5f2;
  border-radius: 16px;
  background: #f8fbff;
  color: #0b1735;
  text-align: left;
}

.suggested-specialty-icon {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: #eaf3ff;
  color: #2563eb;
  font-size: 24px;
}

.suggested-specialty-toggle strong,
.suggested-specialty-toggle small {
  display: block;
}

.suggested-specialty-toggle strong {
  color: #2563eb;
  font-size: 15px;
}

.suggested-specialty-toggle small {
  margin-top: 4px;
  color: #7a8ba3;
  font-size: 12px;
}

.suggested-specialty-toggle b {
  color: #2563eb;
  font-size: 22px;
}

.suggested-specialty-list {
  display: grid;
  gap: 12px;
}

.suggested-specialty-group {
  border: 1px solid #dbe5f2;
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
}

.suggested-specialty-group-head {
  width: 100%;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
  padding: 16px 18px;
  border: 0;
  background: #f8fbff;
  color: #0b1735;
  text-align: left;
}

.suggested-specialty-group-head strong,
.suggested-specialty-group-head small {
  display: block;
}

.suggested-specialty-group-head small {
  margin-top: 4px;
  color: #64748b;
}

.suggested-specialty-group-head b {
  color: #2563eb;
}

.suggested-specialty-group-head.is-open b {
  transform: rotate(180deg);
}

.suggested-table.is-specialty {
  border: 0;
  border-radius: 0;
}

.suggested-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 22px;
  padding: 16px;
  border: 1px solid #dbe5f2;
  border-radius: 16px;
  background: #fff;
}

.suggested-selected-count {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #0b1735;
}

.suggested-selected-count input {
  width: 18px;
  height: 18px;
  accent-color: #2563eb;
}

.suggested-footer-actions {
  display: flex;
  gap: 10px;
}

.suggested-cancel-btn,
.suggested-apply-btn {
  border-radius: 12px;
  min-height: 42px;
  padding-inline: 22px;
}

.suggested-bottom-note {
  margin: 14px 0 0;
  text-align: center;
  color: #9aa9bd;
  font-size: 12px;
  font-weight: 700;
}

@media (max-width: 760px) {
  .suggested-tabs {
    grid-template-columns: 1fr;
  }

  .suggested-tab:first-child {
    border-right: 0;
    border-bottom: 1px solid #dbe5f2;
  }

  .suggested-table-head {
    display: none;
  }

  .suggested-row {
    grid-template-columns: 32px 1fr;
    align-items: start;
  }

  .suggested-material-unit,
  .suggested-row em,
  .suggested-row-info {
    grid-column: 2;
  }

  .suggested-footer {
    display: grid;
  }

  .suggested-footer-actions {
    justify-content: stretch;
  }

  .suggested-footer-actions button {
    flex: 1;
  }
}

.add-cost-item-modal {
  width: min(640px, 100%);
  border-radius: 28px;
}

.add-cost-step {
  margin-top: 20px;
}

.add-cost-step-title {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 14px;
}

.add-cost-step-title span {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: #2563eb;
  color: #fff;
  display: grid;
  place-items: center;
  font-weight: 700;
}

.add-cost-search input {
  width: 100%;
  padding: 14px;
  border-radius: 14px;
  border: 1px solid #dbe5f2;
}

.add-cost-results {
  margin-top: 10px;
  display: grid;
  gap: 8px;
}

.add-cost-result-item {
  text-align: left;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
  background: #fff;
}

.add-cost-result-item:hover {
  border-color: #2563eb;
}

.add-cost-create-link {
  margin-top: 12px;
  border: 0;
  background: transparent;
  color: #2563eb;
  font-weight: 700;
}

.add-cost-config {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.add-cost-qty {
  display: flex;
  align-items: center;
  gap: 10px;
}

.add-cost-qty button {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  border: 1px solid #dbe5f2;
  background: #fff;
}

.add-cost-unit-price {
  margin-top: 14px;
  display: flex;
  justify-content: space-between;
}

.add-cost-preview {
  margin-top: 10px;
  padding: 14px;
  border-radius: 14px;
  background: #e9f7ef;
  display: flex;
  justify-content: space-between;
  color: #16a34a;
  font-weight: 700;
}

/* Ajuste fino modal Agregar material al procedimiento */

.add-cost-item-modal {
  width: min(680px, 100%);
  padding: 30px;
  border-radius: 30px;
}

.add-cost-step {
  margin-top: 26px;
}

.add-cost-divider {
  position: relative;
  display: flex;
  justify-content: center;
  margin: 24px 0 18px;
  border-top: 1px solid #dbe5f2;
}

.add-cost-divider span {
  position: relative;
  top: -11px;
  padding: 0 16px;
  background: #fff;
  color: #7a8ba3;
  font-weight: 800;
  font-size: 13px;
}

.add-cost-create-wrap {
  display: grid;
  justify-items: center;
  gap: 10px;
  margin-bottom: 26px;
}

.add-cost-create-link {
  width: min(430px, 100%);
  min-height: 48px;
  border: 1px solid #dbe5f2;
  border-radius: 14px;
  background: #fff;
  color: #2563eb;
  font-weight: 900;
  box-shadow: 0 8px 22px rgba(15, 23, 42, .04);
}

.add-cost-helper {
  color: #64748b;
  font-size: 13px;
  font-weight: 700;
  text-align: center;
}

.add-cost-config {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  padding: 14px;
  border: 1px solid #edf2f7;
  border-radius: 16px;
  background: #f8fbff;
}

.add-cost-config label {
  display: grid;
  gap: 8px;
}

.add-cost-config label > span {
  color: #64748b;
  font-size: 13px;
  font-weight: 900;
}

.add-cost-config input[name="unit"] {
  width: 100%;
  height: 48px;
  border: 1px solid #dbe5f2;
  border-radius: 13px;
  background: #fff;
  padding: 0 14px;
  color: #0b1735;
  font-weight: 800;
  outline: none;
}

.add-cost-qty {
  display: grid;
  grid-template-columns: 44px 1fr 44px auto;
  align-items: center;
}

.add-cost-qty button,
.add-cost-qty input {
  height: 48px;
  border: 1px solid #dbe5f2;
  background: #fff;
}

.add-cost-qty button {
  display: grid;
  place-items: center;
  color: #2563eb;
  font-size: 22px;
  font-weight: 900;
}

.add-cost-qty button:first-child {
  border-radius: 13px 0 0 13px;
}

.add-cost-qty button:nth-child(3) {
  border-radius: 0 13px 13px 0;
}

.add-cost-qty input {
  min-width: 0;
  text-align: center;
  border-left: 0;
  border-right: 0;
  color: #0b1735;
  font-weight: 900;
  outline: none;
}

.add-cost-qty > span {
  margin-left: 12px;
  color: #52647e;
  font-size: 13px;
  font-weight: 800;
}

.add-cost-unit-price {
  min-height: 58px;
  margin-top: 14px;
  padding: 0 18px;
  border: 1px solid #edf2f7;
  border-radius: 15px;
  background: #f8fbff;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.add-cost-unit-price span {
  color: #64748b;
  font-size: 13px;
  font-weight: 800;
}

.add-cost-unit-price strong {
  color: #0b1735;
  font-size: 16px;
}

.add-cost-preview {
  min-height: 68px;
  margin-top: 14px;
  margin-bottom: 26px;
  padding: 16px 18px;
  border: 1px solid #bbf7d0;
  border-radius: 15px;
  background: #ecfdf3;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.add-cost-preview div {
  display: grid;
  gap: 4px;
}

.add-cost-preview span {
  color: #11803b;
  font-size: 14px;
  font-weight: 900;
}

.add-cost-preview small {
  color: #64748b;
  font-size: 12px;
  font-weight: 700;
}

.add-cost-preview strong {
  color: #16a34a;
  font-size: 18px;
}

.add-cost-item-form > .modal-actions {
  margin-top: 20px;
  justify-content: flex-end;
}

.add-cost-item-form > .modal-actions .secondary-btn,
.add-cost-item-form > .modal-actions .primary-btn {
  min-height: 46px;
  border-radius: 999px;
  padding-inline: 24px;
}

/* ===== MODAL NUEVO MATERIAL ===== */

.supply-form-structured {
  display: grid;
  gap: 28px;
}

.supply-block {
  display: grid;
  gap: 16px;
}

.supply-block-title {
  display: flex;
  align-items: center;
  gap: 12px;
}

.supply-block-title span {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #2563eb;
  color: #fff;
  display: grid;
  place-items: center;
  font-weight: 900;
  font-size: 13px;
}

.supply-block-title h3 {
  font-size: 16px;
  font-weight: 900;
  color: #0b1735;
}

/* GRIDS */

.supply-grid-3 {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr; /* 🔥 PROPORCIÓN REAL */
  gap: 18px;
}

.supply-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

/* INPUTS */

.supply-form-structured input,
.supply-form-structured select,
.supply-form-structured textarea {
  height: 46px;
  border-radius: 12px;
  border: 1px solid #dbe5f2;
  padding: 0 12px;
  font-weight: 700;
}

.supply-form-structured textarea {
  height: auto;
  padding: 10px 12px;
}

/* INFO BOX */

.supply-info-box {
  background: #eef5ff;
  border: 1px solid #d6e4ff;
  border-radius: 12px;
  padding: 12px;
  font-size: 13px;
  color: #3b5ccc;
}

/* COSTOS */

.supply-cost-box {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.supply-cost-auto {
  background: #ecfdf3;
  border: 1px solid #bbf7d0;
  border-radius: 12px;
  padding: 14px;
  display: grid;
  gap: 6px;
}

.supply-cost-auto span {
  font-size: 13px;
  color: #11803b;
  font-weight: 800;
}

.supply-cost-auto strong {
  font-size: 20px;
  color: #16a34a;
}

.supply-cost-auto small {
  font-size: 12px;
  color: #64748b;
}

/* BOTONES */

.modal-actions {
  margin-top: 10px;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.modal-actions .primary-btn,
.modal-actions .secondary-btn {
  border-radius: 999px;
  padding: 10px 22px;
}

.modal {
  padding: 28px 32px !important; /* 🔥 ESTE ES EL FIX CLAVE */
  box-sizing: border-box;
}

.supply-form-structured input,
.supply-form-structured select,
.supply-form-structured textarea {
  height: 44px;
  padding: 0 14px;
  border-radius: 10px;
  border: 1px solid #dcdfe4;
  background: #fff;
  font-size: 14px;
  transition: all 0.2s ease;
}

.supply-form-structured textarea {
  height: auto;
  padding: 10px 14px;
}

.supply-form-structured input:focus,
.supply-form-structured select:focus,
.supply-form-structured textarea:focus {
  border-color: #2d6cdf;
  box-shadow: 0 0 0 2px rgba(45,108,223,0.1);
  outline: none;
}

.supply-block {
  margin-bottom: 26px;
}

.supply-block-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

.supply-block-title span {
  width: 26px;
  height: 26px;
  background: #2d6cdf;
  color: #fff;
  border-radius: 50%;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.supply-block-title h3 {
  font-size: 15px;
  font-weight: 600;
}

.supply-cost-box {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 18px;
  align-items: center;
}

.supply-cost-auto {
  background: #e9f7ef;
  border: 1px solid #b7e4c7;
  border-radius: 12px;
  padding: 14px 16px;
}

.supply-cost-auto span {
  font-size: 13px;
  color: #2f855a;
  font-weight: 500;
}

.supply-cost-auto strong {
  display: block;
  font-size: 20px;
  color: #1b7f4c;
  margin-top: 4px;
}

.supply-cost-auto small {
  display: block;
  font-size: 12px;
  color: #5a7f6b;
  margin-top: 4px;
}

.supply-info-box {
  background: #eef4ff;
  border: 1px solid #c9d8ff;
  padding: 12px;
  border-radius: 10px;
  font-size: 13px;
  color: #2d4ea2;
}

.field-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}

.modal-actions {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

/* ===== NUEVO MATERIAL DEL CATÁLOGO - PIXEL UI ===== */

.supply-catalog-modal {
  width: min(900px, calc(100vw - 48px)) !important;
  max-height: calc(100vh - 54px);
  overflow-y: auto;
  padding: 30px 38px 24px !important;
  border-radius: 28px !important;
  box-sizing: border-box;
}

.supply-modal-head {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 28px;
}

.supply-modal-head h2 {
  margin: 0;
  color: #071532;
  font-size: 28px;
  line-height: 1.05;
  letter-spacing: -0.04em;
}

.supply-modal-head p {
  max-width: 720px;
  margin: 12px 0 0;
  color: #13264a;
  font-size: 15px;
  line-height: 1.35;
  font-weight: 650;
}

.supply-modal-close {
  width: 42px;
  height: 42px;
  border-radius: 999px;
  background: #f1f6ff;
  color: #071532;
  font-size: 28px;
}

.supply-catalog-form {
  display: grid;
  gap: 0;
}

.supply-section {
  padding: 0 0 22px;
  margin-bottom: 22px;
  border-bottom: 1px solid #dfe7f3;
}

.supply-section:last-of-type {
  margin-bottom: 0;
}

.supply-section-title {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}

.supply-section-title strong {
  color: #071532;
  font-size: 18px;
  font-weight: 900;
  letter-spacing: -0.02em;
}

.supply-section-icon {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  color: #2563eb;
  flex: 0 0 auto;
}

.supply-section-icon svg {
  width: 23px;
  height: 23px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.05;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.supply-grid {
  display: grid;
  gap: 18px;
  align-items: start;
}

.supply-grid-identity,
.supply-grid-buy {
  grid-template-columns: 1.05fr 1fr 1fr;
}

.supply-grid-use {
  grid-template-columns: 1fr 1.25fr;
}

.supply-grid-config {
  grid-template-columns: 220px 1fr;
}

.supply-catalog-form label {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.supply-catalog-form .field-label-row {
  min-height: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 0;
  color: #60728f;
  font-size: 13px;
  font-weight: 900;
}

.supply-catalog-form .field-label-actions {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.supply-catalog-form .required-badge {
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid #f2bd54;
  background: #fff8e8;
  color: #a76100;
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
}

.supply-catalog-form .field-help-btn {
  width: 22px;
  height: 22px;
  border-radius: 999px;
  border: 1px solid #d7e2ef;
  background: #fff;
  color: #6d7f99;
  font-size: 12px;
  font-weight: 900;
  padding: 0;
}

.supply-catalog-form input,
.supply-catalog-form select,
.supply-catalog-form textarea {
  width: 100%;
  min-width: 0;
  height: 45px;
  border: 1px solid #dce5f1;
  border-radius: 13px;
  background: #fff;
  color: #071532;
  font-size: 14px;
  font-weight: 750;
  padding: 0 15px;
  box-sizing: border-box;
  outline: none;
}

.supply-catalog-form textarea {
  height: 57px;
  padding: 12px 15px;
  resize: vertical;
}

.supply-catalog-form input::placeholder,
.supply-catalog-form textarea::placeholder {
  color: #6b7280;
  opacity: .78;
}

.supply-catalog-form input:focus,
.supply-catalog-form select:focus,
.supply-catalog-form textarea:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .1);
}

.supply-info-box {
  min-height: 76px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px;
  border: 1px solid #bfdbfe;
  border-radius: 14px;
  background: #eff6ff;
  box-sizing: border-box;
}

.supply-info-box span {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: #dbeafe;
  color: #2563eb;
  font-size: 13px;
  font-weight: 900;
  font-family: Georgia, serif;
  flex: 0 0 auto;
}

.supply-info-box p {
  margin: 0;
  color: #2557c7;
  font-size: 13px;
  line-height: 1.3;
  font-weight: 750;
}

.supply-cost-panel {
  display: grid;
  grid-template-columns: 1.04fr 1fr;
  gap: 0;
  border: 1px solid #dce5f1;
  border-radius: 16px;
  background: #fff;
  overflow: hidden;
}

.supply-cost-auto {
  padding: 18px;
  border-right: 1px solid #dce5f1;
  background: #f0fdf4;
}

.supply-cost-auto span {
  display: block;
  color: #176c3a;
  font-size: 13px;
  font-weight: 900;
}

.supply-cost-auto strong {
  display: block;
  margin-top: 8px;
  color: #16a34a;
  font-size: 28px;
  line-height: 1;
  font-weight: 950;
}

.supply-cost-auto small {
  display: block;
  margin-top: 10px;
  color: #64748b;
  font-size: 12px;
  line-height: 1.35;
  font-weight: 750;
}

.supply-cost-auto em {
  display: inline-flex;
  margin-top: 12px;
  padding: 8px 10px;
  border-radius: 8px;
  background: #dbeafe;
  color: #2563eb;
  font-size: 12px;
  font-style: normal;
  font-weight: 850;
}

.supply-manual-cost {
  padding: 18px;
}

.supply-manual-cost small {
  margin-top: 4px;
  color: #7a8ba3;
  font-size: 12px;
  line-height: 1.35;
  font-weight: 700;
}

.supply-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 14px;
  padding-top: 18px;
}

.supply-modal-actions .secondary-btn,
.supply-modal-actions .primary-btn {
  min-height: 44px;
  border-radius: 13px;
  padding: 0 24px;
  font-size: 15px;
  font-weight: 900;
}

@media (max-width: 820px) {
  .supply-catalog-modal {
    padding: 24px 20px !important;
  }

  .supply-grid-identity,
  .supply-grid-buy,
  .supply-grid-use,
  .supply-grid-config,
  .supply-cost-panel {
    grid-template-columns: 1fr;
  }

  .supply-cost-auto {
    border-right: 0;
    border-bottom: 1px solid #dce5f1;
  }
}

/* ===== EDITAR USO DEL MATERIAL ===== */

.edit-material-usage-modal {
  width: min(620px, calc(100vw - 48px)) !important;
  padding: 30px 34px 26px !important;
  border-radius: 28px !important;
}

.edit-usage-head {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 24px;
}

.edit-usage-head h2 {
  margin: 0;
  color: #071532;
  font-size: 28px;
  line-height: 1.05;
  letter-spacing: -0.04em;
}

.edit-usage-head p {
  margin: 10px 0 0;
  color: #52647e;
  font-size: 15px;
  font-weight: 700;
}

.edit-usage-close {
  width: 42px;
  height: 42px;
  border-radius: 999px;
  background: #f1f6ff;
  color: #071532;
  font-size: 28px;
}

.edit-usage-form {
  display: grid;
  gap: 20px;
}

.edit-usage-section {
  padding-bottom: 20px;
  border-bottom: 1px solid #dfe7f3;
}

.edit-usage-section-title {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

.edit-usage-section-title span {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: #2563eb;
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 14px;
  font-weight: 900;
}

.edit-usage-section-title strong {
  color: #071532;
  font-size: 17px;
  font-weight: 900;
}

.edit-usage-identity {
  display: grid;
  grid-template-columns: 1.2fr .9fr .8fr;
  gap: 14px;
}

.edit-usage-identity div {
  padding: 14px;
  border: 1px solid #dce5f1;
  border-radius: 14px;
  background: #f8fbff;
}

.edit-usage-identity small,
.edit-usage-qty-label > span,
.edit-usage-manual-cost > span {
  display: block;
  margin-bottom: 7px;
  color: #60728f;
  font-size: 13px;
  font-weight: 900;
}

.edit-usage-identity strong {
  color: #071532;
  font-size: 15px;
  font-weight: 900;
}

.edit-usage-qty-label {
  display: grid;
}

.edit-usage-qty {
  display: grid;
  grid-template-columns: 48px 1fr 48px auto;
  align-items: center;
  max-width: 360px;
}

.edit-usage-qty button,
.edit-usage-qty input {
  height: 48px;
  border: 1px solid #dce5f1;
  background: #fff;
}

.edit-usage-qty button {
  display: grid;
  place-items: center;
  color: #2563eb;
  font-size: 22px;
  font-weight: 900;
}

.edit-usage-qty button:first-child {
  border-radius: 14px 0 0 14px;
}

.edit-usage-qty button:nth-child(3) {
  border-radius: 0 14px 14px 0;
}

.edit-usage-qty input {
  border-left: 0;
  border-right: 0;
  text-align: center;
  color: #071532;
  font-size: 15px;
  font-weight: 900;
  outline: none;
}

.edit-usage-qty em {
  margin-left: 12px;
  color: #52647e;
  font-size: 13px;
  font-style: normal;
  font-weight: 800;
}

.edit-usage-toggle {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-top: 16px;
  padding: 14px;
  border: 1px solid #dce5f1;
  border-radius: 14px;
  background: #f8fbff;
}

.edit-usage-toggle input {
  margin-top: 4px;
  accent-color: #2563eb;
}

.edit-usage-toggle strong,
.edit-usage-toggle small {
  display: block;
}

.edit-usage-toggle strong {
  color: #071532;
  font-size: 14px;
}

.edit-usage-toggle small {
  margin-top: 3px;
  color: #64748b;
  font-size: 12px;
  font-weight: 700;
}

.edit-usage-manual-cost {
  display: grid;
  margin-top: 14px;
}

.edit-usage-manual-cost input,
.edit-usage-section textarea {
  width: 100%;
  min-height: 46px;
  border: 1px solid #dce5f1;
  border-radius: 13px;
  padding: 0 14px;
  color: #071532;
  font-size: 14px;
  font-weight: 800;
  box-sizing: border-box;
}

.edit-usage-section textarea {
  min-height: 82px;
  padding: 12px 14px;
  resize: vertical;
}

.edit-usage-preview {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  padding: 18px;
  border: 1px solid #bbf7d0;
  border-radius: 16px;
  background: #ecfdf3;
}

.edit-usage-preview span,
.edit-usage-preview strong {
  color: #16a34a;
  font-weight: 950;
}

.edit-usage-preview small {
  display: block;
  margin-top: 4px;
  color: #64748b;
  font-size: 12px;
  font-weight: 750;
}

.edit-usage-preview strong {
  font-size: 22px;
}

.edit-usage-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

.edit-usage-actions .secondary-btn,
.edit-usage-actions .primary-btn {
  min-height: 44px;
  border-radius: 999px;
  padding: 0 24px;
  font-size: 15px;
  font-weight: 900;
}


/* Procedimientos: botones coherentes con Materiales/Insumos */

.procedure-card-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.procedure-action-detail {
  min-height: 42px;
  border-radius: 999px;
  padding: 0 22px;
  font-weight: 900;
  box-shadow: 0 12px 26px rgba(37, 99, 235, .18);
}

.procedure-action-edit {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border-radius: 999px;
  padding: 0 16px;
  background: #eaf6ff;
  color: #2563eb;
  border: 1px solid #cfe9ff;
  font-weight: 900;
}

.procedure-action-icon {
  width: 16px;
  height: 16px;
  display: inline-grid;
  place-items: center;
}

.procedure-action-icon svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.procedure-action-delete {
  width: 42px;
  height: 42px;
  padding: 0;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  border: 1px solid #fecaca;
  background: #fff;
  color: #ef4444;
}

.procedure-action-delete svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.procedure-action-delete:hover {
  background: #fff5f5;
  border-color: #fca5a5;
}

.procedure-action-edit:hover {
  background: #dff1ff;
  border-color: #b8ddff;
}

/* ===== MODAL PROCEDIMIENTO PREMIUM ===== */

.procedure-modal-premium {
  width: min(760px, calc(100vw - 48px)) !important;
  max-height: calc(100vh - 44px);
  overflow-y: auto;
  padding: 32px 36px 26px !important;
  border-radius: 28px !important;
}

.procedure-modal-head {
  display: flex;
  justify-content: space-between;
  gap: 22px;
  margin-bottom: 28px;
}

.procedure-modal-head h2 {
  margin: 0;
  color: #071532;
  font-size: 28px;
  line-height: 1.05;
  letter-spacing: -0.04em;
}

.procedure-modal-head p {
  margin: 10px 0 0;
  color: #60728f;
  font-size: 15px;
  font-weight: 700;
}

.procedure-modal-close {
  width: 42px;
  height: 42px;
  border-radius: 999px;
  background: #f1f6ff;
  color: #071532;
  font-size: 28px;
}

.procedure-form-premium {
  display: grid;
  gap: 0;
}

.procedure-form-section {
  padding-bottom: 24px;
  margin-bottom: 24px;
  border-bottom: 1px solid #dfe7f3;
}

.procedure-section-title {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 18px;
}

.procedure-section-title > span {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: #2563eb;
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 14px;
  font-weight: 900;
  flex: 0 0 auto;
}

.procedure-section-title strong {
  color: #071532;
  font-size: 17px;
  font-weight: 950;
}

.procedure-section-title small {
  display: block;
  margin-top: 5px;
  color: #60728f;
  font-size: 13px;
  font-weight: 700;
}

.procedure-form-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 22px;
}

.procedure-field-full {
  display: grid;
  margin-bottom: 18px;
}

.procedure-field-half {
  display: grid;
  max-width: 300px;
  margin-bottom: 16px;
}

.procedure-form-premium label {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.procedure-form-premium .field-label-row {
  min-height: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin: 0;
  color: #60728f;
  font-size: 13px;
  font-weight: 900;
}

.procedure-form-premium input,
.procedure-form-premium select,
.procedure-form-premium textarea {
  width: 100%;
  min-width: 0;
  height: 48px;
  border: 1px solid #dce5f1;
  border-radius: 13px;
  background: #fff;
  color: #071532;
  font-size: 15px;
  font-weight: 800;
  padding: 0 15px;
  box-sizing: border-box;
  outline: none;
}

.procedure-form-premium textarea {
  height: 72px;
  padding: 13px 15px;
  resize: vertical;
}

.procedure-form-premium input:focus,
.procedure-form-premium select:focus,
.procedure-form-premium textarea:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .1);
}

.procedure-info-box {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid #bfdbfe;
  border-radius: 14px;
  background: #eff6ff;
  color: #2557c7;
  font-size: 13px;
  font-weight: 750;
}

.procedure-info-box span {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: #dbeafe;
  color: #2563eb;
  font-family: Georgia, serif;
  font-weight: 900;
}

.procedure-info-box p {
  margin: 0;
}

.procedure-cost-panel {
  padding: 16px;
  border: 1px solid #dce5f1;
  border-radius: 16px;
  background: #fbfdff;
}

.procedure-price-suggested {
  padding: 16px;
  border: 1px solid #bfdbfe;
  border-radius: 16px;
  background: #eff6ff;
}

.procedure-price-suggested input {
  border: 0;
  padding: 0;
  height: auto;
  background: transparent;
  color: #2563eb;
  font-size: 28px;
  font-weight: 950;
}

.procedure-price-suggested small,
.procedure-min-price small {
  color: #60728f;
  font-size: 13px;
  font-weight: 700;
}

.procedure-min-price {
  margin-top: 18px;
  padding: 16px;
  border: 1px solid #bbf7d0;
  border-radius: 16px;
  background: #ecfdf3;
}

.procedure-min-price input {
  border: 0;
  padding: 0;
  height: auto;
  background: transparent;
  color: #16a34a;
  font-size: 24px;
  font-weight: 950;
  text-align: right;
}

.procedure-percent-field {
  display: grid;
  grid-template-columns: 1fr 54px;
  border: 1px solid #dce5f1;
  border-radius: 13px;
  overflow: hidden;
  background: #fff;
}

.procedure-percent-field input {
  border: 0;
  border-radius: 0;
}

.procedure-percent-field span {
  display: grid;
  place-items: center;
  border-left: 1px solid #dce5f1;
  color: #60728f;
  font-weight: 900;
}

.procedure-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 14px;
  padding-top: 4px;
}

.procedure-modal-actions .secondary-btn,
.procedure-modal-actions .primary-btn {
  min-height: 46px;
  border-radius: 999px;
  padding: 0 26px;
  font-size: 15px;
  font-weight: 900;
}

@media (max-width: 760px) {
  .procedure-modal-premium {
    padding: 24px 20px !important;
  }

  .procedure-form-grid-2 {
    grid-template-columns: 1fr;
  }

  .procedure-field-half {
    max-width: none;
  }
}

.procedure-price-suggested strong,
.procedure-min-price strong {
  display: block;
  margin-top: 8px;
  font-size: 28px;
  line-height: 1;
  font-weight: 950;
}

.procedure-price-suggested strong {
  color: #2563eb;
}

.procedure-min-price strong {
  color: #16a34a;
  text-align: right;
}

/* Procedimientos: botones iguales a Materiales/Insumos */

.procedure-card-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: nowrap;
}

.procedure-action-detail,
.procedure-action-edit {
  min-height: 40px !important;
  height: 40px !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 18px !important;
  border-radius: 11px !important;
  background: #eaf6ff !important;
  border: 1px solid #cfe9ff !important;
  color: #2563eb !important;
  font-size: 15px;
  font-weight: 900;
  box-shadow: none !important;
}

.procedure-action-detail:hover,
.procedure-action-edit:hover {
  background: #dff1ff !important;
  border-color: #b8ddff !important;
}

.procedure-action-delete {
  width: 40px !important;
  height: 40px !important;
  min-height: 40px !important;
  padding: 0 !important;
  display: inline-grid !important;
  place-items: center;
  border-radius: 11px !important;
  border: 1px solid #fecaca !important;
  background: #fff !important;
  color: #ef4444 !important;
  box-shadow: none !important;
}

.procedure-action-delete svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.procedure-action-delete:hover {
  background: #fff5f5 !important;
  border-color: #fca5a5 !important;
}

.procedure-action-icon {
  width: 16px;
  height: 16px;
  display: inline-grid;
  place-items: center;
}

.procedure-action-icon svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Procedimientos: tarjetas resumen con iconos tipo Materiales */

.procedure-summary-premium {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

.procedure-summary-card {
  min-height: 126px;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 24px;
  background: rgba(255,255,255,.92);
  border: 1px solid #dbe5f2;
  border-radius: 20px;
  box-shadow: 0 16px 42px rgba(15, 23, 42, .07);
}

.procedure-summary-icon {
  width: 58px;
  height: 58px;
  flex: 0 0 58px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: #eaf3ff;
  color: #2563eb;
}

.procedure-summary-icon svg {
  width: 31px;
  height: 31px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.procedure-summary-card span:not(.procedure-summary-icon) {
  display: block;
  color: #64748b;
  font-size: 16px;
  font-weight: 800;
  line-height: 1.15;
}

.procedure-summary-card strong {
  display: block;
  margin-top: 8px;
  color: #0b1735;
  font-size: 32px;
  line-height: 1;
  font-weight: 950;
  letter-spacing: -.04em;
}

@media (max-width: 1100px) {
  .procedure-summary-premium {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 680px) {
  .procedure-summary-premium {
    grid-template-columns: 1fr;
  }
}

/* ===== Parámetros de costeo ===== */

.cost-settings-page {
  display: grid;
  gap: 28px;
}

.cost-settings-hero {
  margin-bottom: 8px;
}

.cost-settings-card {
  background: rgba(255, 255, 255, .94);
  border: 1px solid #dbe5f2;
  border-radius: 24px;
  padding: 28px;
  box-shadow: 0 18px 45px rgba(15, 23, 42, .06);
}

.cost-settings-card-head {
  margin-bottom: 26px;
}

.cost-settings-card-head h2 {
  margin: 0;
  color: #071532;
  font-size: 26px;
  line-height: 1.1;
  letter-spacing: -.035em;
}

.cost-settings-card-head p {
  margin: 18px 0 0;
  color: #52647e;
  font-size: 16px;
  line-height: 1.45;
  font-weight: 650;
}

.cost-settings-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 18px;
  row-gap: 16px;
}

.cost-settings-form label {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.cost-settings-form label > span {
  color: #60728f;
  font-size: 14px;
  font-weight: 900;
}

.cost-settings-form input,
.cost-settings-form select {
  width: 100%;
  height: 46px;
  border: 1px solid #dce5f1;
  border-radius: 14px;
  background: #fff;
  color: #071532;
  font-size: 15px;
  font-weight: 850;
  padding: 0 16px;
  box-sizing: border-box;
  outline: none;
}

.cost-settings-form input:focus,
.cost-settings-form select:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .1);
}

.cost-settings-actions {
  grid-column: 1 / -1;
  display: flex;
  justify-content: flex-end;
  padding-top: 18px;
}

.cost-settings-actions .primary-btn {
  min-height: 46px;
  border-radius: 999px;
  padding: 0 28px;
  font-size: 15px;
  font-weight: 900;
  box-shadow: 0 16px 32px rgba(37, 99, 235, .18);
}

.cost-volume-card {
  margin-top: 0;
}

@media (max-width: 860px) {
  .cost-settings-form {
    grid-template-columns: 1fr;
  }

  .cost-settings-card {
    padding: 22px;
  }
}

/* ===== PARÁMETROS DE COSTEO - OVERRIDE FINAL ===== */

.cost-settings-page {
  display: grid !important;
  gap: 30px !important;
}

.cost-settings-card {
  background: rgba(255, 255, 255, .96) !important;
  border: 1px solid #dbe5f2 !important;
  border-radius: 28px !important;
  padding: 32px !important;
  box-shadow: 0 18px 48px rgba(15, 23, 42, .07) !important;
}

.cost-settings-card-head {
  margin-bottom: 30px !important;
}

.cost-settings-card-head h2 {
  margin: 0 !important;
  color: #071532 !important;
  font-size: 28px !important;
  line-height: 1.1 !important;
  letter-spacing: -0.04em !important;
  font-weight: 950 !important;
}

.cost-settings-card-head p {
  margin: 18px 0 0 !important;
  color: #52647e !important;
  font-size: 16px !important;
  line-height: 1.45 !important;
  font-weight: 700 !important;
}

.cost-settings-form {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  column-gap: 18px !important;
  row-gap: 16px !important;
}

.cost-settings-form label {
  display: grid !important;
  gap: 8px !important;
  min-width: 0 !important;
}

.cost-settings-form label > span {
  color: #60728f !important;
  font-size: 14px !important;
  font-weight: 900 !important;
}

.cost-settings-form input,
.cost-settings-form select {
  width: 100% !important;
  height: 48px !important;
  border: 1px solid #dce5f1 !important;
  border-radius: 14px !important;
  background: #fff !important;
  color: #071532 !important;
  font-size: 15px !important;
  font-weight: 850 !important;
  padding: 0 16px !important;
  box-sizing: border-box !important;
  outline: none !important;
}

.cost-settings-form input:focus,
.cost-settings-form select:focus {
  border-color: #2563eb !important;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .1) !important;
}

.cost-settings-actions {
  grid-column: 1 / -1 !important;
  display: flex !important;
  justify-content: flex-end !important;
  padding-top: 22px !important;
}

.cost-settings-actions .primary-btn {
  min-height: 48px !important;
  border-radius: 999px !important;
  padding: 0 30px !important;
  font-size: 15px !important;
  font-weight: 900 !important;
  box-shadow: 0 16px 32px rgba(37, 99, 235, .18) !important;
}

/* ===== PARÁMETROS DE COSTEO - REDISEÑO REAL ===== */

.cost-settings-premium-page {
  max-width: 1280px;
  margin: 0 auto;
}

.cost-settings-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  margin: 26px 0 28px;
}

.cost-settings-summary-card {
  min-height: 126px;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 24px;
  background: rgba(255,255,255,.94);
  border: 1px solid #dbe5f2;
  border-radius: 22px;
  box-shadow: 0 16px 42px rgba(15, 23, 42, .07);
}

.cost-settings-summary-icon {
  width: 58px;
  height: 58px;
  flex: 0 0 58px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: #eaf3ff;
  color: #2563eb;
}

.cost-settings-summary-icon svg {
  width: 31px;
  height: 31px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.cost-settings-summary-card span:not(.cost-settings-summary-icon) {
  display: block;
  color: #64748b;
  font-size: 16px;
  font-weight: 850;
}

.cost-settings-summary-card strong {
  display: block;
  margin-top: 8px;
  color: #0b1735;
  font-size: 32px;
  line-height: 1;
  font-weight: 950;
  letter-spacing: -.04em;
}

.cost-settings-main-card {
  padding: 34px !important;
}

.cost-settings-form-premium {
  display: grid;
  gap: 0;
}

.cost-settings-block {
  padding-bottom: 26px;
  margin-bottom: 26px;
  border-bottom: 1px solid #dfe7f3;
}

.cost-settings-block-title {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 20px;
}

.cost-settings-block-title > span {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  color: #fff;
  font-size: 16px;
  font-weight: 950;
  box-shadow: 0 12px 28px rgba(37, 99, 235, .2);
}

.cost-settings-block-title strong {
  display: block;
  color: #071532;
  font-size: 21px;
  font-weight: 950;
  letter-spacing: -.035em;
}

.cost-settings-block-title small {
  display: block;
  margin-top: 5px;
  color: #60728f;
  font-size: 14px;
  line-height: 1.35;
  font-weight: 700;
}

.cost-settings-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.cost-settings-grid label {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.cost-settings-grid label > span {
  color: #60728f;
  font-size: 14px;
  font-weight: 950;
}

.cost-settings-grid input,
.cost-settings-grid select {
  width: 100%;
  height: 50px;
  border: 1px solid #dce5f1;
  border-radius: 15px;
  background: #fff;
  color: #071532;
  font-size: 15px;
  font-weight: 850;
  padding: 0 16px;
  box-sizing: border-box;
  outline: none;
}

.cost-settings-grid input:focus,
.cost-settings-grid select:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .1);
}

.cost-settings-actions {
  display: flex;
  justify-content: flex-end;
  padding-top: 4px;
}

.cost-settings-actions .primary-btn {
  min-height: 48px;
  border-radius: 999px;
  padding: 0 30px;
  font-size: 15px;
  font-weight: 950;
  box-shadow: 0 16px 34px rgba(37, 99, 235, .22);
}

@media (max-width: 1100px) {
  .cost-settings-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .cost-settings-summary-grid,
  .cost-settings-grid {
    grid-template-columns: 1fr;
  }

  .cost-settings-main-card {
    padding: 24px !important;
  }
}

/* ===== PARÁMETROS COSTEO MOCKUP EXACTO ===== */

.cost-settings-mock-page {
  max-width: 1280px;
  margin: 0 auto;
}

.cost-settings-mock-hero {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  margin-bottom: 26px;
}

.cost-settings-mock-hero h1 {
  color: #071532;
  font-size: clamp(36px, 4vw, 48px);
  line-height: 1.02;
  letter-spacing: -.055em;
}

.cost-settings-mock-hero p {
  max-width: 620px;
  color: #52647e;
  font-size: 16px;
  line-height: 1.5;
  font-weight: 650;
}

.cost-settings-top-save {
  min-height: 48px;
  border-radius: 14px;
  padding: 0 26px;
  box-shadow: 0 16px 34px rgba(37, 99, 235, .22);
}

.cost-settings-help-banner {
  min-height: 110px;
  display: grid;
  grid-template-columns: 48px 1fr 170px;
  gap: 18px;
  align-items: center;
  margin-bottom: 30px;
  padding: 24px 30px;
  border: 1px solid #bfdbfe;
  border-radius: 22px;
  background: linear-gradient(135deg, rgba(255,255,255,.86), rgba(239,246,255,.9));
  box-shadow: 0 18px 48px rgba(37, 99, 235, .08);
  overflow: hidden;
}

.cost-settings-help-icon {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: linear-gradient(135deg, #dbeafe, #bfdbfe);
  color: #fff;
  font-size: 23px;
  font-family: Georgia, serif;
  font-weight: 900;
}

.cost-settings-help-banner strong {
  display: block;
  color: #071532;
  font-size: 18px;
  font-weight: 950;
}

.cost-settings-help-banner p {
  margin: 8px 0 0;
  color: #40506b;
  font-size: 14px;
  line-height: 1.45;
  font-weight: 650;
}

.cost-settings-banner-art {
  justify-self: end;
  opacity: .9;
}

.cost-settings-banner-art svg {
  width: 140px;
  height: 86px;
  fill: none;
  stroke: #2563eb;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.cost-settings-mock-card {
  padding: 30px;
  background: rgba(255,255,255,.94);
  border: 1px solid #dbe5f2;
  border-radius: 24px;
  box-shadow: 0 18px 48px rgba(15, 23, 42, .07);
}

.cost-settings-mock-card-head {
  margin-bottom: 28px;
}

.cost-settings-mock-card-head h2 {
  margin: 0;
  color: #071532;
  font-size: 26px;
  letter-spacing: -.04em;
}

.cost-settings-mock-card-head p {
  margin: 10px 0 0;
  color: #52647e;
  font-size: 15px;
  font-weight: 750;
}

.cost-settings-mock-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 30px;
  row-gap: 22px;
}

.cost-settings-field-row {
  display: grid;
  grid-template-columns: 50px 1fr;
  gap: 16px;
  align-items: end;
}

.cost-settings-field-icon {
  width: 46px;
  height: 46px;
  margin-bottom: 4px;
  display: grid;
  place-items: center;
  border-radius: 999px;
}

.cost-settings-field-icon svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.1;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.cost-settings-icon-money,
.cost-settings-icon-calendar,
.cost-settings-icon-card {
  background: #eaf3ff;
  color: #2563eb;
}

.cost-settings-icon-chair,
.cost-settings-icon-cases {
  background: #e8f8ef;
  color: #10b981;
}

.cost-settings-icon-chart,
.cost-settings-icon-person {
  background: #f3e8ff;
  color: #7c3aed;
}

.cost-settings-icon-cabinet,
.cost-settings-icon-tag {
  background: #eef2ff;
  color: #4f46e5;
}

.cost-settings-icon-target {
  background: #fff7ed;
  color: #f97316;
}

.cost-settings-icon-tax,
.cost-settings-icon-team {
  background: #fef2f2;
  color: #ef4444;
}

.cost-settings-field-row label {
  display: grid;
  gap: 8px;
}

.cost-settings-label-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  color: #60728f;
}

.cost-settings-label-row strong {
  font-size: 13px;
  font-weight: 950;
}

.cost-settings-help-dot {
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  border: 1px solid #d7e2ef;
  border-radius: 999px;
  background: #fff;
  color: #60728f;
  font-size: 12px;
  font-weight: 950;
  padding: 0;
}

.cost-settings-mock-form input,
.cost-settings-mock-form select {
  width: 100%;
  height: 42px;
  border: 1px solid #dce5f1;
  border-radius: 12px;
  background: #fff;
  color: #071532;
  font-size: 14px;
  font-weight: 850;
  padding: 0 14px;
  box-sizing: border-box;
  outline: none;
}

.cost-settings-percent-input {
  display: grid;
  grid-template-columns: 1fr 48px;
  border: 1px solid #dce5f1;
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
}

.cost-settings-percent-input input {
  border: 0;
  border-radius: 0;
}

.cost-settings-percent-input span {
  display: grid;
  place-items: center;
  border-left: 1px solid #dce5f1;
  color: #64748b;
  font-weight: 950;
}

.cost-settings-mock-form input:focus,
.cost-settings-mock-form select:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .1);
}

@media (max-width: 900px) {
  .cost-settings-mock-hero,
  .cost-settings-help-banner,
  .cost-settings-mock-form {
    grid-template-columns: 1fr;
  }

  .cost-settings-top-save {
    width: fit-content;
  }

  .cost-settings-banner-art {
    display: none;
  }
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 14px;
}

.nav-icon {
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #506991;
  flex: 0 0 22px;
}

.nav-label {
  flex: 1;
}

.nav-item.active .nav-icon,
.nav-item.active .nav-label {
  color: #1857e6;
}


/* Personal: tarjetas resumen con iconos tipo Materiales/Procedimientos */

.staff-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  margin-bottom: 26px;
}

.staff-summary-card {
  min-height: 126px;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 24px;
  background: rgba(255,255,255,.94);
  border: 1px solid #dbe5f2;
  border-radius: 22px;
  box-shadow: 0 16px 42px rgba(15, 23, 42, .07);
}

.staff-summary-icon {
  width: 58px;
  height: 58px;
  flex: 0 0 58px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: #eaf3ff;
  color: #2563eb;
}

.staff-summary-icon svg {
  width: 31px;
  height: 31px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.staff-summary-card span:not(.staff-summary-icon) {
  display: block;
  color: #64748b;
  font-size: 16px;
  font-weight: 850;
  line-height: 1.15;
}

.staff-summary-card strong {
  display: block;
  margin-top: 8px;
  color: #0b1735;
  font-size: 32px;
  line-height: 1;
  font-weight: 950;
  letter-spacing: -.04em;
}

@media (max-width: 1100px) {
  .staff-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 680px) {
  .staff-summary-grid {
    grid-template-columns: 1fr;
  }
}

/* Pacientes: tarjetas resumen con iconos tipo Materiales/Procedimientos */

.patient-summary-premium {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  margin-bottom: 26px;
}

.patient-summary-card {
  min-height: 126px;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 24px;
  background: rgba(255,255,255,.94);
  border: 1px solid #dbe5f2;
  border-radius: 22px;
  box-shadow: 0 16px 42px rgba(15, 23, 42, .07);
}

.patient-summary-icon {
  width: 58px;
  height: 58px;
  flex: 0 0 58px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: #eaf3ff;
  color: #2563eb;
}

.patient-summary-icon svg {
  width: 31px;
  height: 31px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.patient-summary-card span:not(.patient-summary-icon) {
  display: block;
  color: #64748b;
  font-size: 16px;
  font-weight: 850;
  line-height: 1.15;
}

.patient-summary-card strong {
  display: block;
  margin-top: 8px;
  color: #0b1735;
  font-size: 32px;
  line-height: 1;
  font-weight: 950;
  letter-spacing: -.04em;
}

/* Costos fijos: tarjetas resumen con iconos tipo Materiales/Procedimientos */

.fixed-cost-summary-grid {
  display: grid;

  grid-template-columns:
    repeat(
      auto-fit,
      minmax(240px, 1fr)
    );

  gap: 18px;

  margin-bottom: 24px;

  align-items: stretch;
}

.fixed-cost-summary-card {
  min-height: 126px;
  min-width: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 24px;
  background: rgba(255,255,255,.94);
  border: 1px solid #dbe5f2;
  border-radius: 22px;
  box-shadow: 0 16px 42px rgba(15, 23, 42, .07);
}

.fixed-cost-summary-icon {
  width: 58px;
  height: 58px;
  flex: 0 0 58px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: #eaf3ff;
  color: #2563eb;
}

.fixed-cost-summary-icon svg {
  width: 31px;
  height: 31px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.fixed-cost-summary-card span:not(.fixed-cost-summary-icon) {
  display: block;
  color: #64748b;
  font-size: 16px;
  font-weight: 850;
  line-height: 1.15;
}

.fixed-cost-summary-card strong {
  display: block;
  margin-top: 8px;
  color: #0b1735;
  font-size: 32px;
  line-height: 1;
  font-weight: 950;
  letter-spacing: -.04em;
}

@media (max-width: 1100px) {
  .fixed-cost-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 680px) {
  .fixed-cost-summary-grid {
    grid-template-columns: 1fr;
  }
}

.calculation-materials-entry {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  margin: 18px 0;
  padding: 18px;
  border: 1px solid #dbe5f2;
  border-radius: 18px;
  background: #f8fbff;
}

.calculation-materials-entry strong {
  display: block;
  color: #071532;
  font-size: 16px;
  font-weight: 950;
}

.calculation-materials-entry p {
  margin: 5px 0 0;
  color: #60728f;
  font-size: 13px;
  font-weight: 700;
}

.calculation-materials-entry .secondary-btn {
  border-radius: 999px;
  padding: 0 20px;
  min-height: 42px;
}

/* Modal materiales del procedimiento: resumen superior compacto */

.procedure-materials-modal {
  width: min(780px, calc(100vw - 48px)) !important;
  max-height: calc(100vh - 48px);
  overflow-y: auto;
}

.procedure-materials-modal .procedure-materials-summary {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 16px !important;
  margin: 20px 0 22px !important;
}

.procedure-materials-modal .procedure-materials-summary .costs-summary-card {
  min-height: 118px !important;
  padding: 22px !important;
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
}

.procedure-materials-modal .procedure-materials-summary .costs-summary-icon {
  width: 56px !important;
  height: 56px !important;
  flex: 0 0 56px !important;
}

.procedure-materials-modal .procedure-materials-summary .costs-summary-icon svg {
  width: 28px !important;
  height: 28px !important;
}

.procedure-materials-modal .procedure-materials-summary .costs-summary-card div {
  min-width: 0 !important;
}

.procedure-materials-modal .procedure-materials-summary .costs-summary-card span {
  font-size: 14px !important;
  line-height: 1.15 !important;
}

.procedure-materials-modal .procedure-materials-summary .costs-summary-card strong {
  font-size: 28px !important;
  line-height: 1 !important;
  margin-top: 6px !important;
}

.procedure-materials-title-clean {
  gap: 0 !important;
}

@media (max-width: 720px) {
  .procedure-materials-modal .procedure-materials-summary {
    grid-template-columns: 1fr !important;
  }
}

/* Catálogo de materiales: tarjetas resumen con iconos */

.material-catalog-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  margin-bottom: 26px;
}

.material-catalog-summary-card {
  min-height: 126px;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 24px;
  background: rgba(255,255,255,.94);
  border: 1px solid #dbe5f2;
  border-radius: 22px;
  box-shadow: 0 16px 42px rgba(15, 23, 42, .07);
}

.material-catalog-summary-icon {
  width: 58px;
  height: 58px;
  flex: 0 0 58px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: #eaf3ff;
  color: #2563eb;
}

.material-catalog-summary-icon svg {
  width: 31px;
  height: 31px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.material-catalog-summary-card span:not(.material-catalog-summary-icon) {
  display: block;
  color: #64748b;
  font-size: 16px;
  font-weight: 850;
  line-height: 1.15;
}

.material-catalog-summary-card strong {
  display: block;
  margin-top: 8px;
  color: #0b1735;
  font-size: 32px;
  line-height: 1;
  font-weight: 950;
  letter-spacing: -.04em;
}

@media (max-width: 1100px) {
  .material-catalog-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 680px) {
  .material-catalog-summary-grid {
    grid-template-columns: 1fr;
  }
}

/* Catálogo de materiales: botones iguales a procedimientos/materiales */

.material-catalog-row-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: nowrap;
}

.material-catalog-action-edit {
  min-height: 40px !important;
  height: 40px !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 18px !important;
  border-radius: 11px !important;
  background: #eaf6ff !important;
  border: 1px solid #cfe9ff !important;
  color: #2563eb !important;
  font-size: 15px;
  font-weight: 900;
  box-shadow: none !important;
}

.material-catalog-action-edit:hover {
  background: #dff1ff !important;
  border-color: #b8ddff !important;
}

.material-catalog-action-icon {
  width: 16px;
  height: 16px;
  display: inline-grid;
  place-items: center;
}

.material-catalog-action-icon svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.material-catalog-action-delete {
  width: 40px !important;
  height: 40px !important;
  min-height: 40px !important;
  padding: 0 !important;
  display: inline-grid !important;
  place-items: center;
  border-radius: 11px !important;
  border: 1px solid #fecaca !important;
  background: #fff !important;
  color: #ef4444 !important;
  box-shadow: none !important;
}

.material-catalog-action-delete svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.material-catalog-action-delete:hover {
  background: #fff5f5 !important;
  border-color: #fca5a5 !important;
}

/* ===== Clínica / Marca premium ===== */

.clinic-brand-page {
  max-width: 1100px;
  margin: 0 auto;
}

.clinic-brand-hero {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  margin-bottom: 24px;
}

.clinic-brand-hero h1 {
  color: #071532;
  font-size: clamp(34px, 4vw, 46px);
  line-height: 1.02;
  letter-spacing: -.055em;
  margin: 0;
}

.clinic-brand-hero p {
  max-width: 720px;
  color: #52647e;
  font-size: 15px;
  line-height: 1.45;
  font-weight: 650;
}

.clinic-top-save {
  min-height: 46px;
  border-radius: 12px;
  padding: 0 24px;
  box-shadow: 0 16px 34px rgba(37, 99, 235, .22);
}

.clinic-help-banner {
  min-height: 92px;
  display: grid;
  grid-template-columns: 44px 1fr 150px;
  gap: 18px;
  align-items: center;
  margin-bottom: 24px;
  padding: 22px 28px;
  border: 1px solid #bfdbfe;
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(255,255,255,.9), rgba(239,246,255,.92));
  box-shadow: 0 18px 48px rgba(37, 99, 235, .08);
  overflow: hidden;
}

.clinic-help-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: #dbeafe;
  color: #2563eb;
  font-size: 22px;
  font-family: Georgia, serif;
  font-weight: 900;
}

.clinic-help-banner strong {
  display: block;
  color: #071532;
  font-size: 17px;
  font-weight: 950;
}

.clinic-help-banner p {
  margin: 7px 0 0;
  color: #40506b;
  font-size: 13px;
  line-height: 1.45;
  font-weight: 650;
}

.clinic-banner-art {
  justify-self: end;
  opacity: .82;
}

.clinic-banner-art svg {
  width: 130px;
  height: 78px;
  fill: none;
  stroke: #2563eb;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.clinic-brand-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
}

.clinic-card {
  background: rgba(255,255,255,.94);
  border: 1px solid #dbe5f2;
  border-radius: 22px;
  padding: 24px;
  box-shadow: 0 18px 48px rgba(15, 23, 42, .07);
}

.clinic-identity-card,
.clinic-bottom-actions {
  grid-column: 1 / -1;
}

.clinic-section-title {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 22px;
}

.clinic-section-title span {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: #2563eb;
  color: #fff;
  font-size: 14px;
  font-weight: 950;
}

.clinic-section-title strong {
  color: #071532;
  font-size: 18px;
  font-weight: 950;
}

.clinic-grid {
  display: grid;
  gap: 18px;
  margin-bottom: 18px;
}

.clinic-grid-2 {
  grid-template-columns: 1fr 1fr;
}

.clinic-grid-3 {
  grid-template-columns: 1fr 1fr 1.3fr;
}

.clinic-card label,
.clinic-contact-list label,
.clinic-booking-grid label {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.clinic-card label > span,
.clinic-contact-list label > span,
.clinic-booking-grid label > span {
  color: #60728f;
  font-size: 13px;
  font-weight: 950;
}

.clinic-card input,
.clinic-card select,
.clinic-card textarea {
  width: 100%;
  min-width: 0;
  height: 44px;
  border: 1px solid #dce5f1;
  border-radius: 13px;
  background: #fff;
  color: #071532;
  font-size: 14px;
  font-weight: 800;
  padding: 0 14px;
  box-sizing: border-box;
  outline: none;
}

.clinic-card textarea {
  height: 78px;
  padding: 12px 14px;
  resize: vertical;
}

.clinic-card input:focus,
.clinic-card select:focus,
.clinic-card textarea:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .1);
}

.clinic-logo-field {
  grid-column: span 1;
}

.clinic-logo-upload {
  display: grid;
  grid-template-columns: 96px 1fr;
  align-items: center;
  gap: 16px;
  padding: 10px;
  border: 1px dashed #c8d8ee;
  border-radius: 16px;
}

.clinic-logo-upload input {
  display: none;
}

.clinic-logo-preview-box {
  width: 88px;
  height: 88px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  background: #fff;
  border: 1px solid #e2e8f0;
  overflow: hidden;
}

.clinic-logo-preview-box img,
.clinic-public-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.clinic-logo-preview-box span,
.clinic-public-logo span {
  color: #2563eb;
  font-size: 28px;
  font-weight: 950;
}

.clinic-logo-btn {
  width: fit-content;
  border-radius: 999px;
}

.clinic-logo-upload small {
  display: block;
  margin-top: 8px;
  color: #64748b;
  font-size: 12px;
  font-weight: 700;
}

.clinic-contact-list {
  display: grid;
  gap: 16px;
}

.clinic-hours-table {
  border: 1px solid #dce5f1;
  border-radius: 16px;
  overflow: hidden;
}

.clinic-hours-head,
.clinic-hours-row {
  display: grid;
  grid-template-columns: 1fr 80px 1fr 1fr 70px;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
}

.clinic-hours-head {
  background: #f8fbff;
  color: #60728f;
  font-size: 12px;
  font-weight: 950;
}

.clinic-hours-row {
  border-top: 1px solid #edf2f7;
}

.clinic-hours-row strong {
  color: #42526d;
  font-size: 13px;
}

.clinic-hours-row small {
  color: #64748b;
  font-size: 12px;
  font-weight: 800;
}

.clinic-switch input {
  display: none;
}

.clinic-switch span {
  width: 42px;
  height: 24px;
  display: block;
  border-radius: 999px;
  background: #94a3b8;
  position: relative;
  cursor: pointer;
}

.clinic-switch span::after {
  content: "";
  width: 18px;
  height: 18px;
  position: absolute;
  left: 3px;
  top: 3px;
  border-radius: 999px;
  background: #fff;
  transition: .2s;
}

.clinic-switch input:checked + span {
  background: #22c55e;
}

.clinic-switch input:checked + span::after {
  transform: translateX(18px);
}

.clinic-info-note {
  margin-top: 14px;
  padding: 12px 14px;
  border: 1px solid #bfdbfe;
  border-radius: 12px;
  background: #eff6ff;
  color: #2557c7;
  font-size: 13px;
  font-weight: 750;
}

.clinic-booking-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 18px;
}

.clinic-toggle-row {
  grid-template-columns: 1fr auto !important;
  align-items: center;
}

.clinic-toggle-row input {
  width: 42px;
  height: 24px;
  accent-color: #22c55e;
}

.clinic-full {
  grid-column: 1 / -1;
}

.clinic-public-preview {
  border: 1px solid #dce5f1;
  border-radius: 18px;
  padding: 20px;
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 18px;
}

.clinic-public-logo {
  width: 120px;
  height: 120px;
  display: grid;
  place-items: center;
  border-radius: 22px;
  background: #fff;
  border: 1px solid #e2e8f0;
  overflow: hidden;
}

.clinic-public-info strong {
  display: block;
  color: #071532;
  font-size: 22px;
  font-weight: 950;
}

.clinic-public-info span,
.clinic-public-info p,
.clinic-public-hours p {
  color: #52647e;
  font-size: 13px;
  font-weight: 750;
}

.clinic-public-hours {
  grid-column: 1 / -1;
  border-top: 1px solid #e2e8f0;
  padding-top: 14px;
}

.clinic-public-hours strong {
  color: #071532;
  font-size: 15px;
  font-weight: 950;
}

.clinic-public-hours p {
  display: flex;
  justify-content: space-between;
  margin: 8px 0 0;
}

.clinic-appearance-card {
  grid-column: 1 / -1;
}

.clinic-bottom-actions {
  display: flex;
  justify-content: flex-end;
}

.clinic-bottom-actions .primary-btn {
  min-height: 46px;
  border-radius: 12px;
  padding: 0 28px;
}

@media (max-width: 980px) {
  .clinic-brand-form,
  .clinic-grid-2,
  .clinic-grid-3,
  .clinic-booking-grid,
  .clinic-help-banner {
    grid-template-columns: 1fr;
  }

  .clinic-banner-art {
    display: none;
  }

  .clinic-brand-hero {
    flex-direction: column;
  }

  .clinic-hours-head {
    display: none;
  }

  .clinic-hours-row {
    grid-template-columns: 1fr;
  }

  .clinic-public-preview {
    grid-template-columns: 1fr;
  }
}

/* Ajustes Clínica / Marca */

.clinic-contact-field {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 12px;
  align-items: end;
}

.clinic-contact-icon {
  width: 22px;
  height: 44px;
  display: grid;
  place-items: center;
  color: #2563eb;
}

.clinic-contact-icon svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.clinic-hours-row select {
  width: 100%;
  height: 38px;
  border: 1px solid #dce5f1;
  border-radius: 10px;
  background: #fff;
  color: #071532;
  font-size: 13px;
  font-weight: 850;
  padding: 0 10px;
  box-sizing: border-box;
}

.clinic-booking-switch-row {
  display: grid !important;
  grid-template-columns: 1fr 48px 24px;
  align-items: center;
  gap: 10px;
}

.clinic-booking-switch-row > span {
  color: #60728f;
  font-size: 13px;
  font-weight: 950;
}

.clinic-booking-switch-row small {
  color: #64748b;
  font-size: 12px;
  font-weight: 850;
}

.clinic-booking-switch-row .clinic-switch {
  justify-self: end;
}

.clinic-appearance-card {
  display: none !important;
}

.clinic-label-with-help {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.clinic-field-help-btn {
  width: 20px;
  height: 20px;
  display: inline-grid;
  place-items: center;
  border: 1px solid #d7e2ef;
  border-radius: 999px;
  background: #fff;
  color: #60728f;
  font-size: 12px;
  font-weight: 950;
  padding: 0;
  cursor: pointer;
}

.clinic-field-help-btn:hover {
  border-color: #2563eb;
  color: #2563eb;
  background: #eff6ff;
}

.clinic-help-modal {
  width: min(460px, calc(100vw - 40px));
}

/* ===== Mi perfil ===== */

.profile-page {
  max-width: 1100px;
  margin: 0 auto;
}

.profile-hero {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  margin-bottom: 24px;
}

.profile-hero h1 {
  color: #071532;
  font-size: clamp(34px, 4vw, 46px);
  line-height: 1.02;
  letter-spacing: -.055em;
  margin: 0;
}

.profile-hero p {
  max-width: 720px;
  color: #52647e;
  font-size: 15px;
  line-height: 1.45;
  font-weight: 650;
}

.profile-top-save {
  min-height: 46px;
  border-radius: 12px;
  padding: 0 24px;
  box-shadow: 0 16px 34px rgba(37, 99, 235, .22);
}

.profile-help-banner {
  min-height: 92px;
  display: grid;
  grid-template-columns: 44px 1fr 150px;
  gap: 18px;
  align-items: center;
  margin-bottom: 24px;
  padding: 22px 28px;
  border: 1px solid #bfdbfe;
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(255,255,255,.9), rgba(239,246,255,.92));
  box-shadow: 0 18px 48px rgba(37, 99, 235, .08);
  overflow: hidden;
}

.profile-help-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: #dbeafe;
  color: #2563eb;
  font-size: 22px;
  font-family: Georgia, serif;
  font-weight: 900;
}

.profile-help-banner strong {
  display: block;
  color: #071532;
  font-size: 17px;
  font-weight: 950;
}

.profile-help-banner p {
  margin: 7px 0 0;
  color: #40506b;
  font-size: 13px;
  line-height: 1.45;
  font-weight: 650;
}

.profile-banner-art {
  justify-self: end;
  opacity: .85;
}

.profile-banner-art svg {
  width: 130px;
  height: 78px;
  fill: none;
  stroke: #2563eb;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.profile-form {
  display: grid;
  gap: 22px;
}

.profile-card {
  background: rgba(255,255,255,.94);
  border: 1px solid #dbe5f2;
  border-radius: 22px;
  padding: 24px;
  box-shadow: 0 18px 48px rgba(15, 23, 42, .07);
}

.profile-section-title {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 22px;
}

.profile-section-title span {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: #2563eb;
  color: #fff;
  font-size: 14px;
  font-weight: 950;
}

.profile-section-title strong {
  color: #071532;
  font-size: 18px;
  font-weight: 950;
}

.profile-personal-layout {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 30px;
}

.profile-avatar-block {
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 12px;
}

.profile-avatar-preview {
  width: 108px;
  height: 108px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: #eaf3ff;
  overflow: hidden;
  color: #2563eb;
  font-size: 34px;
  font-weight: 950;
}

.profile-avatar-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.profile-avatar-block input {
  display: none;
}

.profile-photo-btn {
  border-radius: 12px;
  padding: 0 18px;
}

.profile-avatar-block small {
  color: #64748b;
  font-size: 12px;
  font-weight: 700;
  text-align: center;
}

.profile-personal-fields,
.profile-preferences-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 24px;
}

.profile-card label {
  display: grid;
  gap: 8px;
}

.profile-card label > span,
.profile-security-grid span,
.profile-role-grid span,
.profile-session-grid span {
  color: #60728f;
  font-size: 13px;
  font-weight: 950;
}

.profile-card label > span b {
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  background: #eff6ff;
  color: #2563eb;
  font-size: 11px;
  font-weight: 950;
}

.profile-card input,
.profile-card select {
  width: 100%;
  height: 44px;
  border: 1px solid #dce5f1;
  border-radius: 13px;
  background: #fff;
  color: #071532;
  font-size: 14px;
  font-weight: 800;
  padding: 0 14px;
  box-sizing: border-box;
  outline: none;
}

.profile-card input:disabled {
  background: #f8fbff;
  color: #94a3b8;
}

.profile-card label small {
  color: #64748b;
  font-size: 12px;
  font-weight: 700;
}

.profile-security-grid,
.profile-role-grid,
.profile-session-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.profile-security-grid > div,
.profile-role-grid > div,
.profile-session-grid > div {
  border-right: 1px solid #e2e8f0;
  padding-right: 24px;
}

.profile-security-grid p,
.profile-session-grid small {
  color: #52647e;
  font-size: 13px;
  font-weight: 750;
}

.profile-access-provider strong,
.profile-clinic-mini strong,
.profile-session-grid strong {
  display: block;
  color: #071532;
  font-size: 15px;
  font-weight: 950;
  margin-top: 10px;
}

.profile-access-provider small,
.profile-clinic-mini small {
  display: block;
  color: #64748b;
  font-size: 13px;
  margin-top: 3px;
}

.profile-role-badge {
  display: inline-flex;
  margin-top: 10px;
  width: fit-content;
  padding: 7px 12px;
  border-radius: 999px;
  background: #ede9fe;
  color: #6d28d9;
  font-size: 13px;
  font-weight: 950;
}

.profile-role-grid ul {
  margin: 10px 0 0;
  padding-left: 18px;
  color: #334155;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.7;
}

.profile-notifications {
  display: grid;
  gap: 12px;
}

.profile-switch-row {
  display: grid !important;
  grid-template-columns: 1fr auto;
  align-items: center;
}

.profile-notifications small {
  color: #64748b;
  font-size: 12px;
  font-weight: 750;
}

.profile-session-grid {
  grid-template-columns: 1fr 1fr 1.2fr 1fr;
  align-items: center;
}

.profile-bottom-actions {
  display: flex;
  justify-content: flex-end;
}

.profile-secure-note {
  text-align: center;
  color: #94a3b8;
  font-size: 13px;
  font-weight: 750;
  margin: 10px 0 0;
}

@media (max-width: 980px) {
  .profile-hero,
  .profile-help-banner,
  .profile-personal-layout,
  .profile-personal-fields,
  .profile-preferences-grid,
  .profile-security-grid,
  .profile-role-grid,
  .profile-session-grid {
    grid-template-columns: 1fr;
  }

  .profile-banner-art {
    display: none;
  }

  .profile-security-grid > div,
  .profile-role-grid > div,
  .profile-session-grid > div {
    border-right: 0;
    padding-right: 0;
  }
}

/* Ajustes finos Mi perfil */

.profile-permissions-list {
  margin: 10px 0 0 !important;
  padding: 0 !important;
  list-style: none !important;
  display: grid;
  gap: 7px;
}

.profile-permissions-list li {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #334155;
  font-size: 13px;
  font-weight: 850;
}

.profile-permissions-list li span {
  width: 16px;
  height: 16px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: #dcfce7;
  color: #16a34a;
  font-size: 11px;
  font-weight: 950;
}

.profile-notification-label {
  display: inline-flex !important;
  align-items: center;
  gap: 10px;
}

.profile-notification-label svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: #64748b;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.profile-session-all-btn,
.profile-logout-btn {
  min-height: 48px;
  border-radius: 14px;
  padding: 0 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 900;
  cursor: pointer;
}

.profile-session-all-btn {
  border: 1px solid #d7e6f7;
  background: #eaf6ff;
  color: #174ea6;
}

.profile-session-all-btn:hover {
  background: #dff1ff;
}

.profile-logout-btn {
  border: 1px solid #fecaca;
  background: #fff7f7;
  color: #dc2626;
}

.profile-logout-btn:hover {
  background: #fff1f1;
}

.profile-session-all-btn svg,
.profile-logout-btn svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ===== Usuarios y permisos ===== */

.users-page {
  max-width: 1180px;
  margin: 0 auto;
}

.users-hero {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  margin-bottom: 24px;
}

.users-hero h1 {
  margin: 0;
  color: #071532;
  font-size: clamp(34px, 4vw, 48px);
  line-height: 1.02;
  letter-spacing: -.055em;
}

.users-hero p {
  max-width: 720px;
  color: #52647e;
  font-size: 15px;
  line-height: 1.45;
  font-weight: 650;
}

.users-invite-btn {
  min-height: 50px;
  border-radius: 14px;
  padding: 0 24px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 18px 36px rgba(37, 99, 235, .24);
}

.users-invite-btn svg {
  width: 20px;
  height: 20px;
}

.users-help-banner {
  min-height: 104px;
  display: grid;
  grid-template-columns: 46px 1fr 160px;
  gap: 18px;
  align-items: center;
  margin-bottom: 24px;
  padding: 24px 30px;
  border: 1px solid #bfdbfe;
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(255,255,255,.94), rgba(239,246,255,.92));
  box-shadow: 0 18px 48px rgba(37, 99, 235, .08);
  overflow: hidden;
}

.users-help-icon {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: #dbeafe;
  color: #2563eb;
  font-family: Georgia, serif;
  font-size: 22px;
  font-weight: 950;
}

.users-help-banner strong {
  display: block;
  color: #071532;
  font-size: 18px;
  font-weight: 950;
}

.users-help-banner p {
  margin: 8px 0 0;
  color: #40506b;
  font-size: 14px;
  line-height: 1.45;
  font-weight: 650;
}

.users-banner-art {
  justify-self: end;
  width: 120px;
  height: 80px;
  display: grid;
  place-items: center;
  opacity: .88;
}

.users-banner-art svg {
  width: 92px;
  height: 92px;
  fill: none;
  stroke: #2563eb;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.users-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  margin-bottom: 24px;
}

.users-summary-card {
  min-height: 116px;
  padding: 24px;
  display: flex;
  align-items: center;
  gap: 18px;
  background: rgba(255,255,255,.94);
  border: 1px solid #dbe5f2;
  border-radius: 22px;
  box-shadow: 0 16px 42px rgba(15, 23, 42, .07);
}

.users-summary-icon {
  width: 58px;
  height: 58px;
  flex: 0 0 58px;
  display: grid;
  place-items: center;
  border-radius: 999px;
}

.users-summary-icon svg {
  width: 31px;
  height: 31px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.users-summary-blue {
  background: #eaf3ff;
  color: #2563eb;
}

.users-summary-green {
  background: #dcfce7;
  color: #16a34a;
}

.users-summary-orange {
  background: #fff3d7;
  color: #f59e0b;
}

.users-summary-purple {
  background: #f3e8ff;
  color: #9333ea;
}

.users-summary-card strong {
  display: block;
  color: #071532;
  font-size: 32px;
  line-height: 1;
  font-weight: 950;
  letter-spacing: -.04em;
}

.users-summary-card small {
  display: block;
  margin-top: 6px;
  color: #64748b;
  font-size: 13px;
  font-weight: 850;
}

.users-panel {
  overflow: hidden;
  background: rgba(255,255,255,.96);
  border: 1px solid #dbe5f2;
  border-radius: 22px;
  box-shadow: 0 18px 48px rgba(15, 23, 42, .07);
}

.users-toolbar {
  min-height: 74px;
  padding: 18px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  border-bottom: 1px solid #e6edf7;
}

.users-tabs {
  display: flex;
  gap: 10px;
}

.users-tabs button,
.users-filter-btn {
  height: 42px;
  padding: 0 18px;
  border: 1px solid #dbe5f2;
  border-radius: 14px;
  background: #f8fbff;
  color: #52647e;
  font-size: 14px;
  font-weight: 850;
  cursor: pointer;
}

.users-tabs button.active {
  background: #eaf3ff;
  border-color: #d6e8ff;
  color: #2563eb;
}

.users-tools {
  display: flex;
  align-items: center;
  gap: 12px;
}

.users-search {
  width: 280px;
  height: 42px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 14px;
  border: 1px solid #dbe5f2;
  border-radius: 14px;
  background: #fff;
}

.users-search svg,
.users-filter-btn svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: #64748b;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.users-search input {
  border: 0;
  outline: 0;
  width: 100%;
  color: #071532;
  font-weight: 750;
}

.users-filter-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: #fff;
}

.users-table {
  display: grid;
}

.users-row {
  min-height: 88px;
  display: grid;
  grid-template-columns: 2.2fr 1.1fr 1.1fr 1.1fr .9fr auto;
  gap: 18px;
  align-items: center;
  padding: 16px 18px;
  border-bottom: 1px solid #e6edf7;
}

.users-person {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
}

.users-avatar {
  width: 54px;
  height: 54px;
  flex: 0 0 54px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: linear-gradient(135deg, #dbeafe, #eef2ff);
  color: #2563eb;
  font-size: 15px;
  font-weight: 950;
}

.users-person strong {
  display: block;
  color: #071532;
  font-size: 15px;
  font-weight: 950;
}

.users-person span {
  display: block;
  margin-top: 4px;
  color: #60728f;
  font-size: 13px;
  font-weight: 750;
}

.users-badges {
  display: grid;
  justify-items: start;
  gap: 7px;
}

.users-role-badge,
.users-status-badge {
  width: fit-content;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 950;
}

.users-role-admin {
  background: #dbeafe;
  color: #2563eb;
}

.users-role-doctor {
  background: #dcfce7;
  color: #16a34a;
}

.users-role-assistant {
  background: #e9eef6;
  color: #52647e;
}

.users-status-active {
  background: #dcfce7;
  color: #16a34a;
}

.users-status-inactive {
  background: #fee2e2;
  color: #dc2626;
}

.users-cell span {
  display: block;
  color: #7b8aa3;
  font-size: 12px;
  font-weight: 850;
}

.users-cell strong {
  display: block;
  margin-top: 7px;
  color: #17223b;
  font-size: 13px;
  font-weight: 900;
}

.users-actions {
  display: flex;
  gap: 9px;
}

.users-icon-btn {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid #dbe5f2;
  border-radius: 13px;
  background: #fff;
  color: #52647e;
  cursor: pointer;
}

.users-icon-btn:hover {
  background: #f8fbff;
  color: #2563eb;
}

.users-icon-btn svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.users-pagination {
  display: flex;
  justify-content: center;
  gap: 10px;
  padding: 18px;
}

.users-pagination button {
  width: 38px;
  height: 38px;
  border: 1px solid #dbe5f2;
  border-radius: 13px;
  background: #fff;
  color: #52647e;
  font-weight: 900;
}

.users-pagination button.active {
  background: #eaf3ff;
  color: #2563eb;
  border-color: #bfdbfe;
}

.users-permissions-note {
  margin-top: 22px;
  min-height: 88px;
  display: grid;
  grid-template-columns: 58px 1fr auto;
  align-items: center;
  gap: 18px;
  padding: 22px;
  background: rgba(255,255,255,.94);
  border: 1px solid #dbe5f2;
  border-radius: 22px;
  box-shadow: 0 16px 42px rgba(15, 23, 42, .06);
}

.users-permissions-note > span {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: #eaf3ff;
  color: #2563eb;
}

.users-permissions-note svg {
  width: 31px;
  height: 31px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.users-permissions-note strong {
  display: block;
  color: #071532;
  font-size: 17px;
  font-weight: 950;
}

.users-permissions-note p {
  margin: 5px 0 0;
  color: #60728f;
  font-size: 13px;
  font-weight: 750;
}

@media (max-width: 1100px) {
  .users-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .users-row {
    grid-template-columns: 1fr;
  }

  .users-toolbar,
  .users-tools {
    flex-direction: column;
    align-items: stretch;
  }

  .users-search {
    width: auto;
  }
}


.users-modal {
  border-radius: 18px !important;
  padding: 22px !important;
  border: 1px solid #dbe5f2;
  box-shadow: 0 28px 80px rgba(15, 23, 42, .28);
}

.users-invite-modal {
  width: min(760px, calc(100vw - 36px)) !important;
}

.users-edit-modal {
  width: min(900px, calc(100vw - 36px)) !important;
}

.users-modal-head {
  display: grid;
  grid-template-columns: 56px 1fr 40px;
  gap: 16px;
  align-items: center;
  padding-bottom: 18px;
  border-bottom: 1px solid #e6edf7;
}

.users-modal-head h2 {
  margin: 0;
  color: #071532;
  font-size: 25px;
  font-weight: 950;
  letter-spacing: -.035em;
}

.users-modal-head p {
  margin: 5px 0 0;
  color: #60728f;
  font-size: 13px;
  font-weight: 750;
}

.users-modal-icon,
.users-modal-avatar {
  width: 56px;
  height: 56px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: #eaf3ff;
  color: #2563eb;
  overflow: hidden;
}

.users-modal-icon svg,
.users-modal-avatar svg {
  width: 28px;
  height: 28px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}

.users-modal-avatar img,
.users-modal-avatar span {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  object-fit: cover;
  font-weight: 950;
}

.users-modal-section {
  padding: 18px 0;
  border-bottom: 1px solid #e6edf7;
}

.users-modal-section h3 {
  margin: 0 0 14px;
  color: #071532;
  font-size: 15px;
  font-weight: 950;
}

.users-modal-section > p {
  margin: -8px 0 16px;
  color: #60728f;
  font-size: 13px;
  font-weight: 700;
}

.users-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 22px;
}

.users-form-grid label,
.users-modal-section label {
  display: grid;
  gap: 8px;
  color: #52647e;
  font-size: 13px;
  font-weight: 850;
}

.users-form-grid input,
.users-form-grid select,
.users-modal-section select {
  height: 44px;
  width: 100%;
  border: 1px solid #dbe5f2;
  border-radius: 12px;
  background: #fff;
  padding: 0 14px;
  outline: none;
  color: #071532;
  font-size: 14px;
  font-weight: 750;
}

.users-form-grid input:focus,
.users-form-grid select:focus,
.users-modal-section select:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .10);
}

.users-form-grid b {
  display: inline-flex;
  margin-left: 6px;
  padding: 3px 7px;
  border-radius: 999px;
  background: #eaf3ff;
  color: #2563eb;
  font-size: 10px;
  font-weight: 950;
}

.users-form-grid small,
.users-modal-section small {
  color: #7b8aa3;
  font-size: 11px;
  font-weight: 750;
}

.users-role-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.users-role-card {
  min-height: 194px;
  position: relative;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 9px;
  padding: 20px 16px 18px;
  border: 1px solid #dbe5f2;
  border-radius: 14px;
  background: #fff;
  text-align: center;
  cursor: pointer;
}

.users-role-card input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.users-role-card.selected {
  border-color: #2563eb;
  background: linear-gradient(180deg, #f7fbff, #ffffff);
  box-shadow: inset 0 0 0 1px rgba(37, 99, 235, .18);
}

.users-role-card-green.selected {
  border-color: #22c55e;
  background: linear-gradient(180deg, #f0fff6, #ffffff);
}

.users-role-card-icon {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  color: #fff;
  background: #2563eb;
}

.users-role-card-green .users-role-card-icon {
  background: #22c55e;
}

.users-role-card-gray .users-role-card-icon {
  background: #6b7280;
}

.users-role-card svg {
  width: 27px;
  height: 27px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}

.users-role-card strong {
  color: #071532;
  font-size: 15px;
  font-weight: 950;
}

.users-role-card-blue strong {
  color: #2563eb;
}

.users-role-card-green strong {
  color: #16a34a;
}

.users-role-card p {
  margin: 0;
  max-width: 150px;
  color: #40506b;
  font-size: 12px;
  line-height: 1.35;
  font-weight: 750;
}

.users-role-card small {
  width: 18px;
  height: 18px;
  margin-top: 4px;
  border: 2px solid #bfcbda;
  border-radius: 999px;
}

.users-role-card.selected small {
  border: 5px solid #2563eb;
}

.users-role-card-green.selected small {
  border-color: #2563eb;
}

.users-permission-preview {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 22px;
  align-items: center;
}

.users-permission-info {
  min-height: 88px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  border: 1px solid #dbe5f2;
  border-radius: 14px;
  background: #f8fbff;
}

.users-permission-info span {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: #eaf3ff;
  color: #2563eb;
}

.users-permission-info svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}

.users-permission-info p {
  margin: 0;
  color: #40506b;
  font-size: 12px;
  line-height: 1.35;
  font-weight: 800;
}

.users-permission-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 22px;
}

.users-permission-list span {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #334155;
  font-size: 13px;
  font-weight: 850;
}

.users-permission-list b {
  width: 17px;
  height: 17px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: #2563eb;
  color: #fff;
  font-size: 11px;
}

.users-modal-footer {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding-top: 22px;
}

.users-modal-footer .primary-btn,
.users-modal-footer .secondary-btn {
  min-height: 46px;
  border-radius: 12px;
  padding: 0 22px;
}

.users-edit-identity {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 24px;
  align-items: start;
}

.users-edit-photo {
  display: grid;
  justify-items: center;
  gap: 12px;
}

.users-edit-photo-box {
  width: 92px;
  height: 92px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 999px;
  background: #eaf3ff;
  color: #2563eb;
  font-weight: 950;
}

.users-edit-photo-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.users-edit-two-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  border-bottom: 1px solid #e6edf7;
}

.users-edit-two-cols .users-modal-section {
  border-bottom: 0;
}

.users-edit-two-cols .users-modal-section:first-child {
  border-right: 1px solid #e6edf7;
  padding-right: 22px;
}

.users-status-switch {
  display: flex !important;
  grid-template-columns: none !important;
  align-items: center;
  gap: 12px !important;
}

.users-status-switch input {
  display: none;
}

.users-status-switch span {
  width: 42px;
  height: 24px;
  position: relative;
  border-radius: 999px;
  background: #cbd5e1;
}

.users-status-switch span::after {
  content: "";
  width: 18px;
  height: 18px;
  position: absolute;
  top: 3px;
  left: 3px;
  border-radius: 999px;
  background: #fff;
  transition: .18s ease;
}

.users-status-switch input:checked + span {
  background: #22c55e;
}

.users-status-switch input:checked + span::after {
  transform: translateX(18px);
}

.users-locked-input {
  position: relative;
}

.users-locked-input input {
  padding-right: 42px;
  background: #f8fafc;
  color: #94a3b8;
}

.users-locked-input svg {
  width: 18px;
  height: 18px;
  position: absolute;
  right: 14px;
  top: 13px;
  fill: none;
  stroke: #64748b;
  stroke-width: 2;
}

.users-activity-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border: 1px solid #e6edf7;
  border-radius: 14px;
  overflow: hidden;
}

.users-activity-grid div {
  padding: 16px;
  border-right: 1px solid #e6edf7;
  background: #fff;
}

.users-activity-grid div:last-child {
  border-right: 0;
}

.users-activity-grid span {
  display: block;
  color: #7b8aa3;
  font-size: 12px;
  font-weight: 850;
}

.users-activity-grid strong {
  display: block;
  margin-top: 6px;
  color: #17223b;
  font-size: 13px;
  font-weight: 950;
}

.users-danger-zone {
  margin-top: 18px;
  padding: 16px;
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: center;
  border: 1px solid #fecaca;
  border-radius: 14px;
  background: #fff7f7;
}

.users-danger-zone > div {
  display: flex;
  align-items: center;
  gap: 12px;
}

.users-danger-zone svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: #ef4444;
  stroke-width: 2;
}

.users-danger-zone strong {
  display: block;
  color: #dc2626;
  font-size: 14px;
  font-weight: 950;
}

.users-danger-zone p {
  margin: 4px 0 0;
  color: #7f1d1d;
  font-size: 12px;
  font-weight: 700;
}

.users-danger-zone button {
  height: 42px;
  border: 1px solid #f87171;
  border-radius: 12px;
  background: #fff;
  color: #ef4444;
  padding: 0 16px;
  font-weight: 900;
}

@media (max-width: 780px) {
  .users-form-grid,
  .users-role-cards,
  .users-permission-preview,
  .users-permission-list,
  .users-edit-identity,
  .users-edit-two-cols,
  .users-activity-grid {
    grid-template-columns: 1fr;
  }

  .users-edit-two-cols .users-modal-section:first-child {
    border-right: 0;
    padding-right: 0;
  }

  .users-modal-head {
    grid-template-columns: 48px 1fr 38px;
  }
}

/* ===== FIX DEFINITIVO MODAL USUARIOS / MOCKUP ===== */

#inviteUserModal .users-modal,
#editUserModal .users-modal {
  width: min(760px, calc(100vw - 40px)) !important;
  max-height: calc(100vh - 48px) !important;
  overflow-y: auto !important;
  padding: 0 !important;
  border-radius: 18px !important;
  background: #ffffff !important;
  border: 1px solid #dbe5f2 !important;
  box-shadow: 0 30px 90px rgba(15, 23, 42, .30) !important;
}

#editUserModal .users-modal {
  width: min(900px, calc(100vw - 40px)) !important;
}

#inviteUserModal .users-modal svg,
#editUserModal .users-modal svg {
  width: 20px !important;
  height: 20px !important;
  max-width: 20px !important;
  max-height: 20px !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 2 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  flex: 0 0 auto !important;
}

#inviteUserModal .users-modal-head,
#editUserModal .users-modal-head {
  display: grid !important;
  grid-template-columns: 58px 1fr 36px !important;
  gap: 16px !important;
  align-items: center !important;
  padding: 24px 28px 20px !important;
  border-bottom: 1px solid #e6edf7 !important;
}

#inviteUserModal .users-modal-icon,
#editUserModal .users-modal-avatar {
  width: 58px !important;
  height: 58px !important;
  border-radius: 999px !important;
  display: grid !important;
  place-items: center !important;
  background: #eaf3ff !important;
  color: #2563eb !important;
  overflow: hidden !important;
}

#inviteUserModal .users-modal-icon svg,
#editUserModal .users-modal-avatar svg {
  width: 30px !important;
  height: 30px !important;
  max-width: 30px !important;
  max-height: 30px !important;
}

#inviteUserModal .users-modal-head h2,
#editUserModal .users-modal-head h2 {
  margin: 0 !important;
  color: #071532 !important;
  font-size: 25px !important;
  line-height: 1.05 !important;
  font-weight: 950 !important;
  letter-spacing: -.035em !important;
}

#inviteUserModal .users-modal-head p,
#editUserModal .users-modal-head p {
  margin: 7px 0 0 !important;
  color: #60728f !important;
  font-size: 13px !important;
  font-weight: 700 !important;
}

#inviteUserModal #closeInviteUserModal,
#editUserModal #closeEditUserModal {
  width: 34px !important;
  height: 34px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: #64748b !important;
  box-shadow: none !important;
}

#inviteUserModal .users-modal-body,
#editUserModal .users-modal-body {
  padding: 0 28px 24px !important;
}

#inviteUserModal .users-modal-section,
#editUserModal .users-modal-section {
  padding: 19px 0 !important;
  border-bottom: 1px solid #e6edf7 !important;
}

#inviteUserModal .users-modal-section h3,
#editUserModal .users-modal-section h3 {
  margin: 0 0 15px !important;
  color: #071532 !important;
  font-size: 15px !important;
  font-weight: 950 !important;
}

#inviteUserModal .users-modal-section > p,
#editUserModal .users-modal-section > p {
  margin: -8px 0 16px !important;
  color: #52647e !important;
  font-size: 13px !important;
  font-weight: 700 !important;
}

#inviteUserModal .users-form-grid,
#editUserModal .users-form-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 18px 22px !important;
}

#inviteUserModal label,
#editUserModal label {
  display: grid !important;
  gap: 8px !important;
  color: #52647e !important;
  font-size: 12px !important;
  font-weight: 850 !important;
}

#inviteUserModal input,
#inviteUserModal select,
#editUserModal input,
#editUserModal select {
  width: 100% !important;
  height: 44px !important;
  border: 1px solid #dbe5f2 !important;
  border-radius: 11px !important;
  background: #ffffff !important;
  padding: 0 14px !important;
  color: #071532 !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  outline: none !important;
  box-shadow: none !important;
}

#inviteUserModal input[type="radio"],
#editUserModal input[type="radio"] {
  position: absolute !important;
  opacity: 0 !important;
  pointer-events: none !important;
  width: 1px !important;
  height: 1px !important;
}

#inviteUserModal .users-form-grid b,
#editUserModal .users-form-grid b {
  display: inline-flex !important;
  margin-left: 6px !important;
  padding: 3px 7px !important;
  border-radius: 999px !important;
  background: #eaf3ff !important;
  color: #2563eb !important;
  font-size: 10px !important;
  font-weight: 950 !important;
}

#inviteUserModal .users-role-cards,
#editUserModal .users-role-cards {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 20px !important;
}

#inviteUserModal .users-role-card,
#editUserModal .users-role-card {
  min-height: 198px !important;
  position: relative !important;
  display: grid !important;
  justify-items: center !important;
  align-content: center !important;
  gap: 9px !important;
  padding: 22px 16px 18px !important;
  border: 1px solid #dbe5f2 !important;
  border-radius: 14px !important;
  background: #ffffff !important;
  text-align: center !important;
  cursor: pointer !important;
}

#inviteUserModal .users-role-card.selected,
#editUserModal .users-role-card.selected {
  border-color: #2563eb !important;
  background: linear-gradient(180deg, #f7fbff, #ffffff) !important;
  box-shadow: inset 0 0 0 1px rgba(37, 99, 235, .18) !important;
}

#inviteUserModal .users-role-card-green.selected,
#editUserModal .users-role-card-green.selected {
  border-color: #22c55e !important;
  background: linear-gradient(180deg, #f0fff6, #ffffff) !important;
}

#inviteUserModal .users-role-card-icon,
#editUserModal .users-role-card-icon {
  width: 54px !important;
  height: 54px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 999px !important;
  color: #ffffff !important;
  background: #2563eb !important;
}

#inviteUserModal .users-role-card-green .users-role-card-icon,
#editUserModal .users-role-card-green .users-role-card-icon {
  background: #22c55e !important;
}

#inviteUserModal .users-role-card-gray .users-role-card-icon,
#editUserModal .users-role-card-gray .users-role-card-icon {
  background: #6b7280 !important;
}

#inviteUserModal .users-role-card-icon svg,
#editUserModal .users-role-card-icon svg {
  width: 27px !important;
  height: 27px !important;
  max-width: 27px !important;
  max-height: 27px !important;
  stroke: currentColor !important;
}

#inviteUserModal .users-role-card strong,
#editUserModal .users-role-card strong {
  color: #071532 !important;
  font-size: 15px !important;
  font-weight: 950 !important;
}

#inviteUserModal .users-role-card-blue strong,
#editUserModal .users-role-card-blue strong {
  color: #2563eb !important;
}

#inviteUserModal .users-role-card-green strong,
#editUserModal .users-role-card-green strong {
  color: #16a34a !important;
}

#inviteUserModal .users-role-card p,
#editUserModal .users-role-card p {
  margin: 0 !important;
  max-width: 150px !important;
  color: #40506b !important;
  font-size: 12px !important;
  line-height: 1.35 !important;
  font-weight: 750 !important;
}

#inviteUserModal .users-role-card small,
#editUserModal .users-role-card small {
  width: 18px !important;
  height: 18px !important;
  margin-top: 4px !important;
  display: block !important;
  border: 2px solid #bfcbda !important;
  border-radius: 999px !important;
}

#inviteUserModal .users-role-card.selected small,
#editUserModal .users-role-card.selected small {
  border: 5px solid #2563eb !important;
}

#inviteUserModal .users-permission-preview,
#editUserModal .users-permission-preview {
  display: grid !important;
  grid-template-columns: 240px 1fr !important;
  gap: 22px !important;
  align-items: center !important;
}

#inviteUserModal .users-permission-info,
#editUserModal .users-permission-info {
  min-height: 88px !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 16px !important;
  border: 1px solid #dbe5f2 !important;
  border-radius: 14px !important;
  background: #f8fbff !important;
}

#inviteUserModal .users-permission-info span,
#editUserModal .users-permission-info span {
  width: 42px !important;
  height: 42px !important;
  flex: 0 0 42px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 999px !important;
  background: #eaf3ff !important;
  color: #2563eb !important;
}

#inviteUserModal .users-permission-list,
#editUserModal .users-permission-list {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px 22px !important;
}

#inviteUserModal .users-permission-list span,
#editUserModal .users-permission-list span {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  color: #334155 !important;
  font-size: 13px !important;
  font-weight: 850 !important;
}

#inviteUserModal .users-permission-list b,
#editUserModal .users-permission-list b {
  width: 17px !important;
  height: 17px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 999px !important;
  background: #2563eb !important;
  color: #ffffff !important;
  font-size: 11px !important;
}

#inviteUserModal .users-modal-footer,
#editUserModal .users-modal-footer {
  display: flex !important;
  justify-content: space-between !important;
  gap: 14px !important;
  padding-top: 22px !important;
}

#inviteUserModal .users-modal-footer .primary-btn,
#inviteUserModal .users-modal-footer .secondary-btn,
#editUserModal .users-modal-footer .primary-btn,
#editUserModal .users-modal-footer .secondary-btn {
  min-height: 46px !important;
  border-radius: 12px !important;
  padding: 0 22px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 9px !important;
}

@media (max-width: 780px) {
  #inviteUserModal .users-form-grid,
  #editUserModal .users-form-grid,
  #inviteUserModal .users-role-cards,
  #editUserModal .users-role-cards,
  #inviteUserModal .users-permission-preview,
  #editUserModal .users-permission-preview,
  #inviteUserModal .users-permission-list,
  #editUserModal .users-permission-list {
    grid-template-columns: 1fr !important;
  }
}

/* ===== KLYNIC USERS MODALS - AISLADO DEFINITIVO ===== */

#inviteUserModal,
#editUserModal {
  background: rgba(15, 23, 42, .68) !important;
  backdrop-filter: blur(2px);
  z-index: 9999 !important;
}

.kuser-modal {
  width: min(760px, calc(100vw - 44px));
  max-height: calc(100vh - 44px);
  overflow-y: auto;
  background: #fff;
  border: 1px solid #dbe5f2;
  border-radius: 16px;
  box-shadow: 0 34px 90px rgba(15, 23, 42, .34);
  padding: 0;
}

.kuser-edit-modal {
  width: min(900px, calc(100vw - 44px));
}

.kuser-modal .users-modal-head {
  display: grid;
  grid-template-columns: 58px 1fr 34px;
  gap: 16px;
  align-items: center;
  padding: 24px 28px 20px;
  border-bottom: 1px solid #e6edf7;
}

.kuser-modal .users-modal-icon,
.kuser-modal .users-modal-avatar {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: #eaf3ff;
  color: #2563eb;
  overflow: hidden;
}

.kuser-modal .users-modal-icon svg,
.kuser-modal .users-modal-avatar svg {
  width: 30px !important;
  height: 30px !important;
  max-width: 30px !important;
  max-height: 30px !important;
  fill: none !important;
  stroke: currentColor !important;
}

.kuser-modal h2 {
  margin: 0;
  font-size: 25px;
  line-height: 1.05;
  font-weight: 950;
  letter-spacing: -.035em;
  color: #071532;
}

.kuser-modal .users-modal-head p {
  margin: 7px 0 0;
  color: #60728f;
  font-size: 13px;
  font-weight: 700;
}

.kuser-modal .icon-btn {
  width: 34px;
  height: 34px;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: #64748b;
}

.kuser-modal .icon-btn svg {
  width: 20px !important;
  height: 20px !important;
}

.kuser-modal .users-modal-body {
  padding: 0 28px 24px;
}

.kuser-modal .users-modal-section {
  padding: 19px 0;
  border-bottom: 1px solid #e6edf7;
}

.kuser-modal .users-modal-section h3 {
  margin: 0 0 15px;
  color: #071532;
  font-size: 15px;
  font-weight: 950;
}

.kuser-modal .users-modal-section > p {
  margin: -8px 0 16px;
  color: #52647e;
  font-size: 13px;
  font-weight: 700;
}

.kuser-modal .users-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 22px;
}

.kuser-modal label {
  display: grid;
  gap: 8px;
  color: #52647e;
  font-size: 12px;
  font-weight: 850;
}

.kuser-modal input,
.kuser-modal select {
  width: 100%;
  height: 44px;
  border: 1px solid #dbe5f2;
  border-radius: 11px;
  background: #fff;
  padding: 0 14px;
  color: #071532;
  font-size: 14px;
  font-weight: 700;
  outline: none;
}

.kuser-modal input:focus,
.kuser-modal select:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .10);
}

.kuser-modal b {
  display: inline-flex;
  margin-left: 6px;
  padding: 3px 7px;
  border-radius: 999px;
  background: #eaf3ff;
  color: #2563eb;
  font-size: 10px;
  font-weight: 950;
}

.kuser-role-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.kuser-role-card {
  min-height: 198px;
  position: relative;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 9px;
  padding: 22px 16px 18px;
  border: 1px solid #dbe5f2;
  border-radius: 14px;
  background: #fff;
  text-align: center;
  cursor: pointer;
}

.kuser-role-card input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.kuser-role-icon {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  color: #fff;
  background: #2563eb;
  font-size: 27px;
  line-height: 1;
  font-weight: 900;
}

.kuser-role-green .kuser-role-icon {
  background: #22c55e;
}

.kuser-role-gray .kuser-role-icon {
  background: #6b7280;
  font-size: 21px;
}

.kuser-role-card.selected {
  border-color: #2563eb;
  background: linear-gradient(180deg, #f7fbff, #fff);
  box-shadow: inset 0 0 0 1px rgba(37, 99, 235, .18);
}

.kuser-role-green.selected {
  border-color: #22c55e;
  background: linear-gradient(180deg, #f0fff6, #fff);
}

.kuser-role-card strong {
  font-size: 15px;
  font-weight: 950;
  color: #071532;
}

.kuser-role-blue strong {
  color: #2563eb;
}

.kuser-role-green strong {
  color: #16a34a;
}

.kuser-role-card p {
  max-width: 150px;
  margin: 0;
  color: #40506b;
  font-size: 12px;
  line-height: 1.35;
  font-weight: 750;
}

.kuser-role-card small {
  width: 18px;
  height: 18px;
  display: block;
  border: 2px solid #bfcbda;
  border-radius: 999px;
}

.kuser-role-card.selected small {
  border: 5px solid #2563eb;
}

.kuser-modal .users-permission-preview {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 22px;
  align-items: center;
}

.kuser-modal .users-permission-info {
  min-height: 88px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  border: 1px solid #dbe5f2;
  border-radius: 14px;
  background: #f8fbff;
}

.kuser-modal .users-permission-info span {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: #eaf3ff;
  color: #2563eb;
}

.kuser-modal .users-permission-info svg {
  width: 24px !important;
  height: 24px !important;
}

.kuser-modal .users-permission-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 22px;
}

.kuser-modal .users-permission-list span {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #334155;
  font-size: 13px;
  font-weight: 850;
}

.kuser-modal .users-permission-list b {
  width: 17px;
  height: 17px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: #2563eb;
  color: #fff;
  font-size: 11px;
}

.kuser-modal .users-modal-footer {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding-top: 22px;
}

.kuser-modal .primary-btn,
.kuser-modal .secondary-btn {
  min-height: 46px;
  border-radius: 12px;
  padding: 0 22px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
}

.kuser-modal .primary-btn svg {
  width: 18px !important;
  height: 18px !important;
}

.kuser-modal small {
  color: #7b8aa3;
  font-size: 11px;
  font-weight: 750;
}

@media (max-width: 780px) {
  .kuser-modal .users-form-grid,
  .kuser-role-grid,
  .kuser-modal .users-permission-preview,
  .kuser-modal .users-permission-list {
    grid-template-columns: 1fr;
  }
}

.klynic-inline-icon {
  width: 20px !important;
  height: 20px !important;
  max-width: 20px !important;
  max-height: 20px !important;
  display: block !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 2 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  overflow: visible !important;
  flex: 0 0 auto !important;
}

.users-modal-icon .klynic-inline-icon,
.users-modal-avatar .klynic-inline-icon {
  width: 30px !important;
  height: 30px !important;
  max-width: 30px !important;
  max-height: 30px !important;
}

.users-role-card-icon .klynic-inline-icon,
.users-permission-info .klynic-inline-icon {
  width: 26px !important;
  height: 26px !important;
  max-width: 26px !important;
  max-height: 26px !important;
}

/* ===== USERS: AJUSTES FINALES PUNTUALES ===== */

/* 1. Aire entre "Activo" y el texto descriptivo */
#editUserModal .users-edit-two-cols .users-modal-section > p {
  margin: 12px 0 0 !important;
  padding: 0 !important;
  color: #60728f !important;
  font-size: 12px !important;
  line-height: 1.35 !important;
  font-weight: 750 !important;
}

#editUserModal .users-status-switch {
  margin-bottom: 0 !important;
}

/* 2. Quitar imagen/fondo extraño del listado de usuarios */
.users-row {
  background: #ffffff !important;
  background-image: none !important;
  overflow: hidden !important;
}

.users-avatar {
  overflow: hidden !important;
  background: #eaf3ff !important;
}

.users-avatar img {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  position: static !important;
  inset: auto !important;
  transform: none !important;
  border-radius: 999px !important;
}

/* 3. Centrar perfectamente los checks dentro del círculo */
.kuser-modal .users-permission-list b,
.users-permission-list b {
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  min-height: 18px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 999px !important;
  background: #2563eb !important;
  color: #ffffff !important;
  font-size: 11px !important;
  line-height: 18px !important;
  font-weight: 950 !important;
  text-align: center !important;
}

.kuser-modal .users-permission-list span,
.users-permission-list span {
  align-items: center !important;
}

/* =========================
   DASHBOARD KLYNIC - MOCKUP FINAL
========================= */

.kdash {
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  gap: 20px;
}

.kdash-hero {
  padding-top: 2px;
}

.kdash-brand {
  display: flex;
  align-items: center;
  gap: 18px;
}

.kdash-logo {
  width: 72px;
  height: 72px;
  border-radius: 999px;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: #fff;
  border: 1px solid #e4ebf6;
  box-shadow: 0 12px 34px rgba(15, 23, 42, .08);
}

.kdash-logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.kdash-logo span {
  font-size: 28px;
  font-weight: 950;
  color: #2563eb;
}

.kdash h1 {
  margin: 0;
  color: #071532;
  font-size: 44px;
  line-height: .98;
  letter-spacing: -.055em;
  font-weight: 950;
}

.kdash-brand p:not(.eyebrow) {
  margin: 8px 0 0;
  color: #60728f;
  font-size: 15px;
  font-weight: 750;
}

.kdash-opportunity {
  min-height: 92px;
  padding: 22px;
  display: grid;
  grid-template-columns: 54px 1fr auto;
  gap: 18px;
  align-items: center;
  border: 1px solid #bfdbfe;
  border-radius: 18px;
  background: linear-gradient(135deg, #f8fbff, #fff);
  box-shadow: 0 14px 34px rgba(37, 99, 235, .05);
}

.kdash-opportunity-icon,
.kdash-mini-icon {
  width: 52px;
  height: 52px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-size: 22px;
  font-weight: 950;
}

.kdash-opportunity-icon {
  color: #2563eb;
  background: #dbeafe;
}

.kdash-opportunity strong {
  display: block;
  color: #17223b;
  font-size: 15px;
  font-weight: 950;
}

.kdash-opportunity span {
  display: block;
  margin-top: 6px;
  color: #60728f;
  font-size: 13px;
  font-weight: 750;
}

.kdash-opportunity button,
.kdash-panel-head button,
.kdash-wide-btn,
.kdash-report-btn {
  height: 42px;
  border-radius: 12px;
  border: 1px solid #93c5fd;
  background: #fff;
  color: #2563eb;
  padding: 0 18px;
  font-weight: 900;
}

.kdash-section-label {
  margin: 10px 0 -4px;
  color: #60728f;
  text-transform: uppercase;
  letter-spacing: .09em;
  font-size: 12px;
  font-weight: 950;
}

.kdash-health {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

.kdash-health-card {
  min-height: 148px;
  padding: 24px;
  display: grid;
  grid-template-columns: 58px 1fr;
  gap: 18px;
  align-items: center;
  background: #fff;
  border: 1px solid #dbe5f2;
  border-radius: 18px;
  box-shadow: 0 18px 44px rgba(15, 23, 42, .06);
}

.kdash-health-card span,
.kdash-summary-item span {
  color: #60728f;
  font-size: 12px;
  line-height: 1.25;
  font-weight: 850;
}

.kdash-health-card strong,
.kdash-summary-item strong {
  display: block;
  margin-top: 8px;
  color: #071532;
  font-size: 34px;
  line-height: 1;
  font-weight: 950;
  letter-spacing: -.04em;
}

.kdash-health-card small,
.kdash-summary-item small {
  display: block;
  margin-top: 6px;
  color: #60728f;
  font-size: 11px;
  font-weight: 750;
}

.kdash-health-card b,
.kdash-badge,
.kdash-agenda-row em {
  display: inline-flex;
  width: fit-content;
  margin-top: 10px;
  padding: 6px 11px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 950;
  font-style: normal;
}

.kdash-green .kdash-mini-icon,
.kdash-mini-icon.kdash-green { background: #dcfce7; color: #16a34a; }
.kdash-yellow .kdash-mini-icon,
.kdash-mini-icon.kdash-yellow { background: #fef3c7; color: #f59e0b; }
.kdash-red .kdash-mini-icon,
.kdash-mini-icon.kdash-red { background: #fee2e2; color: #ef4444; }
.kdash-purple .kdash-mini-icon,
.kdash-mini-icon.kdash-purple { background: #f3e8ff; color: #9333ea; }
.kdash-blue .kdash-mini-icon,
.kdash-mini-icon.kdash-blue { background: #dbeafe; color: #2563eb; }
.kdash-gray { background: #f1f5f9; color: #64748b; }

.kdash-health-card.kdash-green b,
.kdash-badge.kdash-green { background: #dcfce7; color: #16a34a; }
.kdash-health-card.kdash-yellow b,
.kdash-badge.kdash-yellow { background: #ffedd5; color: #f59e0b; }
.kdash-health-card.kdash-red b,
.kdash-badge.kdash-red { background: #fee2e2; color: #ef4444; }
.kdash-health-card.kdash-purple b,
.kdash-badge.kdash-purple { background: #f3e8ff; color: #9333ea; }
.kdash-badge.kdash-gray { background: #f1f5f9; color: #64748b; }

.kdash-main-grid {
  display: grid;
  grid-template-columns: 1fr 1.18fr;
  gap: 20px;
}

.kdash-alert-card,
.kdash-summary-card,
.kdash-chart-card,
.kdash-top-card,
.kdash-agenda-card,
.kdash-activity-card {
  background: #fff;
  border: 1px solid #dbe5f2;
  border-radius: 18px;
  box-shadow: 0 18px 44px rgba(15, 23, 42, .06);
}

.kdash-alert-card {
  padding: 24px;
  background: linear-gradient(135deg, #fff7ed, #fff);
  border-color: #fed7aa;
}

.kdash-card-title-row {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 18px;
}

.kdash-alert-icon {
  color: #f97316;
  font-size: 32px;
}

.kdash-alert-card h2 {
  margin: 0;
  color: #071532;
  font-size: 21px;
  font-weight: 950;
}

.kdash-alert-card p {
  margin: 6px 0 0;
  color: #60728f;
  font-size: 13px;
  font-weight: 750;
}

.kdash-alert-list {
  display: grid;
  gap: 10px;
}

.kdash-alert-list button {
  min-height: 54px;
  display: grid;
  grid-template-columns: 24px 1fr 20px;
  align-items: center;
  gap: 10px;
  border: 1px solid #e6edf7;
  border-radius: 13px;
  background: #fff;
  color: #17223b;
  padding: 0 14px;
  text-align: left;
  font-weight: 900;
}

.kdash-alert-list span {
  color: #f97316;
}

.kdash-alert-list b {
  color: #64748b;
  font-size: 24px;
}

.kdash-wide-btn {
  width: 100%;
  height: 54px;
  margin-top: 12px;
  border: 1px solid #dbe5f2;
  background: #fff;
}

.kdash-summary-card {
  padding: 24px;
}

.kdash-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.kdash-panel-head h3 {
  margin: 0;
  color: #60728f;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: 12px;
  font-weight: 950;
}

.kdash-summary-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}

.kdash-summary-item {
  min-height: 132px;
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 16px;
  align-items: center;
  border: 1px solid #e6edf7;
  border-radius: 14px;
  padding: 18px;
}

.kdash-summary-item strong {
  font-size: 24px;
}

.kdash-summary-item small {
  color: #16a34a;
}

.kdash-chart-card,
.kdash-top-card,
.kdash-agenda-card,
.kdash-activity-card {
  padding: 24px;
}

.kdash-chart-card > strong {
  display: block;
  color: #071532;
  font-size: 26px;
  font-weight: 950;
  letter-spacing: -.04em;
}

.kdash-chart-card > p {
  margin: 8px 0 18px;
  color: #64748b;
  font-size: 12px;
  font-weight: 750;
}

.kdash-chart-card > p span {
  color: #16a34a;
  font-weight: 950;
}

.kdash-chart {
  height: 230px;
  border-radius: 16px;
  overflow: hidden;
}

.kdash-chart svg {
  width: 100%;
  height: 100%;
}

.kdash-chart .area {
  fill: rgba(37, 99, 235, .14);
}

.kdash-chart .line {
  fill: none;
  stroke: #2563eb;
  stroke-width: 4;
}

.kdash-report-btn {
  display: block;
  margin: 16px auto 0;
  background: #f8fbff;
}

.kdash-top-list {
  border: 1px solid #e6edf7;
  border-radius: 15px;
  overflow: hidden;
}

.kdash-top-row {
  min-height: 68px;
  display: grid;
  grid-template-columns: 42px 1.25fr 1fr auto;
  gap: 14px;
  align-items: center;
  border-bottom: 1px solid #e6edf7;
  padding: 0 14px;
}

.kdash-top-row:last-child {
  border-bottom: 0;
}

.kdash-top-row > span {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: #f1f5f9;
  color: #64748b;
  font-weight: 950;
}

.kdash-top-row strong,
.kdash-agenda-row b,
.kdash-activity-row b,
.kdash-action b {
  color: #17223b;
  font-weight: 950;
}

.kdash-top-row div b {
  display: block;
  color: #17223b;
  font-size: 16px;
}

.kdash-top-row div small,
.kdash-agenda-row small,
.kdash-activity-row small,
.kdash-action small {
  display: block;
  margin-top: 4px;
  color: #60728f;
  font-size: 12px;
  font-weight: 750;
}

.kdash-agenda-list,
.kdash-activity-list {
  display: grid;
  gap: 0;
}

.kdash-agenda-row {
  min-height: 58px;
  display: grid;
  grid-template-columns: 64px 38px 1fr auto;
  gap: 12px;
  align-items: center;
  border-bottom: 1px solid #e6edf7;
}

.kdash-agenda-row:last-child {
  border-bottom: 0;
}

.kdash-agenda-row > strong {
  color: #17223b;
  font-size: 16px;
  font-weight: 950;
}

.kdash-avatar {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: #dbeafe;
  color: #2563eb;
  font-size: 12px;
  font-weight: 950;
}

.kdash-agenda-row em {
  background: #dbeafe;
  color: #2563eb;
  margin: 0;
}

.kdash-agenda-row em.pending {
  background: #fef3c7;
  color: #f59e0b;
}

.kdash-activity-row {
  min-height: 62px;
  display: grid;
  grid-template-columns: 44px 1fr auto;
  gap: 14px;
  align-items: center;
}

.kdash-activity-row time {
  color: #64748b;
  font-size: 12px;
  font-weight: 800;
}

.kdash-actions {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

.kdash-action {
  min-height: 92px;
  display: grid;
  grid-template-columns: 54px 1fr;
  gap: 16px;
  align-items: center;
  border: 1px solid #dbe5f2;
  border-radius: 18px;
  background: #fff;
  padding: 18px;
  text-align: left;
}

.kdash-action span {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  font-size: 28px;
  font-weight: 950;
}

.kdash-action.kdash-blue { background: #eff6ff; }
.kdash-action.kdash-green { background: #f0fdf4; }
.kdash-action.kdash-yellow { background: #fffbeb; }
.kdash-action.kdash-purple { background: #faf5ff; }

.kdash-action.kdash-blue span { background: #dbeafe; color: #2563eb; }
.kdash-action.kdash-green span { background: #dcfce7; color: #16a34a; }
.kdash-action.kdash-yellow span { background: #fef3c7; color: #f59e0b; }
.kdash-action.kdash-purple span { background: #f3e8ff; color: #9333ea; }

@media (max-width: 1180px) {
  .kdash-health,
  .kdash-actions {
    grid-template-columns: repeat(2, 1fr);
  }

  .kdash-main-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .kdash {
    gap: 16px;
  }

  .kdash-brand,
  .kdash-opportunity {
    grid-template-columns: 1fr;
  }

  .kdash-health,
  .kdash-summary-grid,
  .kdash-actions {
    grid-template-columns: 1fr;
  }

  .kdash-top-row,
  .kdash-agenda-row,
  .kdash-activity-row {
    grid-template-columns: 1fr;
    padding: 14px 0;
  }
}

/* Salud del negocio: iconos azules */
.kdash-health-card .kdash-mini-icon {
  background: #dbeafe !important;
  color: #2563eb !important;
}

/* =========================
   BUDGETS PAGE
========================= */

.budgets-page {
  width: 100%;
  max-width: none;
  margin: 0;
  display: grid;
  gap: 24px;
}

.budgets-hero {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  align-items: flex-start;
}

.budgets-hero h1 {
  margin: 0;
  color: #071532;
  font-size: 44px;
  line-height: 1;
  letter-spacing: -.055em;
  font-weight: 950;
}

.budgets-hero p:not(.eyebrow) {
  margin: 12px 0 0;
  color: #60728f;
  font-size: 16px;
  font-weight: 750;
}

.budgets-new-btn {
  min-height: 46px;
  border-radius: 12px;
  padding: 0 22px;
  box-shadow: 0 16px 30px rgba(37, 99, 235, .24);
}

.budgets-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

.budget-stat {
  min-height: 132px;
  padding: 26px 30px;
  background: #fff;
  border: 1px solid #dbe5f2;
  border-radius: 18px;
  box-shadow: 0 18px 44px rgba(15, 23, 42, .06);
}

.budget-stat span {
  display: block;
  color: #60728f;
  font-size: 14px;
  font-weight: 850;
}

.budget-stat strong {
  display: block;
  margin-top: 16px;
  color: #071532;
  font-size: 34px;
  line-height: 1;
  letter-spacing: -.04em;
  font-weight: 950;
}

.budget-stat small {
  display: block;
  margin-top: 14px;
  color: #60728f;
  font-size: 12px;
  font-weight: 800;
}

.budget-stat small::first-letter {
  color: #16a34a;
}

.budgets-card {
  background: #fff;
  border: 1px solid #dbe5f2;
  border-radius: 20px;
  box-shadow: 0 18px 44px rgba(15, 23, 42, .06);
  padding: 22px;
}

.budgets-toolbar {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: center;
  margin-bottom: 18px;
}

.budgets-tabs,
.budgets-tools {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.budget-filter,
.budgets-date-btn,
.budgets-filter-btn {
  height: 44px;
  border: 1px solid #e2e8f0;
  border-radius: 13px;
  background: #f8fbff;
  color: #60728f;
  padding: 0 18px;
  font-weight: 900;
}

.budget-filter.active {
  background: #eaf3ff;
  border-color: #bfdbfe;
  color: #2563eb;
}

.budgets-date-btn,
.budgets-filter-btn {
  background: #fff;
  color: #17223b;
}

.budgets-search {
  height: 46px;
  display: grid;
  grid-template-columns: 34px 1fr;
  align-items: center;
  border: 1px solid #dbe5f2;
  border-radius: 12px;
  padding: 0 14px;
  margin-bottom: 22px;
}

.budgets-search span {
  color: #94a3b8;
  font-size: 22px;
}

.budgets-search input {
  border: 0;
  outline: 0;
  color: #071532;
  font-weight: 750;
}

.budgets-search input::placeholder {
  color: #94a3b8;
}

.budgets-table {
  overflow: hidden;
}

.budgets-table-head,
.budget-row {
  display: grid;
  grid-template-columns: 1.35fr 1.2fr .95fr 1fr .95fr 1fr auto;
  gap: 18px;
  align-items: center;
}

.budgets-table-head {
  min-height: 54px;
  padding: 0 18px;
  color: #60728f;
  font-size: 13px;
  font-weight: 950;
}

.budget-row {
  min-height: 72px;
  padding: 0 18px;
  border-top: 1px solid #e6edf7;
  background: #fff;
}

.budget-number-cell {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.budget-avatar {
  width: 38px;
  height: 38px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #dbeafe;
  color: #2563eb;
  font-size: 12px;
  font-weight: 950;
  flex: 0 0 auto;
}

.budget-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.budget-number-cell strong,
.budget-cell strong {
  color: #17223b;
  font-size: 14px;
  font-weight: 950;
}

.budget-cell span {
  display: none;
}

.budget-status,
.budget-conversion {
  display: inline-flex;
  width: fit-content;
  padding: 7px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 950;
}

.budget-status-pending {
  background: #ffedd5;
  color: #f97316;
}

.budget-status-approved,
.budget-conversion {
  background: #dcfce7;
  color: #16a34a;
}

.budget-status-rejected {
  background: #fee2e2;
  color: #ef4444;
}

.budget-status-converted {
  background: #dcfce7;
  color: #16a34a;
}

.budget-status-draft {
  background: #f1f5f9;
  color: #64748b;
}

.budget-muted {
  color: #94a3b8;
  font-weight: 900;
}

.budget-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.budget-actions button {
  width: 36px;
  height: 36px;
  border: 1px solid #e2e8f0;
  border-radius: 11px;
  background: #fff;
  color: #60728f;
  font-weight: 950;
}

.budgets-pagination {
  display: flex;
  justify-content: center;
  gap: 10px;
  align-items: center;
  padding: 28px 0 8px;
}

.budgets-pagination button {
  width: 38px;
  height: 38px;
  border: 1px solid #e2e8f0;
  border-radius: 11px;
  background: #fff;
  color: #60728f;
  font-weight: 950;
}

.budgets-pagination button.active {
  color: #2563eb;
  border-color: #93c5fd;
  background: #eaf3ff;
}

.budget-empty {
  padding: 42px 20px;
  text-align: center;
  border-top: 1px solid #e6edf7;
}

.budget-empty strong {
  display: block;
  color: #071532;
  font-size: 18px;
  font-weight: 950;
}

.budget-empty p {
  margin: 8px auto 0;
  max-width: 460px;
  color: #60728f;
  font-weight: 750;
}

@media (max-width: 1100px) {
  .budgets-stats {
    grid-template-columns: repeat(2, 1fr);
  }

  .budgets-toolbar {
    display: grid;
  }

  .budgets-table-head {
    display: none;
  }

  .budget-row {
    grid-template-columns: 1fr 1fr;
    padding: 18px;
    gap: 14px;
  }

  .budget-cell span {
    display: block;
    margin-bottom: 4px;
    color: #60728f;
    font-size: 12px;
    font-weight: 850;
  }

  .budget-actions {
    justify-content: flex-start;
  }
}

@media (max-width: 680px) {
  .budgets-hero,
  .budget-row {
    grid-template-columns: 1fr;
  }

  .budgets-stats {
    grid-template-columns: 1fr;
  }
}

/* =========================
   BUDGET WIZARD MODAL
========================= */

#budgetWizardBackdrop {
  background: rgba(15, 23, 42, .54) !important;
  backdrop-filter: blur(2px);
  z-index: 9999 !important;
}

.budget-wizard-modal {
  width: min(860px, calc(100vw - 40px));
  max-height: calc(100vh - 44px);
  overflow: hidden;
  background: #fff;
  border: 1px solid #dbe5f2;
  border-radius: 18px;
  box-shadow: 0 34px 90px rgba(15, 23, 42, .32);
}

.budget-wizard-head {
  height: 70px;
  padding: 0 26px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.budget-wizard-head h2 {
  margin: 0;
  color: #071532;
  font-size: 18px;
  font-weight: 950;
}

.budget-wizard-head button {
  width: 34px;
  height: 34px;
  border: 0;
  background: transparent;
  color: #64748b;
  font-size: 26px;
}

.budget-wizard-steps {
  height: 58px;
  padding: 0 26px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  align-items: center;
  border-top: 1px solid #e6edf7;
  border-bottom: 1px solid #e6edf7;
}

.budget-wizard-step {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  color: #60728f;
  font-size: 13px;
  font-weight: 900;
}

.budget-wizard-step::after {
  content: "";
  height: 1px;
  background: #e2e8f0;
  position: absolute;
  left: 42px;
  right: -10px;
  top: 50%;
  z-index: 0;
}

.budget-wizard-step:last-child::after {
  display: none;
}

.budget-wizard-step span {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  position: relative;
  z-index: 1;
  border-radius: 999px;
  background: #f8fafc;
  border: 1px solid #dbe5f2;
  color: #94a3b8;
  font-size: 12px;
  font-weight: 950;
}

.budget-wizard-step.active span,
.budget-wizard-step.done span {
  background: #2563eb;
  border-color: #2563eb;
  color: #fff;
}

.budget-wizard-step.active strong,
.budget-wizard-step.done strong {
  color: #17223b;
}

.budget-wizard-body {
  padding: 22px 26px;
  min-height: 292px;
  max-height: calc(100vh - 250px);
  overflow-y: auto;
}

.budget-step-panel {
  border: 1px solid #dbe5f2;
  border-radius: 15px;
  padding: 22px;
}

.budget-step-panel h3 {
  margin: 0 0 16px;
  color: #17223b;
  font-size: 15px;
  font-weight: 950;
}

.budget-patient-search {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  margin-bottom: 14px;
}

.budget-patient-search > div,
.budget-procedure-search {
  height: 44px;
  display: grid;
  grid-template-columns: 34px 1fr;
  align-items: center;
  border: 1px solid #dbe5f2;
  border-radius: 12px;
  padding: 0 12px;
}

.budget-patient-search span,
.budget-procedure-search span {
  color: #94a3b8;
  font-size: 20px;
}

.budget-patient-search input,
.budget-procedure-search input,
.budget-manual-form input {
  width: 100%;
  border: 0;
  outline: 0;
  color: #071532;
  font-weight: 750;
}

.budget-patient-card {
  width: 100%;
  min-height: 118px;
  display: grid;
  grid-template-columns: 58px 1fr;
  gap: 18px;
  align-items: center;
  text-align: left;
  padding: 18px;
  border: 1px solid #dbe5f2;
  border-radius: 14px;
  background: #fff;
}

.budget-patient-card.selected {
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .10);
}

.budget-patient-avatar {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 999px;
  background: #dbeafe;
  color: #2563eb;
  font-weight: 950;
}

.budget-patient-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.budget-patient-main strong {
  color: #17223b;
  font-size: 15px;
  font-weight: 950;
}

.budget-patient-main span {
  margin-left: 12px;
  padding: 5px 10px;
  border-radius: 999px;
  background: #eaf3ff;
  color: #2563eb;
  font-size: 12px;
  font-weight: 900;
}

.budget-patient-main span.green {
  background: #dcfce7;
  color: #16a34a;
}

.budget-patient-main p {
  margin: 12px 0 0;
  display: flex;
  gap: 24px;
  color: #60728f;
  font-size: 13px;
  font-weight: 750;
}

.budget-patient-main small {
  display: block;
  margin-top: 10px;
  color: #2563eb;
  font-weight: 950;
}

.budget-source-tabs {
  display: flex;
  gap: 8px;
  margin: 12px 0 16px;
}

.budget-source-tabs button {
  height: 36px;
  border: 1px solid #e2e8f0;
  border-radius: 11px;
  background: #f8fbff;
  color: #60728f;
  padding: 0 16px;
  font-weight: 900;
}

.budget-source-tabs button.active {
  background: #eaf3ff;
  border-color: #bfdbfe;
  color: #2563eb;
}

.budget-procedure-picker,
.budget-selected-table,
.budget-summary-table {
  border: 1px solid #e6edf7;
  border-radius: 13px;
  overflow: hidden;
  margin-top: 14px;
}

.budget-pick-row {
  min-height: 58px;
  display: grid;
  grid-template-columns: 1fr 130px auto;
  gap: 14px;
  align-items: center;
  padding: 0 14px;
  border-bottom: 1px solid #e6edf7;
}

.budget-pick-row:last-child {
  border-bottom: 0;
}

.budget-pick-row strong,
.budget-selected-row strong,
.budget-summary-table strong {
  color: #17223b;
  font-weight: 950;
}

.budget-pick-row small {
  display: block;
  margin-top: 4px;
  color: #60728f;
  font-size: 12px;
  font-weight: 750;
}

.budget-selected-head,
.budget-selected-row,
.budget-summary-head,
.budget-summary-table article {
  display: grid;
  grid-template-columns: 1.4fr .9fr .9fr .9fr .7fr .6fr;
  gap: 12px;
  align-items: center;
  min-height: 46px;
  padding: 0 14px;
  border-bottom: 1px solid #e6edf7;
}

.budget-summary-head,
.budget-summary-table article {
  grid-template-columns: 1.6fr .9fr .9fr .7fr;
}

.budget-selected-head,
.budget-summary-head {
  color: #60728f;
  font-size: 12px;
  font-weight: 950;
  background: #fbfdff;
}

.budget-selected-row:last-child,
.budget-summary-table article:last-child {
  border-bottom: 0;
}

.budget-selected-row span,
.budget-summary-table span {
  color: #334155;
  font-size: 13px;
  font-weight: 800;
}

.budget-selected-row b,
.budget-summary-table b {
  color: #16a34a;
  font-weight: 950;
}

.budget-selected-row button {
  width: 32px;
  height: 32px;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #fff;
  color: #64748b;
}

.budget-manual-form {
  display: grid;
  grid-template-columns: minmax(230px, 1fr) 120px 160px auto;
  gap: 10px;
  margin: 14px 0;
}

.budget-manual-form input {
  font-size: 13px;
}

.budget-manual-form input::placeholder {
  font-size: 13px;
}

.budget-manual-form input {
  height: 42px;
  border: 1px solid #dbe5f2;
  border-radius: 11px;
  padding: 0 12px;
}

.budget-source-placeholder,
.budget-step-empty {
  padding: 20px;
  border: 1px dashed #bfdbfe;
  border-radius: 13px;
  background: #f8fbff;
  color: #60728f;
  font-weight: 800;
}

.budget-summary-layout {
  display: grid;
  grid-template-columns: 1fr 260px;
  gap: 22px;
}

.budget-summary-box {
  border: 1px solid #e6edf7;
  border-radius: 14px;
  padding: 18px;
  display: grid;
  gap: 14px;
}

.budget-summary-box div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  color: #60728f;
  font-weight: 800;
}

.budget-summary-box strong {
  color: #17223b;
}

.budget-summary-box .total {
  padding-top: 14px;
  border-top: 1px solid #e6edf7;
}

.budget-summary-box .total strong {
  color: #2563eb;
  font-size: 20px;
}

.budget-confirm-card {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

.budget-confirm-card div {
  padding: 18px;
  border: 1px solid #e6edf7;
  border-radius: 13px;
}

.budget-confirm-card span {
  display: block;
  color: #60728f;
  font-size: 12px;
  font-weight: 850;
}

.budget-confirm-card strong {
  display: block;
  margin-top: 8px;
  color: #071532;
  font-size: 18px;
  font-weight: 950;
}

.budget-confirm-note {
  margin: 18px 0 0;
  color: #60728f;
  font-weight: 750;
}

.budget-wizard-footer {
  height: 74px;
  padding: 0 26px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid #e6edf7;
}

.budget-wizard-footer button {
  min-width: 112px;
  min-height: 42px;
  border-radius: 11px;
}

@media (max-width: 760px) {
  .budget-wizard-steps,
  .budget-patient-search,
  .budget-pick-row,
  .budget-manual-form,
  .budget-summary-layout,
  .budget-confirm-card {
    grid-template-columns: 1fr;
  }

  .budget-selected-head {
    display: none;
  }

  .budget-selected-row {
    grid-template-columns: 1fr;
    padding: 14px;
  }
}

/* Presupuestos: línea del stepper detrás del texto */
.budget-wizard-step {
  z-index: 1;
}

.budget-wizard-step strong {
  position: relative;
  z-index: 2;
  background: #fff;
  padding-right: 8px;
}

.budget-wizard-step::after {
  z-index: -1 !important;
}

.budget-adjust-field {
  display: grid;
  gap: 7px;
}

.budget-adjust-field span {
  color: #60728f;
  font-size: 12px;
  font-weight: 850;
}

.budget-adjust-field input {
  height: 40px;
  border: 1px solid #dbe5f2;
  border-radius: 11px;
  padding: 0 12px;
  color: #071532;
  font-weight: 850;
}

.budget-preview-paper {
  border: 1px solid #dbe5f2;
  border-radius: 16px;
  background: #fff;
  overflow: hidden;
}

.budget-preview-paper header {
  min-height: 76px;
  padding: 20px;
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: center;
  background: #f8fbff;
  border-bottom: 1px solid #e6edf7;
}

.budget-preview-paper small,
.budget-preview-patient span,
.budget-preview-totals span {
  display: block;
  color: #60728f;
  font-size: 12px;
  font-weight: 850;
}

.budget-preview-paper h2 {
  margin: 4px 0 0;
  color: #071532;
  font-size: 24px;
  font-weight: 950;
}

.budget-preview-paper header > strong {
  color: #2563eb;
  font-size: 18px;
  font-weight: 950;
}

.budget-preview-patient {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-bottom: 1px solid #e6edf7;
}

.budget-preview-patient div {
  padding: 18px 20px;
  border-right: 1px solid #e6edf7;
}

.budget-preview-patient div:last-child {
  border-right: 0;
}

.budget-preview-patient strong {
  display: block;
  margin-top: 6px;
  color: #17223b;
  font-weight: 950;
}

.budget-preview-head,
.budget-preview-items article {
  display: grid;
  grid-template-columns: 1.5fr .6fr .9fr .9fr;
  gap: 14px;
  align-items: center;
  min-height: 46px;
  padding: 0 20px;
  border-bottom: 1px solid #e6edf7;
}

.budget-preview-head {
  background: #fbfdff;
  color: #60728f;
  font-size: 12px;
  font-weight: 950;
}

.budget-preview-items article strong,
.budget-preview-items article span {
  color: #17223b;
  font-size: 13px;
  font-weight: 850;
}

.budget-preview-totals {
  width: min(330px, 100%);
  margin-left: auto;
  padding: 18px 20px;
  display: grid;
  gap: 12px;
}

.budget-preview-totals div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
}

.budget-preview-totals strong {
  color: #17223b;
  font-weight: 950;
}

.budget-preview-totals .total {
  padding-top: 12px;
  border-top: 1px solid #e6edf7;
}

.budget-preview-totals .total strong {
  color: #2563eb;
  font-size: 20px;
}

.budget-preview-paper footer {
  padding: 16px 20px;
  background: #f8fbff;
  border-top: 1px solid #e6edf7;
}

.budget-preview-paper footer p {
  margin: 0;
  color: #60728f;
  font-size: 12px;
  font-weight: 750;
}

.budget-icon-btn svg {
  width: 18px;
  height: 18px;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.budget-menu-wrap,
.budget-date-wrap {
  position: relative;
}

.budget-mini-menu,
.budget-date-menu {
  position: absolute;
  right: 0;
  z-index: 50;
  min-width: 210px;
  padding: 8px;
  border: 1px solid #dbe5f2;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 22px 50px rgba(15, 23, 42, .16);
}

.budget-date-menu {
  top: calc(100% + 8px);
}

.budget-mini-menu {
  bottom: calc(100% + 8px);
}

.budget-mini-menu button,
.budget-date-menu button {
  width: 100%;
  min-height: 38px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: #17223b;
  text-align: left;
  padding: 0 12px;
  font-weight: 850;
}

.budget-mini-menu button:hover,
.budget-date-menu button:hover {
  background: #f8fbff;
  color: #2563eb;
}

.budget-custom-range {
  display: grid;
  gap: 8px;
  padding: 10px;
  border-top: 1px solid #e6edf7;
}

.budget-custom-range label {
  display: grid;
  gap: 5px;
  color: #60728f;
  font-size: 12px;
  font-weight: 850;
}

.budget-custom-range input {
  height: 36px;
  border: 1px solid #dbe5f2;
  border-radius: 10px;
  padding: 0 10px;
}

.budget-info-modal {
  width: min(560px, calc(100vw - 40px));
  background: #fff;
  border: 1px solid #dbe5f2;
  border-radius: 18px;
  box-shadow: 0 34px 90px rgba(15, 23, 42, .32);
  overflow: hidden;
}

.budget-info-modal header {
  height: 66px;
  padding: 0 22px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #e6edf7;
}

.budget-info-modal h2 {
  margin: 0;
  color: #071532;
  font-size: 18px;
  font-weight: 950;
}

.budget-info-modal header button {
  width: 34px;
  height: 34px;
  border: 0;
  background: transparent;
  color: #64748b;
  font-size: 24px;
}

.budget-info-body {
  padding: 22px;
}

.budget-info-body > strong {
  display: block;
  margin-bottom: 14px;
  color: #2563eb;
  font-size: 18px;
  font-weight: 950;
}

.budget-info-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.budget-info-grid div {
  padding: 14px;
  border: 1px solid #e6edf7;
  border-radius: 13px;
}

.budget-info-grid span {
  display: block;
  color: #60728f;
  font-size: 12px;
  font-weight: 850;
}

.budget-info-grid strong {
  display: block;
  margin-top: 6px;
  color: #17223b;
  font-weight: 950;
}

.budget-info-text {
  margin: 0;
  color: #60728f;
  font-weight: 750;
}

/* ===== FIX: menú de 3 puntos en presupuestos visible fuera de la fila ===== */

.budgets-card,
.budgets-table,
#budgetsRows,
.budget-row {
  overflow: visible !important;
}

.budget-row {
  position: relative !important;
  z-index: 1;
}

.budget-row:has(.budget-mini-menu) {
  z-index: 20;
}

.budget-actions {
  position: relative !important;
  overflow: visible !important;
}

.budget-menu-wrap {
  position: relative !important;
  overflow: visible !important;
}

.budget-mini-menu {
  position: absolute !important;
  right: 0 !important;
  z-index: 999 !important;
  min-width: 220px !important;
  background: #ffffff !important;
}

.budget-side-modal {
  width: min(380px, calc(100vw - 36px));
  background: #fff;
  border: 1px solid #dbe5f2;
  border-radius: 18px;
  box-shadow: 0 34px 90px rgba(15, 23, 42, .32);
  overflow: hidden;
}

.budget-side-modal header {
  height: 62px;
  padding: 0 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.budget-side-modal h2 {
  margin: 0;
  color: #071532;
  font-size: 18px;
  font-weight: 950;
}

.budget-side-modal header button {
  width: 34px;
  height: 34px;
  border: 0;
  background: transparent;
  color: #64748b;
  font-size: 24px;
}

.budget-side-body {
  padding: 0 22px 22px;
}

.budget-side-number {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  margin-bottom: 22px;
}

.budget-side-number > strong {
  color: #071532;
  font-size: 15px;
  font-weight: 950;
}

.budget-side-kv {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 11px 0;
}

.budget-side-kv span,
.budget-side-list > span,
.budget-notes-box span {
  color: #60728f;
  font-size: 13px;
  font-weight: 850;
}

.budget-side-kv strong {
  color: #17223b;
  font-size: 13px;
  font-weight: 950;
  text-align: right;
}

.budget-side-list {
  margin-top: 18px;
}

.budget-side-list article {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
}

.budget-side-list strong,
.budget-side-list b {
  color: #17223b;
  font-size: 13px;
  font-weight: 950;
}

.budget-side-primary,
.budget-side-secondary,
.budget-side-link {
  width: 100%;
  height: 46px;
  margin-top: 22px;
  border-radius: 12px;
  border: 1px solid #dbe5f2;
  background: #f8fbff;
  color: #2563eb;
  font-weight: 950;
}

.budget-side-secondary {
  color: #17223b;
  background: #fff;
}

.budget-side-link {
  border: 0;
  background: transparent;
}

.budget-send-panel > p {
  margin: 0 0 16px;
  color: #17223b;
  font-weight: 850;
}

.budget-send-option {
  width: 100%;
  min-height: 62px;
  display: grid;
  grid-template-columns: 38px 1fr;
  gap: 14px;
  align-items: center;
  padding: 12px;
  border: 1px solid #e6edf7;
  border-bottom: 0;
  background: #fff;
  text-align: left;
}

.budget-send-option:first-of-type {
  border-radius: 14px 14px 0 0;
}

.budget-send-option:nth-last-of-type(1) {
  border-bottom: 1px solid #e6edf7;
  border-radius: 0 0 14px 14px;
}

.budget-send-option span {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: #f8fbff;
  color: #2563eb;
  font-weight: 950;
}

.budget-send-option span.whatsapp {
  background: #dcfce7;
  color: #16a34a;
}

.budget-send-option strong {
  color: #17223b;
  font-weight: 900;
}

.budget-copy-option label {
  height: 38px;
  display: grid;
  grid-template-columns: 1fr 34px;
  gap: 8px;
  margin-top: 8px;
}

.budget-copy-option input {
  min-width: 0;
  border: 1px solid #e6edf7;
  border-radius: 10px;
  padding: 0 10px;
  color: #60728f;
  font-weight: 800;
}

.budget-copy-option label button {
  border: 1px solid #e6edf7;
  border-radius: 10px;
  background: #fff;
}

.budget-timeline {
  position: relative;
  display: grid;
  gap: 18px;
  margin: 18px 0 22px;
}

.budget-timeline article {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 14px;
  align-items: start;
}

.budget-timeline i {
  width: 9px;
  height: 9px;
  margin-top: 6px;
  border-radius: 999px;
  background: #2563eb;
  box-shadow: 0 0 0 5px #eff6ff;
}

.budget-timeline article.current i {
  background: #f59e0b;
  box-shadow: 0 0 0 5px #fffbeb;
}

.budget-timeline strong {
  display: block;
  color: #17223b;
  font-size: 13px;
  font-weight: 950;
}

.budget-timeline span,
.budget-timeline small {
  display: block;
  margin-top: 4px;
  color: #60728f;
  font-size: 12px;
  font-weight: 750;
}

.budget-timeline article.current strong {
  color: #f97316;
}

.budget-notes-box {
  padding: 16px;
  border: 1px solid #e6edf7;
  border-radius: 14px;
  background: #f8fbff;
}

.budget-notes-box p {
  margin: 10px 0 0;
  color: #17223b;
  font-size: 13px;
  font-weight: 800;
}

.budget-notes-box textarea {
  width: 100%;
  min-height: 120px;
  margin-top: 10px;
  resize: vertical;
  border: 1px solid #dbe5f2;
  border-radius: 12px;
  padding: 12px;
  color: #17223b;
  font-weight: 800;
}

.budget-history-panel {
  display: grid;
  gap: 18px;
}

.budget-history-panel article {
  display: grid;
  grid-template-columns: 38px 1fr;
  gap: 14px;
}

.budget-history-panel article > span {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: #f8fbff;
  color: #2563eb;
  border: 1px solid #e6edf7;
}

.budget-history-panel strong {
  color: #17223b;
  font-size: 13px;
  font-weight: 950;
}

.budget-history-panel p {
  margin: 4px 0;
  color: #60728f;
  font-size: 13px;
  font-weight: 800;
}

.budget-history-panel small {
  color: #60728f;
  font-size: 12px;
  font-weight: 750;
}

/* ===== BUDGETS: iconografía premium y modales de acciones ===== */

.budget-ui-icon {
  width: 34px;
  height: 34px;
  display: inline-grid;
  place-items: center;
  border-radius: 12px;
  background: #eef6ff;
  color: #2563eb;
  flex: 0 0 34px;
}

.budget-ui-icon svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.budgets-date-btn,
.budgets-filter-btn {
  display: inline-flex !important;
  align-items: center;
  gap: 9px;
}

.budgets-date-btn .budget-ui-icon,
.budgets-filter-btn .budget-ui-icon {
  width: 22px;
  height: 22px;
  background: transparent;
  color: #2563eb;
  flex-basis: 22px;
}

.budgets-date-btn .budget-ui-icon svg,
.budgets-filter-btn .budget-ui-icon svg {
  width: 18px;
  height: 18px;
}

.budget-mini-menu {
  min-width: 250px !important;
}

.budget-mini-menu button {
  display: grid !important;
  grid-template-columns: 34px 1fr;
  align-items: center;
  gap: 11px;
  min-height: 44px !important;
  font-weight: 750 !important;
}

.budget-mini-menu button span:last-child {
  color: #17223b;
  font-size: 13px;
  font-weight: 750;
}

.budget-mini-menu button:hover span:last-child {
  color: #2563eb;
}

.budget-mini-menu button.danger .budget-ui-icon {
  background: #fee2e2;
  color: #ef4444;
}

.budget-mini-menu button.danger span:last-child {
  color: #dc2626;
}

.budget-send-option > span {
  background: transparent !important;
}

.budget-send-option .budget-ui-icon {
  width: 36px;
  height: 36px;
  border: 1px solid #e6edf7;
  background: #f8fbff;
  color: #2563eb;
}

.budget-send-option .whatsapp .budget-ui-icon {
  background: #dcfce7;
  color: #16a34a;
  border-color: #bbf7d0;
}

.budget-send-option:hover .budget-ui-icon {
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(37, 99, 235, .12);
}

.budget-history-panel {
  position: relative;
}

.budget-history-panel article > span {
  color: #2563eb;
  background: #f8fbff;
  box-shadow: inset 0 0 0 1px #e6edf7;
}

.budget-history-panel article > span svg {
  width: 17px;
  height: 17px;
}

/* línea vertical del seguimiento */
.budget-timeline {
  position: relative;
  padding-left: 0;
}

.budget-timeline::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 12px;
  bottom: 14px;
  width: 2px;
  background: #dbeafe;
  border-radius: 999px;
}

.budget-timeline article {
  position: relative;
  z-index: 1;
}

.budget-timeline i {
  position: relative;
  z-index: 2;
}

.budget-side-danger {
  width: 100%;
  height: 46px;
  margin-top: 22px;
  border-radius: 12px;
  border: 1px solid #fecaca;
  background: #fff5f5;
  color: #dc2626;
  font-weight: 950;
}

.budget-notes-box.danger {
  background: #fff5f5;
  border-color: #fecaca;
}

.budget-notes-box.danger span,
.budget-notes-box.danger p {
  color: #b91c1c;
}

.kdash-svg-icon {
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.kdash-svg-icon svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.kdash-summary-item.kdash-blue .kdash-mini-icon,
.kdash-activity-row .kdash-mini-icon.kdash-blue {
  background: #dbeafe;
  color: #2563eb;
}

.kdash-summary-item.kdash-blue .kdash-mini-icon {
  background: #dbeafe;
  color: #2563eb;
}

.kdash-summary-item.kdash-blue .kdash-mini-icon .kdash-svg-icon,
.kdash-summary-item.kdash-blue .kdash-mini-icon svg {
  color: #2563eb;
  stroke: #2563eb;
}

.kdash-summary-item.kdash-blue .kdash-mini-icon svg path,
.kdash-summary-item.kdash-blue .kdash-mini-icon svg rect,
.kdash-summary-item.kdash-blue .kdash-mini-icon svg circle {
  stroke: #2563eb;
}

.kdash-health-card .kdash-mini-icon .kdash-svg-icon,
.kdash-health-card .kdash-mini-icon svg {
  color: #2563eb;
  stroke: #2563eb;
}

.kdash-health-card .kdash-mini-icon svg path,
.kdash-health-card .kdash-mini-icon svg rect,
.kdash-health-card .kdash-mini-icon svg circle {
  stroke: #2563eb;
}

.budget-row {
  grid-template-columns: 1.25fr 1.15fr 1fr 1fr 1fr 1fr auto;
  align-items: center;
}

.budget-row .budget-cell {
  min-width: 0;
  overflow: visible;
}

.budget-row .budget-cell .budget-status {
  display: inline-flex;
  width: fit-content;
  max-width: 100%;
  white-space: nowrap;
  visibility: visible;
  opacity: 1;
}

.budget-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Columnas: Fecha (3), Estado (4), Total (5), Conversión (6) */
.budget-row .budget-cell:nth-child(3),
.budget-row .budget-cell:nth-child(4),
.budget-row .budget-cell:nth-child(5),
.budget-row .budget-cell:nth-child(6) {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* Encabezados alineados con esas columnas */
.budgets-table-head span:nth-child(3),
.budgets-table-head span:nth-child(4),
.budgets-table-head span:nth-child(5),
.budgets-table-head span:nth-child(6) {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.budget-col-date,
.budget-col-status,
.budget-col-total,
.budget-col-conversion {
  display: flex !important;
  flex-direction: column;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
}

.budget-col-status .budget-status,
.budget-col-conversion .budget-conversion,
.budget-col-conversion .budget-muted {
  margin-inline: auto;
}

.budgets-table-head,
.budget-row {
  display: grid !important;
  grid-template-columns:
    minmax(150px, 1.15fr)
    minmax(150px, 1.15fr)
    minmax(130px, 1fr)
    minmax(120px, .9fr)
    minmax(130px, 1fr)
    minmax(120px, .9fr)
    minmax(120px, auto) !important;
  column-gap: 18px;
  align-items: center;
}

.budget-head-date,
.budget-head-status,
.budget-head-total,
.budget-head-conversion,
.budget-col-date,
.budget-col-status,
.budget-col-total,
.budget-col-conversion {
  width: 100% !important;
  justify-self: stretch !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
}

.budget-head-actions,
.budget-actions {
  justify-self: end !important;
}

.budget-col-status .budget-status,
.budget-col-conversion .budget-conversion,
.budget-col-conversion .budget-muted,
.budget-col-total strong,
.budget-col-date strong {
  margin-left: auto !important;
  margin-right: auto !important;
}

.budget-filters-modal {
  width: min(940px, calc(100vw - 48px));
  max-height: calc(100vh - 64px);
  background: #ffffff;
  border-radius: 18px;
  border: 1px solid #dbe5f3;
  box-shadow: 0 28px 80px rgba(15, 23, 42, 0.28);
  overflow: hidden;
}

.budget-filters-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 24px 26px 18px;
}

.budget-filters-head h2 {
  margin: 0;
  font-size: 22px;
  color: #071734;
  letter-spacing: -0.03em;
}

.budget-filters-head p {
  margin: 6px 0 0;
  color: #60708d;
  font-size: 14px;
  font-weight: 700;
}

.budget-filters-head button {
  width: 34px;
  height: 34px;
  border: 0;
  background: transparent;
  color: #52647f;
  font-size: 30px;
  line-height: 1;
  cursor: pointer;
}

.budget-filters-body {
  padding: 8px 26px 18px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.budget-filter-card {
  border: 1px solid #dfe8f5;
  border-radius: 10px;
  padding: 16px;
  background: #fff;
}

.budget-filter-card-wide {
  grid-column: 1 / -1;
}

.budget-filter-title {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
}

.budget-filter-title .budget-ui-icon {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: #e8f1ff;
  color: #2563eb;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.budget-filter-title .budget-ui-icon svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.budget-filter-title strong {
  font-size: 15px;
  color: #071734;
}

.budget-filter-card p {
  margin: 12px 0 0;
  font-size: 12px;
  line-height: 1.4;
  color: #64748b;
  font-weight: 700;
}

.budget-amount-grid {
  display: grid;
  grid-template-columns: 1fr 20px 1fr;
  gap: 10px;
  align-items: end;
}

.budget-amount-grid label {
  display: grid;
  gap: 6px;
}

.budget-amount-grid label span {
  font-size: 12px;
  color: #60708d;
  font-weight: 800;
}

.budget-amount-grid em {
  color: #64748b;
  font-style: normal;
  font-weight: 800;
  padding-bottom: 13px;
  text-align: center;
}

.budget-money-input {
  height: 40px;
  border: 1px solid #dbe5f3;
  border-radius: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  background: #fff;
}

.budget-money-input b {
  color: #64748b;
}

.budget-money-input input {
  border: 0;
  outline: 0;
  width: 100%;
  font-weight: 800;
  color: #071734;
}

.budget-filter-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.budget-filter-pills button {
  min-height: 34px;
  border: 1px solid #dbe5f3;
  background: #ffffff;
  color: #52647f;
  border-radius: 7px;
  padding: 0 14px;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}

.budget-filter-pills button.active {
  background: #eff6ff;
  border-color: #60a5fa;
  color: #2563eb;
}

.budget-select-fake {
  width: 100%;
  height: 44px;
  border: 1px solid #dbe5f3;
  background: #ffffff;
  color: #7a8aa4;
  border-radius: 8px;
  padding: 0 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
}

.budget-filters-footer {
  border-top: 1px solid #e6edf7;
  padding: 16px 26px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.budget-filters-footer > div {
  display: flex;
  gap: 10px;
}

.budget-clear-filters,
.budget-filter-cancel,
.budget-filter-apply {
  height: 44px;
  border-radius: 9px;
  padding: 0 18px;
  font-weight: 900;
  cursor: pointer;
}

.budget-clear-filters {
  border: 1px solid #dbe5f3;
  background: #ffffff;
  color: #2563eb;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.budget-filter-cancel {
  border: 1px solid #dbe5f3;
  background: #ffffff;
  color: #071734;
}

.budget-filter-apply {
  border: 0;
  background: #2563eb;
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 12px 28px rgba(37, 99, 235, 0.25);
}

.budget-clear-filters .budget-ui-icon,
.budget-filter-apply .budget-ui-icon {
  width: 18px;
  height: 18px;
}

.budget-clear-filters svg,
.budget-filter-apply svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.budget-filters-footer {
  padding-bottom: 26px;
}

.budget-filters-modal {
  padding-bottom: 0;
}

.budget-step-two-columns {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  align-items: start;
}

.budget-wizard-selector-card {
  border: 1px solid #e2e8f0;
  border-radius: 18px;
  background: #ffffff;
  padding: 18px;
}

.budget-wizard-selector-card h3 {
  margin: 0 0 6px;
}

.budget-step-helper {
  margin: 0 0 14px;
  color: #64748b;
  font-size: 13px;
  line-height: 1.4;
}

.budget-doctor-selected-box {
  border: 1px solid #dbeafe;
  background: #eff6ff;
  color: #1e3a8a;
  border-radius: 14px;
  padding: 12px 14px;
  margin: 12px 0;
  display: grid;
  gap: 4px;
}

.budget-doctor-selected-box span {
  font-size: 12px;
  font-weight: 800;
  color: #2563eb;
}

.budget-doctor-selected-box strong {
  font-size: 14px;
}

.budget-doctor-list {
  display: grid;
  gap: 10px;
  max-height: 420px;
  overflow: auto;
  padding-right: 4px;
}

.budget-doctor-card {
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 12px;
  display: grid;
  grid-template-columns: 42px 1fr auto;
  gap: 12px;
  align-items: center;
  background: #ffffff;
}

.budget-doctor-card.main-selected {
  border-color: #2563eb;
  background: #eff6ff;
}

.budget-doctor-card.other-selected {
  border-color: #93c5fd;
}

.budget-doctor-main {
  display: grid;
  gap: 3px;
}

.budget-doctor-main strong {
  color: #0f172a;
}

.budget-doctor-main span,
.budget-doctor-main small {
  color: #64748b;
  font-size: 12px;
  font-weight: 700;
}

.budget-doctor-actions {
  display: flex;
  gap: 8px;
}

.budget-doctor-actions button {
  height: 34px;
  border-radius: 999px;
  border: 1px solid #dbe5f3;
  background: #ffffff;
  color: #52647f;
  padding: 0 12px;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}

.budget-doctor-actions button.active {
  background: #2563eb;
  border-color: #2563eb;
  color: #ffffff;
}

.budget-doctor-actions button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.budget-patient-card {
  grid-template-columns: 1fr !important;
}

.budget-doctor-card {
  grid-template-columns: 1fr auto !important;
}

.budget-doctor-main,
.budget-patient-main {
  min-width: 0;
}

.budget-editable-price {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.budget-editable-price button {
  width: 26px;
  height: 26px;
  border: 1px solid #dbeafe;
  border-radius: 999px;
  background: #eff6ff;
  color: #2563eb;
  font-weight: 900;
  cursor: pointer;
}

.budget-inner-backdrop {
  position: absolute;
  inset: 0;
  z-index: 20;
  background: rgba(15, 23, 42, 0.42);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  border-radius: inherit;
}

.budget-price-edit-modal {
  width: min(420px, 100%);
  background: #ffffff;
  border: 1px solid #dbe5f3;
  border-radius: 18px;
  box-shadow: 0 28px 80px rgba(15, 23, 42, 0.28);
  overflow: hidden;
}

.budget-price-edit-modal header {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 22px 14px;
  border-bottom: 1px solid #e6edf7;
}

.budget-price-edit-modal h3 {
  margin: 0;
  color: #071734;
  font-size: 20px;
}

.budget-price-edit-modal p {
  margin: 4px 0 0;
  color: #60708d;
  font-size: 13px;
  font-weight: 700;
}

.budget-price-edit-modal header button {
  border: 0;
  background: transparent;
  font-size: 26px;
  color: #52647f;
  cursor: pointer;
}

.budget-price-edit-body {
  padding: 20px 22px;
  display: grid;
  gap: 10px;
}

.budget-price-edit-body > span,
.budget-price-edit-body label span {
  color: #60708d;
  font-size: 12px;
  font-weight: 900;
}

.budget-price-edit-body strong {
  color: #071734;
  font-size: 17px;
}

.budget-price-edit-body label {
  display: grid;
  gap: 8px;
  margin-top: 8px;
}

.budget-price-edit-body input {
  height: 46px;
  border: 1px solid #dbe5f3;
  border-radius: 12px;
  padding: 0 14px;
  font-size: 16px;
  font-weight: 900;
  color: #071734;
  outline: none;
}

.budget-price-edit-body input:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.12);
}

.budget-price-edit-body small {
  color: #64748b;
  font-weight: 700;
}

.budget-price-edit-modal footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 16px 22px 20px;
  border-top: 1px solid #e6edf7;
}


.budget-selected-table-top {
  margin-bottom: 22px;
}

.budget-selected-title-row {
  padding: 14px 16px 10px;
  border-bottom: 1px solid #e6edf7;
}

.budget-selected-title-row h3 {
  margin: 0;
  color: #071734;
}

.budget-selected-title-row p {
  margin: 4px 0 0;
  color: #60708d;
  font-size: 13px;
  font-weight: 700;
}

.budget-selected-head,
.budget-selected-row {
  grid-template-columns: minmax(160px, 1.5fr) 0.85fr 0.9fr 1.05fr 1.05fr 0.75fr 0.75fr;
}

.budget-qty-control {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.budget-qty-control button {
  width: 28px;
  height: 28px;
  border: 1px solid #dbeafe;
  border-radius: 999px;
  background: #eff6ff;
  color: #2563eb;
  font-weight: 900;
  cursor: pointer;
}

.budget-qty-control button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.budget-qty-control input {
  width: 44px;
  height: 30px;
  border: 1px solid #dbe5f3;
  border-radius: 10px;
  text-align: center;
  color: #071734;
  font-weight: 900;
  outline: none;
}

.budget-selected-grid {
  display: grid !important;
  grid-template-columns:
    minmax(130px, 1.35fr)
    86px
    98px
    112px
    96px
    76px
    62px !important;
  column-gap: 8px !important;
  align-items: center !important;
  width: 100% !important;
}

.budget-selected-col-concept {
  justify-self: start !important;
  text-align: left !important;
  min-width: 0 !important;
}

.budget-selected-col-type,
.budget-selected-col-qty,
.budget-selected-col-price,
.budget-selected-col-cost,
.budget-selected-col-margin,
.budget-selected-col-actions {
  justify-self: center !important;
  text-align: center !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  min-width: 0 !important;
}

.budget-selected-col-type {
  font-size: 12px !important;
}

.budget-selected-col-price,
.budget-selected-col-cost {
  white-space: nowrap !important;
}

.budget-selected-col-actions button {
  width: 28px !important;
  height: 28px !important;
  flex: 0 0 auto !important;
}

.budget-editable-price {
  gap: 5px !important;
  white-space: nowrap !important;
}

.budget-editable-price button {
  width: 24px !important;
  height: 24px !important;
  flex: 0 0 auto !important;
}

.budget-qty-control {
  gap: 4px !important;
}

.budget-qty-control button {
  width: 24px !important;
  height: 24px !important;
}

.budget-qty-control input {
  width: 38px !important;
}

.budget-manual-form {
  align-items: flex-start !important;
}

.budget-manual-name {
  width: 100%;
  min-height: 44px;
  max-height: 140px;
  resize: none;
  overflow-y: auto;
  line-height: 1.35;
  padding: 12px 14px;
  border: 1px solid #dbe5f3 !important;
  border-radius: 12px;
  background: #ffffff;
  color: #071734;
  font-weight: 800;
  font-family: inherit;
  font-size: 14px;
  outline: none;
  box-shadow: none;
  appearance: none;
}

.budget-manual-name:focus {
  border-color: #2563eb !important;
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.12);
}

.budget-manual-form .secondary-btn {
  height: 44px !important;
  min-height: 44px !important;
  align-self: flex-start !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}

.budget-procedure-divider {
  margin: 20px 0 12px;
  padding-top: 18px;
  border-top: 1px solid #e6edf7;
}

.budget-procedure-divider h3 {
  margin: 0;
}

/* Evita que nombres largos dañen la tabla de procedimientos agregados */
.budget-selected-col-concept {
  min-width: 0 !important;
  max-width: 100% !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
  line-height: 1.15 !important;
}

.budget-selected-row {
  min-height: 52px !important;
  height: auto !important;
  align-items: center !important;
}

.budget-selected-row .budget-selected-col-concept {
  display: block !important;
}

/* Mantiene las demás columnas limpias y sin mezclarse */
.budget-selected-col-type,
.budget-selected-col-qty,
.budget-selected-col-price,
.budget-selected-col-cost,
.budget-selected-col-margin,
.budget-selected-col-actions {
  min-width: 0 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
}

/* Resumen: nombres largos no deben invadir Precio/Costo/Margen */
.budget-summary-table article,
.budget-summary-head {
  grid-template-columns: minmax(0, 1.5fr) 0.85fr 0.85fr 0.65fr !important;
}

.budget-summary-table article strong {
  min-width: 0 !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
  line-height: 1.15 !important;
}

.budget-summary-table article span,
.budget-summary-table article b {
  white-space: nowrap !important;
}

/* Confirmar: evita que conceptos largos rompan cantidad/precio/total */
.budget-preview-items article,
.budget-preview-head {
  grid-template-columns: minmax(0, 1.6fr) 0.55fr 0.85fr 0.85fr !important;
}

.budget-preview-items article strong {
  min-width: 0 !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
  line-height: 1.15 !important;
}

.budget-preview-items article span {
  white-space: nowrap !important;
}

.budget-currency-panel {
  border: 1px solid #dbe5f3;
  border-radius: 16px;
  background: #ffffff;
  margin-bottom: 18px;
  overflow: hidden;
}

.budget-currency-header {
  min-height: 72px;
  padding: 16px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.budget-currency-header h3 {
  margin: 0;
  color: #071734;
  font-size: 15px;
}

.budget-currency-header p {
  margin: 5px 0 0;
  color: #60708d;
  font-size: 13px;
  font-weight: 700;
}

.budget-currency-toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  color: #52647f;
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
}

.budget-currency-toggle input,
.budget-switch input {
  display: none;
}

.budget-currency-toggle span,
.budget-switch span {
  width: 38px;
  height: 22px;
  border-radius: 999px;
  background: #94a3b8;
  position: relative;
  flex: 0 0 auto;
  transition: 0.2s ease;
}

.budget-currency-toggle span::after,
.budget-switch span::after {
  content: "";
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: #ffffff;
  position: absolute;
  top: 2px;
  left: 2px;
  transition: 0.2s ease;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.18);
}

.budget-currency-toggle input:checked + span,
.budget-switch input:checked + span {
  background: #2563eb;
}

.budget-currency-toggle input:checked + span::after,
.budget-switch input:checked + span::after {
  transform: translateX(16px);
}

.budget-currency-toggle b {
  color: #64748b;
  font-size: 16px;
}

.budget-currency-expanded {
  border-top: 1px solid #e6edf7;
  padding: 16px 18px 18px;
  display: grid;
  grid-template-columns: 1fr 1fr 1.2fr;
  gap: 14px;
  animation: budgetCurrencyOpen 0.22s ease;
}

@keyframes budgetCurrencyOpen {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.budget-currency-expanded label {
  display: grid;
  gap: 7px;
}

.budget-currency-expanded label > span {
  color: #60708d;
  font-size: 12px;
  font-weight: 900;
}

.budget-currency-locked,
.budget-currency-expanded select,
.budget-exchange-input {
  height: 42px;
  border: 1px solid #dbe5f3;
  border-radius: 10px;
  background: #f8fafc;
  color: #52647f;
  padding: 0 12px;
  font-size: 13px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.budget-currency-expanded select {
  background: #ffffff;
  outline: none;
}

.budget-exchange-input {
  background: #ffffff;
  gap: 8px;
}

.budget-exchange-input strong,
.budget-exchange-input em {
  color: #60708d;
  font-size: 12px;
  font-style: normal;
  white-space: nowrap;
}

.budget-exchange-input input {
  border: 0;
  outline: none;
  width: 100%;
  min-width: 80px;
  color: #071734;
  font-weight: 900;
  font-size: 14px;
}

.budget-currency-expanded label small {
  color: #64748b;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.25;
}

.budget-base-currency-row {
  grid-column: 1 / -1;
  padding-top: 4px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.budget-base-currency-row strong {
  color: #071734;
  font-size: 13px;
}

.budget-base-currency-row p {
  margin: 4px 0 0;
  color: #60708d;
  font-size: 12px;
  font-weight: 700;
}

.budget-preview-head.with-base,
.budget-preview-items article.with-base {
  grid-template-columns: minmax(0, 1.45fr) 0.5fr 0.8fr 0.8fr 0.9fr !important;
}

.budget-preview-totals {
  display: grid;
  row-gap: 10px;
  margin-top: 12px;
}

.budget-preview-totals div {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  column-gap: 12px;
}

.budget-preview-totals.with-base div {
  grid-template-columns: 1fr auto auto;
}

.budget-preview-totals span {
  color: #60708d;
  font-weight: 700;
  font-size: 13px;
}

.budget-preview-totals strong {
  text-align: right;
  font-weight: 800;
  color: #071734;
}

.budget-preview-totals b {
  text-align: right;
  font-weight: 800;
  color: #071734;
  opacity: 0.9;
}

.budget-preview-totals .total {
  margin-top: 6px;
  padding-top: 8px;
  border-top: 1px solid #e6edf7;
}

.budget-preview-totals .total strong,
.budget-preview-totals .total b {
  color: #2563eb;
  font-size: 18px;
}

.budget-preview-totals div b {
  color: #071734;
  font-size: 14px;
  text-align: right;
}

.budget-preview-totals.with-base .total strong,
.budget-preview-totals.with-base .total b {
  color: #2563eb;
  font-size: 20px;
}

@media (max-width: 900px) {
  .budget-currency-expanded {
    grid-template-columns: 1fr;
  }

  .budget-currency-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .budget-base-currency-row {
    align-items: flex-start;
  }
}

.budget-preview-totals {
  width: min(430px, 100%);
  margin: 18px 18px 0 auto;
  display: grid;
  gap: 10px;
}

.budget-preview-totals .budget-total-row {
  display: grid;
  grid-template-columns: minmax(130px, 1fr) minmax(130px, auto);
  align-items: center;
  column-gap: 18px;
}

.budget-preview-totals.with-base .budget-total-row {
  grid-template-columns: minmax(130px, 1fr) minmax(125px, auto) minmax(125px, auto);
}

.budget-total-label {
  color: #60708d;
  font-size: 13px;
  font-weight: 900;
  text-align: left;
}

.budget-total-secondary,
.budget-total-base {
  color: #071734;
  font-size: 15px;
  font-weight: 900;
  text-align: right;
  white-space: nowrap;
}

.budget-preview-totals .budget-total-row.total {
  margin-top: 6px;
  padding-top: 10px;
  border-top: 1px solid #e6edf7;
}

.budget-preview-totals .budget-total-row.total .budget-total-secondary,
.budget-preview-totals .budget-total-row.total .budget-total-base {
  color: #2563eb;
  font-size: 19px;
  line-height: 1.05;
}

.budget-preview-totals {
  width: min(560px, 100%) !important;
  margin: 18px 10px 0 auto !important;
  display: grid !important;
  gap: 10px !important;
}

.budget-preview-totals .budget-total-row {
  display: grid !important;
  grid-template-columns: minmax(120px, 1fr) minmax(150px, auto) !important;
  align-items: center !important;
  column-gap: 20px !important;
}

.budget-preview-totals.with-base .budget-total-row {
  grid-template-columns: minmax(120px, 1fr) minmax(150px, auto) minmax(170px, auto) !important;
}

.budget-total-label {
  color: #60708d !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  text-align: left !important;
  min-width: 0 !important;
}

.budget-total-secondary,
.budget-total-base {
  color: #071734 !important;
  font-size: 14px !important;
  font-weight: 900 !important;
  text-align: right !important;
  white-space: nowrap !important;
  overflow: visible !important;
  min-width: max-content !important;
}

.budget-preview-totals .budget-total-row.total {
  margin-top: 6px !important;
  padding-top: 10px !important;
  border-top: 1px solid #e6edf7 !important;
}

.budget-preview-totals .budget-total-row.total .budget-total-secondary,
.budget-preview-totals .budget-total-row.total .budget-total-base {
  color: #2563eb !important;
  font-size: 17px !important;
  line-height: 1.05 !important;
}

.budget-preview-totals {
  width: min(520px, 100%) !important;
  margin: 18px 10px 0 auto !important;
}

.budget-preview-totals.with-base .budget-total-row {
  grid-template-columns: 145px minmax(145px, 1fr) minmax(155px, 1fr) !important;
  column-gap: 14px !important;
}

.budget-total-secondary,
.budget-total-base {
  white-space: nowrap !important;
  overflow: visible !important;
  text-align: right !important;
}

.budget-preview-totals .budget-total-row.total .budget-total-secondary,
.budget-preview-totals .budget-total-row.total .budget-total-base {
  font-size: 17px !important;
}

.budget-rate-helper {
  margin-top: 10px;
}

.budget-rate-helper small {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  color: #64748b;
  font-size: 12px;
  line-height: 1.45;
}

.budget-rate-suggestion {
  color: #2563eb;
  font-weight: 700;
}

.budget-rate-loading {
  color: #2563eb;
  font-weight: 700;
}

.budget-rate-error {
  color: #dc2626;
  font-weight: 700;
}

.budget-rate-btn {
  border: 1px solid rgba(37, 99, 235, 0.18);
  background: linear-gradient(135deg, #eff6ff, #ffffff);
  color: #2563eb;
  font-size: 12px;
  font-weight: 800;
  padding: 7px 11px;
  border-radius: 999px;
  cursor: pointer;
  box-shadow: 0 8px 18px rgba(37, 99, 235, 0.08);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.budget-rate-btn:hover {
  transform: translateY(-1px);
  border-color: rgba(37, 99, 235, 0.34);
  box-shadow: 0 12px 24px rgba(37, 99, 235, 0.14);
}

.budget-rate-btn:active {
  transform: translateY(0);
}

.budget-confirm-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
}

.budget-confirm-title-row h3 {
  margin: 0;
}

.budget-confirm-title-row p {
  margin: 4px 0 0;
  color: #64748b;
  font-size: 13px;
}

.budget-preview-pdf-btn {
  border: 1px solid rgba(37, 99, 235, 0.18);
  background: linear-gradient(135deg, #2563eb, #0ea5e9);
  color: #ffffff;
  border-radius: 999px;
  padding: 11px 16px;
  font-size: 13px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  box-shadow: 0 14px 30px rgba(37, 99, 235, 0.22);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.budget-preview-pdf-btn svg {
  width: 17px;
  height: 17px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
}

.budget-preview-pdf-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 18px 38px rgba(37, 99, 235, 0.28);
}

.budget-preview-pdf-btn:active {
  transform: translateY(0);
}

.budget-preview-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}

.budget-preview-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.budget-preview-logo {
  width: 48px;
  height: 48px;
  object-fit: contain;
}

.budget-preview-initials {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: #e6ecff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
}

.budget-preview-clinic {
  display: flex;
  flex-direction: column;
}

.budget-preview-clinic strong {
  font-size: 14px;
}

.budget-preview-clinic span {
  font-size: 12px;
  color: #6b7280;
}

.budget-preview-right {
  text-align: right;
}

.budget-preview-pdf-btn {
  border: 0;
  background: #e0f2fe;
  color: #1e40af;
  border-radius: 999px;
  padding: 12px 18px;
  font-size: 14px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  cursor: pointer;
  box-shadow: none;
  transition: background .18s ease, transform .18s ease;
}

.budget-preview-pdf-btn:hover {
  background: #dbeafe;
  transform: translateY(-1px);
}

.budget-preview-pdf-btn:active {
  transform: translateY(0);
}

.budget-preview-pdf-btn .budget-ui-icon {
  width: 28px;
  height: 28px;
  background: #ffffff;
  color: #2563eb;
  border-radius: 999px;
  display: grid;
  place-items: center;
}

.budget-preview-pdf-btn svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
}

.budget-notes-box-real{
  display:grid;
  gap:12px;
}

.budget-notes-list{
  display:grid;
  gap:10px;
  max-height:260px;
  overflow:auto;
}

.budget-note-empty{
  margin:0;
  color:#6b7f93;
  font-size:13px;
}

.budget-note-item{
  background:#ffffff;
  border:1px solid #e1e8f0;
  border-radius:14px;
  padding:12px;
}

.budget-note-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:6px;
}

.budget-note-head strong{
  color:#173b63;
  font-size:13px;
}

.budget-note-head span{
  color:#7a8fa3;
  font-size:12px;
  white-space:nowrap;
}

.budget-note-item p{
  margin:0;
  color:#405b76;
  font-size:13px;
  line-height:1.45;
}

.budget-note-field{
  display:grid;
  gap:6px;
}

.budget-note-field small{
  color:#5e748a;
  font-weight:700;
}

.budget-note-field textarea{
  width:100%;
  resize:vertical;
  min-height:94px;
  border:1px solid #d7e2ec;
  border-radius:14px;
  padding:12px 14px;
  font:inherit;
  color:#183b63;
  outline:none;
  background:#fff;
}

.budget-note-field textarea:focus{
  border-color:#8fb4d6;
  box-shadow:0 0 0 3px rgba(75,132,184,.12);
}

.budget-full-detail-modal{
  width:min(980px, calc(100vw - 32px));
  max-height:90vh;
}

.budget-full-detail-modal header p{
  margin:4px 0 0;
  color:#66788f;
  font-size:13px;
  font-weight:700;
}

.budget-full-detail-body{
  display:grid;
  gap:18px;
  max-height:calc(90vh - 86px);
  overflow:auto;
  padding-right:4px;
}

.budget-full-section{
  background:#ffffff;
  border:1px solid #e1e8f0;
  border-radius:18px;
  padding:18px;
  display:grid;
  gap:16px;
}

.budget-full-section h3{
  margin:0 0 14px;
  color:#10233f;
  font-size:15px;
}

.budget-full-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:12px;
}

.budget-full-grid div,
.budget-full-totals div{
  background:#fff;
  border:1px solid #e5ebf2;
  border-radius:14px;
  padding:12px;
}

.budget-full-grid span,
.budget-full-totals span,
.budget-full-items article span{
  display:block;
  color:#687b92;
  font-size:12px;
  font-weight:800;
  margin-bottom:4px;
}

.budget-full-grid strong,
.budget-full-totals strong,
.budget-full-items article strong{
  color:#10233f;
  font-size:13px;
}

.budget-full-items{
  display:grid;
  gap:10px;
}

.budget-full-items article{
  display:grid;
  grid-template-columns:1.5fr .55fr .8fr .8fr .8fr;
  gap:10px;
  align-items:stretch;
  background:#fff;
  border:1px solid #e5ebf2;
  border-radius:16px;
  padding:12px;
}

.budget-full-items article small{
  display:inline-flex;
  margin-top:6px;
  color:#1d5fd1;
  font-size:11px;
  font-weight:800;
}

.budget-full-totals{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:10px;
}

.budget-full-totals .total{
  grid-column: span 2;
  background:#eaf2ff;
  border:1px solid #cfe0ff;
  border-radius:14px;
  padding:14px 16px;
}

.budget-full-totals .total strong{
  color:#2f6bd8;
  font-size:16px;
}

.budget-full-footer{
  display:flex;
  justify-content:flex-end;
  gap:10px;
  padding-bottom:4px;
}

@media (max-width: 760px){
  .budget-full-grid,
  .budget-full-totals,
  .budget-full-items article{
    grid-template-columns:1fr;
  }
}

/* ===== ITEMS TABLE ===== */

.budget-full-items-table{
  display:grid;
  gap:12px;
}

.budget-full-items-head{
  display:grid;
  grid-template-columns: 2.4fr .6fr 1fr 1fr 1fr;
  padding:0 6px;
  font-size:12px;
  color:#6b7f93;
  font-weight:600;
}

.budget-full-item-row{
  display:grid;
  grid-template-columns: 2.4fr .6fr 1fr 1fr 1fr;
  align-items:center;
  background:#ffffff;
  border:1px solid #e1e8f0;
  border-radius:16px;
  padding:14px 16px;
  gap:8px;
}

.budget-item-main{
  display:grid;
  gap:4px;
}

.budget-item-main strong{
  font-size:14px;
  color:#173b63;
}

.budget-item-main small{
  font-size:12px;
  color:#7a8fa3;
}

.budget-item-main em{
  font-size:12px;
  color:#2f6bd8;
  font-style:normal;
  font-weight:600;
}

.budget-full-item-row div{
  font-size:14px;
  color:#405b76;
}

.budget-item-total{
  font-weight:700;
  color:#173b63;
}

/* ===== FULL BUDGET DETAIL MODAL - MOCKUP CORRECTO ===== */

.budget-full-detail-modal{
  width:min(820px, calc(100vw - 32px)) !important;
  max-height:92vh !important;
  border-radius:22px !important;
  overflow:hidden !important;
  background:#ffffff !important;
  box-shadow:0 28px 90px rgba(15,23,42,.22) !important;
}

.budget-full-head{
  padding:24px 28px 8px !important;
  border-bottom:0 !important;
}

.budget-full-head h2{
  margin:0 !important;
  color:#071a38 !important;
  font-size:20px !important;
  font-weight:900 !important;
  letter-spacing:-.03em !important;
}

.budget-full-head button{
  color:#64748b !important;
  font-size:30px !important;
}

.budget-detail-topbar{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:16px !important;
  padding:12px 28px 20px !important;
}

.budget-detail-id{
  display:flex !important;
  align-items:center !important;
  flex-wrap:wrap !important;
  gap:10px !important;
  color:#5f7590 !important;
  font-size:13px !important;
  font-weight:800 !important;
}

.budget-detail-id strong{
  color:#173b63 !important;
  font-size:15px !important;
}

.budget-pdf-outline-btn{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:8px !important;
  min-height:44px !important;
  padding:0 18px !important;
  border-radius:10px !important;
  border:1.5px solid #8fb3ff !important;
  background:#ffffff !important;
  color:#155ee8 !important;
  font-size:13px !important;
  font-weight:900 !important;
}

.budget-pdf-outline-btn .budget-ui-icon{
  width:18px !important;
  height:18px !important;
  background:transparent !important;
  color:#155ee8 !important;
}

.budget-pdf-outline-btn svg{
  width:18px !important;
  height:18px !important;
  stroke:#155ee8 !important;
}

.budget-full-detail-body{
  max-height:calc(92vh - 118px) !important;
  overflow-y:auto !important;
  padding:0 28px 34px !important;
  display:grid !important;
  gap:20px !important;
}

.budget-detail-card{
  display:block !important;
  height:auto !important;
  min-height:0 !important;
  border:1px solid #dfe8f3 !important;
  border-radius:14px !important;
  background:#ffffff !important;
  overflow:hidden !important;
}

.budget-detail-card-title{
  min-height:78px !important;
  display:flex !important;
  align-items:center !important;
  gap:18px !important;
  padding:20px 22px !important;
  border-bottom:1px solid #dfe8f3 !important;
  background:linear-gradient(180deg, #f8fbff 0%, #f3f7ff 100%) !important;
}

.budget-detail-card-title .budget-ui-icon{
  width:44px !important;
  height:44px !important;
  border-radius:16px !important;
  background:#eaf2ff !important;
  color:#155ee8 !important;
  flex:0 0 44px !important;
  box-shadow:0 8px 18px rgba(21,94,232,.08) !important;
}

.budget-detail-card-title .budget-ui-icon svg{
  width:22px !important;
  height:22px !important;
  stroke:#155ee8 !important;
}

.budget-detail-card-title h3{
  margin:0 !important;
  color:#071a38 !important;
  font-size:17px !important;
  font-weight:900 !important;
  letter-spacing:-.02em !important;
}

.budget-detail-fields{
  display:grid !important;
  height:auto !important;
  min-height:0 !important;
  overflow:visible !important;
  background:#ffffff !important;
}

.budget-detail-fields-four{
  grid-template-columns:repeat(4, minmax(0, 1fr)) !important;
}

.budget-detail-fields-three{
  grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
}

.budget-detail-fields-two{
  grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
}

.budget-detail-fields > div{
  display:block !important;
  min-height:72px !important;
  padding:18px 20px !important;
  border-right:1px solid #e6edf5 !important;
  background:#ffffff !important;
  overflow:visible !important;
}

.budget-detail-fields > div:last-child{
  border-right:0 !important;
}

.budget-detail-fields span,
.budget-detail-items-head span,
.budget-detail-totals-grid span{
  display:block !important;
  margin:0 0 8px !important;
  color:#5f7590 !important;
  font-size:12px !important;
  font-weight:900 !important;
}

.budget-detail-fields strong,
.budget-detail-totals-grid strong{
  display:block !important;
  color:#071a38 !important;
  font-size:14px !important;
  font-weight:900 !important;
  line-height:1.35 !important;
  overflow-wrap:anywhere !important;
}

.budget-detail-items{
  display:grid !important;
  background:#ffffff !important;
}

.budget-detail-items-head,
.budget-detail-item-row{
  display:grid !important;
  grid-template-columns:2.2fr .65fr 1fr 1fr 1fr !important;
  align-items:center !important;
  column-gap:18px !important;
}

.budget-detail-items-head{
  padding:18px 20px 12px !important;
  border-bottom:1px solid #e6edf5 !important;
}

.budget-detail-item-row{
  min-height:76px !important;
  padding:18px 20px !important;
  border-bottom:1px solid #e6edf5 !important;
}

.budget-detail-item-row:last-child{
  border-bottom:0 !important;
}

.budget-detail-item-main{
  display:grid !important;
  gap:4px !important;
}

.budget-detail-item-main strong,
.budget-detail-item-row > strong{
  color:#071a38 !important;
  font-size:14px !important;
  font-weight:900 !important;
  line-height:1.25 !important;
}

.budget-detail-item-main span{
  color:#647894 !important;
  font-size:12px !important;
  font-weight:800 !important;
}

.budget-detail-item-main em{
  margin-top:4px !important;
  color:#155ee8 !important;
  font-size:12px !important;
  font-style:normal !important;
  font-weight:900 !important;
}

.budget-detail-totals-grid{
  display:grid !important;
  grid-template-columns:repeat(4, minmax(0, 1fr)) !important;
  background:#ffffff !important;
  border-bottom:1px solid #e6edf5 !important;
}

.budget-detail-totals-grid > div{
  min-height:74px !important;
  padding:18px 20px !important;
  border-right:1px solid #e6edf5 !important;
  border-bottom:1px solid #e6edf5 !important;
  background:#ffffff !important;
}

.budget-detail-totals-grid > div:nth-child(4n){
  border-right:0 !important;
}

.budget-detail-total-final{
  padding:22px 24px !important;
  background:#eaf2ff !important;
  border-top:1px solid #d8e7ff !important;
}

.budget-detail-total-final span{
  display:block !important;
  margin-bottom:6px !important;
  color:#155ee8 !important;
  font-size:13px !important;
  font-weight:900 !important;
  text-transform:uppercase !important;
}

.budget-detail-total-final strong{
  display:block !important;
  color:#155ee8 !important;
  font-size:32px !important;
  line-height:1 !important;
  font-weight:950 !important;
  letter-spacing:-.04em !important;
}

.budget-detail-footer{
  display:grid !important;
  grid-template-columns:1fr 1fr !important;
  gap:14px !important;
  padding:0 0 8px !important;
  margin:0 0 0 !important;
}

.budget-detail-footer button{
  width:100% !important;
  min-height:52px !important;
  border-radius:10px !important;
  font-size:15px !important;
  font-weight:900 !important;
}

.budget-detail-footer .budget-side-secondary{
  background:#ffffff !important;
  color:#071a38 !important;
  border:1px solid #dce6f2 !important;
}

.budget-detail-footer .budget-side-primary{
  background:#0b57e3 !important;
  color:#ffffff !important;
  border:1px solid #0b57e3 !important;
  box-shadow:0 14px 26px rgba(13,86,232,.18) !important;
}

.budget-status-approved{
  background:#dcfce7 !important;
  color:#15803d !important;
}

@media (max-width: 860px){
  .budget-detail-topbar{
    display:grid !important;
  }

  .budget-detail-fields-four,
  .budget-detail-fields-three,
  .budget-detail-fields-two,
  .budget-detail-totals-grid,
  .budget-detail-items-head,
  .budget-detail-item-row,
  .budget-detail-footer{
    grid-template-columns:1fr !important;
  }

  .budget-detail-fields > div,
  .budget-detail-totals-grid > div{
    border-right:0 !important;
    border-bottom:1px solid #e6edf5 !important;
  }

  .budget-detail-fields > div:last-child,
  .budget-detail-totals-grid > div:last-child{
    border-bottom:0 !important;
  }
}

/* ===== MODAL CAMBIAR ESTADO - DISEÑO FINAL ===== */

#budgetStatusSelect{
  width:100% !important;
  min-height:48px !important;
  border:1px solid #dce6f2 !important;
  border-radius:14px !important;
  padding:0 42px 0 14px !important;
  background:
    linear-gradient(45deg, transparent 50%, #647894 50%) right 18px center / 7px 7px no-repeat,
    linear-gradient(135deg, #647894 50%, transparent 50%) right 12px center / 7px 7px no-repeat,
    #ffffff !important;
  color:#071a38 !important;
  font-size:14px !important;
  font-weight:800 !important;
  outline:none !important;
  appearance:none !important;
  -webkit-appearance:none !important;
}

#budgetStatusSelect:focus{
  border-color:#8fb3ff !important;
  box-shadow:0 0 0 4px rgba(21,94,232,.10) !important;
}

.budget-note-field{
  display:grid !important;
  gap:8px !important;
  margin-top:14px !important;
}

.budget-note-field small{
  display:block !important;
  color:#5f7590 !important;
  font-size:12px !important;
  font-weight:900 !important;
}

.budget-note-field textarea{
  width:100% !important;
  min-height:96px !important;
  resize:vertical !important;
  border:1px solid #dce6f2 !important;
  border-radius:16px !important;
  padding:14px 16px !important;
  background:#ffffff !important;
  color:#071a38 !important;
  font-size:14px !important;
  font-weight:700 !important;
  line-height:1.4 !important;
  outline:none !important;
}

.budget-note-field textarea:focus{
  border-color:#8fb3ff !important;
  box-shadow:0 0 0 4px rgba(21,94,232,.10) !important;
}

.budget-tracking-panel{
  display:grid !important;
  gap:16px !important;
}

.budget-tracking-panel .budget-notes-box{
  padding:18px !important;
  border-radius:18px !important;
  background:#f8fbff !important;
  border:1px solid #dfe8f3 !important;
}

.budget-tracking-panel .budget-notes-box span{
  display:block !important;
  margin-bottom:10px !important;
  color:#5f7590 !important;
  font-size:12px !important;
  font-weight:900 !important;
}

.budget-tracking-panel .budget-notes-box p{
  margin:0 !important;
}

.budget-tracking-panel .budget-side-primary,
.budget-tracking-panel .budget-side-secondary{
  min-height:50px !important;
  border-radius:14px !important;
  font-size:15px !important;
  font-weight:900 !important;
}

.budget-tracking-panel .budget-side-primary{
  margin-top:4px !important;
  background:#0b57e3 !important;
  border:1px solid #0b57e3 !important;
  color:#ffffff !important;
  box-shadow:0 12px 24px rgba(13,86,232,.16) !important;
}

.budget-tracking-panel .budget-side-secondary{
  background:#ffffff !important;
  border:1px solid #dce6f2 !important;
  color:#071a38 !important;
}

/* ===== AJUSTE ICONOS HISTORIAL / SEGUIMIENTO ===== */

.budget-history-panel article,
.budget-timeline article{
  position:relative !important;
  display:grid !important;
  grid-template-columns:42px 1fr !important;
  gap:14px !important;
  align-items:flex-start !important;
}

.budget-history-panel article .budget-ui-icon,
.budget-timeline article .budget-ui-icon{
  width:34px !important;
  height:34px !important;
  min-width:34px !important;
  border-radius:999px !important;
  background:#eef5ff !important;
  border:1px solid #d9e7ff !important;
  color:#155ee8 !important;
  display:grid !important;
  place-items:center !important;
  box-shadow:0 8px 18px rgba(21,94,232,.08) !important;
  z-index:2 !important;
}

.budget-history-panel article .budget-ui-icon svg,
.budget-timeline article .budget-ui-icon svg{
  width:17px !important;
  height:17px !important;
  stroke:#155ee8 !important;
  stroke-width:2 !important;
}

.budget-timeline{
  position:relative !important;
  display:grid !important;
  gap:18px !important;
  padding-left:0 !important;
}

.budget-timeline article:not(:last-child)::after{
  content:"" !important;
  position:absolute !important;
  left:16px !important;
  top:38px !important;
  width:2px !important;
  height:calc(100% + 6px) !important;
  background:#dbe8fb !important;
  border-radius:999px !important;
}

.budget-history-panel{
  display:grid !important;
  gap:16px !important;
}

.budget-history-panel article{
  padding:0 !important;
  border:0 !important;
  background:transparent !important;
}

.budget-history-panel article div,
.budget-timeline article div{
  min-width:0 !important;
}

.budget-history-panel article strong,
.budget-timeline article strong{
  display:block !important;
  color:#071a38 !important;
  font-size:14px !important;
  font-weight:900 !important;
  margin-bottom:5px !important;
}

.budget-history-panel article p,
.budget-timeline article p{
  margin:0 0 8px !important;
  color:#445b78 !important;
  font-size:13px !important;
  line-height:1.4 !important;
  font-weight:700 !important;
}

.budget-history-panel article small,
.budget-timeline article small{
  display:block !important;
  color:#5f7590 !important;
  font-size:12px !important;
  font-weight:900 !important;
}

/* ===== HISTORIAL / SEGUIMIENTO - ICONOGRAFÍA DEFINITIVA ===== */

.budget-history-panel,
.budget-timeline{
  display:grid !important;
  gap:18px !important;
  position:relative !important;
  margin:0 !important;
  padding:0 !important;
}

.budget-history-panel .budget-event-row,
.budget-timeline .budget-event-row{
  position:relative !important;
  display:grid !important;
  grid-template-columns:42px 1fr !important;
  gap:14px !important;
  align-items:start !important;
  padding:0 !important;
  border:0 !important;
  background:transparent !important;
}

.budget-event-marker{
  width:34px !important;
  height:34px !important;
  min-width:34px !important;
  border-radius:999px !important;
  display:grid !important;
  place-items:center !important;
  background:#eef5ff !important;
  border:1px solid #d9e7ff !important;
  color:#155ee8 !important;
  box-shadow:0 8px 18px rgba(21,94,232,.08) !important;
  z-index:2 !important;
}

.budget-event-marker svg{
  width:17px !important;
  height:17px !important;
  fill:none !important;
  stroke:currentColor !important;
  stroke-width:2 !important;
  stroke-linecap:round !important;
  stroke-linejoin:round !important;
}

.budget-event-marker-created{
  background:#eff6ff !important;
  color:#2563eb !important;
}

.budget-event-marker-status_changed{
  background:#eef5ff !important;
  color:#155ee8 !important;
}

.budget-event-marker-approved{
  background:#ecfdf5 !important;
  border-color:#bbf7d0 !important;
  color:#16a34a !important;
}

.budget-event-marker-archived{
  background:#f8fafc !important;
  border-color:#dbe3ee !important;
  color:#475569 !important;
}

.budget-event-marker-unarchived{
  background:#eff6ff !important;
  color:#155ee8 !important;
}

.budget-event-content{
  min-width:0 !important;
}

.budget-event-content strong{
  display:block !important;
  margin:0 0 6px !important;
  color:#071a38 !important;
  font-size:14px !important;
  font-weight:950 !important;
  line-height:1.25 !important;
}

.budget-event-content p{
  margin:0 0 8px !important;
  color:#445b78 !important;
  font-size:13px !important;
  font-weight:750 !important;
  line-height:1.4 !important;
}

.budget-event-content p small{
  display:block !important;
  margin-top:4px !important;
  color:#445b78 !important;
  font-size:12px !important;
  font-weight:850 !important;
}

.budget-event-content > small{
  display:block !important;
  color:#5f7590 !important;
  font-size:12px !important;
  font-weight:900 !important;
}

/* Línea vertical solo en seguimiento, no en historial */
#budgetTrackingEvents.budget-timeline .budget-event-row:not(:last-child)::after{
  content:"" !important;
  position:absolute !important;
  left:16px !important;
  top:38px !important;
  width:2px !important;
  height:calc(100% + 7px) !important;
  background:#dbe8fb !important;
  border-radius:999px !important;
  z-index:1 !important;
}

/* Anula líneas viejas que venían de reglas anteriores */
.budget-timeline::before{
  display:none !important;
}

.budget-history-panel .budget-event-row::after{
  display:none !important;
}

/* ===== MODAL OPCIONES VER PRESUPUESTO ===== */

.budget-view-choice-panel{
  display:grid !important;
  gap:14px !important;
}

.budget-view-choice-option{
  width:100% !important;
  display:grid !important;
  grid-template-columns:46px 1fr !important;
  align-items:center !important;
  gap:14px !important;
  padding:16px !important;
  border:1px solid #dfe8f3 !important;
  border-radius:18px !important;
  background:#ffffff !important;
  text-align:left !important;
  transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease, background .16s ease !important;
}

.budget-view-choice-option:hover{
  transform:translateY(-1px) !important;
  border-color:#bcd2ff !important;
  background:#f8fbff !important;
  box-shadow:0 14px 32px rgba(15,23,42,.08) !important;
}

.budget-view-choice-option .budget-ui-icon{
  width:42px !important;
  height:42px !important;
  border-radius:16px !important;
  background:#eef5ff !important;
  color:#155ee8 !important;
  display:grid !important;
  place-items:center !important;
}

.budget-view-choice-option .budget-ui-icon svg{
  width:21px !important;
  height:21px !important;
  stroke:#155ee8 !important;
}

.budget-view-choice-option span{
  display:grid !important;
  gap:4px !important;
}

.budget-view-choice-option strong{
  color:#071a38 !important;
  font-size:14px !important;
  font-weight:900 !important;
}

.budget-view-choice-option small{
  color:#5f7590 !important;
  font-size:12px !important;
  font-weight:750 !important;
  line-height:1.35 !important;
}

.budget-number-cell-no-avatar{
  display:flex !important;
  align-items:center !important;
  gap:0 !important;
}

.budget-number-cell-no-avatar strong{
  margin-left:0 !important;
}

.klynic-patient-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 32px 24px;
  background: rgba(15, 23, 42, 0.18);
  backdrop-filter: blur(8px);
  overflow-y: auto;
}

.klynic-patient-backdrop.hidden {
  display: none;
}

.klynic-patient-modal {
  position: relative;
  width: min(960px, calc(100vw - 48px));
  background: #ffffff;
  border: 1px solid #e3eaf5;
  border-radius: 24px;
  box-shadow: 0 28px 80px rgba(15, 23, 42, 0.18);
  padding: 26px 28px 26px;
}

.klynic-patient-close {
  position: absolute;
  top: 28px;
  right: 28px;
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 999px;
  background: #edf4ff;
  color: #0f1f3d;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}

.klynic-patient-close:hover {
  transform: translateY(-1px);
  background: #e4efff;
  box-shadow: 0 12px 24px rgba(37, 99, 235, 0.12);
}

.klynic-patient-close svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  stroke-width: 2.4;
  fill: none;
  stroke-linecap: round;
}

.klynic-patient-header {
  padding: 0 58px 22px 2px;
}

.klynic-patient-header h2 {
  margin: 0;
  color: #071b45;
  font-size: 28px;
  line-height: 1.1;
  font-weight: 800;
  letter-spacing: -0.035em;
}

.klynic-patient-header p {
  margin: 8px 0 0;
  color: #64748b;
  font-size: 15px;
  line-height: 1.45;
  font-weight: 500;
}

.klynic-patient-form {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.klynic-patient-section {
  overflow: hidden;
  border: 1px solid #dce6f3;
  border-radius: 18px;
  background: #ffffff;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.035);
}

.klynic-patient-section-head {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 88px;
  padding: 18px 24px;
  border-bottom: 1px solid #e6edf7;
  background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
}

.klynic-patient-section-head h3 {
  margin: 0;
  color: #0b1f46;
  font-size: 17px;
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: -0.015em;
}

.klynic-patient-section-icon {
  width: 46px;
  height: 46px;
  border-radius: 16px;
  background: #eaf2ff;
  color: #1857e8;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

.klynic-patient-section-icon svg {
  width: 23px;
  height: 23px;
  stroke: currentColor;
  stroke-width: 2.1;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.klynic-patient-fields {
  display: grid;
  gap: 20px 24px;
  padding: 24px;
}

.klynic-patient-fields-3 {
  grid-template-columns: 1fr 1fr 0.78fr;
}

.klynic-patient-fields-2 {
  grid-template-columns: 1fr 1fr;
}

.klynic-field {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

.klynic-field-full {
  grid-column: 1 / -1;
}

.klynic-field-label {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #60708d;
  font-size: 14px;
  line-height: 1;
  font-weight: 800;
}

.klynic-field-label small {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 11px;
  border-radius: 999px;
  background: #eaf2ff;
  color: #1557e6;
  font-size: 12px;
  line-height: 1;
  font-weight: 800;
}

.klynic-mini-info {
  width: 17px;
  height: 17px;
  border: 2px solid #667895;
  border-radius: 999px;
  background: transparent;
  color: #667895;
  font-size: 11px;
  line-height: 1;
  font-weight: 900;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.klynic-field input,
.klynic-field select,
.klynic-field textarea {
  width: 100%;
  min-height: 52px;
  border: 1px solid #dbe5f2;
  border-radius: 15px;
  background: #ffffff;
  color: #101f3f;
  font-size: 15px;
  font-weight: 650;
  outline: none;
  padding: 0 16px;
  box-shadow: inset 0 1px 0 rgba(15, 23, 42, 0.02);
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.klynic-field textarea {
  min-height: 86px;
  resize: vertical;
  padding-top: 15px;
  line-height: 1.45;
}

.klynic-field input::placeholder,
.klynic-field textarea::placeholder {
  color: #9aa7bb;
  font-weight: 600;
}

.klynic-field input:focus,
.klynic-field select:focus,
.klynic-field textarea:focus {
  border-color: #2a6bf2;
  box-shadow: 0 0 0 4px rgba(42, 107, 242, 0.11);
}

.klynic-patient-additional {
  align-items: start;
}

.klynic-patient-next-step {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 15px 18px;
  border: 1px solid #d5e5ff;
  border-radius: 18px;
  background: linear-gradient(180deg, #f5f9ff 0%, #eef6ff 100%);
}

.klynic-patient-next-step span {
  width: 44px;
  height: 44px;
  border-radius: 15px;
  background: #dcecff;
  color: #1857e8;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

.klynic-patient-next-step svg {
  width: 23px;
  height: 23px;
  stroke: currentColor;
  stroke-width: 2.1;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.klynic-patient-next-step strong {
  display: block;
  color: #12336d;
  font-size: 15px;
  font-weight: 850;
  margin-bottom: 4px;
}

.klynic-patient-next-step p {
  margin: 0;
  color: #5c6f90;
  font-size: 14px;
  line-height: 1.35;
  font-weight: 600;
}

.klynic-patient-error {
  min-height: 18px;
  margin: -6px 0 0;
  color: #dc2626;
  font-size: 14px;
  font-weight: 700;
}

.klynic-patient-actions {
  display: flex;
  justify-content: flex-end;
  gap: 16px;
  padding-top: 2px;
}

.klynic-patient-cancel,
.klynic-patient-save {
  min-width: 154px;
  height: 48px;
  border-radius: 15px;
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.klynic-patient-cancel {
  border: 1px solid #d9e3f0;
  background: #ffffff;
  color: #1857e8;
}

.klynic-patient-save {
  border: 1px solid #1557e6;
  background: linear-gradient(180deg, #2563eb 0%, #1557e6 100%);
  color: #ffffff;
  box-shadow: 0 12px 24px rgba(21, 87, 230, 0.22);
}

.klynic-patient-cancel:hover,
.klynic-patient-save:hover {
  transform: translateY(-1px);
}

.klynic-patient-save:disabled {
  opacity: 0.72;
  cursor: not-allowed;
  transform: none;
}

@media (max-width: 900px) {
  .klynic-patient-modal {
    width: min(100%, calc(100vw - 28px));
    padding: 22px 18px;
  }

  .klynic-patient-fields-3,
  .klynic-patient-fields-2 {
    grid-template-columns: 1fr;
  }

  .klynic-patient-actions {
    flex-direction: column-reverse;
  }

  .klynic-patient-cancel,
  .klynic-patient-save {
    width: 100%;
  }
}

.budget-patient-file-btn {
  width: fit-content;
  border: 0;
  background: transparent;
  color: #1557e6;
  font-size: 13px;
  font-weight: 800;
  padding: 0;
  margin-top: 2px;
  cursor: pointer;
}

.budget-patient-file-btn:hover {
  text-decoration: underline;
}

.klynic-patient-save.hidden,
#editBudgetPatientBtn.hidden {
  display: none;
}

.procedure-materials-draft-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid #e2eaf5;
}

.procedure-materials-draft-actions small {
  max-width: 280px;
  color: #64748b;
  font-size: 12.5px;
  line-height: 1.35;
  font-weight: 650;
}

@media (max-width: 760px) {
  .procedure-materials-draft-actions {
    align-items: stretch;
    flex-direction: column;
  }
}

.procedure-draft-materials-preview {
  margin: 0 0 18px;
  padding: 16px;
  border: 1px solid #dbe7f6;
  border-radius: 18px;
  background: linear-gradient(180deg, #f8fbff 0%, #ffffff 100%);
}

.procedure-draft-materials-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
}

.procedure-draft-materials-head strong {
  display: block;
  color: #0f172a;
  font-size: 14px;
  font-weight: 850;
}

.procedure-draft-materials-head span {
  display: block;
  margin-top: 3px;
  color: #64748b;
  font-size: 12.5px;
  font-weight: 650;
}

.procedure-draft-materials-head b {
  color: #1857e8;
  font-size: 14px;
  font-weight: 900;
  white-space: nowrap;
}

.procedure-draft-materials-list {
  display: grid;
  gap: 8px;
}

.procedure-draft-material-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 10px 12px;
  border-radius: 14px;
  background: #ffffff;
  border: 1px solid #edf2f7;
}

.procedure-draft-material-row span {
  color: #0f172a;
  font-size: 13px;
  font-weight: 800;
}

.procedure-draft-material-row small {
  color: #64748b;
  font-size: 12.5px;
  font-weight: 700;
  text-align: right;
}

.procedure-materials-entry-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}

.procedure-materials-entry-copy {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.procedure-materials-entry-copy strong {
  line-height: 1.25;
}

.procedure-materials-entry-copy p,
.procedure-materials-entry-copy small {
  margin: 0;
  line-height: 1.45;
}

#manageProcedureMaterialsFromFormBtn {
  margin-top: 2px;
}

.procedure-draft-materials-preview {
  margin-top: 14px;
}

.procedure-draft-materials-head {
  gap: 16px;
}

.procedure-draft-materials-list {
  margin-top: 12px;
}

.suggested-search-wrap {
  margin: 16px 0 14px;
}

.suggested-search-input {
  width: 100%;
  min-height: 46px;
  border: 1px solid #dbe7f6;
  border-radius: 16px;
  padding: 0 16px;
  font-size: 14px;
  font-weight: 700;
  color: #0f172a;
  background: #fff;
  outline: none;
}

.suggested-search-input:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.1);
}

.materials-list-card .cost-items-table,
.materials-catalog-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.materials-catalog-row {
  border-radius: 18px;
}

.materials-card-head {
  align-items: flex-start;
  gap: 18px;
}

.materials-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  width: min(620px, 100%);
}

.materials-search {
  position: relative;
  flex: 1;
}

.materials-search svg {
  position: absolute;
  left: 16px;
  top: 50%;
  width: 18px;
  height: 18px;
  transform: translateY(-50%);
  fill: none;
  stroke: #2563eb;
  stroke-width: 2;
}

.materials-search input {
  width: 100%;
  min-height: 48px;
  border: 1px solid #dbe7f6;
  border-radius: 18px;
  padding: 0 16px 0 46px;
  background: #fff;
  color: #0f172a;
  font-weight: 700;
  outline: none;
}

.materials-search input:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 4px rgba(37, 99, 235, .10);
}

.materials-filter-btn {
  min-height: 48px;
  border: 1px solid #cfe1fb;
  border-radius: 18px;
  padding: 0 16px;
  background: #eff7ff;
  color: #1d4ed8;
  font-weight: 900;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.materials-filter-btn svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}

.materials-filter-btn.is-active {
  background: #2563eb;
  border-color: #2563eb;
  color: #fff;
}

.materials-results-info {
  margin: 14px 0 16px;
  color: #64748b;
  font-size: 13px;
  font-weight: 800;
}

.material-filter-select {
  width: 100%;
  min-height: 46px;
  border: 1px solid #dbe7f6;
  border-radius: 16px;
  padding: 0 14px;
  background: #fff;
  color: #0f172a;
  font-weight: 800;
  outline: none;
}

.material-filter-select:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 4px rgba(37, 99, 235, .10);
}

@media (max-width: 900px) {
  .materials-card-head,
  .materials-toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .materials-toolbar {
    width: 100%;
  }
}

.material-cost-range-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 14px;
}

.material-cost-range-fields label {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.material-cost-range-fields span {
  color: #64748b;
  font-size: 12px;
  font-weight: 900;
}

.material-cost-range-fields input {
  min-height: 44px;
  border: 1px solid #dbe7f6;
  border-radius: 14px;
  padding: 0 13px;
  background: #fff;
  color: #0f172a;
  font-weight: 800;
  outline: none;
}

.material-cost-range-fields input:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 4px rgba(37, 99, 235, .10);
}

.materials-clear-inline-btn {
  min-height: 48px;
  border: 1px solid #fecaca;
  border-radius: 18px;
  padding: 0 16px;
  background: #fff7f7;
  color: #dc2626;
  font-weight: 900;
  cursor: pointer;
  white-space: nowrap;
}

.materials-clear-inline-btn:hover {
  background: #fee2e2;
}

.material-filters-modal .budget-filters-actions {
  padding-bottom: 24px;
  margin-bottom: 4px;
}

@media (max-width: 700px) {
  .material-cost-range-fields {
    grid-template-columns: 1fr;
  }
}


.material-cost-filter-card {
  overflow: hidden;
}

.material-cost-mode-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.material-cost-mode-grid button {
  min-height: 36px;
  border: 1px solid #d8e6fb;
  border-radius: 12px;
  padding: 0 13px;
  background: #fff;
  color: #35527a;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}

.material-cost-mode-grid button.active {
  border-color: #2563eb;
  background: #eff6ff;
  color: #1d4ed8;
}

.material-cost-range-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 16px;
}

.material-cost-range-fields.hidden,
.material-cost-range-fields label.hidden {
  display: none;
}

.material-cost-range-fields label {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.material-cost-range-fields span {
  color: #64748b;
  font-size: 12px;
  font-weight: 900;
}

.material-cost-range-fields input {
  width: 100%;
  box-sizing: border-box;
  min-height: 46px;
  border: 1px solid #dbe7f6;
  border-radius: 14px;
  padding: 0 14px;
  background: #fff;
  color: #0f172a;
  font-weight: 800;
  outline: none;
}

.material-cost-range-fields input:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 4px rgba(37, 99, 235, .10);
}

.material-filters-modal .budget-filters-actions {
  padding: 18px 24px 28px;
  margin-top: 4px;
  border-top: 1px solid #eef3fb;
}

@media (max-width: 700px) {
  .material-cost-range-fields {
    grid-template-columns: 1fr;
  }
}


.klynic-patient-modal-pro {
  max-width: 1040px;
}

.klynic-patient-modal-kicker {
  display: inline-flex;
  margin-bottom: 8px;
  color: #2563eb;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.klynic-patient-section-head {
  align-items: flex-start;
}

.klynic-patient-section-head p {
  margin: 4px 0 0;
  color: #64748b;
  font-size: 13px;
  font-weight: 700;
}

.klynic-patient-fields-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.klynic-field-full {
  grid-column: 1 / -1;
}

.klynic-patient-collapse-head {
  width: 100%;
  border: 0;
  background: transparent;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 0;
  text-align: left;
  cursor: pointer;
}

.klynic-patient-collapse-head strong {
  display: block;
  color: #0f172a;
  font-size: 16px;
  font-weight: 950;
}

.klynic-patient-collapse-head small {
  display: block;
  margin-top: 4px;
  color: #64748b;
  font-size: 13px;
  font-weight: 700;
}

.klynic-patient-collapse-head b {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: #eef6ff;
  color: #2563eb;
  display: grid;
  place-items: center;
  transition: transform .18s ease;
}

.klynic-patient-collapsible.is-collapsed .klynic-patient-collapse-body {
  display: none;
}

.klynic-patient-collapsible:not(.is-collapsed) .klynic-patient-collapse-head b {
  transform: rotate(180deg);
}

.klynic-patient-collapse-body {
  margin-top: 18px;
}

@media (max-width: 900px) {
  .klynic-patient-fields-3,
  .klynic-patient-fields-2 {
    grid-template-columns: 1fr;
  }
}

.patient-row-no-avatar {
  grid-template-columns: minmax(220px, 1.4fr) minmax(150px, .9fr) minmax(190px, 1fr) auto auto;
}

.patient-actions-double {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

.patient-actions-double .secondary-btn {
  min-width: 86px;
}

.klynic-patient-collapsible {
  padding: 18px 20px;
}

.klynic-patient-collapse-head {
  padding: 0;
}

.klynic-patient-collapse-body {
  padding-top: 18px;
}

.staff-pro-modal {
  width: min(960px, calc(100vw - 32px));
  max-height: calc(100vh - 48px);
  overflow: auto;
  background: #fff;
  border-radius: 24px;
  padding: 26px;
  position: relative;
  box-shadow: 0 30px 80px rgba(15, 23, 42, .24);
}

.staff-pro-close {
  position: absolute;
  right: 22px;
  top: 20px;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 999px;
  background: #eef6ff;
  color: #0f172a;
  font-size: 24px;
  font-weight: 900;
  cursor: pointer;
}

.staff-pro-header h2 {
  margin: 0;
  font-size: 24px;
  color: #0f172a;
}

.staff-pro-header p {
  margin: 8px 0 22px;
  color: #64748b;
  font-weight: 700;
}

.staff-pro-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.staff-pro-section {
  border: 1px solid #dbe7f6;
  border-radius: 18px;
  overflow: hidden;
  background: #fff;
}

.staff-pro-section-head,
.staff-pro-collapse-head {
  width: 100%;
  border: 0;
  background: #fff;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px;
  text-align: left;
}

.staff-pro-section-head {
  border-bottom: 1px solid #edf3fb;
}

.staff-pro-collapse-head {
  cursor: pointer;
}

.staff-pro-section-icon {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: #eaf4ff;
  color: #2563eb;
  flex: 0 0 auto;
}

.staff-pro-section-icon svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}

.staff-pro-section-head strong,
.staff-pro-collapse-head strong {
  display: block;
  color: #0f172a;
  font-size: 17px;
  font-weight: 950;
}

.staff-pro-section-head small,
.staff-pro-collapse-head small {
  display: block;
  margin-top: 3px;
  color: #64748b;
  font-size: 12px;
  font-weight: 800;
}

.staff-pro-collapse-head b {
  margin-left: auto;
  color: #2563eb;
  transition: transform .18s ease;
}

.staff-pro-collapsible.is-collapsed .staff-pro-collapse-body {
  display: none;
}

.staff-pro-collapsible.is-collapsed .staff-pro-collapse-head b {
  transform: rotate(180deg);
}

.staff-pro-grid,
.staff-pro-config-grid {
  padding: 18px;
  display: grid;
  gap: 16px;
}

.staff-pro-grid-1 { grid-template-columns: 1fr; }
.staff-pro-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.staff-pro-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.staff-pro-full {
  grid-column: 1 / -1;
}

.staff-pro-grid label,
.staff-pro-config-grid label,
.staff-pro-notes {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.staff-pro-grid span,
.staff-pro-config-grid span,
.staff-pro-notes span {
  color: #536987;
  font-size: 12px;
  font-weight: 900;
}

.staff-pro-grid input,
.staff-pro-grid select,
.staff-pro-grid textarea,
.staff-pro-config-grid input,
.staff-pro-config-grid select,
.staff-pro-notes textarea {
  min-height: 48px;
  border: 1px solid #dbe7f6;
  border-radius: 14px;
  padding: 0 14px;
  font-weight: 800;
  color: #0f172a;
  outline: none;
}

.staff-pro-grid textarea,
.staff-pro-notes textarea {
  padding-top: 12px;
}

.staff-pro-toggle {
  flex-direction: row !important;
  align-items: center;
  gap: 12px;
}

.staff-pro-toggle input {
  width: 42px;
  height: 24px;
}

.staff-pro-checks {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.staff-pro-checks label {
  flex-direction: row;
  align-items: center;
}

.staff-payment-options {
  padding: 18px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.staff-payment-card {
  border: 1px solid #dbe7f6;
  border-radius: 16px;
  padding: 16px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.staff-payment-card.is-selected {
  border-color: #2563eb;
  background: #eff6ff;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .10);
}

.staff-payment-card strong {
  color: #0f172a;
  font-weight: 950;
}

.staff-payment-card small {
  color: #64748b;
  font-weight: 700;
  line-height: 1.35;
}

.staff-payment-config {
  padding: 0 18px 18px;
}

.staff-cost-preview {
  margin-top: 14px;
  background: #eaf4ff;
  border: 1px solid #c9ddff;
  border-radius: 16px;
  padding: 16px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.staff-cost-preview strong {
  color: #1e3a8a;
}

.staff-cost-preview small {
  display: block;
  margin-top: 3px;
  color: #64748b;
  font-weight: 700;
}

.staff-cost-preview b {
  color: #2563eb;
  font-size: 22px;
}

.staff-pro-actions {
  display: flex;
  justify-content: flex-end;
  gap: 14px;
  padding-top: 10px;
}

@media (max-width: 900px) {
  .staff-pro-grid-2,
  .staff-pro-grid-3,
  .staff-payment-options {
    grid-template-columns: 1fr;
  }
}

.staff-payment-card.is-disabled {
  opacity: .45;
  pointer-events: none;
}

.staff-pro-config-grid-polished {
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
}

.staff-pro-toggle-card {
  min-height: 112px;
  border: 1px solid #dbe7f6;
  border-radius: 16px;
  padding: 16px;
  background: #f8fbff;
  display: grid !important;
  grid-template-columns: auto auto 1fr;
  align-items: center;
  gap: 12px;
}

.staff-pro-toggle-card > input {
  display: none;
}

.staff-pro-toggle-visual {
  width: 46px;
  height: 26px;
  border-radius: 999px;
  background: #dbe7f6;
  position: relative;
  flex: 0 0 auto;
  transition: background .18s ease;
}

.staff-pro-toggle-visual::after {
  content: "";
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: #fff;
  position: absolute;
  top: 3px;
  left: 3px;
  box-shadow: 0 2px 8px rgba(15, 23, 42, .16);
  transition: transform .18s ease;
}

.staff-pro-toggle-card input:checked + .staff-pro-toggle-visual {
  background: #2563eb;
}

.staff-pro-toggle-card input:checked + .staff-pro-toggle-visual::after {
  transform: translateX(20px);
}

.staff-pro-toggle-copy strong {
  display: block;
  color: #0f172a;
  font-size: 14px;
  font-weight: 950;
}

.staff-pro-toggle-copy small {
  display: block;
  margin-top: 4px;
  color: #64748b;
  font-size: 12px;
  line-height: 1.35;
  font-weight: 750;
}

.staff-pro-assignment-card {
  border: 1px solid #dbe7f6;
  border-radius: 16px;
  padding: 16px;
  background: #fff;
}

.staff-pro-assignment-title strong {
  display: block;
  color: #0f172a;
  font-size: 14px;
  font-weight: 950;
}

.staff-pro-assignment-title small {
  display: block;
  margin-top: 4px;
  color: #64748b;
  font-size: 12px;
  line-height: 1.35;
  font-weight: 750;
}

.staff-pro-assignment-options {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}

.staff-pro-assignment-options label {
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  gap: 10px;
  color: #0f172a;
  font-size: 13px;
  font-weight: 850;
}

.staff-pro-assignment-options input {
  width: 16px;
  height: 16px;
  min-height: auto !important;
  accent-color: #2563eb;
}

.staff-payment-card.is-disabled {
  opacity: 1;
  pointer-events: auto;
}

@media (max-width: 900px) {
  .staff-pro-config-grid-polished {
    grid-template-columns: 1fr;
  }
}

.patient-row-crm {
  grid-template-columns: minmax(220px, 1.25fr) minmax(210px, 1.1fr) minmax(120px, .7fr) minmax(150px, .8fr) minmax(190px, 1fr) auto;
  gap: 18px;
  align-items: center;
  position: relative;
  padding: 18px 20px;
  border-radius: 18px;
}

.patient-row-crm small {
  display: block;
  margin-top: 3px;
  color: #64748b;
  font-size: 12px;
  font-weight: 700;
}

.patient-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.patient-tags span {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  background: #eff6ff;
  color: #1d4ed8;
  font-size: 12px;
  font-weight: 850;
}

.patient-row-menu-wrap {
  position: relative;
  display: flex;
  justify-content: flex-end;
}

.patient-row-more-btn {
  width: 38px;
  height: 38px;
  border: 1px solid #dbe7f6;
  border-radius: 999px;
  background: #fff;
  display: grid;
  place-items: center;
  gap: 2px;
  cursor: pointer;
}

.patient-row-more-btn span {
  width: 4px;
  height: 4px;
  border-radius: 999px;
  background: #2563eb;
  display: block;
}

.patient-row-menu {
  position: absolute;
  right: 0;
  top: 44px;
  min-width: 150px;
  padding: 8px;
  border: 1px solid #dbe7f6;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 18px 40px rgba(15, 23, 42, .16);
  z-index: 20;
}

.patient-row-menu button {
  width: 100%;
  border: 0;
  background: transparent;
  border-radius: 12px;
  padding: 10px 12px;
  text-align: left;
  color: #0f172a;
  font-weight: 850;
  cursor: pointer;
}

.patient-row-menu button:hover {
  background: #eff6ff;
  color: #1d4ed8;
}

.patient-row-menu button.danger {
  color: #dc2626;
}

.patient-row-menu button.danger:hover {
  background: #fff1f2;
}

.klynic-confirm-modal {
  width: min(460px, calc(100vw - 32px));
  background: #fff;
  border-radius: 24px;
  padding: 26px;
  box-shadow: 0 30px 80px rgba(15, 23, 42, .24);
}

.klynic-confirm-modal h2 {
  margin: 0;
  color: #0f172a;
  font-size: 22px;
}

.klynic-confirm-modal p {
  margin: 10px 0 22px;
  color: #64748b;
  font-weight: 700;
  line-height: 1.45;
}

.klynic-confirm-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

.patient-list-premium-card {
  overflow: visible;
  padding: 0;
}

.patient-list-premium-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  padding: 24px 24px 22px;
  border-bottom: 1px solid #e7eef8;
}

.patient-list-tools {
  display: flex;
  align-items: center;
  gap: 12px;
}

.patient-search-premium {
  width: 330px;
  position: relative;
}

.patient-search-premium svg {
  position: absolute;
  left: 16px;
  top: 50%;
  width: 18px;
  height: 18px;
  transform: translateY(-50%);
  fill: none;
  stroke: #64748b;
  stroke-width: 2;
}

.patient-search-premium input {
  width: 100%;
  height: 48px;
  border: 1px solid #dbe7f6;
  border-radius: 16px;
  padding: 0 16px 0 46px;
  color: #0f172a;
  font-weight: 800;
  outline: none;
}

.patient-filter-premium-btn {
  height: 48px;
  border: 1px solid #dbe7f6;
  border-radius: 16px;
  background: #fff;
  padding: 0 18px;
  color: #1d4ed8;
  font-weight: 900;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  cursor: pointer;
}

.patient-filter-premium-btn svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}

.patient-table-premium {
  width: 100%;
  overflow-x: auto;
}

.patient-table-header,
.patient-row-premium {
  display: grid;
  grid-template-columns:
    minmax(180px, 1.2fr)
    minmax(180px, 1.05fr)
    minmax(190px, 1.05fr)
    minmax(170px, .95fr)
    minmax(150px, .8fr)
    minmax(130px, .75fr)
    minmax(150px, .9fr)
    minmax(120px, auto);
  gap: 18px;
  align-items: center;
  min-width: 1180px;
}

.patient-table-header {
  padding: 16px 24px;
  color: #64748b;
  font-size: 12px;
  font-weight: 950;
  border-bottom: 1px solid #e7eef8;
}

.patient-row-premium {
  position: relative;
  padding: 20px 24px;
  border-bottom: 1px solid #e7eef8;
  background: #fff;
}

.patient-row-premium:last-child {
  border-bottom: 0;
}

.patient-premium-main strong,
.patient-premium-contact strong,
.patient-premium-doctor strong,
.patient-premium-activity strong,
.patient-premium-value strong {
  display: block;
  color: #0f172a;
  font-size: 13px;
  font-weight: 950;
}

.patient-premium-main span,
.patient-premium-contact span,
.patient-premium-doctor span,
.patient-premium-activity span,
.patient-premium-value span {
  display: block;
  margin-top: 5px;
  color: #64748b;
  font-size: 12px;
  font-weight: 750;
}

.patient-premium-doctor,
.patient-premium-activity {
  display: flex;
  align-items: center;
  gap: 10px;
}

.patient-doctor-placeholder,
.patient-activity-icon {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: #eef6ff;
  color: #2563eb;
  flex: 0 0 auto;
}

.patient-doctor-placeholder svg,
.patient-activity-icon svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}

.patient-commercial-pill {
  display: inline-flex;
  min-height: 30px;
  align-items: center;
  padding: 0 12px;
  border-radius: 999px;
  background: #eef6ff;
  color: #1d4ed8;
  font-size: 12px;
  font-weight: 950;
}

.patient-commercial-pill.pill-warning {
  background: #fff4de;
  color: #b45309;
}

.patient-commercial-pill.pill-muted {
  background: #eef2f7;
  color: #64748b;
}

.patient-commercial-pill.pill-danger {
  background: #fee2e2;
  color: #b91c1c;
}

.patient-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.patient-tags span {
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  padding: 0 11px;
  border-radius: 999px;
  background: #eff6ff;
  color: #1d4ed8;
  font-size: 12px;
  font-weight: 900;
}

.patient-tags span:first-child:nth-last-child(1) {
  background: #f1f5f9;
  color: #64748b;
}

.patient-premium-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

.patient-action-soft {
  height: 34px;
  border: 0;
  border-radius: 12px;
  background: #eff6ff;
  color: #1d4ed8;
  padding: 0 14px;
  font-size: 13px;
  font-weight: 950;
  cursor: pointer;
}

.patient-row-menu-wrap {
  position: relative;
}

.patient-row-more-btn {
  width: 34px;
  height: 34px;
  border: 1px solid #dbe7f6;
  border-radius: 12px;
  background: #fff;
  display: grid;
  place-items: center;
  gap: 2px;
  cursor: pointer;
}

.patient-row-more-btn span {
  width: 4px;
  height: 4px;
  border-radius: 999px;
  background: #2563eb;
  display: block;
}

.patient-row-menu {
  position: absolute;
  right: 0;
  top: 42px;
  min-width: 150px;
  padding: 8px;
  border: 1px solid #dbe7f6;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 18px 40px rgba(15, 23, 42, .16);
  z-index: 50;
}

.patient-row-menu button {
  width: 100%;
  border: 0;
  background: transparent;
  border-radius: 12px;
  padding: 10px 12px;
  text-align: left;
  color: #0f172a;
  font-weight: 850;
  cursor: pointer;
}

.patient-row-menu button:hover {
  background: #eff6ff;
  color: #1d4ed8;
}

.patient-row-menu button.danger {
  color: #dc2626;
}

.patient-row-menu button.danger:hover {
  background: #fff1f2;
}

@media (max-width: 900px) {
  .patient-list-premium-head {
    flex-direction: column;
    align-items: stretch;
  }

  .patient-list-tools {
    flex-direction: column;
    align-items: stretch;
  }

  .patient-search-premium {
    width: 100%;
  }
}

.patient-list-premium-card {
  overflow: visible;
  padding: 0;
}

.patient-list-premium-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  padding: 24px;
  border-bottom: 1px solid #e7eef8;
}

.patient-list-tools {
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 520px;
  width: 100%;
}

.patient-search-premium {
  position: relative;
  flex: 1;
}

.patient-search-premium svg {
  position: absolute;
  left: 15px;
  top: 50%;
  width: 17px;
  height: 17px;
  transform: translateY(-50%);
  fill: none;
  stroke: #64748b;
  stroke-width: 2;
}

.patient-search-premium input {
  width: 100%;
  height: 46px;
  border: 1px solid #dbe7f6;
  border-radius: 15px;
  padding: 0 15px 0 44px;
  color: #0f172a;
  font-weight: 800;
  outline: none;
}

.patient-filter-premium-btn {
  height: 46px;
  border: 1px solid #dbe7f6;
  border-radius: 15px;
  background: #fff;
  padding: 0 16px;
  color: #1d4ed8;
  font-weight: 900;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.patient-filter-premium-btn svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}

.patient-table-premium {
  width: 100%;
  overflow: visible;
}

.patient-table-header,
.patient-row-premium {
  display: grid;
  grid-template-columns:
    minmax(145px, 1.2fr)
    minmax(150px, 1.05fr)
    minmax(150px, 1.05fr)
    minmax(145px, .95fr)
    minmax(120px, .8fr)
    minmax(115px, .75fr)
    minmax(120px, .75fr)
    minmax(82px, auto);
  gap: 14px;
  align-items: center;
}

.patient-table-header {
  padding: 14px 22px;
  color: #64748b;
  font-size: 11px;
  font-weight: 950;
  border-bottom: 1px solid #e7eef8;
}

.patient-row-premium {
  position: relative;
  padding: 18px 22px;
  border-bottom: 1px solid #e7eef8;
  background: #fff;
}

.patient-row-premium:last-child {
  border-bottom: 0;
}

.patient-premium-main strong,
.patient-premium-contact strong,
.patient-premium-doctor strong,
.patient-premium-activity strong,
.patient-premium-value strong {
  display: block;
  color: #0f172a;
  font-size: 12.5px;
  font-weight: 950;
  line-height: 1.2;
}

.patient-premium-main span,
.patient-premium-contact span,
.patient-premium-doctor span,
.patient-premium-activity span,
.patient-premium-value span {
  display: block;
  margin-top: 4px;
  color: #64748b;
  font-size: 11.5px;
  font-weight: 750;
  line-height: 1.2;
}

.patient-premium-doctor,
.patient-premium-activity {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}

.patient-doctor-avatar,
.patient-activity-icon {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  flex: 0 0 32px;
}

.patient-doctor-avatar {
  background: #eef6ff;
  color: #2563eb;
  font-size: 11px;
  font-weight: 950;
}

.patient-doctor-avatar.is-empty {
  color: #64748b;
}

.patient-activity-icon {
  background: #eaf4ff;
  color: #2563eb;
}

.patient-doctor-avatar svg,
.patient-activity-icon svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}

.patient-commercial-pill {
  display: inline-flex;
  min-height: 28px;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
  border-radius: 999px;
  background: #eaf4ff;
  color: #1d4ed8;
  font-size: 11.5px;
  font-weight: 950;
  line-height: 1.1;
  text-align: center;
}

.patient-commercial-pill.pill-warning {
  background: #fff4de;
  color: #b45309;
}

.patient-commercial-pill.pill-muted {
  background: #eef2f7;
  color: #64748b;
}

.patient-commercial-pill.pill-danger {
  background: #fee2e2;
  color: #b91c1c;
}

.patient-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.patient-tags span {
  min-height: 26px;
  display: inline-flex;
  align-items: center;
  padding: 0 10px;
  border-radius: 999px;
  background: #eff6ff;
  color: #1d4ed8;
  font-size: 11.5px;
  font-weight: 900;
  white-space: nowrap;
}

.patient-tags span:first-child:nth-last-child(1) {
  background: #f1f5f9;
  color: #64748b;
}

.patient-premium-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.patient-action-soft {
  height: 32px;
  border: 0;
  border-radius: 11px;
  background: #eff6ff;
  color: #1d4ed8;
  padding: 0 13px;
  font-size: 12px;
  font-weight: 950;
  cursor: pointer;
}

.patient-row-menu-wrap {
  position: relative;
}

.patient-row-more-btn {
  width: 32px;
  height: 32px;
  border: 1px solid #dbe7f6;
  border-radius: 11px;
  background: #fff;
  color: #2563eb;
  display: grid;
  place-items: center;
  cursor: pointer;
}

.patient-row-more-btn svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

.patient-row-menu {
  position: absolute;
  right: 0;
  top: 40px;
  min-width: 150px;
  padding: 8px;
  border: 1px solid #dbe7f6;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 18px 40px rgba(15, 23, 42, .16);
  z-index: 50;
}

.patient-row-menu button {
  width: 100%;
  border: 0;
  background: transparent;
  border-radius: 12px;
  padding: 10px 12px;
  text-align: left;
  color: #0f172a;
  font-weight: 850;
  cursor: pointer;
}

.patient-row-menu button:hover {
  background: #eff6ff;
  color: #1d4ed8;
}

.patient-row-menu button.danger {
  color: #dc2626;
}

.patient-row-menu button.danger:hover {
  background: #fff1f2;
}

@media (max-width: 1280px) {
  .patient-table-premium {
    overflow-x: auto;
  }

  .patient-table-header,
  .patient-row-premium {
    min-width: 1050px;
  }
}

@media (max-width: 900px) {
  .patient-list-premium-head {
    flex-direction: column;
    align-items: stretch;
  }

  .patient-list-tools {
    max-width: none;
    flex-direction: column;
    align-items: stretch;
  }

  .patient-filter-premium-btn {
    justify-content: center;
  }
}

/* ===== PACIENTES CRM - AJUSTE FINAL MOCKUP ===== */

.patient-table-header,
.patient-row-premium {
  grid-template-columns:
    minmax(190px, 1.2fr)
    minmax(190px, 1.05fr)
    minmax(190px, 1.05fr)
    minmax(170px, .95fr)
    minmax(140px, .8fr)
    minmax(130px, .75fr)
    minmax(150px, .85fr)
    minmax(96px, auto) !important;
}

.patient-premium-doctor {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.patient-doctor-avatar {
  width: 38px;
  height: 38px;
  min-width: 38px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: linear-gradient(135deg, #eaf2ff, #f5f8ff);
  color: #2563eb;
  font-size: 12px;
  font-weight: 950;
  border: 1px solid #dbeafe;
}

.patient-doctor-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.patient-doctor-avatar.is-empty {
  color: #64748b;
  background: #f1f5f9;
}

.patient-doctor-avatar svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}

.patient-premium-activity {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.patient-activity-icon {
  width: 38px;
  height: 38px;
  min-width: 38px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: #eaf2ff;
  color: #2563eb;
}

.patient-activity-icon svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.patient-premium-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.patient-premium-actions .budget-icon-btn {
  width: 38px;
  height: 38px;
  border-radius: 14px;
  border: 1px solid #dbe7f6;
  background: #eff6ff;
  color: #2563eb;
  display: inline-grid;
  place-items: center;
  padding: 0;
}

.patient-premium-actions .budget-icon-btn svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.patient-row-menu-wrap {
  position: relative;
}

.patient-row-menu.budget-mini-menu {
  position: absolute;
  right: 0;
  top: 46px;
  min-width: 230px;
  z-index: 80;
}

.patient-row-menu.budget-mini-menu button {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  border: 0;
  background: transparent;
  border-radius: 14px;
  padding: 11px 12px;
  color: #0f172a;
  font-size: 13px;
  font-weight: 850;
  text-align: left;
}

.patient-row-menu.budget-mini-menu button span:not(.budget-ui-icon) {
  font-weight: 850;
}

.patient-row-menu.budget-mini-menu button:hover {
  background: #eff6ff;
  color: #1d4ed8;
}

.patient-row-menu.budget-mini-menu button.danger {
  color: #dc2626;
}

.patient-row-menu.budget-mini-menu button.danger:hover {
  background: #fff1f2;
}

.klynic-patient-form input:disabled,
.klynic-patient-form select:disabled,
.klynic-patient-form textarea:disabled {
  background: #f8fafc;
  color: #334155;
  opacity: 1;
  cursor: default;
}

@media (max-width: 1280px) {
  .patient-table-header,
  .patient-row-premium {
    min-width: 1220px !important;
  }
}

/* ===== FIX FINAL PACIENTES: iconos iguales a Presupuestos ===== */

.patient-premium-actions {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 10px !important;
}

.patient-premium-actions .budget-icon-btn {
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  border: 1px solid #dbe7f6 !important;
  border-radius: 14px !important;
  background: #eff6ff !important;
  color: #2563eb !important;
  display: inline-grid !important;
  place-items: center !important;
  padding: 0 !important;
  font-size: 22px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
}

.patient-premium-actions .budget-icon-btn svg {
  width: 18px !important;
  height: 18px !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 2 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

.patient-row-menu-wrap {
  position: relative !important;
}

.patient-row-menu.budget-mini-menu {
  position: absolute !important;
  right: 0 !important;
  top: 46px !important;
  z-index: 90 !important;
  min-width: 250px !important;
}

.patient-doctor-avatar {
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  border-radius: 999px !important;
  display: grid !important;
  place-items: center !important;
  overflow: hidden !important;
  background: #eef6ff !important;
  color: #2563eb !important;
  border: 1px solid #dbeafe !important;
  font-size: 12px !important;
  font-weight: 950 !important;
}

.patient-doctor-avatar img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

.patient-doctor-avatar.is-empty {
  background: #f1f5f9 !important;
  color: #94a3b8 !important;
}

.patient-doctor-empty-initial {
  color: #94a3b8 !important;
  font-size: 18px !important;
  font-weight: 900 !important;
}

.patient-activity-icon {
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  border-radius: 999px !important;
  display: grid !important;
  place-items: center !important;
  background: #eaf4ff !important;
  color: #2563eb !important;
}

.patient-activity-icon svg {
  width: 18px !important;
  height: 18px !important;
  display: block !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 2 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

/* ===== PATIENT TAG SELECTOR ===== */

.patient-tag-selector {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.patient-tag-option {
  border: 1px solid #dbeafe;
  background: #f8fbff;
  color: #475569;
  border-radius: 999px;
  padding: 9px 13px;
  font-size: 13px;
  font-weight: 850;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease, background .16s ease;
}

.patient-tag-option:hover {
  transform: translateY(-1px);
  border-color: #93c5fd;
  box-shadow: 0 10px 24px rgba(37, 99, 235, .10);
}

.patient-tag-option.is-selected {
  border-color: #2563eb;
  background: #eff6ff;
  color: #1d4ed8;
  box-shadow: inset 0 0 0 1px rgba(37, 99, 235, .14), 0 10px 24px rgba(37, 99, 235, .10);
}

.patient-tag-option.is-selected::before {
  content: "✓";
  margin-right: 6px;
  font-weight: 950;
}

.klynic-field-help {
  display: block;
  margin-top: 8px;
  color: #64748b;
  font-size: 12px;
  font-weight: 650;
  line-height: 1.4;
}

/* ===== TREATMENTS MODULE ===== */

.treatments-page {
  display: grid;
  gap: 24px;
}

.treatments-hero {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
}

.treatments-hero h1 {
  margin: 0;
  color: #071532;
  font-size: clamp(34px, 4vw, 46px);
  line-height: 1;
  letter-spacing: -0.045em;
}

.treatments-hero p:not(.eyebrow) {
  margin: 16px 0 0;
  max-width: 760px;
  color: #506991;
  font-size: 16px;
  font-weight: 650;
  line-height: 1.5;
}

.treatments-new-btn:disabled {
  opacity: .65;
  cursor: not-allowed;
}

.treatment-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

.treatment-summary-card {
  min-height: 126px;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 24px;
  background: rgba(255,255,255,.96);
  border: 1px solid #dbe5f2;
  border-radius: 22px;
  box-shadow: 0 16px 42px rgba(15, 23, 42, .07);
}

.treatment-summary-icon {
  width: 58px;
  height: 58px;
  flex: 0 0 58px;
  display: grid;
  place-items: center;
  border-radius: 999px;
}

.treatment-summary-icon svg {
  width: 30px;
  height: 30px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.treatment-summary-blue .treatment-summary-icon {
  background: #eaf3ff;
  color: #2563eb;
}

.treatment-summary-green .treatment-summary-icon {
  background: #dcfce7;
  color: #16a34a;
}

.treatment-summary-purple .treatment-summary-icon {
  background: #f3e8ff;
  color: #9333ea;
}

.treatment-summary-orange .treatment-summary-icon {
  background: #fff1e6;
  color: #f97316;
}

.treatment-summary-card span:not(.treatment-summary-icon) {
  display: block;
  color: #64748b;
  font-size: 15px;
  font-weight: 850;
}

.treatment-summary-card strong {
  display: block;
  margin-top: 8px;
  color: #0b1735;
  font-size: 30px;
  line-height: 1;
  font-weight: 950;
  letter-spacing: -.04em;
}

.treatment-summary-card small {
  display: block;
  margin-top: 9px;
  color: #64748b;
  font-size: 12px;
  font-weight: 800;
}

.treatments-card {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  background: #fff;
  border: 1px solid #dbe5f2;
  border-radius: 24px;
  box-shadow: 0 18px 45px rgba(15, 23, 42, .08);
  overflow: hidden;
}

.treatments-toolbar {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) 190px;
  gap: 14px;
  padding: 22px;
  border-bottom: 1px solid #e7eef8;
}

.treatments-search {
  position: relative;
}

.treatments-search svg {
  position: absolute;
  left: 16px;
  top: 50%;
  width: 18px;
  height: 18px;
  transform: translateY(-50%);
  fill: none;
  stroke: #64748b;
  stroke-width: 2;
}

.treatments-search input,
.treatments-select {
  width: 100%;
  height: 46px;
  border: 1px solid #dbe7f6;
  border-radius: 15px;
  background: #fff;
  color: #0f172a;
  font-weight: 850;
  outline: none;
}

.treatments-search input {
  padding: 0 15px 0 46px;
}

.treatments-select {
  padding: 0 14px;
}

.treatments-table {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
}

.treatments-head,
.treatment-row {
  display: grid;
  grid-template-columns:
    minmax(170px, 1.1fr)
    minmax(150px, .95fr)
    minmax(175px, 1fr)
    minmax(150px, .9fr)
    minmax(110px, .7fr)
    minmax(110px, .7fr)
    minmax(110px, .7fr)
    minmax(110px, .7fr)
    minmax(76px, auto);
  gap: 12px;
  align-items: center;
  min-width: 1120px;
}

.treatments-head {
  padding: 14px 22px;
  color: #60728f;
  font-size: 12px;
  font-weight: 950;
  border-bottom: 1px solid #e7eef8;
}

.treatment-row {
  padding: 18px 22px;
  border-bottom: 1px solid #e7eef8;
}

.treatment-row:last-child {
  border-bottom: 0;
}

.treatment-patient-cell,
.treatment-doctor-cell {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.treatment-avatar,
.treatment-doctor-avatar {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #eaf3ff;
  color: #2563eb;
  font-size: 13px;
  font-weight: 950;
}

.treatment-doctor-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.treatment-patient-cell strong,
.treatment-main-cell strong,
.treatment-doctor-cell strong,
.treatment-money-cell strong {
  display: block;
  color: #071532;
  font-size: 13px;
  font-weight: 950;
}

.treatment-patient-cell span:not(.treatment-avatar),
.treatment-main-cell span,
.treatment-doctor-cell span,
.treatment-progress-cell small {
  display: block;
  margin-top: 5px;
  color: #60728f;
  font-size: 12px;
  font-weight: 800;
}

.treatment-progress-top {
  display: flex;
  align-items: center;
  gap: 10px;
}

.treatment-progress-bar {
  width: 110px;
  height: 7px;
  border-radius: 999px;
  background: #dbe5f2;
  overflow: hidden;
}

.treatment-progress-bar b {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: #2563eb;
}

.treatment-progress-top strong {
  color: #1f2a44;
  font-size: 12px;
  font-weight: 950;
}

.treatment-paid strong {
  color: #16a34a;
}

.treatment-pending strong {
  color: #f97316;
}

.treatment-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  border-radius: 999px;
  padding: 0 12px;
  font-size: 12px;
  font-weight: 950;
}

.treatment-status-progress {
  background: #eaf3ff;
  color: #2563eb;
}

.treatment-status-completed {
  background: #dcfce7;
  color: #16a34a;
}

.treatment-status-pending {
  background: #fff7ed;
  color: #c2410c;
}

.treatment-actions {
  display: flex;
  justify-content: flex-end;
}

.treatment-view-btn {
  height: 36px;
  border: 0;
  border-radius: 13px;
  background: #eaf3ff;
  color: #1857e6;
  padding: 0 16px;
  font-size: 13px;
  font-weight: 950;
}

.treatment-empty {
  padding: 44px 22px;
  text-align: center;
}

.treatment-empty strong {
  display: block;
  color: #071532;
  font-size: 16px;
}

.treatment-empty p {
  color: #64748b;
  font-weight: 750;
}

.treatment-bottom-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 16px;
}

.treatment-bottom-grid article {
  background: #fff;
  border: 1px solid #dbe5f2;
  border-radius: 22px;
  padding: 22px;
  box-shadow: 0 16px 38px rgba(15, 23, 42, .06);
}

.treatment-bottom-grid strong {
  display: block;
  color: #071532;
  font-size: 28px;
  font-weight: 950;
}

.treatment-bottom-grid span {
  display: block;
  margin-top: 4px;
  color: #344767;
  font-size: 14px;
  font-weight: 950;
}

.treatment-bottom-grid small {
  display: block;
  margin-top: 4px;
  color: #64748b;
  font-size: 12px;
  font-weight: 750;
}

.treatment-detail-modal {
  width: min(1120px, calc(100vw - 34px));
  max-height: 90vh;
  background: #fff;
  border: 1px solid #dbe5f2;
  border-radius: 24px;
  box-shadow: 0 34px 90px rgba(15, 23, 42, .32);
  overflow: hidden;
}

.treatment-detail-head {
  min-height: 82px;
  padding: 20px 24px;
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: flex-start;
  border-bottom: 1px solid #e7eef8;
}

.treatment-detail-head span {
  color: #2563eb;
  font-size: 11px;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.treatment-detail-head h2 {
  margin: 4px 0 4px;
  color: #071532;
  font-size: 24px;
  font-weight: 950;
}

.treatment-detail-head p {
  margin: 0;
  color: #64748b;
  font-size: 13px;
  font-weight: 750;
}

.treatment-detail-head button {
  width: 38px;
  height: 38px;
  border: 0;
  background: #f1f5f9;
  border-radius: 999px;
  color: #64748b;
  font-size: 24px;
}

.treatment-detail-tabs {
  display: flex;
  gap: 8px;
  padding: 14px 20px;
  border-bottom: 1px solid #e7eef8;
  overflow-x: auto;
}

.treatment-detail-tabs button {
  border: 1px solid #dbe7f6;
  background: #fff;
  color: #506991;
  border-radius: 999px;
  padding: 9px 13px;
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}

.treatment-detail-tabs button.active {
  background: #eaf3ff;
  color: #1857e6;
  border-color: #bfdbfe;
}

.treatment-detail-body {
  max-height: calc(90vh - 160px);
  overflow: auto;
  padding: 22px;
}

.treatment-detail-card {
  border: 1px solid #e1e8f0;
  border-radius: 20px;
  background: #fbfdff;
  padding: 20px;
}

.treatment-detail-card h3 {
  margin: 0 0 16px;
  color: #071532;
  font-size: 17px;
  font-weight: 950;
}

.treatment-detail-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.treatment-detail-grid div {
  background: #fff;
  border: 1px solid #e5ebf2;
  border-radius: 16px;
  padding: 14px;
}

.treatment-detail-grid span {
  display: block;
  color: #60728f;
  font-size: 12px;
  font-weight: 850;
}

.treatment-detail-grid strong {
  display: block;
  margin-top: 6px;
  color: #10233f;
  font-size: 14px;
  font-weight: 950;
}

.treatment-items-list {
  display: grid;
  gap: 10px;
}

.treatment-item-row {
  display: grid;
  grid-template-columns: 1fr 190px 130px;
  gap: 12px;
  align-items: center;
  background: #fff;
  border: 1px solid #e5ebf2;
  border-radius: 16px;
  padding: 14px;
}

.treatment-item-row strong,
.treatment-item-row span {
  display: block;
}

.treatment-item-row strong {
  color: #071532;
  font-size: 14px;
  font-weight: 950;
}

.treatment-item-row span {
  margin-top: 4px;
  color: #64748b;
  font-size: 12px;
  font-weight: 750;
}

.treatment-item-row select {
  width: 100%;
  height: 40px;
  border: 1px solid #dbe7f6;
  border-radius: 12px;
  background: #fff;
  color: #0f172a;
  font-weight: 850;
  padding: 0 12px;
}

.treatment-muted {
  margin: 0;
  color: #64748b;
  font-weight: 750;
  line-height: 1.5;
}

@media (max-width: 1180px) {
  .treatment-summary-grid,
  .treatment-bottom-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .treatment-detail-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .treatments-hero,
  .treatments-toolbar {
    grid-template-columns: 1fr;
    display: grid;
  }

  .treatment-summary-grid,
  .treatment-bottom-grid,
  .treatment-detail-grid,
  .treatment-item-row {
    grid-template-columns: 1fr;
  }
}

.treatments-page,
.treatments-hero,
.treatment-summary-grid,
.treatment-bottom-grid {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.treatment-summary-card,
.treatment-bottom-grid article {
  min-width: 0;
}

.treatment-summary-card strong {
  overflow-wrap: anywhere;
}

.main {
  min-width: 0;
  overflow-x: hidden;
}

/* ===== TREATMENT ASSIGN PROFESSIONAL ===== */

.treatment-item-row-pro {
  grid-template-columns: 1fr 110px 190px 130px !important;
}

.treatment-item-professionals {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 9px;
}

.treatment-item-professionals em {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  border-radius: 999px;
  padding: 0 9px;
  background: #eaf3ff;
  color: #1857e6;
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
}

.treatment-item-professionals em.is-empty {
  background: #f1f5f9;
  color: #64748b;
}

.treatment-assign-btn {
  height: 38px;
  border: 1px solid #bfdbfe;
  border-radius: 13px;
  background: #eff6ff;
  color: #1857e6;
  font-size: 12px;
  font-weight: 950;
}

.assign-professional-modal {
  width: min(720px, calc(100vw - 32px));
  background: #fff;
  border: 1px solid #dbe5f2;
  border-radius: 24px;
  box-shadow: 0 34px 90px rgba(15, 23, 42, .32);
  overflow: hidden;
}

.assign-professional-modal header {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  padding: 22px 24px;
  border-bottom: 1px solid #e7eef8;
}

.assign-professional-modal header span {
  color: #2563eb;
  font-size: 11px;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.assign-professional-modal header h3 {
  margin: 4px 0;
  color: #071532;
  font-size: 22px;
  font-weight: 950;
}

.assign-professional-modal header p {
  margin: 0;
  color: #64748b;
  font-size: 13px;
  font-weight: 750;
  line-height: 1.45;
}

.assign-professional-modal header button {
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 999px;
  background: #f1f5f9;
  color: #64748b;
  font-size: 24px;
}

.assign-professional-form {
  display: grid;
  gap: 16px;
  padding: 22px 24px;
}

.assign-professional-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.assign-professional-form label {
  display: grid;
  gap: 8px;
}

.assign-professional-form label span {
  color: #334155;
  font-size: 12px;
  font-weight: 950;
}

.assign-professional-form input,
.assign-professional-form select {
  width: 100%;
  height: 44px;
  border: 1px solid #dbe7f6;
  border-radius: 14px;
  background: #fff;
  color: #0f172a;
  padding: 0 13px;
  font-weight: 850;
  outline: none;
}

.assign-professional-form footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding-top: 4px;
}

@media (max-width: 720px) {
  .treatment-item-row-pro,
  .assign-professional-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ===== MULTI RESPONSABLES TRATAMIENTO ===== */

.assign-professional-modal-wide {
  width: min(1080px, calc(100vw - 32px)) !important;
}

.assign-professional-table-head,
.assign-professional-row {
  display: grid;
  grid-template-columns:
    minmax(180px, 1.25fr)
    minmax(130px, .8fr)
    minmax(150px, .95fr)
    minmax(150px, .95fr)
    minmax(90px, .55fr)
    minmax(120px, .75fr)
    38px;
  gap: 10px;
  align-items: end;
}

.assign-professional-table-head {
  color: #64748b;
  font-size: 11px;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: 0 2px;
}

.assign-professional-rows {
  display: grid;
  gap: 12px;
}

.assign-professional-row {
  padding: 14px;
  border: 1px solid #e1e8f0;
  border-radius: 18px;
  background: #fbfdff;
}

.assign-professional-row label {
  margin: 0;
}

.assign-remove-row {
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 999px;
  background: #fff1f2;
  color: #dc2626;
  font-size: 22px;
  font-weight: 950;
}

.assign-add-row {
  width: fit-content;
  height: 40px;
  border: 1px solid #bfdbfe;
  border-radius: 999px;
  background: #eff6ff;
  color: #1857e6;
  padding: 0 16px;
  font-size: 13px;
  font-weight: 950;
}

@media (max-width: 940px) {
  .assign-professional-table-head {
    display: none;
  }

  .assign-professional-row {
    grid-template-columns: 1fr;
  }

  .assign-remove-row {
    width: 100%;
    border-radius: 14px;
  }
}

.treatment-item-row-pro {
  grid-template-columns: 1fr 110px 190px !important;
}

.treatment-detail-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 16px 22px;
  border-top: 1px solid #e7eef8;
  background: #fff;
}

.assign-remove-row {
  cursor: pointer;
  display: grid;
  place-items: center;
  line-height: 1;
}

.assign-remove-row:hover {
  background: #ffe4e6;
  transform: translateY(-1px);
}

.assign-professional-row select option:disabled {
  color: #94a3b8;
}

/* ===== TREATMENT PROFESSIONALS TAB ===== */

.treatment-detail-section-head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.treatment-detail-section-head h3 {
  margin: 0;
}

.treatment-detail-section-head p {
  margin: 5px 0 0;
  color: #64748b;
  font-size: 13px;
  font-weight: 750;
}

.treatment-professional-summary-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

.treatment-professional-summary-grid article {
  border: 1px solid #e1e8f0;
  border-radius: 16px;
  background: #fff;
  padding: 14px;
}

.treatment-professional-summary-grid article strong {
  display: block;
  color: #071532;
  font-size: 24px;
  font-weight: 950;
}

.treatment-professional-summary-grid article span {
  display: block;
  margin-top: 4px;
  color: #64748b;
  font-size: 12px;
  font-weight: 850;
}

.treatment-professional-summary-grid article.has-warning {
  background: #fff7ed;
  border-color: #fed7aa;
}

.treatment-professional-summary-grid article.has-warning strong {
  color: #f97316;
}

.treatment-professional-list {
  display: grid;
  gap: 12px;
}

.treatment-professional-card {
  border: 1px solid #e1e8f0;
  border-radius: 18px;
  background: #fff;
  padding: 16px;
}

.treatment-professional-head {
  display: flex;
  align-items: center;
  gap: 12px;
}

.treatment-professional-head div {
  flex: 1;
  min-width: 0;
}

.treatment-professional-head strong {
  display: block;
  color: #071532;
  font-size: 14px;
  font-weight: 950;
}

.treatment-professional-head span {
  display: block;
  margin-top: 4px;
  color: #64748b;
  font-size: 12px;
  font-weight: 800;
}

.treatment-professional-head b {
  background: #eff6ff;
  color: #1857e6;
  border-radius: 999px;
  padding: 7px 10px;
  font-size: 12px;
  font-weight: 950;
}

.treatment-professional-items {
  display: grid;
  gap: 8px;
  margin-top: 14px;
}

.treatment-professional-items div,
.treatment-unassigned-box div {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 12px;
  align-items: center;
  border-radius: 14px;
  background: #f8fbff;
  padding: 10px 12px;
}

.treatment-professional-items span,
.treatment-unassigned-box span {
  color: #0f172a;
  font-size: 13px;
  font-weight: 900;
}

.treatment-professional-items strong {
  color: #0f172a;
  font-size: 13px;
  font-weight: 950;
}

.treatment-professional-items em {
  color: #64748b;
  font-size: 12px;
  font-style: normal;
  font-weight: 850;
}

.treatment-unassigned-box {
  display: grid;
  gap: 8px;
  margin-top: 16px;
  border: 1px solid #fed7aa;
  border-radius: 18px;
  background: #fff7ed;
  padding: 14px;
}

.treatment-unassigned-box > strong {
  color: #c2410c;
  font-size: 14px;
  font-weight: 950;
}

@media (max-width: 760px) {
  .treatment-professional-summary-grid,
  .treatment-professional-items div,
  .treatment-unassigned-box div {
    grid-template-columns: 1fr;
  }

  .treatment-professional-head {
    align-items: flex-start;
  }
}


/* ===== TREATMENT PATIENT PAYMENTS ===== */

.treatment-payment-summary-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}

.treatment-payment-summary-grid article {
  border: 1px solid #e1e8f0;
  border-radius: 16px;
  background: #fff;
  padding: 14px;
}

.treatment-payment-summary-grid span {
  display: block;
  color: #64748b;
  font-size: 12px;
  font-weight: 850;
}

.treatment-payment-summary-grid strong {
  display: block;
  margin-top: 6px;
  color: #071532;
  font-size: 22px;
  font-weight: 950;
}

.treatment-payment-summary-grid .is-paid strong {
  color: #16a34a;
}

.treatment-payment-summary-grid .is-pending strong {
  color: #f97316;
}

.patient-payment-form {
  display: grid;
  gap: 16px;
  border: 1px solid #e1e8f0;
  border-radius: 20px;
  background: #fff;
  padding: 18px;
}

.patient-payment-form-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.patient-payment-form label,
.patient-payment-notes {
  display: grid;
  gap: 8px;
}

.patient-payment-form label span,
.patient-payment-notes span {
  color: #334155;
  font-size: 12px;
  font-weight: 950;
}

.patient-payment-form input,
.patient-payment-form select,
.patient-payment-form textarea {
  width: 100%;
  border: 1px solid #dbe7f6;
  border-radius: 14px;
  background: #fff;
  color: #0f172a;
  font-weight: 850;
  outline: none;
}

.patient-payment-form input,
.patient-payment-form select {
  height: 44px;
  padding: 0 13px;
}

.patient-payment-form textarea {
  padding: 12px 13px;
  resize: vertical;
}

.payment-allocation-box {
  border: 1px solid #dbe7f6;
  border-radius: 18px;
  background: #f8fbff;
  overflow: hidden;
}

.payment-allocation-head {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: center;
  padding: 14px;
  border-bottom: 1px solid #e1e8f0;
}

.payment-allocation-head strong {
  display: block;
  color: #071532;
  font-size: 14px;
  font-weight: 950;
}

.payment-allocation-head span {
  display: block;
  margin-top: 4px;
  color: #64748b;
  font-size: 12px;
  font-weight: 750;
}

.payment-allocation-head button {
  height: 38px;
  border: 1px solid #bfdbfe;
  border-radius: 999px;
  background: #eff6ff;
  color: #1857e6;
  padding: 0 14px;
  font-size: 12px;
  font-weight: 950;
  white-space: nowrap;
}

.payment-allocation-list {
  display: grid;
  gap: 8px;
  padding: 12px;
}

.payment-allocation-row {
  display: grid;
  grid-template-columns: 1fr 150px;
  gap: 12px;
  align-items: center;
  border-radius: 14px;
  background: #fff;
  padding: 12px;
}

.payment-allocation-row strong {
  display: block;
  color: #071532;
  font-size: 13px;
  font-weight: 950;
}

.payment-allocation-row span {
  display: block;
  margin-top: 4px;
  color: #64748b;
  font-size: 12px;
  font-weight: 800;
}

.patient-payment-footer {
  display: flex;
  justify-content: flex-end;
}

.patient-payment-history {
  display: grid;
  gap: 10px;
  margin-top: 18px;
}

.patient-payment-history h4 {
  margin: 0;
  color: #071532;
  font-size: 15px;
  font-weight: 950;
}

.patient-payment-history-row {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: center;
  border: 1px solid #e1e8f0;
  border-radius: 16px;
  background: #fff;
  padding: 13px 14px;
}

.patient-payment-history-row strong {
  display: block;
  color: #071532;
  font-size: 14px;
  font-weight: 950;
}

.patient-payment-history-row span {
  display: block;
  margin-top: 4px;
  color: #64748b;
  font-size: 12px;
  font-weight: 800;
}

.patient-payment-history-row em {
  color: #1857e6;
  background: #eff6ff;
  border-radius: 999px;
  padding: 7px 10px;
  font-size: 12px;
  font-style: normal;
  font-weight: 950;
}

@media (max-width: 780px) {
  .treatment-payment-summary-grid,
  .patient-payment-form-grid,
  .payment-allocation-row {
    grid-template-columns: 1fr;
  }

  .payment-allocation-head {
    align-items: flex-start;
    flex-direction: column;
  }
}

/* ===== PROFESSIONAL EARNINGS ===== */

.treatment-professional-earning-card {
  overflow: hidden;
}

.treatment-earnings-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 16px;
}

.treatment-earnings-grid article {
  border: 1px solid #e1e8f0;
  border-radius: 14px;
  background: #fff;
  padding: 12px;
}

.treatment-earnings-grid span {
  display: block;
  color: #64748b;
  font-size: 11px;
  font-weight: 850;
}

.treatment-earnings-grid strong {
  display: block;
  margin-top: 5px;
  color: #071532;
  font-size: 18px;
  font-weight: 950;
}

.treatment-earnings-grid .is-paid strong {
  color: #16a34a;
}

.treatment-earnings-grid .is-pending strong {
  color: #f97316;
}

@media (max-width: 760px) {
  .treatment-earnings-grid {
    grid-template-columns: 1fr;
  }
}

/* ===== PROFESSIONAL PAYOUT MODAL ===== */

.treatment-payout-btn {
  width: fit-content;
  margin-top: 14px;
  border: 1px solid #bfdbfe;
  border-radius: 999px;
  background: #eff6ff;
  color: #1857e6;
  padding: 9px 14px;
  font-size: 12px;
  font-weight: 950;
}

.professional-payout-modal {
  width: min(860px, calc(100vw - 32px));
  max-height: 90vh;
  background: #fff;
  border: 1px solid #dbe5f2;
  border-radius: 24px;
  box-shadow: 0 34px 90px rgba(15, 23, 42, .32);
  overflow: hidden;
}

.professional-payout-modal header {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  padding: 22px 24px;
  border-bottom: 1px solid #e7eef8;
}

.professional-payout-modal header span {
  color: #2563eb;
  font-size: 11px;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.professional-payout-modal header h3 {
  margin: 4px 0;
  color: #071532;
  font-size: 22px;
  font-weight: 950;
}

.professional-payout-modal header p {
  margin: 0;
  color: #64748b;
  font-size: 13px;
  font-weight: 750;
  line-height: 1.45;
}

.professional-payout-modal header button {
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 999px;
  background: #f1f5f9;
  color: #64748b;
  font-size: 24px;
}

#professionalPayoutForm {
  display: grid;
  gap: 16px;
  max-height: calc(90vh - 102px);
  overflow: auto;
  padding: 22px 24px;
}

.professional-payout-summary,
.professional-payout-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.professional-payout-fields {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.professional-payout-summary article {
  border: 1px solid #e1e8f0;
  border-radius: 16px;
  background: #f8fbff;
  padding: 14px;
}

.professional-payout-summary span,
.professional-payout-fields span,
.professional-payout-notes span {
  display: block;
  color: #64748b;
  font-size: 12px;
  font-weight: 900;
}

.professional-payout-summary strong {
  display: block;
  margin-top: 6px;
  color: #071532;
  font-size: 22px;
  font-weight: 950;
}

.professional-payout-fields label,
.professional-payout-notes {
  display: grid;
  gap: 8px;
}

.professional-payout-fields input,
.professional-payout-fields select,
.professional-payout-notes textarea,
.professional-payout-row input[type="number"] {
  width: 100%;
  border: 1px solid #dbe7f6;
  border-radius: 14px;
  background: #fff;
  color: #0f172a;
  font-weight: 850;
  outline: none;
}

.professional-payout-fields input,
.professional-payout-fields select,
.professional-payout-row input[type="number"] {
  height: 44px;
  padding: 0 13px;
}

.professional-payout-notes textarea {
  padding: 12px 13px;
  resize: vertical;
}

.professional-payout-list {
  display: grid;
  gap: 10px;
}

.professional-payout-row {
  display: grid;
  grid-template-columns: 1fr 150px;
  gap: 12px;
  align-items: center;
  border: 1px solid #e1e8f0;
  border-radius: 16px;
  background: #fbfdff;
  padding: 12px;
}

.professional-payout-row label {
  display: flex;
  align-items: center;
  gap: 11px;
}

.professional-payout-row input[type="checkbox"] {
  width: 18px;
  height: 18px;
}

.professional-payout-row strong {
  display: block;
  color: #071532;
  font-size: 14px;
  font-weight: 950;
}

.professional-payout-row small {
  display: block;
  margin-top: 4px;
  color: #64748b;
  font-size: 12px;
  font-weight: 750;
}

.professional-payout-modal footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

@media (max-width: 760px) {
  .professional-payout-summary,
  .professional-payout-fields,
  .professional-payout-row {
    grid-template-columns: 1fr;
  }
}

.treatment-earning-detail-row span small {
  display: block;
  margin-top: 4px;
  color: #64748b;
  font-size: 11px;
  font-weight: 750;
}

.treatment-earning-detail-row em {
  color: #64748b;
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
}

/* ===== PROFESSIONAL PAYOUTS PAGE ===== */

.professional-payouts-page {
  display: grid;
  gap: 24px;
}

.payout-hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
}

.payout-hero h1 {
  margin: 0;
  color: #071532;
  font-size: clamp(34px, 4vw, 46px);
  letter-spacing: -0.045em;
  line-height: 1;
}

.payout-hero p:not(.eyebrow) {
  margin: 14px 0 0;
  color: #506991;
  font-size: 16px;
  font-weight: 650;
  line-height: 1.5;
}

.payout-hero-actions {
  display: flex;
  gap: 10px;
}

.payout-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

.payout-summary-card {
  min-height: 118px;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 22px;
  background: rgba(255,255,255,.96);
  border: 1px solid #dbe5f2;
  border-radius: 22px;
  box-shadow: 0 16px 42px rgba(15, 23, 42, .07);
}

.payout-summary-icon {
  width: 58px;
  height: 58px;
  flex: 0 0 58px;
  display: grid;
  place-items: center;
  border-radius: 999px;
}

.payout-summary-icon svg {
  width: 30px;
  height: 30px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.payout-summary-green .payout-summary-icon {
  background: #dcfce7;
  color: #16a34a;
}

.payout-summary-purple .payout-summary-icon {
  background: #f3e8ff;
  color: #9333ea;
}

.payout-summary-orange .payout-summary-icon {
  background: #fff1e6;
  color: #f97316;
}

.payout-summary-blue .payout-summary-icon {
  background: #eaf3ff;
  color: #2563eb;
}

.payout-summary-card span:not(.payout-summary-icon) {
  display: block;
  color: #64748b;
  font-size: 14px;
  font-weight: 850;
}

.payout-summary-card strong {
  display: block;
  margin-top: 8px;
  color: #0b1735;
  font-size: 26px;
  font-weight: 950;
  letter-spacing: -.04em;
}

.payout-summary-card small {
  display: block;
  margin-top: 8px;
  color: #64748b;
  font-size: 12px;
  font-weight: 800;
}

.payout-layout-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 310px;
  gap: 18px;
}

.payout-main-card,
.payout-side-panel section,
.payout-quick-actions {
  background: #fff;
  border: 1px solid #dbe5f2;
  border-radius: 24px;
  box-shadow: 0 18px 45px rgba(15, 23, 42, .08);
}

.payout-main-card {
  overflow: hidden;
}

.payout-filters {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  padding: 18px;
  border-bottom: 1px solid #e7eef8;
}

.payout-filters select {
  height: 44px;
  border: 1px solid #dbe7f6;
  border-radius: 14px;
  background: #fff;
  color: #0f172a;
  padding: 0 13px;
  font-weight: 850;
}

.payout-table {
  overflow-x: auto;
}

.payout-head,
.payout-row {
  min-width: 1080px;
  display: grid;
  grid-template-columns:
    minmax(130px, .9fr)
    minmax(190px, 1.3fr)
    minmax(190px, 1.2fr)
    minmax(130px, .8fr)
    minmax(120px, .7fr)
    minmax(130px, .8fr)
    minmax(120px, .7fr)
    minmax(80px, auto);
  gap: 14px;
  align-items: center;
}

.payout-head {
  padding: 14px 18px;
  color: #60728f;
  font-size: 12px;
  font-weight: 950;
  border-bottom: 1px solid #e7eef8;
}

.payout-row {
  padding: 16px 18px;
  border-bottom: 1px solid #e7eef8;
}

.payout-row:last-child {
  border-bottom: 0;
}

.payout-date-cell strong,
.payout-professional-cell strong,
.payout-concept-cell strong,
.payout-amount-cell strong {
  display: block;
  color: #071532;
  font-size: 13px;
  font-weight: 950;
}

.payout-date-cell span,
.payout-professional-cell span,
.payout-concept-cell span,
.payout-ref-cell span {
  display: block;
  margin-top: 5px;
  color: #64748b;
  font-size: 12px;
  font-weight: 800;
}

.payout-professional-cell {
  display: flex;
  align-items: center;
  gap: 12px;
}

.payout-avatar {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 999px;
  background: #eaf3ff;
  color: #1857e6;
  font-size: 12px;
  font-weight: 950;
}

.payout-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.payout-method-cell span {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  background: #f1f5f9;
  color: #475569;
  padding: 7px 10px;
  font-size: 12px;
  font-weight: 900;
}

.payout-amount-cell strong {
  color: #16a34a;
}

.payout-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  border-radius: 999px;
  padding: 0 12px;
  font-size: 12px;
  font-weight: 950;
}

.payout-status-paid {
  background: #dcfce7;
  color: #16a34a;
}

.payout-status-scheduled {
  background: #fff7ed;
  color: #f97316;
}

.payout-status-cancelled {
  background: #fee2e2;
  color: #dc2626;
}

.payout-icon-btn {
  border: 0;
  border-radius: 12px;
  background: #eff6ff;
  color: #1857e6;
  padding: 9px 12px;
  font-size: 12px;
  font-weight: 950;
}

.payout-side-panel {
  display: grid;
  gap: 16px;
  align-content: start;
}

.payout-side-panel section {
  padding: 18px;
}

.payout-side-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.payout-side-head h3 {
  margin: 0;
  color: #071532;
  font-size: 16px;
  font-weight: 950;
}

.payout-side-head span {
  color: #1857e6;
  font-size: 12px;
  font-weight: 900;
}

.payout-side-list {
  display: grid;
  gap: 12px;
}

.payout-side-list div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.payout-side-list span {
  color: #64748b;
  font-size: 13px;
  font-weight: 850;
}

.payout-side-list strong {
  color: #071532;
  font-size: 13px;
  font-weight: 950;
}

.payout-side-list .is-paid {
  color: #16a34a;
}

.payout-side-list .is-pending {
  color: #f97316;
}

.payout-upcoming-list {
  display: grid;
  gap: 12px;
}

.payout-upcoming-list article {
  display: grid;
  grid-template-columns: 42px 1fr auto;
  gap: 10px;
  align-items: center;
}

.payout-upcoming-list strong,
.payout-upcoming-list b {
  display: block;
  color: #071532;
  font-size: 13px;
  font-weight: 950;
}

.payout-upcoming-list small {
  display: block;
  color: #64748b;
  font-size: 11px;
  font-weight: 750;
}

.payout-upcoming-list b {
  color: #f97316;
}

.payout-quick-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  padding: 16px;
}

.payout-quick-actions button {
  display: flex;
  align-items: center;
  gap: 12px;
  border: 0;
  background: #fff;
  text-align: left;
}

.payout-quick-actions span {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: #eff6ff;
  color: #1857e6;
  font-weight: 950;
}

.payout-quick-actions strong {
  display: block;
  color: #071532;
  font-size: 13px;
  font-weight: 950;
}

.payout-quick-actions small {
  display: block;
  margin-top: 4px;
  color: #64748b;
  font-size: 12px;
  font-weight: 750;
}

.payout-empty {
  padding: 44px 18px;
  text-align: center;
}

.payout-empty strong {
  display: block;
  color: #071532;
  font-size: 16px;
  font-weight: 950;
}

.payout-empty p,
.payout-muted {
  color: #64748b;
  font-size: 13px;
  font-weight: 750;
}

.create-payout-modal {
  width: min(860px, calc(100vw - 32px));
  max-height: 90vh;
  background: #fff;
  border: 1px solid #dbe5f2;
  border-radius: 24px;
  box-shadow: 0 34px 90px rgba(15, 23, 42, .32);
  overflow: hidden;
}

.create-payout-modal header {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  padding: 22px 24px;
  border-bottom: 1px solid #e7eef8;
}

.create-payout-modal header span {
  color: #2563eb;
  font-size: 11px;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.create-payout-modal header h3 {
  margin: 4px 0;
  color: #071532;
  font-size: 22px;
  font-weight: 950;
}

.create-payout-modal header p {
  margin: 0;
  color: #64748b;
  font-size: 13px;
  font-weight: 750;
}

.create-payout-modal header button {
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 999px;
  background: #f1f5f9;
  color: #64748b;
  font-size: 24px;
}

#createPayoutForm {
  display: grid;
  gap: 16px;
  max-height: calc(90vh - 100px);
  overflow: auto;
  padding: 22px 24px;
}

#createPayoutForm label {
  display: grid;
  gap: 8px;
}

#createPayoutForm label span,
#createPayoutForm label > span {
  color: #334155;
  font-size: 12px;
  font-weight: 950;
}

#createPayoutForm input,
#createPayoutForm select,
#createPayoutForm textarea,
.create-payout-earnings-list input[type="number"] {
  width: 100%;
  border: 1px solid #dbe7f6;
  border-radius: 14px;
  background: #fff;
  color: #0f172a;
  font-weight: 850;
  outline: none;
}

#createPayoutForm input,
#createPayoutForm select,
.create-payout-earnings-list input[type="number"] {
  height: 44px;
  padding: 0 13px;
}

#createPayoutForm textarea {
  padding: 12px 13px;
  resize: vertical;
}

.create-payout-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.create-payout-earnings-list {
  display: grid;
  gap: 10px;
}

.create-payout-earnings-list article {
  display: grid;
  grid-template-columns: 1fr 150px;
  gap: 12px;
  align-items: center;
  border: 1px solid #e1e8f0;
  border-radius: 16px;
  background: #fbfdff;
  padding: 12px;
}

.create-payout-earnings-list article label {
  display: flex !important;
  align-items: center;
  gap: 10px;
}

.create-payout-earnings-list input[type="checkbox"] {
  width: 18px !important;
  height: 18px !important;
}

.create-payout-earnings-list strong {
  display: block;
  color: #071532;
  font-size: 14px;
  font-weight: 950;
}

.create-payout-earnings-list small {
  display: block;
  margin-top: 4px;
  color: #64748b;
  font-size: 12px;
  font-weight: 750;
}

.create-payout-modal footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

@media (max-width: 1180px) {
  .payout-layout-grid {
    grid-template-columns: 1fr;
  }

  .payout-summary-grid,
  .payout-quick-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .payout-hero,
  .payout-hero-actions {
    display: grid;
    width: 100%;
  }

  .payout-summary-grid,
  .payout-filters,
  .payout-quick-actions,
  .create-payout-grid,
  .create-payout-earnings-list article {
    grid-template-columns: 1fr;
  }
}

/* ===== COMMISSIONS PAGE ===== */

.commissions-page {
  display: grid;
  gap: 24px;
}

.commission-hero {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  align-items: flex-start;
}

.commission-hero h1 {
  margin: 0;
  color: #071532;
  font-size: clamp(34px, 4vw, 46px);
  line-height: 1;
  letter-spacing: -0.045em;
}

.commission-hero p:not(.eyebrow) {
  margin: 14px 0 0;
  color: #506991;
  font-size: 16px;
  font-weight: 650;
  line-height: 1.5;
}

.commission-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

.commission-summary-card {
  min-height: 118px;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 22px;
  background: rgba(255,255,255,.96);
  border: 1px solid #dbe5f2;
  border-radius: 22px;
  box-shadow: 0 16px 42px rgba(15, 23, 42, .07);
}

.commission-summary-icon {
  width: 58px;
  height: 58px;
  flex: 0 0 58px;
  display: grid;
  place-items: center;
  border-radius: 999px;
}

.commission-summary-icon svg {
  width: 30px;
  height: 30px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.commission-summary-purple .commission-summary-icon {
  background: #f3e8ff;
  color: #9333ea;
}

.commission-summary-green .commission-summary-icon {
  background: #dcfce7;
  color: #16a34a;
}

.commission-summary-blue .commission-summary-icon {
  background: #eaf3ff;
  color: #2563eb;
}

.commission-summary-orange .commission-summary-icon {
  background: #fff1e6;
  color: #f97316;
}

.commission-summary-card span:not(.commission-summary-icon) {
  display: block;
  color: #64748b;
  font-size: 14px;
  font-weight: 850;
}

.commission-summary-card strong {
  display: block;
  margin-top: 8px;
  color: #0b1735;
  font-size: 26px;
  font-weight: 950;
  letter-spacing: -.04em;
}

.commission-summary-card small {
  display: block;
  margin-top: 8px;
  color: #64748b;
  font-size: 12px;
  font-weight: 800;
}

.commission-main-card {
  background: #fff;
  border: 1px solid #dbe5f2;
  border-radius: 24px;
  box-shadow: 0 18px 45px rgba(15, 23, 42, .08);
  overflow: hidden;
}

.commission-filters {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  padding: 18px;
  border-bottom: 1px solid #e7eef8;
}

.commission-filters select {
  height: 44px;
  border: 1px solid #dbe7f6;
  border-radius: 14px;
  background: #fff;
  color: #0f172a;
  padding: 0 13px;
  font-weight: 850;
}

.commission-tabs {
  display: flex;
  gap: 20px;
  padding: 0 18px;
  border-bottom: 1px solid #e7eef8;
}

.commission-tabs button {
  height: 54px;
  border: 0;
  background: transparent;
  color: #64748b;
  font-size: 13px;
  font-weight: 950;
}

.commission-tabs button.active {
  color: #1857e6;
  box-shadow: inset 0 -3px 0 #1857e6;
}

.commission-table {
  overflow-x: auto;
}

.commission-head,
.commission-row {
  min-width: 1380px;
  display: grid;
  grid-template-columns:
    minmax(120px, .75fr)
    minmax(190px, 1.1fr)
    minmax(170px, 1fr)
    minmax(200px, 1.15fr)
    minmax(120px, .7fr)
    minmax(130px, .8fr)
    minmax(120px, .75fr)
    minmax(120px, .75fr)
    minmax(120px, .75fr)
    minmax(110px, .7fr);
  gap: 14px;
  align-items: center;
}

.commission-head {
  padding: 14px 18px;
  color: #60728f;
  font-size: 12px;
  font-weight: 950;
  border-bottom: 1px solid #e7eef8;
}

.commission-row {
  padding: 16px 18px;
  border-bottom: 1px solid #e7eef8;
}

.commission-row:last-child {
  border-bottom: 0;
}

.commission-date-cell strong,
.commission-professional-cell strong,
.commission-patient-cell strong,
.commission-treatment-cell strong,
.commission-model-cell strong,
.commission-base-cell strong,
.commission-money-cell strong {
  display: block;
  color: #071532;
  font-size: 13px;
  font-weight: 950;
}

.commission-date-cell span,
.commission-professional-cell span,
.commission-patient-cell span,
.commission-treatment-cell span,
.commission-model-cell span,
.commission-base-cell span {
  display: block;
  margin-top: 5px;
  color: #64748b;
  font-size: 12px;
  font-weight: 800;
}

.commission-professional-cell,
.commission-patient-cell {
  display: flex;
  align-items: center;
  gap: 12px;
}

.commission-avatar,
.commission-mini-avatar {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 999px;
  background: #eaf3ff;
  color: #1857e6;
  font-size: 12px;
  font-weight: 950;
}

.commission-mini-avatar {
  width: 34px;
  height: 34px;
  flex-basis: 34px;
  background: #eefcf4;
  color: #16a34a;
}

.commission-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.commission-money-cell.is-earned strong {
  color: #16a34a;
}

.commission-money-cell.is-paid strong {
  color: #16a34a;
}

.commission-money-cell.is-pending strong {
  color: #f97316;
}

.commission-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  border-radius: 999px;
  padding: 0 12px;
  font-size: 12px;
  font-weight: 950;
}

.commission-status-pending {
  background: #fff7ed;
  color: #f97316;
}

.commission-status-partial {
  background: #fef3c7;
  color: #d97706;
}

.commission-status-paid {
  background: #dcfce7;
  color: #16a34a;
}

.commission-status-voided {
  background: #fee2e2;
  color: #dc2626;
}

.commission-empty {
  padding: 44px 18px;
  text-align: center;
}

.commission-empty strong {
  display: block;
  color: #071532;
  font-size: 16px;
  font-weight: 950;
}

.commission-empty p {
  color: #64748b;
  font-size: 13px;
  font-weight: 750;
}

@media (max-width: 980px) {
  .commission-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .commission-filters {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .commission-hero {
    display: grid;
  }

  .commission-summary-grid {
    grid-template-columns: 1fr;
  }
}

.commission-patient-cell-no-avatar {
  gap: 0;
}

.commission-patient-cell-no-avatar div {
  min-width: 0;
}

/* ===== PAYOUT DETAIL MODAL ===== */

.payout-detail-modal {
  width: min(920px, calc(100vw - 32px));
  max-height: 90vh;
  background: #fff;
  border: 1px solid #dbe5f2;
  border-radius: 24px;
  box-shadow: 0 34px 90px rgba(15, 23, 42, .32);
  overflow: hidden;
}

.payout-detail-modal header {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  padding: 22px 24px;
  border-bottom: 1px solid #e7eef8;
}

.payout-detail-modal header span {
  color: #2563eb;
  font-size: 11px;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.payout-detail-modal header h3 {
  margin: 4px 0;
  color: #071532;
  font-size: 22px;
  font-weight: 950;
}

.payout-detail-modal header p {
  margin: 0;
  color: #64748b;
  font-size: 13px;
  font-weight: 750;
}

.payout-detail-modal header button {
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 999px;
  background: #f1f5f9;
  color: #64748b;
  font-size: 24px;
}

.payout-detail-body {
  display: grid;
  gap: 16px;
  max-height: calc(90vh - 158px);
  overflow: auto;
  padding: 22px 24px;
}

.payout-detail-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.payout-detail-summary article,
.payout-detail-card {
  border: 1px solid #e1e8f0;
  border-radius: 18px;
  background: #fbfdff;
  padding: 16px;
}

.payout-detail-summary span {
  display: block;
  color: #64748b;
  font-size: 12px;
  font-weight: 850;
}

.payout-detail-summary strong {
  display: block;
  margin-top: 6px;
  color: #071532;
  font-size: 16px;
  font-weight: 950;
}

.payout-detail-card h4 {
  margin: 0 0 12px;
  color: #071532;
  font-size: 15px;
  font-weight: 950;
}

.payout-detail-card p {
  margin: 0;
  color: #64748b;
  font-size: 13px;
  font-weight: 750;
  line-height: 1.5;
}

.payout-detail-earning-row {
  display: grid;
  grid-template-columns: 1.2fr .9fr .9fr .9fr;
  gap: 12px;
  align-items: center;
  border-radius: 14px;
  background: #fff;
  padding: 12px;
}

.payout-detail-earning-row + .payout-detail-earning-row {
  margin-top: 8px;
}

.payout-detail-earning-row strong {
  display: block;
  color: #071532;
  font-size: 13px;
  font-weight: 950;
}

.payout-detail-earning-row span {
  display: block;
  margin-top: 4px;
  color: #64748b;
  font-size: 12px;
  font-weight: 750;
}

.payout-detail-modal footer {
  display: flex;
  justify-content: flex-end;
  padding: 16px 24px;
  border-top: 1px solid #e7eef8;
}

@media (max-width: 760px) {
  .payout-detail-summary,
  .payout-detail-earning-row {
    grid-template-columns: 1fr;
  }
}

.payout-top-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

.payout-side-card {
  background: #fff;
  border: 1px solid #dbe5f2;
  border-radius: 22px;
  box-shadow: 0 16px 42px rgba(15, 23, 42, .07);
  padding: 18px;
}

.payout-main-card {
  width: 100%;
  max-width: 100%;
}

.payout-layout-grid {
  display: block;
}

.payout-head,
.payout-row {
  min-width: 1000px;
}

.payout-detail-summary {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.payout-detail-earning-row {
  grid-template-columns: 1.1fr .85fr .85fr .9fr;
}

@media (max-width: 1180px) {
  .payout-top-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .payout-top-grid,
  .payout-detail-summary,
  .payout-detail-earning-row {
    grid-template-columns: 1fr;
  }
}

/* ===== COMMISSION DETAIL MODAL ===== */

.commission-head,
.commission-row {
  grid-template-columns:
    minmax(120px, .75fr)
    minmax(190px, 1.1fr)
    minmax(170px, 1fr)
    minmax(200px, 1.15fr)
    minmax(120px, .7fr)
    minmax(130px, .8fr)
    minmax(120px, .75fr)
    minmax(120px, .75fr)
    minmax(120px, .75fr)
    minmax(110px, .7fr)
    minmax(110px, .7fr);
}

.commission-actions-cell button {
  border: 0;
  border-radius: 12px;
  background: #eff6ff;
  color: #1857e6;
  padding: 9px 12px;
  font-size: 12px;
  font-weight: 950;
}

.commission-detail-modal {
  width: min(940px, calc(100vw - 32px));
  max-height: 90vh;
  background: #fff;
  border: 1px solid #dbe5f2;
  border-radius: 24px;
  box-shadow: 0 34px 90px rgba(15, 23, 42, .32);
  overflow: hidden;
}

.commission-detail-modal header {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  padding: 22px 24px;
  border-bottom: 1px solid #e7eef8;
}

.commission-detail-modal header span {
  color: #2563eb;
  font-size: 11px;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.commission-detail-modal header h3 {
  margin: 4px 0;
  color: #071532;
  font-size: 22px;
  font-weight: 950;
}

.commission-detail-modal header p {
  margin: 0;
  color: #64748b;
  font-size: 13px;
  font-weight: 750;
}

.commission-detail-modal header button {
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 999px;
  background: #f1f5f9;
  color: #64748b;
  font-size: 24px;
}

.commission-detail-body {
  display: grid;
  gap: 16px;
  max-height: calc(90vh - 158px);
  overflow: auto;
  padding: 22px 24px;
}

.commission-detail-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.commission-detail-summary article,
.commission-detail-card {
  border: 1px solid #e1e8f0;
  border-radius: 18px;
  background: #fbfdff;
  padding: 16px;
}

.commission-detail-summary span,
.commission-detail-grid span {
  display: block;
  color: #64748b;
  font-size: 12px;
  font-weight: 850;
}

.commission-detail-summary strong {
  display: block;
  margin-top: 6px;
  color: #071532;
  font-size: 18px;
  font-weight: 950;
}

.commission-detail-summary .is-paid {
  color: #16a34a;
}

.commission-detail-summary .is-pending {
  color: #f97316;
}

.commission-detail-card h4 {
  margin: 0 0 12px;
  color: #071532;
  font-size: 15px;
  font-weight: 950;
}

.commission-detail-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.commission-detail-grid div {
  border-radius: 14px;
  background: #fff;
  padding: 12px;
}

.commission-detail-grid strong {
  display: block;
  margin-top: 5px;
  color: #071532;
  font-size: 13px;
  font-weight: 950;
  overflow-wrap: anywhere;
}

.commission-detail-modal footer {
  display: flex;
  justify-content: flex-end;
  padding: 16px 24px;
  border-top: 1px solid #e7eef8;
}

@media (max-width: 780px) {
  .commission-detail-summary,
  .commission-detail-grid {
    grid-template-columns: 1fr;
  }
}

.commission-table {
  overflow-x: auto;
}

.commission-head,
.commission-row {
  min-width: 1500px;
}

.commission-actions-cell {
  display: flex;
  justify-content: flex-start;
}

.commission-actions-cell button {
  white-space: nowrap;
}

.commission-avatar {
  display: grid;
  place-items: center;
  text-align: center;
  line-height: 1;
}

.commission-avatar img {
  display: block;
}

.commission-treatment-cell strong,
.commission-treatment-cell span,
.commission-date-cell strong,
.commission-base-cell strong {
  overflow-wrap: anywhere;
}

.commission-tabs button:not([disabled]) {
  cursor: pointer;
}

/* ===== FIX SCROLL TREATMENT DETAIL MODAL ===== */

.treatment-detail-modal {
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.treatment-detail-head,
.treatment-detail-tabs,
.treatment-detail-footer {
  flex: 0 0 auto;
}

.treatment-detail-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding-bottom: 24px;
}

.treatment-detail-footer {
  position: sticky;
  bottom: 0;
  z-index: 3;
  background: #fff;
}

/* ===== TREATMENT EVOLUTION ===== */

.treatment-evolution-panel {
  display: grid;
  gap: 18px;
}

.treatment-evolution-form {
  display: grid;
  gap: 14px;
  border: 1px solid #e1e8f0;
  border-radius: 18px;
  background: #fbfdff;
  padding: 16px;
}

.treatment-evolution-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.treatment-evolution-form label {
  display: grid;
  gap: 8px;
}

.treatment-evolution-form label span {
  color: #64748b;
  font-size: 12px;
  font-weight: 900;
}

.treatment-evolution-form input,
.treatment-evolution-form select,
.treatment-evolution-form textarea {
  width: 100%;
  border: 1px solid #dbe7f6;
  border-radius: 14px;
  background: #fff;
  color: #0f172a;
  font-weight: 800;
  outline: none;
}

.treatment-evolution-form input,
.treatment-evolution-form select {
  height: 44px;
  padding: 0 13px;
}

.treatment-evolution-form textarea {
  padding: 12px 13px;
  resize: vertical;
}

.treatment-evolution-footer {
  display: flex;
  justify-content: flex-end;
}

.treatment-evolution-timeline {
  display: grid;
  gap: 12px;
}

.treatment-evolution-timeline h4 {
  margin: 0;
  color: #071532;
  font-size: 16px;
  font-weight: 950;
}

.treatment-evolution-item {
  position: relative;
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 12px;
}

.treatment-evolution-item::before {
  content: "";
  position: absolute;
  left: 8px;
  top: 18px;
  bottom: -18px;
  width: 2px;
  background: #e2e8f0;
}

.treatment-evolution-item:last-child::before {
  display: none;
}

.treatment-evolution-dot {
  position: relative;
  z-index: 1;
  width: 18px;
  height: 18px;
  margin-top: 14px;
  border: 4px solid #dbeafe;
  border-radius: 999px;
  background: #2563eb;
}

.treatment-evolution-card {
  border: 1px solid #e1e8f0;
  border-radius: 18px;
  background: #fff;
  padding: 14px;
}

.treatment-evolution-card-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.treatment-evolution-card-head strong {
  display: block;
  color: #071532;
  font-size: 14px;
  font-weight: 950;
}

.treatment-evolution-card-head span {
  display: block;
  margin-top: 4px;
  color: #64748b;
  font-size: 12px;
  font-weight: 750;
}

.treatment-evolution-card-head em {
  height: fit-content;
  border-radius: 999px;
  background: #eff6ff;
  color: #1857e6;
  padding: 7px 10px;
  font-size: 11px;
  font-style: normal;
  font-weight: 950;
  white-space: nowrap;
}

.treatment-evolution-card p {
  margin: 0;
  color: #334155;
  font-size: 13px;
  font-weight: 750;
  line-height: 1.5;
}

.treatment-evolution-procedure {
  margin-bottom: 8px !important;
  color: #1857e6 !important;
  font-weight: 900 !important;
}

.treatment-evolution-next {
  margin-top: 10px;
  border-radius: 14px;
  background: #f8fafc;
  color: #475569;
  padding: 10px 12px;
  font-size: 13px;
  font-weight: 750;
}

.treatment-evolution-next strong {
  color: #071532;
}

@media (max-width: 760px) {
  .treatment-evolution-grid,
  .treatment-evolution-card-head {
    grid-template-columns: 1fr;
    display: grid;
  }
}

/* ===== TREATMENT DOCUMENTS ===== */

.treatment-documents-panel {
  display: grid;
  gap: 18px;
}

.treatment-document-form {
  display: grid;
  gap: 14px;
  border: 1px solid #e1e8f0;
  border-radius: 18px;
  background: #fbfdff;
  padding: 16px;
}

.treatment-document-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.treatment-document-grid-url {
  grid-template-columns: 1.4fr .8fr;
}

.treatment-document-form label {
  display: grid;
  gap: 8px;
}

.treatment-document-form label span {
  color: #64748b;
  font-size: 12px;
  font-weight: 900;
}

.treatment-document-form input,
.treatment-document-form select,
.treatment-document-form textarea {
  width: 100%;
  border: 1px solid #dbe7f6;
  border-radius: 14px;
  background: #fff;
  color: #0f172a;
  font-weight: 800;
  outline: none;
}

.treatment-document-form input,
.treatment-document-form select {
  height: 44px;
  padding: 0 13px;
}

.treatment-document-form textarea {
  padding: 12px 13px;
  resize: vertical;
}

.treatment-document-footer {
  display: flex;
  justify-content: flex-end;
}

.treatment-documents-list {
  display: grid;
  gap: 12px;
}

.treatment-documents-list h4 {
  margin: 0;
  color: #071532;
  font-size: 16px;
  font-weight: 950;
}

.treatment-document-row {
  display: grid;
  grid-template-columns: 46px 1fr auto;
  gap: 12px;
  align-items: center;
  border: 1px solid #e1e8f0;
  border-radius: 18px;
  background: #fff;
  padding: 14px;
}

.treatment-document-icon {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  background: #eff6ff;
  color: #1857e6;
}

.treatment-document-icon svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.treatment-document-row strong {
  display: block;
  color: #071532;
  font-size: 14px;
  font-weight: 950;
}

.treatment-document-row span {
  display: block;
  margin-top: 4px;
  color: #64748b;
  font-size: 12px;
  font-weight: 750;
}

.treatment-document-row p {
  margin: 8px 0 0;
  color: #334155;
  font-size: 13px;
  font-weight: 750;
  line-height: 1.45;
}

.treatment-document-row a {
  border-radius: 999px;
  background: #eff6ff;
  color: #1857e6;
  padding: 9px 13px;
  font-size: 12px;
  font-weight: 950;
  text-decoration: none;
  white-space: nowrap;
}

@media (max-width: 760px) {
  .treatment-document-grid,
  .treatment-document-grid-url,
  .treatment-document-row {
    grid-template-columns: 1fr;
  }

  .treatment-document-row a {
    width: fit-content;
  }
}

.treatment-document-form input[type="file"] {
  height: auto;
  min-height: 44px;
  padding: 10px 13px;
  cursor: pointer;
}

.treatment-file-upload {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  align-items: center;
  min-height: 44px;
}

.treatment-file-upload input[type="file"] {
  display: none;
}

.treatment-file-upload button {
  height: 42px;
  border: 1px solid #bfdbfe;
  border-radius: 14px;
  background: #eff6ff;
  color: #1857e6;
  padding: 0 14px;
  font-size: 13px;
  font-weight: 950;
  cursor: pointer;
}

.treatment-file-upload strong {
  min-width: 0;
  color: #475569;
  font-size: 13px;
  font-weight: 800;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* =========================
   AVATARES GENERALES
========================= */

.treatment-avatar,
.treatment-doctor-avatar,
.treatment-document-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}

/* =========================
   PACIENTE SIN AVATAR
========================= */

.treatment-patient-cell {
  display: flex;
  align-items: center;
  gap: 14px;
}

.treatment-patient-cell .treatment-avatar {
  display: none;
}

/* =========================
   AVATAR DOCTOR
========================= */

.treatment-doctor-avatar {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: #eef4ff;
  border: 1px solid #dbe7ff;

  font-size: 14px;
  font-weight: 700;
  color: #2563eb;

  position: relative;
}

.treatment-doctor-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;

  display: block;

  border-radius: 50%;
}

/* =========================
   DOCUMENTOS
========================= */

.treatment-document-icon {
  width: 46px;
  height: 46px;
  min-width: 46px;

  border-radius: 16px;

  background: #f4f7ff;
  border: 1px solid #e2e8f0;
}

.treatment-document-icon svg {
  width: 22px;
  height: 22px;

  display: block;
}

/* =========================
   FILAS DOCUMENTOS
========================= */

.treatment-document-row {
  display: flex;
  align-items: center;
  gap: 16px;
}

/* =========================
   HEADER MODAL TRATAMIENTO
========================= */

.treatment-professional-head {
  display: flex;
  align-items: center;
  gap: 14px;
}

/* ===== FIX DEFINITIVO CENTRADO AVATARES / ICONOS TRATAMIENTOS ===== */

.treatment-doctor-cell,
.treatment-professional-head,
.treatment-document-row {
  display: flex !important;
  align-items: center !important;
}

.treatment-doctor-avatar,
.treatment-document-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  line-height: 1 !important;
  flex: 0 0 auto !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

.treatment-doctor-avatar {
  width: 46px !important;
  height: 46px !important;
  min-width: 46px !important;
  min-height: 46px !important;
  border-radius: 999px !important;
  padding: 0 !important;
}

.treatment-doctor-avatar img {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  object-fit: cover !important;
  object-position: center center !important;
  border-radius: 999px !important;
  margin: 0 !important;
}

.treatment-document-icon {
  width: 46px !important;
  height: 46px !important;
  min-width: 46px !important;
  min-height: 46px !important;
  padding: 0 !important;
}

.treatment-document-icon svg {
  width: 22px !important;
  height: 22px !important;
  display: block !important;
  margin: 0 !important;
  transform: none !important;
}

.treatment-patient-cell {
  padding-left: 0 !important;
}

.treatment-patient-cell .treatment-avatar {
  display: none !important;
}

/* ===== PAYMENTS PAGE FIX ===== */

.payments-page {
  display: grid;
  gap: 24px;
}

.payments-hero h1 {
  margin: 0;
  color: #071532;
  font-size: 38px;
  font-weight: 950;
}

.payments-hero p {
  color: #42526e;
  font-size: 16px;
  font-weight: 700;
}

.payment-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

.payment-summary-card {
  display: flex;
  align-items: center;
  gap: 18px;
  border: 1px solid #dbe7f6;
  border-radius: 22px;
  background: #fff;
  padding: 22px;
  box-shadow: 0 18px 45px rgba(15, 23, 42, 0.05);
}

.payment-summary-icon {
  width: 56px;
  height: 56px;
  min-width: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: #eff6ff;
  color: #1857e6;
  overflow: hidden;
}

.payment-summary-icon svg {
  width: 26px !important;
  height: 26px !important;
  display: block;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.payment-summary-green .payment-summary-icon {
  background: #dcfce7;
  color: #16a34a;
}

.payment-summary-purple .payment-summary-icon {
  background: #f3e8ff;
  color: #9333ea;
}

.payment-summary-blue .payment-summary-icon {
  background: #eff6ff;
  color: #1857e6;
}

.payment-summary-orange .payment-summary-icon {
  background: #ffedd5;
  color: #f97316;
}

.payment-summary-card span {
  color: #64748b;
  font-size: 13px;
  font-weight: 900;
}

.payment-summary-card strong {
  display: block;
  margin-top: 4px;
  color: #071532;
  font-size: 26px;
  font-weight: 950;
}

.payment-summary-card small {
  display: block;
  margin-top: 4px;
  color: #64748b;
  font-size: 12px;
  font-weight: 800;
}

.payments-card {
  border: 1px solid #dbe7f6;
  border-radius: 24px;
  background: #fff;
  overflow: hidden;
}

.payments-toolbar {
  display: grid;
  grid-template-columns: 1fr 240px;
  gap: 14px;
  padding: 18px;
  border-bottom: 1px solid #e2e8f0;
}

.payments-search {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid #dbe7f6;
  border-radius: 16px;
  padding: 0 14px;
  background: #fff;
}

.payments-search svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: #64748b;
  stroke-width: 2;
}

.payments-search input,
.payments-select {
  width: 100%;
  height: 46px;
  border: 0;
  outline: none;
  background: transparent;
  color: #0f172a;
  font-weight: 800;
}

.payments-select {
  border: 1px solid #dbe7f6;
  border-radius: 16px;
  padding: 0 14px;
  background: #fff;
}

.payments-head,
.payment-row {
  display: grid;
  grid-template-columns: 1.2fr 1.3fr 1.4fr .9fr .9fr .8fr .8fr;
  gap: 14px;
  align-items: center;
  padding: 16px 18px;
}

.payments-head {
  color: #64748b;
  font-size: 12px;
  font-weight: 950;
  border-bottom: 1px solid #e2e8f0;
}

.payment-row {
  border-bottom: 1px solid #eef2f7;
}

.payment-row strong {
  display: block;
  color: #071532;
  font-size: 13px;
  font-weight: 950;
}

.payment-row span {
  display: block;
  margin-top: 4px;
  color: #64748b;
  font-size: 12px;
  font-weight: 800;
}

.payment-method-pill,
.payment-view-btn {
  width: fit-content;
  border-radius: 999px;
  background: #eff6ff;
  color: #1857e6 !important;
  padding: 8px 12px;
  font-size: 12px !important;
  font-weight: 950 !important;
}

.payment-view-btn {
  border: 0;
  cursor: pointer;
}

.payment-money-cell strong {
  color: #16a34a;
}

/* ===== PAYMENT DETAIL MODAL ===== */

.payment-detail-modal {
  width: min(880px, calc(100vw - 36px));
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 28px;
  background: #fff;
  border: 1px solid #dbe7f6;
  box-shadow: 0 30px 90px rgba(15, 23, 42, 0.28);
}

.payment-detail-modal header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding: 24px 28px 20px;
  border-bottom: 1px solid #e2e8f0;
  background: #fff;
}

.payment-detail-modal header span {
  display: block;
  color: #1857e6;
  font-size: 11px;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.payment-detail-modal header h3 {
  margin: 6px 0 4px;
  color: #071532;
  font-size: 24px;
  font-weight: 950;
}

.payment-detail-modal header p {
  margin: 0;
  color: #64748b;
  font-size: 13px;
  font-weight: 800;
}

#closePaymentDetail {
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 999px;
  background: #f1f5f9;
  color: #64748b;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
}

.payment-detail-body {
  flex: 1;
  overflow-y: auto;
  display: grid;
  gap: 16px;
  padding: 22px 28px;
  background: #fff;
}

.payment-detail-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.payment-detail-summary article,
.payment-detail-card {
  border: 1px solid #dbe7f6;
  border-radius: 18px;
  background: #fbfdff;
  padding: 16px;
}

.payment-detail-summary span,
.payment-detail-grid span {
  display: block;
  color: #64748b;
  font-size: 12px;
  font-weight: 900;
}

.payment-detail-summary strong,
.payment-detail-grid strong {
  display: block;
  margin-top: 6px;
  color: #071532;
  font-size: 16px;
  font-weight: 950;
}

.payment-detail-card h4 {
  margin: 0 0 14px;
  color: #071532;
  font-size: 16px;
  font-weight: 950;
}

.payment-detail-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.payment-detail-grid > div {
  border-radius: 14px;
  background: #fff;
  padding: 12px;
}

.payment-allocation-detail-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  border-radius: 14px;
  background: #fff;
  padding: 12px 14px;
}

.payment-allocation-detail-row + .payment-allocation-detail-row {
  margin-top: 10px;
}

.payment-allocation-detail-row span {
  color: #475569;
  font-size: 13px;
  font-weight: 850;
}

.payment-allocation-detail-row strong {
  color: #16a34a;
  font-size: 14px;
  font-weight: 950;
}

.payment-muted {
  margin: 0;
  color: #64748b;
  font-size: 13px;
  font-weight: 750;
  line-height: 1.5;
}

.payment-detail-modal footer {
  display: flex;
  justify-content: flex-end;
  padding: 18px 28px;
  border-top: 1px solid #e2e8f0;
  background: #fff;
}

@media (max-width: 760px) {
  .payment-detail-summary,
  .payment-detail-grid {
    grid-template-columns: 1fr;
  }
}

/* ===== REPORTS PAGE ===== */

.reports-page {
  display: grid;
  gap: 24px;
}

.reports-hero h1 {
  margin: 0;
  color: #071532;
  font-size: 38px;
  font-weight: 950;
}

.reports-hero p {
  margin: 12px 0 0;
  color: #42526e;
  font-size: 16px;
  font-weight: 700;
}

.reports-filters {
  display: flex;
  align-items: end;
  gap: 12px;
  flex-wrap: wrap;
}

.reports-filters label {
  display: grid;
  gap: 6px;
  color: #475569;
  font-size: 12px;
  font-weight: 900;
}

.reports-filters input {
  height: 42px;
  border: 1px solid #dbe7f6;
  border-radius: 14px;
  background: #fff;
  color: #0f172a;
  padding: 0 12px;
  font-weight: 800;
}

.report-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.report-card {
  display: flex;
  align-items: center;
  gap: 18px;
  border: 1px solid #dbe7f6;
  border-radius: 22px;
  background: #fff;
  padding: 22px;
  box-shadow: 0 18px 45px rgba(15, 23, 42, 0.05);
}

.report-card-icon {
  width: 56px;
  height: 56px;
  min-width: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: #eff6ff;
  color: #1857e6;
  overflow: hidden;
}

.report-card-icon svg {
  width: 26px !important;
  height: 26px !important;
  display: block;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.report-card-green .report-card-icon {
  background: #dcfce7;
  color: #16a34a;
}

.report-card-orange .report-card-icon {
  background: #ffedd5;
  color: #f97316;
}

.report-card-purple .report-card-icon {
  background: #f3e8ff;
  color: #9333ea;
}

.report-card-blue .report-card-icon {
  background: #eff6ff;
  color: #1857e6;
}

.report-card span {
  color: #64748b;
  font-size: 13px;
  font-weight: 900;
}

.report-card strong {
  display: block;
  margin-top: 4px;
  color: #071532;
  font-size: 26px;
  font-weight: 950;
}

.report-card small {
  display: block;
  margin-top: 4px;
  color: #64748b;
  font-size: 12px;
  font-weight: 800;
}

.reports-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.reports-panel {
  border: 1px solid #dbe7f6;
  border-radius: 24px;
  background: #fff;
  overflow: hidden;
  box-shadow: 0 18px 45px rgba(15, 23, 42, 0.05);
}

.reports-panel header {
  padding: 18px 20px;
  border-bottom: 1px solid #e2e8f0;
}

.reports-panel header span {
  color: #1857e6;
  font-size: 11px;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.reports-panel header h3 {
  margin: 6px 0 0;
  color: #071532;
  font-size: 18px;
  font-weight: 950;
}

.reports-list {
  display: grid;
}

.report-list-row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 20px;
  border-bottom: 1px solid #eef2f7;
}

.report-list-row strong {
  display: block;
  color: #071532;
  font-size: 14px;
  font-weight: 950;
}

.report-list-row span {
  display: block;
  margin-top: 4px;
  color: #64748b;
  font-size: 12px;
  font-weight: 800;
}

.report-money {
  text-align: right;
}

.report-money strong {
  color: #16a34a;
}

.report-empty {
  margin: 0;
  padding: 20px;
  color: #64748b;
  font-size: 14px;
  font-weight: 800;
}

@media (max-width: 980px) {
  .report-card-grid,
  .reports-grid {
    grid-template-columns: 1fr;
  }
}

/* ===== COMMISSIONS PERIOD FILTER + AVATAR FIX ===== */

.commission-filters-period {
  grid-template-columns: 1fr 180px 180px 1fr 1fr 1fr !important;
}

.commission-filters-period input[type="date"] {
  height: 46px;
  border: 1px solid #dbe7f6;
  border-radius: 16px;
  background: #fff;
  color: #0f172a;
  padding: 0 14px;
  font-weight: 800;
}

.commission-avatar {
  width: 46px !important;
  height: 46px !important;
  min-width: 46px !important;
  min-height: 46px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 999px !important;
  overflow: hidden !important;
  background: #eef4ff;
  color: #1857e6;
  font-size: 12px;
  font-weight: 950;
  line-height: 1 !important;
  text-align: center !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

.commission-avatar img {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  object-fit: cover !important;
  object-position: center center !important;
  border-radius: 999px !important;
  margin: 0 !important;
}

.commission-professional-cell {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

@media (max-width: 980px) {
  .commission-filters-period {
    grid-template-columns: 1fr !important;
  }
}

/* ===== PROFESSIONAL PAYOUTS PERIOD FILTER + AVATAR FIX ===== */

.payout-filters-period {
  grid-template-columns: 1fr 180px 180px 1fr 1fr 1fr !important;
}

.payout-filters-period input[type="date"] {
  height: 46px;
  border: 1px solid #dbe7f6;
  border-radius: 16px;
  background: #fff;
  color: #0f172a;
  padding: 0 14px;
  font-weight: 800;
}

.payout-avatar {
  width: 46px !important;
  height: 46px !important;
  min-width: 46px !important;
  min-height: 46px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 999px !important;
  overflow: hidden !important;
  background: #eef4ff;
  color: #1857e6;
  font-size: 12px;
  font-weight: 950;
  line-height: 1 !important;
  text-align: center !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

.payout-avatar img {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  object-fit: cover !important;
  object-position: center center !important;
  border-radius: 999px !important;
  margin: 0 !important;
}

.payout-professional-cell,
.payout-upcoming-list article {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

@media (max-width: 980px) {
  .payout-filters-period {
    grid-template-columns: 1fr !important;
  }
}

/* ===== PAYMENTS PERIOD FILTER ===== */

.payments-toolbar-period {
  grid-template-columns: 220px 1fr 220px !important;
}

.payments-toolbar-period .payments-search {
  min-width: 420px;
}

.payments-date-input {
  height: 46px;
  border: 1px solid #dbe7f6;
  border-radius: 16px;
  background: #fff;
  color: #0f172a;
  padding: 0 14px;
  font-weight: 800;
}

@media (max-width: 980px) {
  .payments-toolbar-period {
    grid-template-columns: 1fr !important;
  }
}

/* ===== TREATMENTS PERIOD FILTER ===== */

.treatments-toolbar-period {
  grid-template-columns: 220px 1fr 220px !important;
}

.treatments-toolbar-period .treatments-search {
  min-width: 420px;
}

.treatments-date-input {
  height: 46px;
  border: 1px solid #dbe7f6;
  border-radius: 16px;
  background: #fff;
  color: #0f172a;
  padding: 0 14px;
  font-weight: 800;
}

@media (max-width: 980px) {
  .treatments-toolbar-period {
    grid-template-columns: 1fr !important;
  }
}

/* ===== REPORTS PERIOD FILTER ===== */

.reports-filters-period {
  display: flex;
  align-items: end;
  gap: 12px;
  flex-wrap: wrap;
}

.reports-filters-period label {
  min-width: 220px;
}

.reports-filters-period select,
.reports-filters-period input[type="date"] {
  width: 100%;
  height: 46px;
  border: 1px solid #dbe7f6;
  border-radius: 16px;
  background: #fff;
  color: #0f172a;
  padding: 0 14px;
  font-weight: 800;
}

.reports-filters-period .primary-btn {
  height: 46px;
}

/* ===== STAFF PHOTO UPLOAD ===== */

.staff-photo-upload-box {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 18px;
  border: 1px solid #dbe7f6;
  border-radius: 22px;
  background: #f8fbff;
}

.staff-photo-preview {
  width: 82px;
  height: 82px;
  min-width: 82px;
  border-radius: 999px;
  background: #eaf2ff;
  border: 1px solid #dbe7f6;
  color: #1857e6;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  font-size: 20px;
  font-weight: 950;
}

.staff-photo-preview img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
}

.staff-photo-actions {
  display: grid;
  gap: 6px;
}

.staff-photo-actions strong {
  color: #071532;
  font-size: 15px;
  font-weight: 950;
}

.staff-photo-actions small,
#staffPhotoFileName {
  color: #64748b;
  font-size: 12px;
  font-weight: 800;
}

.staff-photo-actions .secondary-btn {
  width: fit-content;
  margin-top: 4px;
}

.kb-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 18px;
}

.kb-avatar span {
  font-weight: 900;
  color: #0f3f8f;
}

.patient-incomplete-warning {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  margin-top: 6px;
  padding: 4px 9px;
  border-radius: 999px;
  background: #fff7ed;
  color: #9a3412;
  border: 1px solid #fed7aa;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
}

.clinic-services-intro {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
}

.clinic-services-intro h3 {
  margin: 0 0 6px;
  color: #0f172a;
}

.clinic-services-intro p {
  margin: 0;
  color: #64748b;
  max-width: 680px;
}

.clinic-booking-services-empty {
  border: 1px dashed #cbd5e1;
  border-radius: 18px;
  padding: 22px;
  background: #f8fbff;
  color: #64748b;
}

.clinic-booking-services-empty strong {
  display: block;
  color: #0f172a;
  margin-bottom: 6px;
}

.clinic-booking-services-table {
  border: 1px solid #e2e8f0;
  border-radius: 18px;
  overflow: hidden;
  background: #fff;
}

.clinic-booking-services-head,
.clinic-booking-service-row {
  display: grid;
  grid-template-columns: 1.5fr 1fr 120px 120px;
  gap: 12px;
  align-items: center;
  padding: 14px 16px;
}

.clinic-booking-services-head {
  background: #f8fafc;
  color: #64748b;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.clinic-booking-service-row {
  border-top: 1px solid #edf2f7;
}

.clinic-booking-service-row strong {
  color: #0f172a;
}

.clinic-booking-service-row span {
  color: #64748b;
}

.service-on,
.service-off {
  width: fit-content;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
}

.service-on {
  background: #ecfdf5;
  color: #15803d !important;
}

.service-off {
  background: #f1f5f9;
  color: #64748b !important;
}

.clinic-services-modal {
  width: min(940px, 94vw);
  max-height: 90vh;
  overflow: auto;
}

.clinic-services-toolbar {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 0 22px 16px;
}

.clinic-services-suggested-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  padding: 0 22px 22px;
}

.clinic-service-suggested-group {
  border: 1px solid #e2e8f0;
  border-radius: 18px;
  padding: 14px;
  background: #fff;
}

.clinic-service-suggested-group h3 {
  margin: 0 0 12px;
  font-size: 14px;
  color: #0f172a;
}

.clinic-service-suggested-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 9px 0;
  border-top: 1px solid #f1f5f9;
}

.clinic-service-suggested-item:first-of-type {
  border-top: 0;
}

.clinic-service-suggested-item strong,
.clinic-service-suggested-item small {
  display: block;
}

.clinic-service-suggested-item strong {
  color: #0f172a;
}

.clinic-service-suggested-item small {
  color: #64748b;
  margin-top: 3px;
}

.clinic-services-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  border-top: 1px solid #e2e8f0;
  padding: 16px 22px;
}

@media (max-width: 900px) {
  .clinic-services-intro {
    flex-direction: column;
    align-items: stretch;
  }

  .clinic-services-suggested-grid {
    grid-template-columns: 1fr;
  }

  .clinic-booking-services-head,
  .clinic-booking-service-row {
    grid-template-columns: 1fr;
  }
}

.clinic-services-intro-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.clinic-service-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

.clinic-service-actions button {
  border: 1px solid #dbe7f3;
  background: #f8fbff;
  color: #0f3f8f;
  border-radius: 10px;
  padding: 7px 10px;
  font-weight: 800;
}

.clinic-service-form-modal {
  width: min(760px, 94vw);
}

.clinic-service-form {
  padding: 20px;
}

.clinic-service-form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}

.clinic-service-form-grid label,
.clinic-service-switches label {
  display: grid;
  gap: 7px;
}

.clinic-service-form-grid input {
  height: 42px;
  border: 1px solid #dbe7f3;
  border-radius: 12px;
  padding: 0 12px;
}

.clinic-service-switches {
  display: grid;
  gap: 12px;
  margin-top: 18px;
}

.clinic-services-review-head {
  padding: 0 22px 14px;
}

.clinic-services-review-head strong {
  display: block;
  color: #0f172a;
  font-size: 18px;
  margin-bottom: 4px;
}

.clinic-services-review-head p {
  margin: 0;
  color: #64748b;
}

.clinic-services-review-list {
  display: grid;
  gap: 10px;
  padding: 0 22px 22px;
}

.clinic-service-review-row {
  display: grid;
  grid-template-columns: 1.3fr 1fr 90px 1fr 80px 90px 150px;
  gap: 8px;
  align-items: center;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 10px;
}

.clinic-service-review-row input {
  height: 38px;
  border: 1px solid #dbe7f3;
  border-radius: 10px;
  padding: 0 10px;
}

.clinic-service-review-row label {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #334155;
  font-size: 12px;
  font-weight: 800;
}

@media (max-width: 900px) {
  .clinic-service-form-grid,
  .clinic-service-review-row {
    grid-template-columns: 1fr;
  }
}

.clinic-booking-services-card {
  grid-column: 1 / -1;
}

.clinic-booking-services-card .clinic-services-intro {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
}

.clinic-booking-services-card .clinic-services-intro-actions {
  display: flex;
  gap: 12px;
  flex-shrink: 0;
}

.clinic-booking-services-table {
  width: 100%;
}

.clinic-booking-services-head,
.clinic-booking-service-row {
  display: grid;
  grid-template-columns: 1.4fr 1fr 120px 120px 170px;
  align-items: center;
  gap: 16px;
}

.clinic-service-actions {
  display: flex;
  gap: 8px;
}

.clinic-service-actions button {
  appearance: none;
  border: 1px solid #dbe7f3;
  background: #f8fbff;
  color: #0f3f8f;
  border-radius: 999px;
  padding: 8px 12px;
  font-weight: 800;
  font-size: 13px;
}

/* Modal manual */
.clinic-service-form-modal {
  width: min(760px, 94vw);
}

.clinic-service-form {
  padding: 22px;
}

.clinic-service-form-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.clinic-service-form-grid label {
  display: grid !important;
  gap: 7px;
  margin: 0;
}

.clinic-service-form-grid label span {
  font-size: 13px;
  font-weight: 800;
  color: #334155;
}

.clinic-service-form-grid input {
  width: 100%;
  height: 44px;
  border: 1px solid #dbe7f3;
  border-radius: 12px;
  padding: 0 13px;
  background: #fff;
  color: #0f172a;
}

.clinic-service-switches {
  display: grid;
  gap: 12px;
  margin-top: 18px;
}

.clinic-service-switches .clinic-booking-switch-row {
  display: grid;
  grid-template-columns: 1fr auto 36px;
  align-items: center;
}

/* Modal sugeridos */
.clinic-services-modal {
  width: min(1080px, 94vw);
  max-height: 88vh;
  overflow-y: auto;
  overflow-x: hidden;
}

.clinic-services-review-list {
  display: grid;
  gap: 10px;
  padding: 0 22px 22px;
}

.clinic-service-review-header {
  display: grid;
  grid-template-columns: 1.25fr 1fr 90px 1fr 130px 160px;
  gap: 10px;
  padding: 0 12px 8px;
  color: #64748b;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.clinic-service-review-row {
  display: grid;
  grid-template-columns: 1.25fr 1fr 90px 1fr 130px 160px;
  gap: 10px;
  align-items: end;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 12px;
  background: #fff;
}

.clinic-service-review-row label {
  display: grid !important;
  gap: 5px;
  margin: 0;
}

.clinic-service-review-row small {
  display: none;
  color: #64748b;
  font-size: 11px;
  font-weight: 800;
}

.clinic-service-review-row input[type="text"],
.clinic-service-review-row input[type="number"],
.clinic-service-review-row input:not([type]) {
  width: 100%;
  height: 38px;
  min-width: 0;
  border: 1px solid #dbe7f3;
  border-radius: 10px;
  padding: 0 10px;
}

.clinic-service-review-check {
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
  height: 38px;
  font-size: 12px;
  font-weight: 800;
  color: #334155;
  white-space: nowrap;
}

@media (max-width: 900px) {
  .clinic-booking-services-card .clinic-services-intro,
  .clinic-booking-services-card .clinic-services-intro-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .clinic-booking-services-head,
  .clinic-booking-service-row,
  .clinic-service-form-grid,
  .clinic-service-review-row {
    grid-template-columns: 1fr;
  }

  .clinic-service-review-header {
    display: none;
  }

  .clinic-service-review-row small {
    display: block;
  }

  .clinic-service-review-check {
    height: auto;
  }
}

.clinic-service-review-toggle {
  height: 38px;
  display: flex !important;
  align-items: center !important;
  justify-content: center;
  gap: 8px !important;
  margin: 0 !important;
  white-space: nowrap;
}

.clinic-service-review-toggle input {
  display: none;
}

.clinic-service-review-toggle > span {
  width: 42px;
  height: 24px;
  border-radius: 999px;
  background: #cbd5e1;
  position: relative;
  flex: 0 0 auto;
  transition: 0.2s ease;
}

.clinic-service-review-toggle > span::after {
  content: "";
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: #ffffff;
  position: absolute;
  top: 3px;
  left: 3px;
  box-shadow: 0 2px 5px rgba(15, 23, 42, 0.18);
  transition: 0.2s ease;
}

.clinic-service-review-toggle input:checked + span {
  background: #2563eb;
}

.clinic-service-review-toggle input:checked + span::after {
  transform: translateX(18px);
}

.clinic-service-review-toggle small {
  display: inline !important;
  font-size: 11px;
  font-weight: 800;
  color: #334155;
}

.klynic-confirm-modal {
  width: min(440px, 92vw);
  text-align: center;
  padding: 28px;
}

.klynic-confirm-icon {
  width: 52px;
  height: 52px;
  border-radius: 18px;
  background: #eaf4ff;
  color: #2563eb;
  display: grid;
  place-items: center;
  margin: 0 auto 16px;
  font-weight: 900;
  font-size: 22px;
}

.klynic-confirm-modal h2 {
  margin: 0 0 8px;
  color: #0f172a;
}

.klynic-confirm-modal p {
  margin: 0;
  color: #64748b;
  line-height: 1.5;
}

.klynic-confirm-actions {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 22px;
}

.klynic-confirm-actions button {
  min-width: 150px;
}

.onboarding-currency-field {
  display: grid;
  gap: 7px;
}

.onboarding-currency-field > span {
  color: var(--muted);
  font-size: 14px;
  font-weight: 800;
}

.onboarding-currency-field small {
  display: block;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.billing-currency-notice {
  border: 1px solid #bfdbfe;
  background: #eff6ff;
  color: #1e3a8a;
  border-radius: 18px;
  padding: 13px 15px;
  font-size: 13px;
  line-height: 1.45;
}

.billing-currency-notice strong {
  font-weight: 900;
}

.billing-currency-notice span {
  display: block;
  color: #475569;
  margin-top: 3px;
}

.klynic-paywall-modal {
  position: relative;
  width: min(560px, 100%);
  padding: 34px;
  text-align: center;
  overflow: hidden;
}

.klynic-paywall-modal::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at top left, rgba(37, 99, 235, .14), transparent 34%),
    radial-gradient(circle at bottom right, rgba(6, 182, 212, .12), transparent 32%);
  pointer-events: none;
}

.klynic-paywall-close {
  position: absolute;
  top: 18px;
  right: 18px;
  z-index: 2;
}

.klynic-paywall-icon {
  position: relative;
  z-index: 1;
  width: 76px;
  height: 76px;
  margin: 4px auto 18px;
  border-radius: 26px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #dbeafe, #e0f2fe);
  color: var(--primary);
  box-shadow: 0 18px 34px rgba(37, 99, 235, .16);
}

.klynic-paywall-icon svg {
  width: 34px !important;
  height: 34px !important;
}

.klynic-paywall-modal h2 {
  position: relative;
  z-index: 1;
  margin: 0;
  font-size: 30px;
  letter-spacing: -0.04em;
}

.klynic-paywall-copy {
  position: relative;
  z-index: 1;
  margin: 14px auto 18px;
  max-width: 440px;
  color: var(--muted);
  line-height: 1.55;
  font-weight: 650;
}

.klynic-paywall-meta {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 18px 0;
}

.klynic-paywall-meta span {
  padding: 8px 12px;
  border-radius: 999px;
  background: #eff6ff;
  color: #1e3a8a;
  font-size: 12px;
  font-weight: 800;
}

.klynic-paywall-benefits {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 10px;
  margin: 22px 0;
  text-align: left;
}

.klynic-paywall-benefits div {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 14px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: rgba(255,255,255,.82);
  color: var(--text);
  font-weight: 750;
}

.klynic-paywall-benefits b {
  color: var(--success);
}

.klynic-paywall-actions {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 22px;
}

/* =========================
   KLYNIC AUTH PREMIUM
========================= */

.klynic-auth-premium {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(420px, .85fr);
  background:
    radial-gradient(circle at 18% 12%, rgba(37, 99, 235, .18), transparent 34%),
    radial-gradient(circle at 78% 8%, rgba(6, 182, 212, .12), transparent 30%),
    linear-gradient(135deg, #f8fbff 0%, #eef5ff 48%, #ffffff 100%);
  overflow: hidden;
}

.klynic-auth-hero {
  position: relative;
  padding: clamp(34px, 5vw, 70px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.klynic-auth-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 34px;
}

.klynic-auth-brand img {
  width: 54px;
  height: 54px;
  object-fit: contain;
}

.klynic-auth-brand strong {
  font-size: 24px;
  font-weight: 950;
  letter-spacing: -0.04em;
  color: #0f172a;
}

.klynic-auth-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 22px;
}

.klynic-auth-badges span {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 8px 13px;
  border: 1px solid rgba(191, 219, 254, .95);
  border-radius: 999px;
  background: rgba(255, 255, 255, .78);
  color: #1e3a8a;
  font-size: 12px;
  font-weight: 900;
  box-shadow: 0 10px 26px rgba(37, 99, 235, .08);
}

.klynic-auth-hero h1 {
  max-width: 720px;
  margin: 0;
  color: #0b1735;
  font-size: clamp(42px, 5.6vw, 76px);
  line-height: .96;
  letter-spacing: -0.07em;
}

.klynic-auth-hero h1::first-line {
  color: #0f172a;
}

.klynic-auth-hero p {
  max-width: 610px;
  margin: 24px 0 0;
  color: #475569;
  font-size: 18px;
  line-height: 1.6;
  font-weight: 650;
}

.klynic-auth-benefits {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 260px));
  gap: 12px 18px;
  margin-top: 28px;
}

.klynic-auth-benefits div {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #0f172a;
  font-size: 14px;
  font-weight: 800;
}

.klynic-auth-benefits b {
  color: #2563eb;
  font-size: 16px;
}

.klynic-auth-dashboard-preview {
  width: min(760px, 100%);
  margin-top: 38px;
  display: grid;
  grid-template-columns: 132px 1fr;
  min-height: 300px;
  border: 1px solid rgba(219, 229, 242, .95);
  border-radius: 30px;
  background: rgba(255,255,255,.78);
  box-shadow: 0 30px 80px rgba(15, 23, 42, .14);
  overflow: hidden;
  transform: rotate(-2deg);
}

.klynic-preview-sidebar {
  padding: 20px;
  background: linear-gradient(180deg, #07152e, #0f172a);
  color: #fff;
  display: grid;
  align-content: start;
  gap: 14px;
}

.klynic-preview-sidebar span {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: linear-gradient(135deg, #2563eb, #06b6d4);
  font-weight: 950;
  margin-bottom: 8px;
}

.klynic-preview-sidebar small {
  color: rgba(255,255,255,.76);
  font-size: 12px;
  font-weight: 800;
}

.klynic-preview-main {
  padding: 24px;
  display: grid;
  gap: 18px;
}

.klynic-preview-top {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.klynic-preview-top article {
  padding: 16px;
  border: 1px solid #e2e8f0;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 14px 32px rgba(15, 23, 42, .06);
}

.klynic-preview-top span,
.klynic-preview-row span {
  display: block;
  color: #64748b;
  font-size: 12px;
  font-weight: 800;
}

.klynic-preview-top strong {
  display: block;
  margin-top: 8px;
  color: #0f172a;
  font-size: 22px;
  letter-spacing: -0.04em;
}

.klynic-preview-chart {
  min-height: 120px;
  border: 1px solid #e2e8f0;
  border-radius: 20px;
  background: linear-gradient(180deg, #ffffff, #f8fbff);
  padding: 18px;
}

.klynic-preview-chart svg {
  width: 100%;
  height: 100%;
}

.klynic-preview-chart path {
  fill: none;
  stroke: #2563eb;
  stroke-width: 7;
  stroke-linecap: round;
}

.klynic-preview-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 16px;
  border-radius: 16px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
}

.klynic-preview-row strong {
  color: #047857;
  background: #ecfdf5;
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 12px;
}

.klynic-auth-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin-top: 34px;
}

.klynic-auth-trust span {
  color: #475569;
  font-size: 13px;
  font-weight: 850;
}

.klynic-auth-panel {
  margin: clamp(22px, 4vw, 48px);
  align-self: center;
  justify-self: center;
  width: min(520px, calc(100% - 28px));
  padding: 32px;
  border: 1px solid rgba(219, 229, 242, .95);
  border-radius: 34px;
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 30px 80px rgba(15, 23, 42, .12);
  backdrop-filter: blur(16px);
}

.klynic-auth-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-bottom: 28px;
  padding: 6px;
  border-radius: 18px;
  background: #f1f5f9;
}

.klynic-auth-tabs button {
  border: 0;
  border-radius: 14px;
  padding: 12px 14px;
  background: transparent;
  color: #64748b;
  font-weight: 900;
}

.klynic-auth-tabs button.active {
  background: #fff;
  color: #1d4ed8;
  box-shadow: 0 10px 24px rgba(15, 23, 42, .08);
}

.klynic-auth-form-panel h2 {
  margin: 0;
  color: #0f172a;
  font-size: 32px;
  letter-spacing: -0.05em;
}

.klynic-auth-form-panel > p {
  margin: 10px 0 0;
  color: #64748b;
  line-height: 1.5;
  font-weight: 650;
}

.klynic-auth-form {
  display: grid;
  gap: 15px;
  margin-top: 26px;
}

.klynic-auth-form label {
  display: grid;
  gap: 8px;
}

.klynic-auth-form label span {
  color: #0f172a;
  font-size: 13px;
  font-weight: 850;
}

.klynic-auth-form input {
  width: 100%;
  min-height: 54px;
  border: 1px solid #dbe5f2;
  border-radius: 16px;
  padding: 14px 16px;
  background: #fff;
  color: #0f172a;
  outline: none;
  font-weight: 650;
}

.klynic-auth-form input:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 4px rgba(37, 99, 235, .10);
}

.klynic-auth-form .primary-btn {
  min-height: 54px;
  margin-top: 4px;
  box-shadow: 0 18px 34px rgba(37, 99, 235, .22);
}

.klynic-auth-switch {
  width: 100%;
  border: 0;
  background: transparent;
  color: #1d4ed8;
  font-weight: 900;
  margin-top: 20px;
}

.klynic-auth-trial-box {
  display: grid;
  gap: 9px;
  margin-top: 22px;
  padding: 18px;
  border: 1px solid #bfdbfe;
  border-radius: 20px;
  background: linear-gradient(180deg, #eff6ff, #ffffff);
}

.klynic-auth-trial-box strong {
  color: #0f172a;
  font-size: 14px;
}

.klynic-auth-trial-box span {
  color: #1e3a8a;
  font-size: 13px;
  font-weight: 800;
}

.klynic-auth-error {
  min-height: 20px;
  margin-top: 16px;
  text-align: center;
  font-weight: 750;
}

@media (max-width: 1180px) {
  .klynic-auth-premium {
    grid-template-columns: 1fr;
    overflow: auto;
  }

  .klynic-auth-hero {
    padding-bottom: 20px;
  }

  .klynic-auth-panel {
    margin-top: 0;
    margin-bottom: 42px;
  }

  .klynic-auth-dashboard-preview {
    transform: none;
  }
}

@media (max-width: 720px) {
  .klynic-auth-hero {
    padding: 28px 20px 12px;
  }

  .klynic-auth-hero h1 {
    font-size: clamp(34px, 12vw, 48px);
  }

  .klynic-auth-hero p {
    font-size: 15px;
  }

  .klynic-auth-benefits {
    grid-template-columns: 1fr;
  }

  .klynic-auth-dashboard-preview {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .klynic-preview-sidebar {
    display: none;
  }

  .klynic-preview-top {
    grid-template-columns: 1fr;
  }

  .klynic-auth-panel {
    width: calc(100% - 28px);
    padding: 22px;
    border-radius: 28px;
  }

  .klynic-auth-form-panel h2 {
    font-size: 26px;
  }
}

/* =========================
   CLEAN AUTH
========================= */

.klynic-auth-clean {
  position: relative;
  min-height: 100vh;
  display: grid;
  place-items: center;
  overflow: hidden;
  background:
    radial-gradient(circle at top left, rgba(37, 99, 235, .10), transparent 28%),
    radial-gradient(circle at bottom right, rgba(6, 182, 212, .10), transparent 24%),
    linear-gradient(135deg, #f8fbff 0%, #eef4ff 48%, #ffffff 100%);
  padding: 34px;
}

.klynic-auth-clean-glow {
  position: absolute;
  width: 620px;
  height: 620px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(37, 99, 235, .14), transparent 70%);
  filter: blur(30px);
  opacity: .9;
}

.klynic-auth-clean-card {
  position: relative;
  z-index: 1;
  width: min(520px, 100%);
  padding: 34px;
  border-radius: 34px;
  border: 1px solid rgba(219, 229, 242, .95);
  background: rgba(255,255,255,.88);
  backdrop-filter: blur(18px);
  box-shadow:
    0 20px 50px rgba(15, 23, 42, .08),
    0 2px 10px rgba(255,255,255,.7) inset;
}

.klynic-auth-clean-brand {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
}

.klynic-auth-clean-brand img {
  width: 58px;
  height: 58px;
  object-fit: contain;
}

.klynic-auth-clean-brand strong {
  display: block;
  color: #0f172a;
  font-size: 24px;
  font-weight: 950;
  letter-spacing: -0.04em;
}

.klynic-auth-clean-brand span {
  display: block;
  margin-top: 2px;
  color: #64748b;
  font-size: 13px;
  font-weight: 700;
}

.klynic-auth-clean-badges {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 22px;
}

.klynic-auth-clean-badges span {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 8px 13px;
  border-radius: 999px;
  background: #eff6ff;
  border: 1px solid #dbeafe;
  color: #1d4ed8;
  font-size: 12px;
  font-weight: 900;
}

.klynic-auth-clean-card h1 {
  margin: 0;
  color: #0f172a;
  font-size: 42px;
  line-height: .95;
  letter-spacing: -0.06em;
}

.klynic-auth-clean-card p {
  margin-top: 14px;
  color: #64748b;
  line-height: 1.6;
  font-weight: 650;
}

.klynic-auth-clean .klynic-auth-tabs {
  margin-bottom: 28px;
}

.klynic-auth-clean .klynic-auth-form {
  margin-top: 24px;
}

.klynic-auth-clean .klynic-auth-form input {
  min-height: 56px;
  border-radius: 18px;
  border: 1px solid #dbe5f2;
  background: rgba(248,250,252,.92);
}

.klynic-auth-clean .klynic-auth-form input:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 4px rgba(37, 99, 235, .10);
}

.klynic-auth-clean .primary-btn {
  min-height: 56px;
  margin-top: 4px;
  border-radius: 18px;
  box-shadow: 0 18px 36px rgba(37, 99, 235, .22);
}

.klynic-auth-clean .klynic-auth-switch {
  margin-top: 20px;
}

.klynic-auth-clean .klynic-auth-trial-box {
  margin-top: 22px;
}

@media (max-width: 640px) {
  .klynic-auth-clean {
    padding: 18px;
  }

  .klynic-auth-clean-card {
    padding: 24px;
    border-radius: 28px;
  }

  .klynic-auth-clean-card h1 {
    font-size: 34px;
  }
}

.klynic-auth-clean-badges {
  display: none !important;
}

.klynic-password-field {
  position: relative;
}

.klynic-password-field input {
  padding-right: 78px !important;
}

.klynic-toggle-password {
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
  border: 0;
  border-radius: 999px;
  padding: 7px 11px;
  background: #eff6ff;
  color: #1d4ed8;
  font-size: 12px;
  font-weight: 900;
}

.klynic-auth-trial-summary {
  margin-top: 22px;
  padding: 18px;
  border: 1px solid #dbeafe;
  border-radius: 22px;
  background: linear-gradient(180deg, #f8fbff 0%, #ffffff 100%);
}

.klynic-auth-trial-summary strong {
  display: block;
  color: #0f172a;
  font-size: 14px;
  font-weight: 950;
  margin-bottom: 12px;
}

.klynic-auth-trial-items {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 14px;
}

.klynic-auth-trial-items span {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #334155;
  font-size: 13px;
  font-weight: 800;
}

.klynic-auth-trial-items b {
  display: grid;
  place-items: center;
  width: 19px;
  height: 19px;
  border-radius: 999px;
  background: #dbeafe;
  color: #1d4ed8;
  font-size: 12px;
  flex: 0 0 auto;
}

@media (max-width: 520px) {
  .klynic-auth-trial-items {
    grid-template-columns: 1fr;
  }
}

/* =========================
   KLYNIC ONBOARDING PREMIUM
========================= */

.klynic-onboarding {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 34px;
  background:
    radial-gradient(circle at top left, rgba(37, 99, 235, .10), transparent 30%),
    radial-gradient(circle at bottom right, rgba(6, 182, 212, .10), transparent 28%),
    linear-gradient(135deg, #f8fbff 0%, #eef4ff 48%, #ffffff 100%);
}

.klynic-onboarding-card {
  width: min(980px, 100%);
  background: rgba(255,255,255,.92);
  border: 1px solid #dbe5f2;
  border-radius: 34px;
  padding: 34px;
  box-shadow: 0 24px 70px rgba(15, 23, 42, .10);
}

.klynic-onboarding-head {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: center;
  margin-bottom: 28px;
}

.klynic-onboarding-trial-pill {
  padding: 10px 14px;
  border-radius: 999px;
  background: #eff6ff;
  color: #1d4ed8;
  font-size: 12px;
  font-weight: 900;
  border: 1px solid #dbeafe;
}

.klynic-onboarding-title h1 {
  margin: 0;
  font-size: clamp(34px, 4vw, 52px);
  letter-spacing: -0.06em;
  line-height: 1;
}

.klynic-onboarding-title p {
  color: #64748b;
  font-weight: 650;
}

.klynic-onboarding-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 28px 0;
  padding: 8px;
  border-radius: 20px;
  background: #f1f5f9;
}

.klynic-onboarding-steps button {
  border: 0;
  border-radius: 15px;
  padding: 13px 14px;
  background: transparent;
  color: #64748b;
  font-weight: 900;
}

.klynic-onboarding-steps button.active {
  background: #ffffff;
  color: #1d4ed8;
  box-shadow: 0 10px 24px rgba(15, 23, 42, .08);
}

.klynic-onboarding-step {
  display: none;
}

.klynic-onboarding-step.active {
  display: block;
}

.klynic-onboarding-section-title {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  margin-bottom: 22px;
}

.klynic-onboarding-section-title > span {
  width: 42px;
  height: 42px;
  border-radius: 15px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  color: #fff;
  font-weight: 950;
}

.klynic-onboarding-section-title strong {
  display: block;
  color: #0f172a;
  font-size: 20px;
  letter-spacing: -0.03em;
}

.klynic-onboarding-section-title small {
  display: block;
  margin-top: 4px;
  color: #64748b;
  font-weight: 650;
}

.klynic-onboarding-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.klynic-onboarding-grid label,
.klynic-onboarding-brand-grid label {
  display: grid;
  gap: 8px;
}

.klynic-onboarding-grid span,
.klynic-onboarding-brand-grid span {
  color: #0f172a;
  font-size: 13px;
  font-weight: 850;
}

.klynic-onboarding-grid input,
.klynic-onboarding-grid select,
.klynic-onboarding-brand-grid input {
  width: 100%;
  min-height: 54px;
  border: 1px solid #dbe5f2;
  border-radius: 17px;
  padding: 13px 15px;
  background: #fff;
  outline: none;
  font-weight: 650;
}

.klynic-onboarding-grid input:focus,
.klynic-onboarding-grid select:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 4px rgba(37, 99, 235, .10);
}

.klynic-onboarding-grid small,
.klynic-onboarding-brand-grid small {
  color: #64748b;
  font-size: 12px;
  line-height: 1.45;
}

.klynic-onboarding-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 26px;
}

.klynic-onboarding-brand-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.klynic-onboarding-logo-field {
  padding: 18px;
  border: 1px dashed #bfdbfe;
  border-radius: 22px;
  background: #f8fbff;
}

.klynic-onboarding-colors {
  display: grid;
  gap: 14px;
}

.klynic-onboarding-preview {
  grid-column: 1 / -1;
  padding: 22px;
  border-radius: 24px;
  border: 1px solid #dbeafe;
  background:
    radial-gradient(circle at top right, rgba(37,99,235,.10), transparent 38%),
    #ffffff;
}

.klynic-onboarding-preview span,
.klynic-onboarding-preview small {
  display: block;
  color: #64748b;
  font-weight: 700;
}

.klynic-onboarding-preview strong {
  display: block;
  margin: 8px 0;
  font-size: 26px;
  letter-spacing: -0.04em;
}

.klynic-onboarding-trial-summary {
  margin-top: 22px;
  padding: 18px;
  border: 1px solid #dbeafe;
  border-radius: 22px;
  background: linear-gradient(180deg, #f8fbff, #ffffff);
}

.klynic-onboarding-trial-summary strong {
  display: block;
  margin-bottom: 12px;
  color: #0f172a;
  font-size: 14px;
  font-weight: 950;
}

.klynic-onboarding-trial-summary div {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

.klynic-onboarding-trial-summary span {
  color: #1e3a8a;
  font-size: 13px;
  font-weight: 850;
}

@media (max-width: 760px) {
  .klynic-onboarding {
    padding: 18px;
  }

  .klynic-onboarding-card {
    padding: 24px;
    border-radius: 28px;
  }

  .klynic-onboarding-head {
    display: grid;
  }

  .klynic-onboarding-steps,
  .klynic-onboarding-grid,
  .klynic-onboarding-brand-grid,
  .klynic-onboarding-trial-summary div {
    grid-template-columns: 1fr;
  }

  .klynic-onboarding-actions {
    flex-direction: column-reverse;
  }

  .klynic-onboarding-actions button {
    width: 100%;
  }
}

.klynic-onboarding-logo-field input[type="file"] {
  width: 100%;
  min-height: auto;
  padding: 0;
  border: 0;
  background: transparent;
  font-weight: 800;
}

.klynic-onboarding-logo-field input[type="file"]::file-selector-button {
  margin-right: 14px;
  border: 0;
  border-radius: 999px;
  padding: 11px 16px;
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  color: #fff;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 12px 26px rgba(37, 99, 235, .18);
}

.klynic-onboarding-logo-field input[type="file"]::file-selector-button:hover {
  filter: brightness(.96);
}

/* =========================
   KLYNIC SETUP NOTICE
========================= */

.klynic-setup-notice {
  margin-bottom: 28px;
  padding: 28px;
  border-radius: 34px;
  border: 1px solid #cfe0ff;
  background:
    linear-gradient(
      180deg,
      #ffffff 0%,
      #f8fbff 100%
    );

  box-shadow:
    0 24px 60px rgba(15,23,42,.06);
}

.klynic-setup-header {
  display: flex;
  gap: 22px;
  align-items: flex-start;
}

.klynic-setup-icon-wrap {
  flex-shrink: 0;
}

.klynic-setup-notice-icon {
  width: 72px;
  height: 72px;
  border-radius: 24px;

  display: flex;
  align-items: center;
  justify-content: center;

  background:
    linear-gradient(
      135deg,
      #2563eb,
      #1d4ed8
    );

  color: #ffffff;
  font-size: 32px;
  font-weight: 900;

  box-shadow:
    0 18px 40px rgba(37,99,235,.25);
}

.klynic-setup-copy {
  flex: 1;
}

.klynic-setup-copy h2 {
  margin: 0;
  font-size: 44px;
  line-height: .95;
  letter-spacing: -.05em;
  color: #0f172a;
}

.klynic-setup-copy p {
  margin: 10px 0 22px;
  color: #64748b;
  font-size: 17px;
  line-height: 1.55;
  font-weight: 600;
}

.klynic-setup-progress-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;

  margin-bottom: 12px;
}

.klynic-setup-progress-top strong {
  color: #0f172a;
  font-size: 15px;
  font-weight: 900;
}

.klynic-setup-progress-top span {
  padding: 8px 14px;
  border-radius: 999px;

  background: #eef4ff;

  color: #2563eb;

  font-size: 13px;
  font-weight: 900;
}

.klynic-setup-progress-bar {
  width: 100%;
  height: 10px;

  border-radius: 999px;

  background: #e6edf9;

  overflow: hidden;
}

.klynic-setup-progress-fill {
  height: 100%;

  border-radius: inherit;

  background:
    linear-gradient(
      90deg,
      #2563eb,
      #1d4ed8
    );
}

.klynic-setup-items {
  display: grid;
  gap: 14px;

  margin-top: 26px;
}

.klynic-setup-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;

  padding: 18px 20px;

  border-radius: 24px;

  border: 1px solid #e5edf9;

  background: #ffffff;
}

.klynic-setup-item-left {
  display: flex;
  align-items: center;
  gap: 16px;
}

.klynic-setup-item-circle {
  width: 64px;
  height: 64px;

  border-radius: 22px;

  display: flex;
  align-items: center;
  justify-content: center;

  background: #f4f7ff;

  font-size: 28px;

  flex-shrink: 0;
}

.klynic-setup-item-copy strong {
  display: block;
  color: #0f172a;
  font-size: 20px;
  font-weight: 900;
}

.klynic-setup-item-copy span {
  display: block;
  margin-top: 4px;

  color: #64748b;
  font-size: 15px;
  line-height: 1.5;
  font-weight: 600;
}

.klynic-setup-item-right {
  display: flex;
  align-items: center;
  gap: 14px;
}

.klynic-setup-pending-pill {
  padding: 8px 14px;

  border-radius: 999px;

  background: #fff4e8;

  color: #f59e0b;

  font-size: 13px;
  font-weight: 900;
}

.klynic-setup-action-btn,
.klynic-setup-complete-btn {
  border: 0;

  border-radius: 16px;

  background:
    linear-gradient(
      135deg,
      #2563eb,
      #1d4ed8
    );

  color: #ffffff;

  font-weight: 900;

  cursor: pointer;
}

.klynic-setup-action-btn {
  padding: 12px 18px;
  font-size: 14px;
}

.klynic-setup-footer {
  margin-top: 22px;
  padding-top: 20px;

  border-top: 1px solid #edf2fb;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.klynic-setup-footer-note {
  color: #64748b;
  font-size: 14px;
  font-weight: 600;
}

.klynic-setup-complete-btn {
  padding: 14px 22px;
  font-size: 15px;
}

@media (max-width: 900px) {

  .klynic-setup-notice {
    padding: 22px;
    border-radius: 28px;
  }

  .klynic-setup-header {
    flex-direction: column;
  }

  .klynic-setup-copy h2 {
    font-size: 26px;
  }

  .klynic-setup-copy p {
    font-size: 15px;
  }

  .klynic-setup-progress-top {
    flex-direction: column;
    align-items: flex-start;
  }

  .klynic-setup-item {
    flex-direction: column;
    align-items: flex-start;
  }

  .klynic-setup-item-right {
    width: 100%;
    justify-content: space-between;
  }

  .klynic-setup-footer {
    flex-direction: column;
    align-items: stretch;
  }

  .klynic-setup-complete-btn {
    width: 100%;
  }
}

@media (max-width: 720px) {
  .klynic-setup-notice {
    grid-template-columns: 1fr;
  }
}

.billing-status-card {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 24px;
}

.billing-status-card > div,
.billing-plan-card,
.billing-addon-card {
  background: #ffffff;
  border: 1px solid #dbe5f2;
  border-radius: 24px;
  box-shadow: 0 18px 45px rgba(15, 23, 42, .07);
}

.billing-status-card > div {
  padding: 20px;
}

.billing-status-card span {
  display: block;
  color: #64748b;
  font-size: 13px;
  font-weight: 800;
}

.billing-status-card strong {
  display: block;
  margin-top: 8px;
  color: #0f172a;
  font-size: 20px;
  letter-spacing: -.03em;
}

.billing-plans-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.billing-plan-card {
  position: relative;
  padding: 26px;
}

.billing-plan-card.featured {
  border-color: #2563eb;
  box-shadow: 0 24px 60px rgba(37, 99, 235, .14);
}

.billing-plan-badge {
  position: absolute;
  top: 18px;
  right: 18px;
  padding: 7px 10px;
  border-radius: 999px;
  background: #eff6ff;
  color: #1d4ed8;
  font-size: 11px;
  font-weight: 950;
}

.billing-plan-card h3 {
  margin: 0;
  font-size: 26px;
  letter-spacing: -.04em;
}

.billing-plan-card p {
  min-height: 48px;
  color: #64748b;
  line-height: 1.5;
  font-weight: 650;
}

.billing-plan-price {
  margin: 22px 0;
}

.billing-plan-price strong {
  font-size: 36px;
  letter-spacing: -.05em;
}

.billing-plan-price span {
  color: #64748b;
  font-weight: 800;
}

.billing-plan-features {
  display: grid;
  gap: 10px;
  margin-bottom: 24px;
}

.billing-plan-features span {
  color: #334155;
  font-size: 14px;
  font-weight: 800;
}

.billing-upgrade-btn {
  width: 100%;
}

.billing-addon-card {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: center;
  margin-top: 22px;
  padding: 24px;
}

.billing-addon-card h2 {
  margin: 0;
}

.billing-addon-card p {
  max-width: 720px;
  color: #64748b;
}

.billing-addon-price strong {
  display: block;
  font-size: 30px;
  letter-spacing: -.04em;
}

.billing-addon-price span {
  color: #64748b;
  font-weight: 800;
}

@media (max-width: 1100px) {
  .billing-status-card,
  .billing-plans-grid {
    grid-template-columns: 1fr;
  }

  .billing-addon-card {
    display: grid;
  }
}

.billing-management-card {
  display: flex;
  justify-content: space-between;
  gap: 22px;
  align-items: center;
  margin-bottom: 24px;
  padding: 24px;
  border: 1px solid #bfdbfe;
  border-radius: 26px;
  background:
    radial-gradient(circle at top right, rgba(37, 99, 235, .10), transparent 36%),
    linear-gradient(180deg, #f8fbff 0%, #ffffff 100%);
  box-shadow: 0 18px 45px rgba(15, 23, 42, .07);
}

.billing-management-card h2 {
  margin: 0;
  color: #0f172a;
  font-size: 28px;
  letter-spacing: -.04em;
}

.billing-management-card p {
  max-width: 720px;
  color: #64748b;
  line-height: 1.5;
  font-weight: 650;
}

.billing-management-actions {
  display: grid;
  gap: 10px;
  min-width: 240px;
}

.billing-cancel-link {
  border: 0;
  background: transparent;
  color: #94a3b8;
  font-size: 12px;
  font-weight: 850;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.billing-cancel-link:hover {
  color: #ef4444;
}

@media (max-width: 900px) {
  .billing-management-card {
    display: grid;
  }

  .billing-management-actions {
    min-width: 0;
  }
}

.billing-plan-card.current-plan {
  border-color: #2563eb;
  background:
    radial-gradient(circle at top right, rgba(37, 99, 235, .08), transparent 34%),
    #ffffff;
}

.billing-current-badge {
  position: absolute;
  top: 18px;
  right: 18px;
  padding: 7px 11px;
  border-radius: 999px;
  background: #dbeafe;
  color: #1d4ed8;
  font-size: 11px;
  font-weight: 950;
}

.billing-current-plan-btn {
  width: 100%;
  min-height: 52px;
  border: 1px solid #bfdbfe;
  border-radius: 18px;
  background: #eff6ff;
  color: #1d4ed8;
  font-weight: 900;
  cursor: default;
}

.billing-downgrade-btn {
  width: 100%;
}

/* =========================
   SUBSCRIPTION GATE
========================= */

.klynic-subscription-gate {
  max-width: 760px;
  margin: 80px auto;
  padding: 42px;
  text-align: center;
  border: 1px solid #bfdbfe;
  border-radius: 32px;
  background:
    radial-gradient(circle at top right, rgba(37, 99, 235, .12), transparent 36%),
    linear-gradient(180deg, #f8fbff 0%, #ffffff 100%);
  box-shadow: 0 24px 70px rgba(15, 23, 42, .10);
}

.klynic-subscription-gate-icon {
  width: 74px;
  height: 74px;
  margin: 0 auto 20px;
  display: grid;
  place-items: center;
  border-radius: 26px;
  background: linear-gradient(135deg, #dbeafe, #eff6ff);
  color: #2563eb;
  box-shadow: 0 18px 38px rgba(37, 99, 235, .16);
}

.klynic-subscription-gate-icon svg {
  width: 34px;
  height: 34px;
}

.klynic-subscription-gate h1 {
  margin: 0;
  font-size: clamp(34px, 4vw, 52px);
  letter-spacing: -.06em;
  color: #0f172a;
}

.klynic-subscription-gate > p {
  max-width: 560px;
  margin: 16px auto 0;
  color: #64748b;
  line-height: 1.6;
  font-weight: 650;
}

.klynic-subscription-gate-meta {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 26px 0;
}

.klynic-subscription-gate-meta span {
  padding: 9px 13px;
  border-radius: 999px;
  background: #eff6ff;
  color: #1e3a8a;
  font-size: 12px;
  font-weight: 850;
}

.klynic-subscription-gate-actions {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}

.klynic-subscription-gate-actions .nav-item {
  text-align: center;
}

.billing-scheduled-card {
  margin-bottom: 24px;
  padding: 22px 24px;
  border: 1px solid #fde68a;
  border-radius: 24px;
  background:
    radial-gradient(circle at top right, rgba(245, 158, 11, .10), transparent 34%),
    linear-gradient(180deg, #fffbeb 0%, #ffffff 100%);
  box-shadow: 0 18px 45px rgba(15, 23, 42, .06);
}

.billing-scheduled-card h2 {
  margin: 0;
  color: #0f172a;
  font-size: 24px;
  letter-spacing: -.04em;
}

.billing-scheduled-card p {
  max-width: 760px;
  color: #64748b;
  line-height: 1.5;
  font-weight: 650;
}

.billing-scheduled-card {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: center;
}

.billing-scheduled-card .secondary-btn {
  min-width: 220px;
}

@media (max-width: 900px) {
  .billing-scheduled-card {
    display: grid;
  }

  .billing-scheduled-card .secondary-btn {
    width: 100%;
    min-width: 0;
  }
}

.billing-upgrade-preview-modal {
  position: relative;
  width: min(620px, calc(100vw - 32px));
  padding: 34px;
  text-align: left;
  overflow: hidden;
}

.billing-upgrade-preview-modal::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at top right, rgba(37, 99, 235, .12), transparent 34%),
    radial-gradient(circle at bottom left, rgba(6, 182, 212, .10), transparent 30%);
  pointer-events: none;
}

.billing-upgrade-preview-modal > * {
  position: relative;
  z-index: 1;
}

.billing-upgrade-preview-modal h2 {
  margin: 0;
  color: #0f172a;
  font-size: 30px;
  line-height: 1.05;
  letter-spacing: -.05em;
}

.billing-upgrade-preview-copy {
  margin: 14px 0 20px;
  color: #64748b;
  line-height: 1.55;
  font-weight: 650;
}

.billing-upgrade-preview-grid {
  display: grid;
  gap: 12px;
  margin: 22px 0;
}

.billing-upgrade-preview-grid > div {
  padding: 16px;
  border: 1px solid #dbe5f2;
  border-radius: 18px;
  background: rgba(255,255,255,.84);
}

.billing-upgrade-preview-grid span {
  display: block;
  color: #64748b;
  font-size: 12px;
  font-weight: 850;
}

.billing-upgrade-preview-grid strong {
  display: block;
  margin-top: 6px;
  color: #0f172a;
  font-size: 22px;
  letter-spacing: -.03em;
}

.billing-upgrade-preview-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  flex-wrap: wrap;
}

@media (max-width: 620px) {
  .billing-upgrade-preview-actions button {
    width: 100%;
  }
}

.billing-upgrade-preview-modal {
  position: relative;
}

.billing-upgrade-preview-close {
  position: absolute !important;
  top: 18px !important;
  right: 18px !important;
  left: auto !important;
  z-index: 5;
}

.klynic-payment-notice {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  gap: 16px;
  align-items: center;
  margin-bottom: 24px;
  padding: 18px;
  border: 1px solid #fde68a;
  border-radius: 22px;
  background:
    radial-gradient(circle at top right, rgba(245, 158, 11, .12), transparent 34%),
    linear-gradient(180deg, #fffbeb 0%, #ffffff 100%);
  box-shadow: 0 14px 36px rgba(15, 23, 42, .06);
}

.klynic-payment-notice.blocked {
  border-color: #fecaca;
  background:
    radial-gradient(circle at top right, rgba(239, 68, 68, .10), transparent 34%),
    linear-gradient(180deg, #fff7f7 0%, #ffffff 100%);
}

.klynic-payment-notice-icon {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  background: #f59e0b;
  color: #fff;
  font-weight: 950;
}

.klynic-payment-notice.blocked .klynic-payment-notice-icon {
  background: #ef4444;
}

.klynic-payment-notice strong {
  display: block;
  color: #0f172a;
  font-size: 16px;
  font-weight: 950;
}

.klynic-payment-notice p {
  margin: 5px 0 0;
  color: #475569;
  line-height: 1.45;
  font-weight: 650;
}

@media (max-width: 760px) {
  .klynic-payment-notice {
    grid-template-columns: 1fr;
  }

  .klynic-payment-notice button {
    width: 100%;
  }
}

.billing-upgrade-preview-modal {
  position: relative;
  width: min(680px, calc(100vw - 32px));
  border-radius: 32px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  box-shadow: 0 30px 80px rgba(15, 23, 42, 0.18);
  padding: 36px;
  overflow: hidden;
}

.billing-upgrade-preview-modal::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at top right, rgba(37, 99, 235, 0.12), transparent 32%),
    linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  pointer-events: none;
}

.billing-upgrade-preview-modal > * {
  position: relative;
  z-index: 1;
}

.billing-upgrade-preview-close {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 42px;
  height: 42px;
  border: none;
  border-radius: 50%;
  background: #eff6ff;
  color: #1d4ed8;
  font-size: 24px;
  cursor: pointer;
  transition: all .18s ease;
}

.billing-upgrade-preview-close:hover {
  transform: scale(1.06);
  background: #dbeafe;
}

.billing-upgrade-preview-icon {
  width: 74px;
  height: 74px;
  border-radius: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
  color: #ffffff;
  box-shadow: 0 16px 30px rgba(37, 99, 235, 0.24);
}

.billing-upgrade-preview-eyebrow {
  margin: 28px 0 12px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
  color: #2563eb;
}

.billing-upgrade-preview-title {
  margin: 0;
  font-size: 34px;
  line-height: 1.08;
  letter-spacing: -.03em;
  color: #0f172a;
}

.billing-upgrade-preview-description {
  margin: 18px 0 0;
  color: #475569;
  line-height: 1.8;
  font-size: 15px;
}

.billing-upgrade-preview-summary {
  margin-top: 28px;
  border-radius: 24px;
  border: 1px solid #dbeafe;
  background: #f8fbff;
  padding: 24px;
}

.billing-upgrade-preview-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 14px 0;
  border-bottom: 1px solid #e2e8f0;
}

.billing-upgrade-preview-row:last-child {
  border-bottom: none;
}

.billing-upgrade-preview-row span {
  color: #64748b;
  font-size: 14px;
}

.billing-upgrade-preview-row strong {
  color: #0f172a;
  font-size: 15px;
  text-align: right;
}

.billing-upgrade-preview-note {
  margin-top: 24px;
  padding: 18px 20px;
  border-radius: 20px;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  color: #1e40af;
  font-size: 14px;
  line-height: 1.7;
}

.billing-upgrade-preview-actions {
  display: flex;
  justify-content: flex-end;
  gap: 14px;
  margin-top: 30px;
}

@media (max-width: 640px) {
  .billing-upgrade-preview-modal {
    padding: 26px;
    border-radius: 28px;
  }

  .billing-upgrade-preview-title {
    font-size: 28px;
  }

  .billing-upgrade-preview-actions {
    flex-direction: column-reverse;
  }

  .billing-upgrade-preview-actions button {
    width: 100%;
  }

  .billing-upgrade-preview-row {
    flex-direction: column;
    align-items: flex-start;
  }

  .billing-upgrade-preview-row strong {
    text-align: left;
  }
}


.billing-banner {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  padding: 22px 24px;
  border-radius: 24px;
  margin-bottom: 24px;
  border: 1px solid transparent;
}

.billing-banner-icon {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 800;
  flex-shrink: 0;
}

.billing-banner h3 {
  margin: 0 0 6px;
  font-size: 18px;
  color: #0f172a;
}

.billing-banner p {
  margin: 0;
  color: #475569;
  line-height: 1.7;
}

.billing-banner-success {
  background: #f0fdf4;
  border-color: #bbf7d0;
}

.billing-banner-success .billing-banner-icon {
  background: #dcfce7;
  color: #166534;
}

.billing-banner-warning {
  background: #fffbeb;
  border-color: #fde68a;
}

.billing-banner-warning .billing-banner-icon {
  background: #fef3c7;
  color: #92400e;
}

.billing-banner-neutral {
  background: #f8fafc;
  border-color: #e2e8f0;
}

.billing-banner-neutral .billing-banner-icon {
  background: #e2e8f0;
  color: #475569;
}

.mobile-only {
  display: none !important;
}

@media (max-width: 900px) {
  .mobile-only {
    display: flex !important;
  }
}

@media (max-width: 900px) {

  .page-header {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 22px;
  }

  .page-header h1 {
    font-size: 56px;
    line-height: .95;
    letter-spacing: -2px;
    margin-bottom: 10px;
  }

  .page-header p {
    font-size: 15px;
    line-height: 1.55;
    max-width: 220px;
    color: #71809d;
  }

  .page-header .primary-btn {
    flex-shrink: 0;
    padding: 16px 18px;
    border-radius: 38px;
    font-size: 15px;
    line-height: 1.15;
    font-weight: 700;
    min-width: 118px;
    text-align: center;
    white-space: normal;
  }

  .patient-summary-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-bottom: 22px;
  }

  .patient-summary-card {
    min-height: 92px;
    padding: 14px;
    border-radius: 22px;
  }

  .patient-summary-card strong {
    font-size: 28px;
    line-height: 1;
  }

  .patient-summary-card span {
    font-size: 13px;
  }

  .patient-summary-icon {
    width: 52px;
    height: 52px;
    min-width: 52px;
    min-height: 52px;
  }

  .patient-summary-icon svg {
    width: 24px;
    height: 24px;
  }

  .patient-list-premium-card {
    border-radius: 28px;
    overflow: hidden;
  }

  .patient-list-premium-head {
    padding: 22px 22px 18px;
    gap: 18px;
  }

  .patient-list-premium-head h2 {
    font-size: 28px;
    line-height: 1.05;
    margin-bottom: 10px;
  }

  .patient-list-premium-head .card-subtitle {
    font-size: 15px;
    line-height: 1.5;
  }

  .patient-list-tools {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
  }

  .patient-search-premium {
    width: 100%;
    height: 58px;
    border-radius: 22px;
    padding: 0 18px;
  }

  .patient-search-premium input {
    font-size: 16px;
  }

  .patient-filter-premium-btn {
    width: 100%;
    height: 58px;
    border-radius: 22px;
    justify-content: center;
    font-size: 16px;
    font-weight: 700;
  }

  .patient-table-header {
    display: none;
  }

  .patient-row-premium {
    display: flex !important;
    flex-direction: column;
    gap: 14px;
    padding: 18px 20px;
    border-bottom: 1px solid #edf2fb;
  }

  .patient-premium-actions {
    justify-content: flex-end;
  }

  .patient-premium-main strong,
  .patient-premium-contact strong,
  .patient-premium-value strong {
    font-size: 16px;
  }

  .patient-premium-main span,
  .patient-premium-contact span,
  .patient-premium-value span,
  .patient-premium-doctor span {
    font-size: 13px;
  }

  .patient-commercial-pill,
  .patient-tag-pill {
    font-size: 11px;
  }

  .empty-state {
    padding: 42px 24px;
  }

}

/* =========================================================
   MOBILE FIX — CLIENTS PAGE
========================================================= */

@media screen and (max-width: 900px) {

  .page-header {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    flex-direction: row !important;
    gap: 14px !important;
    margin-bottom: 24px !important;
  }

  .page-header > div:first-child {
    flex: 1 !important;
    min-width: 0 !important;
  }

  .page-header h1 {
    font-size: 42px !important;
    line-height: .95 !important;
    letter-spacing: -1.8px !important;
    margin: 0 0 12px !important;
  }

  .page-header p {
    font-size: 15px !important;
    line-height: 1.55 !important;
    color: #73819c !important;
    max-width: 100% !important;
    margin: 0 !important;
  }

  .page-header .primary-btn {
    width: 132px !important;
    min-width: 132px !important;
    max-width: 132px !important;

    height: auto !important;

    padding: 18px 14px !important;

    border-radius: 38px !important;

    font-size: 15px !important;
    line-height: 1.15 !important;
    text-align: center !important;

    white-space: normal !important;

    flex-shrink: 0 !important;
  }

  .patient-summary-grid {
    display: grid !important;

    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;

    gap: 12px !important;

    margin-bottom: 22px !important;
  }

  .patient-summary-card {
    min-width: 0 !important;

    min-height: auto !important;

    padding: 16px !important;

    border-radius: 24px !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 14px !important;
  }

  .patient-summary-card > div {
    min-width: 0 !important;
  }

  .patient-summary-card span {
    font-size: 13px !important;
  }

  .patient-summary-card strong {
    font-size: 30px !important;
    line-height: 1 !important;
  }

  .patient-summary-icon {
    width: 58px !important;
    height: 58px !important;

    min-width: 58px !important;
    min-height: 58px !important;
  }

  .patient-summary-icon svg {
    width: 24px !important;
    height: 24px !important;
  }

  .patient-list-premium-card {
    border-radius: 28px !important;
    overflow: hidden !important;
  }

  .patient-list-premium-head {
    display: flex !important;
    flex-direction: column !important;

    align-items: stretch !important;

    gap: 18px !important;

    padding: 22px !important;
  }

  .patient-list-premium-head h2 {
    font-size: 28px !important;
    line-height: 1.05 !important;
    margin: 0 0 10px !important;
  }

  .patient-list-premium-head .card-subtitle {
    font-size: 15px !important;
    line-height: 1.55 !important;
    margin: 0 !important;
  }

  .patient-list-tools {
    width: 100% !important;

    display: flex !important;
    flex-direction: column !important;

    gap: 12px !important;
  }

  .patient-search-premium {
    width: 100% !important;

    min-width: 0 !important;

    height: 58px !important;

    border-radius: 22px !important;

    padding: 0 18px !important;
  }

  .patient-search-premium input {
    font-size: 16px !important;
  }

  .patient-filter-premium-btn {
    width: 100% !important;

    height: 58px !important;

    border-radius: 22px !important;

    justify-content: center !important;

    font-size: 16px !important;

    font-weight: 700 !important;
  }

  .patient-table-header {
    display: none !important;
  }

  .patient-table-premium {
    overflow: visible !important;
  }

  .patient-table-body {
    display: flex !important;
    flex-direction: column !important;
  }

  .patient-row-premium {
    display: flex !important;

    flex-direction: column !important;

    align-items: stretch !important;

    gap: 14px !important;

    padding: 20px !important;

    border-bottom: 1px solid #edf2fb !important;
  }

  .patient-premium-actions {
    display: flex !important;
    justify-content: flex-end !important;
  }

  .patient-premium-main strong,
  .patient-premium-contact strong,
  .patient-premium-value strong {
    font-size: 16px !important;
  }

  .patient-premium-main span,
  .patient-premium-contact span,
  .patient-premium-value span,
  .patient-premium-doctor span {
    font-size: 13px !important;
  }

  .empty-state {
    padding: 46px 24px !important;
  }

}

/* =========================================================
   CLIENTS MOBILE UI
========================================================= */

.patient-mobile-open-btn {
  display: none;
}

@media screen and (max-width: 900px) {

  .patient-summary-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 14px !important;
  }

  .patient-summary-card {
    min-height: 132px !important;

    padding: 18px !important;

    border-radius: 24px !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;

    gap: 14px !important;
  }

  .patient-summary-icon {
    width: 58px !important;
    height: 58px !important;

    border-radius: 50% !important;
  }

  .patient-summary-content {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  .patient-summary-card span {
    font-size: 14px !important;
    line-height: 1.3 !important;

    color: #71809d !important;
  }

  .patient-summary-card strong {
    font-size: 38px !important;
    line-height: 1 !important;

    color: #0f172a !important;
  }

  .patient-list-tools {
    flex-direction: column !important;
    align-items: stretch !important;

    gap: 14px !important;
  }

  .patient-search-premium {
    width: 100% !important;
  }

  .patient-filter-premium-btn {
    width: 100% !important;
    justify-content: center !important;
  }

  .desktop-patient-actions {
    display: none !important;
  }

  .patient-mobile-open-btn {
    display: flex !important;

    align-items: center;
    justify-content: center;

    width: 40px;
    height: 40px;

    border: none;
    background: transparent;

    font-size: 40px;
    line-height: 1;

    color: #0f172a;

    margin-left: auto;

    cursor: pointer;
  }

}

/* =========================================================
   PATIENTS MOBILE FINAL
========================================================= */

@media screen and (max-width: 900px) {

  .patient-summary-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 16px !important;
  }

  .patient-summary-card {
    min-height: 170px !important;

    padding: 22px !important;

    border-radius: 30px !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;

    gap: 18px !important;
  }

  .patient-summary-icon {
    width: 72px !important;
    height: 72px !important;

    border-radius: 999px !important;
  }

  .patient-summary-content {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .patient-summary-content span {
    font-size: 16px !important;
    font-weight: 700 !important;

    color: #64748b !important;

    line-height: 1.2 !important;
  }

  .patient-summary-content strong {
    font-size: 58px !important;
    line-height: 1 !important;

    letter-spacing: -.06em !important;

    color: #0f172a !important;
  }

  .patient-table-header {
    display: none !important;
  }

  .patient-table-body {
    display: grid !important;
    gap: 18px !important;
  }

  .patient-row-premium {
    display: flex !important;
    flex-direction: column !important;

    gap: 22px !important;

    padding: 24px !important;

    border-radius: 32px !important;

    background: #ffffff !important;

    border: 1px solid #e2e8f0 !important;
  }

  .patient-mobile-card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
  }

  .patient-mobile-main {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .patient-mobile-main strong {
    font-size: 28px !important;
    line-height: 1.05 !important;

    letter-spacing: -.05em !important;

    color: #0f172a !important;
  }

  .patient-mobile-document,
  .patient-mobile-phone,
  .patient-mobile-email {
    font-size: 18px !important;
    font-weight: 700 !important;

    color: #64748b !important;
  }

  .patient-mobile-open-btn {
    border: 0 !important;
    background: transparent !important;

    width: 40px !important;
    height: 40px !important;

    font-size: 46px !important;
    line-height: 1 !important;

    color: #0f172a !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    padding: 0 !important;

    margin-top: -4px !important;
  }

  .patient-mobile-meta {
    display: flex;
    flex-direction: column;
    gap: 18px;
  }

  .patient-mobile-meta-item {
    display: flex;
    align-items: center;
    gap: 16px;
  }

  .patient-mobile-meta-item strong {
    font-size: 17px !important;
  }

  .patient-mobile-meta-item span {
    font-size: 15px !important;
    color: #64748b !important;
  }

  .patient-mobile-bottom {
    display: flex;
    flex-direction: column;
    gap: 18px;
  }

  .patient-mobile-value strong {
    font-size: 42px !important;
    letter-spacing: -.05em !important;
  }

  .desktop-patient-actions,
  .patient-premium-contact,
  .patient-premium-doctor,
  .patient-premium-activity,
  .patient-premium-value,
  .patient-tags-cell {
    display: none !important;
  }

  .patient-list-tools {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
  }

  .patient-search-premium,
  .patient-filter-premium-btn {
    width: 100% !important;
  }

  .patient-filter-premium-btn {
    justify-content: center !important;
  }

}

/* =========================================================
   PATIENTS MOBILE — EXACT MOCKUP
========================================================= */

@media screen and (max-width: 900px) {

  .patient-summary-grid,
  .patient-summary-premium,
  .patient-summary-card {
    display: none !important;
  }

  .patient-summary-mobile-shell {
    display: block !important;

    background: #ffffff;

    border: 1px solid #e2e8f0;

    border-radius: 28px;

    padding: 26px;

    margin-bottom: 24px;

    box-shadow:
      0 10px 30px rgba(15,23,42,.05);
  }

  .patient-summary-mobile-grid {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 28px 22px;
  }

  .patient-summary-mobile-item {
    display: flex;
    align-items: flex-start;
    gap: 16px;

    min-width: 0;
  }

  .patient-summary-mobile-item:nth-child(1),
  .patient-summary-mobile-item:nth-child(3) {
    padding-right: 16px;
    border-right: 1px solid #eef2f7;
  }

  .patient-summary-mobile-icon {
    width: 62px;
    height: 62px;

    min-width: 62px;

    border-radius: 999px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #edf4ff;

    color: #2563eb;
  }

  .patient-summary-mobile-icon svg {
    width: 28px;
    height: 28px;

    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .patient-summary-mobile-icon.success {
    background: #ebfaef;
    color: #22c55e;
  }

  .patient-summary-mobile-icon.purple {
    background: #f4ecff;
    color: #7c3aed;
  }

  .patient-summary-mobile-icon.muted {
    background: #f3f4f6;
    color: #64748b;
  }

  .patient-summary-mobile-item strong {
    display: block;

    font-size: 17px;
    font-weight: 700;

    color: #64748b;

    margin-bottom: 6px;
  }

  .patient-summary-mobile-item h3 {
    margin: 0;

    font-size: 56px;
    line-height: .92;

    letter-spacing: -.07em;

    color: #0f172a;
  }

.patient-summary-mobile-item p {
  display: none;
}

  /* LISTADO */

  .patient-table-header {
    display: none !important;
  }

  .patient-table-body {
    display: grid;
    gap: 18px;
  }

  .patient-row-premium {
    background: #ffffff;

    border: 1px solid #e2e8f0;

    border-radius: 28px;

    padding: 22px;

    display: flex !important;
    flex-direction: column;

    gap: 18px;
  }

  .patient-mobile-card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 14px;
  }

  .patient-mobile-main strong {
    display: block;

    font-size: 24px;
    line-height: 1.05;

    letter-spacing: -.05em;

    color: #0f172a;

    margin-bottom: 10px;
  }

  .patient-mobile-document,
  .patient-mobile-phone,
  .patient-mobile-email {
    display: block;

    font-size: 16px;
    font-weight: 700;

    color: #64748b;

    margin-bottom: 4px;
  }

  .patient-mobile-open-btn {
    width: 34px;
    height: 34px;

    border: 0;
    background: transparent;

    font-size: 42px;
    line-height: 1;

    color: #0f172a;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 0;
  }

  .patient-mobile-meta {
    display: flex;
    flex-direction: column;
    gap: 14px;
  }

  .patient-mobile-meta-item {
    display: flex;
    align-items: center;
    gap: 14px;
  }

  .patient-mobile-meta-item strong {
    font-size: 15px;
    color: #0f172a;
  }

  .patient-mobile-meta-item span {
    font-size: 14px;
    color: #64748b;
  }

  .patient-mobile-bottom {
    display: flex;
    flex-direction: column;
    gap: 14px;
  }

  .patient-mobile-value strong {
    font-size: 38px;
    line-height: 1;

    letter-spacing: -.06em;

    color: #0f172a;
  }

  .desktop-patient-actions,
  .patient-premium-contact,
  .patient-premium-doctor,
  .patient-premium-activity,
  .patient-premium-value,
  .patient-tags-cell {
    display: none !important;
  }

}

@media (max-width: 768px) {

  .patient-summary-mobile-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }

  .patient-summary-mobile-item {
    min-height: 170px;

    padding: 22px;

    border-radius: 30px;

    background: #ffffff;

    border: 1px solid #dbe7ff;

    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
  }

  .patient-summary-mobile-item p {
    display: none !important;
  }

  .patient-summary-mobile-item strong {
    font-size: 18px;
    line-height: 1.2;
    color: #64748b;
  }

  .patient-summary-mobile-item h3 {
    margin: 0;

    font-size: 68px;
    line-height: .9;

    letter-spacing: -.06em;

    color: #0f172a;
  }

  .patient-search-premium input {
    height: 66px !important;

    border-radius: 24px !important;

    padding-left: 62px !important;

    font-size: 17px !important;

    font-weight: 600 !important;
  }

  .patient-filter-premium-btn {
    height: 68px;

    border-radius: 24px;

    font-size: 18px;

    font-weight: 700;
  }

  .patient-row-premium {
    padding: 28px 22px !important;

    border-radius: 30px !important;
  }

  .patient-mobile-card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 16px;
  }

  .patient-mobile-main strong {
    display: block;

    font-size: 30px;

    line-height: 1;

    letter-spacing: -.05em;

    color: #0f172a;

    margin-bottom: 12px;
  }

  .patient-mobile-document,
  .patient-mobile-phone,
  .patient-mobile-email {
    display: block;

    font-size: 17px;

    font-weight: 700;

    color: #64748b;

    margin-bottom: 8px;
  }

  .patient-mobile-inline-row {
    display: flex;
    flex-direction: column;

    gap: 18px;

    margin-top: 22px;
  }

  .patient-mobile-inline-item {
    display: flex;
    align-items: center;

    gap: 14px;
  }

  .patient-mobile-open-btn {
    width: 44px;
    height: 44px;

    border-radius: 999px;

    border: 0;

    background: #f1f5f9;

    font-size: 34px;

    color: #0f172a;
  }

  .patient-row-menu {
    margin-top: 20px;
  }

}

@media (max-width: 768px) {

  .patient-list-premium-card {
    padding: 0;
    overflow: hidden;
    border-radius: 28px;
    background: #fff;
  }

  .patient-list-premium-head {
    padding: 24px 20px 18px;
    border-bottom: 1px solid #eef2f7;
  }

  .patient-list-premium-head h2 {
    margin: 0 0 10px;
    font-size: 34px;
    line-height: .96;
    letter-spacing: -.055em;
    color: #08112b;
  }

  .patient-list-premium-head .card-subtitle {
    margin: 0;
    font-size: 15px;
    line-height: 1.45;
    color: #71809b;
    max-width: 320px;
  }

  .patient-list-tools {
    margin-top: 22px;
    display: grid;
    gap: 14px;
  }

  .patient-search-premium {
    height: 58px;
    border-radius: 20px;
    border: 1.5px solid #dfe7f4;
    background: #fff;
    padding: 0 18px;
    display: flex;
    align-items: center;
    gap: 12px;
  }

  .patient-search-premium svg {
    width: 22px;
    height: 22px;
    stroke: #71809b;
    flex-shrink: 0;
  }

  .patient-search-premium input {
    border: 0;
    background: transparent;
    width: 100%;
    padding: 0;
    font-size: 16px;
    font-weight: 700;
    color: #0f172a;
    outline: none;
  }

  .patient-search-premium input::placeholder {
    color: #a1a1aa;
    font-weight: 600;
  }

  .patient-filter-premium-btn {
    height: 58px;
    border-radius: 20px;
    border: 1.5px solid #dfe7f4;
    background: #fff;
    font-size: 16px;
    font-weight: 800;
    color: #2563eb;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
  }

  .patient-filter-premium-btn svg {
    width: 20px;
    height: 20px;
  }

  .patient-table-header {
    display: none;
  }

  .patient-table-body {
    background: #fff;
  }

  .patient-row-mobile-card {
    padding: 20px;
    border: 0;
    border-bottom: 1px solid #edf2f7;
    border-radius: 0;
    background: #fff;
  }

  .patient-mobile-top-row {
    display: grid;
    grid-template-columns: 58px minmax(0,1fr) 28px;
    gap: 14px;
    align-items: start;
  }

  .patient-mobile-avatar {
    width: 58px;
    height: 58px;
    border-radius: 999px;
    background: #edf4ff;
    color: #2563eb;
    font-size: 24px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .patient-mobile-main-info {
    min-width: 0;
  }

  .patient-mobile-name {
    display: block;
    margin-bottom: 6px;
    font-size: 19px;
    line-height: 1.08;
    letter-spacing: -.045em;
    color: #08112b;
    font-weight: 800;
  }

  .patient-mobile-document,
  .patient-mobile-phone,
  .patient-mobile-email {
    display: block;
    margin-top: 2px;
    font-size: 14px;
    line-height: 1.35;
    color: #71809b;
    font-weight: 700;
  }

  .patient-mobile-arrow-btn {
    width: 28px;
    height: 28px;
    border: 0;
    background: transparent;
    padding: 0;
    margin-top: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .patient-mobile-arrow-btn svg {
    width: 20px;
    height: 20px;
    stroke: #64748b;
    stroke-width: 2.5;
    fill: none;
  }

  .patient-mobile-bottom-row {
    margin-top: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }

  .patient-mobile-doctor {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
  }

  .patient-mobile-doctor .patient-doctor-avatar {
    width: 42px;
    height: 42px;
    min-width: 42px;
  }

  .patient-mobile-doctor-text strong {
    display: block;
    font-size: 15px;
    line-height: 1.15;
    color: #0f172a;
  }

  .patient-mobile-doctor-text span {
    display: block;
    margin-top: 2px;
    font-size: 13px;
    line-height: 1.3;
    color: #71809b;
  }

  .patient-commercial-pill {
    padding: 8px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
  }

}

@media (max-width: 768px) {

  .patient-table-body {
    background: #fff !important;
  }

  .patient-row-premium.patient-row-mobile-card {
    position: relative !important;

    display: block !important;

    margin: 0 !important;

    padding: 18px 18px 16px !important;

    background: #fff !important;

    border: 0 !important;
    border-bottom: 1px solid #edf2f7 !important;

    border-radius: 0 !important;

    box-shadow: none !important;

    overflow: visible !important;
  }

  .patient-row-premium.patient-row-mobile-card:first-child {
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
  }

  .patient-mobile-top-row {
    display: grid !important;

    grid-template-columns:
      56px
      minmax(0,1fr)
      24px !important;

    align-items: start !important;

    gap: 14px !important;
  }

  .patient-mobile-avatar {
    width: 56px !important;
    height: 56px !important;

    min-width: 56px !important;

    border-radius: 999px !important;

    background: #edf4ff !important;

    color: #2563eb !important;

    font-size: 22px !important;
    font-weight: 800 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .patient-mobile-main-info {
    min-width: 0 !important;
  }

  .patient-mobile-name {
    display: block !important;

    margin: 0 0 6px !important;

    font-size: 18px !important;
    line-height: 1.08 !important;

    letter-spacing: -.04em !important;

    font-weight: 800 !important;

    color: #08112b !important;
  }

  .patient-mobile-document,
  .patient-mobile-phone,
  .patient-mobile-email {
    display: block !important;

    margin-top: 2px !important;

    font-size: 13px !important;

    line-height: 1.35 !important;

    font-weight: 700 !important;

    color: #71809b !important;
  }

  .patient-mobile-arrow-btn {
    width: 24px !important;
    height: 24px !important;

    padding: 0 !important;

    margin: 2px 0 0 !important;

    border: 0 !important;

    background: transparent !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    opacity: 1 !important;

    visibility: visible !important;
  }

  .patient-mobile-arrow-btn svg {
    width: 18px !important;
    height: 18px !important;

    stroke: #64748b !important;
    stroke-width: 2.6 !important;

    fill: none !important;
  }

  .patient-mobile-bottom-row {
    margin-top: 14px !important;

    display: flex !important;
    align-items: center !important;

    gap: 10px !important;
  }

  .patient-mobile-doctor .patient-doctor-avatar {
    width: 38px !important;
    height: 38px !important;

    min-width: 38px !important;
  }

  .patient-mobile-doctor-text strong {
    font-size: 14px !important;
    line-height: 1.15 !important;
  }

  .patient-mobile-doctor-text span {
    margin-top: 2px !important;

    font-size: 12px !important;

    color: #71809b !important;
  }

  .patient-list-premium-head h2 {
    font-size: 32px !important;
  }

  .patient-list-premium-head .card-subtitle {
    font-size: 15px !important;
  }

  .patient-search-premium {
    height: 56px !important;

    border-radius: 18px !important;

    padding: 0 16px !important;
  }

  .patient-search-premium input {
    font-size: 16px !important;
  }

  .patient-filter-premium-btn {
    height: 56px !important;

    border-radius: 18px !important;

    font-size: 16px !important;
  }

}

@media (max-width: 768px) {

  .patient-mobile-top-row {
    display: grid !important;
    grid-template-columns: minmax(0,1fr) 28px !important;
    gap: 10px !important;
    align-items: start !important;
  }

  .patient-mobile-main-info {
    min-width: 0 !important;
  }

  .patient-mobile-arrow-btn {
    width: 28px !important;
    height: 28px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    border: 0 !important;
    background: transparent !important;

    padding: 0 !important;
    margin-top: 2px !important;

    font-size: 34px !important;
    line-height: 1 !important;
    font-weight: 300 !important;

    color: #64748b !important;

    opacity: 1 !important;
    visibility: visible !important;
  }

  .patient-mobile-name {
    font-size: 18px !important;
    line-height: 1.08 !important;
    margin-bottom: 8px !important;
  }

  .patient-mobile-document,
  .patient-mobile-phone,
  .patient-mobile-email {
    font-size: 13px !important;
    line-height: 1.35 !important;
    margin-top: 3px !important;
  }

  .patient-row-premium.patient-row-mobile-card {
    padding: 18px 18px 14px !important;
  }

  .patient-mobile-bottom-row {
    margin-top: 14px !important;
  }

  .patient-search-premium {
    position: relative !important;
    z-index: 2 !important;
  }

  .patient-search-premium input {
    pointer-events: auto !important;
    position: relative !important;
    z-index: 3 !important;
    width: 100% !important;
  }

}

@media (max-width: 768px) {

  .patient-row-premium.patient-row-mobile-card {
    position: relative !important;

    display: flex !important;
    flex-direction: column !important;

    gap: 14px !important;

    padding: 18px 18px 16px !important;

    border-radius: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;

    overflow: visible !important;
  }

  .patient-mobile-top-row {
    width: 100% !important;

    display: grid !important;

    grid-template-columns:
      minmax(0,1fr)
      26px !important;

    gap: 12px !important;

    align-items: start !important;
  }

  .patient-mobile-main-info {
    width: 100% !important;
    min-width: 0 !important;
  }

  .patient-mobile-arrow-btn {
    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    width: 26px !important;
    height: 26px !important;

    min-width: 26px !important;

    opacity: 1 !important;
    visibility: visible !important;

    border: 0 !important;
    background: transparent !important;

    color: #64748b !important;

    font-size: 30px !important;
    font-weight: 300 !important;

    line-height: 1 !important;

    padding: 0 !important;
    margin: 0 !important;

    z-index: 20 !important;
  }

  .patient-mobile-arrow-btn svg {
    display: none !important;
  }

  .patient-mobile-name {
    font-size: 18px !important;
    line-height: 1.08 !important;
    margin-bottom: 8px !important;
  }

  .patient-mobile-document,
  .patient-mobile-phone,
  .patient-mobile-email {
    font-size: 13px !important;
    line-height: 1.35 !important;
    margin-top: 3px !important;
  }

  .patient-mobile-bottom-row {
    margin-top: 0 !important;
  }

}

/* =========================================
   PATIENTS DESKTOP / MOBILE SEPARATION
========================================= */

.patient-row-desktop {
  display: grid;
  grid-template-columns: 52px 1.5fr 1fr 1.2fr auto auto auto;
  gap: 16px;
  align-items: center;
}

.patient-row-mobile {
  display: none;
}

@media (max-width: 768px) {

  .patient-row-desktop {
    display: none !important;
  }

  .patient-row-mobile {
    display: block !important;
  }

  .patient-row-premium {
    padding: 18px !important;
    border-radius: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
    background: #fff !important;
  }

  .patient-mobile-top-row {
    display: grid;
    grid-template-columns: minmax(0,1fr) 24px;
    gap: 10px;
    align-items: start;
  }

  .patient-mobile-name {
    display: block;
    margin-bottom: 8px;

    font-size: 18px;
    line-height: 1.08;
    letter-spacing: -.04em;

    color: #08112b;
    font-weight: 800;
  }

  .patient-mobile-document,
  .patient-mobile-phone,
  .patient-mobile-email {
    display: block;

    margin-top: 3px;

    font-size: 13px;
    line-height: 1.35;

    color: #71809b;
    font-weight: 700;
  }

  .patient-mobile-arrow-btn {
    width: 24px;
    height: 24px;

    border: 0;
    background: transparent;

    padding: 0;
    margin: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    color: #64748b;

    font-size: 30px;
    line-height: 1;
    font-weight: 300;
  }

  .patient-mobile-bottom-row {
    margin-top: 14px;
  }

}

/* ===== FIX FINAL PACIENTES: iconos iguales a Presupuestos ===== */

.patient-premium-actions {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 10px !important;
}

.patient-premium-actions .budget-icon-btn {
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  border: 1px solid #dbe7f6 !important;
  border-radius: 14px !important;
  background: #eff6ff !important;
  color: #2563eb !important;
  display: inline-grid !important;
  place-items: center !important;
  padding: 0 !important;
  font-size: 22px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
}

.patient-premium-actions .budget-icon-btn svg {
  width: 18px !important;
  height: 18px !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 2 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

.patient-row-menu-wrap {
  position: relative !important;
}

.patient-row-menu.budget-mini-menu {
  position: absolute !important;
  right: 0 !important;
  top: 46px !important;
  z-index: 90 !important;
  min-width: 250px !important;
}

.patient-doctor-avatar {
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  border-radius: 999px !important;
  display: grid !important;
  place-items: center !important;
  overflow: hidden !important;
  background: #eef6ff !important;
  color: #2563eb !important;
  border: 1px solid #dbeafe !important;
  font-size: 12px !important;
  font-weight: 950 !important;
}

.patient-doctor-avatar img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

.patient-doctor-avatar.is-empty {
  background: #f1f5f9 !important;
  color: #94a3b8 !important;
}

.patient-doctor-empty-initial {
  color: #94a3b8 !important;
  font-size: 18px !important;
  font-weight: 900 !important;
}

.patient-activity-icon {
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  border-radius: 999px !important;
  display: grid !important;
  place-items: center !important;
  background: #eaf4ff !important;
  color: #2563eb !important;
}

.patient-activity-icon svg {
  width: 18px !important;
  height: 18px !important;
  display: block !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 2 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

/* =========================
   KLYNIC SETUP CARD GRID
========================= */

.klynic-setup-items {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  align-items: stretch;
}

@media (max-width: 900px) {
  .klynic-setup-items {
    grid-template-columns: 1fr;
  }
}
\\/* =========================
   FIXED COSTS HEADER ACTIONS
========================= */

.fixed-cost-header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.fixed-cost-header-actions .secondary-btn {
  background: #ffffff;
  border: 1px solid #dbe5f2;
  color: #2563eb;
}

.fixed-cost-header-actions .secondary-btn:hover {
  background: #f8fbff;
}

.fixed-cost-suggestions-modal {
  width: min(760px, 100%);
}

.fixed-cost-suggestions-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 22px;
}

.fixed-cost-suggestion-card {
  display: flex;
  align-items: flex-start;
  gap: 14px;

  padding: 18px;

  border: 1px solid #dbe5f2;
  border-radius: 18px;

  background: #ffffff;

  cursor: pointer;

  transition:
    border-color .18s ease,
    transform .18s ease,
    box-shadow .18s ease;
}

.fixed-cost-suggestion-card:hover {
  border-color: #93c5fd;

  transform: translateY(-1px);

  box-shadow:
    0 14px 34px rgba(37,99,235,.08);
}

.fixed-cost-suggestion-card input[type="checkbox"] {
  width: 18px;
  height: 18px;

  margin-top: 2px;

  accent-color: #2563eb;

  flex: 0 0 auto;
}

.fixed-cost-suggestion-card strong {
  display: block;

  color: #0b1735;
  font-size: 15px;
}

.fixed-cost-suggestion-card p {
  margin: 6px 0 0;

  color: #64748b;
  font-size: 13px;
  line-height: 1.45;
}

@media (max-width: 768px) {

  .fixed-cost-header-actions {
    width: 100%;
  }

  .fixed-cost-header-actions button {
    flex: 1;
  }

  .fixed-cost-suggestions-grid {
    grid-template-columns: 1fr;
  }
}

/* =========================
   FIXED COSTS HEADER
========================= */

.fixed-cost-page-header-content {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}

.fixed-cost-header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  flex-shrink: 0;
}

.fixed-cost-header-actions .secondary-btn {
  background: #ffffff;
  border: 1px solid #dbe5f2;
  color: #2563eb;
}

.fixed-cost-header-actions .secondary-btn:hover {
  background: #f8fbff;
}

@media (max-width: 768px) {

  .fixed-cost-page-header-content {
    flex-direction: column;
  }

  .fixed-cost-header-actions {
    width: 100%;
  }

  .fixed-cost-header-actions button {
    flex: 1;
  }
}

/* =========================
   FIXED COST HEADER ACTIONS
========================= */

.fixed-cost-header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;

  margin-top: 18px;
}

.fixed-cost-header-actions .secondary-btn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;

  padding: 12px 18px !important;

  background: #ffffff !important;
  color: #2563eb !important;

  border: 1px solid #dbe5f2 !important;
  border-radius: 14px !important;

  opacity: 1 !important;
  visibility: visible !important;
}

.fixed-cost-header-actions .secondary-btn:hover {
  background: #f8fbff !important;
}

@media (max-width: 768px) {

  .fixed-cost-header-actions {
    width: 100%;
  }

  .fixed-cost-header-actions button {
    flex: 1;
  }
}

.fixed-cost-assistant-category-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-bottom:20px;
  flex-wrap:wrap;
}

.fixed-cost-assistant-category-title{
  margin:0;
  font-size:22px;
  font-weight:700;
  color:#0f172a;
}

.fixed-cost-assistant-category-actions{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}

.assistant-select-all-btn{
  border:none;
  background:#2563eb;
  color:#fff;
  padding:10px 14px;
  border-radius:999px;
  font-size:13px;
  font-weight:600;
  cursor:pointer;
}

.assistant-select-all-btn.secondary{
  background:#e2e8f0;
  color:#334155;
}

.fixed-cost-suggested-items-grid{
  display:grid;
  grid-template-columns:repeat(
    auto-fit,
    minmax(280px,1fr)
  );
  gap:18px;
}

.fixed-cost-suggested-item-card{
  border:1px solid #dbe3f0;
  border-radius:20px;
  padding:18px;
  background:#fff;
}

.fixed-cost-suggested-item-check{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:18px;
  font-size:16px;
  font-weight:700;
  color:#0f172a;
}

.fixed-cost-suggested-item-check input{
  width:18px;
  height:18px;
  cursor:pointer;
}

.fixed-cost-suggested-item-body{
  display:flex;
  flex-direction:column;
  gap:14px;
}

.fixed-cost-suggested-item-body label{
  display:flex;
  flex-direction:column;
  gap:8px;
  font-size:13px;
  font-weight:600;
  color:#475569;
}

.fixed-cost-suggested-item-body input,
.fixed-cost-suggested-item-body textarea{
  width:100%;
  border:1px solid #dbe3f0;
  border-radius:14px;
  padding:12px 14px;
  font-size:14px;
  background:#fff;
  color:#0f172a;
}

.fixed-cost-suggested-item-body textarea{
  resize:vertical;
  min-height:72px;
}

.fixed-cost-workspace {
  display: grid;
  grid-template-columns: 340px minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}

.fixed-cost-sidebar {
  position: sticky;
  top: 24px;

  padding: 22px;
  border-radius: 30px;

  border: 1px solid #e7edf5;

  background:
    linear-gradient(
      180deg,
      #ffffff 0%,
      #fbfdff 100%
    );

  box-shadow:
    0 10px 40px rgba(15, 23, 42, 0.04);
}

.fixed-cost-sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;

  margin-bottom: 20px;
}

.fixed-cost-sidebar-header h3 {
  margin: 0;

  font-size: 20px;
  font-weight: 700;
  color: #0f172a;
}

.fixed-cost-filter-btn {
  width: 40px;
  height: 40px;

  border: 1px solid #e2e8f0;
  border-radius: 14px;

  background: #ffffff;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  cursor: pointer;
}

.fixed-cost-filter-btn svg {
  width: 18px;
  height: 18px;

  stroke: #64748b;
  stroke-width: 2;
  fill: none;
}

.fixed-cost-sidebar-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.fixed-cost-category-card {
  width: 100%;

  border: 1px solid transparent;
  border-radius: 24px;

  background: #ffffff;

  padding: 18px;

  display: flex;
  align-items: center;
  gap: 16px;

  cursor: pointer;

  transition:
    transform .18s ease,
    box-shadow .18s ease,
    border-color .18s ease,
    background .18s ease;
}

.fixed-cost-category-card:hover {
  transform: translateY(-1px);

  border-color: #dbe7ff;

  box-shadow:
    0 10px 30px rgba(37, 99, 235, 0.08);
}

.fixed-cost-category-card.is-active {
  border-color: #bfd8ff;

  background:
    linear-gradient(
      135deg,
      #eef5ff 0%,
      #f7fbff 100%
    );

  box-shadow:
    0 14px 40px rgba(37, 99, 235, 0.10);
}

.fixed-cost-category-icon {
  width: 58px;
  height: 58px;

  border-radius: 18px;

  display: flex;
  align-items: center;
  justify-content: center;

  background:
    linear-gradient(
      135deg,
      #ffffff 0%,
      #edf4ff 100%
    );

  border: 1px solid #dce8ff;

  flex-shrink: 0;
}

.fixed-cost-category-icon svg {
  width: 24px;
  height: 24px;

  stroke: #2563eb;
  stroke-width: 2;

  fill: none;
}

.fixed-cost-category-content {
  flex: 1;
  min-width: 0;

  display: flex;
  flex-direction: column;
  gap: 4px;

  text-align: left;
}

.fixed-cost-category-content strong {
  font-size: 15px;
  font-weight: 700;
  color: #0f172a;
}

.fixed-cost-category-content span {
  font-size: 13px;
  color: #64748b;
}

.fixed-cost-category-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
}

.fixed-cost-category-arrow svg {
  width: 18px;
  height: 18px;

  stroke: #94a3b8;
  stroke-width: 2;
  fill: none;
}

.fixed-cost-workspace-main {
  min-width: 0;
}

@media (max-width: 1080px) {

  .fixed-cost-workspace {
    grid-template-columns: 1fr;
  }

  .fixed-cost-sidebar {
    position: relative;
    top: auto;
  }

  .fixed-cost-sidebar-list {
    flex-direction: row;
    overflow-x: auto;

    padding-bottom: 6px;
  }

  .fixed-cost-category-card {
    min-width: 280px;
  }
}

.fixed-cost-row.is-pending-config {
  background:
    linear-gradient(
      180deg,
      #ffffff 0%,
      #fffdf8 100%
    );

  border-color: #f4ead2;
}

.fixed-cost-pending-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 8px 12px;

  border-radius: 999px;

  font-size: 13px;
  font-weight: 700;

  color: #9a6700;

  background:
    linear-gradient(
      180deg,
      #fff7db 0%,
      #fff1bf 100%
    );

  border: 1px solid #f4dea3;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.7);
}

.fixed-cost-pending-dot {
  width: 10px;
  height: 10px;

  border-radius: 999px;

  background: #ef4444;

  box-shadow:
    0 0 0 6px rgba(239, 68, 68, 0.10);

  flex-shrink: 0;
}

.fixed-cost-row.is-pending-config {
  border-color: #f5d7d7;

  background:
    linear-gradient(
      180deg,
      #fffdfd 0%,
      #fff7f7 100%
    );
}

.fixed-cost-summary-card div {
  min-width: 0;
}

.fixed-cost-summary-card strong {
  display: block;

  max-width: 100%;

  overflow-wrap: anywhere;
  word-break: break-word;

  line-height: 1.05;
}

.fixed-cost-summary-card span {
  overflow-wrap: anywhere;
}

@media (max-width: 1380px) {

  .fixed-cost-row {
    grid-template-columns:
      minmax(180px, 1.4fr)
      minmax(100px, .7fr)
      minmax(140px, .9fr)
      auto;

    gap: 14px;
  }

  .procedure-actions {
    grid-column: 1 / -1;

    justify-content: flex-start;

    padding-top: 4px;
  }
}

.billing-plan-eyebrow {
  margin-bottom: 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #3b82f6;
}

.billing-plan-description {
  margin-bottom: 24px;
  line-height: 1.7;
}

.billing-plan-section {
  margin-top: 24px;
}

.billing-plan-section-title {
  margin-bottom: 14px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #64748b;
}

.billing-plan-section-coming {
  padding-top: 18px;
  border-top: 1px solid #e2e8f0;
}

.billing-feature-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 12px;
  line-height: 1.5;
}

.billing-feature-icon {
  flex-shrink: 0;
  font-weight: 700;
  color: #10b981;
}

.billing-feature-item.coming-soon {
  opacity: .72;
}

.billing-feature-item.coming-soon .billing-feature-icon {
  color: #f59e0b;
}


.treatment-consent-action-box {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: center;
  padding: 22px;
  margin-bottom: 22px;
  border-radius: 24px;
  border: 1px solid #dbeafe;
  background: linear-gradient(135deg, #eff6ff 0%, #ffffff 100%);
}

.treatment-consent-action-box strong {
  display: block;
  color: #0f172a;
  font-size: 16px;
  margin-bottom: 6px;
}

.treatment-consent-action-box p {
  margin: 0;
  color: #64748b;
  font-size: 14px;
  line-height: 1.6;
}

.treatment-consent-info-box {
  padding: 18px;
  border-radius: 20px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
}

.treatment-consent-info-box strong,
.treatment-consent-info-box span,
.treatment-consent-info-box small {
  display: block;
}

.treatment-consent-info-box span {
  margin-top: 4px;
  color: #334155;
  font-weight: 700;
}

.treatment-consent-info-box small {
  margin-top: 8px;
  color: #64748b;
  line-height: 1.5;
}

@media (max-width: 760px) {
  .treatment-consent-action-box {
    flex-direction: column;
    align-items: stretch;
  }

  .treatment-consent-action-box button {
    width: 100%;
  }
}

.treatment-documents-list-head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
  margin-bottom: 16px;
}

.treatment-documents-search {
  min-width: 260px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 14px;
  height: 44px;
  border-radius: 16px;
  border: 1px solid #e2e8f0;
  background: #ffffff;
}

.treatment-documents-search svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: #64748b;
  stroke-width: 2;
}

.treatment-documents-search input {
  border: 0;
  outline: 0;
  width: 100%;
  background: transparent;
  color: #0f172a;
}

.treatment-document-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.treatment-document-actions a,
.treatment-document-actions button {
  min-height: 38px;
  padding: 0 14px;
  border-radius: 14px;
  border: 1px solid #e2e8f0;
  background: #ffffff;
  color: #2563eb;
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
}

.treatment-document-actions button:disabled {
  opacity: .55;
  cursor: not-allowed;
}

.treatment-document-delete-btn {
  color: #b91c1c !important;
  border-color: #fecaca !important;
  background: #fff5f5 !important;
}

.treatment-document-delete-btn.is-locked {
  color: #64748b !important;
  border-color: #e2e8f0 !important;
  background: #f8fafc !important;
}

.danger-btn {
  background: #dc2626 !important;
  color: #ffffff !important;
}

.hidden {
  display: none !important;
}

@media (max-width: 760px) {
  .treatment-documents-list-head {
    flex-direction: column;
    align-items: stretch;
  }

  .treatment-documents-search {
    min-width: 0;
    width: 100%;
  }

  .treatment-document-actions {
    width: 100%;
    flex-wrap: wrap;
  }

  .treatment-document-actions a,
  .treatment-document-actions button {
    flex: 1;
    text-align: center;
  }
}

.consent-template-modal {
  width: min(960px, calc(100vw - 32px));
  max-height: 92vh;
  overflow: auto;
  background: #ffffff;
  border-radius: 28px;
  box-shadow: 0 30px 90px rgba(15, 23, 42, .22);
}

.consent-template-modal header {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: flex-start;
  padding: 28px 32px;
  border-bottom: 1px solid #e2e8f0;
}

.consent-template-modal header span {
  display: block;
  color: #2563eb;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.consent-template-modal header h3 {
  margin: 6px 0 0;
  font-size: 24px;
  color: #0f172a;
}

.consent-template-modal header button {
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 999px;
  background: #f1f5f9;
  color: #64748b;
  font-size: 24px;
  cursor: pointer;
}

.consent-template-modal form {
  padding: 28px 32px 32px;
}

.consent-template-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.consent-template-form-grid label {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.consent-template-form-grid label.full-width {
  grid-column: 1 / -1;
}

.consent-template-form-grid label span {
  color: #334155;
  font-size: 13px;
  font-weight: 800;
}

.consent-template-form-grid input,
.consent-template-form-grid select,
.consent-template-form-grid textarea {
  width: 100%;
  border: 1px solid #cbd5e1;
  border-radius: 16px;
  padding: 13px 14px;
  font: inherit;
  color: #0f172a;
  background: #ffffff;
  outline: none;
}

.consent-template-form-grid textarea {
  min-height: 280px;
  resize: vertical;
  line-height: 1.6;
}

.consent-template-modal footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 24px;
}

@media (max-width: 760px) {
  .consent-template-form-grid {
    grid-template-columns: 1fr;
  }

  .consent-template-modal header,
  .consent-template-modal form {
    padding: 22px;
  }
}

.consent-template-preview-body {
  padding: 28px 32px;
}

.consent-template-preview-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 20px;
}

.consent-template-preview-meta strong,
.consent-template-preview-meta span {
  padding: 8px 12px;
  border-radius: 999px;
  background: #f1f5f9;
  color: #334155;
  font-size: 13px;
  font-weight: 800;
}

.consent-template-preview-meta strong {
  background: #dbeafe;
  color: #1d4ed8;
}

.consent-template-preview-document {
  padding: 28px;
  border-radius: 22px;
  border: 1px solid #e2e8f0;
  background: #ffffff;
  color: #1e293b;
  line-height: 1.75;
}

.consent-template-preview-document h1,
.consent-template-preview-document h2,
.consent-template-preview-document h3 {
  color: #0f172a;
}

.treatment-consent-template-meta {
  grid-column: 1 / -1;
}

.treatment-consent-template-card {
  padding: 18px;
  border-radius: 18px;
  border: 1px solid #dbeafe;
  background: linear-gradient(
    180deg,
    #ffffff 0%,
    #eff6ff 100%
  );
}

.treatment-consent-template-card strong {
  display: inline-flex;
  padding: 8px 12px;
  border-radius: 999px;
  background: #dbeafe;
  color: #1d4ed8;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .06em;
}

.treatment-consent-template-card h4 {
  margin: 14px 0 6px;
  font-size: 20px;
  color: #0f172a;
}

.treatment-consent-template-card span {
  display: block;
  color: #334155;
  font-weight: 700;
}

.treatment-consent-template-card small {
  display: block;
  margin-top: 10px;
  color: #64748b;
}

.consent-template-editor {
  background: #ffffff;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid #cbd5e1;
}

.consent-template-editor .ql-toolbar.ql-snow {
  border: 0;
  border-bottom: 1px solid #e2e8f0;
  background: #f8fafc;
}

.consent-template-editor .ql-container.ql-snow {
  border: 0;
  min-height: 420px;
  font-size: 15px;
  line-height: 1.8;
  color: #0f172a;
}

.consent-template-editor .ql-editor {
  min-height: 420px;
  padding: 22px;
}

.consent-template-editor-wrapper {
  border: 1px solid #cbd5e1;
  border-radius: 18px;
  overflow: hidden;
  background: #ffffff;
}

.consent-template-editor {
  min-height: 420px;
}

.consent-template-editor .ql-toolbar {
  border: 0 !important;
  border-bottom: 1px solid #e2e8f0 !important;
  background: #f8fafc;
}

.consent-template-editor .ql-container {
  border: 0 !important;
  font-size: 15px;
  line-height: 1.8;
  min-height: 360px;
}

.consent-template-editor .ql-editor {
  min-height: 360px;
  padding: 22px;
  color: #0f172a;
}

.consent-template-header-actions {
  display: flex;
  gap: 12px;
  align-items: center;
}

.klynic-consent-library-body {
  padding: 28px 32px 32px;
}

.klynic-consent-library-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.klynic-consent-library-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 18px;
  padding: 22px;
  border-radius: 22px;
  border: 1px solid #e2e8f0;
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}

.klynic-consent-library-card h4 {
  margin: 14px 0 8px;
  color: #0f172a;
  font-size: 18px;
}

.klynic-consent-library-card p {
  margin: 0;
  color: #475569;
  line-height: 1.5;
}

.klynic-consent-library-card small {
  display: block;
  margin-top: 10px;
  color: #64748b;
  font-weight: 700;
}

.klynic-consent-library-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

@media (max-width: 760px) {
  .consent-template-header-actions {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
  }

  .klynic-consent-library-grid {
    grid-template-columns: 1fr;
  }
}

.consent-template-delete-btn {
  border: 1px solid #fecaca;
  background: #fff5f5;
  color: #b91c1c;
  border-radius: 14px;
  padding: 10px 14px;
  font-weight: 800;
  cursor: pointer;
}

.consent-template-delete-body {
  padding: 28px 32px 32px;
}

.consent-template-delete-body p {
  margin: 0;
  color: #475569;
  line-height: 1.7;
}

.consent-template-delete-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 24px;
}

.klynic-consent-library-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 22px;
}

.klynic-consent-library-tabs button {
  border: 1px solid #e2e8f0;
  background: #ffffff;
  color: #475569;
  border-radius: 999px;
  padding: 10px 14px;
  font-weight: 800;
  cursor: pointer;
}

.klynic-consent-library-tabs button.active {
  background: #2563eb;
  border-color: #2563eb;
  color: #ffffff;
}

.treatment-documents-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 18px 0 24px;
}

.treatment-documents-tabs button {
  border: 1px solid #dbe4f0;
  background: #ffffff;
  color: #475569;
  border-radius: 999px;
  padding: 10px 14px;
  font-weight: 700;
  cursor: pointer;
  transition: all .2s ease;
}

.treatment-documents-tabs button.active {
  background: #2563eb;
  border-color: #2563eb;
  color: #ffffff;
}

.treatment-documents-tabs button:hover {
  transform: translateY(-1px);
}

.treatment-document-details-body {
  padding: 28px 32px 32px;
}

.treatment-document-details-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.treatment-document-details-grid article {
  border: 1px solid #e2e8f0;
  background: #f8fafc;
  border-radius: 18px;
  padding: 16px;
}

.treatment-document-details-grid span,
.treatment-document-details-notes span {
  display: block;
  color: #64748b;
  font-size: 12px;
  font-weight: 800;
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.treatment-document-details-grid strong {
  color: #0f172a;
  font-size: 14px;
}

.treatment-document-details-notes {
  margin-top: 16px;
  border: 1px solid #e2e8f0;
  background: #ffffff;
  border-radius: 18px;
  padding: 18px;
}

.treatment-document-details-notes p {
  margin: 0;
  color: #334155;
  line-height: 1.7;
}

.treatment-document-details-body footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 22px;
}

.treatment-document-locked-alert {
  margin-bottom: 18px;
  padding: 14px 16px;
  border-radius: 16px;
  background: #fff7ed;
  border: 1px solid #fed7aa;
  color: #9a3412;
  font-weight: 800;
}

.financial-stability-section {
  display: grid;
  gap: 22px;
  padding: 30px;
  border-radius: 30px;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  box-shadow: 0 20px 52px rgba(15, 23, 42, .06);
}

.stability-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.stability-grid article,
.stress-grid article {
  padding: 20px;
  border-radius: 22px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
}

.stability-grid span,
.stress-grid span {
  display: block;
  color: #64748b;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.stability-grid strong,
.stress-grid strong {
  display: block;
  margin-top: 8px;
  color: #0f172a;
  font-size: 26px;
  font-weight: 900;
  letter-spacing: -.04em;
}

.stability-grid b {
  display: inline-flex;
  margin-top: 8px;
  color: #2563eb;
  font-size: 13px;
  font-weight: 900;
}

.stability-grid p,
.stress-grid p,
.stress-card > div > p {
  margin: 8px 0 0;
  color: #64748b;
  font-size: 13px;
  line-height: 1.5;
}

.stress-card {
  display: grid;
  gap: 16px;
  padding: 22px;
  border-radius: 26px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
}

.stress-card h3 {
  margin: 0;
  color: #0f172a;
  font-size: 22px;
  letter-spacing: -.035em;
}

.stress-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.stress-good {
  background: #ecfdf5 !important;
  border-color: #bbf7d0 !important;
}

.stress-warning {
  background: #fffbeb !important;
  border-color: #fde68a !important;
}

.stress-danger {
  background: #fef2f2 !important;
  border-color: #fecaca !important;
}

@media (max-width: 1180px) {
  .stability-grid,
  .stress-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 680px) {
  .stability-grid,
  .stress-grid {
    grid-template-columns: 1fr;
  }
}

.money-flow-card {
  display: grid;
  gap: 18px;
  padding: 24px;
  border-radius: 28px;
  background:
    radial-gradient(circle at top right, rgba(79, 70, 229, .10), transparent 34%),
    #f8fafc;
  border: 1px solid #e2e8f0;
}

.money-flow-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}

.money-flow-head span {
  display: block;
  color: #64748b;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.money-flow-head h3 {
  margin: 6px 0 0;
  color: #0f172a;
  font-size: 26px;
  letter-spacing: -.04em;
}

.money-flow-head p {
  margin: 8px 0 0;
  max-width: 760px;
  color: #64748b;
  font-size: 14px;
  line-height: 1.55;
}

.money-flow-head > strong {
  flex: 0 0 auto;
  padding: 10px 14px;
  border-radius: 999px;
  background: #eef2ff;
  color: #2563eb;
  font-size: 16px;
  font-weight: 900;
}

.money-flow-bar {
  display: flex;
  width: 100%;
  height: 34px;
  overflow: hidden;
  border-radius: 999px;
  background: #e2e8f0;
  box-shadow: inset 0 1px 2px rgba(15, 23, 42, .08);
}

.money-flow-bar span {
  display: block;
  height: 100%;
  min-width: 8px;
}

.money-flow-variable {
  background: #38bdf8;
}

.money-flow-payroll {
  background: #6366f1;
}

.money-flow-fixed {
  background: #f59e0b;
}

.money-flow-owner {
  background: #a855f7;
}

.money-flow-free {
  background: #10b981;
}

.money-flow-gap {
  background: #ef4444;
}

.money-flow-legend {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}

.money-flow-legend article {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  border-radius: 18px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
}

.money-flow-legend i {
  width: 11px;
  height: 11px;
  flex: 0 0 auto;
  border-radius: 999px;
}

.money-flow-legend span {
  display: block;
  color: #64748b;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.money-flow-legend strong {
  display: block;
  margin-top: 3px;
  color: #0f172a;
  font-size: 14px;
  font-weight: 900;
}

.money-flow-ok,
.money-flow-warning {
  padding: 14px 16px;
  border-radius: 18px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
}

.money-flow-ok {
  background: #ecfdf5;
  color: #047857;
  border: 1px solid #bbf7d0;
}

.money-flow-warning {
  background: #fef2f2;
  color: #b91c1c;
  border: 1px solid #fecaca;
}

@media (max-width: 1180px) {
  .money-flow-legend {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .money-flow-head {
    flex-direction: column;
  }
}

@media (max-width: 680px) {
  .money-flow-legend {
    grid-template-columns: 1fr;
  }

  .money-flow-head h3 {
    font-size: 22px;
  }
}

.mini-progress-bar {
  width: 100%;
  height: 9px;
  overflow: hidden;
  border-radius: 999px;
  background: #e2e8f0;
}

.mini-progress-bar span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #2563eb, #7c3aed);
}


.safety-threshold-card {
  display: grid;
  gap: 24px;
  padding: 28px;
  border-radius: 32px;
  background:
    radial-gradient(circle at top right, rgba(124, 58, 237, .08), transparent 30%),
    #ffffff;
  border: 1px solid #e2e8f0;
  box-shadow: 0 20px 50px rgba(15, 23, 42, .05);
}

.safety-threshold-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
}

.safety-threshold-head span {
  display: block;
  color: #64748b;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.safety-threshold-head h3 {
  margin: 8px 0 0;
  color: #0f172a;
  font-size: 32px;
  line-height: 1.05;
  letter-spacing: -.05em;
  max-width: 720px;
}

.safety-threshold-head p {
  margin: 12px 0 0;
  max-width: 720px;
  color: #64748b;
  font-size: 15px;
  line-height: 1.65;
}

.safety-status {
  flex: 0 0 auto;
  max-width: 300px;
  padding: 14px 16px;
  border-radius: 18px;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.5;
}

.safety-healthy {
  background: #ecfdf5;
  color: #047857;
  border: 1px solid #bbf7d0;
}

.safety-warning {
  background: #fffbeb;
  color: #b45309;
  border: 1px solid #fde68a;
}

.safety-danger {
  background: #fef2f2;
  color: #b91c1c;
  border: 1px solid #fecaca;
}

.safety-track-wrapper {
  padding: 24px 0 14px;
}

.safety-track {
  position: relative;
  width: 100%;
  height: 34px;
  overflow: visible;
  border-radius: 999px;
  background: #e2e8f0;
}

.safety-fill {
  height: 100%;
  min-width: 8px;
  border-radius: 999px;
}

.safety-track.is-positive .safety-fill {
  background: linear-gradient(90deg, #22c55e, #10b981);
}

.safety-track.is-negative .safety-fill {
  background: linear-gradient(90deg, #ef4444, #dc2626);
}

.safety-break-even {
  position: absolute;
  top: -10px;
  width: 2px;
  height: 54px;
  background: #0f172a;
}

.safety-break-even span {
  position: absolute;
  top: -28px;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  color: #0f172a;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.safety-revenue {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
}

.safety-revenue::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: #7c3aed;
  border: 4px solid #ffffff;
  box-shadow: 0 8px 20px rgba(124, 58, 237, .28);
  transform: translate(-50%, -50%);
}

.safety-revenue strong {
  position: absolute;
  top: -44px;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  color: #0f172a;
  font-size: 14px;
  font-weight: 900;
}

.safety-gap-card {
  padding: 20px;
  border-radius: 22px;
  border: 1px solid #e2e8f0;
  background: #f8fafc;
}

.safety-gap-card span {
  display: block;
  color: #64748b;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.safety-gap-card strong {
  display: block;
  margin-top: 8px;
  font-size: 28px;
  font-weight: 900;
  letter-spacing: -.04em;
}

.safety-gap-card p {
  margin: 8px 0 0;
  color: #64748b;
  font-size: 14px;
  line-height: 1.55;
}

.safety-gap-card.is-positive strong {
  color: #059669;
}

.safety-gap-card.is-negative strong {
  color: #dc2626;
}

.safety-gap-card.is-positive {
  background: #ecfdf5;
  border-color: #bbf7d0;
}

.safety-gap-card.is-negative {
  background: #fef2f2;
  border-color: #fecaca;
}

@media (max-width: 980px) {
  .safety-threshold-head {
    flex-direction: column;
  }

  .safety-footer {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 680px) {
  .safety-threshold-head h3 {
    font-size: 26px;
  }

  .safety-track {
    height: 24px;
  }

  .safety-revenue strong {
    font-size: 12px;
  }
}

.personal-emergency-card {
  display: grid;
  gap: 16px;
}

.personal-emergency-head h3 {
  margin-bottom: 8px;
}

.personal-emergency-head p {
  margin: 0;
  color: #64748b;
  font-size: 13px;
  line-height: 1.5;
}

.personal-emergency-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.personal-emergency-grid article {
  padding: 16px;
  border-radius: 18px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
}

.personal-emergency-grid span {
  display: block;
  color: #64748b;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.personal-emergency-grid strong {
  display: block;
  margin-top: 8px;
  color: #0f172a;
  font-size: 20px;
  font-weight: 900;
  letter-spacing: -.035em;
}

.personal-emergency-grid p {
  margin: 8px 0 0;
  color: #64748b;
  font-size: 12px;
  line-height: 1.45;
}

.personal-emergency-bar {
  width: 100%;
  height: 8px;
  margin-top: 12px;
  overflow: hidden;
  border-radius: 999px;
  background: #e2e8f0;
}

.personal-emergency-bar i {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #7c3aed, #2563eb);
}

.personal-emergency-bar.is-essential i {
  background: linear-gradient(90deg, #10b981, #22c55e);
}

.personal-emergency-note {
  padding: 13px 14px;
  border-radius: 16px;
  background: #fff7ed;
  border: 1px solid #fed7aa;
  color: #9a3412;
  font-size: 12px;
  line-height: 1.5;
  font-weight: 700;
}

@media (max-width: 680px) {
  .personal-emergency-grid {
    grid-template-columns: 1fr;
  }
}

.klynic-patient-main-tabs {
  display: flex !important;
  gap: 10px !important;
  padding: 0 34px 22px !important;
  overflow-x: auto !important;
  border-bottom: 1px solid #e5edf7 !important;
}

.klynic-patient-main-tab {
  border: 1px solid #dbe6f4 !important;
  background: #f8fbff !important;
  color: #64748b !important;
  min-height: 42px !important;
  padding: 0 16px !important;
  border-radius: 999px !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  cursor: pointer !important;
  white-space: nowrap !important;
}

.klynic-patient-main-tab.is-active {
  background: #0f62fe !important;
  border-color: #0f62fe !important;
  color: #ffffff !important;
  box-shadow: 0 14px 28px rgba(15, 98, 254, .18) !important;
}

.klynic-patient-main-tab:disabled {
  opacity: .45 !important;
  cursor: not-allowed !important;
}

.klynic-patient-tab-panel.hidden {
  display: none !important;
}

.klynic-clinical-shell {
  display: grid !important;
  grid-template-columns: 280px minmax(0, 1fr) !important;
  gap: 22px !important;
  padding: 28px 34px 34px !important;
  background: #f8fafc !important;
}

.klynic-clinical-sidebar {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}

.klynic-clinical-tab {
  width: 100% !important;
  text-align: left !important;
  border: 1px solid #dbe6f4 !important;
  background: #ffffff !important;
  border-radius: 18px !important;
  padding: 16px !important;
  cursor: pointer !important;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease !important;
}

.klynic-clinical-tab:hover {
  transform: translateY(-1px) !important;
  border-color: #bcd2ff !important;
  box-shadow: 0 14px 34px rgba(15, 23, 42, .08) !important;
}

.klynic-clinical-tab.is-active {
  border-color: #0f62fe !important;
  background: linear-gradient(135deg, #eff6ff 0%, #ffffff 100%) !important;
  box-shadow: inset 4px 0 0 #0f62fe, 0 14px 34px rgba(15, 98, 254, .10) !important;
}

.klynic-clinical-tab strong {
  display: block !important;
  color: #0f172a !important;
  font-size: 14px !important;
  font-weight: 900 !important;
}

.klynic-clinical-tab span {
  display: block !important;
  margin-top: 5px !important;
  color: #64748b !important;
  font-size: 12px !important;
  line-height: 1.35 !important;
  font-weight: 600 !important;
}

.klynic-clinical-content {
  min-width: 0 !important;
}

.klynic-clinical-panel {
  background: #ffffff !important;
  border: 1px solid #dfe8f5 !important;
  border-radius: 26px !important;
  min-height: 520px !important;
  padding: 28px !important;
  box-shadow: 0 18px 55px rgba(15, 23, 42, .06) !important;
}

.klynic-clinical-panel.hidden {
  display: none !important;
}

.klynic-clinical-panel-head {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 18px !important;
  margin-bottom: 26px !important;
}

.klynic-clinical-kicker {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 28px !important;
  padding: 0 12px !important;
  border-radius: 999px !important;
  background: #eef5ff !important;
  color: #2563eb !important;
  font-size: 12px !important;
  font-weight: 900 !important;
}

.klynic-clinical-panel-head h3 {
  margin: 12px 0 8px !important;
  color: #0f172a !important;
  font-size: 28px !important;
  line-height: 1.1 !important;
  font-weight: 900 !important;
}

.klynic-clinical-panel-head p {
  margin: 0 !important;
  color: #64748b !important;
  font-size: 14px !important;
  line-height: 1.55 !important;
  max-width: 620px !important;
}

.klynic-clinical-primary {
  border: 0 !important;
  border-radius: 16px !important;
  background: #0f62fe !important;
  color: #ffffff !important;
  min-height: 46px !important;
  padding: 0 18px !important;
  font-weight: 900 !important;
  cursor: pointer !important;
}

.klynic-clinical-primary:disabled {
  opacity: .55 !important;
  cursor: not-allowed !important;
}

.klynic-timeline-empty,
.klynic-evolution-empty,
.klynic-module-placeholder {
  border: 1px dashed #cbd9ec !important;
  background: linear-gradient(135deg, #f8fbff 0%, #ffffff 100%) !important;
  border-radius: 24px !important;
  padding: 34px !important;
  min-height: 260px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  text-align: center !important;
}

.klynic-timeline-empty strong,
.klynic-evolution-empty strong,
.klynic-module-placeholder strong {
  color: #0f172a !important;
  font-size: 20px !important;
  font-weight: 900 !important;
}

.klynic-timeline-empty p,
.klynic-evolution-empty p,
.klynic-module-placeholder p {
  margin: 10px 0 0 !important;
  max-width: 560px !important;
  color: #64748b !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
}

@media (max-width: 900px) {
  .klynic-patient-main-tabs {
    padding: 0 20px 18px !important;
  }

  .klynic-clinical-shell {
    grid-template-columns: 1fr !important;
    padding: 22px 20px 28px !important;
  }

  .klynic-clinical-sidebar {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .klynic-clinical-panel {
    padding: 22px !important;
    border-radius: 24px !important;
  }

  .klynic-clinical-panel-head {
    flex-direction: column !important;
  }
}

@media (max-width: 560px) {
  .klynic-clinical-sidebar {
    grid-template-columns: 1fr !important;
  }

  .klynic-clinical-panel-head h3 {
    font-size: 24px !important;
  }
}

.klynic-patient-operational-panel {
  margin: 28px 34px 34px !important;
  padding: 30px !important;
  border-radius: 28px !important;
  background: #ffffff !important;
  border: 1px solid #dfe8f5 !important;
  box-shadow: 0 18px 55px rgba(15, 23, 42, .06) !important;
}

.klynic-operational-head {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 18px !important;
  margin-bottom: 26px !important;
}

.klynic-operational-head span {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 28px !important;
  padding: 0 12px !important;
  border-radius: 999px !important;
  background: #eef5ff !important;
  color: #2563eb !important;
  font-size: 12px !important;
  font-weight: 900 !important;
}

.klynic-operational-head h3 {
  margin: 12px 0 8px !important;
  color: #0f172a !important;
  font-size: 28px !important;
  line-height: 1.1 !important;
  font-weight: 900 !important;
}

.klynic-operational-head p {
  margin: 0 !important;
  color: #64748b !important;
  font-size: 14px !important;
  line-height: 1.55 !important;
  max-width: 680px !important;
}

.klynic-operational-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 16px !important;
  margin-bottom: 22px !important;
}

.klynic-operational-metric {
  padding: 22px !important;
  border-radius: 24px !important;
  border: 1px solid #e2eaf6 !important;
  background: linear-gradient(135deg, #f8fbff 0%, #ffffff 100%) !important;
}

.klynic-operational-metric span {
  display: block !important;
  color: #64748b !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  margin-bottom: 8px !important;
}

.klynic-operational-metric strong {
  display: block !important;
  color: #0f172a !important;
  font-size: 24px !important;
  line-height: 1.1 !important;
  font-weight: 900 !important;
}

.klynic-operational-metric p {
  margin: 10px 0 0 !important;
  color: #64748b !important;
  font-size: 12px !important;
  line-height: 1.45 !important;
  font-weight: 600 !important;
}

.klynic-operational-empty {
  border: 1px dashed #cbd9ec !important;
  background: #f8fafc !important;
  border-radius: 24px !important;
  padding: 30px !important;
  text-align: center !important;
}

.klynic-operational-empty strong {
  display: block !important;
  color: #0f172a !important;
  font-size: 18px !important;
  font-weight: 900 !important;
}

.klynic-operational-empty p {
  margin: 10px auto 0 !important;
  max-width: 620px !important;
  color: #64748b !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
}

@media (max-width: 900px) {
  .klynic-patient-operational-panel {
    margin: 22px 20px 28px !important;
    padding: 22px !important;
  }

  .klynic-operational-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 560px) {
  .klynic-operational-grid {
    grid-template-columns: 1fr !important;
  }

  .klynic-operational-head h3 {
    font-size: 24px !important;
  }
}

.klynic-operational-loading {
  border: 1px dashed #cbd9ec !important;
  background: linear-gradient(135deg, #f8fbff 0%, #ffffff 100%) !important;
  border-radius: 24px !important;
  padding: 30px !important;
  text-align: center !important;
}

.klynic-operational-loading strong {
  display: block !important;
  color: #0f172a !important;
  font-size: 18px !important;
  font-weight: 900 !important;
}

.klynic-operational-loading p {
  margin: 10px auto 0 !important;
  max-width: 620px !important;
  color: #64748b !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
}

.klynic-patient-budget-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
}

.klynic-patient-budget-card {
  border: 1px solid #dfe8f5 !important;
  background: #ffffff !important;
  border-radius: 24px !important;
  padding: 22px !important;
  box-shadow: 0 12px 34px rgba(15, 23, 42, .05) !important;
}

.klynic-patient-budget-main {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 18px !important;
}

.klynic-patient-budget-number {
  display: inline-flex !important;
  min-height: 28px !important;
  align-items: center !important;
  padding: 0 12px !important;
  border-radius: 999px !important;
  background: #eef5ff !important;
  color: #2563eb !important;
  font-size: 12px !important;
  font-weight: 900 !important;
}

.klynic-patient-budget-main h4 {
  margin: 12px 0 6px !important;
  color: #0f172a !important;
  font-size: 20px !important;
  font-weight: 900 !important;
}

.klynic-patient-budget-main p {
  margin: 0 !important;
  color: #64748b !important;
  font-size: 13px !important;
  font-weight: 700 !important;
}

.klynic-patient-budget-status {
  min-height: 34px !important;
  padding: 0 13px !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  align-items: center !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  white-space: nowrap !important;
}

.klynic-patient-budget-status-pending {
  background: #fff7ed !important;
  color: #c2410c !important;
}

.klynic-patient-budget-status-approved,
.klynic-patient-budget-status-converted {
  background: #ecfdf5 !important;
  color: #047857 !important;
}

.klynic-patient-budget-status-rejected,
.klynic-patient-budget-status-archived {
  background: #fef2f2 !important;
  color: #dc2626 !important;
}

.klynic-patient-budget-meta {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 12px !important;
  margin-top: 20px !important;
}

.klynic-patient-budget-meta article {
  background: #f8fafc !important;
  border: 1px solid #edf2f7 !important;
  border-radius: 18px !important;
  padding: 14px !important;
}

.klynic-patient-budget-meta span {
  display: block !important;
  color: #64748b !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  margin-bottom: 5px !important;
}

.klynic-patient-budget-meta strong {
  display: block !important;
  color: #0f172a !important;
  font-size: 14px !important;
  font-weight: 900 !important;
}

.klynic-patient-budget-actions {
  display: flex !important;
  justify-content: flex-end !important;
  margin-top: 18px !important;
}

.klynic-patient-budget-actions a,
.klynic-patient-budget-actions span {
  min-height: 40px !important;
  padding: 0 16px !important;
  border-radius: 14px !important;
  display: inline-flex !important;
  align-items: center !important;
  text-decoration: none !important;
  font-size: 13px !important;
  font-weight: 900 !important;
}

.klynic-patient-budget-actions a {
  background: #0f62fe !important;
  color: #ffffff !important;
}

.klynic-patient-budget-actions span {
  background: #f1f5f9 !important;
  color: #64748b !important;
}

@media (max-width: 760px) {
  .klynic-patient-budget-main {
    flex-direction: column !important;
  }

  .klynic-patient-budget-meta {
    grid-template-columns: 1fr !important;
  }

  .klynic-patient-budget-actions {
    justify-content: stretch !important;
  }

  .klynic-patient-budget-actions a,
  .klynic-patient-budget-actions span {
    width: 100% !important;
    justify-content: center !important;
  }
}

.klynic-patient-budget-actions {
  gap: 10px !important;
}

.klynic-patient-budget-detail-btn {
  min-height: 40px !important;
  padding: 0 16px !important;
  border-radius: 14px !important;
  border: 1px solid #bfd3ff !important;
  background: #ffffff !important;
  color: #0f62fe !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  cursor: pointer !important;
}

.klynic-patient-budget-detail-btn:disabled {
  opacity: .65 !important;
  cursor: wait !important;
}

.patient-budget-detail-modal {
  width: min(920px, calc(100vw - 32px)) !important;
  max-height: calc(100vh - 40px) !important;
  overflow: hidden !important;
  border-radius: 28px !important;
  background: #ffffff !important;
  box-shadow: 0 30px 90px rgba(15, 23, 42, .28) !important;
  display: flex !important;
  flex-direction: column !important;
}

.patient-budget-detail-head {
  padding: 28px 32px 16px !important;
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 20px !important;
}

.patient-budget-detail-head h2 {
  margin: 0 0 18px !important;
  color: #0f172a !important;
  font-size: 22px !important;
  font-weight: 900 !important;
}

.patient-budget-detail-head button {
  width: 38px !important;
  height: 38px !important;
  border: 0 !important;
  border-radius: 14px !important;
  background: #f8fafc !important;
  color: #64748b !important;
  font-size: 30px !important;
  line-height: 1 !important;
  cursor: pointer !important;
}

.patient-budget-detail-id {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
}

.patient-budget-detail-id strong {
  color: #0f3b70 !important;
  font-size: 15px !important;
  font-weight: 900 !important;
}

.patient-budget-detail-id small {
  color: #64748b !important;
  font-size: 13px !important;
  font-weight: 800 !important;
}

.patient-budget-detail-body {
  padding: 0 32px 22px !important;
  overflow-y: auto !important;
}

.patient-budget-detail-card {
  border: 1px solid #dfe8f5 !important;
  border-radius: 22px !important;
  background: #ffffff !important;
  overflow: hidden !important;
  margin-bottom: 18px !important;
}

.patient-budget-detail-card-title {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 22px 24px !important;
  background: linear-gradient(180deg, #f8fbff 0%, #ffffff 100%) !important;
  border-bottom: 1px solid #e5edf7 !important;
}

.patient-budget-detail-card-title span {
  width: 42px !important;
  height: 42px !important;
  border-radius: 16px !important;
  background: #eef5ff !important;
  color: #0f62fe !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-weight: 900 !important;
}

.patient-budget-detail-card-title h3 {
  margin: 0 !important;
  color: #0f172a !important;
  font-size: 18px !important;
  font-weight: 900 !important;
}

.patient-budget-detail-grid {
  display: grid !important;
  border-top: 0 !important;
}

.patient-budget-detail-grid-four {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

.patient-budget-detail-grid-two {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

.patient-budget-detail-grid div,
.patient-budget-financial-grid div {
  padding: 18px 22px !important;
  border-right: 1px solid #e5edf7 !important;
  border-bottom: 1px solid #e5edf7 !important;
}

.patient-budget-detail-grid div:nth-child(4n),
.patient-budget-detail-grid-two div:nth-child(2n) {
  border-right: 0 !important;
}

.patient-budget-detail-grid span,
.patient-budget-financial-grid span {
  display: block !important;
  color: #64748b !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  margin-bottom: 8px !important;
}

.patient-budget-detail-grid strong,
.patient-budget-financial-grid strong {
  display: block !important;
  color: #0f172a !important;
  font-size: 15px !important;
  font-weight: 900 !important;
  line-height: 1.35 !important;
}

.patient-budget-items-table {
  width: 100% !important;
}

.patient-budget-items-head,
.patient-budget-items-row {
  display: grid !important;
  grid-template-columns: 1.5fr .7fr 1fr 1fr 1fr !important;
  gap: 12px !important;
  align-items: center !important;
  padding: 18px 22px !important;
  border-bottom: 1px solid #e5edf7 !important;
}

.patient-budget-items-head {
  color: #64748b !important;
  font-size: 12px !important;
  font-weight: 900 !important;
}

.patient-budget-items-row strong {
  color: #0f172a !important;
  font-size: 14px !important;
  font-weight: 900 !important;
}

.patient-budget-items-row small {
  display: block !important;
  margin-top: 4px !important;
  color: #64748b !important;
  font-size: 12px !important;
  font-weight: 700 !important;
}

.patient-budget-items-empty {
  padding: 24px !important;
  color: #64748b !important;
  font-weight: 800 !important;
}

.patient-budget-financial-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

.patient-budget-total-final {
  padding: 22px 26px !important;
  background: #eaf3ff !important;
}

.patient-budget-total-final span {
  display: block !important;
  color: #0f62fe !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
}

.patient-budget-total-final strong {
  display: block !important;
  margin-top: 4px !important;
  color: #0f62fe !important;
  font-size: 34px !important;
  line-height: 1 !important;
  font-weight: 950 !important;
}

.patient-budget-detail-footer {
  padding: 18px 32px 26px !important;
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 14px !important;
  border-top: 1px solid #edf2f7 !important;
}

.patient-budget-detail-footer button,
.patient-budget-detail-footer a,
.patient-budget-detail-footer span {
  min-height: 52px !important;
  border-radius: 16px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-decoration: none !important;
  font-size: 15px !important;
  font-weight: 900 !important;
}

.patient-budget-detail-footer button {
  border: 1px solid #dbe6f4 !important;
  background: #ffffff !important;
  color: #0f172a !important;
  cursor: pointer !important;
}

.patient-budget-detail-footer a {
  background: #0f62fe !important;
  color: #ffffff !important;
}

.patient-budget-detail-footer span {
  background: #f1f5f9 !important;
  color: #64748b !important;
}

@media (max-width: 760px) {
  .klynic-patient-budget-actions {
    flex-direction: column !important;
  }

  .klynic-patient-budget-detail-btn {
    width: 100% !important;
  }

  .patient-budget-detail-head {
    padding: 24px 20px 14px !important;
  }

  .patient-budget-detail-body {
    padding: 0 20px 20px !important;
  }

  .patient-budget-detail-grid-four,
  .patient-budget-detail-grid-two,
  .patient-budget-financial-grid {
    grid-template-columns: 1fr !important;
  }

  .patient-budget-items-head {
    display: none !important;
  }

  .patient-budget-items-row {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  .patient-budget-detail-footer {
    grid-template-columns: 1fr !important;
    padding: 16px 20px 22px !important;
  }
}

#patientBudgetDetailBackdrop {
  position: fixed !important;
  inset: 0 !important;
  z-index: 9999999 !important;
  background: rgba(15, 23, 42, .46) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 20px !important;
}

#patientBudgetDetailBackdrop .patient-budget-detail-modal {
  position: relative !important;
  z-index: 10000000 !important;
}

#patientModal {
  z-index: 999900 !important;
}

.klynic-patient-treatment-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 18px !important;
}

.klynic-patient-treatment-card {
  border: 1px solid #dfe8f5 !important;
  background: #ffffff !important;
  border-radius: 26px !important;
  padding: 24px !important;
  box-shadow: 0 14px 38px rgba(15, 23, 42, .06) !important;
}

.klynic-patient-treatment-top {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 18px !important;
}

.klynic-patient-treatment-origin {
  display: inline-flex !important;
  min-height: 28px !important;
  align-items: center !important;
  padding: 0 12px !important;
  border-radius: 999px !important;
  background: #eef5ff !important;
  color: #2563eb !important;
  font-size: 12px !important;
  font-weight: 900 !important;
}

.klynic-patient-treatment-top h4 {
  margin: 12px 0 6px !important;
  color: #0f172a !important;
  font-size: 21px !important;
  font-weight: 950 !important;
}

.klynic-patient-treatment-top p {
  margin: 0 !important;
  color: #64748b !important;
  font-size: 13px !important;
  font-weight: 700 !important;
}

.klynic-patient-treatment-status {
  min-height: 34px !important;
  padding: 0 13px !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  align-items: center !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  white-space: nowrap !important;
}

.klynic-patient-treatment-status.is-pending {
  background: #fff7ed !important;
  color: #c2410c !important;
}

.klynic-patient-treatment-status.is-progress {
  background: #eff6ff !important;
  color: #2563eb !important;
}

.klynic-patient-treatment-status.is-completed {
  background: #ecfdf5 !important;
  color: #047857 !important;
}

.klynic-patient-treatment-progress {
  margin-top: 22px !important;
}

.klynic-patient-treatment-progress > div:first-child {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 10px !important;
}

.klynic-patient-treatment-progress span,
.klynic-patient-treatment-progress small {
  color: #64748b !important;
  font-size: 13px !important;
  font-weight: 800 !important;
}

.klynic-patient-treatment-progress strong {
  color: #0f172a !important;
  font-size: 16px !important;
  font-weight: 950 !important;
}

.klynic-patient-treatment-bar {
  height: 12px !important;
  border-radius: 999px !important;
  background: #e5edf7 !important;
  overflow: hidden !important;
}

.klynic-patient-treatment-bar b {
  display: block !important;
  height: 100% !important;
  border-radius: 999px !important;
  background: linear-gradient(90deg, #0f62fe, #38bdf8) !important;
}

.klynic-patient-treatment-money-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 12px !important;
  margin-top: 20px !important;
}

.klynic-patient-treatment-money-grid article {
  background: #f8fafc !important;
  border: 1px solid #edf2f7 !important;
  border-radius: 18px !important;
  padding: 16px !important;
}

.klynic-patient-treatment-money-grid span {
  display: block !important;
  color: #64748b !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  margin-bottom: 6px !important;
}

.klynic-patient-treatment-money-grid strong {
  display: block !important;
  color: #0f172a !important;
  font-size: 16px !important;
  font-weight: 950 !important;
}

.klynic-patient-treatment-actions {
  display: flex !important;
  justify-content: flex-end !important;
  margin-top: 20px !important;
}

.klynic-patient-treatment-detail-btn {
  min-height: 42px !important;
  padding: 0 18px !important;
  border-radius: 14px !important;
  border: 1px solid #bfd3ff !important;
  background: #ffffff !important;
  color: #0f62fe !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  cursor: pointer !important;
}

#patientTreatmentDetailBackdrop {
  position: fixed !important;
  inset: 0 !important;
  z-index: 9999999 !important;
  background: rgba(15, 23, 42, .46) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 20px !important;
}

.patient-treatment-detail-modal {
  width: min(880px, calc(100vw - 32px)) !important;
  max-height: calc(100vh - 40px) !important;
  overflow: hidden !important;
  border-radius: 28px !important;
  background: #ffffff !important;
  box-shadow: 0 30px 90px rgba(15, 23, 42, .28) !important;
  display: flex !important;
  flex-direction: column !important;
}

.patient-treatment-detail-head,
.patient-treatment-detail-footer {
  padding: 24px 30px !important;
}

.patient-treatment-detail-head {
  display: flex !important;
  justify-content: space-between !important;
  gap: 20px !important;
  border-bottom: 1px solid #edf2f7 !important;
}

.patient-treatment-detail-head span {
  color: #2563eb !important;
  font-size: 12px !important;
  font-weight: 900 !important;
}

.patient-treatment-detail-head h2 {
  margin: 8px 0 6px !important;
  color: #0f172a !important;
  font-size: 24px !important;
  font-weight: 950 !important;
}

.patient-treatment-detail-head p {
  margin: 0 !important;
  color: #64748b !important;
  font-size: 13px !important;
  font-weight: 800 !important;
}

.patient-treatment-detail-head button {
  width: 38px !important;
  height: 38px !important;
  border: 0 !important;
  border-radius: 14px !important;
  background: #f8fafc !important;
  color: #64748b !important;
  font-size: 30px !important;
  cursor: pointer !important;
}

.patient-treatment-detail-body {
  padding: 24px 30px !important;
  overflow-y: auto !important;
}

.patient-treatment-detail-card {
  border: 1px solid #dfe8f5 !important;
  border-radius: 22px !important;
  background: #ffffff !important;
  padding: 22px !important;
  margin-bottom: 18px !important;
}

.patient-treatment-detail-card h3 {
  margin: 0 0 18px !important;
  color: #0f172a !important;
  font-size: 18px !important;
  font-weight: 950 !important;
}

.patient-treatment-detail-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 12px !important;
}

.patient-treatment-detail-grid article,
.patient-treatment-item-row,
.patient-treatment-payment-row {
  background: #f8fafc !important;
  border: 1px solid #edf2f7 !important;
  border-radius: 18px !important;
  padding: 16px !important;
}

.patient-treatment-detail-grid span,
.patient-treatment-item-row span,
.patient-treatment-payment-row span,
.patient-treatment-payment-row em {
  color: #64748b !important;
  font-size: 12px !important;
  font-weight: 800 !important;
}

.patient-treatment-detail-grid strong,
.patient-treatment-item-row strong,
.patient-treatment-payment-row strong {
  display: block !important;
  color: #0f172a !important;
  font-size: 15px !important;
  font-weight: 950 !important;
}

.patient-treatment-detail-progress {
  height: 12px !important;
  margin-top: 18px !important;
  border-radius: 999px !important;
  background: #e5edf7 !important;
  overflow: hidden !important;
}

.patient-treatment-detail-progress b {
  display: block !important;
  height: 100% !important;
  border-radius: 999px !important;
  background: linear-gradient(90deg, #0f62fe, #38bdf8) !important;
}

.patient-treatment-items-list,
.patient-treatment-payments-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}

.patient-treatment-item-row,
.patient-treatment-payment-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
}

.patient-treatment-muted {
  margin: 0 !important;
  color: #64748b !important;
  font-size: 14px !important;
  font-weight: 700 !important;
}

.patient-treatment-detail-footer {
  border-top: 1px solid #edf2f7 !important;
}

.patient-treatment-detail-footer button {
  width: 100% !important;
  min-height: 52px !important;
  border-radius: 16px !important;
  border: 1px solid #dbe6f4 !important;
  background: #ffffff !important;
  color: #0f172a !important;
  font-size: 15px !important;
  font-weight: 900 !important;
  cursor: pointer !important;
}

@media (max-width: 760px) {
  .klynic-patient-treatment-top,
  .patient-treatment-item-row,
  .patient-treatment-payment-row {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .klynic-patient-treatment-money-grid,
  .patient-treatment-detail-grid {
    grid-template-columns: 1fr !important;
  }

  .klynic-patient-treatment-actions {
    justify-content: stretch !important;
  }

  .klynic-patient-treatment-detail-btn {
    width: 100% !important;
  }
}

.klynic-patient-payment-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
}

.klynic-patient-payment-card {
  border: 1px solid #dfe8f5 !important;
  background: #ffffff !important;
  border-radius: 24px !important;
  padding: 22px !important;
  box-shadow: 0 12px 34px rgba(15, 23, 42, .05) !important;
}

.klynic-patient-payment-top {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 18px !important;
}

.klynic-patient-payment-method {
  display: inline-flex !important;
  min-height: 28px !important;
  align-items: center !important;
  padding: 0 12px !important;
  border-radius: 999px !important;
  background: #ecfdf5 !important;
  color: #047857 !important;
  font-size: 12px !important;
  font-weight: 900 !important;
}

.klynic-patient-payment-top h4 {
  margin: 12px 0 6px !important;
  color: #0f172a !important;
  font-size: 24px !important;
  font-weight: 950 !important;
}

.klynic-patient-payment-top p {
  margin: 0 !important;
  color: #64748b !important;
  font-size: 13px !important;
  font-weight: 800 !important;
}

.klynic-patient-payment-top > strong {
  color: #64748b !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  background: #f8fafc !important;
  border: 1px solid #edf2f7 !important;
  border-radius: 14px !important;
  padding: 10px 12px !important;
}

.klynic-patient-payment-meta {
  display: grid !important;
  grid-template-columns: 1.4fr 1fr .6fr !important;
  gap: 12px !important;
  margin-top: 20px !important;
}

.klynic-patient-payment-meta article {
  background: #f8fafc !important;
  border: 1px solid #edf2f7 !important;
  border-radius: 18px !important;
  padding: 16px !important;
}

.klynic-patient-payment-meta span {
  display: block !important;
  color: #64748b !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  margin-bottom: 6px !important;
}

.klynic-patient-payment-meta strong {
  display: block !important;
  color: #0f172a !important;
  font-size: 14px !important;
  font-weight: 950 !important;
}

@media (max-width: 760px) {
  .klynic-patient-payment-top {
    flex-direction: column !important;
  }

  .klynic-patient-payment-meta {
    grid-template-columns: 1fr !important;
  }
}

.klynic-patient-payment-procedures {
  margin-top: 18px !important;
  padding-top: 18px !important;
  border-top: 1px solid #edf2f7 !important;
}

.klynic-patient-payment-procedures > span {
  display: block !important;
  margin-bottom: 10px !important;
  color: #64748b !important;
  font-size: 12px !important;
  font-weight: 900 !important;
}

.klynic-patient-payment-procedures > p {
  margin: 0 !important;
  color: #64748b !important;
  font-size: 13px !important;
  font-weight: 700 !important;
}

.klynic-patient-payment-procedure-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}

.klynic-patient-payment-procedure-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 14px !important;
  padding: 14px 16px !important;
  border-radius: 16px !important;
  background: #f8fafc !important;
  border: 1px solid #edf2f7 !important;
}

.klynic-patient-payment-procedure-row strong {
  display: block !important;
  color: #0f172a !important;
  font-size: 14px !important;
  font-weight: 950 !important;
}

.klynic-patient-payment-procedure-row span {
  display: block !important;
  margin-top: 4px !important;
  color: #64748b !important;
  font-size: 11px !important;
  font-weight: 800 !important;
}

.klynic-patient-payment-procedure-row b {
  color: #047857 !important;
  font-size: 15px !important;
  font-weight: 950 !important;
  white-space: nowrap !important;
}

@media (max-width: 760px) {
  .klynic-patient-payment-procedure-row {
    flex-direction: column !important;
    align-items: flex-start !important;
  }
}

.klynic-patient-appointment-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
}

.klynic-patient-appointment-card {
  border: 1px solid #dfe8f5 !important;
  background: #ffffff !important;
  border-radius: 24px !important;
  padding: 22px !important;
  box-shadow: 0 12px 34px rgba(15, 23, 42, .05) !important;
}

.klynic-patient-appointment-top {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 18px !important;
}

.klynic-patient-appointment-date {
  display: inline-flex !important;
  min-height: 28px !important;
  align-items: center !important;
  padding: 0 12px !important;
  border-radius: 999px !important;
  background: #eef5ff !important;
  color: #2563eb !important;
  font-size: 12px !important;
  font-weight: 900 !important;
}

.klynic-patient-appointment-top h4 {
  margin: 12px 0 6px !important;
  color: #0f172a !important;
  font-size: 21px !important;
  font-weight: 950 !important;
}

.klynic-patient-appointment-top p {
  margin: 0 !important;
  color: #64748b !important;
  font-size: 13px !important;
  font-weight: 800 !important;
}

.klynic-patient-appointment-status {
  min-height: 34px !important;
  padding: 0 13px !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  align-items: center !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  white-space: nowrap !important;
}

.klynic-patient-appointment-status.is-requested {
  background: #fff7ed !important;
  color: #c2410c !important;
}

.klynic-patient-appointment-status.is-reserved {
  background: #eff6ff !important;
  color: #2563eb !important;
}

.klynic-patient-appointment-status.is-completed {
  background: #ecfdf5 !important;
  color: #047857 !important;
}

.klynic-patient-appointment-status.is-noshow {
  background: #fef2f2 !important;
  color: #dc2626 !important;
}

.klynic-patient-appointment-status.is-cancelled {
  background: #f1f5f9 !important;
  color: #64748b !important;
}

.klynic-patient-appointment-meta {
  display: grid !important;
  grid-template-columns: .8fr .9fr 1.4fr !important;
  gap: 12px !important;
  margin-top: 20px !important;
}

.klynic-patient-appointment-meta article {
  background: #f8fafc !important;
  border: 1px solid #edf2f7 !important;
  border-radius: 18px !important;
  padding: 16px !important;
}

.klynic-patient-appointment-meta span,
.klynic-patient-appointment-notes span {
  display: block !important;
  color: #64748b !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  margin-bottom: 6px !important;
}

.klynic-patient-appointment-meta strong {
  display: block !important;
  color: #0f172a !important;
  font-size: 14px !important;
  font-weight: 950 !important;
}

.klynic-patient-appointment-notes {
  margin-top: 18px !important;
  padding-top: 18px !important;
  border-top: 1px solid #edf2f7 !important;
}

.klynic-patient-appointment-notes p {
  margin: 0 !important;
  color: #0f172a !important;
  font-size: 14px !important;
  line-height: 1.55 !important;
  font-weight: 700 !important;
}

@media (max-width: 760px) {
  .klynic-patient-appointment-top {
    flex-direction: column !important;
  }

  .klynic-patient-appointment-meta {
    grid-template-columns: 1fr !important;
  }
}

.patient-clinical-timeline-summary {
  display: grid !important;
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  gap: 12px !important;
  margin-bottom: 28px !important;
}

.patient-clinical-timeline-summary article {
  border: 1px solid #dfe8f5 !important;
  background: linear-gradient(135deg, #f8fbff 0%, #ffffff 100%) !important;
  border-radius: 20px !important;
  padding: 18px !important;
}

.patient-clinical-timeline-summary strong {
  display: block !important;
  color: #0f172a !important;
  font-size: 28px !important;
  line-height: 1 !important;
  font-weight: 950 !important;
}

.patient-clinical-timeline-summary span {
  display: block !important;
  margin-top: 8px !important;
  color: #64748b !important;
  font-size: 12px !important;
  font-weight: 900 !important;
}

.patient-clinical-timeline {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 22px !important;
  padding-left: 34px !important;
}

.patient-clinical-timeline::before {
  content: "" !important;
  position: absolute !important;
  left: 16px !important;
  top: 10px !important;
  bottom: 10px !important;
  width: 2px !important;
  border-radius: 999px !important;
  background: linear-gradient(180deg, #0f62fe, #dbeafe) !important;
}

.patient-clinical-timeline-item {
  position: relative !important;
  display: grid !important;
  grid-template-columns: 38px minmax(0, 1fr) !important;
  gap: 14px !important;
  margin-left: -34px !important;
}

.patient-clinical-timeline-marker {
  width: 34px !important;
  height: 34px !important;
  border-radius: 14px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 15px !important;
  font-weight: 950 !important;
  background: #ffffff !important;
  border: 2px solid #dbeafe !important;
  box-shadow: 0 10px 26px rgba(15, 23, 42, .08) !important;
  z-index: 2 !important;
}

.patient-clinical-timeline-blue .patient-clinical-timeline-marker {
  color: #2563eb !important;
  border-color: #bfdbfe !important;
  background: #eff6ff !important;
}

.patient-clinical-timeline-green .patient-clinical-timeline-marker {
  color: #047857 !important;
  border-color: #bbf7d0 !important;
  background: #ecfdf5 !important;
}

.patient-clinical-timeline-orange .patient-clinical-timeline-marker {
  color: #c2410c !important;
  border-color: #fed7aa !important;
  background: #fff7ed !important;
}

.patient-clinical-timeline-red .patient-clinical-timeline-marker {
  color: #dc2626 !important;
  border-color: #fecaca !important;
  background: #fef2f2 !important;
}

.patient-clinical-timeline-card {
  border: 1px solid #dfe8f5 !important;
  background: #ffffff !important;
  border-radius: 24px !important;
  padding: 22px !important;
  box-shadow: 0 14px 38px rgba(15, 23, 42, .06) !important;
}

.patient-clinical-timeline-card-head {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 18px !important;
}

.patient-clinical-timeline-card-head span {
  display: inline-flex !important;
  min-height: 28px !important;
  align-items: center !important;
  padding: 0 12px !important;
  border-radius: 999px !important;
  background: #eef5ff !important;
  color: #2563eb !important;
  font-size: 12px !important;
  font-weight: 900 !important;
}

.patient-clinical-timeline-card-head h4 {
  margin: 12px 0 5px !important;
  color: #0f172a !important;
  font-size: 19px !important;
  font-weight: 950 !important;
}

.patient-clinical-timeline-card-head p {
  margin: 0 !important;
  color: #64748b !important;
  font-size: 13px !important;
  font-weight: 800 !important;
}

.patient-clinical-timeline-card-head > strong {
  color: #0f172a !important;
  font-size: 18px !important;
  font-weight: 950 !important;
  white-space: nowrap !important;
}

.patient-clinical-timeline-description {
  margin: 16px 0 0 !important;
  color: #334155 !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
  font-weight: 700 !important;
}

.patient-clinical-timeline-meta {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin-top: 16px !important;
}

.patient-clinical-timeline-meta span {
  min-height: 30px !important;
  padding: 0 12px !important;
  border-radius: 999px !important;
  background: #f8fafc !important;
  border: 1px solid #edf2f7 !important;
  color: #64748b !important;
  display: inline-flex !important;
  align-items: center !important;
  font-size: 12px !important;
  font-weight: 900 !important;
}

@media (max-width: 900px) {
  .patient-clinical-timeline-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 560px) {
  .patient-clinical-timeline-summary {
    grid-template-columns: 1fr !important;
  }

  .patient-clinical-timeline-card-head {
    flex-direction: column !important;
  }
}

.patient-evolutions-summary {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 14px !important;
  margin-bottom: 24px !important;
}

.patient-evolutions-summary article {
  border: 1px solid #dfe8f5 !important;
  background: linear-gradient(135deg, #f8fbff 0%, #ffffff 100%) !important;
  border-radius: 22px !important;
  padding: 20px !important;
}

.patient-evolutions-summary strong {
  display: block !important;
  color: #0f172a !important;
  font-size: 30px !important;
  font-weight: 950 !important;
}

.patient-evolutions-summary span {
  display: block !important;
  margin-top: 8px !important;
  color: #64748b !important;
  font-size: 12px !important;
  font-weight: 900 !important;
}

.patient-evolutions-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
}

.patient-evolution-card,
.patient-evolution-form-box {
  border: 1px solid #dfe8f5 !important;
  background: #ffffff !important;
  border-radius: 24px !important;
  padding: 22px !important;
  box-shadow: 0 14px 38px rgba(15, 23, 42, .06) !important;
}

.patient-evolution-form-box {
  margin-bottom: 24px !important;
  background: linear-gradient(135deg, #f8fbff 0%, #ffffff 100%) !important;
}

.patient-evolution-form-box.hidden {
  display: none !important;
}

.patient-evolution-card-head {
  display: flex !important;
  justify-content: space-between !important;
  gap: 18px !important;
}

.patient-evolution-card-head span {
  display: inline-flex !important;
  min-height: 28px !important;
  align-items: center !important;
  padding: 0 12px !important;
  border-radius: 999px !important;
  background: #eef5ff !important;
  color: #2563eb !important;
  font-size: 12px !important;
  font-weight: 900 !important;
}

.patient-evolution-card-head h4 {
  margin: 12px 0 6px !important;
  color: #0f172a !important;
  font-size: 20px !important;
  font-weight: 950 !important;
}

.patient-evolution-card-head p,
.patient-evolution-footer span {
  color: #64748b !important;
  font-size: 12px !important;
  font-weight: 800 !important;
}

.patient-evolution-card-head > strong {
  color: #0f172a !important;
  font-size: 14px !important;
  font-weight: 950 !important;
  text-align: right !important;
}

.patient-evolution-note {
  margin: 18px 0 0 !important;
  color: #334155 !important;
  font-size: 14px !important;
  line-height: 1.65 !important;
  font-weight: 700 !important;
}

.patient-evolution-procedure {
  margin-top: 16px !important;
  display: inline-flex !important;
  min-height: 30px !important;
  align-items: center !important;
  padding: 0 12px !important;
  border-radius: 999px !important;
  background: #f8fafc !important;
  border: 1px solid #edf2f7 !important;
  color: #64748b !important;
  font-size: 12px !important;
  font-weight: 900 !important;
}

.patient-evolution-next {
  margin-top: 18px !important;
  padding: 16px !important;
  border-radius: 18px !important;
  background: #f8fafc !important;
  border: 1px solid #edf2f7 !important;
}

.patient-evolution-next strong {
  display: block !important;
  margin-bottom: 6px !important;
  color: #0f172a !important;
  font-size: 13px !important;
  font-weight: 950 !important;
}

.patient-evolution-next span {
  color: #334155 !important;
  font-size: 14px !important;
  font-weight: 700 !important;
}

.patient-evolution-footer {
  display: flex !important;
  justify-content: space-between !important;
  gap: 12px !important;
  margin-top: 18px !important;
  padding-top: 16px !important;
  border-top: 1px solid #edf2f7 !important;
}

.patient-evolution-form-grid {
  display: grid !important;
  grid-template-columns: 1.2fr 1fr 1.2fr !important;
  gap: 14px !important;
}

.patient-evolution-form label {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}

.patient-evolution-form span {
  color: #475569 !important;
  font-size: 12px !important;
  font-weight: 900 !important;
}

.patient-evolution-form input,
.patient-evolution-form select,
.patient-evolution-form textarea {
  width: 100% !important;
  border: 1px solid #dbe6f4 !important;
  border-radius: 16px !important;
  background: #ffffff !important;
  color: #0f172a !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  padding: 14px !important;
  outline: none !important;
}

.patient-evolution-form-full {
  margin-top: 14px !important;
}

.patient-evolution-form footer {
  display: flex !important;
  justify-content: flex-end !important;
  gap: 12px !important;
  margin-top: 18px !important;
}

@media (max-width: 760px) {
  .patient-evolutions-summary,
  .patient-evolution-form-grid {
    grid-template-columns: 1fr !important;
  }

  .patient-evolution-card-head,
  .patient-evolution-footer {
    flex-direction: column !important;
  }
}

 .klynic-clinical-shell-horizontal {
  display: block !important;
  padding: 0 !important;
  background: #f8fafc !important;
}

.klynic-clinical-top-tabs {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 18px 24px 0 !important;
  overflow-x: auto !important;
  border-bottom: 1px solid #e5edf7 !important;
  background: #ffffff !important;
}

.klynic-clinical-top-tabs .klynic-clinical-tab {
  width: auto !important;
  min-height: 44px !important;
  padding: 0 16px !important;
  border: 0 !important;
  border-bottom: 3px solid transparent !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #64748b !important;
  box-shadow: none !important;
  font-size: 14px !important;
  font-weight: 900 !important;
  white-space: nowrap !important;
  transform: none !important;
}

.klynic-clinical-top-tabs .klynic-clinical-tab:hover {
  background: #f8fbff !important;
  color: #0f62fe !important;
  box-shadow: none !important;
  transform: none !important;
}

.klynic-clinical-top-tabs .klynic-clinical-tab.is-active {
  background: #f8fbff !important;
  color: #0f62fe !important;
  border-bottom-color: #0f62fe !important;
  box-shadow: none !important;
}

.klynic-clinical-content {
  padding: 26px 24px 30px !important;
}

.klynic-clinical-panel {
  min-height: 560px !important;
}

@media (max-width: 760px) {
  .klynic-clinical-top-tabs {
    padding: 14px 16px 0 !important;
  }

  .klynic-clinical-content {
    padding: 18px 16px 24px !important;
  }
}

.patient-evolution-editor {
  margin-top: 16px !important;
  border: 1px solid #dbe6f4 !important;
  border-radius: 20px !important;
  background: #ffffff !important;
  overflow: hidden !important;
}

.patient-evolution-editor-toolbar {
  min-height: 46px !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 8px 10px !important;
  border-bottom: 1px solid #e5edf7 !important;
  background: #f8fafc !important;
}

.patient-evolution-editor-toolbar button {
  min-height: 32px !important;
  padding: 0 10px !important;
  border: 0 !important;
  border-radius: 10px !important;
  background: transparent !important;
  color: #334155 !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  cursor: pointer !important;
}

.patient-evolution-editor-toolbar button:hover {
  background: #eef5ff !important;
  color: #0f62fe !important;
}

.patient-evolution-rich-editor {
  min-height: 220px !important;
  padding: 18px !important;
  outline: none !important;
  color: #0f172a !important;
  font-size: 15px !important;
  line-height: 1.65 !important;
  font-weight: 650 !important;
}

.patient-evolution-rich-editor:empty::before {
  content: attr(data-placeholder) !important;
  color: #94a3b8 !important;
  font-weight: 700 !important;
}

.patient-evolution-extra-tabs {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin-top: 20px !important;
  border-bottom: 1px solid #e5edf7 !important;
  overflow-x: auto !important;
}

.patient-evolution-extra-tabs button {
  min-height: 44px !important;
  padding: 0 14px !important;
  border: 0 !important;
  border-bottom: 3px solid transparent !important;
  background: transparent !important;
  color: #64748b !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  white-space: nowrap !important;
  cursor: pointer !important;
}

.patient-evolution-extra-tabs button.is-active {
  color: #0f62fe !important;
  border-bottom-color: #0f62fe !important;
  background: #f8fbff !important;
}

.patient-evolution-extra-panel {
  padding: 18px !important;
  border: 1px solid #e5edf7 !important;
  border-top: 0 !important;
  border-radius: 0 0 20px 20px !important;
  background: #ffffff !important;
}

.patient-evolution-extra-panel.hidden {
  display: none !important;
}

.patient-evolution-extra-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 14px !important;
}

@media (max-width: 760px) {
  .patient-evolution-extra-grid {
    grid-template-columns: 1fr !important;
  }

  .patient-evolution-rich-editor {
    min-height: 180px !important;
  }
}

.patient-evolution-head-actions {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

.klynic-clinical-secondary {
  border: 1px solid #dbe6f4 !important;
  border-radius: 16px !important;
  background: #f8fafc !important;
  color: #0f172a !important;
  min-height: 46px !important;
  padding: 0 18px !important;
  font-weight: 900 !important;
  cursor: pointer !important;
}

.klynic-clinical-secondary:hover {
  background: #eef5ff !important;
  border-color: #bfd3ff !important;
  color: #0f62fe !important;
}

.klynic-clinical-secondary:disabled {
  opacity: .65 !important;
  cursor: wait !important;
}

@media (max-width: 760px) {
  .patient-evolution-head-actions {
    width: 100% !important;
    flex-direction: column !important;
    align-items: stretch !important;
  }
}

.patient-timeline-filters {
  display: grid !important;
  grid-template-columns: 160px 220px 260px !important;
  gap: 14px !important;
  margin: 0 0 26px !important;
  align-items: end !important;
}

.patient-timeline-filters label {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}

.patient-timeline-filters span {
  color: #64748b !important;
  font-size: 12px !important;
  font-weight: 900 !important;
}

.patient-timeline-filters select {
  height: 48px !important;
  border-radius: 16px !important;
  border: 1px solid #dbe6f4 !important;
  background: #ffffff !important;
  color: #0f172a !important;
  padding: 0 16px !important;
  font-size: 14px !important;
  font-weight: 850 !important;
  outline: none !important;
  box-shadow: 0 10px 26px rgba(15, 23, 42, .04) !important;
}

.patient-timeline-filters select:focus {
  border-color: #0f62fe !important;
  box-shadow: 0 0 0 4px rgba(15, 98, 254, .10) !important;
}

@media (max-width: 760px) {
  .patient-timeline-filters {
    grid-template-columns: 1fr !important;
  }
}

.patient-anamnesis-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 18px !important;
}

.patient-anamnesis-card {
  border: 1px solid #dfe8f5 !important;
  background: #ffffff !important;
  border-radius: 24px !important;
  padding: 22px !important;
  box-shadow: 0 14px 38px rgba(15, 23, 42, .05) !important;
}

.patient-anamnesis-card-full {
  grid-column: 1 / -1 !important;
}

.patient-anamnesis-card-head {
  display: flex !important;
  justify-content: space-between !important;
  gap: 14px !important;
  margin-bottom: 16px !important;
}

.patient-anamnesis-card-head h4 {
  margin: 0 !important;
  color: #0f172a !important;
  font-size: 17px !important;
  font-weight: 950 !important;
}

.patient-anamnesis-card-head span {
  display: block !important;
  margin-top: 4px !important;
  color: #64748b !important;
  font-size: 12px !important;
  font-weight: 800 !important;
}

.patient-anamnesis-options {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin-bottom: 16px !important;
}

.patient-anamnesis-chip {
  min-height: 34px !important;
  border: 1px solid #dbe6f4 !important;
  border-radius: 999px !important;
  background: #f8fafc !important;
  color: #64748b !important;
  padding: 0 13px !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  cursor: pointer !important;
}

.patient-anamnesis-chip.is-selected {
  background: #eef5ff !important;
  border-color: #0f62fe !important;
  color: #0f62fe !important;
}

.patient-anamnesis-add {
  display: flex !important;
  gap: 10px !important;
  margin-bottom: 14px !important;
}

.patient-anamnesis-add input,
.patient-anamnesis-card textarea {
  width: 100% !important;
  border: 1px solid #dbe6f4 !important;
  border-radius: 16px !important;
  background: #ffffff !important;
  color: #0f172a !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  padding: 13px 14px !important;
  outline: none !important;
}

.patient-anamnesis-add button {
  border: 0 !important;
  border-radius: 16px !important;
  background: #0f62fe !important;
  color: #ffffff !important;
  padding: 0 16px !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  cursor: pointer !important;
}

.patient-anamnesis-card textarea {
  min-height: 86px !important;
  resize: vertical !important;
}

@media (max-width: 760px) {
  .patient-anamnesis-grid {
    grid-template-columns: 1fr !important;
  }

  .patient-anamnesis-add {
    flex-direction: column !important;
  }
}

.patient-anamnesis-selector-box {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  margin-top: 14px !important;
}

.patient-anamnesis-select {
  width: 100% !important;
  height: 46px !important;
  border: 1px solid #dbe7f6 !important;
  border-radius: 16px !important;
  padding: 0 14px !important;
  background: #ffffff !important;
  color: #17223b !important;
  font-size: 14px !important;
  font-weight: 700 !important;
}

.patient-anamnesis-selected-list {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin-top: 14px !important;
  margin-bottom: 14px !important;
  min-height: 32px !important;
}

.patient-anamnesis-selected-item {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  min-height: 34px !important;
  padding: 0 10px 0 14px !important;
  border-radius: 999px !important;
  background: #eef5ff !important;
  border: 1px solid #cfe0ff !important;
  color: #31527a !important;
  font-size: 13px !important;
  font-weight: 800 !important;
}

.patient-anamnesis-selected-item button {
  width: 20px !important;
  height: 20px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: #ffffff !important;
  color: #64748b !important;
  cursor: pointer !important;
  font-weight: 900 !important;
}

.patient-anamnesis-empty-selected {
  color: #94a3b8 !important;
  font-size: 13px !important;
  font-weight: 700 !important;
}

.patient-anamnesis-add.hidden {
  display: none !important;
}

.klynic-prescriptions-layout {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 22px !important;
  margin-top: 24px !important;
}

.klynic-prescription-editor,
.klynic-prescription-history {
  background: #ffffff !important;
  border: 1px solid #dbe7f6 !important;
  border-radius: 26px !important;
  padding: 24px !important;
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.04) !important;
}

.klynic-prescription-card-head h4 {
  margin: 0 0 6px !important;
  font-size: 20px !important;
  font-weight: 900 !important;
  color: #0f172a !important;
}

.klynic-prescription-card-head p {
  margin: 0 0 20px !important;
  font-size: 14px !important;
  color: #52637a !important;
  line-height: 1.45 !important;
}

.klynic-prescription-field {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  margin-bottom: 16px !important;
}

.klynic-prescription-field span {
  font-size: 13px !important;
  font-weight: 800 !important;
  color: #334155 !important;
}

.klynic-prescription-field input,
.klynic-prescription-field textarea {
  width: 100% !important;
  border: 1px solid #dbe7f6 !important;
  border-radius: 16px !important;
  background: #ffffff !important;
  padding: 13px 14px !important;
  font-size: 14px !important;
  color: #0f172a !important;
  outline: none !important;
  box-sizing: border-box !important;
}

.klynic-prescription-field textarea {
  min-height: 110px !important;
  resize: vertical !important;
}

.klynic-prescription-medicine-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 14px !important;
}

.klynic-prescription-medicine-list {
  margin-top: 18px !important;
}

.klynic-prescription-empty,
.klynic-prescription-empty-state {
  border: 1px dashed #cfe0ff !important;
  border-radius: 20px !important;
  background: #f8fbff !important;
  padding: 22px !important;
  color: #64748b !important;
  font-weight: 700 !important;
}

.klynic-prescription-empty-state strong {
  display: block !important;
  margin-bottom: 6px !important;
  color: #0f172a !important;
  font-size: 16px !important;
}

.klynic-prescription-empty-state p {
  margin: 0 !important;
  color: #64748b !important;
}

@media (max-width: 900px) {
  .klynic-prescriptions-layout {
    grid-template-columns: 1fr !important;
  }

  .klynic-prescription-medicine-grid {
    grid-template-columns: 1fr !important;
  }
}

.klynic-prescription-history-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
}

.klynic-prescription-history-card {
  border: 1px solid #dbe7f6 !important;
  border-radius: 18px !important;
  background: #f8fbff !important;
  padding: 16px !important;
}

.klynic-prescription-history-card div {
  display: flex !important;
  justify-content: space-between !important;
  gap: 12px !important;
  margin-bottom: 8px !important;
}

.klynic-prescription-history-card strong {
  font-size: 15px !important;
  font-weight: 900 !important;
  color: #0f172a !important;
}

.klynic-prescription-history-card span,
.klynic-prescription-history-card small {
  display: block !important;
  color: #64748b !important;
  font-size: 13px !important;
  font-weight: 700 !important;
}

.klynic-prescription-history-card p {
  margin: 0 0 8px !important;
  color: #334155 !important;
  font-size: 14px !important;
  font-weight: 700 !important;
}

.patient-rx-layout {
  display: grid !important;
  grid-template-columns: 360px 1fr !important;
  gap: 22px !important;
  margin-top: 24px !important;
}

.patient-rx-upload-card,
.patient-rx-list-card {
  background: #ffffff !important;
  border: 1px solid #dbe7f6 !important;
  border-radius: 26px !important;
  padding: 24px !important;
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.04) !important;
}

.patient-rx-upload-icon {
  width: 58px !important;
  height: 58px !important;
  border-radius: 20px !important;
  background: #eef5ff !important;
  color: #2563eb !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-bottom: 16px !important;
}

.patient-rx-upload-icon svg,
.patient-rx-file-icon svg {
  width: 26px !important;
  height: 26px !important;
  stroke: currentColor !important;
  fill: none !important;
  stroke-width: 2 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

.patient-rx-upload-card h4,
.patient-rx-list-head h4 {
  margin: 0 0 6px !important;
  font-size: 20px !important;
  font-weight: 900 !important;
  color: #0f172a !important;
}

.patient-rx-upload-card p,
.patient-rx-list-head p {
  margin: 0 0 18px !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  color: #64748b !important;
}

.patient-rx-file-picker {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 54px !important;
  border-radius: 18px !important;
  border: 1px dashed #bfd3ff !important;
  background: #f8fbff !important;
  cursor: pointer !important;
  margin-bottom: 14px !important;
}

.patient-rx-file-picker input {
  display: none !important;
}

.patient-rx-file-picker span {
  font-size: 14px !important;
  font-weight: 900 !important;
  color: #2563eb !important;
}

.patient-rx-selected-file {
  border: 1px solid #dbe7f6 !important;
  border-radius: 18px !important;
  padding: 14px !important;
  background: #ffffff !important;
  margin-bottom: 14px !important;
}

.patient-rx-selected-file strong {
  display: block !important;
  font-size: 14px !important;
  font-weight: 900 !important;
  color: #0f172a !important;
  word-break: break-word !important;
}

.patient-rx-selected-file span {
  display: block !important;
  margin-top: 4px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #64748b !important;
}

.patient-rx-list-head {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 18px !important;
  margin-bottom: 18px !important;
}

.patient-rx-filters {
  display: flex !important;
  gap: 10px !important;
}

.patient-rx-filters input {
  height: 42px !important;
  border: 1px solid #dbe7f6 !important;
  border-radius: 14px !important;
  padding: 0 12px !important;
  font-weight: 800 !important;
  color: #0f172a !important;
}

.patient-rx-files-grid {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}

.patient-rx-file-card {
  display: grid !important;
  grid-template-columns: 52px 1fr auto !important;
  align-items: center !important;
  gap: 14px !important;
  border: 1px solid #e2eaf7 !important;
  border-radius: 20px !important;
  padding: 14px !important;
  background: #f8fbff !important;
}

.patient-rx-file-icon {
  width: 52px !important;
  height: 52px !important;
  border-radius: 18px !important;
  background: #eef5ff !important;
  color: #2563eb !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.patient-rx-file-main strong {
  display: block !important;
  font-size: 15px !important;
  font-weight: 900 !important;
  color: #0f172a !important;
  word-break: break-word !important;
}

.patient-rx-file-main span,
.patient-rx-file-main small {
  display: block !important;
  margin-top: 3px !important;
  color: #64748b !important;
  font-size: 13px !important;
  font-weight: 700 !important;
}

@media (max-width: 900px) {
  .patient-rx-layout {
    grid-template-columns: 1fr !important;
  }

  .patient-rx-list-head,
  .patient-rx-filters {
    flex-direction: column !important;
    width: 100% !important;
  }

  .patient-rx-filters input {
    width: 100% !important;
  }

  .patient-rx-file-card {
    grid-template-columns: 52px 1fr !important;
  }

  .patient-rx-file-card button {
    grid-column: 1 / -1 !important;
    width: 100% !important;
  }
}


.kly-odontogram-premium {
  display: block;
  width: 100%;
}

.kly-odontogram-main-card {
  width: 100%;
  padding: 0 !important;
  overflow: visible !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.kly-odontogram-side-card {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.kly-odontogram-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 20px;
}

.kly-odontogram-kicker {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 12px;
  border-radius: 999px;
  background: #eef4ff;
  color: #2563eb;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .02em;
}

.kly-odontogram-head h3 {
  margin: 10px 0 6px;
  font-size: 26px;
  line-height: 1.1;
  color: #0f172a;
  letter-spacing: -.03em;
}

.kly-odontogram-head p {
  display: none;
}

.kly-odontogram-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.kly-odontogram-action {
  min-height: 42px;
  padding: 0 16px;
  border-radius: 14px;
  border: 1px solid #dbe7f6;
  background: #ffffff;
  color: #2563eb;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(37, 99, 235, .08);
}

.kly-odontogram-action.primary {
  border-color: #2563eb;
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  color: #ffffff;
}

.kly-odontogram-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 12px;
  margin-bottom: 24px;
  border-radius: 20px;
  background: #f6f9fe;
  border: 1px solid #e7eef9;
}

.kly-odontogram-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  background: #ffffff;
  color: #334155;
  font-size: 12px;
  font-weight: 800;
  border: 1px solid #e4ebf6;
}

.kly-odontogram-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  box-shadow: 0 0 0 4px rgba(148, 163, 184, .12);
}

.kly-odontogram-dot.sano { background: #22c55e; }
.kly-odontogram-dot.caries { background: #f59e0b; }
.kly-odontogram-dot.restauracion { background: #3b82f6; }
.kly-odontogram-dot.endodoncia { background: #8b5cf6; }
.kly-odontogram-dot.corona { background: #a855f7; }
.kly-odontogram-dot.implante { background: #0f9f9a; }
.kly-odontogram-dot.ausente { background: #cbd5e1; }

.kly-odontogram-arch-label {
  margin: 18px 0 12px;
  text-align: center;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .08em;
  color: #475569;
  text-transform: uppercase;
}

.kly-odontogram-row {
  display: flex;
  justify-content: center;
  gap: 8px;
  align-items: end;
  width: 100%;
  overflow: visible;
  flex-wrap: nowrap;
}

.kly-tooth-btn {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.kly-tooth-number {
  color: #0f172a;
  font-size: 12px;
  font-weight: 900;
}

.kly-tooth-svg-wrap {
  width: 100%;
  max-width: 42px;
  height: 70px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    transform .18s ease,
    box-shadow .18s ease,
    background .18s ease;
}

.kly-tooth-btn:hover .kly-tooth-svg-wrap {
  transform: translateY(-4px) scale(1.04);
  background: #f3f8ff;
  box-shadow: 0 14px 30px rgba(37, 99, 235, .12);
}

.kly-tooth-btn.is-selected .kly-tooth-svg-wrap {
  background: #eff6ff;
  box-shadow:
    0 0 0 2px #2563eb,
    0 18px 36px rgba(37, 99, 235, .16);
}

.kly-tooth-svg {
  width: 38px;
  height: 66px;
  overflow: visible;
  filter: drop-shadow(0 12px 12px rgba(15, 23, 42, .12));
}

.kly-tooth-body {
  fill: url(#klyToothEnamel);
  stroke: #d5cfc7;
  stroke-width: 2;
}

.kly-tooth-root {
  fill: url(#klyToothRoot);
  stroke: #d2cbc2;
  stroke-width: 2;
}

.kly-tooth-shine {
  fill: rgba(255,255,255,.68);
}

.kly-tooth-status {
  fill: transparent;
  stroke: transparent;
  stroke-width: 0;
}

.kly-tooth-btn[data-status="caries"] .kly-tooth-status {
  fill: rgba(245, 158, 11, .78);
  stroke: rgba(180, 83, 9, .75);
  stroke-width: 1.5;
}

.kly-tooth-btn[data-status="restauracion"] .kly-tooth-status {
  fill: rgba(59, 130, 246, .72);
  stroke: rgba(29, 78, 216, .72);
  stroke-width: 1.5;
}

.kly-tooth-btn[data-status="endodoncia"] .kly-tooth-status {
  fill: rgba(139, 92, 246, .32);
  stroke: rgba(124, 58, 237, .75);
  stroke-width: 2;
}

.kly-tooth-btn[data-status="corona"] .kly-tooth-crown {
  fill: url(#klyToothCrownPurple);
  stroke: rgba(126, 34, 206, .72);
  stroke-width: 2;
}

.kly-tooth-btn[data-status="implante"] .kly-tooth-root,
.kly-tooth-btn[data-status="implante"] .kly-tooth-body {
  opacity: .18;
  stroke-dasharray: 4 4;
}

.kly-tooth-implant {
  display: none;
  fill: url(#klyImplant);
  stroke: #0f766e;
  stroke-width: 2;
}

.kly-tooth-btn[data-status="implante"] .kly-tooth-implant {
  display: block;
}

.kly-tooth-btn[data-status="ausente"] .kly-tooth-svg {
  opacity: .42;
  filter: none;
}

.kly-tooth-btn[data-status="sano"] .kly-tooth-status {
  fill: rgba(34, 197, 94, .28);
  stroke: rgba(22, 163, 74, .65);
  stroke-width: 1.5;
}

.kly-odontogram-separator {
  height: 1px;
  margin: 26px 0;
  background: linear-gradient(90deg, transparent, #dbe5f2, transparent);
}

.kly-surface-section {
  margin-top: 28px;
  padding-top: 22px;
  border-top: 1px solid #e7edf7;
}

.kly-surface-title {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.kly-surface-title h4 {
  margin: 0;
  color: #0f172a;
  font-size: 18px;
  letter-spacing: -.02em;
}

.kly-surface-title p {
  margin: 4px 0 0;
  color: #64748b;
  font-size: 13px;
}

.kly-surface-grid {
  display: grid;
  grid-template-columns: 160px repeat(5, minmax(90px, 1fr));
  gap: 14px;
  align-items: center;
}

.kly-surface-map-card {
  border: 1px solid #bfdbfe;
  background: #f8fbff;
  border-radius: 22px;
  min-height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.7);
}

.kly-surface-map {
  width: 118px;
  height: 118px;
  filter: drop-shadow(0 14px 20px rgba(15, 23, 42, .12));
}

.kly-surface-part {
  fill: #ffffff;
  stroke: #d6dee9;
  stroke-width: 1.6;
  cursor: pointer;
  transition:
    fill .16s ease,
    stroke .16s ease,
    stroke-width .16s ease;
  transform-origin: center;
}

.kly-surface-part:hover {
  fill: rgba(37, 99, 235, .08);
}

.kly-surface-part.is-selected:not([data-status]),
.kly-surface-part.is-selected[data-status=""] {
  fill: rgba(37, 99, 235, .12);
  stroke: #2563eb;
  stroke-width: 2;
}

.kly-surface-part[data-status="caries"] {
  fill: #f59e0b;
  stroke: #d6dee9;
  stroke-width: 1.6;
}

.kly-surface-part.is-selected[data-status="caries"] {
  fill: #f59e0b;
  stroke: #2563eb;
  stroke-width: 2;
}

.kly-surface-part[data-status="restauracion"] {
  fill: #3b82f6;
  stroke: #d6dee9;
  stroke-width: 1.6;
}

.kly-surface-part.is-selected[data-status="restauracion"] {
  fill: #3b82f6;
  stroke: #2563eb;
  stroke-width: 2;
}

.kly-surface-part[data-status="endodoncia"] {
  fill: #8b5cf6;
  stroke: #d6dee9;
  stroke-width: 1.6;
}

.kly-surface-part.is-selected[data-status="endodoncia"] {
  fill: #8b5cf6;
  stroke: #2563eb;
  stroke-width: 2;
}

.kly-surface-part[data-status="corona"] {
  fill: #a855f7;
  stroke: #d6dee9;
  stroke-width: 1.6;
}

.kly-surface-part.is-selected[data-status="corona"] {
  fill: #a855f7;
  stroke: #2563eb;
  stroke-width: 2;
}

.kly-surface-part[data-status="implante"] {
  fill: #0f9f9a;
  stroke: #d6dee9;
  stroke-width: 1.6;
}

.kly-surface-part.is-selected[data-status="implante"] {
  fill: #0f9f9a;
  stroke: #2563eb;
  stroke-width: 2;
}

.kly-surface-part[data-status="ausente"] {
  fill: #cbd5e1;
  stroke: #d6dee9;
  stroke-width: 1.6;
}

.kly-surface-part.is-selected[data-status="ausente"] {
  fill: #cbd5e1;
  stroke: #2563eb;
  stroke-width: 2;
}

.kly-surface-part[data-status="sano"] {
  fill: rgba(34, 197, 94, .26);
  stroke: #d6dee9;
  stroke-width: 1.6;
}

.kly-surface-part.is-selected[data-status="sano"] {
  fill: rgba(34, 197, 94, .26);
  stroke: #2563eb;
  stroke-width: 2;
}

.kly-surface-option {
  border: 1px solid #e2e8f0;
  background: #ffffff;
  border-radius: 20px;
  min-height: 128px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  cursor: pointer;
  transition:
    transform .18s ease,
    box-shadow .18s ease,
    border-color .18s ease;
}

.kly-surface-option:hover,
.kly-surface-option.is-active,
.kly-surface-option.is-selected {
  transform: translateY(-2px);
  border-color: #2563eb;
  box-shadow: 0 18px 32px rgba(37, 99, 235, .12);
}

.kly-surface-option strong {
  color: #0f172a;
  font-size: 14px;
}

.kly-surface-option span {
  color: #64748b;
  font-size: 12px;
  line-height: 1.4;
}

.kly-side-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
}

.kly-side-top h4 {
  margin: 0;
  color: #0f172a;
  font-size: 20px;
  letter-spacing: -.03em;
}

.kly-side-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 30px;
  padding: 0 10px;
  border-radius: 999px;
  background: #f3e8ff;
  color: #7e22ce;
  font-size: 12px;
  font-weight: 900;
}

.kly-side-preview {
  display: flex;
  justify-content: center;
  padding: 10px 0 22px;
}

.kly-side-preview .kly-tooth-svg {
  width: 88px;
  height: 138px;
}

.kly-side-section {
  padding: 18px 0;
  border-top: 1px solid #e8eef8;
}

.kly-side-section h5 {
  margin: 0 0 14px;
  color: #0f172a;
  font-size: 14px;
  font-weight: 900;
}

.kly-side-info {
  display: grid;
  gap: 12px;
}

.kly-side-info-row {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 12px;
  font-size: 13px;
}

.kly-side-info-row span {
  color: #64748b;
  font-weight: 700;
}

.kly-side-info-row strong {
  color: #0f172a;
  font-weight: 800;
}

.kly-tooth-timeline {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  align-items: stretch;
}

.kly-tooth-timeline::before {
  display: none;
  content: none;
}

.kly-timeline-item {
  display: block;
  position: relative;
  font-size: 12px;
}

.kly-timeline-date {
  display: block;
  margin-bottom: 6px;
  padding: 0;
  color: #475569;
  font-weight: 800;
}

.kly-timeline-dot {
  display: none;
}

.kly-timeline-card {
  min-height: 76px;
  padding: 10px 12px;
  border-radius: 16px;
  background: #ffffff;
  border: 1px solid #e4ebf6;
}

.kly-timeline-card strong {
  display: block;
  color: #0f172a;
  font-size: 13px;
  margin-bottom: 4px;
}

.kly-timeline-card span {
  display: block;
  color: #64748b;
  line-height: 1.35;
}

.kly-tooth-detail-horizontal {
  display: block;
}

.kly-tooth-detail-preview {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 24px;
  background: #f8fbff;
  border: 1px solid #e1eaf7;
}

.kly-tooth-detail-history {
  border-radius: 20px;
  background: #ffffff;
  border: 1px solid #e1eaf7;
  padding: 14px;
}

.kly-tooth-detail-info h4,
.kly-tooth-detail-history h4 {
  margin: 0 0 14px;
  color: #0f172a;
  font-size: 16px;
  font-weight: 900;
}

.kly-tooth-detail-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.kly-tooth-detail-title h3 {
  margin: 0;
  color: #0f172a;
  font-size: 20px;
  font-weight: 900;
}

#odontogramFindingModal {
  z-index: 999999 !important;
}

#odontogramFindingModal .klynic-confirm-modal {
  z-index: 1000000 !important;
}

@media (max-width: 1180px) {
  .kly-odontogram-premium {
    grid-template-columns: 1fr;
  }

  .kly-odontogram-side-card {
    position: relative;
    top: auto;
  }
}

@media (max-width: 980px) {
  .kly-tooth-detail-horizontal {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 840px) {
  .kly-odontogram-main-card {
    padding: 0 !important;
  }

  .kly-odontogram-head {
    flex-direction: column;
  }

  .kly-odontogram-row {
    overflow-x: auto;
    display: flex;
    justify-content: flex-start;
    padding-bottom: 12px;
  }

  .kly-tooth-btn {
    width: 58px;
    flex: 0 0 58px;
  }

  .kly-surface-grid {
    grid-template-columns: 1fr 1fr;
  }

  .kly-surface-map-card {
    grid-column: 1 / -1;
  }
}

.kly-timeline-card {
  position: relative;
}

.kly-timeline-card.is-muted {
  opacity: .62;
}

.kly-timeline-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.kly-timeline-menu-btn {
  width: 28px;
  height: 28px;
  border: 1px solid #dbe7f6;
  border-radius: 10px;
  background: #ffffff;
  color: #2563eb;
  font-size: 18px;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
}

.kly-timeline-menu {
  position: absolute;
  top: 38px;
  right: 10px;
  z-index: 50;
  width: 190px;
  padding: 8px;
  border-radius: 14px;
  background: #ffffff;
  border: 1px solid #dbe7f6;
  box-shadow: 0 18px 40px rgba(15, 23, 42, .14);
}

.kly-timeline-menu.hidden {
  display: none;
}

.kly-timeline-menu button {
  width: 100%;
  min-height: 36px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  text-align: left;
  padding: 0 10px;
  color: #0f172a;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.kly-timeline-menu button:hover {
  background: #f3f8ff;
}

.kly-timeline-card em {
  display: block;
  margin-top: 8px;
  color: #64748b;
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
}

#odontogramEventActionModal {
  position: fixed !important;
  inset: 0 !important;
  z-index: 1000002 !important;
  background: rgba(15, 23, 42, 0.56) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

#odontogramEventActionModal .klynic-confirm-modal {
  position: relative !important;
  z-index: 1000003 !important;
}

#odontogramFindingModal {
  position: fixed !important;
  inset: 0 !important;
  z-index: 1000000 !important;
  background: rgba(15, 23, 42, 0.58) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 24px !important;
}

#odontogramFindingModal .klynic-confirm-modal {
  width: min(860px, calc(100vw - 48px)) !important;
  max-height: calc(100vh - 56px) !important;
  overflow-y: auto !important;
  padding: 30px !important;
  border-radius: 30px !important;
  background: #ffffff !important;
  box-shadow: 0 34px 90px rgba(15, 23, 42, 0.28) !important;
  position: relative !important;
  z-index: 1000001 !important;
}

#odontogramFindingModal h2 {
  margin: 0;
  text-align: center;
  color: #0f172a;
  font-size: 26px;
  line-height: 1.1;
  letter-spacing: -0.03em;
}

.odontogram-finding-subtitle {
  margin: 8px 0 24px;
  text-align: center;
  color: #64748b;
  font-size: 14px;
  font-weight: 800;
}

.odontogram-finding-groups {
  display: grid;
  gap: 16px;
  margin: 18px 0 20px;
}

.odontogram-finding-group {
  padding: 16px;
  border: 1px solid #e2e8f0;
  border-radius: 22px;
  background: linear-gradient(
    180deg,
    #f8fbff 0%,
    #ffffff 100%
  );
}

.odontogram-finding-group h4 {
  margin: 0 0 12px;
  color: #0f172a;
  font-size: 14px;
  font-weight: 900;
  letter-spacing: -0.01em;
}

.odontogram-finding-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.odontogram-finding-option {
  min-height: 56px;
  border: 1px solid #dbe7f6;
  border-radius: 16px;
  background: #ffffff;
  padding: 0 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  text-align: left;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.04);

  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    border-color 0.18s ease,
    background 0.18s ease;
}

.odontogram-finding-option:hover {
  transform: translateY(-1px);
  border-color: #bfdbfe;
  background: #f8fbff;
}

.odontogram-finding-option.is-selected {
  border-color: #2563eb;
  background: #eff6ff;
  box-shadow:
    0 0 0 1px #2563eb,
    0 16px 34px rgba(37, 99, 235, 0.16);
}

.odontogram-finding-option strong {
  color: #0f172a;
  font-size: 13px;
  font-weight: 850;
  line-height: 1.2;
}

.odontogram-scope-box {
  margin: 18px 0;
  padding: 16px;
  border-radius: 20px;
  background: #f8fbff;
  border: 1px solid #e2e8f0;
}

.odontogram-scope-box.hidden {
  display: none !important;
}

.odontogram-scope-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 10px;
}

.odontogram-scope-option {
  min-height: 46px;
  border: 1px solid #dbe7f6;
  border-radius: 14px;
  background: #ffffff;
  color: #0f172a;
  font-size: 13px;
  font-weight: 850;
  cursor: pointer;
}

.odontogram-scope-option.is-selected {
  border-color: #2563eb;
  background: #eff6ff;
  box-shadow: 0 0 0 1px #2563eb;
}

.odontogram-finding-note {
  margin-top: 18px;
}

.odontogram-finding-note textarea {
  min-height: 112px;
}

@media (max-width: 760px) {

  .odontogram-finding-options,
  .odontogram-scope-options {
    grid-template-columns: 1fr;
  }

}

.odontogram-finding-header {
  text-align: center;
  margin-bottom: 20px;
}

.odontogram-finding-kicker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 26px;
  padding: 0 12px;
  border-radius: 999px;
  background: #eef4ff;
  color: #2563eb;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .04em;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.odontogram-finding-group {
  padding: 12px 14px !important;
}

.odontogram-finding-group-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.odontogram-finding-group-head h4 {
  margin: 0 !important;
}

.odontogram-finding-group-icon {
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: #eef4ff;
  color: #2563eb;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 900;
}

.odontogram-finding-groups {
  gap: 12px !important;
  margin: 14px 0 14px !important;
}

.odontogram-finding-options {
  gap: 8px !important;
}

.odontogram-finding-option {
  min-height: 48px !important;
}

.odontogram-finding-note {
  margin-top: 12px !important;
}

.kly-odontogram-events-table-card {
  margin-top: 22px;
  padding: 18px;
  border: 1px solid #e2e8f0;
  border-radius: 24px;
  background: #ffffff;
  box-shadow: 0 18px 44px rgba(15, 23, 42, 0.05);
}

.kly-odontogram-events-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 14px;
}

.kly-odontogram-events-head h4 {
  margin: 0;
  color: #0f172a;
  font-size: 17px;
  font-weight: 900;
  letter-spacing: -0.02em;
}

.kly-odontogram-events-head p {
  margin: 4px 0 0;
  color: #64748b;
  font-size: 13px;
}

.kly-odontogram-events-head > span {
  min-height: 30px;
  padding: 0 11px;
  border-radius: 999px;
  background: #eef4ff;
  color: #2563eb;
  display: inline-flex;
  align-items: center;
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}

.kly-odontogram-events-table {
  width: 100%;
  overflow: visible;
  border: 1px solid #e7edf7;
  border-radius: 18px;
}

.kly-odontogram-events-row {
  position: relative;
  display: grid;
  grid-template-columns: 110px 70px 150px minmax(180px, 1fr) 110px 78px;
  gap: 10px;
  align-items: center;
  min-height: 54px;
  padding: 10px 12px;
  border-bottom: 1px solid #edf2f8;
  color: #0f172a;
  font-size: 13px;
  font-weight: 700;
}

.kly-odontogram-events-row:last-child {
  border-bottom: 0;
}

.kly-odontogram-events-row-head {
  min-height: 42px;
  background: #f8fbff;
  color: #64748b;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.kly-odontogram-events-row.is-muted {
  opacity: .58;
}

.kly-odontogram-record-pill {
  min-height: 26px;
  padding: 0 9px;
  border-radius: 999px;
  background: #dcfce7;
  color: #15803d;
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 900;
}

.kly-odontogram-record-pill.corrected {
  background: #eff6ff;
  color: #2563eb;
}

.kly-odontogram-record-pill.annulled {
  background: #fee2e2;
  color: #b91c1c;
}

.kly-odontogram-table-actions {
  position: relative;
  display: flex;
  justify-content: flex-end;
}

.kly-odontogram-events-table .kly-timeline-menu {
  top: 34px;
  right: 0;
}

@media (max-width: 900px) {
  .kly-odontogram-events-table {
    overflow-x: auto;
  }

  .kly-odontogram-events-row {
    min-width: 780px;
  }
}

.kly-odontogram-events-row[data-odontogram-active-row] {
  cursor: pointer;
}

.kly-odontogram-events-row[data-odontogram-active-row]:hover {
  background: #f8fbff;
}

.kly-odontogram-row-detail-btn {
  min-height: 32px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid #dbe7f6;
  background: #ffffff;
  color: #2563eb;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}

.kly-odontogram-row-detail-btn:hover {
  background: #eff6ff;
  border-color: #2563eb;
}

.kly-odontogram-subnav {
  display: inline-flex;
  gap: 8px;
  padding: 6px;
  margin-bottom: 18px;
  border-radius: 18px;
  background: #eef4ff;
  border: 1px solid #dbe7f6;
}

.kly-odontogram-subnav-btn {
  min-height: 38px;
  padding: 0 16px;
  border: 0;
  border-radius: 14px;
  background: transparent;
  color: #64748b;
  font-size: 13px;
  font-weight: 900;
  cursor: pointer;
}

.kly-odontogram-subnav-btn.is-active {
  background: #ffffff;
  color: #2563eb;
  box-shadow: 0 8px 20px rgba(37, 99, 235, 0.12);
}

.kly-plaque-index-view {
  display: grid;
  gap: 18px;
}

.kly-plaque-hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding: 24px;
  border: 1px solid #e2e8f0;
  border-radius: 26px;
  background: linear-gradient(135deg, #f8fbff 0%, #ffffff 100%);
}

.kly-plaque-hero h3 {
  margin: 10px 0 8px;
  color: #0f172a;
  font-size: 26px;
  line-height: 1.1;
  letter-spacing: -0.03em;
}

.kly-plaque-hero p {
  margin: 0;
  max-width: 680px;
  color: #64748b;
  font-size: 14px;
  line-height: 1.55;
}

.kly-plaque-dashboard {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.kly-plaque-dashboard article {
  padding: 18px;
  border: 1px solid #e2e8f0;
  border-radius: 22px;
  background: #ffffff;
}

.kly-plaque-dashboard strong {
  display: block;
  color: #64748b;
  font-size: 12px;
  font-weight: 900;
  margin-bottom: 8px;
}

.kly-plaque-dashboard h4 {
  margin: 0;
  color: #0f172a;
  font-size: 30px;
  line-height: 1;
}

.kly-plaque-dashboard span {
  display: block;
  margin-top: 8px;
  color: #64748b;
  font-size: 12px;
  font-weight: 700;
}

.kly-plaque-placeholder {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 22px;
  border: 1px dashed #bfdbfe;
  border-radius: 24px;
  background: #f8fbff;
}

.kly-plaque-placeholder-icon {
  width: 54px;
  height: 54px;
  border-radius: 18px;
  background: #eef4ff;
  color: #2563eb;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.kly-plaque-placeholder-icon svg {
  width: 28px;
  height: 28px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.kly-plaque-placeholder h4 {
  margin: 0 0 6px;
  color: #0f172a;
  font-size: 17px;
  font-weight: 900;
}

.kly-plaque-placeholder p {
  margin: 0;
  color: #64748b;
  font-size: 14px;
  line-height: 1.55;
}

@media (max-width: 760px) {
  .kly-plaque-hero {
    flex-direction: column;
  }

  .kly-plaque-dashboard {
    grid-template-columns: 1fr;
  }
}

.kly-plaque-chart {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 10px;
}

.kly-plaque-tooth-card {
  padding: 10px;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  background: #ffffff;
  text-align: center;
}

.kly-plaque-tooth-card strong {
  display: block;
  margin-bottom: 8px;
  color: #0f172a;
  font-size: 13px;
  font-weight: 900;
}

.kly-plaque-surfaces {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

.kly-plaque-surface {
  min-height: 30px;
  border: 1px solid #dbe7f6;
  border-radius: 10px;
  background: #f8fbff;
  color: #64748b;
  font-size: 11px;
  font-weight: 900;
  cursor: pointer;
}

.kly-plaque-surface.is-active {
  background: #2563eb;
  border-color: #2563eb;
  color: #ffffff;
}

@media (max-width: 980px) {
  .kly-plaque-chart {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .kly-plaque-chart {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.kly-plaque-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.kly-plaque-history-card {
  padding: 18px;
  border: 1px solid #e2e8f0;
  border-radius: 24px;
  background: #ffffff;
  box-shadow: 0 18px 44px rgba(15, 23, 42, 0.05);
}

.kly-plaque-history-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}

.kly-plaque-history-head h4 {
  margin: 0;
  color: #0f172a;
  font-size: 17px;
  font-weight: 900;
}

.kly-plaque-history-head span {
  min-height: 30px;
  padding: 0 11px;
  border-radius: 999px;
  background: #eef4ff;
  color: #2563eb;
  display: inline-flex;
  align-items: center;
  font-size: 12px;
  font-weight: 900;
}

.kly-plaque-history-table {
  border: 1px solid #e7edf7;
  border-radius: 18px;
  overflow: hidden;
}

.kly-plaque-history-row {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1.4fr 1fr;
  gap: 10px;
  align-items: center;
  min-height: 48px;
  padding: 10px 12px;
  border-bottom: 1px solid #edf2f8;
  color: #0f172a;
  font-size: 13px;
  font-weight: 700;
}

.kly-plaque-history-row:last-child {
  border-bottom: 0;
}

.kly-plaque-history-row-head {
  min-height: 40px;
  background: #f8fbff;
  color: #64748b;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.odontogram-subtype-box {
  margin: 12px 0 14px;
  padding: 14px;
  border-radius: 18px;
  background: #f8fbff;
  border: 1px solid #e2e8f0;
}

.odontogram-subtype-box.hidden {
  display: none !important;
}

.odontogram-subtype-options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.odontogram-subtype-option {
  min-height: 38px;
  padding: 0 13px;
  border-radius: 999px;
  border: 1px solid #dbe7f6;
  background: #ffffff;
  color: #0f172a;
  font-size: 12px;
  font-weight: 850;
  cursor: pointer;
}

.odontogram-subtype-option.is-selected {
  border-color: #2563eb;
  background: #eff6ff;
  color: #2563eb;
  box-shadow: 0 0 0 1px #2563eb;
}

.kly-plaque-error {
  margin: 0;
  padding: 12px 14px;
  border-radius: 16px;
  background: #fff1f2;
  border: 1px solid #fecdd3;
  color: #be123c;
  font-size: 13px;
  font-weight: 800;
}

.kly-plaque-error.hidden {
  display: none !important;
}






.kly-periodontal-shell {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.kly-periodontal-hero,
.kly-periodontal-map-card,
.kly-periodontal-editor-card,
.kly-periodontal-records {
  border: 1px solid #dbe7f4;
  border-radius: 28px;
  background: #fff;
  box-shadow: 0 18px 45px rgba(15, 23, 42, .06);
  padding: 24px;
}

.kly-periodontal-hero {
  background: radial-gradient(circle at top right, rgba(37,99,235,.14), transparent 34%), #fff;
}

.kly-periodontal-hero span {
  font-size: 12px;
  font-weight: 900;
  color: #2563eb;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.kly-periodontal-hero h3 {
  margin: 8px 0;
  font-size: 28px;
  color: #0f172a;
}

.kly-periodontal-primary,
.kly-periodontal-secondary {
  min-height: 44px;
  border-radius: 16px;
  padding: 0 18px;
  font-weight: 900;
  cursor: pointer;
}

.kly-periodontal-primary {
  border: 0;
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  color: #fff;
}

.kly-periodontal-secondary {
  border: 1px solid #dbe7f4;
  background: #fff;
  color: #0f172a;
}

.kly-periodontal-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.kly-periodontal-summary-card {
  border: 1px solid #e2e8f0;
  border-radius: 22px;
  background: #fff;
  padding: 20px;
}

.kly-periodontal-summary-card span {
  display: block;
  font-size: 13px;
  font-weight: 900;
  color: #64748b;
  margin-bottom: 8px;
}

.kly-periodontal-summary-card strong {
  font-size: 30px;
  color: #0f172a;
}

.kly-periodontal-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) 390px;
  gap: 18px;
}

.kly-periodontal-card-head {
  margin-bottom: 18px;
}

.kly-periodontal-card-head h4 {
  margin: 0;
  font-size: 18px;
  color: #0f172a;
}

.kly-periodontal-card-head p {
  margin: 6px 0 0;
  color: #64748b;
  font-size: 13px;
}

.kly-periodontal-mouth {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.kly-periodontal-arch {
  border: 1px solid #edf2f7;
  border-radius: 24px;
  padding: 18px;
  background: #fbfdff;
}

.kly-periodontal-arch-title {
  display: flex;
  justify-content: space-between;
  margin-bottom: 12px;
  font-size: 13px;
  font-weight: 900;
  color: #334155;
}

.kly-periodontal-tooth-row {
  display: grid;
  grid-template-columns: repeat(16, minmax(32px, 1fr));
  gap: 7px;
}

.kly-periodontal-tooth-btn {
  min-height: 74px;
  border: 1px solid #dbe7f4;
  border-radius: 18px;
  background: #fff;
  padding: 7px 5px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.kly-periodontal-tooth-btn.is-selected {
  border-color: #2563eb;
  background: #eff6ff;
  box-shadow: 0 16px 32px rgba(37,99,235,.18);
}

.kly-periodontal-tooth-btn.has-warning {
  border-color: #f59e0b;
  background: #fffbeb;
}

.kly-periodontal-tooth-btn.has-danger {
  border-color: #dc2626;
  background: #fef2f2;
}

.kly-periodontal-tooth-number {
  font-size: 12px;
  font-weight: 900;
  color: #0f172a;
}

.kly-periodontal-tooth-icon {
  width: 24px;
  height: 34px;
  border-radius: 12px 12px 16px 16px;
  border: 2px solid #94a3b8;
  background: linear-gradient(180deg, #fff, #f1f5f9);
}

.kly-periodontal-tooth-flags {
  display: flex;
  gap: 3px;
}

.kly-periodontal-dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: #cbd5e1;
}

.kly-periodontal-dot.bleeding { background: #ef4444; }
.kly-periodontal-dot.plaque { background: #f59e0b; }
.kly-periodontal-dot.suppuration { background: #8b5cf6; }

.kly-periodontal-selected-tooth {
  padding: 18px;
  border-radius: 22px;
  background: #f8fbff;
  border: 1px solid #dbeafe;
  margin-bottom: 18px;
}

.kly-periodontal-field-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}

.kly-periodontal-field {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.kly-periodontal-field span {
  font-size: 12px;
  font-weight: 900;
  color: #64748b;
}

.kly-periodontal-field input,
.kly-periodontal-field select,
.kly-periodontal-field textarea {
  width: 100%;
  border: 1px solid #dbe7f4;
  border-radius: 15px;
  background: #fff;
  padding: 12px;
  color: #0f172a;
  font-weight: 700;
}

.kly-periodontal-sites {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.kly-periodontal-site-head,
.kly-periodontal-site-row {
  display: grid;
  grid-template-columns: 42px 1fr 1fr 34px 34px 34px;
  gap: 8px;
  align-items: center;
}

.kly-periodontal-site-head {
  font-size: 10px;
  font-weight: 900;
  color: #64748b;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.kly-periodontal-site-row {
  padding: 10px;
  border: 1px solid #edf2f7;
  border-radius: 18px;
  background: #fff;
}

.kly-periodontal-site-row input[type="number"] {
  border: 1px solid #dbe7f4;
  border-radius: 12px;
  padding: 9px 8px;
  text-align: center;
}

.kly-periodontal-check {
  width: 32px;
  height: 32px;
  border-radius: 12px;
  border: 1px solid #dbe7f4;
  background: #f8fafc;
  display: flex;
  align-items: center;
  justify-content: center;
}

.kly-periodontal-save-row {
  margin-top: 16px;
  display: flex;
  justify-content: flex-end;
}

.kly-periodontal-record-row {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr 1fr 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 18px 0;
  border-bottom: 1px solid #edf2f7;
}

.kly-periodontal-record-row.is-head {
  font-size: 12px;
  font-weight: 900;
  color: #64748b;
  text-transform: uppercase;
}

.kly-periodontal-risk {
  display: inline-flex;
  width: fit-content;
  padding: 7px 11px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
  background: #eff6ff;
  color: #1d4ed8;
}

.kly-periodontal-risk.high {
  background: #fee2e2;
  color: #b91c1c;
}

.kly-periodontal-risk.moderate {
  background: #fef3c7;
  color: #92400e;
}

@media (max-width: 1100px) {
  .kly-periodontal-workspace {
    grid-template-columns: 1fr;
  }

  .kly-periodontal-tooth-row {
    grid-template-columns: repeat(8, minmax(36px, 1fr));
  }
}



.kly-periodontal-workspace-full {
  display: flex !important;
  flex-direction: column !important;
  gap: 22px !important;
}

.kly-periodontal-chart-card {
  width: 100% !important;
  overflow: visible !important;
}

.kly-periodontal-chart-stack {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.kly-perio-arch-card {
  border: 1px solid #dbe7f4;
  border-radius: 26px;
  background:
    radial-gradient(circle at top right, rgba(37, 99, 235, .05), transparent 32%),
    #ffffff;
  padding: 22px;
  box-shadow: 0 14px 36px rgba(15, 23, 42, .045);
}

.kly-perio-arch-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.kly-perio-arch-title h5 {
  margin: 0;
  font-size: 18px;
  font-weight: 900;
  color: #0f172a;
}

.kly-perio-arch-title span {
  font-size: 13px;
  font-weight: 900;
  color: #2563eb;
  background: #eff6ff;
  border: 1px solid #dbeafe;
  border-radius: 999px;
  padding: 8px 12px;
}

.kly-perio-table-wrap {
  display: grid;
  grid-template-columns: 86px minmax(0, 1fr);
  gap: 10px;
  align-items: stretch;
}

.kly-perio-side-label {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #334155;
  font-size: 13px;
  font-weight: 900;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  border: 1px solid #e2e8f0;
  border-radius: 18px;
  background: #f8fafc;
}

.kly-perio-table-scroll {
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  border: 1px solid #e2e8f0;
  border-radius: 18px;
  background: #ffffff;
}

.kly-perio-table {
  min-width: 960px;
  display: flex;
  flex-direction: column;
}

.kly-perio-row {
  display: grid;
  grid-template-columns: 118px repeat(var(--perio-cols), minmax(48px, 1fr));
  min-height: 42px;
  border-bottom: 1px solid #edf2f7;
}

.kly-perio-row:last-child {
  border-bottom: 0;
}

.kly-perio-head-row {
  background: #f8fafc;
}

.kly-perio-row-label {
  display: flex;
  align-items: center;
  padding: 0 10px;
  border-right: 1px solid #edf2f7;
  font-size: 11px;
  font-weight: 900;
  color: #475569;
  white-space: nowrap;
}

.kly-perio-row-label.is-blue {
  color: #2563eb;
}

.kly-perio-row-label.is-red {
  color: #ef4444;
}

.kly-perio-row-label.strong {
  color: #0f172a;
}

.kly-perio-tooth-head,
.kly-perio-cell {
  border: 0;
  border-right: 1px solid #edf2f7;
  background: transparent;
  min-width: 0;
  padding: 0;
  cursor: pointer;
}

.kly-perio-tooth-head:last-child,
.kly-perio-cell:last-child {
  border-right: 0;
}

.kly-perio-tooth-head {
  font-size: 12px;
  font-weight: 900;
  color: #334155;
}

.kly-perio-tooth-head.is-selected {
  background: #eff6ff;
  color: #1d4ed8;
  box-shadow: inset 0 -2px 0 #2563eb;
}

.kly-perio-cell:hover,
.kly-perio-tooth-head:hover {
  background: #f8fbff;
}

.kly-perio-triplet {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  height: 100%;
}

.kly-perio-triplet span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  border-right: 1px solid #f1f5f9;
  font-size: 11px;
  font-weight: 800;
  color: #475569;
}

.kly-perio-triplet span:last-child {
  border-right: 0;
}

.kly-perio-triplet span.warning {
  color: #92400e;
  background: #fffbeb;
}

.kly-perio-triplet span.danger {
  color: #b91c1c;
  background: #fef2f2;
}

.kly-perio-drawing-shell {
  display: grid;
  grid-template-columns: 86px minmax(0, 1fr) 86px;
  gap: 10px;
  margin: 18px 0;
  align-items: center;
}

.kly-perio-drawing-side {
  display: flex;
  justify-content: center;
  font-size: 13px;
  font-weight: 900;
  color: #334155;
}

.kly-perio-drawing {
  position: relative;
  min-height: 155px;
  border-radius: 22px;
  border: 1px solid #e2e8f0;
  background: #ffffff;
  overflow-x: auto;
  overflow-y: hidden;
}

.kly-perio-grid-lines {
  position: absolute;
  inset: 14px 0;
  background-image: repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent 7px,
    rgba(148, 163, 184, .35) 8px
  );
  pointer-events: none;
}

.kly-perio-red-line {
  position: absolute;
  left: 0;
  right: 0;
  top: 74px;
  height: 2px;
  background: #ef4444;
  z-index: 1;
}

.kly-perio-tooth-drawing-row {
  position: relative;
  z-index: 2;
  min-width: 960px;
  height: 155px;
  display: grid;
  grid-template-columns: repeat(16, minmax(48px, 1fr));
  align-items: center;
  padding: 0 10px;
}

.kly-perio-drawing-tooth {
  border: 0;
  background: transparent;
  height: 118px;
  position: relative;
  cursor: pointer;
}

.kly-perio-drawing-tooth::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 34px;
  width: 26px;
  height: 38px;
  transform: translateX(-50%);
  border: 2px solid #1f2937;
  border-radius: 14px 14px 10px 10px;
  background: #fff;
}

.kly-perio-drawing-tooth::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 68px;
  width: 15px;
  height: 42px;
  transform: translateX(-50%);
  border: 2px solid #1f2937;
  border-top: 0;
  border-radius: 0 0 9px 9px;
  background: #fff;
}

.kly-perio-drawing-tooth span {
  position: absolute;
  left: 50%;
  top: 8px;
  transform: translateX(-50%);
  font-size: 11px;
  font-weight: 900;
  color: #334155;
}

.kly-perio-drawing-tooth.is-selected::before,
.kly-perio-drawing-tooth.is-selected::after {
  border-color: #2563eb;
  background: #eff6ff;
}

.kly-perio-drawing-tooth.warning::before,
.kly-perio-drawing-tooth.warning::after {
  border-color: #f59e0b;
  background: #fffbeb;
}

.kly-perio-drawing-tooth.danger::before,
.kly-perio-drawing-tooth.danger::after {
  border-color: #dc2626;
  background: #fef2f2;
}

.kly-periodontal-editor-card {
  width: 100%;
}

.kly-periodontal-editor-body {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 18px;
}

.kly-periodontal-selected-tooth {
  margin-bottom: 0;
  align-self: start;
}

.kly-periodontal-field-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.kly-periodontal-sites {
  grid-column: 1 / -1;
}

.kly-periodontal-site-head,
.kly-periodontal-site-row {
  grid-template-columns: 70px repeat(2, minmax(90px, 1fr)) repeat(3, 48px);
}

.kly-periodontal-field:has(#periodontalToothNote) {
  grid-column: 1 / -1;
}

.kly-periodontal-save-row {
  grid-column: 1 / -1;
}

@media (max-width: 980px) {
  .kly-periodontal-editor-body {
    grid-template-columns: 1fr;
  }

  .kly-periodontal-field-grid {
    grid-template-columns: 1fr;
  }

  .kly-perio-table-wrap,
  .kly-perio-drawing-shell {
    grid-template-columns: 1fr;
  }

  .kly-perio-side-label,
  .kly-perio-drawing-side {
    writing-mode: initial;
    transform: none;
    min-height: 42px;
  }
}


.kly-perio-hemi-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
}

.kly-perio-hemi-card {
  border: 1px solid #e2e8f0;
  border-radius: 24px;
  background: #ffffff;
  padding: 18px;
}

.kly-perio-hemi-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
}

.kly-perio-hemi-title h6 {
  margin: 0;
  font-size: 15px;
  font-weight: 900;
  color: #0f172a;
}

.kly-perio-hemi-title span {
  font-size: 12px;
  font-weight: 900;
  color: #2563eb;
  background: #eff6ff;
  border: 1px solid #dbeafe;
  border-radius: 999px;
  padding: 7px 10px;
}

.kly-perio-surface-block {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 18px;
}

.kly-perio-surface-block:last-child {
  margin-bottom: 0;
}

.kly-perio-table-wrap {
  display: grid !important;
  grid-template-columns: 72px minmax(0, 1fr) !important;
  gap: 10px !important;
}

.kly-perio-table-scroll {
  overflow: hidden !important;
}

.kly-perio-table {
  min-width: 0 !important;
  width: 100% !important;
}

.kly-perio-row {
  grid-template-columns: 112px repeat(var(--perio-cols), minmax(0, 1fr)) !important;
}

.kly-perio-triplet span {
  font-size: 10px !important;
  min-height: 36px !important;
}

.kly-perio-surface-drawing {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
}

.kly-perio-surface-label {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 118px;
  border: 1px solid #e2e8f0;
  border-radius: 18px;
  background: #f8fafc;
  color: #334155;
  font-size: 12px;
  font-weight: 900;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}

.kly-perio-drawing {
  min-height: 128px !important;
  overflow: hidden !important;
}

.kly-perio-tooth-drawing-row {
  min-width: 0 !important;
  width: 100% !important;
  height: 128px !important;
  grid-template-columns: repeat(var(--perio-teeth), minmax(0, 1fr)) !important;
}

.kly-perio-drawing-tooth {
  height: 110px !important;
}

.kly-perio-drawing-tooth::before {
  width: 24px !important;
  height: 34px !important;
}

.kly-perio-drawing-tooth::after {
  width: 14px !important;
  height: 36px !important;
}

@media (max-width: 760px) {
  .kly-perio-table-wrap,
  .kly-perio-surface-drawing {
    grid-template-columns: 1fr !important;
  }

  .kly-perio-side-label,
  .kly-perio-surface-label {
    writing-mode: initial !important;
    transform: none !important;
    min-height: 40px !important;
  }
}

.kly-perio-hemi-card {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  padding: 0 !important;
}

.kly-perio-hemi-title {
  margin: 0 0 12px !important;
}

.kly-perio-surface-block {
  margin-bottom: 20px !important;
}

.kly-perio-tooth-drawing-row {
  grid-template-columns: 112px repeat(var(--perio-teeth), minmax(0, 1fr)) !important;
  padding: 0 !important;
}

.kly-perio-drawing-spacer {
  height: 100%;
  border-right: 1px solid #edf2f7;
  pointer-events: none;
}

.kly-perio-red-line {
  left: 112px !important;
}

.kly-perio-grid-lines {
  left: 112px !important;
}

.kly-perio-drawing-tooth {
  border-right: 1px solid #edf2f7 !important;
}

.kly-perio-drawing-tooth:last-child {
  border-right: 0 !important;
}

.kly-perio-real-tooth::before,
.kly-perio-real-tooth::after {
  display: none !important;
}

.kly-perio-real-tooth {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 118px !important;
  position: relative !important;
}

.kly-perio-real-tooth-number {
  position: absolute !important;
  top: 6px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  color: #334155 !important;
  z-index: 3 !important;
}

.kly-perio-real-tooth-svg {
  width: 42px !important;
  height: 72px !important;
  margin-top: 20px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.kly-perio-real-tooth-svg .kly-tooth-svg {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
}

.kly-perio-real-tooth.is-selected .kly-tooth-body,
.kly-perio-real-tooth.is-selected .kly-tooth-root {
  stroke: #2563eb !important;
  stroke-width: 2.4 !important;
}

.kly-perio-real-tooth.warning .kly-tooth-body,
.kly-perio-real-tooth.warning .kly-tooth-root {
  stroke: #f59e0b !important;
  stroke-width: 2.4 !important;
}

.kly-perio-real-tooth.danger .kly-tooth-body,
.kly-perio-real-tooth.danger .kly-tooth-root {
  stroke: #dc2626 !important;
  stroke-width: 2.4 !important;
}


/* =========================================================
   PROCEDIMIENTOS SUGERIDOS
   ========================================================= */

.suggested-procedures-modal {
  width: min(880px, calc(100vw - 32px));
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  border-radius: 28px;
  padding: 28px;
}

.suggested-procedures-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 24px;
}

.suggested-procedures-head h2 {
  margin: 0 0 8px;
  font-size: 24px;
  font-weight: 800;
  color: #101828;
}

.suggested-procedures-head p {
  margin: 0;
  max-width: 640px;
  font-size: 14px;
  line-height: 1.55;
  color: #475467;
}

.suggested-procedures-search {
  margin-bottom: 18px;
}

.suggested-procedures-search input {
  width: 100%;
  height: 48px;
  border: 1px solid #d8e0ef;
  border-radius: 16px;
  padding: 0 18px;
  font-size: 14px;
  outline: none;
  background: #fff;
}

.suggested-procedures-search input:focus {
  border-color: #6d5dfc;
  box-shadow: 0 0 0 4px rgba(109, 93, 252, 0.12);
}

.suggested-procedure-tabs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid #dfe7f3;
  border-radius: 18px;
  overflow: hidden;
  margin-bottom: 18px;
  background: #fff;
}

.suggested-procedure-type-tab {
  border: 0;
  border-right: 1px solid #e6edf7;
  background: #fff;
  padding: 18px 20px;
  text-align: left;
  cursor: pointer;
}

.suggested-procedure-type-tab:last-child {
  border-right: 0;
}

.suggested-procedure-type-tab strong {
  display: block;
  font-size: 14px;
  font-weight: 800;
  color: #101828;
  margin-bottom: 4px;
}

.suggested-procedure-type-tab small {
  display: block;
  font-size: 12px;
  color: #667085;
}

.suggested-procedure-type-tab.is-active {
  background: #f7f8ff;
  box-shadow: inset 0 0 0 2px #6d8cff;
}

.suggested-procedure-note {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 14px 16px;
  border: 1px solid #dbe7ff;
  background: #f4f8ff;
  border-radius: 14px;
  color: #475467;
  font-size: 13px;
  line-height: 1.4;
  margin-bottom: 22px;
}

.suggested-procedure-section-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px;
  margin: 22px 0 12px;
}

.suggested-procedure-section-head h3 {
  margin: 0 0 4px;
  font-size: 20px;
  font-weight: 800;
  color: #101828;
}

.suggested-procedure-section-head p {
  margin: 0;
  font-size: 13px;
  color: #667085;
}

.suggested-procedure-packs {
  display: grid;
  gap: 10px;
  margin-bottom: 18px;
}

.suggested-procedure-pack-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  padding: 16px;
  border: 1px solid #e0e7f2;
  border-radius: 16px;
  background: #fff;
}

.suggested-procedure-pack-card strong {
  display: block;
  font-size: 15px;
  color: #101828;
  margin-bottom: 4px;
}

.suggested-procedure-pack-card small {
  display: block;
  color: #667085;
  font-size: 13px;
  line-height: 1.35;
}

.suggested-procedure-link-btn {
  border: 0;
  background: transparent;
  color: #255be8;
  font-weight: 800;
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
}

.suggested-procedure-groups {
  display: grid;
  gap: 16px;
  padding-bottom: 18px;
}

.suggested-procedure-specialty-card {
  border: 1px solid #dfe7f3;
  border-radius: 18px;
  background: #fff;
  overflow: hidden;
}

.suggested-procedure-specialty-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 16px 18px;
  border-bottom: 1px solid #edf2f7;
  background: #fbfcff;
}

.suggested-procedure-specialty-head strong {
  display: block;
  font-size: 16px;
  font-weight: 800;
  color: #101828;
}

.suggested-procedure-specialty-head small {
  display: block;
  color: #667085;
  font-size: 13px;
  margin-top: 3px;
}

.suggested-procedure-table-head,
.suggested-procedure-row {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) 190px 110px 42px;
  gap: 16px;
  align-items: center;
}

.suggested-procedure-table-head {
  padding: 12px 18px;
  background: #f8fafd;
  border-bottom: 1px solid #edf2f7;
  color: #7a8aa0;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.suggested-procedure-row {
  padding: 14px 18px;
  border-bottom: 1px solid #edf2f7;
  cursor: pointer;
}

.suggested-procedure-row:last-child {
  border-bottom: 0;
}

.suggested-procedure-row:hover {
  background: #fafcff;
}

.suggested-procedure-row strong {
  display: block;
  font-size: 14px;
  font-weight: 800;
  color: #101828;
  margin-bottom: 3px;
}

.suggested-procedure-row small {
  display: block;
  font-size: 12px;
  color: #667085;
}

.suggested-procedure-type-pill {
  display: inline-flex;
  width: fit-content;
  padding: 6px 10px;
  border-radius: 999px;
  background: #f2f4f7;
  color: #475467;
  font-size: 12px;
  font-weight: 700;
}

.suggested-procedure-duration {
  font-size: 13px;
  font-weight: 700;
  color: #344054;
}

.suggested-procedure-row input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: #635bff;
}

.suggested-procedures-footer {
  position: sticky;
  bottom: -28px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  padding: 18px 0 0;
  margin-top: 10px;
  background: linear-gradient(to top, #fff 75%, rgba(255, 255, 255, 0));
}

.suggested-procedures-selected-count {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #344054;
  font-size: 14px;
}

.suggested-procedures-selected-count input {
  width: 18px;
  height: 18px;
  accent-color: #635bff;
}

.suggested-procedures-footer-actions {
  display: flex;
  gap: 10px;
}

@media (max-width: 760px) {
  .suggested-procedures-modal {
    width: calc(100vw - 20px);
    padding: 22px;
    border-radius: 22px;
  }

  .suggested-procedure-tabs {
    grid-template-columns: 1fr;
  }

  .suggested-procedure-type-tab {
    border-right: 0;
    border-bottom: 1px solid #e6edf7;
  }

  .suggested-procedure-table-head {
    display: none;
  }

  .suggested-procedure-row {
    grid-template-columns: 1fr auto;
    gap: 10px;
  }

  .suggested-procedure-row > span:nth-child(2),
  .suggested-procedure-row > span:nth-child(3) {
    grid-column: 1 / -1;
  }

  .suggested-procedures-footer {
    flex-direction: column;
    align-items: stretch;
  }

  .suggested-procedures-footer-actions {
    flex-direction: column;
  }
}

.suggested-procedure-table-head,
.suggested-procedure-row {
  grid-template-columns: minmax(220px, 1fr) 180px 120px 140px 42px;
}

.suggestedProcedureDurationInput,
.suggestedProcedureBasePriceInput {
  width: 100%;
  height: 38px;
  border: 1px solid #d8e0ef;
  border-radius: 12px;
  padding: 0 10px;
  font-size: 13px;
  font-weight: 700;
  color: #101828;
  background: #ffffff;
  outline: none;
}

.suggestedProcedureDurationInput:focus,
.suggestedProcedureBasePriceInput:focus {
  border-color: #6d5dfc;
  box-shadow: 0 0 0 3px rgba(109, 93, 252, 0.12);
}

@media (max-width: 760px) {
  .suggested-procedure-row {
    grid-template-columns: 1fr auto;
  }

  .suggested-procedure-row > span:nth-child(3),
  .suggested-procedure-row > span:nth-child(4) {
    grid-column: 1 / -1;
  }
}

#parameterizedProcedureSection.hidden {
  display: none;
}

#parameterizedProcedureSection {
  border-color: #dbe7ff;
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
}


.parameterized-family-block {
  margin-top: 18px;
  padding: 18px;
  border: 1px solid #dbe7ff;
  border-radius: 18px;
  background: #f8fbff;
}

.parameterized-family-block.hidden {
  display: none;
}

.parameterized-family-block h4 {
  margin: 0 0 14px;
  font-size: 15px;
  font-weight: 900;
  color: #102a56;
}


.parameterized-custom-variables-panel {
  margin-top: 18px;
  padding: 18px;
  border: 1px solid #dbe7ff;
  border-radius: 18px;
  background: #ffffff;
}

.parameterized-custom-variables-head,
.parameterized-custom-variable-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.parameterized-custom-variables-head strong,
.parameterized-custom-variable-head strong {
  display: block;
  font-size: 15px;
  font-weight: 900;
  color: #102a56;
}

.parameterized-custom-variables-head small,
.parameterized-custom-variable-head small {
  display: block;
  margin-top: 3px;
  font-size: 12px;
  color: #667085;
}

.parameterized-custom-variable-card {
  margin-top: 14px;
  padding: 16px;
  border: 1px solid #e0e7f2;
  border-radius: 16px;
  background: #f8fbff;
}

.parameterized-custom-empty {
  margin-top: 14px;
  padding: 16px;
  border: 1px dashed #bfd2f3;
  border-radius: 16px;
  background: #f8fbff;
}

.parameterized-custom-empty strong {
  display: block;
  font-size: 14px;
  color: #102a56;
}

.parameterized-custom-empty p {
  margin: 4px 0 0;
  font-size: 13px;
  color: #667085;
}

.parameterized-adjustment-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.suggested-adjustments-list {
  display: grid;
  gap: 10px;
  margin-top: 16px;
}

.suggested-adjustment-row {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 12px;
  align-items: flex-start;
  padding: 14px;
  border: 1px solid #dbe7ff;
  border-radius: 14px;
  background: #f8fbff;
  cursor: pointer;
}

.suggested-adjustment-row strong {
  display: block;
  font-size: 14px;
  font-weight: 900;
  color: #102a56;
}

.suggested-adjustment-row small {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  line-height: 1.35;
  color: #667085;
}


.procedure-warning-box {
  margin-top: 10px;
  padding: 12px 14px;
  border: 1px solid #fed7aa;
  border-radius: 14px;
  background: #fff7ed;
  color: #9a3412;
}

.procedure-warning-box strong {
  display: block;
  font-size: 13px;
  font-weight: 900;
  margin-bottom: 4px;
}

.procedure-warning-box p {
  margin: 0 0 10px;
  font-size: 12px;
  line-height: 1.4;
}

.procedure-warning-box small {
  display: block;
  margin-top: 8px;
  font-size: 11px;
  line-height: 1.35;
  color: #9a3412;
}

.procedure-inline-check {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 800;
  color: #7c2d12;
}

.procedure-inline-check input {
  width: 16px;
  height: 16px;
}

.procedure-soft-disabled {
  opacity: 0.65;
  pointer-events: none;
}

.professional-cost-detail-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 14px;
}

.professional-cost-detail-grid article {
  padding: 14px;
  border: 1px solid #dbe6f5;
  border-radius: 16px;
  background: #f8fbff;
}

.professional-cost-detail-grid span {
  display: block;
  color: #5b6f91;
  font-size: 12px;
  font-weight: 800;
  margin-bottom: 6px;
}

.professional-cost-detail-grid strong {
  display: block;
  color: #07142f;
  font-size: 18px;
  font-weight: 900;
}

.professional-cost-detail-grid small {
  display: block;
  margin-top: 6px;
  color: #60708d;
  font-size: 11px;
  line-height: 1.35;
}

.professional-cost-total-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 14px;
  padding: 14px 16px;
  border-radius: 16px;
  background: #eef6ff;
  border: 1px solid #cfe3ff;
}

.professional-cost-total-row span {
  color: #415577;
  font-weight: 900;
}

.professional-cost-total-row strong {
  color: #07142f;
  font-size: 20px;
  font-weight: 950;
}

@media (max-width: 900px) {
  .professional-cost-detail-grid {
    grid-template-columns: 1fr;
  }
}



.calculation-parameterized-reference {
  margin-top: 16px;
  padding: 16px;
  border: 1px solid #dbe6f5;
  border-radius: 18px;
  background: #f8fbff;
}

.calculation-parameterized-head strong {
  display: block;
  color: #07142f;
  font-size: 15px;
  font-weight: 950;
}

.calculation-parameterized-head p {
  margin: 4px 0 0;
  color: #5b6f91;
  font-size: 12px;
}

.calculation-parameterized-list {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}

.calculation-parameterized-list article {
  padding: 12px;
  border: 1px solid #dbe6f5;
  border-radius: 14px;
  background: #fff;
}

.calculation-parameterized-list article strong {
  display: block;
  color: #07142f;
  font-weight: 900;
}

.calculation-parameterized-list article span {
  display: block;
  margin-top: 3px;
  color: #60708d;
  font-size: 12px;
}

.calculation-parameterized-list article div {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.calculation-parameterized-list article small {
  padding: 5px 8px;
  border-radius: 999px;
  background: #eef6ff;
  color: #2456b3;
  font-weight: 800;
}

.calculation-parameterized-totals {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
}

.calculation-parameterized-totals div {
  padding: 12px;
  border-radius: 14px;
  background: #eef6ff;
  border: 1px solid #cfe3ff;
}

.calculation-parameterized-totals span {
  display: block;
  color: #5b6f91;
  font-size: 12px;
  font-weight: 800;
}

.calculation-parameterized-totals strong {
  display: block;
  margin-top: 4px;
  color: #07142f;
  font-weight: 950;
}

@media (max-width: 900px) {
  .calculation-parameterized-totals {
    grid-template-columns: 1fr;
  }
}

.calculation-section-head-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
}

.calculation-materials-detail {
  display: block;
}

.calculation-materials-list {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}

.calculation-materials-list article {
  display: grid;
  grid-template-columns: 1fr 140px 140px;
  gap: 12px;
  align-items: center;
  padding: 12px;
  border: 1px solid #dbe6f5;
  border-radius: 14px;
  background: #fff;
}

.calculation-materials-list article span,
.calculation-materials-list article small {
  display: block;
  color: #60708d;
  font-size: 12px;
}

.calculation-materials-list article strong {
  color: #07142f;
  font-weight: 900;
}

.calculation-materials-empty {
  margin-top: 14px;
  padding: 12px;
  border: 1px dashed #bfd4ef;
  border-radius: 14px;
  background: #f8fbff;
}

.calculation-materials-empty strong {
  display: block;
  color: #07142f;
}

.calculation-materials-empty p {
  margin: 4px 0 0;
  color: #60708d;
  font-size: 12px;
}

@media (max-width: 900px) {
  .calculation-section-head-row {
    align-items: flex-start;
    flex-direction: column;
  }

  .calculation-materials-list article {
    grid-template-columns: 1fr;
  }
}


/* ================================
   Budgets - Parameterized procedures
================================ */

.budget-selected-grid {
  align-items: start;
}

.budget-parameterized-panel {
  grid-column: 1 / -1;
  margin-top: 10px;
  padding: 14px;
  border: 1px solid #dbe7f6;
  border-radius: 16px;
  background: #f8fbff;
  display: grid;
  gap: 12px;
}

.budget-parameterized-units {
  display: grid;
  grid-template-columns: 90px 120px;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 800;
  color: #172554;
}

.budget-parameterized-units input {
  width: 100%;
  height: 36px;
  border: 1px solid #dbe7f6;
  border-radius: 10px;
  padding: 0 10px;
  font-size: 14px;
  font-weight: 800;
  color: #10203f;
  background: #ffffff;
}

.budget-parameterized-adjustments {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
}

.budget-parameterized-adjustments strong {
  width: 100%;
  font-size: 13px;
  font-weight: 900;
  color: #172554;
}

.budget-parameterized-adjustment {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  padding: 6px 10px;
  border: 1px solid #dbe7f6;
  border-radius: 999px;
  background: #ffffff;
  font-size: 12px;
  font-weight: 800;
  color: #334155;
  cursor: pointer;
}

.budget-parameterized-adjustment input {
  width: 14px;
  height: 14px;
  margin: 0;
}

.budget-parameterized-panel small {
  font-size: 12px;
  font-weight: 700;
  color: #64748b;
}

.procedure-catalog-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  max-width: 960px;
  margin: 24px 0 0;
  background: #fff;
  border: 1px solid #dbe7f6;
  border-radius: 18px 18px 0 0;
  overflow: hidden;
}

.procedure-catalog-tab {
  border: 0;
  background: #fff;
  padding: 22px 24px;
  font-size: 16px;
  font-weight: 800;
  color: #243a63;
  cursor: pointer;
  border-bottom: 3px solid transparent;
}

.procedure-catalog-tab.is-active {
  color: #1558e6;
  border-bottom-color: #1558e6;
}

.procedure-page-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: 24px;
  align-items: start;
}

.procedure-main-panel {
  min-width: 0;
}

.procedure-summary-premium {
  margin-top: 24px;
}

.procedure-education-panel {
  display: grid;
  gap: 18px;
  margin-top: 24px;
}

.procedure-education-card {
  background: #fff;
  border: 1px solid #dbe7f6;
  border-radius: 18px;
  padding: 20px;
  box-shadow: 0 12px 30px rgba(15, 35, 80, 0.05);
}

.procedure-education-card strong {
  display: block;
  font-size: 15px;
  color: #071836;
  margin-bottom: 8px;
}

.procedure-education-card span {
  display: inline-flex;
  margin-bottom: 10px;
  padding: 5px 10px;
  border-radius: 999px;
  background: #eef6ff;
  color: #1558e6;
  font-size: 12px;
  font-weight: 800;
}

.procedure-education-card p {
  margin: 0;
  color: #405577;
  font-size: 13px;
  line-height: 1.55;
}

.procedure-catalog-note {
  display: inline-flex;
  align-self: flex-end;
  margin: 8px 0 16px;
  padding: 8px 14px;
  border-radius: 12px;
  border: 1px solid #cfe0ff;
  background: #f7fbff;
  color: #0d47bf;
  font-weight: 800;
  font-size: 13px;
}

@media (max-width: 1180px) {
  .procedure-page-layout {
    grid-template-columns: 1fr;
  }

  .procedure-education-panel {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 760px) {
  .procedure-catalog-tabs {
    grid-template-columns: 1fr;
  }

  .procedure-education-panel {
    grid-template-columns: 1fr;
  }
}

.procedure-page-layout:has(.procedure-education-panel-collapsed) {
  grid-template-columns: minmax(0, 1fr) 180px;
}

.procedure-education-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #fff;
  border: 1px solid #dbe7f6;
  border-radius: 18px;
  padding: 18px 20px;
  box-shadow: 0 12px 30px rgba(15, 35, 80, 0.05);
}

.procedure-education-panel-collapsed {
  align-self: start;
}

.procedure-education-panel-collapsed .secondary-btn {
  width: 100%;
  justify-content: center;
  white-space: nowrap;
}

/* ================================
   Budgets - Quote editor
================================ */

.budget-quote-editor {
  margin: 16px 0;
  padding: 16px;
  border: 1px solid #dbe7f6;
  border-radius: 18px;
  background: #f8fbff;
  display: grid;
  gap: 12px;
}

.budget-quote-editor strong {
  display: block;
  font-size: 14px;
  font-weight: 900;
  color: #10203f;
}

.budget-quote-editor p {
  margin: 4px 0 0;
  font-size: 12px;
  font-weight: 700;
  color: #64748b;
}

.budget-quote-editor textarea {
  width: 100%;
  min-height: 86px;
  resize: vertical;
  border: 1px solid #dbe7f6;
  border-radius: 14px;
  padding: 12px;
  font-size: 13px;
  font-weight: 700;
  color: #10203f;
  background: #ffffff;
}

.budget-quote-editor-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.budget-quote-editor-actions small {
  color: #16a34a;
  font-size: 12px;
  font-weight: 800;
}

.budget-quote-editor-actions button {
  border: 1px solid #1557e6;
  background: #1557e6;
  color: #ffffff;
  border-radius: 999px;
  padding: 9px 14px;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}

.compound-component-add-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
}

.compound-component-add-row select {
  min-height: 44px;
}

.compound-components-list {
  display: grid;
  gap: 14px;
  margin-top: 16px;
}

.compound-component-card {
  background: #fff;
  border: 1px solid #dbe7f6;
  border-radius: 18px;
  padding: 18px;
}

.compound-components-totals {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-top: 16px;
}

.compound-components-totals div {
  background: #f7fbff;
  border: 1px solid #dbe7f6;
  border-radius: 16px;
  padding: 14px;
}

.compound-components-totals span {
  display: block;
  color: #60708f;
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 6px;
}

.compound-components-totals strong {
  color: #071836;
  font-size: 15px;
}

@media (max-width: 900px) {
  .compound-component-add-row,
  .compound-components-totals {
    grid-template-columns: 1fr;
  }
}

.calculation-compound-list {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.calculation-compound-item {
  border: 1px solid #dbe7f6;
  border-radius: 14px;
  padding: 12px 14px;
  background: #fff;
}

.calculation-compound-item strong {
  display: block;
  color: #071836;
}

.calculation-compound-item span {
  display: block;
  color: #60708f;
  font-size: 12px;
  margin-top: 2px;
}

.calculation-compound-item div {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

.calculation-compound-item small {
  background: #eef6ff;
  color: #1558e6;
  border-radius: 999px;
  padding: 4px 8px;
  font-weight: 800;
}

.procedure-tab-guide {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-bottom: 18px;
}

.procedure-tab-guide-card {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  background: linear-gradient(135deg, #f8fbff, #ffffff);
  border: 1px solid #dbe7f6;
  border-radius: 20px;
  padding: 24px;
  box-shadow: 0 18px 40px rgba(7, 24, 54, 0.05);
}

.procedure-tab-guide-card-green {
  background: linear-gradient(135deg, #f4fff8, #ffffff);
  border-color: #d7f1df;
}

.procedure-tab-guide-icon {
  width: 56px;
  height: 56px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #eaf3ff;
  color: #1558e6;
  font-size: 26px;
  flex: 0 0 auto;
}

.procedure-tab-guide-card-green .procedure-tab-guide-icon {
  background: #eafaf0;
  color: #0f8a4b;
}

.procedure-tab-guide-card h3 {
  margin: 0 0 8px;
  color: #071836;
  font-size: 18px;
}

.procedure-tab-guide-card p {
  margin: 0;
  color: #405174;
  line-height: 1.55;
  font-size: 14px;
}

@media (max-width: 900px) {
  .procedure-tab-guide {
    grid-template-columns: 1fr;
  }
}

.procedure-tab-guide {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}

.procedure-tab-guide-card {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  background: linear-gradient(135deg, #f8fbff, #ffffff);
  border: 1px solid #dbe7f6;
  border-radius: 18px;
  padding: 18px 20px;
}

.procedure-tab-guide-card-green {
  background: linear-gradient(135deg, #f4fff8, #ffffff);
  border-color: #d7f1df;
}

.procedure-tab-guide-icon {
  width: 46px;
  height: 46px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #eaf3ff;
  font-size: 22px;
  flex: 0 0 auto;
}

.procedure-tab-guide-card-green .procedure-tab-guide-icon {
  background: #eafaf0;
}

.procedure-tab-guide-card h3 {
  margin: 0 0 6px;
  color: #071836;
  font-size: 16px;
}

.procedure-tab-guide-card p {
  margin: 0;
  color: #405174;
  line-height: 1.45;
  font-size: 13px;
}

.procedureGuideExamplesBtn {
  margin-top: 10px;
  border: 0;
  background: #eaf3ff;
  color: #1558e6;
  border-radius: 999px;
  padding: 7px 12px;
  font-weight: 800;
  cursor: pointer;
}

.procedure-tab-guide-examples {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 10px;
}

.procedure-tab-guide-examples span {
  background: #ffffff;
  border: 1px solid #dbe7f6;
  border-radius: 999px;
  padding: 6px 10px;
  color: #071836;
  font-size: 12px;
  font-weight: 700;
}

.procedure-education-toggle {
  width: 42px;
  height: 42px;
  border-radius: 999px;
  border: 0;
  background: #eaf3ff;
  color: #1558e6;
  font-weight: 900;
  cursor: pointer;
}

@media (max-width: 900px) {
  .procedure-tab-guide {
    grid-template-columns: 1fr;
  }
}

.success-text {
  color: #047857;
  font-weight: 800;
}

.cost-item-session-list {
  margin-top: 14px;
  border: 1px solid #dbe7f6;
  background: #f8fbff;
  border-radius: 16px;
  padding: 12px;
}

.cost-item-session-list > strong {
  display: block;
  margin-bottom: 8px;
  color: #071836;
}

.cost-item-session-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  border-top: 1px solid #e3edf8;
  padding: 8px 0;
  font-size: 13px;
}

.cost-item-session-row:first-child {
  border-top: 0;
}

.cost-item-session-row strong {
  color: #1558e6;
}

.billing-payment-problem-card {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  align-items: center;
  padding: 28px;
  margin: 24px 0;
  border-radius: 28px;
  border: 1px solid #fed7aa;
  background:
    radial-gradient(circle at top right, rgba(251, 146, 60, 0.18), transparent 34%),
    linear-gradient(180deg, #fffaf5 0%, #fff7ed 100%);
  box-shadow: 0 18px 45px rgba(154, 52, 18, 0.08);
}

.billing-payment-problem-card h2 {
  margin: 6px 0 10px;
  color: #7c2d12;
  font-size: 24px;
  line-height: 1.15;
  letter-spacing: -0.03em;
}

.billing-payment-problem-card p {
  margin: 0;
  max-width: 760px;
  color: #9a3412;
  font-size: 15px;
  line-height: 1.7;
}

.billing-payment-problem-card .eyebrow {
  color: #c2410c;
}

.billing-payment-problem-card .primary-btn {
  flex: 0 0 auto;
}

@media (max-width: 760px) {
  .billing-payment-problem-card {
    align-items: stretch;
    flex-direction: column;
  }

  .billing-payment-problem-card .primary-btn {
    width: 100%;
  }
}

.billing-interval-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 28px;
  padding: 28px;
  margin: 24px 0;
  border-radius: 28px;
  border: 1px solid #e2e8f0;
  background: #ffffff;
  box-shadow: 0 18px 45px rgba(15, 23, 42, 0.06);
}

.billing-interval-card h2 {
  margin: 6px 0 10px;
  color: #0f172a;
  font-size: 24px;
  line-height: 1.15;
  letter-spacing: -0.03em;
}

.billing-interval-card p {
  margin: 0;
  max-width: 680px;
  color: #64748b;
  font-size: 15px;
  line-height: 1.7;
}

.billing-interval-toggle {
  display: inline-flex;
  gap: 8px;
  padding: 8px;
  border-radius: 999px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  flex: 0 0 auto;
}

.billing-interval-option {
  border: 0;
  cursor: pointer;
  padding: 12px 18px;
  border-radius: 999px;
  background: transparent;
  color: #64748b;
  font-size: 14px;
  font-weight: 800;
  transition: all 0.2s ease;
}

.billing-interval-option span {
  display: block;
  margin-top: 3px;
  font-size: 11px;
  font-weight: 700;
  color: inherit;
  opacity: 0.75;
}

.billing-interval-option.active {
  background: #0f172a;
  color: #ffffff;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.18);
}

.billing-plan-saving {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  margin: -4px 0 18px;
  padding: 8px 12px;
  border-radius: 999px;
  background: #ecfdf5;
  color: #047857;
  font-size: 12px;
  font-weight: 800;
}

@media (max-width: 820px) {
  .billing-interval-card {
    flex-direction: column;
    align-items: stretch;
  }

  .billing-interval-toggle {
    width: 100%;
  }

  .billing-interval-option {
    flex: 1;
  }
}


.treatment-item-breakdown {
  margin-top: 10px;
  padding: 10px 12px;
  border: 1px solid #dbeafe;
  border-radius: 14px;
  background: #f8fbff;
}

.treatment-item-breakdown strong {
  display: block;
  margin-bottom: 6px;
  color: #0f172a;
  font-size: 13px;
}

.treatment-item-breakdown ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.treatment-item-breakdown li {
  padding: 5px 9px;
  border-radius: 999px;
  background: #eaf3ff;
  color: #1d4ed8;
  font-size: 12px;
  font-weight: 800;
}

#staffCostPerMinutePreview {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}

#staffCostPerMinutePreview span {
  font-weight: 900;
}

#staffCostPerMinutePreview small {
  font-size: 12px;
  font-weight: 800;
  color: #64748b;
}



.budget-share-modal {
  width: min(620px, calc(100vw - 32px));
  background: #fff;
  border-radius: 28px;
  padding: 28px;
  position: relative;
  box-shadow: 0 24px 80px rgba(15, 23, 42, .18);
}

.budget-share-close {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 50%;
  background: #f1f5f9;
  font-size: 24px;
  cursor: pointer;
}

.budget-share-head {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  margin-bottom: 22px;
}

.budget-share-head h2 {
  margin: 0 0 6px;
  color: #0f172a;
  font-size: 26px;
}

.budget-share-head p {
  margin: 0;
  color: #64748b;
}

.budget-share-box,
.budget-share-email-box {
  border: 1px solid #dbeafe;
  background: #f8fbff;
  border-radius: 20px;
  padding: 18px;
  margin-top: 14px;
}

.budget-share-box span {
  display: block;
  color: #64748b;
  font-size: 13px;
  font-weight: 800;
  margin-bottom: 6px;
}

.budget-share-box strong {
  display: block;
  color: #0f172a;
}

.budget-share-box small {
  color: #64748b;
}

#budgetSharePdfUrl {
  width: 100%;
  margin-top: 8px;
  padding: 13px 14px;
  border: 1px solid #cbd5e1;
  border-radius: 14px;
  color: #0f172a;
}

.budget-share-actions {
  display: flex;
  gap: 10px;
  margin-top: 12px;
}

.budget-share-email-box h3 {
  margin: 0 0 6px;
}

.budget-share-email-box p {
  margin: 0 0 14px;
  color: #64748b;
}

#budgetShareStatus {
  display: block;
  margin-top: 10px;
  color: #2563eb;
  font-weight: 800;
}