: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 1fr;
}

.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;
}

.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;
}

.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 {
    grid-template-columns: 1fr;
  }

  .sidebar {
    position: static;
    height: auto;
    border-right: 0;
    border-bottom: 1px solid var(--border);
  }

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

  .main {
    padding: 22px;
  }

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

  .page-header {
    display: grid;
  }

  .card-head {
    display: grid;
  }

  .search-input {
    max-width: none;
  }

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

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

.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;
  justify-content: flex-end;
}

.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-row {
  display: grid;
  grid-template-columns: 52px 1.5fr 1fr 1.2fr auto auto;
  gap: 16px;
  align-items: center;
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: var(--surface-soft);
}

.patient-avatar {
  width: 46px;
  height: 46px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, rgba(37, 99, 235, .14), rgba(6, 182, 212, .14));
  color: var(--primary);
  font-weight: 900;
  font-size: 18px;
}

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

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

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

.patient-row > div > strong {
  font-size: 14px;
}

.patient-actions {
  display: flex;
  justify-content: flex-end;
}

.patient-modal {
  width: min(820px, 100%);
}

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

.patient-modal-note {
  border: 1px solid var(--border);
  background: var(--surface-soft);
  border-radius: 16px;
  padding: 14px;
  color: var(--muted);
  font-size: 14px;
}

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

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

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

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

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

  .patient-avatar {
    display: none;
  }

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

.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: 1.4fr 1fr 1fr auto 1.2fr;
  gap: 16px;
  align-items: center;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--surface-soft);
}

.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-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;
}

.sidebar-open-btn {
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: #fff;
  font-size: 20px;
  font-weight: 800;
  box-shadow: var(--shadow);
  margin-bottom: 18px;
}

.app-shell.sidebar-collapsed {
  grid-template-columns: 1fr;
}

.app-shell.sidebar-collapsed .sidebar {
  display: none;
}

@media (max-width: 900px) {
  .sidebar-close-btn {
    display: none;
  }

  .sidebar-open-btn {
    display: none !important;
  }
}

.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(4, minmax(0, 1fr));
  gap: 18px;
  margin-bottom: 26px;
}

.fixed-cost-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);
}

.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;
  top: calc(100% + 8px);
  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-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;
  top: 42px !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
========================= */

.nav-item {
  position: relative;
}

.nav-setup-dot {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: #ef4444;
  box-shadow: 0 0 0 4px rgba(239, 68, 68, .12);
}

.nav-item.needs-setup .nav-label {
  padding-right: 14px;
}

.klynic-setup-notice {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 16px;
  align-items: flex-start;
  margin-bottom: 24px;
  padding: 18px;
  border: 1px solid #bfdbfe;
  border-radius: 22px;
  background:
    radial-gradient(circle at top right, rgba(37, 99, 235, .10), transparent 32%),
    linear-gradient(180deg, #f8fbff 0%, #ffffff 100%);
  box-shadow: 0 14px 36px rgba(15, 23, 42, .06);
}

.klynic-setup-notice-icon {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  color: #ffffff;
  font-weight: 950;
  box-shadow: 0 14px 26px rgba(37, 99, 235, .18);
}

.klynic-setup-notice-copy strong {
  display: block;
  color: #0f172a;
  font-size: 16px;
  font-weight: 950;
}

.klynic-setup-notice-copy p {
  margin: 6px 0 14px;
  color: #475569;
  font-size: 14px;
  line-height: 1.5;
  font-weight: 650;
}

.klynic-setup-notice-items {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.klynic-setup-notice-items button {
  border: 1px solid #dbeafe;
  border-radius: 999px;
  padding: 8px 12px;
  background: #eff6ff;
  color: #1d4ed8;
  font-size: 12px;
  font-weight: 900;
}

.klynic-setup-notice-items button:hover {
  background: #dbeafe;
}

@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%;
  }
}