:root {
  --bg: #F8F4EF;
  --panel: #FFFFFF;
  --text: #2F3430;
  --muted: #788278;
  --line: #E9E0D7;
  --primary: #8FAE9B;
  --primary-dark: #7C9B88;
  --primary-soft: #F3EEE7;
  --secondary: #E8D8CE;
  --accent: #F3EEE7;
  --danger: #B42318;
  --sidebar-bg: #FCFAF7;
  --sidebar-text: #2F3430;
  --sidebar-muted: #788278;
  --sidebar-active-bg: rgba(143, 174, 155, .16);
  --sidebar-active-text: #2F3430;
  --primary-rgb: 143, 174, 155;
  --secondary-rgb: 232, 216, 206;
  --accent-rgb: 243, 238, 231;
  --sidebar-rgb: 252, 250, 247;
  --bg-rgb: 248, 244, 239;
  --panel-rgb: 255, 255, 255;
  --text-rgb: 47, 52, 48;
  --muted-rgb: 120, 130, 120;
  --soft-surface: rgba(243, 238, 231, .72);
  --btn-radius: 18px;
  --card-radius: 24px;
  --shadow: 0 18px 45px rgba(47, 52, 48, 0.08);
}

* { box-sizing: border-box; }

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

.sidebar {
  width: 290px;
  background: #4A342A;
  color: white;
  padding: 24px;
  display: flex;
  flex-direction: column;
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 20;
}

.brand {
  display: flex;
  gap: 14px;
  align-items: center;
  margin-bottom: 34px;
}

.brand-icon {
  width: 48px;
  height: 48px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--accent), #B2967D);
  color: #4A342A;
  font-weight: 900;
}

.brand h1 { font-size: 18px; margin: 0; }
.brand p { margin: 2px 0 0; color: #B2967D; font-size: 13px; }

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

.nav-btn {
  border: 0;
  background: transparent;
  color: #D7C9B8;
  text-align: left;
  padding: 13px 14px;
  border-radius: 14px;
  cursor: pointer;
  font-weight: 700;
}

.nav-btn:hover, .nav-btn.active {
  background: rgba(178, 150, 125, 0.14);
  color: white;
}

.sidebar-footer {
  margin-top: auto;
  color: #B2967D;
  font-size: 13px;
  border-top: 1px solid rgba(255,255,255,.08);
  padding-top: 20px;
}

.sidebar-footer p { margin: 0 0 4px; color: white; font-weight: 700; }

.main {
  margin-left: 290px;
  width: calc(100% - 290px);
  padding: 28px;
}

.mobile-header {
  display: none;
}

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

.topbar h2 { margin: 0; font-size: 30px; }
.topbar p { margin: 6px 0 0; color: var(--muted); }

.section { display: none; }
.section.active { display: block; }

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

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

.stat-card { padding: 22px; }
.stat-card span { color: var(--muted); font-weight: 700; font-size: 14px; }
.stat-card strong { display: block; font-size: 32px; margin-top: 8px; }

.panel { padding: 22px; }
.panel h3 { margin: 0 0 16px; }
.panel p { color: var(--muted); }

.split {
  display: grid;
  grid-template-columns: 390px 1fr;
  gap: 22px;
  align-items: start;
}

.form-panel { display: grid; gap: 14px; }

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

input, textarea, select {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 13px;
  padding: 12px 13px;
  font: inherit;
  outline: none;
  background: #FFFFFF;
}

input:focus, textarea:focus, select:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 4px rgba(74, 52, 42, .1);
}

.primary-btn, .secondary-btn, .danger-btn {
  border: 0;
  border-radius: 14px;
  padding: 12px 15px;
  cursor: pointer;
  font-weight: 800;
}

.primary-btn { background: var(--primary); color: white; }
.primary-btn:hover { background: var(--primary-dark); }
.secondary-btn { background: #F5F1EA; color: var(--text); }
.danger-btn { background: #FEE4E2; color: var(--danger); }

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

.panel-head h3, .panel-head p { margin: 0; }
.panel-head input, .panel-head select { max-width: 300px; }

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

.item {
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 15px;
  background: #FFFFFF;
}

.item-head {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: start;
}

.item h4 { margin: 0 0 5px; }
.item p { margin: 4px 0; color: var(--muted); }

.item-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.badge {
  display: inline-flex;
  border-radius: 999px;
  padding: 5px 10px;
  font-size: 12px;
  font-weight: 900;
  background: #F5F1EA;
  color: var(--primary);
}

.badge.warning { background: #F5F1EA; color: #991B1B; }
.badge.danger { background: #FEE4E2; color: var(--danger); }

.legend {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin: 18px 0;
}

.legend-btn {
  border: 1px solid var(--line);
  background: white;
  border-radius: 999px;
  padding: 10px 13px;
  cursor: pointer;
  font-weight: 800;
}

.legend-btn.active {
  background: var(--primary);
  color: white;
  border-color: var(--primary);
}

.teeth-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 12px;
  margin-bottom: 20px;
}

.tooth {
  border: 2px solid var(--line);
  min-height: 70px;
  border-radius: 18px;
  cursor: pointer;
  display: grid;
  place-items: center;
  font-weight: 900;
  background: white;
  transition: transform .15s ease, box-shadow .15s ease;
}

.tooth:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}

.tooth.healthy { background: #FFFFFF; }
.tooth.caries { background: #FEE4E2; border-color: var(--danger); }
.tooth.restoration { background: #D7C9B8; border-color: #7D5A44; }
.tooth.missing { background: #D7C9B8; border-color: #7D5A44; color: #7D5A44; }
.tooth.ortho { background: #F5F1EA; border-color: #B2967D; }
.tooth.pending { background: #D7C9B8; border-color: #7D5A44; }

.overlay {
  display: none;
}

/* Responsive tablets */
@media (max-width: 1100px) {
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }

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

  .teeth-grid {
    grid-template-columns: repeat(6, 1fr);
  }
}

/* Responsive móvil */
@media (max-width: 760px) {
  body {
    display: block;
  }

  .mobile-header {
    display: flex;
    position: sticky;
    top: 0;
    z-index: 15;
    align-items: center;
    gap: 12px;
    background: #4A342A;
    color: white;
    padding: 14px 16px;
    margin: -16px -16px 18px;
  }

  .menu-btn {
    border: 0;
    background: rgba(255,255,255,.12);
    color: white;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    font-size: 22px;
    cursor: pointer;
  }

  .sidebar {
    transform: translateX(-105%);
    transition: transform .25s ease;
    width: 82%;
    max-width: 330px;
  }

  .sidebar.open {
    transform: translateX(0);
  }

  .overlay.show {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(74, 52, 42, .48);
    z-index: 18;
  }

  .main {
    margin-left: 0;
    width: 100%;
    padding: 16px;
  }

  .topbar {
    align-items: stretch;
    flex-direction: column;
  }

  .topbar h2 {
    font-size: 25px;
  }

  .topbar .primary-btn {
    width: 100%;
  }

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

  .stat-card, .panel {
    border-radius: 18px;
  }

  .panel {
    padding: 16px;
  }

  .panel-head {
    flex-direction: column;
  }

  .panel-head input, .panel-head select {
    max-width: none;
  }

  .item-head {
    flex-direction: column;
  }

  .item-actions button {
    flex: 1;
  }

  .teeth-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 9px;
  }

  .tooth {
    min-height: 58px;
    border-radius: 14px;
  }

  .legend-btn {
    flex: 1 1 calc(50% - 10px);
  }
}

/* Móvil pequeño */
@media (max-width: 420px) {
  .teeth-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .brand h1 {
    font-size: 16px;
  }

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


input[readonly] {
  background: #F5F1EA;
  color: var(--muted);
  cursor: not-allowed;
}

.specialist-meta {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 8px;
}

.chip {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 5px 9px;
  background: #F5F1EA;
  color: #4A342A;
  font-size: 12px;
  font-weight: 800;
}


.hidden {
  display: none !important;
}

.patient-profile {
  margin-top: 22px;
}

.profile-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(240px, 1fr));
  gap: 16px;
}

.profile-grid article {
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 16px;
  background: #FFFFFF;
}

.profile-grid h4 {
  margin: 0 0 10px;
}

.mini-list {
  display: grid;
  gap: 8px;
}

.mini-item {
  border-radius: 14px;
  background: #F5F1EA;
  padding: 11px;
  border: 1px solid #F5F1EA;
}

.mini-item p {
  margin: 3px 0;
}

.balance-box {
  border: 1px dashed var(--primary);
  border-radius: 14px;
  padding: 12px;
  background: #F5F1EA;
  color: #4A342A;
  font-weight: 800;
}

.appointment-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 10px;
}

.appointment-actions button {
  flex: 1 1 120px;
}

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

  .appointment-actions {
    flex-direction: column;
  }

  .appointment-actions button {
    width: 100%;
  }
}


.quick-help {
  border-radius: 14px;
  padding: 10px 12px;
  background: #F5F1EA;
  border: 1px solid var(--line);
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.quick-help strong {
  color: var(--text);
}


.session-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.user-pill {
  border: 1px solid var(--line);
  background: white;
  border-radius: 999px;
  padding: 10px 13px;
  font-size: 13px;
  font-weight: 800;
  color: var(--text);
}

.logout-btn {
  text-decoration: none;
  border-radius: 14px;
  padding: 12px 15px;
  background: #FEE4E2;
  color: #991B1B;
  font-weight: 900;
}

.login-body {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 18px;
  background:
    radial-gradient(circle at top left, rgba(178, 150, 125, .35), transparent 35%),
    linear-gradient(135deg, #4A342A, #4A342A);
}

.login-card {
  width: min(440px, 100%);
  background: white;
  border-radius: 28px;
  padding: 30px;
  box-shadow: 0 28px 80px rgba(74, 52, 42, .32);
}

.login-logo {
  width: 58px;
  height: 58px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--accent), #B2967D);
  color: #4A342A;
  font-weight: 1000;
  margin-bottom: 16px;
}

.login-card h1 {
  margin: 0;
  font-size: 28px;
}

.login-card p {
  color: var(--muted);
}

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

.login-error {
  border-radius: 14px;
  background: #FEE4E2;
  color: #991B1B;
  padding: 12px;
  font-weight: 800;
}

.login-note {
  margin-top: 14px;
  border-radius: 14px;
  background: #F5F1EA;
  border: 1px solid var(--line);
  padding: 12px;
  color: var(--muted);
  font-size: 13px;
}

@media (max-width: 760px) {
  .session-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .session-actions > * {
    width: 100%;
    text-align: center;
  }
}


/* Mejoras visuales para login e instalación */
body.login-body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 22px;
  background:
    radial-gradient(circle at 15% 10%, rgba(178, 150, 125, .35), transparent 30%),
    radial-gradient(circle at 85% 20%, rgba(74, 52, 42, .24), transparent 26%),
    linear-gradient(135deg, #F5F1EA 0%, #F5F1EA 48%, #F5F1EA 100%);
}

.login-card {
  width: min(460px, calc(100vw - 34px));
  background: rgba(255, 255, 255, .96);
  border: 1px solid rgba(215, 201, 184, .95);
  border-radius: 30px;
  padding: 34px;
  box-shadow: 0 28px 90px rgba(74, 52, 42, .16);
  margin: auto;
}

.login-logo {
  width: 64px;
  height: 64px;
  border-radius: 22px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--accent), #B2967D);
  color: #4A342A;
  font-weight: 1000;
  margin: 0 auto 18px;
  letter-spacing: -.5px;
}

.login-card h1 {
  margin: 0;
  text-align: center;
  font-size: clamp(28px, 5vw, 36px);
  letter-spacing: -.8px;
}

.login-card > p {
  text-align: center;
  margin: 10px 0 0;
  color: var(--muted);
}

.login-form {
  display: grid;
  gap: 15px;
  margin-top: 26px;
}

.login-form label {
  font-size: 13px;
}

.login-form input {
  min-height: 48px;
  border-radius: 16px;
  background: #FFFFFF;
}

.login-form .primary-btn,
.login-card .primary-btn {
  min-height: 48px;
  border-radius: 16px;
  width: 100%;
  display: inline-grid;
  place-items: center;
  text-decoration: none;
}

.login-error {
  margin-top: 18px;
  border-radius: 16px;
  background: #FEE4E2;
  border: 1px solid #FECACA;
  color: #991B1B;
  padding: 13px 14px;
  font-weight: 800;
  line-height: 1.4;
}

.login-note {
  margin-top: 16px;
  border-radius: 16px;
  background: #F5F1EA;
  border: 1px solid var(--line);
  padding: 13px 14px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.db-help {
  margin-top: 14px;
  border-radius: 16px;
  background: #F5F1EA;
  border: 1px solid #D7C9B8;
  color: #991B1B;
  padding: 13px 14px;
  font-size: 13px;
  line-height: 1.45;
}

.db-help code {
  background: rgba(153, 27, 27, .08);
  border-radius: 8px;
  padding: 2px 6px;
}

@media (max-width: 520px) {
  body.login-body {
    padding: 14px;
  }

  .login-card {
    padding: 24px;
    border-radius: 24px;
  }
}


.success-box {
  margin-top: 18px;
  border-radius: 16px;
  background: #F5F1EA;
  border: 1px solid #D7C9B8;
  color: #4A342A;
  padding: 13px 14px;
  font-weight: 900;
  line-height: 1.4;
}

.login-note code,
.db-help code {
  background: rgba(74, 52, 42, .07);
  border-radius: 8px;
  padding: 2px 6px;
  color: #4A342A;
  font-weight: 800;
}


.installer-card {
  width: min(760px, calc(100vw - 34px));
}

.installer-form h3 {
  margin: 14px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  font-size: 17px;
}

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

.installer-actions .secondary-btn {
  width: 100%;
}

@media (max-width: 640px) {
  .installer-card {
    width: min(100%, calc(100vw - 22px));
  }
}


.installer-card {
  width: min(760px, calc(100vw - 34px));
}

.installer-form h3 {
  margin: 16px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  font-size: 17px;
}

body.login-body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 22px;
  background:
    radial-gradient(circle at 15% 10%, rgba(178, 150, 125, .35), transparent 30%),
    radial-gradient(circle at 85% 20%, rgba(74, 52, 42, .24), transparent 26%),
    linear-gradient(135deg, #F5F1EA 0%, #F5F1EA 48%, #F5F1EA 100%);
}

.login-card {
  width: min(460px, calc(100vw - 34px));
  background: rgba(255, 255, 255, .97);
  border: 1px solid rgba(215, 201, 184, .95);
  border-radius: 30px;
  padding: 34px;
  box-shadow: 0 28px 90px rgba(74, 52, 42, .16);
  margin: auto;
}

.login-logo {
  margin: 0 auto 18px;
}

.login-card h1,
.login-card > p {
  text-align: center;
}

.success-box {
  margin-top: 18px;
  border-radius: 16px;
  background: #F5F1EA;
  border: 1px solid #D7C9B8;
  color: #4A342A;
  padding: 13px 14px;
  font-weight: 900;
  line-height: 1.4;
}


/* Corrección visual: especialistas */
.specialists-panel {
  overflow: hidden;
}

.specialist-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
}

.specialist-card {
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 16px;
  background: linear-gradient(180deg, #FFFFFF 0%, #F5F1EA 100%);
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 14px;
  align-items: start;
  box-shadow: 0 12px 28px rgba(74, 52, 42, .06);
}

.specialist-avatar {
  width: 52px;
  height: 52px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--accent), #B2967D);
  color: #4A342A;
  font-weight: 1000;
  font-size: 22px;
}

.specialist-content h4 {
  margin: 0 0 8px;
}

.specialist-content p {
  margin: 10px 0 0;
  color: var(--muted);
  line-height: 1.45;
}

.specialist-badge {
  display: inline-flex;
  border-radius: 999px;
  padding: 6px 10px;
  background: #F5F1EA;
  color: #4A342A;
  font-size: 12px;
  font-weight: 900;
}

.specialist-actions {
  grid-column: 1 / -1;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.specialist-actions button {
  flex: 1;
}

/* Ficha paciente */
.patient-profile {
  margin-top: 22px;
}

.profile-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(240px, 1fr));
  gap: 16px;
}

.profile-grid article {
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 16px;
  background: #FFFFFF;
}

.mini-list {
  display: grid;
  gap: 8px;
}

.mini-item {
  border-radius: 14px;
  background: #F5F1EA;
  padding: 11px;
  border: 1px solid #F5F1EA;
}

.hidden {
  display: none !important;
}




.search-results {
  position: absolute;
  z-index: 50;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: 0 18px 45px rgba(74, 52, 42, .14);
  overflow: hidden;
}

.search-result-item {
  width: 100%;
  border: 0;
  background: white;
  padding: 12px 14px;
  text-align: left;
  cursor: pointer;
  display: grid;
  gap: 3px;
}

.search-result-item:hover {
  background: #F5F1EA;
}

.search-result-item span,
.search-result-empty {
  color: var(--muted);
  font-size: 13px;
}

.search-result-empty {
  padding: 12px 14px;
}

.empty-odontogram {
  grid-column: 1 / -1;
  border: 1px dashed var(--line);
  border-radius: 18px;
  padding: 24px;
  color: var(--muted);
  text-align: center;
  background: #F5F1EA;
}

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

  .specialist-card {
    grid-template-columns: 44px 1fr;
  }

  .specialist-avatar {
    width: 44px;
    height: 44px;
    border-radius: 15px;
  }

  
}


/* Instalador profesional */
.install-body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 28px;
  background:
    radial-gradient(circle at 20% 10%, rgba(178, 150, 125, .45), transparent 32%),
    radial-gradient(circle at 90% 20%, rgba(74, 52, 42, .22), transparent 30%),
    linear-gradient(135deg, #F5F1EA 0%, #F5F1EA 52%, #F5F1EA 100%);
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.install-shell {
  width: min(1100px, 100%);
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 24px;
  align-items: stretch;
}

.install-hero,
.install-card {
  background: rgba(255,255,255,.96);
  border: 1px solid rgba(215, 201, 184,.95);
  border-radius: 32px;
  box-shadow: 0 28px 90px rgba(74, 52, 42,.14);
}

.install-hero {
  padding: 34px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.install-logo {
  width: 68px;
  height: 68px;
  border-radius: 22px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--accent), #B2967D);
  color: #4A342A;
  font-weight: 1000;
  font-size: 24px;
  margin-bottom: 20px;
}

.install-kicker {
  color: var(--primary);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: 12px;
}

.install-hero h1 {
  margin: 10px 0;
  font-size: clamp(34px, 5vw, 52px);
  line-height: .98;
  letter-spacing: -1.6px;
}

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

.install-steps {
  display: grid;
  gap: 12px;
  margin-top: 24px;
}

.install-steps div {
  display: flex;
  gap: 12px;
  align-items: center;
  background: #F5F1EA;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 12px;
}

.install-steps strong {
  width: 34px;
  height: 34px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: #4A342A;
  color: white;
}

.install-card {
  padding: 28px;
}

.install-form {
  display: grid;
  gap: 16px;
}

.install-section-title {
  display: flex;
  gap: 12px;
  align-items: start;
  margin-top: 6px;
}

.install-section-title span {
  width: 38px;
  height: 38px;
  border-radius: 14px;
  background: #F5F1EA;
  color: #4A342A;
  display: grid;
  place-items: center;
  font-weight: 1000;
}

.install-section-title h2 {
  margin: 0;
  font-size: 20px;
}

.install-section-title p {
  margin: 4px 0 0;
  color: var(--muted);
}

.install-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}

.install-span {
  grid-column: 1 / -1;
}

.install-full {
  width: 100%;
  justify-content: center;
  text-decoration: none;
}

.install-note {
  margin-top: 16px;
  background: #F5F1EA;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 13px;
  color: var(--muted);
}

/* Paciente cards + historial */
.patient-card {
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: 16px;
  background: #FFFFFF;
  box-shadow: 0 12px 28px rgba(74, 52, 42,.06);
  display: grid;
  gap: 12px;
}

.patient-card-main {
  display: flex;
  gap: 14px;
  align-items: start;
}

.patient-avatar {
  width: 52px;
  height: 52px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--accent), #B2967D);
  font-weight: 1000;
}

.patient-card h4 {
  margin: 0 0 6px;
}

.patient-card p {
  margin: 4px 0;
}

.patient-process-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.patient-process-summary span {
  border-radius: 999px;
  background: #F5F1EA;
  padding: 7px 10px;
  font-size: 12px;
  font-weight: 900;
}

.summary-warning {
  background: #F5F1EA !important;
  color: #991B1B;
}

.next-appointment {
  border-radius: 16px;
  background: #F5F1EA;
  color: #4A342A;
  padding: 10px 12px;
  font-weight: 800;
}

.timeline {
  margin-bottom: 18px;
}

.timeline h4 {
  margin: 0 0 12px;
}

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

.timeline-item {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--line);
  background: #FFFFFF;
  border-radius: 18px;
}

.timeline-item span {
  height: fit-content;
  border-radius: 999px;
  background: #F5F1EA;
  color: #4A342A;
  padding: 6px 9px;
  font-size: 12px;
  font-weight: 900;
  text-align: center;
}

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

.timeline-item small {
  color: var(--muted);
}

.empty-timeline {
  border: 1px dashed var(--line);
  border-radius: 18px;
  padding: 16px;
  color: var(--muted);
  background: #F5F1EA;
}

.mini-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 8px;
}

.mini-actions button {
  border: 0;
  border-radius: 10px;
  padding: 7px 9px;
  cursor: pointer;
  font-weight: 800;
  background: #F5F1EA;
}

/* Mensajes */
.message-tool {
  display: grid;
  gap: 14px;
  max-width: 720px;
}

.search-results-inline {
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  background: white;
  box-shadow: 0 12px 32px rgba(74, 52, 42,.08);
}

.selected-patient-card {
  border: 1px solid #D7C9B8;
  background: #F5F1EA;
  border-radius: 18px;
  padding: 13px;
  display: grid;
  gap: 4px;
  color: #4A342A;
}

.selected-patient-card span {
  font-size: 13px;
}

.soft-divider {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 22px 0;
}

@media (max-width: 900px) {
  .install-shell {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .install-body {
    padding: 14px;
  }

  .install-hero,
  .install-card {
    border-radius: 24px;
    padding: 22px;
  }

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

  .timeline-item {
    grid-template-columns: 1fr;
  }
}


/* =========================================================
   RESPONSIVE MEJORADO PARA LA PRIMERA PANTALLA / INSTALL
   ========================================================= */

.install-body {
  width: 100%;
  overflow-x: hidden;
}

.install-shell {
  margin: 0 auto;
}

.install-hero,
.install-card {
  min-width: 0;
}

.install-form input,
.install-form select,
.install-form textarea {
  width: 100%;
  max-width: 100%;
}

/* Tablet */
@media (max-width: 1024px) {
  .install-shell {
    width: min(760px, 100%);
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .install-hero {
    text-align: center;
    align-items: center;
  }

  .install-logo {
    margin-left: auto;
    margin-right: auto;
  }

  .install-steps {
    width: 100%;
    grid-template-columns: repeat(3, 1fr);
  }

  .install-steps div {
    justify-content: center;
    text-align: center;
    flex-direction: column;
  }
}

/* Celular */
@media (max-width: 640px) {
  .install-body {
    padding: 12px;
    align-items: start;
  }

  .install-shell {
    width: 100%;
    gap: 12px;
  }

  .install-hero,
  .install-card {
    width: 100%;
    border-radius: 22px;
    padding: 18px;
  }

  .install-hero h1 {
    font-size: 30px;
    line-height: 1.03;
    letter-spacing: -1px;
  }

  .install-hero p {
    font-size: 14px;
    line-height: 1.5;
  }

  .install-logo {
    width: 56px;
    height: 56px;
    border-radius: 18px;
    font-size: 20px;
    margin-bottom: 14px;
  }

  .install-kicker {
    font-size: 11px;
  }

  .install-steps {
    grid-template-columns: 1fr;
    gap: 8px;
    margin-top: 16px;
  }

  .install-steps div {
    flex-direction: row;
    justify-content: flex-start;
    text-align: left;
    padding: 10px;
  }

  .install-steps strong {
    width: 30px;
    height: 30px;
    border-radius: 10px;
    flex: 0 0 30px;
  }

  .install-section-title {
    gap: 10px;
  }

  .install-section-title span {
    width: 34px;
    height: 34px;
    border-radius: 12px;
    flex: 0 0 34px;
  }

  .install-section-title h2 {
    font-size: 18px;
  }

  .install-section-title p {
    font-size: 13px;
    line-height: 1.4;
  }

  .install-grid {
    grid-template-columns: 1fr;
    gap: 11px;
  }

  .install-form {
    gap: 13px;
  }

  .install-form label {
    font-size: 13px;
  }

  .install-form input {
    min-height: 46px;
    border-radius: 14px;
    font-size: 15px;
  }

  .install-full,
  .install-form .primary-btn,
  .install-form .secondary-btn {
    min-height: 46px;
    border-radius: 14px;
    font-size: 14px;
  }

  .install-note,
  .success-box,
  .login-error,
  .db-help {
    font-size: 13px;
    line-height: 1.45;
    border-radius: 14px;
    padding: 12px;
  }
}

/* Celular muy pequeño */
@media (max-width: 390px) {
  .install-body {
    padding: 8px;
  }

  .install-hero,
  .install-card {
    padding: 15px;
    border-radius: 18px;
  }

  .install-hero h1 {
    font-size: 26px;
  }

  .install-section-title {
    align-items: center;
  }

  .install-section-title p {
    display: none;
  }
}



.legend-btn {
  position: relative;
  border-width: 2px;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

.legend-btn::before {
  content: "";
  width: 12px;
  height: 12px;
  border-radius: 999px;
  display: inline-block;
  margin-right: 7px;
  vertical-align: -1px;
  background: #FFFFFF;
  border: 1px solid var(--line);
}

.legend-btn.active {
  transform: translateY(-2px);
  box-shadow: 0 14px 28px rgba(74, 52, 42, .16);
  color: #4A342A;
}

.legend-btn.legend-healthy::before,
.selected-odontogram-status.status-healthy::before {
  background: #FFFFFF;
  border-color: #B2967D;
}

.legend-btn.legend-caries::before,
.selected-odontogram-status.status-caries::before {
  background: #B42318;
  border-color: #991B1B;
}

.legend-btn.legend-restoration::before,
.selected-odontogram-status.status-restoration::before {
  background: #B2967D;
  border-color: #7D5A44;
}

.legend-btn.legend-missing::before,
.selected-odontogram-status.status-missing::before {
  background: #7D5A44;
  border-color: #4A342A;
}

.legend-btn.legend-ortho::before,
.selected-odontogram-status.status-ortho::before {
  background: #B2967D;
  border-color: #7D5A44;
}

.legend-btn.legend-pending::before,
.selected-odontogram-status.status-pending::before {
  background: #7D5A44;
  border-color: #7D5A44;
}

.legend-btn.active.legend-healthy {
  background: #F5F1EA;
  border-color: #B2967D;
}

.legend-btn.active.legend-caries {
  background: #FEE4E2;
  border-color: #B42318;
}

.legend-btn.active.legend-restoration {
  background: #D7C9B8;
  border-color: #B2967D;
}

.legend-btn.active.legend-missing {
  background: #D7C9B8;
  border-color: #7D5A44;
}

.legend-btn.active.legend-ortho {
  background: #F5F1EA;
  border-color: #B2967D;
}

.legend-btn.active.legend-pending {
  background: #D7C9B8;
  border-color: #7D5A44;
}

.selected-odontogram-status {
  display: flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  max-width: 100%;
  margin: -4px 0 18px;
  border-radius: 16px;
  padding: 10px 13px;
  border: 1px solid var(--line);
  background: #FFFFFF;
  color: var(--text);
  box-shadow: 0 10px 24px rgba(74, 52, 42, .06);
}

.selected-odontogram-status::before {
  content: "";
  width: 16px;
  height: 16px;
  border-radius: 999px;
  flex: 0 0 16px;
  border: 1px solid var(--line);
}

.tooth {
  position: relative;
  font-size: 17px;
}

.tooth.caries {
  background: #FEE4E2;
  border-color: #B42318;
  color: #991B1B;
}

.tooth.restoration {
  background: #D7C9B8;
  border-color: #B2967D;
  color: #7D5A44;
}

.tooth.missing {
  background: #D7C9B8;
  border-color: #7D5A44;
  color: #4A342A;
  text-decoration: line-through;
}

.tooth.ortho {
  background: #F5F1EA;
  border-color: #B2967D;
  color: #7D5A44;
}

.tooth.pending {
  background: #D7C9B8;
  border-color: #7D5A44;
  color: #4A342A;
}

.tooth.healthy {
  background: #FFFFFF;
  border-color: #D7C9B8;
  color: #4A342A;
}

/* Pagos: concepto editable claramente */
#paymentTreatment:not([readonly]) {
  background: #FFFFFF;
  border-color: #4A342A;
}

#paymentTreatment[readonly] {
  background: #F5F1EA;
}


/* =========================================================
   CORRECCIÓN GLOBAL DE CENTRADO
   Evita que login/install/panel se peguen a la izquierda
   ========================================================= */

html,
body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

/* Login e instalador completamente centrados */
body.login-body,
body.install-body {
  width: 100%;
  min-height: 100vh;
  margin: 0;
  display: grid !important;
  place-items: center !important;
  padding: 24px !important;
  box-sizing: border-box;
}

/* Contenedor del instalador */
.install-shell {
  width: min(1120px, 100%) !important;
  max-width: 1120px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box;
}

/* Tarjetas internas */
.install-hero,
.install-card,
.login-card {
  box-sizing: border-box;
}

/* Login centrado */
.login-card {
  width: min(460px, 100%) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Panel interno centrado cuando no hay sidebar móvil */
.main {
  box-sizing: border-box;
}

/* En escritorio, el contenido del panel queda respirando mejor */
@media (min-width: 761px) {
  .main {
    padding-left: 34px;
    padding-right: 34px;
  }

  .topbar,
  .section.active {
    max-width: 1320px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* Tablet: instalador una columna y centrado */
@media (max-width: 1024px) {
  body.login-body,
  body.install-body {
    padding: 18px !important;
  }

  .install-shell {
    grid-template-columns: 1fr !important;
    width: min(760px, 100%) !important;
    max-width: 760px !important;
  }
}

/* Celular: nunca pegado al borde izquierdo */
@media (max-width: 640px) {
  body.login-body,
  body.install-body {
    padding: 12px !important;
    place-items: start center !important;
  }

  .install-shell,
  .login-card {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .install-hero,
  .install-card,
  .login-card {
    width: 100% !important;
    max-width: 100% !important;
  }

  .main {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }
}

/* Celular muy pequeño */
@media (max-width: 390px) {
  body.login-body,
  body.install-body {
    padding: 8px !important;
  }
}


/* Limpieza visual solicitada */


#selectedOdontogramStatus,
.selected-odontogram-status,
.empty-odontogram {
  display: none !important;
}

/* Especialistas sin letras/avatares sueltos */
.specialist-avatar,
.specialist-card > .specialist-avatar {
  display: none !important;
}

.specialist-grid-clean {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
}

.specialist-card-clean {
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 18px;
  background: #FFFFFF;
  box-shadow: 0 12px 28px rgba(74, 52, 42, .06);
  display: grid;
  gap: 12px;
  overflow: hidden;
}

.specialist-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.specialist-card-head h4 {
  margin: 0 0 8px;
  font-size: 17px;
}

.specialist-card-head span {
  display: inline-flex;
  width: fit-content;
  border-radius: 999px;
  padding: 6px 10px;
  background: #F5F1EA;
  color: #4A342A;
  font-size: 12px;
  font-weight: 900;
}

.specialist-card-clean p {
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.specialist-actions-clean {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.specialist-actions-clean button {
  flex: 1;
  min-width: 110px;
}




.legend {
  margin-bottom: 16px;
}

@media (max-width: 640px) {
  .specialist-grid-clean {
    grid-template-columns: 1fr;
  }

  .specialist-actions-clean {
    flex-direction: column;
  }

  .specialist-actions-clean button {
    width: 100%;
  }
}


/* Corrección pacientes: elimina letras/avatares sueltos */
.patient-avatar {
  display: none !important;
}

.clean-patient-card,
.patient-card {
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: 18px;
  background: #FFFFFF;
  box-shadow: 0 12px 28px rgba(74, 52, 42, .06);
  display: grid;
  gap: 12px;
}

.clean-patient-main,
.patient-card-main {
  display: block !important;
}

.clean-patient-card h4,
.patient-card h4 {
  margin: 0 0 12px;
  font-size: 18px;
}

.clean-patient-card p,
.patient-card p {
  margin: 7px 0;
  line-height: 1.45;
}

.patient-process-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}

.patient-process-summary span {
  border-radius: 999px;
  background: #F5F1EA;
  padding: 7px 10px;
  font-size: 12px;
  font-weight: 900;
}

.summary-warning {
  background: #F5F1EA !important;
  color: #991B1B;
}

.patient-profile {
  margin-top: 22px;
}

.profile-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(240px, 1fr));
  gap: 16px;
}

.profile-grid article {
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 16px;
  background: #FFFFFF;
}

.timeline {
  margin-bottom: 18px;
}

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

.timeline-item {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--line);
  background: #FFFFFF;
  border-radius: 18px;
}

.timeline-item span {
  height: fit-content;
  border-radius: 999px;
  background: #F5F1EA;
  color: #4A342A;
  padding: 6px 9px;
  font-size: 12px;
  font-weight: 900;
  text-align: center;
}

.empty-timeline {
  border: 1px dashed var(--line);
  border-radius: 18px;
  padding: 16px;
  color: var(--muted);
  background: #F5F1EA;
}

.mini-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 8px;
}

.mini-actions button {
  border: 0;
  border-radius: 10px;
  padding: 7px 9px;
  cursor: pointer;
  font-weight: 800;
  background: #F5F1EA;
}

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

  .timeline-item {
    grid-template-columns: 1fr;
  }
}


/* Buscador de paciente en pagos */
#paymentPatientSearch {
  border-color: #4A342A;
  background: #FFFFFF;
}

.search-results-inline {
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  background: white;
  box-shadow: 0 12px 32px rgba(74, 52, 42,.08);
  margin-top: -4px;
}

.search-result-item {
  width: 100%;
  border: 0;
  background: white;
  padding: 12px 14px;
  text-align: left;
  cursor: pointer;
  display: grid;
  gap: 3px;
}

.search-result-item:hover {
  background: #F5F1EA;
}

.search-result-item span,
.search-result-empty {
  color: var(--muted);
  font-size: 13px;
}

.search-result-empty {
  padding: 12px 14px;
}

.selected-patient-card {
  border: 1px solid #D7C9B8;
  background: #F5F1EA;
  border-radius: 18px;
  padding: 13px;
  display: grid;
  gap: 4px;
  color: #4A342A;
}

.selected-patient-card span {
  font-size: 13px;
}


/* =========================================================
   TARJETAS DE PACIENTES MÁS ORGANIZADAS
   ========================================================= */

#patientList {
  display: grid;
  gap: 18px;
}

.patient-card-v2 {
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: 22px;
  background: #FFFFFF;
  box-shadow: 0 14px 34px rgba(74, 52, 42, .07);
  display: grid;
  gap: 16px;
  overflow: hidden;
}

.patient-card-header-v2 {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-start;
}

.patient-card-header-v2 h4 {
  margin: 0;
  font-size: 20px;
  line-height: 1.2;
  color: var(--text);
}

.patient-reason-v2 {
  margin: 10px 0 0;
  color: var(--muted);
  line-height: 1.55;
  max-width: 780px;
}

.patient-info-grid-v2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(180px, 1fr));
  gap: 12px;
}

.patient-info-grid-v2 > div {
  border: 1px solid var(--line);
  background: #F5F1EA;
  border-radius: 16px;
  padding: 12px 14px;
  display: grid;
  gap: 4px;
}

.patient-info-grid-v2 span,
.next-appointment-v2 span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.patient-info-grid-v2 strong {
  color: var(--text);
  font-size: 15px;
  overflow-wrap: anywhere;
}

.patient-stats-v2 {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.patient-stats-v2 span {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  background: #F5F1EA;
  color: #4A342A;
  padding: 8px 11px;
  font-size: 13px;
  font-weight: 900;
  white-space: nowrap;
}

.patient-stats-v2 .danger-stat {
  background: #F5F1EA;
  color: #991B1B;
}

.next-appointment-v2 {
  border: 1px solid #D7C9B8;
  background: #F5F1EA;
  border-radius: 18px;
  padding: 12px 14px;
  display: grid;
  gap: 4px;
  color: #4A342A;
}

.next-appointment-v2 strong {
  font-size: 15px;
  line-height: 1.35;
}

.patient-actions-v2 {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}

.patient-actions-v2 button {
  min-width: 120px;
}

/* Neutraliza estilos viejos que pegaban texto */
.patient-card,
.clean-patient-card {
  gap: 16px !important;
}

.patient-process-summary {
  gap: 8px !important;
  line-height: 1.4;
}

.patient-process-summary span {
  display: inline-flex;
  margin: 0 !important;
}

/* Responsive */
@media (max-width: 760px) {
  .patient-card-v2 {
    padding: 18px;
    border-radius: 20px;
  }

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

  .patient-actions-v2 {
    flex-direction: column;
    align-items: stretch;
  }

  .patient-actions-v2 button {
    width: 100%;
  }

  .patient-card-header-v2 h4 {
    font-size: 18px;
  }
}


/* =========================================================
   LIMPIEZA GENERAL DE ESPACIOS Y EVITAR ELEMENTOS MONTADOS
   ========================================================= */

* {
  box-sizing: border-box;
}

.panel {
  overflow: visible;
}

.panel-head {
  gap: 18px;
  align-items: flex-start;
}

.panel-head > div {
  min-width: 0;
}

.panel-head h3,
.panel-head p {
  overflow-wrap: anywhere;
}

form,
.form-grid,
.list,
.section,
.panel {
  min-width: 0;
}

input,
select,
textarea,
button {
  max-width: 100%;
}

.item-actions,
.patient-actions-v2,
.specialist-actions-clean,
.appointment-actions {
  row-gap: 10px;
}

/* Más separación entre bloques internos */
.section.active {
  display: grid;
  gap: 22px;
}

.panel + .panel {
  margin-top: 20px;
}

/* =========================================================
   ODONTOGRAMA LIMPIO Y ORDENADO
   ========================================================= */














/* Resultados del buscador sin montarse */


/* Leyenda */
.legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 !important;
  padding-top: 2px;
}

.legend-btn {
  min-height: 42px;
  padding: 10px 16px;
  white-space: nowrap;
}

/* Dientes: bloque independiente */




.tooth {
  min-height: 48px;
  border-radius: 15px;
}

/* Observaciones separadas */




#saveOdontogramBtn {
  width: fit-content;
  min-width: 190px;
  margin-top: -4px;
}

/* Quita textos indicativos que generan ruido */
#selectedOdontogramStatus,
.selected-odontogram-status,
.empty-odontogram {
  display: none !important;
}

/* =========================================================
   FORMULARIOS Y TARJETAS MÁS RESPIRADOS
   ========================================================= */

.form-grid {
  gap: 16px !important;
}

label {
  line-height: 1.35;
}

.list {
  gap: 16px !important;
}

.item,
.patient-card-v2,
.specialist-card-clean {
  overflow: hidden;
}

/* Evita que textos largos rompan el layout */
.item p,
.patient-card-v2 p,
.specialist-card-clean p,
.mini-item p {
  overflow-wrap: anywhere;
}

/* Botones no montados */
.primary-btn,
.secondary-btn,
.danger-btn {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 900px) {
  

  

  #saveOdontogramBtn {
    width: 100%;
  }
}

@media (max-width: 640px) {
  .panel {
    padding: 18px !important;
    border-radius: 22px;
  }

  .panel-head {
    display: grid !important;
    grid-template-columns: 1fr !important;
  }

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

  .legend-btn {
    width: 100%;
    padding: 10px 12px;
    font-size: 13px;
  }

  

  .tooth {
    min-height: 44px;
    font-size: 14px;
  }

  

  .patient-stats-v2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .patient-stats-v2 span {
    justify-content: center;
    white-space: normal;
    text-align: center;
  }
}

@media (max-width: 390px) {
  .legend {
    grid-template-columns: 1fr;
  }

  
}


/* Procedimiento en agenda como menú seleccionable */
#appointmentProcedure {
  min-height: 48px;
  border-radius: 16px;
  background: #FFFFFF;
  cursor: pointer;
}

#appointmentProcedure:focus {
  border-color: #4A342A;
  box-shadow: 0 0 0 3px rgba(74, 52, 42, .12);
}


/* =========================================================
   INSTALL.PHP LIMPIO, CENTRADO Y SIN TEXTOS EXTRA
   ========================================================= */

.install-clean-body {
  margin: 0 !important;
  min-height: 100vh;
  width: 100%;
  display: grid;
  place-items: center;
  padding: 28px;
  background:
    radial-gradient(circle at 18% 12%, rgba(178, 150, 125, .32), transparent 30%),
    radial-gradient(circle at 86% 18%, rgba(74, 52, 42, .18), transparent 30%),
    linear-gradient(135deg, #F5F1EA 0%, #F5F1EA 50%, #F5F1EA 100%);
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #4A342A;
  overflow-x: hidden;
}

.install-clean-card {
  width: min(860px, 100%);
  margin: 0 auto;
  background: rgba(255, 255, 255, .98);
  border: 1px solid #D7C9B8;
  border-radius: 32px;
  padding: 34px;
  box-shadow: 0 28px 90px rgba(74, 52, 42, .14);
}

.install-clean-header {
  text-align: center;
  max-width: 680px;
  margin: 0 auto 28px;
}

.install-clean-header h1 {
  margin: 0;
  font-size: clamp(30px, 4vw, 46px);
  line-height: 1.05;
  letter-spacing: -1.2px;
}

.install-clean-header p {
  margin: 12px 0 0;
  color: #7D5A44;
  line-height: 1.55;
}

.install-clean-form {
  display: grid;
  gap: 24px;
}

.install-clean-section {
  border: 1px solid #D7C9B8;
  border-radius: 24px;
  padding: 22px;
  background: #FFFFFF;
  display: grid;
  gap: 18px;
}

.install-clean-title {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.install-clean-title span {
  width: 38px;
  height: 38px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: #4A342A;
  color: #FFFFFF;
  font-weight: 1000;
  flex: 0 0 38px;
}

.install-clean-title h2 {
  margin: 0;
  font-size: 22px;
  line-height: 1.2;
}

.install-clean-title p {
  margin: 5px 0 0;
  color: #7D5A44;
  line-height: 1.45;
}

.install-clean-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.install-clean-grid label {
  display: grid;
  gap: 8px;
  font-weight: 900;
  color: #4A342A;
}

.install-clean-grid input {
  width: 100%;
  min-height: 50px;
  border: 1px solid #D7C9B8;
  border-radius: 16px;
  padding: 13px 15px;
  font-weight: 800;
  background: #FFFFFF;
}

.install-clean-grid input:focus {
  outline: none;
  border-color: #4A342A;
  box-shadow: 0 0 0 3px rgba(74, 52, 42, .12);
}

.install-clean-span {
  grid-column: 1 / -1;
}

.install-clean-full {
  width: 100%;
  min-height: 48px;
  border-radius: 16px;
  text-decoration: none;
}

.install-clean-note {
  margin-top: 20px;
  border: 1px solid #D7C9B8;
  background: #F5F1EA;
  border-radius: 18px;
  padding: 14px 16px;
  color: #7D5A44;
  line-height: 1.45;
  text-align: center;
}

/* Oculta residuos de versiones anteriores */
.install-logo,
.install-kicker,
.install-hero,
.install-steps {
  display: none !important;
}

@media (max-width: 760px) {
  .install-clean-body {
    padding: 14px;
    place-items: start center;
  }

  .install-clean-card {
    padding: 22px;
    border-radius: 24px;
  }

  .install-clean-grid {
    grid-template-columns: 1fr;
  }

  .install-clean-section {
    padding: 18px;
    border-radius: 20px;
  }

  .install-clean-title h2 {
    font-size: 19px;
  }

  .install-clean-title p {
    font-size: 13px;
  }
}

@media (max-width: 390px) {
  .install-clean-card {
    padding: 16px;
  }

  .install-clean-title {
    align-items: center;
  }

  .install-clean-title p {
    display: none;
  }
}

.forgot-link,.auth-back-link{display:block;text-align:center;color:#4A342A;font-weight:800;text-decoration:none;margin-top:8px}.forgot-link:hover,.auth-back-link:hover{text-decoration:underline}.auth-card{width:min(460px,100%)!important}.auth-main-link{width:100%;margin-top:14px;text-decoration:none}.auth-card .db-help a{overflow-wrap:anywhere}
html,body{width:100%;max-width:100%;overflow-x:hidden}*{box-sizing:border-box}img,svg,video,canvas{max-width:100%;height:auto}input,select,textarea,button{max-width:100%}.main,.section,.panel,.item,.form-grid,.list,.profile-grid,.patient-card-v2,.specialist-card-clean{min-width:0}.panel,.item,.patient-card-v2,.specialist-card-clean{overflow-wrap:anywhere}.form-grid{gap:16px!important}.item-actions,.patient-actions-v2,.specialist-actions-clean,.appointment-actions,.session-actions{display:flex;flex-wrap:wrap;gap:10px}.table-responsive{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}table{width:100%;border-collapse:collapse}textarea{resize:vertical}
@media(min-width:1200px){.topbar,.section.active{max-width:1380px;margin-left:auto;margin-right:auto}}
@media(max-width:1024px){.main{padding-left:20px!important;padding-right:20px!important}.form-grid,.profile-grid,.stats-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}.panel-head{gap:14px}}
@media(max-width:760px){body{font-size:15px}.main{padding:14px!important}.topbar{display:grid!important;grid-template-columns:1fr;gap:12px;align-items:stretch!important}.topbar>*,.session-actions,.session-actions>*{width:100%}.section.active{gap:16px!important}.panel{padding:18px!important;border-radius:22px!important}.panel-head{display:grid!important;grid-template-columns:1fr!important;gap:12px}.form-grid,.profile-grid,.stats-grid,.patient-info-grid-v2,.install-clean-grid{grid-template-columns:1fr!important}.item-actions,.patient-actions-v2,.specialist-actions-clean,.appointment-actions,.session-actions{flex-direction:column;align-items:stretch}.item-actions>*,.patient-actions-v2>*,.specialist-actions-clean>*,.appointment-actions>*,.session-actions>*{width:100%}.legend{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))}.legend-btn{width:100%}.search-results,.search-results-inline{max-height:260px;overflow-y:auto}.login-body,.install-clean-body{padding:12px!important;place-items:start center!important}.login-card,.install-clean-card{width:100%!important;max-width:100%!important;padding:20px!important;border-radius:22px!important}.patient-stats-v2{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))}.patient-stats-v2 span{white-space:normal!important;text-align:center;justify-content:center}}
@media(max-width:420px){.main{padding:10px!important}.panel{padding:15px!important;border-radius:18px!important}.legend{grid-template-columns:1fr!important}.patient-stats-v2{grid-template-columns:1fr!important}h1{font-size:28px!important}h2{font-size:22px!important}h3{font-size:19px!important}}

/* === YacoSpa: instalador automático cPanel + ver/ocultar contraseña === */
.install-mode-box {
  display: grid;
  gap: 12px;
  margin-top: 18px;
}

.install-radio {
  display: flex !important;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border: 1px solid rgba(74, 52, 42, 0.12);
  border-radius: 16px;
  background: rgba(255,255,255,0.7);
  cursor: pointer;
  font-weight: 800;
}

.install-radio input {
  width: auto !important;
  margin: 0;
}

.password-toggle-wrap {
  display: flex;
  align-items: stretch;
  gap: 0;
  width: 100%;
}

.password-toggle-wrap input {
  flex: 1;
  min-width: 0;
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  border-right: 0 !important;
}

.toggle-pass-btn {
  flex: 0 0 42px !important;
  width: 42px !important;
  min-width: 42px !important;
  min-height: 38px;
  padding: 0 !important;
  border-radius: 0 4px 4px 0 !important;
  border: 1px solid #D7C9B8 !important;
  background: #F5F1EA !important;
  color: #4A342A !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: none !important;
  line-height: 1 !important;
}

.toggle-pass-btn:hover {
  background: #D7C9B8 !important;
  transform: none !important;
}

.toggle-pass-btn:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(74, 52, 42, 0.16) !important;
}

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

.toggle-pass-btn .icon-eye-off {
  display: none;
}

.toggle-pass-btn.is-visible .icon-eye-open {
  display: none;
}

.toggle-pass-btn.is-visible .icon-eye-off {
  display: block;
}


/* =========================================================
   ODONTOGRAMA DINÁMICO ESTILO CLÍNICO
   ========================================================= */







.conventions-title {
  font-weight: 900;
  color: #7D5A44;
  margin: 0 0 10px;
  font-size: 14px;
}

















.selected-odontogram-tool {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 16px;
  border-bottom: 1px solid #D7C9B8;
  background: #FFFFFF;
  color: #7D5A44;
  font-size: 12px;
}

.selected-tool-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border-radius: 999px;
  padding: 6px 10px;
  background: #F5F1EA;
  color: #4A342A;
  font-weight: 900;
}

.selected-tool-chip strong {
  color: var(--status-color);
  font-size: 15px;
}



.tooth-group {
  display: grid;
  grid-template-columns: repeat(var(--columns, 8), minmax(34px, 1fr));
  gap: 11px;
  align-items: end;
}

.tooth-group.child {
  --columns: 5;
  max-width: 320px;
  justify-self: center;
}

.tooth-group[data-group="upper-adult-left"] { grid-area: uaL; }
.tooth-group[data-group="upper-adult-right"] { grid-area: uaR; }
.tooth-group[data-group="upper-child-left"] { grid-area: ucL; }
.tooth-group[data-group="upper-child-right"] { grid-area: ucR; }
.tooth-group[data-group="lower-child-left"] { grid-area: lcL; }
.tooth-group[data-group="lower-child-right"] { grid-area: lcR; }
.tooth-group[data-group="lower-adult-left"] { grid-area: laL; }
.tooth-group[data-group="lower-adult-right"] { grid-area: laR; }



.tooth:hover {
  transform: translateY(-2px);
}

.tooth-number {
  min-width: 24px;
  height: 16px;
  border-radius: 999px;
  background: #7D5A44;
  color: #FFFFFF;
  display: inline-grid;
  place-items: center;
  font-size: 10px;
  font-weight: 1000;
  line-height: 1;
  padding: 0 5px;
}

.tooth-shape {
  width: 52px;
  height: 66px;
  position: relative;
  display: inline-grid;
  place-items: center;
}

.tooth-shape.child-tooth {
  width: 46px;
  height: 58px;
}

.tooth-shape svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.tooth-shape path,
.tooth-shape circle {
  fill: #F5F1EA;
  stroke: #B2967D;
  stroke-width: 2;
  transition: fill .18s ease, stroke .18s ease, opacity .18s ease;
}

.tooth-center {
  fill: #FFFFFF !important;
}

.tooth-mark {
  position: absolute;
  inset: auto auto 21px 50%;
  transform: translateX(-50%);
  min-width: 22px;
  height: 22px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-size: 16px;
  font-weight: 1000;
  color: var(--status-color);
  line-height: 1;
  background: rgba(255,255,255,.82);
  opacity: 1;
  pointer-events: none;
}

.tooth-status-healthy .tooth-mark {
  opacity: 0;
}

.tooth-status-healthy .tooth-shape path,
.tooth-status-healthy .tooth-shape circle {
  fill: #FFFFFF;
  stroke: #B2967D;
}

.tooth-status-caries-cavitada .tooth-center,
.tooth-status-caries-no-cavitacional .tooth-center {
  fill: #FEE4E2 !important;
  stroke: #B42318 !important;
}

.tooth-status-amalgama .tooth-center,
.tooth-status-resina-ionomero .tooth-center,
.tooth-status-corona .tooth-center,
.tooth-status-corona-desadaptada .tooth-center {
  fill: #D7C9B8 !important;
  stroke: var(--status-color) !important;
}

.tooth-status-ausente .tooth-shape,
.tooth-status-sin-erupcionar .tooth-shape {
  opacity: .45;
}

.tooth-status-ausente .tooth-mark {
  font-size: 26px;
}

.tooth-status-incluido .tooth-shape path,
.tooth-status-resto-radicular .tooth-shape path,
.tooth-status-pontico .tooth-shape path {
  stroke: #B42318 !important;
}

.tooth-status-endodoncia .root,
.tooth-status-implante .root {
  fill: #F5F1EA !important;
  stroke: var(--status-color) !important;
}

.tooth-status-superficie-sellada .tooth-center,
.tooth-status-sellante-indicado .tooth-center {
  fill: #F5F1EA !important;
  stroke: var(--status-color) !important;
}

.tooth-status-erosion .crown-top {
  fill: #F5F1EA !important;
  stroke: var(--status-color) !important;
}









@media (max-width: 640px) {
  

  .selected-odontogram-tool {
    display: grid;
  }

  

  
}


/* =========================================================
   ODONTOGRAMA: convenciones completas + selección visual real
   ========================================================= */



.conventions-title {
  font-size: 20px !important;
  font-weight: 500 !important;
  color: #7D5A44 !important;
  margin-bottom: 10px !important;
}



















.selected-odontogram-tool {
  border-bottom: 1px solid #D7C9B8 !important;
  background: #F5F1EA !important;
}

.selected-tool-chip {
  background: #F5F1EA !important;
  border: 1px solid #D7C9B8;
}

.tooth-shape {
  overflow: visible;
}

.tooth-shape .tooth-base-svg path,
.tooth-shape .tooth-base-svg circle {
  stroke: #B2967D !important;
  fill: #FFFFFF !important;
}

.tooth-overlay {
  position: absolute;
  pointer-events: none;
  color: var(--status-color);
  z-index: 4;
}

.tooth-overlay.overlay-check {
  inset: -7px -10px -4px -8px;
  width: 74px;
  height: 92px;
  fill: none;
  stroke: var(--status-color);
  stroke-width: 5.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.tooth-shape.child-tooth .overlay-check {
  transform: scale(.92);
  transform-origin: center;
}

.overlay-line {
  left: 50%;
  top: 8px;
  width: 3px;
  height: 64px;
  border-radius: 999px;
  transform: translateX(-50%);
  background: var(--status-color);
}

.overlay-horizontal {
  left: 6px;
  right: 6px;
  top: 50%;
  width: auto;
  height: 3px;
  transform: translateY(-50%);
}

.overlay-dashed {
  left: 6px;
  right: 6px;
  top: 50%;
  width: auto;
  height: 0;
  transform: translateY(-50%);
  background: transparent;
  border-top: 3px dashed var(--status-color);
  border-radius: 0;
}

.overlay-x,
.overlay-circle-cross {
  inset: -2px -4px;
  width: 62px;
  height: 82px;
  fill: none;
  stroke: var(--status-color);
  stroke-width: 3.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.overlay-circle-cross {
  stroke-width: 2.8;
}

.overlay-square {
  width: 9px;
  height: 9px;
  background: var(--status-color);
  border-radius: 1px;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
}

.overlay-small-dash {
  width: 28px;
  height: 3px;
  background: var(--status-color);
  border-radius: 999px;
  top: 40px;
  left: 50%;
  transform: translateX(-50%);
}

.overlay-triangle {
  left: 50%;
  bottom: -17px;
  transform: translateX(-50%);
  font-size: 16px;
  font-weight: 900;
  line-height: 1;
}

.overlay-dot {
  width: 9px;
  height: 9px;
  background: var(--status-color);
  border-radius: 999px;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
}

.overlay-implant {
  left: 50%;
  top: 8px;
  transform: translateX(-50%);
  font-size: 40px;
  font-family: Georgia, serif;
  line-height: 1;
  font-weight: 500;
}

.overlay-letter {
  left: 50%;
  bottom: -16px;
  transform: translateX(-50%);
  font-size: 15px;
  font-weight: 900;
  line-height: 1;
}

.overlay-plus,
.overlay-orange-n,
.overlay-arc {
  bottom: auto;
  top: 28px;
  font-size: 18px;
}

.tooth-status-caries-cavitada .tooth-center,
.tooth-status-caries-no-cavitacional .tooth-center {
  fill: #F5F1EA !important;
}

.tooth-status-amalgama .tooth-center,
.tooth-status-resina-ionomero .tooth-center {
  fill: #F5F1EA !important;
}

.tooth-status-ausente .tooth-shape .tooth-base-svg {
  opacity: .72;
}

.tooth-status-sin-erupcionar .tooth-shape .tooth-base-svg {
  opacity: .62;
}

.tooth-status-incluido .tooth-shape .tooth-base-svg path,
.tooth-status-incluido .tooth-shape .tooth-base-svg circle,
.tooth-status-corona-desadaptada .tooth-shape .tooth-base-svg path,
.tooth-status-corona-desadaptada .tooth-shape .tooth-base-svg circle {
  stroke: #B42318 !important;
}

.tooth-status-endodoncia .root,
.tooth-status-implante .root {
  stroke: var(--status-color) !important;
  fill: #F5F1EA !important;
}

.tooth-status-corona .tooth-center,
.tooth-status-corona-desadaptada .tooth-center {
  stroke: var(--status-color) !important;
}

.tooth:hover .tooth-shape .tooth-base-svg path,
.tooth:hover .tooth-shape .tooth-base-svg circle {
  stroke-width: 2.5 !important;
}

@media (max-width: 1120px) {
  .conventions-title {
    font-size: 17px !important;
  }

  
}




:root {
  --bg: #F5F1EA;
  --panel: #FFFFFF;
  --text: #4A342A;
  --muted: #7D5A44;
  --line: #D7C9B8;
  --primary: #7D5A44;
  --primary-dark: #4A342A;
  --primary-soft: #D7C9B8;
  --accent: #7D5A44;
  --accent-2: #4A342A;
  --mint-1: #7D5A44;
  --mint-2: #7D5A44;
  --mint-3: #B2967D;
  --mint-4: #B2967D;
  --mint-5: #D7C9B8;
  --danger: #B42318;
  --shadow: 0 22px 60px rgba(74, 52, 42, 0.12);
}

body {
  background:
    radial-gradient(circle at 18% 10%, rgba(125, 90, 68, .15), transparent 27%),
    radial-gradient(circle at 90% 0%, rgba(125, 90, 68, .18), transparent 30%),
    linear-gradient(135deg, #F5F1EA 0%, #F5F1EA 42%, #F5F1EA 100%);
  color: var(--text);
}

.sidebar {
  background: linear-gradient(160deg, #4A342A 0%, #4A342A 58%, #7D5A44 100%) !important;
  inset: 24px auto 24px 24px;
  height: auto;
  border-radius: 0 34px 34px 0;
  box-shadow: 0 25px 70px rgba(74, 52, 42, .25);
  border-right: 1px solid rgba(255,255,255,.18);
}

.brand {
  padding-bottom: 22px;
  border-bottom: 1px solid rgba(255,255,255,.16);
}

.brand-icon {
  background: linear-gradient(135deg, #D7C9B8, #B2967D) !important;
  color: #4A342A !important;
  box-shadow: 0 12px 30px rgba(0,0,0,.12);
}

.brand h1 {
  letter-spacing: -.02em;
}

.brand p,
.sidebar-footer {
  color: rgba(255,255,255,.72) !important;
}

.nav-btn {
  color: rgba(255,255,255,.82) !important;
  border-radius: 18px !important;
  transition: .18s ease;
}

.nav-btn:hover,
.nav-btn.active {
  background: rgba(255,255,255,.18) !important;
  color: #FFFFFF !important;
  box-shadow: inset 3px 0 0 rgba(215, 201, 184, .95);
}

.main {
  margin-left: 326px;
  width: calc(100% - 326px);
  padding: 36px 34px;
}

.topbar h2 {
  font-size: clamp(32px, 3.2vw, 48px);
  letter-spacing: -.04em;
  color: #4A342A;
}

.topbar p {
  color: #7D5A44;
  font-size: 16px;
}

.user-pill {
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(215, 201, 184,.9);
  box-shadow: 0 12px 30px rgba(74, 52, 42, .08);
}

.stat-card,
.panel {
  background:
    radial-gradient(circle at top right, rgba(215, 201, 184, .52), transparent 30%),
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,255,255,.88)) !important;
  border: 1px solid rgba(215, 201, 184, .95) !important;
  border-radius: 28px !important;
  box-shadow: var(--shadow) !important;
}

.stat-card {
  min-height: 126px;
  padding: 26px !important;
}

.stat-card span {
  color: #7D5A44 !important;
  font-size: 15px !important;
}

.stat-card strong {
  color: #4A342A;
  letter-spacing: -.03em;
}

.primary-btn {
  background: linear-gradient(135deg, var(--primary), var(--accent-2)) !important;
  color: #FFFFFF !important;
  box-shadow: 0 16px 32px rgba(125, 90, 68, .20);
}

.primary-btn:hover {
  background: linear-gradient(135deg, var(--primary-dark), #4A342A) !important;
}

.secondary-btn {
  background: #F5F1EA !important;
  color: #4A342A !important;
  border: 1px solid #D7C9B8 !important;
}

.logout-btn {
  background: #FFFFFF !important;
  color: #4A342A !important;
  border: 1px solid rgba(215, 201, 184,.95);
  box-shadow: 0 12px 30px rgba(74, 52, 42, .09);
}

input,
textarea,
select {
  border-color: #D7C9B8 !important;
  background: rgba(255,255,255,.88) !important;
}

input:focus,
textarea:focus,
select:focus {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 4px rgba(125, 90, 68, .12) !important;
}

.split {
  grid-template-columns: minmax(360px, 430px) 1fr;
}

.minor-card {
  display: grid;
  gap: 14px;
  padding: 14px;
  border: 1px solid #D7C9B8;
  border-radius: 20px;
  background: linear-gradient(180deg, #F5F1EA, #F5F1EA);
}

.checkbox-row {
  display: flex !important;
  align-items: center;
  gap: 10px;
  font-weight: 900;
  color: #4A342A;
  cursor: pointer;
}

.checkbox-row input {
  width: 18px !important;
  height: 18px;
  accent-color: var(--primary);
}

.guardian-fields {
  display: grid;
  gap: 12px;
  padding-top: 10px;
  border-top: 1px dashed #D7C9B8;
}

.form-section-title {
  display: grid;
  gap: 3px;
}

.form-section-title strong {
  color: #4A342A;
}

.form-section-title small {
  color: #7D5A44;
  font-weight: 600;
}

.minor-badge {
  display: inline-flex;
  width: fit-content;
  margin-top: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  background: #D7C9B8;
  color: #4A342A;
  font-size: 12px;
  font-weight: 900;
}

.guardian-summary-v2 {
  margin-top: 12px;
  padding: 12px;
  border-radius: 16px;
  background: #F5F1EA;
  border: 1px solid #D7C9B8;
  display: grid;
  gap: 3px;
}

.guardian-summary-v2 span,
.guardian-summary-v2 small {
  color: #7D5A44;
  font-size: 12px;
  font-weight: 700;
}

.guardian-summary-v2 strong {
  color: #4A342A;
}

.profile-guardian-box {
  margin-top: 10px;
  padding: 12px;
  border-radius: 16px;
  background: #F5F1EA;
  border: 1px solid #D7C9B8;
}







.tooth-status-none .tooth-shape .tooth-base-svg path,
.tooth-status-none .tooth-shape .tooth-base-svg circle {
  fill: #FFFFFF !important;
  stroke: #B2967D !important;
}

.tooth-status-none .tooth-overlay {
  display: none !important;
}

.tooth-status-healthy .tooth-shape .tooth-base-svg path,
.tooth-status-healthy .tooth-shape .tooth-base-svg circle {
  fill: #FFFFFF !important;
  stroke: #B2967D !important;
}

.tooth-status-healthy .tooth-mark {
  opacity: 0 !important;
}

@media (max-width: 980px) {
  .sidebar {
    inset: 0 auto 0 0;
    border-radius: 0 28px 28px 0;
  }

  .main {
    margin-left: 0;
    width: 100%;
    padding: 18px;
  }

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


/* =========================================================
   CORRECCIÓN ODONTOGRAMA: inicio limpio + check verde solo al aplicar
   ========================================================= */

.selected-tool-empty {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 7px 12px;
  border-radius: 999px;
  background: #F5F1EA;
  color: #7D5A44;
  border: 1px dashed #D7C9B8;
  font-weight: 900;
}





.tooth-shape {
  width: 48px !important;
  height: 62px !important;
}

.tooth-shape.child-tooth {
  width: 43px !important;
  height: 56px !important;
}

.tooth-shape .tooth-base-svg {
  overflow: visible;
}

.tooth-shape .tooth-base-svg path,
.tooth-shape .tooth-base-svg circle,
.tooth-shape .tooth-base-svg .tooth-lobe {
  fill: #FFFFFF !important;
  stroke: #B2967D !important;
  stroke-width: 1.85 !important;
}

.tooth-center {
  fill: #FFFFFF !important;
}

.tooth-status-none .tooth-overlay {
  display: none !important;
}

.tooth-status-none .tooth-shape .tooth-base-svg path,
.tooth-status-none .tooth-shape .tooth-base-svg circle {
  fill: #FFFFFF !important;
  stroke: #B2967D !important;
}

.tooth-status-healthy .tooth-overlay.overlay-check {
  display: block !important;
  inset: -6px -8px -2px -7px;
  width: 64px;
  height: 82px;
  stroke: #7D5A44 !important;
  stroke-width: 4.7 !important;
  fill: none !important;
  opacity: 1 !important;
}

.tooth-status-healthy .tooth-shape .tooth-base-svg path,
.tooth-status-healthy .tooth-shape .tooth-base-svg circle {
  fill: #FFFFFF !important;
  stroke: #B2967D !important;
}

/* Evita que reglas anteriores oculten la paloma verde de Diente Sano */
.tooth-status-healthy .tooth-mark {
  display: none !important;
  opacity: 0 !important;
}




/* =========================================================
   RECUPERACIÓN POR CÓDIGO + ACUDIENTE COMPACTO
   ========================================================= */

.code-input {
  text-align: center;
  letter-spacing: 10px;
  font-size: 24px !important;
  font-weight: 900 !important;
  color: #4A342A !important;
}

.reset-code-preview {
  display: inline-block;
  margin-top: 8px;
  font-size: 28px;
  letter-spacing: 8px;
  color: #4A342A;
}

.minor-card {
  overflow: hidden;
}

.checkbox-row {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  grid-template-columns: none !important;
  width: fit-content !important;
  max-width: 100%;
  gap: 9px !important;
  padding: 8px 10px;
  border-radius: 999px;
  background: #FFFFFF;
  border: 1px solid #D7C9B8;
}

.checkbox-row input[type="checkbox"] {
  width: 18px !important;
  min-width: 18px !important;
  max-width: 18px !important;
  height: 18px !important;
  margin: 0 !important;
  padding: 0 !important;
  flex: 0 0 18px !important;
  border-radius: 5px;
}

.checkbox-row span {
  white-space: nowrap;
  line-height: 1;
}

.guardian-fields {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: end;
}

.guardian-fields .form-section-title {
  grid-column: 1 / -1;
}

.guardian-fields label {
  min-width: 0;
}

.guardian-fields input,
.guardian-fields select {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
}

.guardian-fields select {
  appearance: auto;
  display: block;
}

@media (max-width: 640px) {
  .checkbox-row {
    width: 100% !important;
  }

  .checkbox-row span {
    white-space: normal;
  }

  .guardian-fields {
    grid-template-columns: 1fr;
  }
}


/* =========================================================
   AJUSTE CHECK VERDE: paloma visible sobre diente sano
   ========================================================= */

/* El check debe ir por encima del dibujo del diente y no confundirse con las líneas azules. */
.tooth-status-healthy .tooth-shape {
  overflow: visible !important;
}

.tooth-status-healthy .tooth-overlay.overlay-check {
  display: block !important;
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  width: 78px !important;
  height: 78px !important;
  transform: translate(-47%, -54%) rotate(-3deg) !important;
  z-index: 20 !important;
  pointer-events: none !important;
  overflow: visible !important;
  fill: none !important;
  opacity: 1 !important;
}

/* Regla específica para ganarle a cualquier estilo global de paths del diente. */
.tooth-status-healthy .tooth-overlay.overlay-check path,
.tooth-status-healthy .tooth-overlay.overlay-check .healthy-check-path {
  stroke: #7D5A44 !important;
  stroke-width: 8.5 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  fill: none !important;
  filter: drop-shadow(0 1px 0 rgba(255,255,255,.88)) drop-shadow(0 2px 3px rgba(0,0,0,.12));
}

/* En dientes temporales el check queda un poco menor para no invadir demasiado. */
.tooth-shape.child-tooth .tooth-overlay.overlay-check {
  width: 70px !important;
  height: 70px !important;
  transform: translate(-47%, -54%) rotate(-3deg) !important;
}

/* Mantiene el diente base azul claro y limpio mientras el check verde queda encima. */
.tooth-status-healthy .tooth-shape .tooth-base-svg path,
.tooth-status-healthy .tooth-shape .tooth-base-svg circle {
  fill: #FFFFFF !important;
  stroke: #B2967D !important;
  stroke-width: 1.85 !important;
}

.tooth-status-healthy .tooth-mark {
  display: none !important;
}


/* =========================================================
   PACIENTES: dirección de residencia
   ========================================================= */

.patient-address-cell-v2 {
  grid-column: 1 / -1;
}

.patient-address-cell-v2 strong {
  line-height: 1.35;
}

@media (max-width: 640px) {
  .patient-address-cell-v2 {
    grid-column: auto;
  }
}


/* =========================================================
   PDF HISTORIA CLÍNICA + ODONTOGRAMA
   ========================================================= */

.clinical-record-card .item-actions {
  margin-top: 12px;
}

.download-clinical-pdf-btn {
  width: auto !important;
}

.clinical-pdf-render-wrap {
  position: fixed;
  left: -99999px;
  top: 0;
  width: 1120px;
  background: #FFFFFF;
  z-index: -1;
}

.clinical-pdf-document {
  width: 1120px;
  min-height: 1400px;
  padding: 34px;
  background: #FFFFFF;
  color: #4A342A;
  font-family: Arial, Helvetica, sans-serif;
  box-sizing: border-box;
}

.pdf-header {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 24px;
  border-radius: 26px;
  background: linear-gradient(135deg, #4A342A, #7D5A44);
  color: #FFFFFF;
}

.pdf-logo {
  width: 66px;
  height: 66px;
  border-radius: 20px;
  background: #D7C9B8;
  color: #4A342A;
  display: grid;
  place-items: center;
  font-weight: 1000;
  font-size: 22px;
}

.pdf-header h1 {
  margin: 0;
  font-size: 34px;
  letter-spacing: -0.03em;
}

.pdf-header p {
  margin: 6px 0 0;
  color: #D7C9B8;
  font-weight: 700;
}

.pdf-patient-summary {
  margin-top: 22px;
  padding: 22px;
  border: 1px solid #D7C9B8;
  border-radius: 24px;
  background: #F5F1EA;
  display: flex;
  justify-content: space-between;
  gap: 20px;
}

.pdf-patient-summary span,
.pdf-date-box span,
.pdf-info-row span {
  display: block;
  color: #7D5A44;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.pdf-patient-summary h2 {
  margin: 6px 0;
  font-size: 28px;
  color: #4A342A;
}

.pdf-patient-summary p {
  margin: 0;
  color: #7D5A44;
  font-weight: 800;
}

.pdf-date-box {
  min-width: 220px;
  text-align: right;
}

.pdf-date-box strong {
  display: block;
  margin-top: 8px;
  color: #4A342A;
  font-size: 15px;
}

.pdf-grid {
  margin-top: 18px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.pdf-info-row {
  padding: 14px;
  border: 1px solid #D7C9B8;
  border-radius: 16px;
  background: #FFFFFF;
}

.pdf-info-row strong {
  display: block;
  margin-top: 6px;
  font-size: 14px;
  line-height: 1.35;
  color: #4A342A;
}

.pdf-clinical-grid {
  margin-top: 18px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.pdf-section {
  border: 1px solid #D7C9B8;
  border-radius: 20px;
  background: #FFFFFF;
  padding: 18px;
  page-break-inside: avoid;
}

.pdf-section h3 {
  margin: 0 0 10px;
  color: #4A342A;
  font-size: 17px;
}

.pdf-section p {
  margin: 0;
  color: #4A342A;
  line-height: 1.55;
  font-size: 14px;
}

.pdf-odontogram-section {
  margin-top: 18px;
}

.pdf-section-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.pdf-section-head span {
  padding: 7px 10px;
  border-radius: 999px;
  background: #D7C9B8;
  color: #4A342A;
  font-size: 12px;
  font-weight: 900;
}

.pdf-odontogram-box {
  margin-top: 14px;
  border: 1px solid #7D5A44;
  border-top: 38px solid #7D5A44;
  border-radius: 10px;
  padding: 18px 20px 24px;
  display: grid;
  grid-template-columns: repeat(16, minmax(38px, 1fr));
  grid-template-areas:
    "uaL uaL uaL uaL uaL uaL uaL uaL uaR uaR uaR uaR uaR uaR uaR uaR"
    ". . . ucL ucL ucL ucL ucL ucR ucR ucR ucR ucR . . ."
    ". . . lcL lcL lcL lcL lcL lcR lcR lcR lcR lcR . . ."
    "laL laL laL laL laL laL laL laL laR laR laR laR laR laR laR laR";
  gap: 18px 24px;
  position: relative;
  background:
    linear-gradient(90deg, transparent calc(50% - .5px), #F5F1EA calc(50% - .5px), #F5F1EA calc(50% + .5px), transparent calc(50% + .5px)),
    #FFFFFF;
}

.pdf-odontogram-box::before {
  content: "Odontograma";
  position: absolute;
  top: -30px;
  left: 0;
  right: 0;
  text-align: center;
  color: #FFFFFF;
  font-weight: 1000;
}

.pdf-tooth-group {
  display: grid;
  grid-template-columns: repeat(8, minmax(34px, 1fr));
  gap: 10px;
}

.pdf-tooth-group.child {
  grid-template-columns: repeat(5, minmax(34px, 1fr));
  justify-self: center;
  max-width: 300px;
}

.pdf-tooth-group[data-group="upper-adult-left"] { grid-area: uaL; }
.pdf-tooth-group[data-group="upper-adult-right"] { grid-area: uaR; }
.pdf-tooth-group[data-group="upper-child-left"] { grid-area: ucL; }
.pdf-tooth-group[data-group="upper-child-right"] { grid-area: ucR; }
.pdf-tooth-group[data-group="lower-child-left"] { grid-area: lcL; }
.pdf-tooth-group[data-group="lower-child-right"] { grid-area: lcR; }
.pdf-tooth-group[data-group="lower-adult-left"] { grid-area: laL; }
.pdf-tooth-group[data-group="lower-adult-right"] { grid-area: laR; }

.pdf-tooth {
  display: grid;
  justify-items: center;
  gap: 5px;
}

.pdf-tooth-number {
  min-width: 24px;
  height: 16px;
  border-radius: 999px;
  background: #7D5A44;
  color: #FFFFFF;
  display: inline-grid;
  place-items: center;
  font-size: 10px;
  font-weight: 1000;
  line-height: 1;
  padding: 0 5px;
}

.pdf-odontogram-notes {
  margin-top: 14px;
  padding: 14px;
  border-radius: 16px;
  background: #F5F1EA;
  border: 1px solid #D7C9B8;
}

.pdf-odontogram-notes strong {
  color: #4A342A;
}

.pdf-odontogram-notes p {
  margin: 6px 0 0;
}

.pdf-footer {
  margin-top: 26px;
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 30px;
  color: #7D5A44;
}

.pdf-footer div {
  width: 320px;
}

.pdf-footer div span {
  display: block;
  margin-top: 48px;
  border-top: 1px solid #B2967D;
}

.pdf-footer strong {
  color: #4A342A;
}

.pdf-footer p {
  margin: 0;
  font-size: 12px;
}


/* =========================================================
   MÓDULO SAAS MULTITENANT
   ========================================================= */

.saas-header {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: center;
}

.saas-kicker {
  display: inline-block;
  padding: 7px 11px;
  border-radius: 999px;
  background: #D7C9B8;
  color: #4A342A;
  font-size: 12px;
  font-weight: 900;
  margin-bottom: 10px;
}

.saas-header h3 {
  margin-bottom: 8px;
}

.saas-header p {
  max-width: 820px;
  color: #7D5A44;
  margin: 0;
  line-height: 1.55;
}

.saas-grid {
  margin-top: 22px;
}

.saas-card {
  border: 1px solid #D7C9B8;
}

.saas-card.suspended {
  opacity: .72;
  background: #F5F1EA;
}

.saas-card-head {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: flex-start;
}

.saas-card-head h4 {
  margin-bottom: 4px;
}

.saas-card-head p {
  margin: 0;
  color: #7D5A44;
}

.saas-card-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 14px;
  margin-top: 12px;
  color: #7D5A44;
}

.status-pill,
.role-pill {
  display: inline-flex;
  white-space: nowrap;
  padding: 7px 10px;
  border-radius: 999px;
  background: #D7C9B8;
  color: #4A342A;
  font-weight: 900;
  font-size: 12px;
}

.status-suspended {
  background: #F5F1EA;
  color: #991B1B;
}

.status-active {
  background: #D7C9B8;
  color: #4A342A;
}

.permissions-matrix {
  overflow-x: auto;
}

.permissions-matrix table {
  width: 100%;
  border-collapse: collapse;
  min-width: 760px;
}

.permissions-matrix th,
.permissions-matrix td {
  border-bottom: 1px solid #D7C9B8;
  padding: 12px 10px;
  text-align: center;
}

.permissions-matrix th:first-child,
.permissions-matrix td:first-child {
  text-align: left;
  position: sticky;
  left: 0;
  background: #FFFFFF;
  z-index: 1;
}

.permission-check {
  display: inline-flex;
  justify-content: center;
  align-items: center;
}

.permission-check input {
  width: 18px !important;
  height: 18px;
  accent-color: #7D5A44;
}

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

.audit-row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  border: 1px solid #D7C9B8;
  border-radius: 16px;
  padding: 12px;
  background: #FFFFFF;
}

.audit-row p {
  margin: 4px 0 0;
  color: #7D5A44;
}

.audit-row small {
  text-align: right;
  color: #7D5A44;
}

.disabled-form {
  opacity: .58;
}

.disabled-form input,
.disabled-form select,
.disabled-form textarea,
.disabled-form button {
  pointer-events: none;
}

.muted-help {
  color: #7D5A44;
  font-weight: 700;
  display: block;
  margin-top: 8px;
}

@media (max-width: 760px) {
  .saas-header,
  .saas-card-head,
  .audit-row {
    display: grid;
  }

  .saas-card-grid {
    grid-template-columns: 1fr;
  }

  .audit-row small {
    text-align: left;
  }
}


/* =========================================================
   CORRECCIÓN LAYOUT USUARIOS SAAS + CONTRASEÑA FUERTE
   ========================================================= */

#saas.section.active {
  display: block;
  width: 100%;
  max-width: 100%;
}

#saas {
  clear: both;
}

#saas .saas-header {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}

#saas .saas-stats,
#saas.stats-grid {
  width: 100%;
}

#saas .stats-grid,
#saas.saas-stats {
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)) !important;
}

#saas .saas-stats .stat-card {
  min-width: 0;
  overflow: hidden;
}

#saas .saas-stats .stat-card strong {
  font-size: clamp(25px, 2vw, 34px);
  line-height: 1.15;
  overflow-wrap: anywhere;
}

#saas #saasCurrentRole {
  font-size: clamp(20px, 1.8vw, 28px);
}

#saas .saas-grid.split {
  width: 100%;
  grid-template-columns: minmax(360px, 430px) minmax(0, 1fr);
}

#saas .panel {
  min-width: 0;
}

#saas .panel-head {
  align-items: center;
}

#saas .panel-head input {
  max-width: 240px;
}

#saas .saas-card {
  overflow: hidden;
}

#saas .saas-card-grid {
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}

.password-rules {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  margin-top: 9px;
}

.password-rules span {
  position: relative;
  padding-left: 22px;
  color: #B2967D;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.35;
}

.password-rules span::before {
  content: "×";
  position: absolute;
  left: 0;
  top: -1px;
  width: 15px;
  height: 15px;
  border-radius: 999px;
  display: inline-grid;
  place-items: center;
  background: #FEE4E2;
  color: #991B1B;
  font-size: 11px;
  font-weight: 1000;
}

.password-rules span.ok {
  color: #4A342A;
}

.password-rules span.ok::before {
  content: "✓";
  background: #D7C9B8;
  color: #4A342A;
}

.password-help {
  display: block;
  color: #7D5A44;
  font-size: 12px;
  margin-bottom: 7px;
  font-weight: 800;
}

@media (max-width: 1180px) {
  #saas .saas-grid.split {
    grid-template-columns: 1fr;
  }

  #saas .panel-head {
    display: grid;
    gap: 12px;
  }

  #saas .panel-head input {
    max-width: 100%;
  }
}

@media (max-width: 760px) {
  #saas .saas-header {
    grid-template-columns: 1fr;
  }

  .password-rules {
    grid-template-columns: 1fr;
  }
}


/* =========================================================
   GENERADOR DE CONTRASEÑAS + CONTROL PAGOS EMPRESAS
   ========================================================= */

.password-generator-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 10px;
}

.password-generator-btn {
  width: auto !important;
  min-height: 38px;
  padding: 10px 13px !important;
  font-size: 12px !important;
  border-radius: 12px !important;
}

.generated-password-hint {
  display: block;
  margin-top: 8px;
  color: #7D5A44;
  font-size: 12px;
  font-weight: 800;
}

.generated-password-hint.active {
  color: #4A342A;
}

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

.company-payment-card {
  border-left: 5px solid #7D5A44 !important;
}

.company-payment-card.status-card-overdue {
  border-left-color: #B42318 !important;
}

.company-payment-card.status-card-pending {
  border-left-color: #7D5A44 !important;
}

.company-payment-card.status-card-partial {
  border-left-color: #7D5A44 !important;
}

.company-payment-card.status-card-paid {
  border-left-color: #7D5A44 !important;
}

.company-payment-card.status-card-cancelled {
  border-left-color: #7D5A44 !important;
  opacity: .72;
}

.payment-status-pill {
  display: inline-flex;
  white-space: nowrap;
  padding: 7px 10px;
  border-radius: 999px;
  font-weight: 900;
  font-size: 12px;
}

.payment-status-pill.status-paid {
  background: #D7C9B8;
  color: #4A342A;
}

.payment-status-pill.status-pending {
  background: #D7C9B8;
  color: #7D5A44;
}

.payment-status-pill.status-partial {
  background: #D7C9B8;
  color: #7D5A44;
}

.payment-status-pill.status-overdue {
  background: #FEE4E2;
  color: #991B1B;
}

.payment-status-pill.status-cancelled {
  background: #D7C9B8;
  color: #7D5A44;
}

.payment-grid span {
  min-width: 0;
}

.payment-notes {
  margin: 10px 0 0;
  padding: 10px;
  border-radius: 12px;
  background: #F5F1EA;
  color: #7D5A44;
  font-size: 13px;
}

.danger-soft-btn {
  background: #FEE4E2 !important;
  color: #991B1B !important;
  border-color: #FECACA !important;
}

#saasStatPendingPayments {
  font-size: clamp(18px, 1.6vw, 26px) !important;
}

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

  .password-generator-row {
    display: grid;
  }

  .password-generator-btn {
    width: 100% !important;
  }
}


/* =========================================================
   CONTRASEÑA: MAYÚSCULA Y SÍMBOLO OPCIONALES
   ========================================================= */

.password-rules span[data-rule="upper"]::before,
.password-rules span[data-rule="special"]::before {
  content: "○";
  background: #D7C9B8;
  color: #7D5A44;
}

.password-rules span[data-rule="upper"],
.password-rules span[data-rule="special"] {
  color: #7D5A44;
}

.password-rules span[data-rule="upper"].ok::before,
.password-rules span[data-rule="special"].ok::before {
  content: "✓";
  background: #D7C9B8;
  color: #4A342A;
}

.password-rules span[data-rule="upper"].ok,
.password-rules span[data-rule="special"].ok {
  color: #4A342A;
}




/* =========================================================
   AUDITORÍA RECIENTE EN ACORDEÓN
   ========================================================= */

.audit-accordion-panel {
  padding: 0 !important;
  overflow: hidden;
}

.audit-accordion-toggle {
  width: 100%;
  min-height: 86px;
  padding: 22px 24px;
  border: 0;
  background: transparent;
  color: #4A342A;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  text-align: left;
  cursor: pointer;
  border-radius: 28px;
}

.audit-accordion-toggle:hover {
  background: rgba(215, 201, 184, .55);
}

.audit-accordion-toggle span:first-child {
  display: grid;
  gap: 5px;
}

.audit-accordion-toggle strong {
  font-size: 20px;
  line-height: 1.15;
}

.audit-accordion-toggle small {
  color: #7D5A44;
  font-weight: 700;
  line-height: 1.35;
}

.audit-toggle-right {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  flex: 0 0 auto;
}

.audit-toggle-right em {
  font-style: normal;
  background: #D7C9B8;
  color: #4A342A;
  border: 1px solid #D7C9B8;
  border-radius: 999px;
  padding: 8px 11px;
  font-size: 12px;
  font-weight: 1000;
  white-space: nowrap;
}

.audit-chevron {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid #D7C9B8;
  background: linear-gradient(180deg, #F5F1EA 0%, #D7C9B8 100%);
  color: #4A342A;
  display: inline-grid;
  place-items: center;
  flex: 0 0 40px;
  box-shadow: 0 6px 16px rgba(125, 90, 68, .12);
  transition: transform .2s ease, background .2s ease, color .2s ease, box-shadow .2s ease;
}

.audit-chevron svg {
  width: 20px;
  height: 20px;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.25;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.audit-accordion-toggle:hover .audit-chevron {
  background: #D7C9B8;
  box-shadow: 0 8px 20px rgba(125, 90, 68, .18);
}

.audit-accordion-toggle.open .audit-chevron {
  transform: rotate(180deg);
  background: #7D5A44;
  border-color: #7D5A44;
  color: #FFFFFF;
  box-shadow: 0 8px 20px rgba(125, 90, 68, .24);
}

.audit-accordion-body {
  padding: 0 24px 24px;
  border-top: 1px solid #D7C9B8;
  animation: auditOpen .18s ease;
}

.audit-accordion-body.hidden {
  display: none !important;
}

.audit-accordion-body.open {
  display: block;
}

.audit-accordion-info {
  margin: 18px 0 14px;
  padding: 13px 14px;
  border-radius: 16px;
  background: #F5F1EA;
  color: #4A342A;
  border: 1px solid #D7C9B8;
  font-weight: 800;
  line-height: 1.45;
}

.audit-list {
  max-height: 440px;
  overflow-y: auto;
  padding-right: 4px;
}

.audit-row {
  transition: .16s ease;
}

.audit-row:hover {
  transform: translateY(-1px);
  border-color: #D7C9B8;
  box-shadow: 0 12px 26px rgba(74, 52, 42, .08);
}

@keyframes auditOpen {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 720px) {
  .audit-accordion-toggle {
    display: grid;
  }

  .audit-toggle-right {
    justify-content: space-between;
    width: 100%;
  }

  .audit-list {
    max-height: 360px;
  }
}


/* =========================================================
   PACIENTES: SECCIÓN LIMPIA CON BUSCADOR PRINCIPAL
   ========================================================= */

.patients-search-layout {
  display: grid;
  gap: 22px;
}

.patient-search-main-card {
  padding: 26px !important;
}

.patient-search-hero {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: center;
  margin-bottom: 18px;
}

.patient-search-hero h3 {
  font-size: 28px;
  margin: 4px 0 6px;
  letter-spacing: -.03em;
}

.patient-search-hero p {
  margin: 0;
  color: #7D5A44;
  line-height: 1.55;
  max-width: 760px;
}

.patient-search-hero .primary-btn {
  width: auto !important;
  flex: 0 0 auto;
}

.patient-search-bar-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 10px;
  align-items: center;
}

.patient-search-bar-main input {
  min-height: 54px;
  font-size: 15px;
}

.patient-search-bar-main button {
  min-height: 50px;
  white-space: nowrap;
}

.patient-search-note {
  margin-top: 14px;
  padding: 13px 14px;
  border-radius: 16px;
  background: #F5F1EA;
  border: 1px solid #D7C9B8;
  color: #4A342A;
  font-weight: 800;
  line-height: 1.45;
}

.patient-form-v2.hidden,
.collapsed-form.hidden {
  display: none !important;
}

.form-title-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.close-form-btn {
  width: auto !important;
  padding: 10px 13px !important;
  min-height: 40px;
}

.patient-results-head {
  align-items: start !important;
}

.patient-results-head p {
  margin: 6px 0 0;
  color: #7D5A44;
  font-weight: 700;
}

.patient-list-empty-mode {
  display: block !important;
}

.patient-empty-search {
  min-height: 260px;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 34px;
  border: 1px dashed #D7C9B8;
  border-radius: 22px;
  background: linear-gradient(135deg, #F5F1EA, #F5F1EA);
  color: #7D5A44;
}

.patient-empty-search h4 {
  margin: 8px 0 4px;
  color: #4A342A;
  font-size: 20px;
}

.patient-empty-search p {
  margin: 0;
  max-width: 460px;
  line-height: 1.55;
  font-weight: 700;
}

.patient-empty-icon {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border-radius: 20px;
  background: #D7C9B8;
  color: #4A342A;
  font-size: 30px;
  font-weight: 1000;
}

@media (max-width: 820px) {
  .patient-search-hero {
    display: grid;
  }

  .patient-search-hero .primary-btn {
    width: 100% !important;
  }

  .patient-search-bar-main {
    grid-template-columns: 1fr;
  }

  .patient-search-bar-main button {
    width: 100% !important;
  }
}


/* =========================================================
   CORRECCIÓN PACIENTES: SIN DOBLE PANEL
   ========================================================= */

#patients > .split {
  display: none !important;
}

.patients-search-layout {
  display: grid;
  gap: 22px;
}

.patient-search-main-card {
  padding: 26px !important;
}

.patient-search-hero {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: center;
  margin-bottom: 18px;
}

.patient-search-hero h3 {
  font-size: 28px;
  margin: 4px 0 6px;
  letter-spacing: -.03em;
}

.patient-search-hero p {
  margin: 0;
  color: #7D5A44;
  line-height: 1.55;
  max-width: 760px;
}

.patient-search-hero .primary-btn {
  width: auto !important;
  flex: 0 0 auto;
}

.patient-search-bar-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 10px;
  align-items: center;
}

.patient-search-bar-main input {
  min-height: 54px;
  font-size: 15px;
}

.patient-search-bar-main button {
  min-height: 50px;
  white-space: nowrap;
}

.patient-search-note {
  margin-top: 14px;
  padding: 13px 14px;
  border-radius: 16px;
  background: #F5F1EA;
  border: 1px solid #D7C9B8;
  color: #4A342A;
  font-weight: 800;
  line-height: 1.45;
}

.patient-form-v2.hidden,
.collapsed-form.hidden {
  display: none !important;
}

.form-title-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.close-form-btn {
  width: auto !important;
  padding: 10px 13px !important;
  min-height: 40px;
}

.patient-results-head {
  align-items: start !important;
}

.patient-results-head p {
  margin: 6px 0 0;
  color: #7D5A44;
  font-weight: 700;
}

.patient-list-empty-mode {
  display: block !important;
}

.patient-empty-search {
  min-height: 260px;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 34px;
  border: 1px dashed #D7C9B8;
  border-radius: 22px;
  background: linear-gradient(135deg, #F5F1EA, #F5F1EA);
  color: #7D5A44;
}

.patient-empty-search h4 {
  margin: 8px 0 4px;
  color: #4A342A;
  font-size: 20px;
}

.patient-empty-search p {
  margin: 0;
  max-width: 460px;
  line-height: 1.55;
  font-weight: 700;
}

.patient-empty-icon {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border-radius: 20px;
  background: #D7C9B8;
  color: #4A342A;
  font-size: 30px;
  font-weight: 1000;
}

@media (max-width: 820px) {
  .patient-search-hero {
    display: grid;
  }

  .patient-search-hero .primary-btn {
    width: 100% !important;
  }

  .patient-search-bar-main {
    grid-template-columns: 1fr;
  }

  .patient-search-bar-main button {
    width: 100% !important;
  }
}


/* =========================================================
   AJUSTE SAAS SIN BLOQUE DE PUBLICIDAD
   ========================================================= */

#saas .saas-grid {
  margin-top: 22px !important;
  margin-bottom: 22px !important;
}

#saas .panel {
  overflow: hidden;
}

#saas .saas-stats {
  gap: 20px !important;
  margin: 24px 0 !important;
}

#saas .saas-grid.split {
  grid-template-columns: minmax(360px, 430px) minmax(0, 1fr) !important;
  gap: 22px !important;
}

@media (max-width: 1180px) {
  #saas .saas-grid.split {
    grid-template-columns: 1fr !important;
  }
}


/* Panel: acordeón de próximas citas */
.dashboard-appointments-accordion {
  padding: 0;
  overflow: hidden;
}

.dashboard-accordion-trigger {
  width: 100%;
  min-height: 76px;
  padding: 20px 22px;
  border: 0;
  background: transparent;
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  text-align: left;
  cursor: pointer;
}

.dashboard-accordion-trigger:hover {
  background: rgba(255, 255, 255, 0.45);
}

.dashboard-accordion-trigger:focus-visible {
  outline: 3px solid rgba(125, 90, 68, 0.28);
  outline-offset: -3px;
}

.dashboard-accordion-title {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 10px;
}

.dashboard-accordion-title > span {
  font-size: 19px;
  font-weight: 800;
}

.dashboard-accordion-title small {
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.dashboard-accordion-icon {
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  border-radius: 14px;
  background: linear-gradient(145deg, rgba(125, 90, 68, 0.18), rgba(125, 90, 68, 0.08));
  border: 1px solid rgba(125, 90, 68, 0.18);
  box-shadow: 0 6px 16px rgba(125, 90, 68, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.75);
  display: grid;
  place-items: center;
  color: #4A342A;
  transition: transform 0.22s ease, background 0.22s ease, box-shadow 0.22s ease, color 0.22s ease;
}

.dashboard-accordion-icon svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.dashboard-accordion-trigger:hover .dashboard-accordion-icon {
  background: linear-gradient(145deg, rgba(125, 90, 68, 0.28), rgba(125, 90, 68, 0.14));
  box-shadow: 0 8px 20px rgba(125, 90, 68, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.85);
  color: #4A342A;
}

.dashboard-appointments-accordion.is-open .dashboard-accordion-icon {
  transform: rotate(180deg);
  background: linear-gradient(145deg, #7D5A44, #7D5A44);
  color: #FFFFFF;
  box-shadow: 0 8px 20px rgba(125, 90, 68, 0.26);
}

.dashboard-accordion-content {
  padding: 0 22px 22px;
  border-top: 1px solid var(--line);
}

.dashboard-accordion-content .list {
  padding-top: 16px;
}

@media (max-width: 760px) {
  .dashboard-accordion-trigger {
    min-height: 68px;
    padding: 16px 18px;
  }

  .dashboard-accordion-content {
    padding: 0 18px 18px;
  }

  .dashboard-accordion-title {
    display: grid;
    gap: 3px;
  }
}

/* =========================================================
   ODONTOGRAMA V3 · DISEÑO VISUAL INTEGRADO CON DENTALYACO PRO
   ========================================================= */














































































/* =========================================================
   ODONTOGRAMA V4 · DISTRIBUCIÓN CLÍNICA SEGÚN REFERENCIA
   Mantiene todas las convenciones y la interacción existente.
   ========================================================= */
































/* =========================================================
   ODONTOGRAMA V5 · COMPOSICIÓN VISUAL MÁS LIMPIA Y EQUILIBRADA
   Evita que la lista de convenciones estire innecesariamente
   el tablero y mejora jerarquía, espaciado y legibilidad.
   ========================================================= */


































































/* Buscador de pacientes en historia clínica */
.clinical-patient-search {
  position: relative;
}

#clinicalPatientSearch {
  padding-right: 44px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%234A342A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 19px;
}

#clinicalPatientSearch.patient-selected {
  border-color: var(--primary);
  background-color: rgba(74, 52, 42, .045);
  font-weight: 700;
}

.clinical-patient-results {
  position: absolute;
  z-index: 60;
  top: calc(100% + 7px);
  left: 0;
  right: 0;
  max-height: 300px;
  overflow-y: auto;
  padding: 7px;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: #FFFFFF;
  box-shadow: 0 18px 42px rgba(74, 52, 42, .16);
}

.clinical-patient-option {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 11px;
  border: 0;
  border-radius: 11px;
  padding: 10px;
  background: transparent;
  text-align: left;
  cursor: pointer;
  color: var(--text);
}

.clinical-patient-option:hover,
.clinical-patient-option:focus {
  background: rgba(125, 90, 68, .09);
  outline: none;
}

.clinical-patient-avatar {
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: rgba(125, 90, 68, .13);
  color: #4A342A;
  font-weight: 900;
}

.clinical-patient-info {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.clinical-patient-info strong,
.clinical-patient-info small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.clinical-patient-info small,
.field-help {
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
}

.clinical-patient-empty {
  padding: 14px 12px;
  color: var(--muted);
  text-align: center;
  font-size: 13px;
  font-weight: 600;
}

@media (max-width: 640px) {
  .clinical-patient-results {
    max-height: 250px;
  }
}


/* Historia clínica: expediente filtrado y acordeón */
.clinical-history-panel {
  align-self: start;
  padding: 22px;
  overflow: hidden;
}

.clinical-history-panel[hidden] {
  display: none !important;
}

.clinical-history-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 16px;
}

.clinical-history-panel-head h3 {
  margin: 3px 0 4px;
}

.clinical-history-panel-head p {
  margin: 0;
  color: var(--muted, #7D5A44);
}

.clinical-history-kicker {
  display: block;
  color: #7D5A44;
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .09em;
}

.clinical-history-count {
  flex: 0 0 auto;
  padding: 8px 12px;
  border-radius: 999px;
  background: #D7C9B8;
  color: #4A342A;
  font-size: .78rem;
  font-weight: 800;
}

.clinical-selected-patient {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 13px;
  padding: 14px 16px;
  margin-bottom: 16px;
  border: 1px solid #D7C9B8;
  border-radius: 16px;
  background: linear-gradient(135deg, #F5F1EA 0%, #FFFFFF 100%);
}

.clinical-selected-avatar {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 13px;
  background: #7D5A44;
  color: #FFFFFF;
  font-size: 1rem;
  font-weight: 900;
}

.clinical-selected-main,
.clinical-selected-contact {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 3px;
}

.clinical-selected-main strong {
  color: #4A342A;
  font-size: 1rem;
}

.clinical-selected-main span,
.clinical-selected-contact span {
  color: #7D5A44;
  font-size: .8rem;
  overflow-wrap: anywhere;
}

.clinical-accordion-list {
  display: grid;
  gap: 11px;
}

.clinical-accordion-item {
  border: 1px solid #D7C9B8;
  border-radius: 16px;
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 7px 20px rgba(74, 52, 42, .05);
  overflow: hidden;
  transition: border-color .2s ease, box-shadow .2s ease;
}

.clinical-accordion-item[open] {
  border-color: #B2967D;
  box-shadow: 0 12px 28px rgba(125, 90, 68, .10);
}

.clinical-accordion-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  padding: 15px 16px;
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.clinical-accordion-summary::-webkit-details-marker {
  display: none;
}

.clinical-accordion-title {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 12px;
}

.clinical-record-number {
  display: grid;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  place-items: center;
  border-radius: 11px;
  background: #D7C9B8;
  color: #4A342A;
  font-size: .8rem;
  font-weight: 900;
}

.clinical-accordion-title div {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 3px;
}

.clinical-accordion-title strong {
  color: #4A342A;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.clinical-accordion-title small {
  color: #7D5A44;
}

.clinical-accordion-chevron {
  width: 10px;
  height: 10px;
  flex: 0 0 10px;
  border-right: 2px solid #4A342A;
  border-bottom: 2px solid #4A342A;
  transform: rotate(45deg);
  transition: transform .2s ease;
  margin-right: 5px;
}

.clinical-accordion-item[open] .clinical-accordion-chevron {
  transform: rotate(225deg);
}

.clinical-accordion-content {
  padding: 0 16px 16px;
  border-top: 1px solid #D7C9B8;
}

.clinical-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding-top: 14px;
}

.clinical-detail-card {
  min-width: 0;
  padding: 12px 13px;
  border-radius: 12px;
  background: #F5F1EA;
  border: 1px solid #D7C9B8;
}

.clinical-detail-wide {
  grid-column: 1 / -1;
}

.clinical-detail-card span {
  display: block;
  margin-bottom: 5px;
  color: #4A342A;
  font-size: .72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.clinical-detail-card p {
  margin: 0;
  color: #7D5A44;
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.clinical-accordion-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 12px;
}

.clinical-empty-state {
  display: grid;
  place-items: center;
  padding: 38px 22px;
  text-align: center;
  border: 1px dashed #D7C9B8;
  border-radius: 16px;
  background: #F5F1EA;
}

.clinical-empty-state p {
  max-width: 430px;
  margin: 6px 0 0;
  color: #7D5A44;
}

.clinical-empty-icon {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  margin-bottom: 10px;
  border-radius: 13px;
  background: #D7C9B8;
  color: #4A342A;
  font-size: 1.5rem;
  font-weight: 400;
}

@media (max-width: 900px) {
  .clinical-selected-patient {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .clinical-selected-contact {
    grid-column: 1 / -1;
    padding-left: 55px;
  }
}

@media (max-width: 600px) {
  .clinical-history-panel {
    padding: 16px;
  }

  .clinical-history-panel-head {
    align-items: stretch;
    flex-direction: column;
  }

  .clinical-history-count {
    align-self: flex-start;
  }

  .clinical-detail-grid {
    grid-template-columns: 1fr;
  }

  .clinical-detail-wide {
    grid-column: auto;
  }

  .clinical-selected-patient {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .clinical-selected-contact {
    padding-left: 0;
  }

  .clinical-accordion-title strong {
    white-space: normal;
  }

  .clinical-accordion-actions .secondary-btn {
    width: 100%;
  }
}
























/* Agenda por paciente y estado de cuenta */
.appointment-patient-panel[hidden]{display:none!important}
.appointment-patient-panel{align-self:start;overflow:hidden}
.appointment-patient-panel-head{display:flex;justify-content:space-between;gap:20px;align-items:flex-start;margin-bottom:16px}
.appointment-panel-kicker{display:block;font-size:11px;font-weight:800;letter-spacing:.12em;color:#7D5A44;margin-bottom:4px}
.appointment-patient-panel-head h3{margin:0 0 4px}
.appointment-patient-panel-head p{margin:0;color:#7D5A44}
.appointment-count{white-space:nowrap;background:#F5F1EA;color:#4A342A;border-radius:999px;padding:8px 12px;font-weight:800;font-size:13px}
.appointment-patient-summary{border:1px solid #D7C9B8;background:linear-gradient(135deg,#F5F1EA,#F5F1EA);border-radius:18px;padding:16px;margin-bottom:16px}
.appointment-summary-person{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.appointment-summary-avatar{width:42px;height:42px;border-radius:14px;display:grid;place-items:center;background:#7D5A44;color:white;font-weight:900;font-size:18px}
.appointment-summary-person div{display:flex;flex-direction:column;gap:3px}.appointment-summary-person small{color:#7D5A44}
.appointment-account-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.appointment-account-grid>div{background:white;border:1px solid #D7C9B8;border-radius:14px;padding:12px;display:flex;flex-direction:column;gap:4px}
.appointment-account-grid span{font-size:12px;color:#7D5A44}.appointment-account-grid strong{font-size:16px;color:#4A342A}
.appointment-account-grid .has-balance{background:#FEE4E2;border-color:#FEE4E2}.appointment-account-grid .has-balance strong{color:#B42318}
.appointment-account-grid .account-ok{background:#F5F1EA;border-color:#D7C9B8}.appointment-account-grid .account-ok strong{color:#4A342A}
.appointment-accordion-list{display:grid;gap:12px}
.appointment-accordion-item{border:1px solid #D7C9B8;border-radius:16px;background:white;overflow:hidden}
.appointment-accordion-trigger{width:100%;border:0;background:white;display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:12px;text-align:left;padding:15px 16px;cursor:pointer;color:#4A342A}
.appointment-accordion-trigger span:first-child{display:flex;flex-direction:column;gap:4px}.appointment-accordion-trigger small{color:#7D5A44;font-weight:500}
.appointment-chevron{width:12px;height:12px;border-right:2px solid #7D5A44;border-bottom:2px solid #7D5A44;transform:rotate(45deg);transition:.2s}
.appointment-accordion-item.open .appointment-chevron{transform:rotate(225deg)}
.appointment-accordion-content{display:none;padding:0 16px 16px}.appointment-accordion-item.open .appointment-accordion-content{display:block}
.appointment-detail-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding-top:14px;border-top:1px solid #F5F1EA}
.appointment-detail-grid p{margin:0;background:#F5F1EA;border-radius:12px;padding:10px;display:flex;flex-direction:column;gap:4px}.appointment-detail-grid span{font-size:12px;color:#7D5A44}
.appointment-empty-state{border:1px dashed #D7C9B8;border-radius:16px;padding:26px;text-align:center;display:flex;flex-direction:column;gap:6px;color:#7D5A44}.appointment-empty-state strong{color:#4A342A}
@media(max-width:900px){.appointment-account-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.appointment-patient-panel-head{flex-direction:column}.appointment-account-grid,.appointment-detail-grid{grid-template-columns:1fr}.appointment-accordion-trigger{grid-template-columns:1fr auto}.appointment-chevron{display:none}.appointment-actions{grid-template-columns:1fr 1fr}}


/* Pagos y cartera: visible solo después de seleccionar paciente */
.payment-portfolio-subtitle {
  margin: -4px 0 16px;
  color: var(--muted, #7D5A44);
  font-size: .95rem;
}
.payment-empty-state {
  min-height: 150px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
  padding: 28px;
  border: 1px dashed rgba(125, 90, 68, .35);
  border-radius: 18px;
  background: rgba(245, 241, 234, .72);
  color: #4A342A;
}
.payment-empty-state span {
  color: #7D5A44;
  font-size: .94rem;
}


/* =========================================================
   ESTILO UNIFICADO PARA TODAS LAS FLECHAS DE ACORDEÓN
   ========================================================= */
.dashboard-accordion-icon,
.audit-chevron,
.clinical-accordion-chevron,
.appointment-chevron {
  width: 40px;
  height: 40px;
  min-width: 40px;
  flex: 0 0 40px;
  margin: 0;
  border: 1px solid rgba(125, 90, 68, 0.24);
  border-radius: 14px;
  background: linear-gradient(145deg, rgba(125, 90, 68, 0.18), rgba(125, 90, 68, 0.08));
  color: #4A342A;
  display: inline-grid;
  place-items: center;
  box-sizing: border-box;
  box-shadow: 0 6px 16px rgba(125, 90, 68, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.78);
  transform: rotate(0deg);
  transition: transform .22s ease, background .22s ease, border-color .22s ease, box-shadow .22s ease, color .22s ease;
}

.dashboard-accordion-icon svg,
.audit-chevron svg,
.clinical-accordion-chevron svg,
.appointment-chevron svg {
  width: 20px;
  height: 20px;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.dashboard-accordion-trigger:hover .dashboard-accordion-icon,
.audit-accordion-toggle:hover .audit-chevron,
.clinical-accordion-summary:hover .clinical-accordion-chevron,
.appointment-accordion-trigger:hover .appointment-chevron {
  background: linear-gradient(145deg, rgba(125, 90, 68, 0.28), rgba(125, 90, 68, 0.14));
  border-color: rgba(125, 90, 68, 0.34);
  color: #4A342A;
  box-shadow: 0 8px 20px rgba(125, 90, 68, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.85);
}

.dashboard-appointments-accordion.is-open .dashboard-accordion-icon,
.audit-accordion-toggle.open .audit-chevron,
.clinical-accordion-item[open] .clinical-accordion-chevron,
.appointment-accordion-item.open .appointment-chevron {
  transform: rotate(180deg);
  background: linear-gradient(145deg, #7D5A44, #7D5A44);
  border-color: #7D5A44;
  color: #FFFFFF;
  box-shadow: 0 8px 20px rgba(125, 90, 68, 0.26);
}

@media (max-width: 560px) {
  .dashboard-accordion-icon,
  .audit-chevron,
  .clinical-accordion-chevron,
  .appointment-chevron {
    width: 38px;
    height: 38px;
    min-width: 38px;
    flex-basis: 38px;
    display: inline-grid;
  }

  .appointment-accordion-trigger {
    grid-template-columns: minmax(0, 1fr) auto auto;
  }
}


/* =========================================================
   PAGOS Y CARTERA: estados alineados con los botones
   ========================================================= */
#paymentPortfolioPanel .item-head {
  align-items: center;
}

#paymentPortfolioPanel .item-actions {
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

#paymentPortfolioPanel .payment-account-status {
  min-height: 46px;
  min-width: 112px;
  padding: 0 18px;
  border: 1px solid #D7C9B8;
  border-radius: 14px;
  justify-content: center;
  font-size: 14px;
  font-weight: 800;
  line-height: 1;
  box-shadow: none;
  white-space: nowrap;
}

#paymentPortfolioPanel .payment-account-status.paid {
  background: #F5F1EA;
  border-color: #D7C9B8;
  color: #4A342A;
}

#paymentPortfolioPanel .payment-account-status.warning {
  background: #F5F1EA;
  border-color: #D7C9B8;
  color: #991B1B;
}

#paymentPortfolioPanel .item-actions .primary-btn,
#paymentPortfolioPanel .item-actions .secondary-btn {
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}

@media (max-width: 900px) {
  #paymentPortfolioPanel .item-head {
    align-items: flex-start;
  }

  #paymentPortfolioPanel .item-actions {
    width: 100%;
    justify-content: flex-start;
  }
}

@media (max-width: 560px) {
  #paymentPortfolioPanel .item-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  #paymentPortfolioPanel .payment-account-status,
  #paymentPortfolioPanel .item-actions .primary-btn,
  #paymentPortfolioPanel .item-actions .secondary-btn {
    width: 100%;
    min-width: 0;
  }
}

/* =========================================================
   PAGOS Y CARTERA: estado visual uniforme con las acciones
   ========================================================= */
#paymentPortfolioPanel .item-actions {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(132px, max-content);
  align-items: stretch;
  justify-content: end;
  gap: 10px;
}

#paymentPortfolioPanel .payment-account-status,
#paymentPortfolioPanel .item-actions .primary-btn,
#paymentPortfolioPanel .item-actions .secondary-btn {
  width: 100%;
  min-width: 132px;
  min-height: 46px;
  height: 46px;
  padding: 0 16px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  font-size: 14px;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
}

#paymentPortfolioPanel .payment-account-status.warning {
  background: #F5F1EA;
  border: 1px solid #B2967D;
  color: #7D5A44;
}

#paymentPortfolioPanel .payment-account-status.paid {
  background: #F5F1EA;
  border: 1px solid #D7C9B8;
  color: #4A342A;
}

@media (max-width: 900px) {
  #paymentPortfolioPanel .item-actions {
    grid-auto-flow: row;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
    justify-content: stretch;
  }
}

@media (max-width: 620px) {
  #paymentPortfolioPanel .item-actions {
    grid-template-columns: 1fr;
  }
}


/* Bloqueo visual de acciones cuando la cita ya tiene un estado definido */
.appointment-actions button:disabled {
  opacity: .48;
  cursor: not-allowed;
  box-shadow: none !important;
  transform: none !important;
  filter: grayscale(.12);
}

.appointment-status-locked {
  margin: 12px 0 0;
  padding: 10px 12px;
  border: 1px solid rgba(125, 90, 68, .18);
  border-radius: 12px;
  background: rgba(125, 90, 68, .07);
  color: #7D5A44;
  font-size: 13px;
  line-height: 1.4;
}

.appointment-status-locked strong {
  color: #4A342A;
}

/* ===== Informes ===== */
.reports-layout {
  display: grid;
  grid-template-columns: minmax(280px, 360px) minmax(0, 1fr);
  gap: 22px;
  align-items: start;
}

.reports-filter-panel,
.reports-results-panel {
  border-radius: 28px;
}

.reports-filter-panel {
  display: grid;
  gap: 18px;
  position: sticky;
  top: 18px;
}

.reports-filter-head h3,
.reports-results-head h3 {
  margin: 4px 0 6px;
}

.reports-filter-head p,
.reports-results-head p,
.report-filter-help {
  margin: 0;
  color: var(--muted, #7D5A44);
}

.report-period-buttons {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.report-period-btn {
  min-height: 44px;
  border: 1px solid #D7C9B8;
  border-radius: 14px;
  background: #F5F1EA;
  color: #4A342A;
  font-weight: 800;
  cursor: pointer;
  transition: .2s ease;
}

.report-period-btn:hover,
.report-period-btn.active {
  background: #7D5A44;
  border-color: #7D5A44;
  color: #FFFFFF;
  box-shadow: 0 10px 24px rgba(125, 90, 68,.18);
}

.report-date-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.reports-results-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 18px;
  margin-bottom: 18px;
}

.reports-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

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

.report-summary-card {
  min-height: 112px;
  padding: 18px;
  border: 1px solid #D7C9B8;
  border-radius: 18px;
  background: linear-gradient(145deg, #FFFFFF, #F5F1EA);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
}

.report-summary-card span {
  color: #7D5A44;
  font-size: .86rem;
}

.report-summary-card strong {
  color: #4A342A;
  font-size: 1.35rem;
}

.report-summary-card small {
  color: #7D5A44;
  line-height: 1.35;
}

.report-table-wrap {
  overflow: auto;
  border: 1px solid #D7C9B8;
  border-radius: 18px;
  background: #FFFFFF;
}

.report-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 760px;
}

.report-table th,
.report-table td {
  padding: 14px 16px;
  text-align: left;
  border-bottom: 1px solid #D7C9B8;
  vertical-align: top;
}

.report-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #F5F1EA;
  color: #4A342A;
  font-size: .82rem;
  text-transform: uppercase;
  letter-spacing: .03em;
}

.report-table tr:last-child td {
  border-bottom: 0;
}

.report-table tbody tr:hover {
  background: #F5F1EA;
}

.report-empty {
  padding: 48px 20px;
  text-align: center;
  color: #7D5A44;
  border: 1px dashed #D7C9B8;
  border-radius: 18px;
  background: #F5F1EA;
}

@media (max-width: 1100px) {
  .reports-layout { grid-template-columns: 1fr; }
  .reports-filter-panel { position: static; }
  .report-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .report-date-grid,
  .report-summary-grid { grid-template-columns: 1fr; }
  .reports-results-head { flex-direction: column; }
  .reports-actions { width: 100%; }
  .reports-actions .primary-btn,
  .reports-actions .secondary-btn { flex: 1 1 100%; }
}

@media print {
  body * { visibility: hidden !important; }
  #reports, #reports * { visibility: visible !important; }
  #reports {
    position: absolute;
    inset: 0;
    width: 100%;
    padding: 0;
    background: #FFFFFF;
  }
  #reports .reports-filter-panel,
  #reports .reports-actions { display: none !important; }
  #reports .reports-layout { display: block; }
  #reports .panel { box-shadow: none; border: 0; padding: 0; }
  #reports .report-table-wrap { overflow: visible; border: 0; }
  #reports .report-table { min-width: 0; font-size: 10pt; }
  #reports .report-summary-grid { grid-template-columns: repeat(4, 1fr); }
  #reports .report-summary-card { min-height: auto; box-shadow: none; }
}

/* ===== Informes: rango de fechas simplificado ===== */
.report-date-grid-primary {
  margin-top: 8px;
  padding: 16px;
  border: 1px solid rgba(125, 90, 68, .22);
  border-radius: 18px;
  background: rgba(245, 241, 234, .72);
}
.report-date-grid-primary label {
  margin: 0;
}
.report-date-grid-primary input[type="date"] {
  background: #FFFFFF;
}

/* ===== Informes: panel de filtros más limpio y equilibrado ===== */
.reports-layout {
  grid-template-columns: minmax(340px, 410px) minmax(0, 1fr);
  gap: 26px;
}

.reports-filter-panel {
  gap: 22px;
  padding: 28px;
  overflow: hidden;
}

.reports-filter-head {
  display: grid;
  gap: 8px;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(125, 90, 68, .14);
}

.reports-filter-head .saas-kicker {
  width: max-content;
  margin: 0;
}

.reports-filter-head h3 {
  margin: 4px 0 0;
  font-size: 1.35rem;
  line-height: 1.15;
}

.reports-filter-head p {
  max-width: 34ch;
  line-height: 1.55;
}

.reports-filter-panel > label {
  display: grid;
  gap: 9px;
  margin: 0;
  font-weight: 800;
  color: #4A342A;
}

.reports-filter-panel > label select {
  width: 100%;
  min-height: 52px;
  padding-inline: 16px 44px;
  border-radius: 15px;
  background-color: #FFFFFF;
}

.report-date-section {
  display: grid;
  gap: 14px;
}

.report-date-section-head {
  display: grid;
  gap: 3px;
}

.report-date-section-head > span {
  color: #4A342A;
  font-weight: 800;
}

.report-date-section-head > small {
  color: #7D5A44;
  font-size: .82rem;
  line-height: 1.35;
}

.report-date-grid-primary {
  grid-template-columns: 1fr;
  gap: 12px;
  margin: 0;
  padding: 16px;
  border-radius: 18px;
  background: linear-gradient(145deg, rgba(245, 241, 234,.96), rgba(245, 241, 234,.96));
}

.report-date-field {
  display: grid;
  grid-template-columns: minmax(100px, .8fr) minmax(0, 1.2fr);
  align-items: center;
  gap: 14px;
  min-height: 58px;
  margin: 0;
  padding: 8px 10px 8px 14px;
  border: 1px solid #D7C9B8;
  border-radius: 15px;
  background: #FFFFFF;
}

.report-date-field > span {
  color: #4A342A;
  font-weight: 800;
  font-size: .9rem;
}

.report-date-grid-primary .report-date-field input[type="date"] {
  width: 100%;
  min-width: 0;
  min-height: 42px;
  margin: 0;
  padding: 9px 11px;
  border: 1px solid #D7C9B8;
  border-radius: 11px;
  background: #F5F1EA;
  font-weight: 700;
}

.report-generate-btn {
  width: 100%;
  min-height: 48px;
  border-radius: 14px;
}

.report-filter-help {
  padding: 14px 15px;
  border-left: 3px solid #7D5A44;
  border-radius: 0 12px 12px 0;
  background: rgba(125, 90, 68, .06);
  font-size: .86rem;
  line-height: 1.5;
}

@media (max-width: 1100px) {
  .reports-layout { grid-template-columns: 1fr; }
  .reports-filter-panel { max-width: 620px; }
}

@media (max-width: 520px) {
  .reports-filter-panel { padding: 22px 18px; }
  .report-date-field {
    grid-template-columns: 1fr;
    gap: 7px;
    padding: 12px;
  }
}






























































































.surface-btn.distal{grid-column:1;grid-row:2}.surface-btn.mesial{grid-column:3;grid-row:2}.surface-btn.oclusal{grid-column:2;grid-row:3}


















/* Fecha de nacimiento y edad automática del paciente */
#patientCalculatedAge[readonly] {
  background: #F5F1EA;
  color: #4A342A;
  font-weight: 800;
  cursor: default;
}

/* Fecha de nacimiento y edad en una misma fila */
.patient-birth-age-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(180px, .45fr);
  gap: 14px;
  align-items: end;
}

.patient-birth-age-row > label {
  min-width: 0;
}

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


/* Inventario */
.inventory-summary-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:18px}
.inventory-layout{display:grid;grid-template-columns:minmax(290px,360px) minmax(0,1fr);gap:18px;align-items:start}
.inventory-form{display:grid;gap:13px;position:sticky;top:18px}
.inventory-form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.inventory-list-panel{min-width:0}
.inventory-list-head{display:flex;align-items:end;justify-content:space-between;gap:16px;margin-bottom:16px}
.inventory-list-head h3,.inventory-form h3{margin:4px 0 0}
.inventory-search{max-width:360px;width:100%}
.inventory-table td:first-child small{display:block;color:var(--muted);margin-top:4px}
.inventory-status{display:inline-flex;align-items:center;justify-content:center;padding:6px 10px;border-radius:999px;font-size:12px;font-weight:800;white-space:nowrap}
.inventory-status.success{background:#D7C9B8;color:#4A342A}.inventory-status.warning{background:#D7C9B8;color:#4A342A}.inventory-status.danger{background:#FEE4E2;color:#991B1B}
.inventory-actions{display:flex;gap:6px}.inventory-actions button{padding:7px 9px;font-size:12px}
.empty-table{text-align:center;color:var(--muted);padding:34px 16px!important}
@media(max-width:1100px){.inventory-summary-grid{grid-template-columns:repeat(2,1fr)}.inventory-layout{grid-template-columns:1fr}.inventory-form{position:static}.inventory-list-head{align-items:stretch;flex-direction:column}.inventory-search{max-width:none}}
@media(max-width:640px){.inventory-summary-grid,.inventory-form-row{grid-template-columns:1fr}.inventory-actions{flex-direction:column}}

/* Documentos y consentimientos */
.consent-page{display:grid;gap:16px}.consent-summary-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}.consent-summary-card{padding:18px}.consent-summary-card span{display:block;color:var(--muted);font-size:13px;margin-bottom:7px}.consent-summary-card strong{font-size:28px;color:var(--ink)}.consent-layout{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(340px,.85fr);gap:16px;align-items:start}.consent-form,.consent-list-panel{padding:20px}.consent-form-head,.consent-list-head{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;margin-bottom:18px}.consent-form-head h3,.consent-list-head h3{margin:3px 0 4px}.consent-form-head p{margin:0;color:var(--muted)}.consent-form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}.consent-form label{display:block;font-size:12px;font-weight:700;color:var(--ink);margin-bottom:13px}.consent-form input,.consent-form select,.consent-form textarea,.consent-search{width:100%;margin-top:6px;border:1px solid var(--line);border-radius:10px;background:#FFFFFF;padding:11px 12px;color:var(--ink)}.consent-form textarea{resize:vertical;line-height:1.5}.consent-checklist{border:1px solid var(--line);border-radius:12px;padding:14px;margin:4px 0 14px;background:#F5F1EA}.consent-checklist h4{margin:0 0 10px}.consent-checklist label{display:flex;align-items:flex-start;gap:8px;font-weight:500;margin:8px 0}.consent-checklist input{width:auto;margin:2px 0 0}.consent-actions-row{display:flex;gap:10px;flex-wrap:wrap}.consent-search{max-width:280px;margin:0}.consent-list{display:grid;gap:10px;max-height:900px;overflow:auto;padding-right:2px}.consent-card{border:1px solid var(--line);border-radius:12px;padding:14px;background:#FFFFFF}.consent-card-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}.consent-card h4{margin:0 0 5px}.consent-card p{margin:3px 0;color:var(--muted);font-size:13px}.consent-card-meta{display:flex;flex-wrap:wrap;gap:7px;margin:10px 0}.consent-badge{display:inline-flex;align-items:center;border-radius:999px;padding:5px 9px;font-size:11px;font-weight:800;background:#F5F1EA;color:#4A342A}.consent-badge.signed{background:#F5F1EA;color:#4A342A}.consent-badge.pending{background:#D7C9B8;color:#4A342A}.consent-badge.revoked,.consent-badge.rejected{background:#FEE4E2;color:#991B1B}.consent-card-actions{display:flex;gap:7px;flex-wrap:wrap;margin-top:10px}.consent-card-actions button{font-size:12px}.consent-empty{padding:28px;text-align:center;color:var(--muted);border:1px dashed var(--line);border-radius:12px}.consent-normative-note{padding:15px 18px;background:#F5F1EA}.consent-normative-note p{margin:5px 0 0;color:var(--muted);font-size:13px;line-height:1.5}.consent-print-sheet{display:none}
@media(max-width:1150px){.consent-summary-grid{grid-template-columns:repeat(2,1fr)}.consent-layout{grid-template-columns:1fr}.consent-list{max-height:none}}
@media(max-width:700px){.consent-summary-grid,.consent-form-row{grid-template-columns:1fr}.consent-form-head,.consent-list-head{flex-direction:column}.consent-search{max-width:none}.consent-actions-row>*{width:100%}}
@media print{body.consent-printing .sidebar,body.consent-printing .topbar,body.consent-printing .section,body.consent-printing .overlay{display:none!important}body.consent-printing .consent-print-sheet{display:block!important;background:#FFFFFF;color:#4A342A;padding:24px;font-family:Arial,sans-serif}.consent-print-sheet h1{text-align:center;font-size:20px}.consent-print-sheet .print-meta{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:18px 0}.consent-print-sheet .print-body{white-space:pre-wrap;line-height:1.55}.consent-print-sheet .print-signatures{display:grid;grid-template-columns:1fr 1fr;gap:40px;margin-top:60px}.consent-print-sheet .signature-line{border-top:1px solid #4A342A;padding-top:6px}}


#odontogram #teethGrid.teeth-grid .surface-piece.healthy{background:#7D5A44!important;color:#FFFFFF!important;display:grid!important;place-items:center!important;font-weight:900!important}
#odontogram #teethGrid.teeth-grid .surface-piece.healthy .surface-healthy-check{display:inline-flex!important;align-items:center!important;justify-content:center!important;width:100%!important;height:100%!important;color:#FFFFFF!important;font-size:11px!important;font-weight:900!important;line-height:1!important;text-shadow:0 1px 2px rgba(0,0,0,.16)!important;pointer-events:none!important}
#odontogram #teethGrid.teeth-grid .tooth.auto-healthy-record .auto-healthy-badge,#odontogram #teethGrid.teeth-grid .tooth .healthy-tooth-check{position:absolute!important;left:50%!important;top:50%!important;right:auto!important;bottom:auto!important;transform:translate(-50%,-50%)!important;width:26px!important;height:26px!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;border-radius:999px!important;background:#7D5A44!important;color:#FFFFFF!important;border:3px solid #FFFFFF!important;box-shadow:0 7px 18px rgba(125, 90, 68,.26)!important;font-size:18px!important;font-weight:900!important;line-height:1!important;z-index:14!important;pointer-events:none!important}
#odontogram[data-odontogram-mode="surfaces"] #teethGrid.teeth-grid .tooth.auto-healthy-record .auto-healthy-badge,#odontogram[data-odontogram-mode="surfaces"] #teethGrid.teeth-grid .tooth .healthy-tooth-check,#odontogram[data-odontogram-view="q1"] #teethGrid.teeth-grid .tooth.auto-healthy-record .auto-healthy-badge,#odontogram[data-odontogram-view="q2"] #teethGrid.teeth-grid .tooth.auto-healthy-record .auto-healthy-badge,#odontogram[data-odontogram-view="q3"] #teethGrid.teeth-grid .tooth.auto-healthy-record .auto-healthy-badge,#odontogram[data-odontogram-view="q4"] #teethGrid.teeth-grid .tooth.auto-healthy-record .auto-healthy-badge,#odontogram[data-odontogram-view="q1"] #teethGrid.teeth-grid .tooth .healthy-tooth-check,#odontogram[data-odontogram-view="q2"] #teethGrid.teeth-grid .tooth .healthy-tooth-check,#odontogram[data-odontogram-view="q3"] #teethGrid.teeth-grid .tooth .healthy-tooth-check,#odontogram[data-odontogram-view="q4"] #teethGrid.teeth-grid .tooth .healthy-tooth-check{width:30px!important;height:30px!important;font-size:20px!important}
#odontogram[data-odontogram-mode="surfaces"] #teethGrid.teeth-grid .surface-piece.healthy .surface-healthy-check{font-size:12px!important}
#odontogram .legend-btn[data-status="healthy"] .tool-code{display:inline-flex!important;align-items:center!important;justify-content:center!important;color:#FFFFFF!important;background:#7D5A44!important;border-radius:999px!important;width:24px!important;height:24px!important;font-size:15px!important;line-height:1!important}


/* ==========================================================
   Ajuste fino Sano: botón verde limpio y check sin círculo
   ========================================================== */
#odontogram #teethGrid.teeth-grid .surface-piece.healthy .surface-healthy-check{
  display:none!important;
}

#odontogram #teethGrid.teeth-grid .tooth.auto-healthy-record .auto-healthy-badge,
#odontogram #teethGrid.teeth-grid .tooth .healthy-tooth-check{
  width:auto!important;
  height:auto!important;
  min-width:0!important;
  min-height:0!important;
  padding:0!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  color:#7D5A44!important;
  font-size:30px!important;
  font-weight:950!important;
  line-height:1!important;
  text-shadow:0 2px 0 #FFFFFF, 2px 0 0 #FFFFFF, -2px 0 0 #FFFFFF, 0 -2px 0 #FFFFFF, 0 5px 12px rgba(125, 90, 68,.24)!important;
}

#odontogram[data-odontogram-mode="surfaces"] #teethGrid.teeth-grid .tooth.auto-healthy-record .auto-healthy-badge,
#odontogram[data-odontogram-mode="surfaces"] #teethGrid.teeth-grid .tooth .healthy-tooth-check,
#odontogram[data-odontogram-view="q1"] #teethGrid.teeth-grid .tooth.auto-healthy-record .auto-healthy-badge,
#odontogram[data-odontogram-view="q2"] #teethGrid.teeth-grid .tooth.auto-healthy-record .auto-healthy-badge,
#odontogram[data-odontogram-view="q3"] #teethGrid.teeth-grid .tooth.auto-healthy-record .auto-healthy-badge,
#odontogram[data-odontogram-view="q4"] #teethGrid.teeth-grid .tooth.auto-healthy-record .auto-healthy-badge,
#odontogram[data-odontogram-view="q1"] #teethGrid.teeth-grid .tooth .healthy-tooth-check,
#odontogram[data-odontogram-view="q2"] #teethGrid.teeth-grid .tooth .healthy-tooth-check,
#odontogram[data-odontogram-view="q3"] #teethGrid.teeth-grid .tooth .healthy-tooth-check,
#odontogram[data-odontogram-view="q4"] #teethGrid.teeth-grid .tooth .healthy-tooth-check{
  width:auto!important;
  height:auto!important;
  font-size:32px!important;
}

#odontogram .legend-btn.legend-healthy .tool-code,
#odontogram .legend-btn[data-status="healthy"] .tool-code,
#odontogram .selected-tool-chip .tool-code-check-healthy{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:24px!important;
  height:24px!important;
  border-radius:999px!important;
  background:#7D5A44!important;
  color:transparent!important;
  font-size:0!important;
  overflow:hidden!important;
  box-shadow:inset 0 1px 3px rgba(255,255,255,.55), 0 5px 12px rgba(125, 90, 68,.22)!important;
}

#odontogram .legend-btn[data-status="healthy"] .tool-code::before,
#odontogram .legend-btn.legend-healthy .tool-code::before{
  content:""!important;
}


/* ==========================================================
   AJUSTE FINAL SANO: un solo check en diente y botón limpio
   ========================================================== */
#odontogram #teethGrid.teeth-grid .surface-piece.healthy{
  background:transparent!important;
  box-shadow:none!important;
  color:transparent!important;
}

#odontogram #teethGrid.teeth-grid .surface-piece.healthy .surface-healthy-check{
  display:none!important;
}

#odontogram #teethGrid.teeth-grid .tooth.auto-healthy-record .auto-healthy-badge,
#odontogram #teethGrid.teeth-grid .tooth .healthy-tooth-check{
  position:absolute!important;
  left:50%!important;
  top:50%!important;
  right:auto!important;
  bottom:auto!important;
  transform:translate(-50%,-50%)!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:auto!important;
  height:auto!important;
  min-width:0!important;
  min-height:0!important;
  padding:0!important;
  margin:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  color:#7D5A44!important;
  font-size:34px!important;
  font-weight:950!important;
  line-height:1!important;
  text-shadow:0 2px 0 #FFFFFF, 2px 0 0 #FFFFFF, -2px 0 0 #FFFFFF, 0 -2px 0 #FFFFFF, 0 6px 14px rgba(125, 90, 68,.24)!important;
  z-index:25!important;
  pointer-events:none!important;
}

#odontogram #teethGrid.teeth-grid .tooth .healthy-tooth-check ~ .healthy-tooth-check,
#odontogram #teethGrid.teeth-grid .tooth .auto-healthy-badge ~ .healthy-tooth-check,
#odontogram #teethGrid.teeth-grid .tooth .healthy-tooth-check ~ .auto-healthy-badge{
  display:none!important;
}

#odontogram .legend-btn[data-status="healthy"] .tool-code,
#odontogram .legend-btn.legend-healthy .tool-code,
#odontogram .selected-tool-chip .tool-code-check-healthy{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:24px!important;
  height:24px!important;
  min-width:24px!important;
  border-radius:999px!important;
  background:#7D5A44!important;
  color:transparent!important;
  font-size:0!important;
  line-height:0!important;
  overflow:hidden!important;
  box-shadow:inset 0 1px 3px rgba(255,255,255,.55), 0 5px 12px rgba(125, 90, 68,.22)!important;
}

#odontogram .legend-btn[data-status="healthy"] .tool-code::before,
#odontogram .legend-btn[data-status="healthy"] .tool-code::after,
#odontogram .legend-btn.legend-healthy .tool-code::before,
#odontogram .legend-btn.legend-healthy .tool-code::after,
#odontogram .selected-tool-chip .tool-code-check-healthy::before,
#odontogram .selected-tool-chip .tool-code-check-healthy::after{
  content:""!important;
  display:none!important;
}


.clinical-pdf-document .pdf-odontogram-modern {
  margin-top: 14px;
  border: 1px solid #D7C9B8;
  border-radius: 18px;
  background: #FFFFFF;
  overflow: hidden;
  page-break-inside: avoid;
}

.clinical-pdf-document .pdf-odontogram-titlebar {
  height: 42px;
  display: grid;
  place-items: center;
  background: linear-gradient(90deg, #7D5A44, #7D5A44);
  color: #FFFFFF;
  font-size: 16px;
  font-weight: 1000;
  letter-spacing: .08em;
}

.clinical-pdf-document .pdf-arch-title {
  margin: 18px 0 12px;
  text-align: center;
  color: #4A342A;
  font-size: 14px;
  font-weight: 1000;
  letter-spacing: .02em;
}

.clinical-pdf-document .pdf-lower-title {
  margin: 12px 0 18px;
}

.clinical-pdf-document .pdf-dental-row {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 22px;
  padding: 8px 18px 18px;
}

.clinical-pdf-document .pdf-dental-group {
  display: flex;
  justify-content: center;
  gap: 9px;
}

.clinical-pdf-document .pdf-arch-divider {
  height: 1px;
  margin: 4px 18px 18px;
  background: #D7C9B8;
}

.clinical-pdf-document .pdf-tooth-new {
  width: 48px;
  min-width: 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  color: #4A342A;
  font-weight: 1000;
}

.clinical-pdf-document .pdf-lower-tooth {
  flex-direction: column-reverse;
}

.clinical-pdf-document .pdf-tooth-new-number {
  display: block;
  height: 16px;
  line-height: 16px;
  font-size: 12px;
  font-weight: 1000;
  color: #4A342A;
}

.clinical-pdf-document .pdf-reference-tooth {
  width: 42px;
  height: 56px;
  position: relative;
  display: block;
  border: 1.9px solid #4A342A;
  border-radius: 19px 19px 13px 13px;
  background: #FFFFFF;
  box-shadow: inset 0 -7px 12px rgba(178, 150, 125, .08);
  overflow: hidden;
}

.clinical-pdf-document .pdf-lower-tooth .pdf-reference-tooth {
  border-radius: 13px 13px 19px 19px;
}

.clinical-pdf-document .pdf-reference-tooth::before,
.clinical-pdf-document .pdf-reference-tooth::after {
  content: "";
  position: absolute;
  left: 8px;
  right: 8px;
  height: 11px;
  border-top: 1px solid #B2967D;
  border-radius: 50%;
  top: 10px;
  z-index: 1;
}

.clinical-pdf-document .pdf-reference-tooth::after {
  top: auto;
  bottom: 10px;
  border-top: 0;
  border-bottom: 1px solid #B2967D;
}

.clinical-pdf-document .pdf-tooth-new.has-change .pdf-reference-tooth,
.clinical-pdf-document .pdf-tooth-new.auto-healthy-record .pdf-reference-tooth {
  border-color: #7D5A44;
  box-shadow: 0 7px 16px rgba(125, 90, 68, .13), inset 0 -7px 12px rgba(178, 150, 125, .07);
}

.clinical-pdf-document .pdf-surface-layer {
  position: absolute;
  inset: 6px;
  pointer-events: none;
  z-index: 4;
}

.clinical-pdf-document .pdf-surface-piece {
  position: absolute;
  opacity: .95;
  background: transparent;
}

.clinical-pdf-document .pdf-surface-piece.vestibular {
  left: 10px;
  right: 10px;
  top: 2px;
  height: 9px;
  border-radius: 12px 12px 7px 7px;
}

.clinical-pdf-document .pdf-surface-piece.oclusal {
  left: 12px;
  right: 12px;
  top: 19px;
  height: 16px;
  border-radius: 999px;
}

.clinical-pdf-document .pdf-surface-piece.distal {
  left: 2px;
  top: 14px;
  bottom: 13px;
  width: 8px;
  border-radius: 10px 4px 4px 10px;
}

.clinical-pdf-document .pdf-surface-piece.mesial {
  right: 2px;
  top: 14px;
  bottom: 13px;
  width: 8px;
  border-radius: 4px 10px 10px 4px;
}

.clinical-pdf-document .pdf-surface-piece.lingual {
  left: 10px;
  right: 10px;
  bottom: 2px;
  height: 9px;
  border-radius: 7px 7px 12px 12px;
}

.clinical-pdf-document .pdf-surface-piece.caries-cavitada,
.clinical-pdf-document .pdf-surface-piece.resina-ionomero,
.clinical-pdf-document .pdf-surface-piece.proceso,
.clinical-pdf-document .pdf-surface-piece.corona,
.clinical-pdf-document .pdf-surface-piece.superficie-sellada,
.clinical-pdf-document .pdf-surface-piece.implante,
.clinical-pdf-document .pdf-surface-piece.ausente,
.clinical-pdf-document .pdf-surface-piece.extraccion {
  background: var(--surface-color);
}

.clinical-pdf-document .pdf-healthy-check {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 12;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: auto;
  background: transparent;
  border: 0;
  color: #7D5A44;
  font-size: 29px;
  font-weight: 1000;
  line-height: 1;
  text-shadow: 0 2px 4px rgba(255,255,255,.95), 0 5px 12px rgba(125, 90, 68,.24);
}

.clinical-pdf-document .pdf-whole-mark {
  position: absolute;
  inset: 5px;
  z-index: 11;
  display: grid;
  place-items: center;
  font-size: 31px;
  font-weight: 1000;
  line-height: 1;
}

.clinical-pdf-document .pdf-whole-mark.ausente {
  color: #4A342A;
}

.clinical-pdf-document .pdf-whole-mark.extraccion {
  color: #B42318;
}

.clinical-pdf-document .pdf-whole-mark.corona {
  border: 3px solid #7D5A44;
  border-radius: 16px 16px 10px 10px;
  inset: 8px;
}

.clinical-pdf-document .pdf-odontogram-records {
  margin-top: 16px;
  border: 1px solid #D7C9B8;
  border-radius: 16px;
  overflow: hidden;
  background: #FFFFFF;
}

.clinical-pdf-document .pdf-odontogram-records h4 {
  margin: 0;
  padding: 12px 14px;
  background: #F5F1EA;
  border-bottom: 1px solid #D7C9B8;
  color: #4A342A;
  font-size: 15px;
}

.clinical-pdf-document .pdf-odontogram-records table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.clinical-pdf-document .pdf-odontogram-records th,
.clinical-pdf-document .pdf-odontogram-records td {
  padding: 8px 10px;
  border-bottom: 1px solid #F5F1EA;
  text-align: left;
  vertical-align: top;
}

.clinical-pdf-document .pdf-odontogram-records th {
  color: #7D5A44;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .05em;
  background: #F5F1EA;
}

.clinical-pdf-document .pdf-odontogram-records tr:last-child td {
  border-bottom: 0;
}

.clinical-pdf-document .pdf-status-dot {
  width: 10px;
  height: 10px;
  display: inline-block;
  border-radius: 999px;
  margin-right: 7px;
  vertical-align: -1px;
  background: var(--status-color);
  box-shadow: 0 2px 6px rgba(74, 52, 42, .16);
}

.clinical-pdf-document .pdf-odontogram-empty {
  padding: 14px;
  color: #7D5A44;
}



#odontogram .surface-piece.superficie-sellada,
.clinical-pdf-document .pdf-surface-piece.superficie-sellada{
  background:#7D5A44!important;
}
#odontogram .surface-piece.implante,
.clinical-pdf-document .pdf-surface-piece.implante{
  background:#7D5A44!important;
}
#odontogram .odontogram-tool[data-status="superficie-sellada"]{
  --status-color:#7D5A44!important;
}
#odontogram .odontogram-tool[data-status="implante"]{
  --status-color:#7D5A44!important;
}

/* =========================================================
   PDF HISTORIA CLÍNICA V3 - DATOS COMPLETOS + REGISTRO ORDENADO
   ========================================================= */
.clinical-pdf-render-wrap {
  width: 1120px !important;
}

.clinical-pdf-document-v2 {
  width: 1120px;
  min-height: 0;
  padding: 0;
  background: #FFFFFF;
}

.clinical-pdf-document-v2 .pdf-page {
  width: 1120px;
  min-height: 1545px;
  padding: 34px;
  box-sizing: border-box;
  background: #FFFFFF;
  color: #4A342A;
  font-family: Arial, Helvetica, sans-serif;
  overflow: hidden;
}

.clinical-pdf-document-v2 .pdf-page + .pdf-page {
  margin-top: 28px;
}

.clinical-pdf-document-v2 .pdf-header {
  padding: 24px 26px;
  border-radius: 24px;
  box-shadow: 0 12px 26px rgba(74, 52, 42, .14);
}

.clinical-pdf-document-v2 .pdf-header h1 {
  font-size: 32px;
}

.clinical-pdf-document-v2 .pdf-patient-hero {
  align-items: stretch;
  padding: 20px;
  border-radius: 22px;
  background: linear-gradient(135deg, #F5F1EA, #FFFFFF);
  box-shadow: 0 10px 24px rgba(74, 52, 42, .05);
}

.clinical-pdf-document-v2 .pdf-patient-hero h2 {
  font-size: 30px;
  line-height: 1.12;
}

.clinical-pdf-document-v2 .pdf-patient-hero-stats {
  min-width: 430px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.clinical-pdf-document-v2 .pdf-patient-hero-stats div {
  padding: 14px 12px;
  border: 1px solid #D7C9B8;
  border-radius: 16px;
  background: #FFFFFF;
  text-align: center;
}

.clinical-pdf-document-v2 .pdf-patient-hero-stats strong {
  display: block;
  margin-top: 7px;
  color: #4A342A;
  font-size: 15px;
  line-height: 1.25;
}

.clinical-pdf-document-v2 .pdf-patient-complete-section {
  margin-top: 16px;
  padding: 18px;
  border-radius: 20px;
  background: #FFFFFF;
  box-shadow: 0 8px 18px rgba(74, 52, 42, .04);
}

.clinical-pdf-document-v2 .pdf-patient-data-grid {
  margin-top: 14px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.clinical-pdf-document-v2 .pdf-patient-field {
  min-height: 62px;
  padding: 12px 13px;
  border: 1px solid #D7C9B8;
  border-radius: 15px;
  background: #F5F1EA;
  box-sizing: border-box;
}

.clinical-pdf-document-v2 .pdf-patient-field span {
  display: block;
  color: #7D5A44;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.clinical-pdf-document-v2 .pdf-patient-field strong {
  display: block;
  margin-top: 7px;
  color: #4A342A;
  font-size: 13px;
  line-height: 1.35;
  word-break: break-word;
}

.clinical-pdf-document-v2 .pdf-guardian-section {
  background: #F5F1EA;
}

.clinical-pdf-document-v2 .pdf-clinical-grid-clean {
  margin-top: 16px;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.clinical-pdf-document-v2 .pdf-clinical-grid-clean .pdf-section {
  padding: 16px;
  border-radius: 18px;
  background: #FFFFFF;
}

.clinical-pdf-document-v2 .pdf-clinical-grid-clean .pdf-section h3 {
  font-size: 15px;
  padding-bottom: 7px;
  border-bottom: 1px solid #D7C9B8;
}

.clinical-pdf-document-v2 .pdf-clinical-grid-clean .pdf-section p {
  font-size: 13px;
  line-height: 1.45;
}

.clinical-pdf-document-v2 .pdf-page-odontogram .pdf-section {
  height: auto;
}

.clinical-pdf-document-v2 .pdf-odontogram-visual-section {
  padding: 18px;
  border-radius: 22px;
  box-shadow: 0 8px 20px rgba(74, 52, 42, .04);
}

.clinical-pdf-document-v2 .pdf-odontogram-modern {
  margin-top: 15px;
  border-radius: 20px;
  box-shadow: 0 10px 22px rgba(74, 52, 42, .05);
}

.clinical-pdf-document-v2 .pdf-dental-row {
  gap: 34px;
  padding-left: 24px;
  padding-right: 24px;
}

.clinical-pdf-document-v2 .pdf-dental-group {
  gap: 10px;
}

.clinical-pdf-document-v2 .pdf-tooth-new {
  width: 50px;
  min-width: 50px;
}

.clinical-pdf-document-v2 .pdf-reference-tooth {
  width: 42px;
  height: 56px;
}

.clinical-pdf-document-v2 .pdf-odontogram-records-modern {
  padding: 18px;
  border-radius: 22px;
  box-shadow: 0 8px 20px rgba(74, 52, 42, .04);
}

.clinical-pdf-document-v2 .pdf-section-intro {
  margin: 10px 0 14px;
  color: #7D5A44;
  font-size: 12px;
  line-height: 1.45;
}

.clinical-pdf-document-v2 .pdf-records-two-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  align-items: start;
}

.clinical-pdf-document-v2 .pdf-record-table-wrap {
  border: 1px solid #D7C9B8;
  border-radius: 16px;
  overflow: hidden;
  background: #FFFFFF;
}

.clinical-pdf-document-v2 .pdf-record-table-wrap h5 {
  margin: 0;
  padding: 10px 12px;
  color: #4A342A;
  font-size: 13px;
  background: #F5F1EA;
  border-bottom: 1px solid #D7C9B8;
}

.clinical-pdf-document-v2 .pdf-record-table-wrap table {
  width: 100%;
  border-collapse: collapse;
  font-size: 10.5px;
}

.clinical-pdf-document-v2 .pdf-record-table-wrap th,
.clinical-pdf-document-v2 .pdf-record-table-wrap td {
  padding: 7px 8px;
  border-bottom: 1px solid #F5F1EA;
  text-align: left;
  vertical-align: top;
}

.clinical-pdf-document-v2 .pdf-record-table-wrap th {
  color: #7D5A44;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: .05em;
  background: #F5F1EA;
}

.clinical-pdf-document-v2 .pdf-record-table-wrap tr:last-child td {
  border-bottom: 0;
}

.clinical-pdf-document-v2 .pdf-record-tooth {
  width: 72px;
}

.clinical-pdf-document-v2 .pdf-record-tooth strong {
  display: block;
  color: #4A342A;
  font-size: 13px;
  line-height: 1;
}

.clinical-pdf-document-v2 .pdf-record-badge {
  display: inline-block;
  margin-top: 5px;
  padding: 3px 7px;
  border-radius: 999px;
  font-size: 8.5px;
  font-weight: 900;
  line-height: 1;
}

.clinical-pdf-document-v2 .pdf-record-badge.healthy {
  background: #F5F1EA;
  color: #7D5A44;
}

.clinical-pdf-document-v2 .pdf-record-badge.attention {
  background: #F5F1EA;
  color: #7D5A44;
}

.clinical-pdf-document-v2 .pdf-record-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.clinical-pdf-document-v2 .pdf-record-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 7px;
  border: 1px solid #F5F1EA;
  border-radius: 999px;
  background: #FFFFFF;
  color: #4A342A;
  line-height: 1.15;
}

.clinical-pdf-document-v2 .pdf-record-pill i {
  width: 8px;
  height: 8px;
  min-width: 8px;
  border-radius: 999px;
  background: var(--status-color);
  box-shadow: 0 2px 5px rgba(74, 52, 42,.14);
}

.clinical-pdf-document-v2 .pdf-record-pill b {
  color: #4A342A;
}

.clinical-pdf-document-v2 .pdf-footer-page {
  margin-top: 24px;
  padding-top: 10px;
  border-top: 1px solid #F5F1EA;
}

.clinical-pdf-document-v2 .pdf-footer-page div span {
  margin-top: 42px;
}

/* Profesional asignado en registro de pacientes */
.patient-professional-section {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid #D7C9B8;
  border-radius: 18px;
  background: linear-gradient(180deg, #F5F1EA, #F5F1EA);
}

.patient-professional-section select {
  font-weight: 800;
}

/* Dentición en PDF de historia clínica */
.clinical-pdf-document-v2 .pdf-dentition-label {
  display: inline-block;
  margin: 10px auto 4px;
  padding: 6px 13px;
  border: 1px solid #D7C9B8;
  border-radius: 999px;
  background: #F5F1EA;
  color: #4A342A;
  font-size: 11px;
  font-weight: 800;
  text-align: center;
}
.clinical-pdf-document-v2 .pdf-odontogram-modern .pdf-dentition-label {
  display: block;
  width: max-content;
}
.clinical-pdf-document-v2 .pdf-dentition-subtitle {
  margin: 6px auto 2px;
  padding: 4px 11px;
  border-radius: 999px;
  background: #F5F1EA;
  color: #4A342A;
  font-size: 10px;
  font-weight: 800;
  text-align: center;
  width: max-content;
}
.clinical-pdf-document-v2 .pdf-child-row .pdf-tooth-new {
  width: 46px;
  min-width: 46px;
}

/* Agenda general: listado visible de pacientes con citas */
.appointment-agenda-intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 460px);
  gap: 18px;
  align-items: end;
}
.appointment-agenda-intro h3 {
  margin: 0 0 6px;
}
.appointment-agenda-intro p {
  margin: 0;
}
.appointment-agenda-actions input {
  width: 100%;
  min-height: 46px;
  border-radius: 14px;
  border: 1px solid #D7C9B8;
  padding: 0 14px;
  color: #4A342A;
  background: #FFFFFF;
}
.appointment-global-panel {
  overflow: hidden;
}
.appointment-global-list {
  display: grid;
  gap: 12px;
}
.appointment-global-card {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  border: 1px solid #D7C9B8;
  border-radius: 18px;
  background: linear-gradient(135deg, #FFFFFF, #F5F1EA);
  padding: 14px;
}
.appointment-global-date {
  min-height: 72px;
  border-radius: 16px;
  background: #F5F1EA;
  border: 1px solid #D7C9B8;
  color: #4A342A;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 3px;
  text-align: center;
  font-weight: 800;
}
.appointment-global-date span {
  color: #4A342A;
  font-size: 18px;
  font-weight: 900;
}
.appointment-global-main {
  min-width: 0;
}
.appointment-global-title-row {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.appointment-global-title-row h4 {
  margin: 0;
  color: #4A342A;
  font-size: 17px;
}
.appointment-global-meta {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}
.appointment-global-meta span {
  background: #F5F1EA;
  border: 1px solid #F5F1EA;
  border-radius: 12px;
  padding: 8px 10px;
  color: #7D5A44;
  font-size: 12px;
}
.appointment-global-meta strong {
  color: #4A342A;
}
.appointment-global-actions {
  display: flex;
  justify-content: flex-end;
}
.appointment-global-empty {
  margin: 0;
}
@media (max-width: 1100px) {
  .appointment-global-card {
    grid-template-columns: 110px minmax(0, 1fr);
  }
  .appointment-global-actions {
    grid-column: 1 / -1;
    justify-content: stretch;
  }
  .appointment-global-actions button {
    width: 100%;
  }
  .appointment-global-meta {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 760px) {
  .appointment-agenda-intro,
  .appointment-global-card {
    grid-template-columns: 1fr;
  }
  .appointment-global-date {
    min-height: 62px;
  }
  .appointment-global-title-row {
    align-items: flex-start;
    flex-direction: column;
  }
  .appointment-global-meta {
    grid-template-columns: 1fr;
  }
}

/* Agenda por fecha: módulo de consulta limpio */
.appointment-date-module {
  display: grid;
  gap: 18px;
  max-width: 980px;
}
.appointment-date-module-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
.appointment-date-module-head h3 {
  margin: 0 0 6px;
  color: #4A342A;
}
.appointment-date-module-head p {
  margin: 0;
}
.appointment-date-search-card {
  display: grid;
  grid-template-columns: minmax(190px, 240px) minmax(260px, 1fr) auto;
  gap: 14px;
  align-items: end;
  padding: 16px;
  border: 1px solid #D7C9B8;
  border-radius: 20px;
  background: linear-gradient(135deg, #FFFFFF, #F5F1EA);
}
.appointment-date-search-card label {
  display: grid;
  gap: 7px;
  margin: 0;
  color: #4A342A;
  font-size: 13px;
  font-weight: 800;
}
.appointment-date-search-card input {
  width: 100%;
  min-height: 48px;
  border-radius: 15px;
  border: 1px solid #D7C9B8;
  padding: 0 14px;
  color: #4A342A;
  background: #FFFFFF;
  font-weight: 700;
}
.appointment-date-actions {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: flex-end;
}
.appointment-date-actions button {
  min-height: 48px;
  white-space: nowrap;
}
.appointment-date-results {
  margin-top: 0;
}
.appointment-date-results-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 18px;
  border: 1px solid #D7C9B8;
  border-radius: 18px;
  background: #F5F1EA;
}
.appointment-date-results-head h3 {
  margin: 2px 0 0;
  color: #4A342A;
}
.appointment-date-results-head > span {
  padding: 8px 13px;
  border-radius: 999px;
  background: #F5F1EA;
  color: #4A342A;
  font-weight: 900;
  white-space: nowrap;
}
.appointment-date-card {
  grid-template-columns: 104px minmax(0, 1fr) auto;
}
.appointment-date-hour strong {
  color: #4A342A;
  font-size: 22px;
}
.appointment-date-hour span {
  color: #4A342A;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}
.appointment-date-empty {
  border: 1px dashed #D7C9B8;
  background: #F5F1EA;
}
@media (max-width: 1100px) {
  .appointment-date-module {
    max-width: none;
  }
  .appointment-date-search-card,
  .appointment-date-card {
    grid-template-columns: 1fr;
  }
  .appointment-date-actions,
  .appointment-global-actions {
    justify-content: stretch;
  }
  .appointment-date-actions button,
  .appointment-global-actions button {
    width: 100%;
  }
}
@media (max-width: 760px) {
  .appointment-date-module-head,
  .appointment-date-results-head,
  .appointment-date-actions {
    flex-direction: column;
    align-items: stretch;
  }
}

/* Agenda en un solo panel con selector de acción */
.appointment-main-panel {
  display: grid;
  gap: 20px;
  overflow: visible;
}
.appointment-main-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 6px;
}
.appointment-main-head h3 {
  margin: 0 0 6px;
  color: #4A342A;
  font-size: 22px;
}
.appointment-main-head p {
  margin: 0;
  color: #7D5A44;
}
.appointment-mode-selector {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding: 8px;
  border: 1px solid #D7C9B8;
  border-radius: 20px;
  background: linear-gradient(135deg, #F5F1EA, #F5F1EA);
}
.appointment-mode-btn {
  min-height: 54px;
  border: 1px solid #D7C9B8;
  border-radius: 15px;
  background: #FFFFFF;
  color: #4A342A;
  font-weight: 900;
  cursor: pointer;
  transition: .2s ease;
}
.appointment-mode-btn:hover {
  border-color: #7D5A44;
  background: #F5F1EA;
}
.appointment-mode-btn.active {
  color: #FFFFFF;
  border-color: #7D5A44;
  background: linear-gradient(135deg, #7D5A44, #4A342A);
  box-shadow: 0 12px 24px rgba(74, 52, 42, .18);
}
.appointment-mode-panel[hidden] {
  display: none !important;
}
.appointment-main-panel .appointment-date-module {
  max-width: none;
}
.appointment-schedule-panel {
  display: grid;
  gap: 16px;
}
.appointment-form-card {
  display: grid;
  gap: 16px;
  padding: 18px;
  border: 1px solid #D7C9B8;
  border-radius: 22px;
  background: linear-gradient(135deg, #FFFFFF, #F5F1EA);
}
.appointment-form-head h3 {
  margin: 0 0 6px;
  color: #4A342A;
}
.appointment-form-head p {
  margin: 0;
  color: #7D5A44;
}
.appointment-form-card label {
  display: grid;
  gap: 7px;
  margin: 0;
  color: #4A342A;
  font-size: 13px;
  font-weight: 800;
}
.appointment-form-card input,
.appointment-form-card select {
  width: 100%;
  min-height: 48px;
  border-radius: 15px;
  border: 1px solid #D7C9B8;
  padding: 0 14px;
  background: #FFFFFF;
  color: #4A342A;
  font-weight: 700;
}
.appointment-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.appointment-main-panel .appointment-patient-panel {
  border: 1px solid #D7C9B8;
  border-radius: 22px;
  padding: 18px;
  background: linear-gradient(135deg, #FFFFFF, #F5F1EA);
}
@media (max-width: 820px) {
  .appointment-mode-selector,
  .appointment-form-grid {
    grid-template-columns: 1fr;
  }
}

/* Ajuste agenda en un solo panel + botón WhatsApp */
.appointment-main-panel {
  max-width: 1180px;
  margin: 0 auto;
  padding: 24px;
  border-radius: 28px;
}
.appointment-main-head {
  justify-content: center;
  text-align: center;
  padding: 4px 10px 0;
}
.appointment-main-head > div {
  max-width: 760px;
  margin: 0 auto;
}
.appointment-main-head h3 {
  font-size: 24px;
  line-height: 1.15;
}
.appointment-mode-selector {
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
}
.appointment-mode-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.appointment-date-module-head {
  padding: 18px;
  border: 1px solid #D7C9B8;
  border-radius: 22px;
  background: linear-gradient(135deg, #FFFFFF, #F5F1EA);
}
.appointment-date-module-head > div {
  min-width: 0;
}
.appointment-date-search-card {
  grid-template-columns: minmax(180px, 220px) minmax(250px, 1fr) minmax(190px, auto);
  align-items: end;
}
.appointment-date-card {
  grid-template-columns: 94px minmax(0, 1fr) 150px;
  gap: 14px;
  padding: 14px;
}
.appointment-global-actions {
  display: grid;
  gap: 8px;
  justify-content: stretch;
  min-width: 140px;
}
.appointment-global-actions button,
.appointment-actions .appointment-whatsapp-btn {
  width: 100%;
}
.appointment-whatsapp-btn {
  min-height: 44px;
  border: 1px solid #7D5A44;
  border-radius: 14px;
  background: linear-gradient(135deg, #7D5A44, #4A342A);
  color: #FFFFFF;
  font-weight: 900;
  padding: 0 14px;
  cursor: pointer;
  box-shadow: 0 10px 20px rgba(74, 52, 42, .18);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.appointment-whatsapp-btn:hover {
  transform: translateY(-1px);
  filter: brightness(1.02);
  box-shadow: 0 14px 24px rgba(74, 52, 42, .24);
}
.appointment-actions {
  flex-wrap: wrap;
}
.appointment-actions .appointment-whatsapp-btn {
  flex: 1 1 150px;
}
@media (max-width: 1100px) {
  .appointment-date-card {
    grid-template-columns: 104px minmax(0, 1fr);
  }
  .appointment-global-actions {
    grid-column: 1 / -1;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    min-width: 0;
  }
}
@media (max-width: 760px) {
  .appointment-main-panel {
    padding: 18px;
    border-radius: 24px;
  }
  .appointment-main-head,
  .appointment-date-module-head {
    text-align: center;
  }
  .appointment-mode-selector,
  .appointment-date-search-card,
  .appointment-global-actions {
    grid-template-columns: 1fr;
  }
}

/* Firma virtual en consentimientos */
.consent-signature-panel{
  border:1px solid var(--line);
  border-radius:16px;
  padding:16px;
  margin:6px 0 16px;
  background:linear-gradient(135deg,#FFFFFF,#F5F1EA);
}
.consent-signature-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  margin-bottom:14px;
}
.consent-signature-head h4{
  margin:3px 0 4px;
  color:var(--ink);
}
.consent-signature-head p{
  margin:0;
  color:var(--muted);
  font-size:13px;
  line-height:1.45;
}
.consent-signature-box{
  border:1px dashed #B2967D;
  border-radius:16px;
  padding:12px;
  background:#FFFFFF;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.85);
}
.consent-signature-box canvas{
  display:block;
  width:100%;
  height:180px;
  border:1px solid #D7C9B8;
  border-radius:14px;
  background:#FFFFFF;
  touch-action:none;
  cursor:crosshair;
}
.consent-signature-box small{
  display:block;
  margin-top:8px;
  text-align:center;
  color:var(--muted);
  font-size:12px;
}
.virtual-signature-img{
  display:block;
  max-width:260px;
  max-height:90px;
  object-fit:contain;
  margin:0 auto 10px;
}
@media(max-width:700px){
  .consent-signature-head{flex-direction:column;}
  .consent-signature-head .secondary-btn{width:100%;}
  .consent-signature-box canvas{height:150px;}
}
@media print{
  .consent-print-sheet .virtual-signature-img{max-width:240px;max-height:80px;margin-bottom:8px;}
}

/* =========================================================
   RESPONSIVE GLOBAL FINAL · YacoSpa
   Ajuste transversal para escritorio, portátil, tablet y móvil.
   Evita elementos estrechos, montados y desbordes horizontales.
   ========================================================= */
:root{
  --safe-page-max: 1440px;
}

html,
body{
  width:100%;
  max-width:100%;
  overflow-x:hidden!important;
}

body{
  min-width:320px;
}

*,
*::before,
*::after{
  box-sizing:border-box;
}

img,
svg,
video,
canvas,
iframe{
  max-width:100%;
}

input,
select,
textarea,
button{
  max-width:100%;
}

button,
.primary-btn,
.secondary-btn,
.danger-btn,
.logout-btn{
  touch-action:manipulation;
}

.main,
.section,
.section.active,
.panel,
.stat-card,
.item,
.list,
.form-panel,
.form-grid,
.split,
.profile-grid,
.patient-card-v2,
.specialist-card-clean,
.consent-layout,
.appointment-main-panel,
.saas-grid,
.payment-grid{
  min-width:0!important;
}

.panel,
.stat-card,
.item,
.patient-card-v2,
.specialist-card-clean,
.consent-card,
.appointment-date-card,
.appointment-patient-panel,
.appointment-form-card{
  overflow-wrap:anywhere;
}

.topbar,
.section.active{
  width:100%;
  max-width:var(--safe-page-max);
  margin-left:auto!important;
  margin-right:auto!important;
}

.section.active{
  gap:clamp(14px,2vw,24px)!important;
}

.panel{
  max-width:100%;
  padding:clamp(16px,2.1vw,26px)!important;
}

.panel-head,
.item-head,
.saas-header,
.saas-card-head,
.audit-row,
.form-title-row,
.patient-card-header-v2,
.consent-form-head,
.consent-list-head,
.appointment-main-head,
.appointment-date-module-head,
.appointment-patient-panel-head{
  min-width:0;
}

.panel-head > *,
.item-head > *,
.saas-header > *,
.saas-card-head > *,
.audit-row > *,
.form-title-row > *,
.patient-card-header-v2 > *,
.consent-form-head > *,
.consent-list-head > *,
.appointment-main-head > *,
.appointment-date-module-head > *,
.appointment-patient-panel-head > *{
  min-width:0;
}

/* Formularios fluidos */
.form-grid,
.form-grid-2,
.install-clean-grid,
.guardian-fields,
.appointment-form-grid,
.consent-form-row,
.patient-info-grid-v2,
.profile-grid,
.pdf-grid,
.pdf-clinical-grid{
  grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr))!important;
}

label,
input,
select,
textarea{
  min-width:0!important;
}

textarea{
  resize:vertical;
}

/* Botones y acciones: nunca se montan */
.item-actions,
.patient-actions-v2,
.specialist-actions-clean,
.appointment-actions,
.consent-actions-row,
.password-generator-row,
.session-actions,
.mini-actions,
.appointment-date-actions,
.appointment-global-actions{
  display:flex!important;
  flex-wrap:wrap!important;
  gap:10px!important;
  min-width:0!important;
}

.item-actions > *,
.patient-actions-v2 > *,
.specialist-actions-clean > *,
.appointment-actions > *,
.consent-actions-row > *,
.password-generator-row > *,
.session-actions > *,
.mini-actions > *,
.appointment-date-actions > *,
.appointment-global-actions > *{
  min-width:min(170px,100%);
}

/* Tablas con desplazamiento interno, no de toda la página */
.table-responsive,
.permissions-matrix,
.odontogram-history-table-wrap,
.clinical-table-wrap,
.report-table-wrap{
  width:100%;
  max-width:100%;
  overflow-x:auto!important;
  -webkit-overflow-scrolling:touch;
}

table{
  width:100%;
  min-width:680px;
}

/* Panel lateral / navegación */
.sidebar{
  max-width:calc(100vw - 24px);
}

@media (min-width:981px){
  .mobile-header{display:none!important;}
  .main{
    margin-left:326px!important;
    width:calc(100% - 326px)!important;
    padding:clamp(24px,2.4vw,36px) clamp(22px,2.4vw,34px)!important;
  }
}

/* Tablet y pantallas medianas: menú lateral como drawer para que no tape contenido */
@media (max-width:980px){
  body{
    display:block!important;
  }
  .mobile-header{
    display:flex!important;
    position:sticky!important;
    top:0!important;
    z-index:30!important;
    align-items:center!important;
    gap:12px!important;
    margin:0 0 16px!important;
    padding:12px 14px!important;
    border-radius:0 0 18px 18px!important;
    background:linear-gradient(135deg,#4A342A,#7D5A44)!important;
    color:#FFFFFF!important;
    box-shadow:0 12px 30px rgba(74, 52, 42,.16)!important;
  }
  .mobile-header strong{
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  .menu-btn{
    flex:0 0 42px;
    width:42px!important;
    height:42px!important;
    min-width:42px!important;
    border:0!important;
    border-radius:12px!important;
    background:rgba(255,255,255,.16)!important;
    color:#FFFFFF!important;
  }
  .sidebar{
    position:fixed!important;
    inset:0 auto 0 0!important;
    width:min(330px,86vw)!important;
    height:100vh!important;
    border-radius:0 28px 28px 0!important;
    transform:translateX(-106%)!important;
    transition:transform .24s ease!important;
    overflow-y:auto!important;
    z-index:40!important;
  }
  .sidebar.open{
    transform:translateX(0)!important;
  }
  .overlay.show{
    display:block!important;
    position:fixed!important;
    inset:0!important;
    background:rgba(74, 52, 42,.48)!important;
    z-index:35!important;
  }
  .main{
    margin-left:0!important;
    width:100%!important;
    padding:14px!important;
  }
  .topbar{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:14px!important;
    align-items:stretch!important;
  }
  .topbar h2{
    font-size:clamp(26px,7vw,36px)!important;
  }
  .session-actions{
    width:100%;
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
  .session-actions > *{
    width:100%!important;
    min-width:0!important;
    text-align:center;
  }
  .stats-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
  .split,
  #saas .saas-grid.split,
  .consent-layout,
  .install-shell{
    grid-template-columns:1fr!important;
  }
}

/* Agenda responsive */
.appointment-main-panel{
  width:100%;
  max-width:1180px!important;
  margin-inline:auto!important;
}

.appointment-mode-selector,
.appointment-date-search-card,
.appointment-date-card,
.appointment-patient-summary,
.appointment-account-grid,
.appointment-detail-grid{
  min-width:0!important;
}

.appointment-date-search-card{
  display:grid!important;
  grid-template-columns:minmax(180px,230px) minmax(220px,1fr) minmax(170px,auto)!important;
  gap:12px!important;
}

.appointment-date-card{
  display:grid!important;
  grid-template-columns:104px minmax(0,1fr) minmax(140px,auto)!important;
  align-items:center!important;
}

.appointment-account-grid{
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr))!important;
}

/* Consentimientos responsive */
.consent-page,
.consent-layout,
.consent-form,
.consent-list-panel,
.consent-signature-panel,
.consent-signature-box{
  min-width:0!important;
  max-width:100%!important;
}

.consent-summary-grid{
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr))!important;
}

.consent-layout{
  grid-template-columns:minmax(0,1.15fr) minmax(320px,.85fr)!important;
}

.consent-form-row{
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
}

.consent-signature-box canvas{
  width:100%!important;
  max-width:100%!important;
  height:clamp(150px,22vw,220px)!important;
}

/* Tarjetas y listados */
.patient-search-bar-main{
  grid-template-columns:minmax(0,1fr) auto auto!important;
}

.patient-info-grid-v2,
.specialist-grid-clean,
.saas-card-grid{
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr))!important;
}

.patient-stats-v2{
  display:flex!important;
  flex-wrap:wrap!important;
}

.patient-stats-v2 span{
  min-width:0;
  white-space:normal!important;
}

/* Móvil general */
@media (max-width:760px){
  .main{
    padding:12px!important;
  }
  .panel,
  .stat-card,
  .patient-card-v2,
  .specialist-card-clean,
  .appointment-main-panel,
  .appointment-form-card,
  .appointment-patient-panel,
  .consent-form,
  .consent-list-panel{
    border-radius:20px!important;
    padding:16px!important;
  }
  .stats-grid,
  .form-grid,
  .form-grid-2,
  .profile-grid,
  .patient-info-grid-v2,
  .specialist-grid-clean,
  .saas-card-grid,
  .install-clean-grid,
  .guardian-fields,
  .appointment-form-grid,
  .appointment-account-grid,
  .appointment-detail-grid,
  .consent-summary-grid,
  .consent-layout,
  .consent-form-row{
    grid-template-columns:1fr!important;
  }
  .panel-head,
  .item-head,
  .patient-card-header-v2,
  .saas-header,
  .saas-card-head,
  .audit-row,
  .form-title-row,
  .clinical-history-panel-head,
  .clinical-selected-patient,
  .consent-form-head,
  .consent-list-head,
  .consent-signature-head,
  .appointment-main-head,
  .appointment-date-module-head,
  .appointment-patient-panel-head{
    display:grid!important;
    grid-template-columns:1fr!important;
    text-align:left!important;
  }
  .appointment-main-head,
  .appointment-date-module-head{
    text-align:center!important;
  }
  .session-actions,
  .item-actions,
  .patient-actions-v2,
  .specialist-actions-clean,
  .appointment-actions,
  .consent-actions-row,
  .appointment-date-actions,
  .appointment-global-actions,
  .password-generator-row{
    display:grid!important;
    grid-template-columns:1fr!important;
  }
  .session-actions > *,
  .item-actions > *,
  .patient-actions-v2 > *,
  .specialist-actions-clean > *,
  .appointment-actions > *,
  .consent-actions-row > *,
  .appointment-date-actions > *,
  .appointment-global-actions > *,
  .password-generator-row > *{
    width:100%!important;
    min-width:0!important;
  }
  .patient-search-hero,
  .patient-search-bar-main,
  .appointment-mode-selector,
  .appointment-date-search-card,
  .appointment-date-card{
    display:grid!important;
    grid-template-columns:1fr!important;
  }
  .appointment-date-card{
    text-align:left!important;
  }
  .appointment-date-card > *{
    min-width:0!important;
  }
  .appointment-count{
    width:fit-content;
    max-width:100%;
  }
  .consent-search{
    max-width:none!important;
    width:100%!important;
  }
  table{
    min-width:620px;
  }
}

/* Celular pequeño */
@media (max-width:520px){
  body{
    font-size:14px;
  }
  .main{
    padding:10px!important;
  }
  .mobile-header{
    margin-bottom:12px!important;
  }
  .panel,
  .stat-card,
  .patient-card-v2,
  .specialist-card-clean,
  .appointment-main-panel,
  .appointment-form-card,
  .appointment-patient-panel,
  .consent-form,
  .consent-list-panel{
    padding:14px!important;
    border-radius:18px!important;
  }
  .topbar h2{
    font-size:24px!important;
  }
  .topbar p,
  .panel p,
  .patient-search-note,
  .field-help{
    font-size:13px!important;
    line-height:1.45!important;
  }
  input,
  select,
  textarea,
  .primary-btn,
  .secondary-btn,
  .danger-btn{
    min-height:44px!important;
    font-size:14px!important;
  }
  .stat-card strong{
    font-size:clamp(26px,10vw,34px)!important;
  }
  .patient-empty-search{
    min-height:180px!important;
    padding:22px!important;
  }
  .consent-signature-box{
    padding:8px!important;
  }
  .consent-signature-box canvas{
    height:150px!important;
  }
}

@media (max-width:380px){
  .main{
    padding:8px!important;
  }
  .panel,
  .stat-card,
  .patient-card-v2,
  .specialist-card-clean,
  .appointment-main-panel,
  .appointment-form-card,
  .appointment-patient-panel,
  .consent-form,
  .consent-list-panel{
    padding:12px!important;
    border-radius:16px!important;
  }
  .brand h1{
    font-size:15px!important;
  }
  .nav-btn{
    padding:11px 12px!important;
  }
}

/* =========================================================
   Navegación responsive tipo hamburguesa para tablet/celular
   ========================================================= */
.overlay{
  display:none;
}
.sidebar-close-btn{
  display:none;
}

@media (min-width:1181px){
  body{
    display:flex!important;
    overflow-x:hidden;
  }
  .mobile-header{
    display:none!important;
  }
  .sidebar{
    position:fixed!important;
    inset:0 auto 0 0!important;
    width:290px!important;
    max-width:290px!important;
    height:100vh!important;
    transform:none!important;
    border-radius:0!important;
    z-index:20!important;
    overflow-y:auto!important;
  }
  .main{
    margin-left:290px!important;
    width:calc(100% - 290px)!important;
  }
}

@media (max-width:1180px){
  html, body{
    max-width:100%;
    overflow-x:hidden!important;
  }
  body{
    display:block!important;
  }
  body.mobile-menu-open{
    overflow:hidden!important;
    touch-action:none;
  }
  .main{
    width:100%!important;
    max-width:100%!important;
    margin-left:0!important;
    padding:clamp(12px,2.2vw,20px)!important;
  }
  .mobile-header{
    display:flex!important;
    position:sticky!important;
    top:0!important;
    z-index:32!important;
    width:100%!important;
    align-items:center!important;
    justify-content:space-between!important;
    gap:12px!important;
    margin:calc(-1 * clamp(12px,2.2vw,20px)) calc(-1 * clamp(12px,2.2vw,20px)) 16px!important;
    padding:12px clamp(14px,3vw,22px)!important;
    border-radius:0 0 20px 20px!important;
    background:linear-gradient(135deg,#4A342A,#7D5A44)!important;
    color:#FFFFFF!important;
    box-shadow:0 12px 32px rgba(74, 52, 42,.18)!important;
  }
  .mobile-header strong{
    flex:1 1 auto;
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-weight:900;
    letter-spacing:.3px;
  }
  .menu-btn{
    flex:0 0 46px!important;
    width:46px!important;
    height:46px!important;
    min-width:46px!important;
    border:1px solid rgba(255,255,255,.24)!important;
    border-radius:14px!important;
    display:grid!important;
    place-items:center!important;
    background:rgba(255,255,255,.15)!important;
    color:#FFFFFF!important;
    font-size:24px!important;
    line-height:1!important;
    box-shadow:0 8px 20px rgba(0,0,0,.08)!important;
  }
  .sidebar{
    position:fixed!important;
    inset:0 auto 0 0!important;
    width:min(340px,88vw)!important;
    max-width:min(340px,88vw)!important;
    height:100dvh!important;
    padding:22px 18px!important;
    border-radius:0 28px 28px 0!important;
    transform:translateX(-110%)!important;
    transition:transform .26s ease, box-shadow .26s ease!important;
    z-index:45!important;
    overflow-y:auto!important;
    overscroll-behavior:contain;
    box-shadow:none!important;
  }
  .sidebar.open{
    transform:translateX(0)!important;
    box-shadow:28px 0 70px rgba(74, 52, 42,.30)!important;
  }
  .sidebar .brand{
    position:relative;
    padding-right:48px;
    margin-bottom:22px!important;
  }
  .sidebar-close-btn{
    display:grid!important;
    place-items:center!important;
    position:absolute;
    right:0;
    top:3px;
    width:40px;
    height:40px;
    border:1px solid rgba(255,255,255,.16);
    border-radius:13px;
    background:rgba(255,255,255,.10);
    color:#FFFFFF;
    font-size:26px;
    line-height:1;
    cursor:pointer;
  }
  .sidebar nav{
    display:grid!important;
    gap:9px!important;
  }
  .nav-btn{
    min-height:46px!important;
    display:flex!important;
    align-items:center!important;
    width:100%!important;
    padding:12px 14px!important;
    border-radius:14px!important;
    white-space:normal!important;
  }
  .sidebar-footer{
    margin-top:22px!important;
  }
  .overlay.show{
    display:block!important;
    position:fixed!important;
    inset:0!important;
    z-index:40!important;
    background:rgba(74, 52, 42,.52)!important;
    backdrop-filter:blur(2px);
  }
  .topbar{
    width:100%!important;
    max-width:100%!important;
  }
}

@media (max-width:560px){
  .sidebar{
    width:min(318px,90vw)!important;
    max-width:min(318px,90vw)!important;
    border-radius:0 22px 22px 0!important;
  }
  .mobile-header{
    border-radius:0 0 16px 16px!important;
  }
  .menu-btn{
    flex-basis:44px!important;
    width:44px!important;
    height:44px!important;
    min-width:44px!important;
  }
}


#odontogram.section.active{
  width:100%!important;
  max-width:none!important;
  margin-left:0!important;
  margin-right:0!important;
}
@media (max-width:1180px){
  .main:has(#odontogram.section.active){
    padding-left:clamp(10px,2vw,18px)!important;
    padding-right:clamp(10px,2vw,18px)!important;
  }
}

/* =========================================================
   RESPONSIVE GLOBAL MULTIDISPOSITIVO · YacoSpa
   Escritorio, portátil, tablets y celulares sin remontes.
   ========================================================= */
html,
body{
  width:100%;
  max-width:100%;
  overflow-x:hidden!important;
}

body,
.main,
.section,
.section.active,
.panel,
.stat-card,
.split,
.panel-head,
.item,
.item-head,
.list,
.form-panel,
.appointment-main-panel,
.appointment-form-card,
.appointment-patient-panel,
.consent-form,
.consent-list-panel,
.inventory-layout,
.reports-layout,
.patient-card-v2,
.specialist-card-clean{
  min-width:0!important;
  max-width:100%!important;
}

.main{
  overflow-x:clip!important;
}

img,
svg,
canvas,
video,
iframe{
  max-width:100%!important;
}

input,
select,
textarea,
button{
  max-width:100%!important;
}

.stats-grid{
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr))!important;
}

.split{
  grid-template-columns:minmax(320px,390px) minmax(0,1fr)!important;
}

.panel-head,
.topbar,
.item-head,
.appointment-main-head,
.appointment-date-module-head,
.consent-form-head,
.consent-list-head,
.inventory-list-head{
  flex-wrap:wrap!important;
}

.session-actions,
.item-actions,
.appointment-date-actions,
.appointment-global-actions,
.consent-actions-row,
.patient-actions-v2,
.specialist-actions-clean{
  flex-wrap:wrap!important;
}

.table-responsive,
.permissions-matrix,
.clinical-table-wrap,
.report-table-wrap,
.odontogram-history-table-wrap{
  max-width:100%!important;
  overflow-x:auto!important;
  -webkit-overflow-scrolling:touch!important;
}

@media (min-width:1501px){
  .main{
    padding:clamp(24px,2.2vw,36px)!important;
  }
}

@media (min-width:1181px) and (max-width:1500px){
  .main{
    margin-left:290px!important;
    width:calc(100% - 290px)!important;
    padding:clamp(16px,1.7vw,26px)!important;
  }

  .topbar{
    align-items:flex-start!important;
  }

  .split{
    grid-template-columns:1fr!important;
  }

  .panel-head input,
  .panel-head select{
    max-width:min(360px,100%)!important;
  }
}

@media (max-width:1180px){
  .main{
    width:100%!important;
    max-width:100%!important;
    margin-left:0!important;
    padding:clamp(10px,2vw,18px)!important;
  }

  .section.active{
    width:100%!important;
    max-width:100%!important;
  }

  .topbar{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:12px!important;
    align-items:start!important;
  }

  .session-actions{
    width:100%!important;
  }

  .split,
  .consent-layout,
  .inventory-layout,
  .reports-layout{
    grid-template-columns:1fr!important;
  }
}

@media (max-width:760px){
  .main{
    padding:10px!important;
  }

  .topbar h2{
    font-size:clamp(23px,7vw,30px)!important;
  }

  .stats-grid{
    grid-template-columns:1fr!important;
  }

  .panel,
  .stat-card{
    padding:14px!important;
    border-radius:18px!important;
  }

  .panel-head,
  .item-head,
  .appointment-main-head,
  .appointment-date-module-head,
  .consent-form-head,
  .consent-list-head,
  .inventory-list-head{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:10px!important;
  }

  .session-actions > *,
  .item-actions > *,
  .appointment-date-actions > *,
  .appointment-global-actions > *,
  .consent-actions-row > *,
  .patient-actions-v2 > *,
  .specialist-actions-clean > *{
    width:100%!important;
  }

  table{
    min-width:620px!important;
  }
}

@media (max-width:380px){
  .main{
    padding:8px!important;
  }

  .panel,
  .stat-card{
    padding:12px!important;
    border-radius:16px!important;
  }
}

/* =========================================================
   Consentimientos en un solo panel · más espacio para firma
   ========================================================= */
.consent-page-single-panel{
  width:100%!important;
  max-width:var(--safe-page-max,1440px)!important;
  margin-inline:auto!important;
  display:grid!important;
  gap:16px!important;
}

.consent-main-panel{
  width:100%!important;
  max-width:100%!important;
  display:grid!important;
  gap:18px!important;
  align-items:start!important;
  overflow:hidden!important;
}

.consent-main-head{
  display:flex!important;
  justify-content:space-between!important;
  align-items:flex-start!important;
  gap:14px!important;
  min-width:0!important;
}

.consent-main-head h3{
  margin:3px 0 5px!important;
  color:var(--ink)!important;
}

.consent-main-head p{
  margin:0!important;
  color:var(--muted)!important;
  line-height:1.45!important;
}

.consent-summary-grid-inside{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:12px!important;
}

.consent-summary-grid-inside .consent-summary-card{
  border:1px solid var(--line)!important;
  border-radius:18px!important;
  padding:16px!important;
  background:linear-gradient(135deg,#FFFFFF,#F5F1EA)!important;
  box-shadow:0 12px 28px rgba(74, 52, 42,.06)!important;
  min-width:0!important;
}

.consent-mode-selector{
  width:100%!important;
  max-width:760px!important;
  margin:0 auto!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
}

.consent-mode-panel{
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
}

.consent-form-module,
.consent-consult-panel{
  padding:0!important;
  margin:0!important;
  border:0!important;
  box-shadow:none!important;
  background:transparent!important;
  display:grid!important;
  gap:16px!important;
  min-width:0!important;
}

.consent-form-module label{
  margin-bottom:0!important;
}

.consent-form-section,
.consent-signature-panel,
.consent-consult-panel{
  border:1px solid var(--line)!important;
  border-radius:20px!important;
  padding:clamp(16px,2vw,24px)!important;
  background:#FFFFFF!important;
  box-shadow:0 12px 30px rgba(74, 52, 42,.06)!important;
  min-width:0!important;
}

.consent-form-section .form-section-title,
.consent-signature-panel .form-section-title{
  margin-bottom:14px!important;
}

.consent-form-row{
  gap:14px!important;
}

.consent-document-section textarea#consentBody{
  min-height:clamp(230px,30vh,380px)!important;
}

.consent-signature-panel{
  margin:0!important;
  background:linear-gradient(135deg,#FFFFFF,#F5F1EA)!important;
}

.consent-signature-head{
  align-items:center!important;
  gap:18px!important;
  margin-bottom:16px!important;
}

.consent-signature-head h4{
  font-size:clamp(18px,2vw,22px)!important;
}

.consent-signer-row{
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  margin-bottom:14px!important;
}

.consent-signature-box-large{
  padding:14px!important;
  border-radius:20px!important;
  background:#FFFFFF!important;
}

.consent-signature-box-large canvas{
  height:clamp(240px,30vw,360px)!important;
  border-radius:18px!important;
  border:2px dashed #B2967D!important;
}

.consent-actions-row-sticky{
  justify-content:flex-end!important;
  padding-top:4px!important;
}

.consent-consult-panel .consent-list-head{
  margin-bottom:16px!important;
}

.consent-consult-panel .consent-list-head p{
  margin:0!important;
  color:var(--muted)!important;
  font-size:13px!important;
}

.consent-list-grid{
  display:grid!important;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr))!important;
  gap:12px!important;
  max-height:none!important;
  overflow:visible!important;
  padding-right:0!important;
}

.consent-list-grid .consent-card{
  height:100%!important;
  display:grid!important;
  gap:8px!important;
  align-content:start!important;
}

@media (max-width:1180px){
  .consent-summary-grid-inside{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
  .consent-signer-row{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
}

@media (max-width:760px){
  .consent-main-panel{
    border-radius:20px!important;
    padding:16px!important;
  }
  .consent-main-head,
  .consent-signature-head,
  .consent-list-head,
  .consent-form-head{
    display:grid!important;
    grid-template-columns:1fr!important;
    text-align:left!important;
  }
  .consent-mode-selector,
  .consent-summary-grid-inside,
  .consent-form-row,
  .consent-signer-row{
    grid-template-columns:1fr!important;
  }
  .consent-form-section,
  .consent-signature-panel,
  .consent-consult-panel{
    padding:14px!important;
    border-radius:18px!important;
  }
  .consent-signature-head .secondary-btn,
  .consent-actions-row-sticky > *{
    width:100%!important;
  }
  .consent-signature-box-large canvas{
    height:260px!important;
  }
  .consent-list-grid{
    grid-template-columns:1fr!important;
  }
}

@media (max-width:430px){
  .consent-main-panel{
    padding:12px!important;
  }
  .consent-form-section,
  .consent-signature-panel,
  .consent-consult-panel{
    padding:12px!important;
  }
  .consent-signature-box-large{
    padding:8px!important;
  }
  .consent-signature-box-large canvas{
    height:230px!important;
  }
}

/* Consentimientos: campo de vigencia eliminado y fecha de emisión a ancho completo */
.consent-form-row.consent-form-row-single{
  grid-template-columns:1fr!important;
}


/* =========================================================
   Acciones superiores visibles solo en el módulo Panel
   ========================================================= */
.topbar .session-actions {
  display: none !important;
}

body.dashboard-section-active .topbar .session-actions {
  display: flex !important;
}

@media (max-width: 760px) {
  body.dashboard-section-active .topbar .session-actions {
    display: grid !important;
    grid-template-columns: 1fr;
    gap: 10px;
  }
}

/* =========================================================
   Ajuste final: acciones del panel en línea + responsive tablet
   ========================================================= */
body.dashboard-section-active .topbar{
  align-items:flex-start!important;
}

body.dashboard-section-active .topbar .session-actions{
  display:flex!important;
  flex-direction:row!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:12px!important;
  flex-wrap:wrap!important;
  width:auto!important;
  max-width:100%!important;
}

body.dashboard-section-active .topbar .session-actions > *,
body.dashboard-section-active .topbar .session-actions .user-pill,
body.dashboard-section-active .topbar .session-actions .primary-btn,
body.dashboard-section-active .topbar .session-actions .logout-btn{
  width:auto!important;
  min-width:0!important;
  max-width:100%!important;
  flex:0 0 auto!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  white-space:nowrap!important;
  line-height:1.2!important;
}

body.dashboard-section-active .topbar .session-actions .user-pill{
  min-height:44px!important;
  padding:11px 16px!important;
  border-radius:999px!important;
}

body.dashboard-section-active .topbar .session-actions .primary-btn,
body.dashboard-section-active .topbar .session-actions .logout-btn{
  min-height:46px!important;
  padding:12px 22px!important;
  border-radius:14px!important;
}

@media (max-width:760px){
  body.dashboard-section-active .topbar .session-actions{
    display:grid!important;
    grid-template-columns:1fr!important;
    width:100%!important;
    gap:10px!important;
  }
  body.dashboard-section-active .topbar .session-actions > *,
  body.dashboard-section-active .topbar .session-actions .user-pill,
  body.dashboard-section-active .topbar .session-actions .primary-btn,
  body.dashboard-section-active .topbar .session-actions .logout-btn{
    width:100%!important;
    white-space:normal!important;
  }
}

@media (min-width:761px) and (max-width:1180px){
  body.dashboard-section-active .topbar{
    display:flex!important;
    flex-wrap:wrap!important;
    justify-content:space-between!important;
    gap:14px!important;
  }
  body.dashboard-section-active .topbar .session-actions{
    margin-left:auto!important;
  }
}

/* Consentimientos: fecha de emisión compacta, no estirada */
.consent-form-row.consent-form-row-single{
  display:grid!important;
  grid-template-columns:minmax(220px,340px)!important;
  justify-content:start!important;
  align-items:start!important;
}

.consent-form-row.consent-form-row-single label,
.consent-form-row.consent-form-row-single input{
  width:100%!important;
  max-width:340px!important;
}

@media (max-width:760px){
  .consent-form-row.consent-form-row-single{
    grid-template-columns:1fr!important;
  }
  .consent-form-row.consent-form-row-single label,
  .consent-form-row.consent-form-row-single input{
    max-width:100%!important;
  }
}

/* Responsive profundo para evitar celdas remontadas en tablets y portátiles pequeños */
@media (max-width:1180px){
  .main,
  .section.active,
  .panel,
  .consent-main-panel,
  .appointment-main-panel,
  .appointment-patient-panel,
  .form-panel,
  .list,
  .item,
  .patient-card-v2,
  .specialist-card-clean{
    min-width:0!important;
    max-width:100%!important;
    overflow-wrap:anywhere!important;
  }

  .panel-head,
  .item-head,
  .patient-card-header-v2,
  .appointment-main-head,
  .appointment-date-module-head,
  .appointment-patient-panel-head,
  .consent-main-head,
  .consent-form-head,
  .consent-list-head,
  .inventory-list-head,
  .reports-filter-head{
    display:flex!important;
    flex-wrap:wrap!important;
    align-items:flex-start!important;
    gap:12px!important;
  }

  .form-grid,
  .form-grid-2,
  .guardian-fields,
  .patient-info-grid-v2,
  .profile-grid,
  .appointment-form-grid,
  .appointment-account-grid,
  .appointment-detail-grid,
  .consent-form-row,
  .consent-signer-row,
  .inventory-layout,
  .reports-layout,
  .payment-grid,
  .saas-card-grid,
  .pdf-grid,
  .pdf-clinical-grid{
    display:grid!important;
    grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr))!important;
    gap:14px!important;
    min-width:0!important;
  }

  .appointment-date-search-card{
    grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr))!important;
    align-items:end!important;
  }

  .appointment-date-card{
    grid-template-columns:minmax(94px,120px) minmax(0,1fr)!important;
    gap:14px!important;
  }

  .appointment-date-card .appointment-date-actions,
  .appointment-date-card .appointment-global-actions,
  .appointment-date-card .appointment-actions{
    grid-column:1 / -1!important;
    width:100%!important;
    justify-content:flex-start!important;
  }

  .appointment-date-card .appointment-date-actions > *,
  .appointment-date-card .appointment-global-actions > *,
  .appointment-date-card .appointment-actions > *{
    flex:1 1 160px!important;
    min-width:min(180px,100%)!important;
  }

  .consent-signer-row{
    grid-template-columns:repeat(2,minmax(min(260px,100%),1fr))!important;
  }

  .consent-mode-selector,
  .appointment-mode-selector{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:10px!important;
  }

  .consent-signature-box-large canvas{
    height:clamp(260px,36vw,390px)!important;
  }

  input,
  select,
  textarea,
  button,
  .primary-btn,
  .secondary-btn,
  .danger-btn,
  .logout-btn{
    min-width:0!important;
  }
}

@media (max-width:900px){
  .appointment-date-card,
  .patient-search-bar-main,
  .consent-mode-selector,
  .appointment-mode-selector,
  .consent-signer-row{
    grid-template-columns:1fr!important;
  }

  .panel-head,
  .item-head,
  .patient-card-header-v2,
  .appointment-main-head,
  .appointment-date-module-head,
  .appointment-patient-panel-head,
  .consent-main-head,
  .consent-form-head,
  .consent-list-head,
  .inventory-list-head,
  .reports-filter-head{
    display:grid!important;
    grid-template-columns:1fr!important;
  }

  .appointment-date-card > *,
  .appointment-date-card .appointment-date-actions,
  .appointment-date-card .appointment-actions{
    grid-column:auto!important;
  }
}

@media (max-width:640px){
  .form-grid,
  .form-grid-2,
  .guardian-fields,
  .patient-info-grid-v2,
  .profile-grid,
  .appointment-form-grid,
  .appointment-account-grid,
  .appointment-detail-grid,
  .consent-form-row,
  .consent-signer-row,
  .payment-grid,
  .saas-card-grid{
    grid-template-columns:1fr!important;
  }

  .appointment-date-actions > *,
  .appointment-global-actions > *,
  .appointment-actions > *,
  .consent-actions-row > *,
  .item-actions > *,
  .patient-actions-v2 > *,
  .specialist-actions-clean > *{
    width:100%!important;
    flex:1 1 100%!important;
  }
}

/* =========================================================
   PAGOS Y CARTERA: estilo limpio + acciones compactas
   ========================================================= */
#paymentPortfolioPanel .payment-card {
  padding: 16px;
  border-radius: 20px;
  background: linear-gradient(180deg, #FFFFFF 0%, #F5F1EA 100%);
  border: 1px solid rgba(215, 201, 184, .82);
}

#paymentPortfolioPanel .payment-card-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 20px;
  align-items: center;
}

#paymentPortfolioPanel .payment-card-info {
  min-width: 0;
}

#paymentPortfolioPanel .payment-card-info h4 {
  margin: 0 0 8px;
  text-transform: none;
  color: #4A342A;
  font-size: 1.02rem;
}

#paymentPortfolioPanel .payment-text-summary {
  display: grid;
  gap: 4px;
  color: #7D5A44;
  line-height: 1.35;
}

#paymentPortfolioPanel .payment-text-summary p {
  margin: 0;
}

#paymentPortfolioPanel .payment-text-summary strong,
#paymentPortfolioPanel .payment-card-info strong {
  color: #4A342A;
}

#paymentPortfolioPanel .payment-note {
  margin: 10px 0 0;
  border: 1px solid rgba(215, 201, 184, .72);
  border-radius: 12px;
  background: rgba(245, 241, 234, .92);
  padding: 8px 12px;
  color: #7D5A44;
  font-size: .9rem;
  overflow-wrap: anywhere;
}

#paymentPortfolioPanel .payment-actions-compact {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(118px, 1fr));
  gap: 8px !important;
  align-self: center;
  justify-self: end;
  width: min(100%, 330px);
  min-width: 260px;
}

#paymentPortfolioPanel .payment-account-status,
#paymentPortfolioPanel .payment-actions-compact .payment-small-btn {
  width: auto !important;
  min-width: 0 !important;
  min-height: 34px !important;
  height: 34px !important;
  padding: 0 12px !important;
  border-radius: 12px !important;
  font-size: .82rem !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  white-space: nowrap;
}

#paymentPortfolioPanel .payment-account-status {
  background: #F5F1EA;
  border: 1px solid rgba(178, 150, 125, .65);
  color: #7D5A44;
}

#paymentPortfolioPanel .payment-account-status.paid {
  background: #F5F1EA;
  border-color: rgba(125, 90, 68, .35);
  color: #4A342A;
}

#paymentPortfolioPanel .payment-abono-btn {
  background: #F5F1EA;
  border: 1px solid rgba(125, 90, 68, .28);
  color: #4A342A;
}

#paymentPortfolioPanel .payment-edit-total-btn {
  background: #F5F1EA;
  border: 1px solid rgba(178, 150, 125, .22);
  color: #7D5A44;
}

#paymentTotal:not([readonly]) {
  border-color: rgba(178, 150, 125, .38);
  background: #FFFFFF;
}

@media (max-width: 1180px) {
  #paymentPortfolioPanel .payment-card-layout {
    grid-template-columns: minmax(0, 1fr) minmax(250px, 320px);
  }

  #paymentPortfolioPanel .payment-actions-compact {
    min-width: 0;
    width: 100%;
  }
}

@media (max-width: 860px) {
  #paymentPortfolioPanel .payment-card-layout {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  #paymentPortfolioPanel .payment-actions-compact {
    justify-self: stretch;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }
}

@media (max-width: 480px) {
  #paymentPortfolioPanel .payment-actions-compact {
    grid-template-columns: 1fr;
  }

  #paymentPortfolioPanel .payment-account-status,
  #paymentPortfolioPanel .payment-actions-compact .payment-small-btn {
    width: 100% !important;
  }
}


/* =========================================================
   INSTALADOR: contraseña manual alineada con usuario MySQL
   ========================================================= */
#manualDbBox .install-clean-grid label:not(.install-clean-span) {
  grid-column: auto !important;
}

#manualDbBox .password-toggle-wrap {
  width: 100%;
}

/* =========================================================
   PAGOS: historial de abonos organizado
   ========================================================= */
#paymentPortfolioPanel .payment-abono-history {
  display: grid;
  gap: 8px;
  width: min(100%, 560px);
  margin-top: 12px;
  padding: 10px;
  background: rgba(245, 241, 234, .9);
}

#paymentPortfolioPanel .payment-abono-title {
  color: #4A342A;
  font-size: .78rem;
  font-weight: 950;
  letter-spacing: .03em;
  text-transform: uppercase;
}

#paymentPortfolioPanel .payment-abono-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

#paymentPortfolioPanel .payment-abono-row {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  max-width: 100%;
  padding: 6px 10px;
  border: 1px solid rgba(125, 90, 68, .22);
  border-radius: 999px;
  background: #FFFFFF;
  box-shadow: 0 8px 18px rgba(74, 52, 42, .05);
}

#paymentPortfolioPanel .payment-abono-index {
  width: 22px;
  height: 22px;
  border-radius: 999px;
  display: inline-grid;
  place-items: center;
  flex: 0 0 22px;
  background: #7D5A44;
  color: #FFFFFF;
  font-size: .72rem;
  font-weight: 1000;
}

#paymentPortfolioPanel .payment-abono-amount {
  color: #4A342A;
  font-weight: 950;
  white-space: nowrap;
}

#paymentPortfolioPanel .payment-abono-detail {
  color: #7D5A44;
  font-size: .82rem;
  overflow-wrap: anywhere;
}

#paymentPortfolioPanel .payment-note-other {
  display: grid;
  gap: 4px;
  color: #7D5A44;
  font-size: .86rem;
}

@media (max-width: 760px) {
  #manualDbBox .install-clean-grid {
    grid-template-columns: 1fr !important;
  }

  #paymentPortfolioPanel .payment-abono-history {
    width: 100%;
  }

  #paymentPortfolioPanel .payment-abono-list,
  #paymentPortfolioPanel .payment-abono-row {
    width: 100%;
  }

  #paymentPortfolioPanel .payment-abono-row {
    border-radius: 14px;
    justify-content: flex-start;
  }
}

/* =========================================================
   PAGOS: ajuste de valor disponible para super administrador
   ========================================================= */
#paymentPortfolioPanel .payment-adjustment-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

#paymentPortfolioPanel .payment-adjustment-pill {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  padding: 7px 10px;
  border-radius: 999px;
  background: #F5F1EA;
  border: 1px solid rgba(178, 150, 125, .18);
  color: #7D5A44;
  font-size: .82rem;
  font-weight: 850;
  overflow-wrap: anywhere;
}

/* Agenda: organización por especialista y control de horarios de 30 minutos */
.appointment-date-search-card {
  grid-template-columns: minmax(160px, 210px) minmax(190px, 250px) minmax(260px, 1fr) minmax(190px, auto) !important;
}
.appointment-date-search-card select {
  width: 100%;
  min-height: 48px;
  border-radius: 15px;
  border: 1px solid #D7C9B8;
  padding: 0 14px;
  color: #4A342A;
  background: #FFFFFF;
  font-weight: 700;
}
.appointment-specialist-group {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid #D7C9B8;
  border-radius: 22px;
  background: linear-gradient(135deg, rgba(255,255,255,.96), rgba(245, 241, 234,.96));
}
.appointment-specialist-group-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 8px 10px 12px;
  border-bottom: 1px solid #D7C9B8;
}
.appointment-specialist-group-head div {
  display: grid;
  gap: 3px;
  min-width: 0;
}
.appointment-specialist-group-head span {
  color: #4A342A;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.appointment-specialist-group-head strong {
  color: #4A342A;
  font-size: 18px;
  line-height: 1.15;
  overflow-wrap: anywhere;
}
.appointment-specialist-group-head em {
  flex: 0 0 auto;
  padding: 8px 12px;
  border-radius: 999px;
  background: #F5F1EA;
  color: #4A342A;
  font-style: normal;
  font-weight: 900;
  white-space: nowrap;
}
.appointment-specialist-group-list {
  display: grid;
  gap: 10px;
}
.appointment-availability {
  display: grid;
  gap: 8px;
  padding: 14px 16px;
  border: 1px dashed #D7C9B8;
  border-radius: 18px;
  background: #F5F1EA;
  color: #7D5A44;
}
.appointment-availability strong {
  color: #4A342A;
  font-size: 15px;
}
.appointment-availability span {
  font-size: 13px;
  line-height: 1.35;
}
.appointment-availability.is-free {
  border-color: #7D5A44;
  background: linear-gradient(135deg, #F5F1EA, #F5F1EA);
}
.appointment-availability.is-busy {
  border-color: #B2967D;
  background: linear-gradient(135deg, #F5F1EA, #F5F1EA);
}
.appointment-availability-slots {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 2px;
}
.appointment-availability-slots span {
  padding: 7px 10px;
  border-radius: 999px;
  background: #FFFFFF;
  border: 1px solid #D7C9B8;
  color: #4A342A;
  font-weight: 800;
}
@media (max-width: 1280px) {
  .appointment-date-search-card {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .appointment-date-actions {
    grid-column: 1 / -1;
    justify-content: center;
  }
}
@media (max-width: 760px) {
  .appointment-date-search-card {
    grid-template-columns: 1fr !important;
  }
  .appointment-date-actions {
    grid-column: auto;
  }
  .appointment-specialist-group-head {
    align-items: stretch;
    flex-direction: column;
    text-align: center;
  }
  .appointment-specialist-group-head em {
    align-self: center;
  }
}

/* =========================================================
   PACIENTES · REGISTRO COMPACTO Y OPTIMIZADO
   Reduce altura de celdas, mejora columnas y evita espacios vacíos.
   ========================================================= */
#patientForm.patient-form-v2{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(210px,1fr))!important;
  gap:12px 14px!important;
  align-items:end!important;
  padding:clamp(16px,1.6vw,22px)!important;
}

#patientForm.patient-form-v2.hidden,
#patientForm.collapsed-form.hidden{
  display:none!important;
}

#patientForm.patient-form-v2 input[type="hidden"]{
  display:none!important;
}

#patientForm .form-title-row{
  grid-column:1 / -1!important;
  margin-bottom:2px!important;
  padding-bottom:10px!important;
  border-bottom:1px solid rgba(215, 201, 184,.7)!important;
}

#patientForm .form-title-row h3{
  margin:0!important;
  font-size:clamp(20px,1.8vw,25px)!important;
}

#patientForm.patient-form-v2 label{
  gap:5px!important;
  font-size:13px!important;
  line-height:1.25!important;
  min-width:0!important;
}

#patientForm.patient-form-v2 input,
#patientForm.patient-form-v2 select,
#patientForm.patient-form-v2 textarea{
  min-height:42px!important;
  height:auto!important;
  padding:9px 12px!important;
  border-radius:12px!important;
  font-size:14px!important;
  line-height:1.25!important;
}

#patientForm.patient-form-v2 select{
  padding-right:34px!important;
}

#patientForm .patient-birth-age-row{
  display:grid!important;
  grid-template-columns:minmax(0,1.15fr) minmax(92px,.65fr)!important;
  gap:10px!important;
  align-items:end!important;
  min-width:0!important;
}

#patientForm .patient-birth-age-row input{
  min-height:42px!important;
}

#patientForm .patient-professional-section,
#patientForm .minor-card,
#patientForm .quick-help,
#patientForm > label:has(#patientReason),
#patientForm > button[type="submit"]{
  grid-column:1 / -1!important;
}

#patientForm .patient-professional-section{
  gap:10px!important;
  padding:12px 14px!important;
  border-radius:16px!important;
}

#patientForm .patient-professional-section .form-section-title{
  display:flex!important;
  flex-wrap:wrap!important;
  align-items:baseline!important;
  gap:6px 12px!important;
}

#patientForm .patient-professional-section .form-section-title small{
  font-size:12px!important;
}

#patientForm .patient-professional-section label{
  max-width:min(100%,520px)!important;
}

#patientForm .minor-card{
  gap:10px!important;
  padding:12px 14px!important;
  border-radius:16px!important;
}

#patientForm .checkbox-row{
  padding:7px 10px!important;
  font-size:13px!important;
}

#patientForm .guardian-fields{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(150px,1fr))!important;
  gap:10px!important;
  align-items:end!important;
}

#patientForm .guardian-fields .form-section-title{
  grid-column:1 / -1!important;
}

#patientForm #patientReason{
  min-height:76px!important;
  resize:vertical!important;
}

#patientForm .quick-help{
  margin-top:-2px!important;
  padding:10px 12px!important;
  border-radius:14px!important;
  font-size:13px!important;
  line-height:1.35!important;
}

#patientForm > button[type="submit"]{
  justify-self:end!important;
  width:auto!important;
  min-width:190px!important;
  min-height:44px!important;
  padding:11px 18px!important;
}

@media (min-width:1500px){
  #patientForm.patient-form-v2{
    grid-template-columns:repeat(4,minmax(210px,1fr))!important;
  }

  #patientForm .patient-birth-age-row{
    grid-template-columns:minmax(0,1fr) minmax(86px,.48fr)!important;
  }
}

@media (max-width:1180px){
  #patientForm.patient-form-v2{
    grid-template-columns:repeat(2,minmax(220px,1fr))!important;
  }

  #patientForm .guardian-fields{
    grid-template-columns:repeat(2,minmax(180px,1fr))!important;
  }
}

@media (max-width:720px){
  #patientForm.patient-form-v2{
    grid-template-columns:1fr!important;
    gap:11px!important;
    padding:16px!important;
  }

  #patientForm .form-title-row{
    display:grid!important;
    grid-template-columns:1fr!important;
  }

  #patientForm .close-form-btn,
  #patientForm > button[type="submit"]{
    width:100%!important;
    min-width:0!important;
    justify-self:stretch!important;
  }

  #patientForm .patient-birth-age-row,
  #patientForm .guardian-fields{
    grid-template-columns:1fr!important;
  }

  #patientForm .patient-professional-section .form-section-title{
    display:grid!important;
  }
}

/* =========================================================
   PACIENTES · ajuste puntual Teléfono / WhatsApp
   Mantiene el diseño compacto original y ubica el teléfono
   debajo del bloque Fecha de nacimiento / Edad para simetría.
   ========================================================= */
@media (min-width:1181px){
  #patientForm.patient-form-v2{
    grid-template-columns:repeat(3,minmax(210px,1fr))!important;
  }
  #patientForm .patient-email-field{
    grid-column:1!important;
  }
  #patientForm .patient-address-field{
    grid-column:2!important;
  }
  #patientForm .patient-phone-field{
    grid-column:3!important;
  }
}

@media (min-width:721px) and (max-width:1180px){
  #patientForm .patient-birth-age-row{
    grid-column:1!important;
  }
  #patientForm .patient-email-field{
    grid-column:2!important;
  }
  #patientForm .patient-phone-field{
    grid-column:1!important;
  }
  #patientForm .patient-address-field{
    grid-column:2!important;
  }
}

@media (max-width:720px){
  #patientForm .patient-phone-field,
  #patientForm .patient-email-field,
  #patientForm .patient-address-field{
    grid-column:auto!important;
  }
}

/* =========================================================
   PACIENTES · Acudiente desplegable
   La sección del acudiente permanece cerrada hasta marcar
   “Paciente menor de edad”. Evita que ocupe espacio siempre.
   ========================================================= */
#patientForm .minor-card{
  transition:background .18s ease,border-color .18s ease,box-shadow .18s ease;
}

#patientForm .minor-card.is-collapsed{
  background:linear-gradient(180deg,#F5F1EA,#F5F1EA)!important;
}

#patientForm .minor-card.is-open{
  border-color:#B2967D!important;
  background:linear-gradient(180deg,#F5F1EA,#F5F1EA)!important;
  box-shadow:0 14px 34px rgba(74, 52, 42,.08)!important;
}

#patientForm .minor-card .checkbox-row{
  position:relative!important;
  width:fit-content!important;
  padding-right:18px!important;
}

#patientForm .guardian-fields.hidden{
  display:none!important;
  visibility:hidden!important;
  height:0!important;
  min-height:0!important;
  padding:0!important;
  margin:0!important;
  border:0!important;
  overflow:hidden!important;
}

#patientForm .guardian-fields:not(.hidden){
  display:grid!important;
  visibility:visible!important;
}

@media (max-width:640px){
  #patientForm .minor-card .checkbox-row{
    width:100%!important;
  }
}


/* =========================================================
   PACIENTES · Menor de edad sin símbolo desplegable
   ========================================================= */
#patientForm .minor-card .checkbox-row{
  padding-right:20px!important;
}

#patientForm .minor-card .checkbox-row::after{
  content:none!important;
  display:none!important;
}

/* =========================================================
   HISTORIA CLÍNICA · Expediente completo del paciente
   ========================================================= */
.clinical-record-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:7px 12px;
  border-radius:999px;
  background:#F5F1EA;
  border:1px solid #D7C9B8;
  color:#4A342A;
  font-weight:800;
  font-size:12px;
  white-space:nowrap;
}

.clinical-record-type{
  color:#4A342A;
  font-weight:800;
}

.clinical-record-subtitle{
  margin:0 0 14px;
  padding:10px 12px;
  border-radius:14px;
  background:#F5F1EA;
  border:1px solid #D7C9B8;
  color:#7D5A44;
  font-weight:650;
}

.clinical-signature-card img{
  display:block;
  max-width:360px;
  width:100%;
  min-height:90px;
  object-fit:contain;
  background:#FFFFFF;
  border:1px solid #D7C9B8;
  border-radius:14px;
  padding:10px;
}

.clinical-selected-contact{
  gap:8px 16px;
}

@media (max-width: 760px){
  .clinical-accordion-summary{
    align-items:flex-start!important;
    gap:10px!important;
  }
  .clinical-record-badge{
    order:3;
    margin-left:44px;
  }
}


/* =========================================================
   FIX FINAL · Paciente menor de edad sin símbolo
   Elimina de forma definitiva la flecha/"v" del control.
   ========================================================= */
#patientForm .minor-card .checkbox-row::after,
#patientForm .minor-card.is-open .checkbox-row::after,
#patientForm .minor-card.is-collapsed .checkbox-row::after,
#patientForm label.checkbox-row::after{
  content:""!important;
  display:none!important;
  width:0!important;
  height:0!important;
  opacity:0!important;
  visibility:hidden!important;
}
#patientForm .minor-card .checkbox-row{
  padding-right:18px!important;
}


/* Consentimientos: buscador de paciente con el mismo estilo de los otros módulos */
.consent-patient-search{
  position:relative!important;
  margin-top:6px!important;
}
#consentPatientSearch{
  width:100%!important;
  padding-right:44px!important;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%234A342A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E")!important;
  background-repeat:no-repeat!important;
  background-position:right 14px center!important;
  background-size:19px!important;
}
#consentPatientSearch.patient-selected{
  border-color:var(--primary)!important;
  background-color:rgba(74, 52, 42,.045)!important;
  font-weight:800!important;
}
#consentPatientResults{
  max-height:280px!important;
  overflow-y:auto!important;
}
.consent-form .field-help{
  display:block!important;
  margin-top:7px!important;
  color:var(--muted)!important;
  font-size:12px!important;
  font-weight:500!important;
}
@media (max-width:760px){
  #consentPatientResults .clinical-patient-option{
    align-items:flex-start!important;
  }
  #consentPatientResults .clinical-patient-info small{
    display:block!important;
    line-height:1.35!important;
  }
}

/* Historia clínica: acciones PDF / WhatsApp del paciente seleccionado */
.clinical-selected-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
  flex-wrap:wrap;
  min-width:220px;
}
.clinical-selected-actions .primary-btn,
.clinical-selected-actions .secondary-btn{
  min-height:40px;
  padding:10px 16px;
  border-radius:14px;
  white-space:nowrap;
  font-size:13px;
}
@media (max-width: 1080px){
  .clinical-selected-patient{
    grid-template-columns:auto minmax(0,1fr);
  }
  .clinical-selected-contact,
  .clinical-selected-actions{
    grid-column:1 / -1;
    padding-left:55px;
  }
  .clinical-selected-actions{
    justify-content:flex-start;
  }
}
@media (max-width: 600px){
  .clinical-selected-actions{
    padding-left:0;
    display:grid;
    grid-template-columns:1fr;
    width:100%;
  }
  .clinical-selected-actions .primary-btn,
  .clinical-selected-actions .secondary-btn{
    width:100%;
    justify-content:center;
  }
}

/* =========================================================
   PDF HISTORIA CLÍNICA INTEGRAL - REGISTROS Y CONSENTIMIENTOS
   ========================================================= */
.clinical-pdf-document-v2 .pdf-page-integral {
  padding: 34px;
  overflow: hidden;
}

.clinical-pdf-document-v2 .pdf-integral-section {
  min-height: calc(1545px - 68px);
  padding: 18px;
  border-radius: 22px;
  background: #FFFFFF;
  box-shadow: 0 8px 20px rgba(74, 52, 42, .04);
  box-sizing: border-box;
}

.clinical-pdf-document-v2 .pdf-integral-card-list {
  display: grid;
  gap: 14px;
  margin-top: 14px;
}

.clinical-pdf-document-v2 .pdf-integral-card-list.compact {
  gap: 12px;
}

.clinical-pdf-document-v2 .pdf-integral-card {
  padding: 16px;
  border: 1px solid #D7C9B8;
  border-radius: 18px;
  background: linear-gradient(180deg, #FFFFFF, #F5F1EA);
  box-shadow: 0 8px 18px rgba(74, 52, 42, .035);
  box-sizing: border-box;
}

.clinical-pdf-document-v2 .pdf-integral-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid #D7C9B8;
}

.clinical-pdf-document-v2 .pdf-integral-card-head span {
  display: block;
  color: #4A342A;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.clinical-pdf-document-v2 .pdf-integral-card-head h4 {
  margin: 5px 0 0;
  color: #4A342A;
  font-size: 18px;
  line-height: 1.2;
}

.clinical-pdf-document-v2 .pdf-integral-card-head strong {
  min-width: 116px;
  padding: 7px 10px;
  border-radius: 999px;
  background: #F5F1EA;
  color: #4A342A;
  font-size: 11px;
  text-align: center;
  line-height: 1.15;
}

.clinical-pdf-document-v2 .pdf-integral-info-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 9px;
  margin-top: 12px;
}

.clinical-pdf-document-v2 .pdf-integral-info-card {
  min-height: 58px;
  padding: 10px 11px;
  border: 1px solid #F5F1EA;
  border-radius: 14px;
  background: #FFFFFF;
  box-sizing: border-box;
}

.clinical-pdf-document-v2 .pdf-integral-info-card.wide {
  grid-column: 1 / -1;
}

.clinical-pdf-document-v2 .pdf-integral-info-card span,
.clinical-pdf-document-v2 .pdf-consent-body-box span,
.clinical-pdf-document-v2 .pdf-consent-signature-box span {
  display: block;
  color: #7D5A44;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.clinical-pdf-document-v2 .pdf-integral-info-card strong {
  display: block;
  margin-top: 6px;
  color: #4A342A;
  font-size: 12px;
  line-height: 1.35;
  font-weight: 800;
  word-break: break-word;
}

.clinical-pdf-document-v2 .pdf-consent-pdf-card {
  margin-top: 14px;
}

.clinical-pdf-document-v2 .pdf-consent-body-box {
  margin-top: 12px;
  padding: 14px;
  border: 1px solid #D7C9B8;
  border-radius: 16px;
  background: #F5F1EA;
}

.clinical-pdf-document-v2 .pdf-consent-body-box p {
  margin: 8px 0 0;
  color: #4A342A;
  font-size: 12.5px;
  line-height: 1.48;
}

.clinical-pdf-document-v2 .pdf-consent-signature-box {
  margin-top: 14px;
  padding: 14px;
  min-height: 155px;
  border: 1px dashed #B2967D;
  border-radius: 18px;
  background: #FFFFFF;
  box-sizing: border-box;
}

.clinical-pdf-document-v2 .pdf-consent-signature-box img {
  display: block;
  width: 100%;
  max-width: 560px;
  height: 112px;
  margin: 10px auto 0;
  object-fit: contain;
  background: #FFFFFF;
}

.clinical-pdf-document-v2 .pdf-consent-signature-box.empty strong {
  display: block;
  margin-top: 22px;
  color: #7D5A44;
  font-size: 13px;
  text-align: center;
}

.clinical-pdf-document-v2 .pdf-integral-table-wrap {
  margin-top: 14px;
  border: 1px solid #D7C9B8;
  border-radius: 16px;
  overflow: hidden;
}

.clinical-pdf-document-v2 .pdf-integral-table-wrap table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.clinical-pdf-document-v2 .pdf-integral-table-wrap th,
.clinical-pdf-document-v2 .pdf-integral-table-wrap td {
  padding: 10px;
  border-bottom: 1px solid #F5F1EA;
  text-align: left;
  vertical-align: top;
}

.clinical-pdf-document-v2 .pdf-integral-table-wrap th {
  color: #7D5A44;
  font-size: 10px;
  letter-spacing: .05em;
  text-transform: uppercase;
  background: #F5F1EA;
}

.clinical-pdf-document-v2 .pdf-integral-table-wrap tr:last-child td {
  border-bottom: 0;
}

/* =========================================================
   HISTORIA CLÍNICA · Listado de expediente más organizado
   Mejora la ubicación del estado para que no quede flotando
   en el centro y evita celdas/remontes en pantallas medianas.
   ========================================================= */
.clinical-history-panel{
  max-width:100%!important;
}
.clinical-accordion-list{
  gap:12px!important;
}
.clinical-accordion-item{
  position:relative!important;
  border-color:#D7C9B8!important;
  background:linear-gradient(135deg,#FFFFFF 0%,#F5F1EA 100%)!important;
}
.clinical-accordion-item::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:4px;
  background:#7D5A44;
  opacity:.85;
}
.clinical-accordion-consent::before{background:#7D5A44!important;}
.clinical-accordion-clinical::before{background:#B2967D!important;}
.clinical-accordion-appointment::before{background:#7D5A44!important;}
.clinical-accordion-odontogram::before{background:#7D5A44!important;}
.clinical-accordion-payment::before{background:#B42318!important;}

.clinical-accordion-summary{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto 42px!important;
  align-items:center!important;
  gap:14px!important;
  padding:14px 16px 14px 18px!important;
}
.clinical-accordion-title{
  display:grid!important;
  grid-template-columns:38px minmax(0,1fr)!important;
  align-items:center!important;
  gap:12px!important;
  min-width:0!important;
  flex:1 1 auto!important;
}
.clinical-record-number{
  width:38px!important;
  height:38px!important;
  flex-basis:38px!important;
  border-radius:13px!important;
  background:#F5F1EA!important;
  border:1px solid #D7C9B8!important;
}
.clinical-accordion-title strong{
  display:block!important;
  max-width:100%!important;
  white-space:normal!important;
  line-height:1.22!important;
  font-size:15px!important;
}
.clinical-accordion-title small{
  display:flex!important;
  align-items:center!important;
  flex-wrap:wrap!important;
  gap:5px!important;
  line-height:1.35!important;
}
.clinical-record-type{
  display:inline-flex!important;
  align-items:center!important;
  min-height:20px!important;
  padding:2px 7px!important;
  border-radius:999px!important;
  background:#F5F1EA!important;
  border:1px solid #D7C9B8!important;
  color:#4A342A!important;
}
.clinical-record-badge{
  justify-self:end!important;
  min-width:112px!important;
  max-width:180px!important;
  text-align:center!important;
  padding:8px 13px!important;
  box-shadow:0 8px 18px rgba(125, 90, 68,.08)!important;
}
.clinical-accordion-consent .clinical-record-badge,
.clinical-accordion-payment .clinical-record-badge{
  background:#F5F1EA!important;
  border-color:#D7C9B8!important;
  color:#7D5A44!important;
}
.clinical-accordion-appointment .clinical-record-badge{
  background:#F5F1EA!important;
  border-color:#D7C9B8!important;
  color:#7D5A44!important;
}
.clinical-accordion-clinical .clinical-record-badge{
  background:#F5F1EA!important;
  border-color:#D7C9B8!important;
  color:#7D5A44!important;
}
.clinical-accordion-odontogram .clinical-record-badge{
  background:#F5F1EA!important;
  border-color:#D7C9B8!important;
  color:#7D5A44!important;
}
.clinical-accordion-chevron{
  justify-self:end!important;
  width:38px!important;
  height:38px!important;
  min-width:38px!important;
  border-radius:14px!important;
}
.clinical-accordion-content{
  padding:0 18px 18px 22px!important;
}
.clinical-record-subtitle{
  margin-top:14px!important;
}

@media (max-width: 980px){
  .clinical-accordion-summary{
    grid-template-columns:minmax(0,1fr) 42px!important;
    gap:12px!important;
  }
  .clinical-record-badge{
    grid-column:1 / 2!important;
    justify-self:start!important;
    margin-left:50px!important;
    min-width:auto!important;
    max-width:100%!important;
  }
  .clinical-accordion-chevron{
    grid-column:2!important;
    grid-row:1 / span 2!important;
    align-self:center!important;
  }
}

@media (max-width: 620px){
  .clinical-history-panel{
    padding:14px!important;
  }
  .clinical-accordion-summary{
    padding:13px!important;
    grid-template-columns:minmax(0,1fr) 38px!important;
  }
  .clinical-accordion-title{
    grid-template-columns:34px minmax(0,1fr)!important;
    gap:9px!important;
  }
  .clinical-record-number{
    width:34px!important;
    height:34px!important;
  }
  .clinical-record-badge{
    margin-left:43px!important;
    font-size:11px!important;
    padding:7px 10px!important;
  }
  .clinical-accordion-content{
    padding:0 13px 14px 17px!important;
  }
}

@media (max-width: 420px){
  .clinical-accordion-summary{
    display:flex!important;
    flex-wrap:wrap!important;
    align-items:flex-start!important;
  }
  .clinical-accordion-title{
    width:calc(100% - 50px)!important;
  }
  .clinical-record-badge{
    margin-left:43px!important;
    order:3!important;
  }
  .clinical-accordion-chevron{
    margin-left:auto!important;
  }
}

/* =========================================================
   FIX FINAL - Consentimientos funcionales y organizados
   ========================================================= */
.consent-consult-panel .consent-search{
  width:100%!important;
  max-width:100%!important;
  min-height:48px!important;
}

.consent-list-grid{
  grid-template-columns:1fr!important;
  gap:12px!important;
}

.consent-document-card,
.consent-patient-empty-card{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) minmax(160px,auto) auto!important;
  align-items:center!important;
  gap:14px!important;
  padding:16px 18px!important;
  border-radius:18px!important;
  background:linear-gradient(135deg,#FFFFFF,#F5F1EA)!important;
}

.consent-card-main{
  display:flex!important;
  align-items:center!important;
  gap:14px!important;
  min-width:0!important;
}

.consent-document-icon{
  width:44px!important;
  height:44px!important;
  min-width:44px!important;
  border-radius:14px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  background:linear-gradient(135deg,var(--accent),#7D5A44)!important;
  color:#FFFFFF!important;
  font-weight:900!important;
}

.consent-document-info{
  min-width:0!important;
}

.consent-document-info h4{
  margin:0 0 4px!important;
  font-size:15px!important;
  line-height:1.25!important;
}

.consent-document-info p,
.consent-document-info small{
  margin:0!important;
  color:var(--muted)!important;
  line-height:1.45!important;
}

.consent-document-meta{
  display:flex!important;
  flex-wrap:wrap!important;
  gap:7px!important;
  margin-top:8px!important;
}

.consent-document-meta span{
  display:inline-flex!important;
  align-items:center!important;
  border:1px solid var(--line)!important;
  border-radius:999px!important;
  padding:5px 9px!important;
  font-size:11px!important;
  color:var(--muted)!important;
  background:#FFFFFF!important;
}

.consent-card-side{
  display:grid!important;
  gap:7px!important;
  justify-items:center!important;
  text-align:center!important;
}

.consent-card-side small{
  color:var(--muted)!important;
  font-size:12px!important;
}

.consent-card-actions-clean{
  display:flex!important;
  flex-wrap:wrap!important;
  justify-content:flex-end!important;
  align-items:center!important;
  gap:8px!important;
  margin-top:0!important;
}

.consent-card-actions-clean button{
  min-height:38px!important;
  padding:9px 13px!important;
  border-radius:12px!important;
  font-size:12px!important;
  white-space:nowrap!important;
}

.consent-patient-empty-card{
  border-style:dashed!important;
  background:linear-gradient(135deg,#F5F1EA,#FFFFFF)!important;
}

@media (max-width:1180px){
  .consent-document-card,
  .consent-patient-empty-card{
    grid-template-columns:1fr!important;
    align-items:start!important;
  }
  .consent-card-side{
    display:flex!important;
    justify-content:flex-start!important;
    flex-wrap:wrap!important;
    text-align:left!important;
  }
  .consent-card-actions-clean{
    justify-content:flex-start!important;
  }
}

@media (max-width:640px){
  .consent-card-main{
    align-items:flex-start!important;
  }
  .consent-card-actions-clean button{
    width:100%!important;
  }
  .consent-document-meta{
    display:grid!important;
    grid-template-columns:1fr!important;
  }
  .consent-document-meta span{
    justify-content:flex-start!important;
  }
}

/* =========================================================
   FIX DEFINITIVO - Consentimientos: resultados visibles
   ========================================================= */
.consent-search-summary{
  display:flex!important;
  align-items:center!important;
  gap:8px!important;
  margin:0 0 12px!important;
  padding:11px 14px!important;
  border:1px solid #D7C9B8!important;
  border-radius:14px!important;
  background:#F5F1EA!important;
  color:#4A342A!important;
  font-size:13px!important;
  font-weight:700!important;
}
.consent-search-summary.hidden{display:none!important;}
.consent-type-pill{
  display:inline-flex!important;
  width:max-content!important;
  align-items:center!important;
  border-radius:999px!important;
  padding:4px 9px!important;
  margin-bottom:6px!important;
  background:#F5F1EA!important;
  color:#4A342A!important;
  font-size:11px!important;
  font-weight:900!important;
  letter-spacing:.02em!important;
}
#consentList.consent-list-grid{
  min-height:60px!important;
}
.consent-empty{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-height:88px!important;
  background:#FFFFFF!important;
  color:#7D5A44!important;
  font-weight:700!important;
}
@media (max-width:780px){
  .consent-document-card,
  .consent-patient-empty-card{
    grid-template-columns:1fr!important;
  }
  .consent-card-actions-clean button{
    width:100%!important;
  }
}

/* =========================================================
   Consentimientos · flujo por paciente seleccionado
   ========================================================= */
.consent-patient-gate{
  width:100%!important;
  border:1px solid var(--line)!important;
  border-radius:22px!important;
  padding:clamp(16px,2vw,24px)!important;
  background:linear-gradient(135deg,#FFFFFF,#F5F1EA)!important;
  display:grid!important;
  gap:14px!important;
  min-width:0!important;
}

.consent-gate-head{
  display:flex!important;
  justify-content:space-between!important;
  gap:14px!important;
  align-items:flex-start!important;
}

.consent-gate-head h4{
  margin:4px 0 6px!important;
  font-size:clamp(18px,2vw,22px)!important;
  color:var(--ink)!important;
}

.consent-gate-head p{
  margin:0!important;
  color:var(--muted)!important;
  line-height:1.45!important;
  max-width:900px!important;
}

.consent-global-search{
  width:100%!important;
  max-width:100%!important;
  position:relative!important;
}

.consent-global-search input{
  width:100%!important;
  border:1px solid var(--line)!important;
  border-radius:16px!important;
  background:#FFFFFF!important;
  padding:14px 16px!important;
  min-height:52px!important;
  color:var(--ink)!important;
  font-weight:700!important;
}

.consent-unlocked-content{
  display:grid!important;
  gap:18px!important;
  width:100%!important;
  min-width:0!important;
}

.consent-selected-patient-card{
  display:grid!important;
  grid-template-columns:auto minmax(0,1fr) auto!important;
  gap:14px!important;
  align-items:center!important;
  border:1px solid #D7C9B8!important;
  border-radius:18px!important;
  background:#FFFFFF!important;
  padding:14px!important;
  box-shadow:0 12px 24px rgba(74, 52, 42,.06)!important;
}

.consent-selected-avatar{
  width:52px!important;
  height:52px!important;
  border-radius:16px!important;
  background:linear-gradient(135deg,var(--primary),#7D5A44)!important;
  color:#FFFFFF!important;
  display:grid!important;
  place-items:center!important;
  font-weight:900!important;
  font-size:22px!important;
}

.consent-selected-info{
  min-width:0!important;
  display:grid!important;
  gap:4px!important;
}

.consent-selected-info strong{
  color:var(--ink)!important;
  font-size:16px!important;
}

.consent-selected-info span{
  color:var(--muted)!important;
  font-size:13px!important;
  line-height:1.35!important;
  overflow-wrap:anywhere!important;
}

.consent-change-patient-btn{
  white-space:nowrap!important;
  min-height:42px!important;
  padding:10px 16px!important;
}

.consent-patient-search .clinical-patient-results,
.consent-global-search .clinical-patient-results{
  position:absolute!important;
  inset-inline:0!important;
  top:calc(100% + 8px)!important;
  z-index:40!important;
  max-height:360px!important;
  overflow:auto!important;
  background:#FFFFFF!important;
  border:1px solid var(--line)!important;
  border-radius:16px!important;
  box-shadow:0 18px 45px rgba(74, 52, 42,.16)!important;
  padding:8px!important;
}

@media (max-width:760px){
  .consent-selected-patient-card{
    grid-template-columns:auto minmax(0,1fr)!important;
  }
  .consent-change-patient-btn{
    grid-column:1 / -1!important;
    width:100%!important;
  }
}


/* Centro de operación y módulos agregados */
.operation-hub { margin-top: 24px; }
.operation-hub-head h3 { font-size: clamp(1.6rem, 3vw, 2.5rem); max-width: 760px; margin: 6px 0 8px; line-height: 1.08; }
.operation-hub-head p { color: var(--muted); margin: 0 0 22px; }
.operation-card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 18px; }
.operation-card { display: grid; grid-template-columns: 42px 1fr; align-items: center; column-gap: 12px; padding: 14px 12px; border: 1px solid var(--border); border-radius: 18px; background: rgba(255,255,255,.76); text-align: left; cursor: pointer; color: var(--ink); transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
.operation-card:hover { transform: translateY(-2px); border-color: rgba(125, 90, 68,.55); box-shadow: 0 14px 32px rgba(74, 52, 42, .12); }
.operation-icon { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px; color: #7D5A44; border: 1px solid rgba(125, 90, 68,.28); background: rgba(125, 90, 68,.07); font-weight: 900; font-size: 1.2rem; grid-row: span 2; }
.operation-card strong { font-size: .95rem; }
.operation-card small { color: var(--muted); border-bottom: 1px dashed rgba(125, 90, 68,.35); width: max-content; max-width: 100%; }
.focus-pulse { animation: focusPulse 1.2s ease; }
@keyframes focusPulse { 0%,100%{box-shadow:0 0 0 rgba(125, 90, 68,0)} 35%{box-shadow:0 0 0 6px rgba(125, 90, 68,.13)} }
.patient-bulk-panel { margin-top: 18px; }
.bulk-import-grid { display: grid; grid-template-columns: minmax(220px, .8fr) minmax(280px, 1.2fr); gap: 16px; }
.inline-status { color: var(--muted); font-weight: 700; }
.laboratory-panel { margin-top: 24px; }
.operation-inline-form { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; align-items: end; }
.operation-inline-form label { margin: 0; }
.operation-inline-form .primary-btn { min-height: 44px; }
.operation-list { display: grid; gap: 10px; margin-top: 16px; }
.operation-row { display: grid; grid-template-columns: minmax(220px, 1fr) auto auto auto; align-items: center; gap: 12px; padding: 12px; border: 1px solid var(--border); border-radius: 16px; background: rgba(255,255,255,.78); }
.operation-row p { margin: 4px 0 0; color: var(--muted); }
.operation-status { display: inline-flex; justify-content: center; min-width: 110px; padding: 8px 12px; border-radius: 999px; background: rgba(125, 90, 68,.1); color: var(--primary-dark); font-weight: 800; }
.operation-row-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.operation-reports-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 24px; }
.operation-reports-grid #dentistPayrollPanel { grid-column: 1 / -1; }
.compact-head { margin-bottom: 12px; }
.compact-head h3 { margin-bottom: 4px; }
.cash-summary-grid, .payroll-result-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.expense-form { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.payroll-controls { display: grid; grid-template-columns: 1.3fr repeat(3, .7fr) auto; gap: 12px; align-items: end; }
.payroll-result { margin-top: 14px; }
.report-charts-panel { margin: 18px 0; padding: 16px; border: 1px solid var(--border); border-radius: 20px; background: rgba(245, 241, 234,.7); }
.reports-section-title h4 { margin: 4px 0 12px; }
.report-charts-grid { display: grid; gap: 10px; }
.chart-row { display: grid; grid-template-columns: 110px minmax(120px, 1fr) 60px; gap: 12px; align-items: center; }
.chart-row span { font-weight: 800; color: var(--ink); }
.chart-row strong { text-align: right; color: var(--primary-dark); }
.chart-track { height: 12px; border-radius: 999px; background: rgba(125, 90, 68,.12); overflow: hidden; }
.chart-track i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--primary), var(--primary-dark)); }
.internal-chat-panel { margin-top: 18px; }
.internal-chat-form { display: grid; grid-template-columns: minmax(160px, .5fr) minmax(240px, 1fr) auto; gap: 12px; align-items: center; }
.internal-chat-list { display: grid; gap: 10px; margin-top: 14px; max-height: 360px; overflow: auto; padding-right: 4px; }
.internal-chat-message { padding: 12px 14px; border: 1px solid var(--border); border-radius: 16px; background: rgba(255,255,255,.8); }
.internal-chat-message p { margin: 4px 0; }
.internal-chat-message small { color: var(--muted); }

@media (max-width: 1180px) {
  .operation-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .operation-inline-form, .expense-form, .payroll-controls { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .payroll-controls .primary-btn { grid-column: 1 / -1; }
  .operation-reports-grid { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .operation-card-grid, .bulk-import-grid, .cash-summary-grid, .payroll-result-grid { grid-template-columns: 1fr; }
  .operation-card { grid-template-columns: 38px 1fr; }
  .operation-row { grid-template-columns: 1fr; align-items: stretch; }
  .operation-status { width: fit-content; }
  .operation-row-actions { justify-content: flex-start; }
  .operation-inline-form, .expense-form, .payroll-controls, .internal-chat-form { grid-template-columns: 1fr; }
  .chart-row { grid-template-columns: 90px 1fr 44px; }
}

/* Ajuste visual YacoSpa para los ítems de operación clínica */
.operation-hub {
  margin-top: 24px !important;
  border: 1px solid rgba(74, 52, 42, .16) !important;
  border-radius: 30px !important;
  background:
    radial-gradient(circle at top right, rgba(178, 150, 125, .18), transparent 34%),
    linear-gradient(135deg, rgba(255,255,255,.96), rgba(245, 241, 234, .9)) !important;
  box-shadow: 0 22px 55px rgba(74, 52, 42, .10) !important;
  overflow: hidden !important;
}

.operation-hub-head {
  max-width: 920px !important;
}

.operation-hub-head h3 {
  color: #4A342A !important;
  letter-spacing: -.04em !important;
}

.operation-hub-head p {
  max-width: 760px !important;
}

.operation-card-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 14px !important;
}

.operation-card {
  position: relative !important;
  display: grid !important;
  grid-template-columns: 52px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 6px 14px !important;
  min-height: 88px !important;
  padding: 16px 18px !important;
  border: 1px solid rgba(74, 52, 42, .18) !important;
  border-radius: 22px !important;
  background: linear-gradient(135deg, rgba(255,255,255,.94), rgba(245, 241, 234, .82)) !important;
  color: #4A342A !important;
  box-shadow: 0 14px 34px rgba(74, 52, 42, .07) !important;
  overflow: hidden !important;
}

.operation-card::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 auto 0 0 !important;
  width: 5px !important;
  background: linear-gradient(180deg, #7D5A44, var(--primary-dark)) !important;
  opacity: .95 !important;
}

.operation-card::after {
  content: "›" !important;
  position: absolute !important;
  right: 16px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 28px !important;
  height: 28px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 999px !important;
  background: rgba(74, 52, 42, .08) !important;
  color: var(--primary-dark) !important;
  font-size: 1.4rem !important;
  font-weight: 900 !important;
  opacity: .8 !important;
  transition: transform .2s ease, background .2s ease, color .2s ease !important;
}

.operation-card:hover {
  transform: translateY(-3px) !important;
  border-color: rgba(125, 90, 68, .55) !important;
  box-shadow: 0 20px 42px rgba(74, 52, 42, .15) !important;
}

.operation-card:hover::after {
  transform: translate(4px, -50%) !important;
  background: var(--primary) !important;
  color: #FFFFFF !important;
}

.operation-icon {
  width: 48px !important;
  height: 48px !important;
  grid-row: span 2 !important;
  display: grid !important;
  place-items: center !important;
  border: 0 !important;
  border-radius: 16px !important;
  color: #FFFFFF !important;
  background: linear-gradient(135deg, #7D5A44, var(--primary-dark)) !important;
  box-shadow: 0 14px 28px rgba(74, 52, 42, .24) !important;
}

.operation-icon svg {
  width: 25px !important;
  height: 25px !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 2 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

.operation-card strong {
  padding-right: 28px !important;
  color: #4A342A !important;
  font-size: .98rem !important;
  line-height: 1.15 !important;
}

.operation-card small {
  width: fit-content !important;
  max-width: calc(100% - 28px) !important;
  color: #7D5A44 !important;
  border-bottom: 1px dashed rgba(74, 52, 42, .35) !important;
  line-height: 1.25 !important;
}

.operation-card:nth-child(2n) .operation-icon,
.operation-card:nth-child(5n) .operation-icon {
  background: linear-gradient(135deg, #7D5A44, #4A342A) !important;
}

.operation-card:nth-child(3n) .operation-icon {
  background: linear-gradient(135deg, #7D5A44, #4A342A) !important;
}

.patient-bulk-panel,
.laboratory-panel,
.operation-module-card,
.internal-chat-panel,
.report-charts-panel {
  border: 1px solid rgba(74, 52, 42, .16) !important;
  border-radius: 24px !important;
  background: linear-gradient(135deg, rgba(255,255,255,.96), rgba(245, 241, 234,.72)) !important;
  box-shadow: 0 18px 42px rgba(74, 52, 42, .08) !important;
}

.operation-status,
.inline-status {
  background: rgba(125, 90, 68, .12) !important;
  color: var(--primary-dark) !important;
}

.operation-row,
.internal-chat-message {
  border-color: rgba(74, 52, 42, .16) !important;
  background: rgba(255,255,255,.86) !important;
}

.chart-track {
  background: rgba(74, 52, 42, .12) !important;
}

.chart-track i {
  background: linear-gradient(90deg, #7D5A44, var(--primary-dark)) !important;
}

@media (max-width: 1180px) {
  .operation-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 760px) {
  .operation-hub {
    border-radius: 24px !important;
  }

  .operation-card-grid {
    grid-template-columns: 1fr !important;
  }

  .operation-card {
    grid-template-columns: 46px minmax(0, 1fr) !important;
    min-height: 82px !important;
    padding: 14px 16px !important;
  }

  .operation-icon {
    width: 44px !important;
    height: 44px !important;
    border-radius: 14px !important;
  }

  .operation-icon svg {
    width: 23px !important;
    height: 23px !important;
  }

  .operation-card strong,
  .operation-card small {
    max-width: 100% !important;
    padding-right: 24px !important;
  }
}

/* =========================================================
   AJUSTE: eliminar flecha circular de tarjetas operativas
   ========================================================= */
.operation-card::after {
  content: none !important;
  display: none !important;
}
.operation-card strong,
.operation-card small {
  padding-right: 0 !important;
}

/* =========================================================
   HISTORIA CLÍNICA PDF · Selector de descarga organizada
   ========================================================= */
.clinical-pdf-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  padding: 22px;
  background: rgba(74, 52, 42, .48);
  backdrop-filter: blur(6px);
}
.clinical-pdf-modal-card {
  position: relative;
  width: min(720px, 100%);
  max-height: min(88vh, 760px);
  overflow: auto;
  padding: 24px;
  border-radius: 28px;
  border: 1px solid rgba(125, 90, 68, .25);
  background: linear-gradient(135deg, rgba(255,255,255,.98), rgba(245, 241, 234,.96));
  box-shadow: 0 28px 70px rgba(74, 52, 42, .22);
}
.clinical-pdf-modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 999px;
  background: rgba(74, 52, 42, .10);
  color: #4A342A;
  font-size: 1.4rem;
  font-weight: 900;
  cursor: pointer;
}
.clinical-pdf-modal-head span {
  color: var(--primary-dark);
  font-size: .78rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.clinical-pdf-modal-head h3 {
  margin: 6px 42px 6px 0;
  color: #4A342A;
  font-size: clamp(1.35rem, 2.8vw, 2rem);
  line-height: 1.1;
}
.clinical-pdf-modal-head p {
  margin: 0 0 18px;
  color: var(--muted);
}
.clinical-pdf-complete-option,
.clinical-pdf-option-item {
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid rgba(74, 52, 42, .18);
  background: rgba(255,255,255,.82);
  border-radius: 18px;
  cursor: pointer;
}
.clinical-pdf-complete-option {
  padding: 16px;
  margin-bottom: 14px;
}
.clinical-pdf-complete-option strong,
.clinical-pdf-complete-option small {
  display: block;
}
.clinical-pdf-complete-option small {
  margin-top: 3px;
  color: var(--muted);
  line-height: 1.35;
}
.clinical-pdf-options-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.clinical-pdf-option-item {
  min-height: 50px;
  padding: 12px 14px;
  font-weight: 800;
  color: #4A342A;
}
.clinical-pdf-complete-option input,
.clinical-pdf-option-item input {
  width: 18px;
  height: 18px;
  accent-color: var(--primary);
}
.clinical-pdf-modal-note {
  margin-top: 14px;
  padding: 12px 14px;
  border: 1px dashed rgba(74, 52, 42, .32);
  border-radius: 16px;
  color: #4A342A;
  background: rgba(245, 241, 234, .65);
  line-height: 1.35;
}
.clinical-pdf-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 18px;
  flex-wrap: wrap;
}
@media (max-width: 620px) {
  .clinical-pdf-modal-backdrop { padding: 10px; align-items: end; }
  .clinical-pdf-modal-card { padding: 18px; border-radius: 24px 24px 0 0; max-height: 92vh; }
  .clinical-pdf-options-grid { grid-template-columns: 1fr; }
  .clinical-pdf-modal-actions { display: grid; grid-template-columns: 1fr; }
}

/* =========================================================
   PDF Historia clínica · hojas más limpias y compactas
   ========================================================= */
.clinical-pdf-document-organized .pdf-page {
  padding: 30px !important;
}
.clinical-pdf-document-organized .pdf-header-organized {
  display: flex;
  align-items: center;
  gap: 16px;
  background: linear-gradient(135deg, #4A342A, #7D5A44) !important;
  color: #FFFFFF !important;
}
.clinical-pdf-document-organized .pdf-header-organized h1,
.clinical-pdf-document-organized .pdf-header-organized p {
  color: #FFFFFF !important;
}
.clinical-pdf-document-organized .pdf-patient-hero-organized {
  margin-top: 16px;
  border: 1px solid #D7C9B8;
}
.clinical-pdf-document-organized .pdf-patient-data-grid-organized {
  grid-template-columns: repeat(4, 1fr) !important;
}
.clinical-pdf-document-organized .pdf-cover-summary-section {
  margin-top: 16px;
  border: 1px solid #D7C9B8;
  border-radius: 20px;
  background: #F5F1EA;
}
.clinical-pdf-document-organized .pdf-cover-summary-section p {
  margin: 10px 0 0;
  color: #4A342A;
  font-size: 14px;
  line-height: 1.45;
}
.clinical-pdf-document-organized .pdf-page-footer-only {
  min-height: 360px !important;
  display: flex;
  align-items: flex-end;
}
.clinical-pdf-document-organized .pdf-footer-final-page {
  width: 100%;
}
.clinical-pdf-document-organized .pdf-integral-section {
  min-height: auto !important;
}
.clinical-pdf-document-organized .pdf-integral-card-head h4 {
  font-size: 16px !important;
}
.clinical-pdf-document-organized .pdf-integral-info-grid {
  grid-template-columns: repeat(4, 1fr) !important;
}
.clinical-pdf-document-organized .pdf-integral-info-card.wide {
  grid-column: 1 / -1 !important;
}
.clinical-pdf-document-organized .pdf-consent-body-box p {
  max-height: 430px;
  overflow: hidden;
}

/* =========================================================
   YacoSpa - Caja + responsive multidispositivo reforzado
   ========================================================= */
.cash-main-panel {
  display: grid;
  gap: 18px;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}

.cash-module-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: end;
  border-bottom: 1px solid rgba(215, 201, 184, .72);
  padding-bottom: 16px;
}

.cash-module-head h3,
.cash-module-head p { margin-bottom: 6px; }

.cash-mode-tabs {
  display: inline-grid;
  grid-template-columns: repeat(2, minmax(150px, 1fr));
  gap: 8px;
  padding: 8px;
  border-radius: 18px;
  border: 1px solid rgba(215, 201, 184, .85);
  background: rgba(245, 241, 234, .86);
  max-width: 100%;
}

.cash-mode-btn {
  border: 1px solid rgba(215, 201, 184, .9);
  background: #FFFFFF;
  color: #4A342A;
  border-radius: 14px;
  padding: 12px 16px;
  font-weight: 900;
  cursor: pointer;
  transition: .18s ease;
  white-space: nowrap;
}

.cash-mode-btn.active,
.cash-mode-btn:hover {
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  border-color: transparent;
  color: #FFFFFF;
  box-shadow: 0 12px 28px rgba(125, 90, 68, .20);
}

.cash-mode-pane { width: 100%; min-width: 0; }
.cash-mode-pane[hidden] { display: none !important; }

.payment-cash-split {
  grid-template-columns: minmax(320px, 420px) minmax(0, 1fr);
  align-items: start;
}

.payment-form-compact,
.payment-portfolio-card,
.cash-expense-form,
.cash-expense-list-card {
  box-shadow: none;
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(245, 241, 234,.96));
}

.payment-form-grid,
.cash-expense-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  min-width: 0;
}

.cash-expense-layout {
  display: grid;
  grid-template-columns: minmax(320px, 430px) minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}

.cash-expense-form .primary-btn,
.payment-form-compact .primary-btn {
  min-height: 42px;
}

.cash-expense-row {
  grid-template-columns: minmax(0, 1fr) auto auto;
}

.cash-expense-row strong,
.cash-expense-row p { overflow-wrap: anywhere; }

.payment-actions-compact .payment-small-btn {
  max-width: 100%;
}

@media (min-width: 1280px) {
  .main { max-width: none; }
  .section.active { width: 100%; }
  .cash-main-panel,
  #odontogram .panel,
  #clinical .panel,
  #consents .panel,
  #appointments .panel,
  #patients .panel {
    max-width: 100%;
  }
}

@media (max-width: 1180px) {
  .cash-module-head,
  .payment-cash-split,
  .cash-expense-layout {
    grid-template-columns: 1fr;
  }

  .cash-mode-tabs {
    width: 100%;
  }

  #paymentPortfolioPanel .payment-card-layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 860px) {
  .cash-main-panel { padding: 16px; border-radius: 20px; }
  .cash-mode-tabs,
  .payment-form-grid,
  .cash-expense-grid {
    grid-template-columns: 1fr;
  }

  .cash-mode-btn {
    white-space: normal;
    min-height: 44px;
  }

  .cash-expense-row {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .cash-expense-row .danger-btn,
  .cash-expense-row button {
    width: 100%;
  }

  .payment-actions-compact {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 560px) {
  .panel { padding: 15px; border-radius: 18px; }
  .cash-module-head h3 { font-size: 1.12rem; }
  .payment-actions-compact,
  #paymentPortfolioPanel .payment-actions-compact {
    grid-template-columns: 1fr !important;
  }
  .payment-actions-compact > *,
  #paymentPortfolioPanel .payment-actions-compact > * {
    width: 100% !important;
  }
}

/* Refuerzo general para evitar elementos montados en cualquier dispositivo */
.section,
.panel,
.item,
.list,
.split,
.grid,
.form-panel,
.operation-card,
.operation-row,
.patient-card-v2,
.consent-card,
.appointment-card,
.odontogram-shell,
.odontogram-layout,
.payment-card {
  min-width: 0;
}

.section.active {
  overflow-x: clip;
}

.item-actions,
.consent-card-actions,
.appointment-actions,
.patient-actions-v2,
.specialist-actions-clean {
  flex-wrap: wrap;
  max-width: 100%;
}

.table-wrap,
.report-table-wrap,
.inventory-table-wrap,
.odontogram-scroll,
.saas-table-wrap {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

input,
select,
textarea,
button {
  max-width: 100%;
}

@media (max-width: 1024px) {
  .main {
    width: 100%;
    padding-left: 16px;
    padding-right: 16px;
  }
  .stats-grid,
  .inventory-summary-grid,
  .operation-card-grid,
  .operation-reports-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .main {
    padding-left: 10px;
    padding-right: 10px;
  }
  .stats-grid,
  .inventory-summary-grid,
  .operation-card-grid,
  .operation-reports-grid,
  .clinical-detail-grid,
  .patient-info-grid,
  .profile-grid {
    grid-template-columns: 1fr !important;
  }
}


/* =========================================================
   YacoSpa - Ajustes Caja: tarjetas ocultas, ingresos/egresos y limpieza visual
   ========================================================= */
.cash-module-head > div:first-child .saas-kicker:first-child {
  display: none !important;
}

.payment-portfolio-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  margin: 0 0 12px;
  border: 1px solid rgba(215, 201, 184, .75);
  border-radius: 16px;
  background: rgba(245, 241, 234, .82);
}

.payment-portfolio-counts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  color: #7D5A44;
  font-size: .88rem;
}

.payment-portfolio-counts span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 10px;
  border-radius: 999px;
  background: #FFFFFF;
  border: 1px solid rgba(215, 201, 184, .84);
}

.payment-toggle-paid-btn {
  min-height: 34px !important;
  padding: 8px 14px !important;
  border-radius: 12px !important;
  white-space: nowrap;
}

#paymentPortfolioPanel .payment-card-paid {
  border-color: rgba(125, 90, 68, .32);
  background: linear-gradient(180deg, #FFFFFF 0%, #F5F1EA 100%);
}

.cash-expense-summary-title {
  margin: 6px 0 10px;
  color: #4A342A;
  font-size: .82rem;
  font-weight: 950;
  letter-spacing: .04em;
  text-transform: uppercase;
}

#cashExpensesPane .cash-summary-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 1180px) {
  #cashExpensesPane .cash-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  .payment-portfolio-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .payment-toggle-paid-btn {
    width: 100% !important;
  }

  #cashExpensesPane .cash-summary-grid {
    grid-template-columns: 1fr;
  }
}

/* Soporte de pago POS de Caja */
.payment-pos-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 22px;
  background: rgba(74, 52, 42, .58);
  backdrop-filter: blur(10px);
}

.payment-pos-modal-card {
  width: min(620px, 100%);
  max-height: 94vh;
  overflow: auto;
  border-radius: 26px;
  background: #F5F1EA;
  box-shadow: 0 24px 70px rgba(74, 52, 42, .28);
  border: 1px solid rgba(215, 201, 184, .9);
  padding: 20px;
}

.payment-pos-modal-head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-start;
  margin-bottom: 16px;
}

.payment-pos-modal-head span {
  display: inline-block;
  margin-bottom: 4px;
  color: #4A342A;
  font-weight: 950;
  font-size: .76rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.payment-pos-modal-head h3 {
  margin: 0;
  color: #4A342A;
  font-size: 1.25rem;
}

.payment-pos-modal-head p {
  margin: 5px 0 0;
  color: #7D5A44;
  font-size: .9rem;
}

.payment-pos-modal-close {
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 50%;
  background: #FFFFFF;
  color: #7D5A44;
  font-size: 1.45rem;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(74, 52, 42, .1);
}

.payment-pos-preview-wrap {
  display: flex;
  justify-content: center;
  padding: 18px;
  border-radius: 22px;
  background: repeating-linear-gradient(45deg, #F5F1EA 0, #F5F1EA 10px, #F5F1EA 10px, #F5F1EA 20px);
  border: 1px solid rgba(215, 201, 184, .9);
}

.payment-pos-ticket {
  width: 80mm;
  max-width: 100%;
  margin: 0 auto;
  padding: 8mm 5mm;
  background: #FFFFFF;
  color: #4A342A;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 11px;
  line-height: 1.32;
  box-shadow: 0 14px 38px rgba(74, 52, 42, .18);
}

.payment-pos-header {
  text-align: center;
}

.payment-pos-header h1 {
  margin: 0 0 3px;
  color: #4A342A;
  font-size: 18px;
  font-weight: 900;
  letter-spacing: .02em;
  text-transform: uppercase;
}

.payment-pos-header p,
.payment-pos-section p,
.payment-pos-footer p,
.payment-pos-notes p {
  margin: 2px 0;
}

.payment-pos-divider {
  margin: 8px 0;
  border-top: 1px dashed #4A342A;
}

.payment-pos-meta div,
.payment-pos-row,
.payment-pos-line {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: flex-start;
}

.payment-pos-meta span,
.payment-pos-row span,
.payment-pos-line span {
  color: #4A342A;
}

.payment-pos-meta strong,
.payment-pos-row strong,
.payment-pos-line strong {
  color: #4A342A;
  text-align: right;
}

.payment-pos-section {
  margin: 6px 0;
}

.payment-pos-section-title {
  margin-bottom: 5px;
  color: #4A342A;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.payment-pos-concept {
  margin: 6px 0;
  padding: 5px 0;
  border-top: 1px dotted #7D5A44;
  border-bottom: 1px dotted #7D5A44;
  color: #4A342A;
  font-weight: 800;
}

.payment-pos-total {
  margin-top: 4px;
  padding-top: 5px;
  border-top: 1px solid #4A342A;
  font-size: 12px;
}

.payment-pos-summary {
  margin-top: 8px;
}

.payment-pos-footer {
  margin-top: 12px;
  text-align: center;
  font-size: 10px;
}

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

.payment-pos-print-sheet {
  display: none;
}

@media (max-width: 640px) {
  .payment-pos-modal-backdrop {
    padding: 8px;
    align-items: flex-end;
  }

  .payment-pos-modal-card {
    border-radius: 24px 24px 0 0;
    padding: 16px;
  }

  .payment-pos-preview-wrap {
    padding: 10px;
  }

  .payment-pos-modal-actions {
    display: grid;
    grid-template-columns: 1fr;
  }
}

@media print {
  body.payment-pos-printing {
    margin: 0 !important;
    padding: 0 !important;
    background: #FFFFFF !important;
  }

  body.payment-pos-printing > *:not(#paymentPosPrintSheet) {
    display: none !important;
  }

  body.payment-pos-printing #paymentPosPrintSheet {
    display: block !important;
    width: 80mm !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #FFFFFF !important;
  }

  body.payment-pos-printing .payment-pos-ticket {
    width: 80mm !important;
    max-width: 80mm !important;
    margin: 0 !important;
    padding: 4mm 4mm !important;
    border: 0 !important;
    box-shadow: none !important;
    color: #000000 !important;
    background: #FFFFFF !important;
    font-size: 10.5px !important;
  }
}


.rips-page{display:grid;gap:18px}.rips-hero-panel{display:flex;justify-content:space-between;gap:18px;align-items:flex-start;padding:24px}.rips-hero-panel h3{margin:4px 0 6px;font-size:28px}.rips-hero-panel p{margin:0;color:var(--muted);line-height:1.5}.rips-hero-note{min-width:260px;max-width:360px;border:1px solid var(--line);background:#F5F1EA;border-radius:16px;padding:14px;display:grid;gap:5px}.rips-hero-note strong{color:var(--ink)}.rips-hero-note span{color:var(--muted);font-size:13px;line-height:1.4}.rips-summary-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}.rips-warning-panel{display:flex;gap:10px;align-items:flex-start;background:#F5F1EA;border-color:#D7C9B8;color:#4A342A}.rips-warning-panel span{line-height:1.45}.rips-layout{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:start}.rips-form{display:grid;gap:14px}.rips-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.rips-form label,.rips-json-panel label{font-size:12px;font-weight:800;color:var(--ink);display:block}.rips-form input,.rips-form select,.rips-form textarea,.rips-json-panel select{width:100%;margin-top:6px;border:1px solid var(--line);border-radius:12px;background:#FFFFFF;padding:11px 12px;color:var(--ink)}.rips-ready-check{display:flex!important;gap:9px;align-items:flex-start;padding:12px;border:1px dashed var(--line);border-radius:12px;background:#F5F1EA}.rips-ready-check input{width:auto;margin:2px 0 0}.rips-service-picker{display:grid;gap:9px;max-height:280px;overflow:auto;padding:10px;border:1px solid var(--line);border-radius:14px;background:#F5F1EA}.rips-check-row{display:flex!important;gap:10px;align-items:flex-start;padding:11px;border:1px solid var(--line);border-radius:12px;background:#FFFFFF}.rips-check-row input{width:auto;margin-top:3px}.rips-check-row span{display:grid;gap:3px}.rips-check-row small{color:var(--muted);font-weight:600}.rips-json-panel{display:grid;gap:14px}.rips-json-status{border:1px solid var(--line);border-radius:14px;padding:13px;background:#F5F1EA;color:var(--muted);line-height:1.45}.rips-json-status.has-errors{background:#FEE4E2;border-color:#FECACA;color:#991B1B}.rips-json-preview{min-height:260px;max-height:520px;overflow:auto;background:#4A342A;color:#F5F1EA;border-radius:16px;padding:16px;font-size:12px;line-height:1.5;white-space:pre-wrap}.rips-list{display:grid;gap:10px}.rips-row{display:flex;justify-content:space-between;gap:14px;align-items:flex-start;border:1px solid var(--line);border-radius:16px;background:#FFFFFF;padding:14px}.rips-row-title{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.rips-row p{margin:6px 0 4px;color:var(--ink)}.rips-row small{color:var(--muted)}.rips-error-list{display:grid;gap:4px;margin-top:9px}.rips-error-list span{display:block;border-radius:10px;background:#FEE4E2;color:#991B1B;padding:6px 8px;font-size:12px}.badge.neutral{background:#F5F1EA;color:#7D5A44}.badge.danger{background:#FEE4E2;color:#991B1B}
@media (max-width: 1100px){.rips-layout,.rips-summary-grid{grid-template-columns:1fr 1fr}.rips-hero-panel{flex-direction:column}.rips-hero-note{max-width:100%;min-width:0}}@media (max-width: 760px){.rips-layout,.rips-summary-grid,.rips-form-grid{grid-template-columns:1fr}.rips-row{flex-direction:column}.rips-hero-panel h3{font-size:23px}}

/* =========================================================
   AJUSTE FINAL UI RESPONSIVE · Caja + buscadores + full width
   Corrige desprendimiento visual del buscador de paciente en Caja
   y refuerza la organización en escritorio, portátil, tablet y móvil.
   ========================================================= */
:root{
  --safe-page-max: 100%;
  --yaco-card-radius: 24px;
  --yaco-soft-border: rgba(215, 201, 184, .92);
  --yaco-soft-shadow: 0 18px 46px rgba(74, 52, 42, .07);
}

body{
  background:#F5F1EA!important;
}

.main,
.topbar,
.section.active{
  width:100%!important;
  max-width:100%!important;
}

.section.active{
  display:block!important;
  min-width:0!important;
  overflow:visible!important;
}

.panel,
.stat-card,
.item,
.patient-card-v2,
.specialist-card-clean,
.appointment-card,
.consent-card,
.payment-card,
.rips-row{
  background:#FFFFFF!important;
  border-color:var(--yaco-soft-border)!important;
  box-shadow:var(--yaco-soft-shadow)!important;
}

.panel,
.form-panel,
.list,
.split,
.form-grid,
.payment-form-grid,
.cash-expense-grid,
.rips-form-grid,
.consent-form-row,
.profile-grid,
.patient-info-grid-v2,
.clinical-detail-grid{
  min-width:0!important;
}

input,
select,
textarea{
  width:100%;
  min-width:0;
}

textarea{
  resize:vertical;
}

/* Caja: evita que el desplegable del paciente empuje o rompa el formulario */
.cash-main-panel,
.payment-cash-split,
.payment-form-compact{
  overflow:visible!important;
}

.payment-patient-search-shell{
  position:relative;
  z-index:30;
  display:block;
  width:100%;
  min-width:0;
}

.payment-patient-search-shell label{
  display:block!important;
  width:100%;
  margin:0;
}

#paymentPatientSearch{
  min-height:46px;
  border:1px solid rgba(74, 52, 42,.32)!important;
  background:#FFFFFF!important;
  box-shadow:0 8px 20px rgba(74, 52, 42,.06);
}

#paymentPatientSearch:focus{
  outline:none;
  border-color:#4A342A!important;
  box-shadow:0 0 0 4px rgba(74, 52, 42,.11), 0 8px 20px rgba(74, 52, 42,.08);
}

.payment-patient-results{
  position:absolute!important;
  left:0;
  right:0;
  top:calc(100% + 8px);
  z-index:80;
  max-height:min(330px, 48vh);
  overflow:auto!important;
  border:1px solid rgba(215, 201, 184, .95)!important;
  border-radius:18px!important;
  background:#FFFFFF!important;
  box-shadow:0 22px 55px rgba(74, 52, 42, .17)!important;
  margin:0!important;
  padding:8px!important;
}

.search-results-inline.hidden,
.search-results.hidden,
.payment-patient-results.hidden{
  display:none!important;
}

.search-result-item{
  width:100%;
  display:grid!important;
  grid-template-columns:1fr;
  gap:5px;
  padding:13px 14px!important;
  border:1px solid transparent!important;
  border-bottom:1px solid rgba(215, 201, 184, .88)!important;
  border-radius:14px!important;
  background:#FFFFFF!important;
  color:#4A342A!important;
  text-align:left!important;
  line-height:1.35;
  white-space:normal!important;
  overflow-wrap:anywhere;
  cursor:pointer;
  transition:background .16s ease, border-color .16s ease, transform .16s ease;
}

.search-result-item:last-child{
  border-bottom-color:transparent!important;
}

.search-result-item strong{
  display:block;
  color:#4A342A;
  font-size:.95rem;
  font-weight:900;
  letter-spacing:-.01em;
}

.search-result-item span{
  display:block;
  color:#7D5A44;
  font-size:.82rem;
  line-height:1.4;
}

.search-result-item:hover,
.search-result-item:focus-visible{
  background:#F5F1EA!important;
  border-color:rgba(74, 52, 42,.23)!important;
  transform:translateY(-1px);
  outline:none;
}

.search-result-empty{
  padding:14px;
  border-radius:14px;
  background:#F5F1EA;
  color:#7D5A44;
  font-size:.9rem;
  line-height:1.4;
}

/* Caja: tarjetas y acciones compactas sin montarse */
.payment-form-compact,
.payment-portfolio-card{
  border-radius:24px!important;
}

.payment-portfolio-card,
#paymentPortfolioPanel{
  min-width:0!important;
  overflow:hidden;
}

#paymentPortfolioPanel .payment-card,
.payment-card{
  width:100%;
  max-width:100%;
  overflow:hidden;
}

#paymentPortfolioPanel .payment-card-layout{
  min-width:0!important;
}

#paymentPortfolioPanel .payment-actions-compact,
.payment-actions-compact{
  display:grid!important;
  grid-template-columns:repeat(auto-fit, minmax(132px, 1fr));
  gap:8px!important;
  align-items:stretch;
}

#paymentPortfolioPanel .payment-actions-compact > *,
.payment-actions-compact > *{
  width:100%!important;
  min-width:0!important;
  white-space:normal!important;
}

/* Full width limpio en módulos principales */
#payments .cash-main-panel,
#odontogram .panel,
#clinical .panel,
#appointments .panel,
#patients .panel,
#consents .panel,
#rips .panel,
#inventory .panel,
#reports .panel,
#specialists .panel,
#messages .panel{
  width:100%!important;
  max-width:100%!important;
}

/* Responsive transversal */
@media (max-width:1180px){
  .split,
  .payment-cash-split,
  .cash-expense-layout,
  .consent-layout,
  .rips-layout,
  .appointment-workspace,
  .appointment-layout,
  .patients-search-layout{
    grid-template-columns:1fr!important;
  }

  .cash-module-head{
    grid-template-columns:1fr!important;
    align-items:stretch!important;
  }

  .cash-mode-tabs{
    width:100%!important;
    grid-template-columns:repeat(2, minmax(0, 1fr))!important;
  }
}

@media (max-width:860px){
  .panel{
    border-radius:20px!important;
    padding:clamp(15px, 3vw, 20px)!important;
  }

  .form-grid,
  .payment-form-grid,
  .cash-expense-grid,
  .rips-form-grid,
  .consent-form-row,
  .profile-grid,
  .patient-info-grid-v2,
  .stats-grid,
  .rips-summary-grid{
    grid-template-columns:1fr!important;
  }

  .cash-mode-tabs{
    grid-template-columns:1fr!important;
  }

  .topbar h2{
    font-size:clamp(24px, 7vw, 32px)!important;
  }
}

@media (max-width:640px){
  .main{
    padding:12px!important;
  }

  .payment-patient-results{
    position:static!important;
    max-height:260px;
    margin-top:8px!important;
    box-shadow:0 12px 32px rgba(74, 52, 42,.12)!important;
  }

  .payment-patient-search-shell{
    z-index:auto;
  }

  .cash-main-panel{
    border-radius:20px!important;
  }

  .payment-portfolio-toolbar,
  .cash-module-head,
  .panel-head,
  .item-head{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:12px!important;
    align-items:stretch!important;
  }

  .primary-btn,
  .secondary-btn,
  .danger-btn,
  .logout-btn,
  .cash-mode-btn{
    min-height:44px;
  }
}

@media (max-width:420px){
  .main{
    padding:10px!important;
  }

  .panel{
    border-radius:18px!important;
    padding:14px!important;
  }

  .search-result-item{
    padding:12px!important;
  }
}

/* =========================================================
   CORRECCIÓN FINAL · Caja full white y formatos por pantalla
   Evita texto vertical en cartera, resultados desprendidos y
   mantiene responsive en escritorio, portátil, tablet y móvil.
   ========================================================= */
#payments,
#payments * {
  box-sizing: border-box;
}

#payments .cash-main-panel {
  width: 100% !important;
  max-width: 100% !important;
  background: #FFFFFF !important;
  border: 1px solid rgba(215, 201, 184, .82) !important;
  overflow: visible !important;
}

#payments .cash-module-head,
#payments .cash-mode-pane,
#payments .payment-cash-split,
#payments .cash-expense-layout,
#payments .payment-form-compact,
#payments .payment-portfolio-card,
#payments .cash-expense-form,
#payments .cash-expense-list-card,
#payments .list,
#payments .item {
  min-width: 0 !important;
  max-width: 100% !important;
}

#payments .payment-cash-split {
  display: grid !important;
  grid-template-columns: minmax(320px, 420px) minmax(520px, 1fr) !important;
  gap: 24px !important;
  align-items: start !important;
  width: 100% !important;
}

#payments .payment-form-compact,
#payments .payment-portfolio-card,
#payments .cash-expense-form,
#payments .cash-expense-list-card {
  background: #FFFFFF !important;
  border: 1px solid rgba(215, 201, 184, .82) !important;
  border-radius: 24px !important;
}

#payments label,
#payments input,
#payments select,
#payments textarea,
#payments button {
  min-width: 0 !important;
}

#payments label {
  overflow-wrap: normal !important;
  word-break: normal !important;
}

#payments input,
#payments select,
#payments textarea {
  width: 100% !important;
}

/* Buscador de paciente en Caja: desplegable limpio, no desprendido */
#payments .payment-patient-search-shell {
  position: relative !important;
  z-index: 30 !important;
  width: 100% !important;
}

#paymentPatientResults.payment-patient-results,
#payments .payment-patient-results {
  position: absolute !important;
  top: calc(100% + 8px) !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 80 !important;
  width: 100% !important;
  max-height: 285px !important;
  overflow-y: auto !important;
  padding: 8px !important;
  border: 1px solid rgba(215, 201, 184, .92) !important;
  border-radius: 18px !important;
  background: #FFFFFF !important;
  box-shadow: 0 18px 44px rgba(74, 52, 42, .15) !important;
}

#payments .payment-patient-results.hidden,
#paymentPatientResults.hidden {
  display: none !important;
}

#payments .payment-patient-results .search-result-item,
#payments .payment-patient-results button,
#paymentPatientResults .search-result-item,
#paymentPatientResults button {
  width: 100% !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 4px !important;
  text-align: left !important;
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: break-word !important;
}

/* Cartera del paciente: nunca partir palabras letra por letra */
#paymentPortfolioPanel {
  overflow: hidden !important;
}

#paymentPortfolioPanel,
#paymentPortfolioPanel .list,
#paymentPortfolioPanel .payment-card,
#paymentPortfolioPanel .payment-card-layout,
#paymentPortfolioPanel .payment-card-info,
#paymentPortfolioPanel .payment-text-summary,
#paymentPortfolioPanel .payment-note {
  min-width: 0 !important;
  max-width: 100% !important;
}

#paymentPortfolioPanel .payment-card {
  width: 100% !important;
  padding: 18px !important;
  border-radius: 22px !important;
  background: #FFFFFF !important;
  overflow: hidden !important;
}

#paymentPortfolioPanel .payment-card,
#paymentPortfolioPanel .payment-card * {
  word-break: normal !important;
  overflow-wrap: break-word !important;
  hyphens: none !important;
}

#paymentPortfolioPanel .payment-card-layout {
  display: grid !important;
  grid-template-columns: minmax(280px, 1fr) minmax(240px, 340px) !important;
  gap: 20px !important;
  align-items: start !important;
  width: 100% !important;
}

#paymentPortfolioPanel .payment-card-info {
  min-width: 280px !important;
  width: 100% !important;
}

#paymentPortfolioPanel .payment-card-info h4,
#paymentPortfolioPanel .payment-text-summary,
#paymentPortfolioPanel .payment-text-summary p,
#paymentPortfolioPanel .payment-note,
#paymentPortfolioPanel .payment-note span,
#paymentPortfolioPanel .payment-abono-detail,
#paymentPortfolioPanel .payment-note-other span {
  display: block !important;
  max-width: 100% !important;
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: break-word !important;
  line-height: 1.35 !important;
}

#paymentPortfolioPanel .payment-actions-compact {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
  width: 100% !important;
  max-width: 340px !important;
  min-width: 0 !important;
  justify-self: end !important;
  align-self: start !important;
}

#paymentPortfolioPanel .payment-account-status,
#paymentPortfolioPanel .payment-actions-compact .payment-small-btn {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  min-height: 38px !important;
  height: auto !important;
  padding: 10px 12px !important;
  white-space: normal !important;
  text-align: center !important;
  line-height: 1.15 !important;
}

#paymentPortfolioPanel .payment-portfolio-toolbar {
  width: 100% !important;
  max-width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
  background: #F5F1EA !important;
  border: 1px solid rgba(215, 201, 184, .82) !important;
  border-radius: 18px !important;
  padding: 12px !important;
  margin-bottom: 18px !important;
}

#paymentPortfolioPanel .payment-portfolio-counts {
  display: flex !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
  min-width: 0 !important;
}

#paymentPortfolioPanel .payment-portfolio-counts span,
#paymentPortfolioPanel .payment-toggle-paid-btn {
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: break-word !important;
}

/* Gastos operativos: filas fluidas */
#payments .cash-expense-row {
  display: grid !important;
  grid-template-columns: minmax(240px, 1fr) auto auto !important;
  gap: 10px !important;
  align-items: center !important;
}

#payments .cash-expense-row strong,
#payments .cash-expense-row p {
  word-break: normal !important;
  overflow-wrap: break-word !important;
}

@media (max-width: 1360px) {
  #payments .payment-cash-split {
    grid-template-columns: minmax(300px, 380px) minmax(0, 1fr) !important;
    gap: 20px !important;
  }

  #paymentPortfolioPanel .payment-card-layout {
    grid-template-columns: minmax(260px, 1fr) minmax(220px, 320px) !important;
  }
}

@media (max-width: 1150px) {
  #payments .cash-module-head,
  #payments .payment-cash-split,
  #payments .cash-expense-layout {
    grid-template-columns: 1fr !important;
  }

  #payments .cash-mode-tabs {
    width: 100% !important;
  }

  #paymentPortfolioPanel .payment-card-layout {
    grid-template-columns: 1fr !important;
  }

  #paymentPortfolioPanel .payment-card-info {
    min-width: 0 !important;
  }

  #paymentPortfolioPanel .payment-actions-compact {
    justify-self: stretch !important;
    max-width: 100% !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 820px) {
  #payments .cash-main-panel {
    padding: 16px !important;
    border-radius: 20px !important;
  }

  #payments .cash-mode-tabs,
  #payments .payment-form-grid,
  #payments .cash-expense-grid,
  #payments .cash-expense-row {
    grid-template-columns: 1fr !important;
  }

  #paymentPortfolioPanel .payment-portfolio-toolbar {
    display: grid !important;
    grid-template-columns: 1fr !important;
    align-items: stretch !important;
  }

  #paymentPortfolioPanel .payment-toggle-paid-btn {
    width: 100% !important;
  }

  #paymentPortfolioPanel .payment-actions-compact {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 560px) {
  #payments .panel,
  #payments .payment-form-compact,
  #payments .payment-portfolio-card,
  #payments .cash-expense-form,
  #payments .cash-expense-list-card {
    padding: 14px !important;
    border-radius: 18px !important;
  }

  #payments .cash-mode-tabs,
  #paymentPortfolioPanel .payment-actions-compact,
  #paymentPortfolioPanel .payment-portfolio-counts {
    grid-template-columns: 1fr !important;
    display: grid !important;
  }

  #paymentPatientResults.payment-patient-results,
  #payments .payment-patient-results {
    position: static !important;
    margin-top: 8px !important;
    box-shadow: 0 12px 28px rgba(74, 52, 42, .13) !important;
  }

  #paymentPortfolioPanel .payment-card {
    padding: 14px !important;
  }
}

/* =========================================================
   IMPORTACIÓN PACIENTES · Excel / CSV flexible y responsive
   ========================================================= */
.patient-bulk-panel {
  width: 100% !important;
  background: #FFFFFF !important;
  overflow: visible !important;
}

.patient-bulk-head {
  gap: 18px !important;
  align-items: flex-start !important;
}

.bulk-template-actions,
.bulk-actions {
  display: flex !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: flex-end !important;
}

.bulk-import-grid-advanced {
  grid-template-columns: minmax(280px, .75fr) minmax(360px, 1.25fr) !important;
  align-items: stretch !important;
}

.bulk-import-grid-advanced label,
.bulk-import-options label,
.bulk-map-grid label {
  min-width: 0 !important;
}

.bulk-import-grid-advanced input[type="file"],
.bulk-import-grid-advanced textarea,
.bulk-import-options select,
.bulk-map-grid input {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  background: #FFFFFF !important;
}

.bulk-import-grid-advanced small {
  display: block !important;
  margin-top: 8px !important;
  color: var(--muted) !important;
  line-height: 1.35 !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
}

.bulk-import-options {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(150px, 1fr)) !important;
  gap: 12px !important;
  margin-top: 14px !important;
  padding: 14px !important;
  border: 1px solid rgba(74, 52, 42, .14) !important;
  border-radius: 20px !important;
  background: rgba(245, 241, 234, .72) !important;
}

.bulk-manual-map {
  margin-top: 14px !important;
  padding: 14px 16px !important;
  border: 1px dashed rgba(74, 52, 42, .25) !important;
  border-radius: 20px !important;
  background: #FFFFFF !important;
}

.bulk-manual-map summary {
  cursor: pointer !important;
  font-weight: 900 !important;
  color: var(--primary-dark) !important;
}

.bulk-manual-map p {
  margin: 10px 0 12px !important;
  color: var(--muted) !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
}

.bulk-map-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(150px, 1fr)) !important;
  gap: 12px !important;
}

.bulk-preview {
  margin-top: 14px !important;
  border: 1px solid rgba(74, 52, 42, .16) !important;
  border-radius: 22px !important;
  background: #FFFFFF !important;
  padding: 14px !important;
  overflow: hidden !important;
}

.bulk-preview-head {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
  margin-bottom: 8px !important;
}

.bulk-preview-head strong {
  color: var(--primary-dark) !important;
  font-size: 1rem !important;
}

.bulk-preview-head span,
.bulk-preview-map {
  color: var(--muted) !important;
}

.bulk-preview-map {
  margin: 0 0 10px !important;
  line-height: 1.35 !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
}

.bulk-preview-table-wrap {
  width: 100% !important;
  overflow-x: auto !important;
  border: 1px solid rgba(74, 52, 42, .13) !important;
  border-radius: 16px !important;
}

.bulk-preview-table {
  width: 100% !important;
  min-width: 780px !important;
  border-collapse: collapse !important;
  background: #FFFFFF !important;
}

.bulk-preview-table th,
.bulk-preview-table td {
  padding: 10px 12px !important;
  text-align: left !important;
  border-bottom: 1px solid rgba(74, 52, 42, .09) !important;
  white-space: nowrap !important;
  word-break: normal !important;
}

.bulk-preview-table th {
  background: rgba(245, 241, 234, .8) !important;
  color: var(--primary-dark) !important;
  font-weight: 900 !important;
}

.bulk-warnings {
  margin-top: 12px !important;
  padding: 12px 14px !important;
  border-radius: 16px !important;
  background: #F5F1EA !important;
  border: 1px solid rgba(125, 90, 68, .26) !important;
  color: #4A342A !important;
}

.bulk-warnings ul {
  margin: 8px 0 0 18px !important;
  padding: 0 !important;
}

.bulk-warnings li {
  margin: 4px 0 !important;
  overflow-wrap: anywhere !important;
}

@media (max-width: 1280px) {
  .bulk-import-options {
    grid-template-columns: repeat(3, minmax(160px, 1fr)) !important;
  }
  .bulk-map-grid {
    grid-template-columns: repeat(2, minmax(160px, 1fr)) !important;
  }
}

@media (max-width: 900px) {
  .patient-bulk-head,
  .bulk-template-actions,
  .bulk-actions {
    justify-content: flex-start !important;
  }
  .bulk-import-grid-advanced,
  .bulk-import-options,
  .bulk-map-grid {
    grid-template-columns: 1fr !important;
  }
  .bulk-template-actions button,
  .bulk-actions button {
    width: 100% !important;
  }
}

@media (max-width: 520px) {
  .patient-bulk-panel {
    padding: 16px !important;
    border-radius: 20px !important;
  }
  .bulk-import-options,
  .bulk-manual-map,
  .bulk-preview {
    padding: 12px !important;
    border-radius: 16px !important;
  }
  .bulk-preview-table {
    min-width: 680px !important;
  }
}

/* ===== Ajuste fino Caja / cartera del paciente ===== */
#paymentPortfolioPanel .payment-card-layout {
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
  align-items: stretch !important;
}

#paymentPortfolioPanel .payment-card-info {
  min-width: 0 !important;
  width: 100% !important;
}

#paymentPortfolioPanel .payment-card-info h4 {
  margin-bottom: 8px !important;
}

#paymentPortfolioPanel .payment-actions-compact,
.payment-actions-compact {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  justify-content: flex-start !important;
  align-items: center !important;
}

#paymentPortfolioPanel .payment-actions-compact > *,
.payment-actions-compact > * {
  flex: 0 1 auto !important;
}

#paymentPortfolioPanel .payment-account-status {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 120px !important;
  width: auto !important;
  padding: 10px 14px !important;
  white-space: nowrap !important;
}

#paymentPortfolioPanel .payment-actions-compact .payment-small-btn,
.payment-actions-compact .payment-small-btn {
  width: auto !important;
  min-width: 138px !important;
  max-width: 100% !important;
  padding: 10px 14px !important;
  white-space: nowrap !important;
  border-radius: 14px !important;
}

#paymentPortfolioPanel .payment-note {
  margin-top: 12px !important;
}

@media (max-width: 980px) {
  #paymentPortfolioPanel .payment-actions-compact,
  .payment-actions-compact {
    gap: 8px !important;
  }

  #paymentPortfolioPanel .payment-actions-compact .payment-small-btn,
  .payment-actions-compact .payment-small-btn {
    flex: 1 1 calc(50% - 8px) !important;
    min-width: 180px !important;
    white-space: normal !important;
  }

  #paymentPortfolioPanel .payment-account-status {
    flex: 1 1 180px !important;
  }
}

@media (max-width: 640px) {
  #paymentPortfolioPanel .payment-actions-compact,
  .payment-actions-compact {
    display: grid !important;
    grid-template-columns: 1fr !important;
    width: 100% !important;
  }

  #paymentPortfolioPanel .payment-actions-compact .payment-small-btn,
  .payment-actions-compact .payment-small-btn,
  #paymentPortfolioPanel .payment-account-status {
    width: 100% !important;
    min-width: 0 !important;
    flex: initial !important;
    white-space: normal !important;
  }
}

/* ===== Caja: pagos adicionales por tratamiento ===== */
#paymentPortfolioPanel .payment-extra-btn {
  border-color: rgba(125, 90, 68, .28) !important;
  background: #F5F1EA !important;
  color: #4A342A !important;
  font-weight: 900 !important;
}

#paymentPortfolioPanel .payment-extra-list {
  margin-top: 10px !important;
  padding: 10px !important;
  border-radius: 16px !important;
  background: #F5F1EA !important;
  border: 1px solid rgba(178, 150, 125, .45) !important;
}

#paymentPortfolioPanel .payment-extra-title {
  font-size: .78rem !important;
  font-weight: 900 !important;
  color: #4A342A !important;
  margin-bottom: 8px !important;
  text-transform: uppercase !important;
  letter-spacing: .03em !important;
}

#paymentPortfolioPanel .payment-extra-row {
  display: grid !important;
  grid-template-columns: auto auto minmax(0, 1fr) !important;
  gap: 8px !important;
  align-items: center !important;
  padding: 7px 8px !important;
  border-radius: 12px !important;
  background: #FFFFFF !important;
  border: 1px solid rgba(178, 150, 125, .25) !important;
  margin-top: 6px !important;
}

#paymentPortfolioPanel .payment-extra-amount {
  font-weight: 900 !important;
  color: #4A342A !important;
  white-space: nowrap !important;
}

@media (max-width: 640px) {
  #paymentPortfolioPanel .payment-extra-row {
    grid-template-columns: auto minmax(0, 1fr) !important;
  }
  #paymentPortfolioPanel .payment-extra-row .payment-abono-detail {
    grid-column: 1 / -1 !important;
  }
}

/* ===== Caja: selector real de tratamientos y modal de pagos adicionales ===== */
.payment-custom-treatment-input {
  margin-top: 8px !important;
}

#paymentTreatment,
#paymentAdditionalConcept {
  cursor: pointer !important;
  appearance: auto !important;
  background-color: #FFFFFF !important;
}

.payment-extra-modal.hidden {
  display: none !important;
}

.payment-extra-modal {
  position: fixed !important;
  inset: 0 !important;
  z-index: 9999 !important;
  display: grid !important;
  place-items: center !important;
  padding: 24px !important;
}

.payment-extra-modal-backdrop {
  position: absolute !important;
  inset: 0 !important;
  background: rgba(74, 52, 42, .42) !important;
  backdrop-filter: blur(4px) !important;
}

.payment-extra-dialog {
  position: relative !important;
  width: min(760px, 100%) !important;
  max-height: min(86vh, 760px) !important;
  overflow: auto !important;
  background: #FFFFFF !important;
  border: 1px solid rgba(215, 201, 184, .95) !important;
  border-radius: 26px !important;
  box-shadow: 0 28px 90px rgba(74, 52, 42, .24) !important;
  padding: 24px !important;
}

.payment-extra-head {
  display: flex !important;
  justify-content: space-between !important;
  align-items: flex-start !important;
  gap: 16px !important;
  margin-bottom: 18px !important;
  padding-bottom: 16px !important;
  border-bottom: 1px solid rgba(215, 201, 184, .75) !important;
}

.payment-extra-head h3 {
  margin: 4px 0 6px !important;
}

.payment-extra-head p {
  margin: 0 !important;
  color: #7D5A44 !important;
  line-height: 1.35 !important;
}

.payment-extra-close {
  min-width: 42px !important;
  width: 42px !important;
  height: 42px !important;
  padding: 0 !important;
  border-radius: 14px !important;
  font-size: 22px !important;
}

.payment-extra-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 14px !important;
  margin-bottom: 14px !important;
}

.payment-extra-grid label,
.payment-extra-dialog label {
  min-width: 0 !important;
}

.payment-additional-custom-wrap {
  grid-column: 1 / -1 !important;
}

.payment-extra-help {
  margin-top: 12px !important;
  padding: 12px 14px !important;
  border: 1px dashed rgba(74, 52, 42, .38) !important;
  border-radius: 16px !important;
  background: #F5F1EA !important;
  color: #4A342A !important;
  line-height: 1.4 !important;
}

.payment-extra-help span {
  color: #7D5A44 !important;
}

.payment-extra-actions {
  margin-top: 18px !important;
  justify-content: flex-end !important;
}

body.modal-open {
  overflow: hidden !important;
}

@media (max-width: 720px) {
  .payment-extra-modal {
    padding: 14px !important;
    place-items: end center !important;
  }

  .payment-extra-dialog {
    max-height: 90vh !important;
    border-radius: 22px 22px 0 0 !important;
    padding: 18px !important;
  }

  .payment-extra-head,
  .payment-extra-grid,
  .payment-extra-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
  }

  .payment-extra-close {
    justify-self: end !important;
  }

  .payment-extra-actions button {
    width: 100% !important;
  }
}

/* ===== Caja: especialista primero y especialidad automática ===== */
.payment-form-grid-specialist-first {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  align-items: start !important;
}

.payment-auto-specialty-hint {
  display: block !important;
  margin-top: 6px !important;
  font-size: .78rem !important;
  line-height: 1.35 !important;
  color: #7D5A44 !important;
  font-weight: 700 !important;
}

#paymentSpecialist,
#paymentTreatment {
  cursor: pointer !important;
  appearance: auto !important;
  background-color: #FFFFFF !important;
}

@media (max-width: 820px) {
  .payment-form-grid-specialist-first {
    grid-template-columns: 1fr !important;
  }
}

/* ===== Caja: selector bonito de especialista con especialidad primero ===== */
.payment-native-specialist-select {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.cash-specialist-select {
  position: relative !important;
  width: 100% !important;
  margin-top: 0 !important;
  z-index: 25 !important;
}

.cash-specialist-select-button {
  width: 100% !important;
  min-height: 48px !important;
  border: 1px solid rgba(215, 201, 184, .95) !important;
  border-radius: 16px !important;
  background: linear-gradient(180deg, #FFFFFF 0%, #F5F1EA 100%) !important;
  color: var(--dark, #4A342A) !important;
  padding: 10px 13px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  text-align: left !important;
  box-shadow: 0 10px 26px rgba(74, 52, 42, .06) !important;
  cursor: pointer !important;
}

.cash-specialist-select.open .cash-specialist-select-button,
.cash-specialist-select-button:focus-visible {
  border-color: #7D5A44 !important;
  outline: 3px solid rgba(125, 90, 68, .15) !important;
  box-shadow: 0 14px 34px rgba(125, 90, 68, .14) !important;
}

.cash-specialist-placeholder {
  color: #7D5A44 !important;
  font-weight: 800 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.cash-specialist-selected {
  min-width: 0 !important;
  display: grid !important;
  gap: 2px !important;
}

.cash-specialist-selected strong {
  display: block !important;
  color: #4A342A !important;
  font-size: .78rem !important;
  line-height: 1.1 !important;
  text-transform: uppercase !important;
  letter-spacing: .03em !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.cash-specialist-selected small {
  display: block !important;
  color: #4A342A !important;
  font-size: .92rem !important;
  line-height: 1.15 !important;
  font-weight: 900 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.cash-specialist-chevron {
  flex: 0 0 auto !important;
  width: 28px !important;
  height: 28px !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #F5F1EA !important;
  color: #4A342A !important;
  font-size: 1rem !important;
  font-weight: 900 !important;
}

.cash-specialist-select.open .cash-specialist-chevron {
  transform: rotate(180deg) !important;
}

.cash-specialist-select-menu {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  top: calc(100% + 8px) !important;
  max-height: 280px !important;
  overflow: auto !important;
  padding: 8px !important;
  border-radius: 18px !important;
  border: 1px solid rgba(215, 201, 184, .95) !important;
  background: rgba(255, 255, 255, .98) !important;
  box-shadow: 0 22px 55px rgba(74, 52, 42, .18) !important;
  z-index: 9999 !important;
}

.cash-specialist-option {
  width: 100% !important;
  border: 0 !important;
  border-radius: 14px !important;
  background: transparent !important;
  padding: 10px 12px !important;
  display: grid !important;
  gap: 3px !important;
  text-align: left !important;
  cursor: pointer !important;
}

.cash-specialist-option:hover,
.cash-specialist-option.active {
  background: linear-gradient(135deg, #F5F1EA 0%, #F5F1EA 100%) !important;
}

.cash-specialist-option-area {
  display: inline-flex !important;
  width: fit-content !important;
  max-width: 100% !important;
  color: #4A342A !important;
  background: #D7C9B8 !important;
  border: 1px solid rgba(125, 90, 68, .24) !important;
  border-radius: 999px !important;
  padding: 3px 9px !important;
  font-size: .72rem !important;
  line-height: 1.1 !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  letter-spacing: .03em !important;
}

.cash-specialist-option-name {
  color: #4A342A !important;
  font-size: .95rem !important;
  font-weight: 900 !important;
  line-height: 1.2 !important;
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: break-word !important;
}

.cash-specialist-empty {
  padding: 12px !important;
  color: #7D5A44 !important;
  font-weight: 800 !important;
}

.payment-form-grid-specialist-first {
  overflow: visible !important;
}

.payment-form-compact,
.payment-cash-split,
.cash-main-panel,
#cashPaymentsPane {
  overflow: visible !important;
}

@media (max-width: 640px) {
  .cash-specialist-select-menu {
    position: fixed !important;
    left: 14px !important;
    right: 14px !important;
    top: auto !important;
    bottom: 18px !important;
    max-height: 55vh !important;
  }
}

/* ===== Ajuste visual fino del selector de especialista ===== */
.cash-specialist-select {
  z-index: 18 !important;
}

.cash-specialist-select-button {
  min-height: 44px !important;
  padding: 8px 12px !important;
  border-radius: 14px !important;
  border: 1px solid rgba(215, 201, 184, .95) !important;
  background: #FFFFFF !important;
  box-shadow: 0 6px 18px rgba(74, 52, 42, .05) !important;
}

.cash-specialist-select.open .cash-specialist-select-button,
.cash-specialist-select-button:focus-visible {
  border-color: #7D5A44 !important;
  outline: 3px solid rgba(125, 90, 68, .12) !important;
  box-shadow: 0 10px 26px rgba(74, 52, 42, .09) !important;
}

.cash-specialist-placeholder {
  font-size: .94rem !important;
  font-weight: 700 !important;
  color: #7D5A44 !important;
}

.cash-specialist-selected {
  min-width: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: nowrap !important;
}

.cash-specialist-selected strong {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  padding: 4px 8px !important;
  border-radius: 999px !important;
  background: #F5F1EA !important;
  border: 1px solid rgba(125, 90, 68, .25) !important;
  color: #4A342A !important;
  font-size: .67rem !important;
  line-height: 1 !important;
  letter-spacing: .03em !important;
  white-space: nowrap !important;
  flex: 0 0 auto !important;
}

.cash-specialist-selected small {
  display: block !important;
  margin: 0 !important;
  min-width: 0 !important;
  font-size: .9rem !important;
  font-weight: 800 !important;
  line-height: 1.15 !important;
  color: #4A342A !important;
}

.cash-specialist-chevron {
  width: 24px !important;
  height: 24px !important;
  background: #F5F1EA !important;
  color: #4A342A !important;
  font-size: .92rem !important;
}

.cash-specialist-select-menu {
  top: calc(100% + 6px) !important;
  max-height: 220px !important;
  padding: 6px !important;
  border-radius: 14px !important;
  border: 1px solid rgba(215, 201, 184, .95) !important;
  background: #FFFFFF !important;
  box-shadow: 0 16px 34px rgba(74, 52, 42, .12) !important;
  scrollbar-width: thin !important;
}

.cash-specialist-option {
  padding: 8px 10px !important;
  border-radius: 12px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  min-height: 42px !important;
}

.cash-specialist-option:hover,
.cash-specialist-option.active {
  background: #F5F1EA !important;
}

.cash-specialist-option.active {
  border: 1px solid rgba(125, 90, 68, .18) !important;
}

.cash-specialist-option-area {
  margin: 0 !important;
  flex: 0 0 auto !important;
  padding: 4px 8px !important;
  font-size: .67rem !important;
  background: #F5F1EA !important;
  border: 1px solid rgba(125, 90, 68, .22) !important;
  color: #4A342A !important;
}

.cash-specialist-option-name {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  font-size: .9rem !important;
  line-height: 1.15 !important;
  font-weight: 800 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

@media (max-width: 640px) {
  .cash-specialist-select-button {
    min-height: 42px !important;
    padding: 8px 10px !important;
  }

  .cash-specialist-selected {
    gap: 6px !important;
  }

  .cash-specialist-selected strong {
    max-width: 46% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .cash-specialist-selected small {
    font-size: .86rem !important;
  }

  .cash-specialist-select-menu {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: auto !important;
    max-height: 240px !important;
  }

  .cash-specialist-option {
    min-height: 40px !important;
  }
}

/* ===== Ajuste final: especialista como input normal ===== */
#paymentForm .payment-form-grid-specialist-first {
  align-items: end !important;
}

#paymentForm .payment-form-grid-specialist-first label {
  min-width: 0 !important;
}

#paymentSpecialist.payment-native-specialist-select {
  position: static !important;
  width: 100% !important;
  height: 50px !important;
  min-height: 50px !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  appearance: auto !important;
  -webkit-appearance: menulist !important;
  background: #FFFFFF !important;
  border: 1px solid rgba(215, 201, 184, .95) !important;
  border-radius: 16px !important;
  padding: 0 44px 0 14px !important;
  color: #4A342A !important;
  font-size: .96rem !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  box-shadow: none !important;
}

#paymentSpecialist.payment-native-specialist-select:focus {
  border-color: #7D5A44 !important;
  outline: 3px solid rgba(125, 90, 68, .12) !important;
  box-shadow: none !important;
}

#paymentSpecialistPicker,
.cash-specialist-select {
  display: none !important;
}

@media (max-width: 640px) {
  #paymentSpecialist.payment-native-specialist-select {
    height: 48px !important;
    min-height: 48px !important;
    font-size: .94rem !important;
  }
}

/* ===== Caja: items simétricos y del mismo tamaño ===== */
#paymentForm .payment-form-grid-specialist-first {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 14px !important;
  align-items: start !important;
}

#paymentForm .payment-form-grid-specialist-first > label,
#paymentForm .payment-patient-search-shell label,
#paymentForm > label {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  min-width: 0 !important;
  width: 100% !important;
}

#paymentForm #paymentPatientSearch,
#paymentForm #paymentExisting,
#paymentForm #paymentSpecialist,
#paymentForm #paymentTreatment,
#paymentForm #paymentTotal,
#paymentForm #paymentPaid,
#paymentForm #paymentTreatmentCustom {
  width: 100% !important;
  height: 50px !important;
  min-height: 50px !important;
  max-height: 50px !important;
  padding: 0 14px !important;
  border-radius: 16px !important;
  box-sizing: border-box !important;
  font-size: .96rem !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
}

#paymentForm #paymentSpecialist,
#paymentForm #paymentTreatment,
#paymentForm #paymentExisting {
  padding-right: 42px !important;
}

#paymentForm #paymentPatientSearch::placeholder,
#paymentForm #paymentTreatmentCustom::placeholder,
#paymentForm #paymentTotal::placeholder,
#paymentForm #paymentPaid::placeholder {
  font-weight: 600 !important;
}

#paymentForm .balance-box {
  min-height: 68px !important;
  display: flex !important;
  align-items: center !important;
}

@media (max-width: 820px) {
  #paymentForm .payment-form-grid-specialist-first {
    grid-template-columns: 1fr !important;
  }
}

/* =========================================================
   Revisión visual global · organización general del proyecto
   ========================================================= */

:root {
  --yaco-ui-border: rgba(74, 52, 42, .14);
  --yaco-ui-border-strong: rgba(74, 52, 42, .22);
  --yaco-ui-shadow: 0 16px 38px rgba(74, 52, 42, .07);
  --yaco-ui-shadow-soft: 0 10px 26px rgba(74, 52, 42, .05);
  --yaco-ui-radius-xl: 26px;
  --yaco-ui-radius-lg: 20px;
  --yaco-ui-radius-md: 16px;
}

/* Paneles y tarjetas generales */
.panel,
.form-panel,
.list,
.item,
.patient-bulk-panel,
.laboratory-panel,
.internal-chat-panel,
.report-charts-panel,
.operation-module-card,
.payment-portfolio-card,
.cash-expense-form,
.cash-expense-list-card,
.payment-form-compact,
.rips-main-panel,
.rips-row,
.report-card,
.dashboard-appointments-accordion,
.stat-card {
  border-radius: var(--yaco-ui-radius-lg) !important;
  border: 1px solid var(--yaco-ui-border) !important;
  box-shadow: var(--yaco-ui-shadow-soft) !important;
}

.panel,
.form-panel,
.payment-form-compact,
.payment-portfolio-card,
.cash-expense-form,
.cash-expense-list-card,
.patient-bulk-panel,
.laboratory-panel,
.internal-chat-panel,
.report-charts-panel,
.operation-module-card,
.rips-main-panel,
.report-card {
  background: linear-gradient(180deg, #FFFFFF 0%, #F5F1EA 100%) !important;
}

/* Formularios más uniformes */
label {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

input,
select,
textarea,
button,
.primary-btn,
.secondary-btn {
  border-radius: 16px !important;
}

input,
select,
textarea {
  border: 1px solid rgba(215, 201, 184, .95) !important;
  background: #FFFFFF !important;
  box-shadow: none !important;
}

input:focus,
select:focus,
textarea:focus {
  border-color: #7D5A44 !important;
  outline: 3px solid rgba(125, 90, 68, .12) !important;
  box-shadow: none !important;
}

.primary-btn,
.secondary-btn,
button[type="submit"] {
  min-height: 46px !important;
}

/* Títulos y espacios más consistentes */
section > h2,
.panel h3,
.form-panel h3,
.operation-hub-head h3,
.reports-section-title h4 {
  letter-spacing: -.02em !important;
}

.panel h3,
.form-panel h3,
.compact-head h3,
.operation-hub-head h3 {
  margin-bottom: 10px !important;
}

/* ===== Centro de operación / accesos rápidos ===== */
.operation-hub {
  margin-top: 24px !important;
  padding: 24px !important;
  border-radius: 32px !important;
  border: 1px solid var(--yaco-ui-border-strong) !important;
  background:
    radial-gradient(circle at top right, rgba(178, 150, 125, .16), transparent 34%),
    linear-gradient(180deg, #FFFFFF 0%, #F5F1EA 100%) !important;
  box-shadow: 0 24px 54px rgba(74, 52, 42, .08) !important;
}

.operation-hub-head {
  max-width: 860px !important;
  margin-bottom: 18px !important;
}

.operation-hub-head .saas-kicker {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 32px !important;
  padding: 6px 12px !important;
  border-radius: 999px !important;
  background: #F5F1EA !important;
  color: #4A342A !important;
  border: 1px solid rgba(125, 90, 68, .16) !important;
}

.operation-hub-head h3 {
  font-size: clamp(1.8rem, 3vw, 3rem) !important;
  line-height: 1.05 !important;
  color: #4A342A !important;
  max-width: 780px !important;
  margin: 10px 0 10px !important;
}

.operation-hub-head p {
  color: #7D5A44 !important;
  font-size: 1rem !important;
  margin: 0 0 6px !important;
}

.operation-card-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 16px !important;
}

.operation-card {
  position: relative !important;
  display: grid !important;
  grid-template-columns: 56px minmax(0, 1fr) !important;
  grid-template-rows: auto auto !important;
  gap: 4px 14px !important;
  min-height: 104px !important;
  padding: 18px 18px 18px 16px !important;
  border-radius: 24px !important;
  border: 1px solid rgba(215, 201, 184, .92) !important;
  background: linear-gradient(180deg, #FFFFFF 0%, #F5F1EA 100%) !important;
  box-shadow: 0 14px 32px rgba(74, 52, 42, .06) !important;
  align-items: center !important;
}

.operation-card::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  top: 14px !important;
  bottom: 14px !important;
  width: 5px !important;
  border-radius: 999px !important;
  background: linear-gradient(180deg, #7D5A44 0%, #4A342A 100%) !important;
}

.operation-card:hover {
  transform: translateY(-3px) !important;
  border-color: rgba(125, 90, 68, .34) !important;
  box-shadow: 0 18px 40px rgba(74, 52, 42, .10) !important;
}

.operation-icon {
  width: 48px !important;
  height: 48px !important;
  grid-row: 1 / span 2 !important;
  border-radius: 16px !important;
  border: 1px solid rgba(125, 90, 68, .16) !important;
  background: linear-gradient(135deg, #7D5A44 0%, #4A342A 100%) !important;
  color: #FFFFFF !important;
  display: grid !important;
  place-items: center !important;
  box-shadow: 0 10px 24px rgba(74, 52, 42, .20) !important;
}

.operation-icon svg {
  width: 23px !important;
  height: 23px !important;
  stroke: currentColor !important;
  stroke-width: 2 !important;
  fill: none !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

.operation-card strong {
  display: block !important;
  margin: 0 !important;
  color: #4A342A !important;
  font-size: 1.03rem !important;
  line-height: 1.15 !important;
  font-weight: 900 !important;
}

.operation-card small {
  display: block !important;
  margin: 0 !important;
  color: #7D5A44 !important;
  font-size: .88rem !important;
  line-height: 1.25 !important;
  border: 0 !important;
  width: auto !important;
  max-width: 100% !important;
}

.operation-card:nth-child(2n) .operation-icon {
  background: linear-gradient(135deg, #7D5A44 0%, #7D5A44 100%) !important;
  box-shadow: 0 10px 24px rgba(125, 90, 68, .18) !important;
}

.operation-card:nth-child(3n) .operation-icon {
  background: linear-gradient(135deg, #7D5A44 0%, #4A342A 100%) !important;
  box-shadow: 0 10px 24px rgba(74, 52, 42, .18) !important;
}

.operation-card:nth-child(4n) .operation-icon {
  background: linear-gradient(135deg, #7D5A44 0%, #4A342A 100%) !important;
  box-shadow: 0 10px 24px rgba(74, 52, 42, .18) !important;
}

/* Estadísticas y filas rápidas más ordenadas */
.stat-card {
  padding: 16px 18px !important;
  background: linear-gradient(180deg, #FFFFFF 0%, #F5F1EA 100%) !important;
}

.operation-row,
.internal-chat-message,
.rips-row,
.item {
  border-radius: 18px !important;
}

/* Mejoras responsive generales */
@media (max-width: 1180px) {
  .operation-card-grid,
  .operation-reports-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 820px) {
  .operation-hub {
    padding: 18px !important;
    border-radius: 24px !important;
  }

  .operation-card-grid,
  .operation-reports-grid,
  .bulk-import-grid,
  .cash-summary-grid,
  .payroll-result-grid {
    grid-template-columns: 1fr !important;
  }

  .operation-card {
    grid-template-columns: 50px minmax(0, 1fr) !important;
    min-height: 96px !important;
    padding: 16px !important;
  }

  .operation-icon {
    width: 44px !important;
    height: 44px !important;
    border-radius: 14px !important;
  }

  .operation-icon svg {
    width: 21px !important;
    height: 21px !important;
  }
}

@media (max-width: 560px) {
  .panel,
  .form-panel,
  .payment-form-compact,
  .payment-portfolio-card,
  .cash-expense-form,
  .cash-expense-list-card,
  .patient-bulk-panel,
  .internal-chat-panel,
  .laboratory-panel,
  .report-charts-panel,
  .operation-module-card {
    border-radius: 18px !important;
  }

  .operation-hub-head h3 {
    font-size: clamp(1.55rem, 8vw, 2.1rem) !important;
  }
}

/* =========================================================
   Ajuste final de organización general · UI refinada
   ========================================================= */
:root {
  --ui-soft-border: rgba(74, 52, 42, .14);
  --ui-soft-border-strong: rgba(74, 52, 42, .22);
  --ui-card-shadow: 0 14px 34px rgba(74, 52, 42, .06);
  --ui-card-shadow-hover: 0 18px 42px rgba(74, 52, 42, .10);
  --ui-radius-panel: 24px;
  --ui-radius-card: 18px;
  --ui-radius-input: 16px;
}

html, body {
  overflow-x: hidden !important;
}

body:not(.login-body):not(.install-body):not(.install-clean-body) {
  font-size: 15.5px !important;
}

.main {
  padding: 20px !important;
}

.section.active {
  max-width: 1400px !important;
  margin: 0 auto !important;
  gap: 20px !important;
}

.panel,
.form-panel,
.item,
.list,
.patient-card-v2,
.specialist-card-clean,
.payment-form-compact,
.payment-portfolio-card,
.cash-expense-form,
.cash-expense-list-card,
.patient-bulk-panel,
.internal-chat-panel,
.laboratory-panel,
.report-charts-panel,
.operation-module-card,
.rips-main-panel,
.report-card,
.dashboard-appointments-accordion,
.stat-card {
  border: 1px solid var(--ui-soft-border) !important;
  border-radius: var(--ui-radius-panel) !important;
  background: linear-gradient(180deg, #FFFFFF 0%, #F5F1EA 100%) !important;
  box-shadow: var(--ui-card-shadow) !important;
}

.panel,
.form-panel,
.payment-form-compact,
.payment-portfolio-card,
.cash-expense-form,
.cash-expense-list-card,
.patient-bulk-panel,
.internal-chat-panel,
.laboratory-panel,
.report-charts-panel,
.operation-module-card,
.rips-main-panel,
.report-card,
.dashboard-appointments-accordion {
  padding: 20px !important;
}

.panel-head,
.compact-head,
.operation-hub-head,
.cash-module-head,
.reports-filter-head {
  margin-bottom: 14px !important;
}

.panel h3,
.form-panel h3,
.compact-head h3,
.operation-hub-head h3,
section > h2 {
  color: #4A342A !important;
  line-height: 1.08 !important;
  letter-spacing: -.02em !important;
}

.panel p,
.form-panel p,
small,
.muted,
.inline-status {
  color: #7D5A44 !important;
}

label {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  min-width: 0 !important;
}

label > span,
label {
  font-weight: 700 !important;
  color: #4A342A !important;
}

input,
select,
textarea {
  width: 100% !important;
  min-width: 0 !important;
  border: 1px solid rgba(215, 201, 184, .95) !important;
  border-radius: var(--ui-radius-input) !important;
  background: #FFFFFF !important;
  box-shadow: none !important;
  color: #4A342A !important;
  font-size: .95rem !important;
}

input,
select {
  min-height: 48px !important;
  height: 48px !important;
  padding: 0 14px !important;
}

textarea {
  min-height: 110px !important;
  padding: 12px 14px !important;
  resize: vertical !important;
}

input:focus,
select:focus,
textarea:focus {
  border-color: #7D5A44 !important;
  outline: 3px solid rgba(125, 90, 68, .12) !important;
  box-shadow: none !important;
}

input::placeholder,
textarea::placeholder {
  color: #B2967D !important;
}

button,
.primary-btn,
.secondary-btn,
button[type="submit"] {
  min-height: 44px !important;
  border-radius: 14px !important;
}

.form-grid,
.profile-grid,
.payment-form-grid,
.cash-expense-grid,
.rips-form-grid,
.consent-form-row,
.patient-info-grid-v2,
.clinical-detail-grid,
.bulk-import-grid,
.operation-reports-grid,
.cash-summary-grid,
.payroll-result-grid {
  gap: 14px !important;
}

.item,
.operation-row,
.internal-chat-message,
.rips-row,
.search-result-item,
.payment-card,
.cash-expense-row {
  border-radius: var(--ui-radius-card) !important;
}

.item,
.operation-row,
.internal-chat-message,
.rips-row,
.search-result-item,
.payment-card {
  padding: 14px !important;
}

.table-responsive {
  border-radius: 18px !important;
  border: 1px solid var(--ui-soft-border) !important;
  background: #FFFFFF !important;
}

/* Dashboard / accesos rápidos */
.operation-hub {
  padding: 22px !important;
  border-radius: 28px !important;
  border: 1px solid var(--ui-soft-border-strong) !important;
  box-shadow: 0 20px 48px rgba(74, 52, 42, .08) !important;
}

.operation-hub-head {
  max-width: 860px !important;
}

.operation-hub-head .saas-kicker {
  min-height: 30px !important;
  padding: 6px 12px !important;
  border-radius: 999px !important;
  font-size: .82rem !important;
}

.operation-hub-head h3 {
  font-size: clamp(1.75rem, 3vw, 2.7rem) !important;
  margin: 10px 0 10px !important;
}

.operation-card-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 14px !important;
}

.operation-card {
  display: grid !important;
  grid-template-columns: 52px minmax(0, 1fr) !important;
  grid-template-rows: auto auto !important;
  align-items: center !important;
  gap: 4px 14px !important;
  min-height: 96px !important;
  padding: 16px 16px 16px 14px !important;
  border-radius: 22px !important;
  border: 1px solid rgba(215, 201, 184, .92) !important;
  background: linear-gradient(180deg, #FFFFFF 0%, #F5F1EA 100%) !important;
  box-shadow: 0 12px 28px rgba(74, 52, 42, .06) !important;
}

.operation-card:hover {
  transform: translateY(-2px) !important;
  box-shadow: var(--ui-card-shadow-hover) !important;
}

.operation-icon {
  width: 44px !important;
  height: 44px !important;
  border-radius: 14px !important;
  grid-row: 1 / span 2 !important;
}

.operation-icon svg {
  width: 21px !important;
  height: 21px !important;
}

.operation-card strong {
  font-size: 1rem !important;
  line-height: 1.15 !important;
  margin: 0 !important;
}

.operation-card small {
  font-size: .86rem !important;
  line-height: 1.24 !important;
  margin: 0 !important;
  max-width: 100% !important;
}

/* Tarjetas de estadísticas y listas */
.stat-card {
  padding: 16px !important;
  min-height: 88px !important;
}

.stat-card strong {
  font-size: clamp(1.25rem, 2vw, 1.8rem) !important;
}

/* Mejoras responsive globales */
@media (max-width: 1180px) {
  .operation-card-grid,
  .operation-reports-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .panel,
  .form-panel,
  .payment-form-compact,
  .payment-portfolio-card,
  .cash-expense-form,
  .cash-expense-list-card,
  .patient-bulk-panel,
  .internal-chat-panel,
  .laboratory-panel,
  .report-charts-panel,
  .operation-module-card,
  .rips-main-panel,
  .report-card,
  .dashboard-appointments-accordion {
    padding: 18px !important;
  }
}

@media (max-width: 820px) {
  .main {
    padding: 14px !important;
  }

  .section.active {
    gap: 16px !important;
  }

  .operation-card-grid,
  .operation-reports-grid,
  .bulk-import-grid,
  .cash-summary-grid,
  .payroll-result-grid,
  .form-grid,
  .profile-grid,
  .payment-form-grid,
  .cash-expense-grid,
  .rips-form-grid,
  .consent-form-row,
  .patient-info-grid-v2,
  .clinical-detail-grid {
    grid-template-columns: 1fr !important;
  }

  .operation-hub {
    padding: 18px !important;
    border-radius: 22px !important;
  }

  .operation-card {
    grid-template-columns: 48px minmax(0, 1fr) !important;
    min-height: 88px !important;
    padding: 14px !important;
  }

  .operation-icon {
    width: 42px !important;
    height: 42px !important;
  }
}

@media (max-width: 560px) {
  body:not(.login-body):not(.install-body):not(.install-clean-body) {
    font-size: 15px !important;
  }

  .panel,
  .form-panel,
  .payment-form-compact,
  .payment-portfolio-card,
  .cash-expense-form,
  .cash-expense-list-card,
  .patient-bulk-panel,
  .internal-chat-panel,
  .laboratory-panel,
  .report-charts-panel,
  .operation-module-card,
  .rips-main-panel,
  .report-card,
  .dashboard-appointments-accordion,
  .stat-card {
    padding: 14px !important;
    border-radius: 18px !important;
  }

  input,
  select {
    min-height: 46px !important;
    height: 46px !important;
  }

  .operation-card-grid {
    grid-template-columns: 1fr !important;
  }

  .operation-hub-head h3 {
    font-size: clamp(1.5rem, 8vw, 2rem) !important;
  }
}

/* =========================================================
   Ajustes finos solicitados por revisión visual del usuario
   ========================================================= */

/* 1) Pacientes: checkbox menor de edad compacto y alineado */
#patientForm .minor-card {
  padding: 10px 14px !important;
  border-radius: 18px !important;
}

#patientForm .minor-card .checkbox-row,
#patientForm label.checkbox-row {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 10px !important;
  width: auto !important;
  min-height: 34px !important;
  padding: 0 !important;
  margin: 0 !important;
}

#patientForm .minor-card .checkbox-row input[type="checkbox"],
#patientForm label.checkbox-row input[type="checkbox"] {
  width: 18px !important;
  height: 18px !important;
  min-height: 18px !important;
  margin: 0 !important;
  flex: 0 0 18px !important;
}

#patientForm .minor-card .checkbox-row span,
#patientForm label.checkbox-row span {
  margin: 0 !important;
  font-size: .95rem !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
}

/* 2) Carga masiva: archivo más limpio y mejor presentado */
#patientBulkImportPanel input[type="file"] {
  padding: 8px 10px !important;
  min-height: 48px !important;
  height: auto !important;
  border-radius: 16px !important;
  background: #FFFFFF !important;
}

#patientBulkImportPanel input[type="file"]::file-selector-button {
  margin-right: 12px !important;
  padding: 10px 14px !important;
  border: 1px solid rgba(125, 90, 68, .18) !important;
  border-radius: 12px !important;
  background: #F5F1EA !important;
  color: #4A342A !important;
  font-weight: 800 !important;
  cursor: pointer !important;
}

#patientBulkImportPanel .bulk-import-grid-advanced {
  grid-template-columns: minmax(300px, .8fr) minmax(380px, 1.2fr) !important;
  gap: 14px !important;
}

/* 3) Ancho general del contenido y tamaños menos exagerados */
@media (min-width: 1181px) {
  .section.active,
  .topbar {
    max-width: none !important;
    width: 100% !important;
  }

  .main {
    padding-top: 18px !important;
    padding-bottom: 20px !important;
    padding-left: 22px !important;
    padding-right: 22px !important;
  }

  .panel,
  .form-panel,
  .payment-form-compact,
  .payment-portfolio-card,
  .cash-expense-form,
  .cash-expense-list-card,
  .patient-bulk-panel,
  .internal-chat-panel,
  .laboratory-panel,
  .report-charts-panel,
  .operation-module-card,
  .rips-main-panel,
  .report-card,
  .dashboard-appointments-accordion {
    padding: 18px !important;
  }
}


#odontogram .odontogram-reference-workspace {
  display: grid !important;
  grid-template-columns: minmax(0, 1.08fr) minmax(300px, .92fr) !important;
  gap: 16px !important;
  align-items: start !important;
}

#odontogram .odontogram-reference-workspace > div {
  display: grid !important;
  gap: 14px !important;
  align-content: start !important;
}

#odontogram .odontogram-reference-card {
  padding: 16px !important;
  border-radius: 20px !important;
}

#odontogram .odontogram-reference-chart-card,
#odontogram .odontogram-notes-card,
#odontogram .odontogram-action-panel {
  min-height: auto !important;
  height: auto !important;
}

#odontogram #teethGrid {
  margin-bottom: 12px !important;
}

#odontogram .odontogram-view-toolbar {
  margin-top: 4px !important;
  padding-top: 0 !important;
}

#odontogram .odontogram-notes-card h3 {
  margin-bottom: 10px !important;
}

#odontogram .odontogram-history-table th,
#odontogram .odontogram-history-table td {
  padding: 10px 12px !important;
}

/* 5) Caja: aprovechar mejor el ancho y ordenar espacios */
#payments .cash-main-panel {
  padding: 18px !important;
}

#payments .split,
#payments .payment-cash-split {
  grid-template-columns: minmax(360px, .88fr) minmax(0, 1.12fr) !important;
  gap: 18px !important;
  align-items: start !important;
}

#payments .payment-form-compact,
#payments .payment-portfolio-card {
  padding: 18px !important;
}


#rips .rips-page {
  gap: 14px !important;
}

#rips .rips-hero-panel,
#rips .rips-main-panel,
#rips .report-card {
  padding: 16px !important;
  border-radius: 18px !important;
}

#rips .rips-hero-panel h3 {
  font-size: 24px !important;
}

#rips .rips-summary-grid {
  gap: 10px !important;
}

#rips .rips-layout {
  grid-template-columns: minmax(300px, .92fr) minmax(320px, 1.08fr) !important;
  gap: 14px !important;
  align-items: start !important;
}

#rips .rips-form,
#rips .rips-json-panel,
#rips .rips-list {
  gap: 12px !important;
}

#rips .rips-form-grid {
  gap: 10px !important;
}

#rips .rips-form input,
#rips .rips-form select,
#rips .rips-form textarea,
#rips .rips-json-panel select {
  padding: 10px 11px !important;
  min-height: 44px !important;
  margin-top: 5px !important;
  border-radius: 12px !important;
}

#rips .rips-json-preview {
  min-height: 220px !important;
  max-height: 420px !important;
}

/* 7) Especialistas: mejor balance y tarjetas parejas */
#specialists .split {
  grid-template-columns: minmax(320px, 390px) minmax(0, 1fr) !important;
  gap: 20px !important;
  align-items: start !important;
}

#specialists .panel {
  padding: 18px !important;
}

#specialists .specialists-panel {
  align-self: start !important;
}

#specialistList.list {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
  gap: 16px !important;
  align-items: start !important;
}

#specialistList .specialist-card-clean {
  height: 100% !important;
  min-height: 250px !important;
  align-content: start !important;
}

#specialistList .specialist-actions-clean {
  margin-top: auto !important;
}

/* Responsive específicos de estos módulos */
@media (max-width: 1180px) {
  #odontogram .odontogram-reference-workspace,
  #payments .split,
  #payments .payment-cash-split,
  #rips .rips-layout,
  #specialists .split {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 760px) {
  #patientBulkImportPanel .bulk-import-grid-advanced {
    grid-template-columns: 1fr !important;
  }

  #odontogram .odontogram-reference-card,
  #payments .cash-main-panel,
  #payments .payment-form-compact,
  #payments .payment-portfolio-card,
  #rips .rips-hero-panel,
  #rips .rips-main-panel,
  #specialists .panel {
    padding: 14px !important;
  }

  #rips .rips-hero-panel h3 {
    font-size: 22px !important;
  }
}

/* =========================================================
   Pulido final solicitado: tipografía normal + menos scroll
   ========================================================= */

:root {
  --compact-font: 14px;
  --compact-radius-panel: 20px;
  --compact-radius-field: 14px;
}

html {
  font-size: var(--compact-font) !important;
}

body:not(.login-body):not(.install-body):not(.install-clean-body) {
  font-size: 14px !important;
  line-height: 1.4 !important;
}

.main {
  padding: 14px 18px !important;
}

.section.active {
  gap: 14px !important;
}

.topbar {
  margin-bottom: 12px !important;
}

.topbar h2,
section > h2 {
  font-size: clamp(2rem, 3vw, 2.45rem) !important;
  line-height: 1.04 !important;
  margin: 0 0 6px !important;
}

.panel h3,
.form-panel h3,
.compact-head h3,
.operation-hub-head h3,
.cash-module-head h3,
#rips .rips-hero-panel h3,
#specialists h3,
#patients h3,
#odontogram h3,
#payments h3 {
  font-size: clamp(1.2rem, 2vw, 1.55rem) !important;
  line-height: 1.12 !important;
  margin: 0 0 8px !important;
}

p,
small,
.inline-status,
.quick-help,
.field-help,
.bulk-import-grid-advanced small,
.bulk-preview-map,
.panel p,
.form-panel p {
  font-size: .92rem !important;
  line-height: 1.34 !important;
}

.panel,
.form-panel,
.payment-form-compact,
.payment-portfolio-card,
.cash-expense-form,
.cash-expense-list-card,
.patient-bulk-panel,
.internal-chat-panel,
.laboratory-panel,
.report-charts-panel,
.operation-module-card,
.rips-main-panel,
.report-card,
.dashboard-appointments-accordion,
.stat-card,
.odontogram-reference-card,
.specialist-card-clean {
  border-radius: var(--compact-radius-panel) !important;
  padding: 14px !important;
}

.panel-head,
.compact-head,
.cash-module-head,
.operation-hub-head,
.patient-bulk-head,
.patient-results-head,
.reports-filter-head,
.clinical-head {
  margin-bottom: 10px !important;
}

label {
  gap: 6px !important;
  font-size: .93rem !important;
}

input,
select,
textarea {
  font-size: .93rem !important;
}

input,
select {
  height: 44px !important;
  min-height: 44px !important;
  padding: 0 12px !important;
  border-radius: var(--compact-radius-field) !important;
}

textarea {
  min-height: 88px !important;
  padding: 10px 12px !important;
  border-radius: var(--compact-radius-field) !important;
}

button,
.primary-btn,
.secondary-btn,
button[type="submit"] {
  min-height: 40px !important;
  height: auto !important;
  padding: 10px 14px !important;
  font-size: .92rem !important;
  border-radius: 12px !important;
}

.form-grid,
.profile-grid,
.payment-form-grid,
.cash-expense-grid,
.rips-form-grid,
.consent-form-row,
.patient-info-grid-v2,
.clinical-detail-grid,
.bulk-import-grid,
.operation-reports-grid,
.cash-summary-grid,
.payroll-result-grid,
.bulk-map-grid,
.bulk-import-options,
.rips-summary-grid,
.stats-grid {
  gap: 10px !important;
}

.item,
.operation-row,
.internal-chat-message,
.rips-row,
.search-result-item,
.payment-card,
.cash-expense-row,
.specialist-card-clean {
  padding: 12px !important;
}

/* Dashboard compacto */
.operation-hub {
  padding: 16px !important;
  border-radius: 24px !important;
}

.operation-hub-head .saas-kicker {
  min-height: 26px !important;
  padding: 5px 10px !important;
  font-size: .76rem !important;
}

.operation-card-grid {
  gap: 12px !important;
}

.operation-card {
  min-height: 84px !important;
  padding: 12px 14px !important;
  border-radius: 18px !important;
  grid-template-columns: 46px minmax(0, 1fr) !important;
  gap: 3px 12px !important;
}

.operation-icon {
  width: 40px !important;
  height: 40px !important;
  border-radius: 12px !important;
}

.operation-icon svg {
  width: 19px !important;
  height: 19px !important;
}

.operation-card strong {
  font-size: .98rem !important;
}

.operation-card small {
  font-size: .82rem !important;
}

/* Pacientes compacto */
#patientForm.patient-form-v2 {
  gap: 10px !important;
}

#patientForm .minor-card {
  padding: 8px 12px !important;
}

#patientForm .patient-professional-section,
#patientBulkImportPanel,
#patientResultsPanel {
  margin-top: 0 !important;
}

#patientBulkImportPanel .bulk-import-grid-advanced {
  gap: 10px !important;
}

#patientBulkImportPanel input[type="file"] {
  min-height: 44px !important;
  padding: 6px 8px !important;
}

#patientBulkImportPanel input[type="file"]::file-selector-button {
  padding: 8px 12px !important;
  font-size: .88rem !important;
}


#odontogram .odontogram-reference-workspace {
  gap: 12px !important;
}

#odontogram .odontogram-reference-workspace > div {
  gap: 10px !important;
}

#odontogram .odontogram-quadrant-tabs,
#odontogram .odontogram-quadrant-map,
#odontogram .odontogram-view-segment {
  gap: 8px !important;
}

#odontogram .odontogram-quadrant-tabs button,
#odontogram .odontogram-quadrant-map button,
#odontogram .odontogram-view-segment button {
  min-height: 40px !important;
  padding: 8px 12px !important;
  font-size: .9rem !important;
}

#odontogram .odontogram-arch-title,
#odontogram .odontogram-lower-title,
#odontogram .odontogram-dentition-badge {
  margin: 4px 0 !important;
}

#odontogram #teethGrid,
#odontogram .teeth-grid {
  gap: 8px !important;
  margin: 6px 0 10px !important;
}

#odontogram .tooth {
  min-height: 58px !important;
  border-radius: 14px !important;
}

#odontogram .odontogram-history-table th,
#odontogram .odontogram-history-table td {
  padding: 8px 10px !important;
  font-size: .88rem !important;
}

/* Caja: menos scroll, más aprovechado */
#payments .cash-main-panel,
#payments .payment-form-compact,
#payments .payment-portfolio-card {
  padding: 14px !important;
}

#payments .payment-portfolio-toolbar {
  padding: 8px 10px !important;
  margin-bottom: 10px !important;
}

#payments .payment-card-layout,
#payments .payment-card {
  gap: 8px !important;
}

#payments .payment-actions-compact,
#payments .item-actions {
  gap: 8px !important;
}

#payments .payment-actions-compact > *,
#payments .item-actions > * {
  min-height: 38px !important;
  padding: 8px 10px !important;
  font-size: .88rem !important;
}


#rips .rips-page,
#rips .rips-layout,
#rips .rips-form,
#rips .rips-json-panel,
#rips .rips-list {
  gap: 10px !important;
}

#rips .rips-hero-panel,
#rips .rips-main-panel,
#rips .report-card,
#rips .rips-row {
  padding: 12px !important;
  border-radius: 16px !important;
}

#rips .rips-hero-note {
  padding: 10px !important;
  border-radius: 12px !important;
}

#rips .rips-hero-panel h3 {
  font-size: 1.35rem !important;
}

#rips .rips-form input,
#rips .rips-form select,
#rips .rips-form textarea,
#rips .rips-json-panel select {
  min-height: 42px !important;
  padding: 8px 10px !important;
  font-size: .9rem !important;
}

#rips .rips-json-preview {
  min-height: 180px !important;
  max-height: 320px !important;
  font-size: 11px !important;
  padding: 12px !important;
}

/* Especialistas más balanceado */
#specialists .split {
  gap: 14px !important;
}

#specialistList.list {
  gap: 12px !important;
}

#specialistList .specialist-card-clean {
  min-height: 210px !important;
  gap: 10px !important;
}

#specialistList .specialist-card-head h4 {
  font-size: 1.05rem !important;
}

#specialistList .specialist-card-head span {
  padding: 5px 9px !important;
  font-size: .78rem !important;
}

/* Mesas/tablas y scrolls más compactos */
.table-responsive,
.permissions-matrix,
.clinical-table-wrap,
.report-table-wrap,
.odontogram-history-table-wrap,
.bulk-preview-table-wrap {
  border-radius: 14px !important;
}

/* Pantallas medianas y móviles */
@media (max-width: 1180px) {
  .main {
    padding: 12px 14px !important;
  }

  .panel,
  .form-panel,
  .payment-form-compact,
  .payment-portfolio-card,
  .cash-expense-form,
  .cash-expense-list-card,
  .patient-bulk-panel,
  .internal-chat-panel,
  .laboratory-panel,
  .report-charts-panel,
  .operation-module-card,
  .rips-main-panel,
  .report-card,
  .dashboard-appointments-accordion,
  .stat-card,
  .odontogram-reference-card,
  .specialist-card-clean {
    padding: 12px !important;
  }
}

@media (max-width: 760px) {
  html {
    font-size: 13.5px !important;
  }

  body:not(.login-body):not(.install-body):not(.install-clean-body) {
    font-size: 13.5px !important;
  }

  .topbar h2,
  section > h2 {
    font-size: clamp(1.7rem, 7vw, 2rem) !important;
  }

  .operation-card {
    min-height: 76px !important;
  }

  input,
  select {
    height: 42px !important;
    min-height: 42px !important;
  }

  textarea {
    min-height: 80px !important;
  }
}

/* =========================================================
   Pacientes · Foto tipo carnet
   ========================================================= */
.patient-photo-card {
  grid-column: 1 / -1 !important;
  display: grid !important;
  grid-template-columns: 92px minmax(0, 1fr) !important;
  gap: 14px !important;
  align-items: center !important;
  padding: 12px !important;
  border: 1px solid rgba(215, 201, 184, .9) !important;
  border-radius: 18px !important;
  background: linear-gradient(180deg, #FFFFFF 0%, #F5F1EA 100%) !important;
}

.patient-photo-preview,
.patient-photo-thumb {
  width: 74px !important;
  height: 92px !important;
  border-radius: 16px !important;
  border: 1px solid rgba(74, 52, 42, .22) !important;
  background: #F5F1EA !important;
  overflow: hidden !important;
  display: grid !important;
  place-items: center !important;
  color: #4A342A !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  box-shadow: 0 8px 20px rgba(74, 52, 42, .06) !important;
}

.patient-photo-preview img,
.patient-photo-thumb img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

.patient-photo-preview span,
.patient-photo-thumb span {
  font-size: .85rem !important;
  letter-spacing: .02em !important;
}

.patient-photo-controls {
  display: grid !important;
  gap: 6px !important;
  min-width: 0 !important;
}

.patient-photo-controls strong {
  color: #4A342A !important;
  font-size: 1rem !important;
}

.patient-photo-controls small {
  color: #7D5A44 !important;
  line-height: 1.3 !important;
}

.patient-photo-actions {
  display: flex !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
  align-items: center !important;
}

.patient-photo-upload-btn {
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 38px !important;
  margin: 0 !important;
}

.patient-photo-input {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.patient-card-header-with-photo {
  display: grid !important;
  grid-template-columns: 58px minmax(0, 1fr) !important;
  gap: 12px !important;
  align-items: center !important;
}

.patient-card-photo.patient-photo-thumb {
  width: 54px !important;
  height: 66px !important;
  border-radius: 14px !important;
  box-shadow: none !important;
}

.patient-card-title-v2 {
  min-width: 0 !important;
}

.profile-photo-summary {
  display: grid !important;
  grid-template-columns: 66px minmax(0, 1fr) !important;
  gap: 12px !important;
  align-items: center !important;
  padding: 10px !important;
  margin-bottom: 10px !important;
  border: 1px solid rgba(215, 201, 184, .75) !important;
  border-radius: 16px !important;
  background: #F5F1EA !important;
}

.profile-patient-photo.patient-photo-thumb {
  width: 56px !important;
  height: 70px !important;
  border-radius: 14px !important;
}

.profile-photo-summary strong,
.profile-photo-summary small {
  display: block !important;
}

@media (max-width: 640px) {
  .patient-photo-card {
    grid-template-columns: 76px minmax(0, 1fr) !important;
    gap: 10px !important;
    padding: 10px !important;
  }

  .patient-photo-preview {
    width: 64px !important;
    height: 80px !important;
  }

  .patient-photo-actions > * {
    flex: 1 1 auto !important;
  }
}

/* =========================================================
   Pacientes · Foto carnet compacta + tomar foto
   ========================================================= */
#patientForm .patient-photo-card {
  grid-column: 1 / 2 !important;
  display: grid !important;
  grid-template-columns: 58px minmax(0, 1fr) !important;
  gap: 10px !important;
  align-items: center !important;
  min-height: 92px !important;
  padding: 10px 12px !important;
  border-radius: 16px !important;
  background: linear-gradient(180deg, #FFFFFF 0%, #F5F1EA 100%) !important;
}

#patientForm > label:has(#patientName) {
  grid-column: 2 / -1 !important;
}

#patientForm .patient-photo-preview {
  width: 52px !important;
  height: 66px !important;
  border-radius: 14px !important;
  box-shadow: none !important;
}

#patientForm .patient-photo-preview span {
  font-size: .78rem !important;
}

#patientForm .patient-photo-controls {
  gap: 4px !important;
}

#patientForm .patient-photo-controls strong {
  font-size: .92rem !important;
  margin: 0 !important;
}

#patientForm .patient-photo-controls small {
  display: none !important;
}

#patientForm .patient-photo-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
}

#patientForm .patient-photo-actions .secondary-btn,
#patientForm .patient-photo-upload-btn {
  min-height: 32px !important;
  padding: 7px 10px !important;
  border-radius: 11px !important;
  font-size: .82rem !important;
  line-height: 1 !important;
}

/* Paciente menor de edad: checkbox dentro del módulo */
#patientForm .minor-card {
  padding: 8px 10px !important;
  border-radius: 16px !important;
  background: #F5F1EA !important;
}

#patientForm .minor-card .checkbox-row,
#patientForm label.checkbox-row {
  width: 100% !important;
  min-height: 40px !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 8px 12px !important;
  margin: 0 !important;
  border: 1px solid rgba(215, 201, 184, .8) !important;
  border-radius: 999px !important;
  background: #FFFFFF !important;
  box-sizing: border-box !important;
}

#patientForm .minor-card .checkbox-row input[type="checkbox"],
#patientForm label.checkbox-row input[type="checkbox"] {
  position: static !important;
  width: 17px !important;
  height: 17px !important;
  min-height: 17px !important;
  margin: 0 !important;
  flex: 0 0 17px !important;
}

#patientForm .minor-card .checkbox-row span,
#patientForm label.checkbox-row span {
  font-size: .92rem !important;
  line-height: 1.2 !important;
  margin: 0 !important;
}

/* Modal de cámara */
.patient-camera-modal.hidden {
  display: none !important;
}

.patient-camera-modal {
  position: fixed !important;
  inset: 0 !important;
  z-index: 99999 !important;
  display: grid !important;
  place-items: center !important;
  padding: 18px !important;
}

.patient-camera-backdrop {
  position: absolute !important;
  inset: 0 !important;
  background: rgba(74, 52, 42, .55) !important;
  backdrop-filter: blur(4px) !important;
}

.patient-camera-dialog {
  position: relative !important;
  width: min(460px, 100%) !important;
  border: 1px solid rgba(215, 201, 184, .9) !important;
  border-radius: 22px !important;
  background: #FFFFFF !important;
  box-shadow: 0 26px 70px rgba(0, 0, 0, .24) !important;
  padding: 14px !important;
  display: grid !important;
  gap: 12px !important;
}

.patient-camera-head,
.patient-camera-actions {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
}

.patient-camera-head strong {
  display: block !important;
  color: #4A342A !important;
  font-size: 1rem !important;
}

.patient-camera-head small {
  display: block !important;
  color: #7D5A44 !important;
  font-size: .86rem !important;
}

.patient-camera-frame {
  width: min(260px, 100%) !important;
  aspect-ratio: 9 / 11.5 !important;
  justify-self: center !important;
  border-radius: 18px !important;
  overflow: hidden !important;
  border: 1px solid rgba(215, 201, 184, .9) !important;
  background: #4A342A !important;
}

.patient-camera-frame video {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

@media (max-width: 920px) {
  #patientForm .patient-photo-card,
  #patientForm > label:has(#patientName) {
    grid-column: 1 / -1 !important;
  }
}

@media (max-width: 640px) {
  #patientForm .patient-photo-card {
    grid-template-columns: 54px minmax(0, 1fr) !important;
    min-height: 84px !important;
    padding: 9px 10px !important;
  }

  #patientForm .patient-photo-preview {
    width: 48px !important;
    height: 62px !important;
  }

  #patientForm .patient-photo-actions .secondary-btn,
  #patientForm .patient-photo-upload-btn {
    flex: 1 1 auto !important;
  }
}

/* =========================================================
   Pacientes · Foto carnet vertical mejor organizada
   ========================================================= */
#patientForm .patient-photo-card {
  grid-column: 1 / 2 !important;
  width: 136px !important;
  max-width: 136px !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 8px !important;
  padding: 10px !important;
  justify-self: start !important;
  align-self: start !important;
  border-radius: 18px !important;
}

#patientForm .patient-photo-preview {
  width: 78px !important;
  height: 112px !important;
  border-radius: 16px !important;
  flex: 0 0 auto !important;
}

#patientForm .patient-photo-preview span {
  font-size: .82rem !important;
}

#patientForm .patient-photo-controls {
  width: 100% !important;
  display: block !important;
}

#patientForm .patient-photo-controls strong,
#patientForm .patient-photo-controls small {
  display: none !important;
}

#patientForm .patient-photo-actions {
  width: 100% !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 6px !important;
  margin-top: 0 !important;
}

#patientForm .patient-photo-actions .secondary-btn,
#patientForm .patient-photo-upload-btn {
  width: 100% !important;
  min-height: 30px !important;
  padding: 7px 8px !important;
  font-size: .78rem !important;
  line-height: 1 !important;
  border-radius: 10px !important;
  white-space: nowrap !important;
}

#patientForm > label:has(#patientName) {
  grid-column: 2 / -1 !important;
  align-self: start !important;
}

#patientForm .minor-card {
  grid-column: 1 / -1 !important;
  padding: 8px 10px !important;
}

#patientForm .minor-card .checkbox-row,
#patientForm label.checkbox-row {
  border-radius: 14px !important;
  padding: 8px 12px !important;
}

@media (max-width: 920px) {
  #patientForm .patient-photo-card {
    grid-column: 1 / -1 !important;
    width: 136px !important;
    max-width: 136px !important;
  }

  #patientForm > label:has(#patientName) {
    grid-column: 1 / -1 !important;
  }
}

@media (max-width: 520px) {
  #patientForm .patient-photo-card {
    width: 128px !important;
    max-width: 128px !important;
  }

  #patientForm .patient-photo-preview {
    width: 74px !important;
    height: 104px !important;
  }
}

/* =========================================================
   Pacientes · Cabecera de registro reorganizada y presentable
   ========================================================= */
#patientForm .patient-identity-card {
  grid-column: 1 / -1 !important;
  display: grid !important;
  grid-template-columns: 150px minmax(0, 1fr) !important;
  gap: 16px !important;
  align-items: stretch !important;
  padding: 14px !important;
  border: 1px solid rgba(215, 201, 184, .9) !important;
  border-radius: 20px !important;
  background: linear-gradient(135deg, #FFFFFF 0%, #F5F1EA 100%) !important;
  box-shadow: 0 10px 28px rgba(74, 52, 42, .045) !important;
}

#patientForm .patient-identity-card .patient-photo-card {
  grid-column: auto !important;
  width: 136px !important;
  max-width: 136px !important;
  min-height: auto !important;
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 10px !important;
  margin: 0 !important;
  justify-self: center !important;
  align-self: stretch !important;
  border: 1px solid rgba(215, 201, 184, .85) !important;
  border-radius: 18px !important;
  background: #F5F1EA !important;
  box-shadow: none !important;
}

#patientForm .patient-identity-card .patient-photo-preview {
  width: 86px !important;
  height: 122px !important;
  border-radius: 16px !important;
  flex: 0 0 auto !important;
  background: linear-gradient(180deg, #F5F1EA 0%, #D7C9B8 100%) !important;
  border-color: rgba(74, 52, 42, .22) !important;
}

#patientForm .patient-identity-card .patient-photo-preview span {
  font-size: .8rem !important;
  color: #4A342A !important;
}

#patientForm .patient-identity-card .patient-photo-controls {
  width: 100% !important;
  display: block !important;
  min-width: 0 !important;
}

#patientForm .patient-identity-card .patient-photo-controls strong,
#patientForm .patient-identity-card .patient-photo-controls small {
  display: none !important;
}

#patientForm .patient-identity-card .patient-photo-actions {
  width: 100% !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 6px !important;
  margin: 0 !important;
}

#patientForm .patient-identity-card .patient-photo-actions .secondary-btn,
#patientForm .patient-identity-card .patient-photo-upload-btn {
  width: 100% !important;
  min-height: 30px !important;
  height: 30px !important;
  padding: 6px 8px !important;
  border-radius: 10px !important;
  font-size: .78rem !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

#patientForm .patient-identity-fields {
  display: grid !important;
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  gap: 10px 12px !important;
  align-content: start !important;
  min-width: 0 !important;
}

#patientForm .patient-identity-fields label {
  min-width: 0 !important;
  width: 100% !important;
}

#patientForm .patient-identity-fields .patient-name-field {
  grid-column: 1 / -1 !important;
}

#patientForm .patient-identity-fields .patient-document-field {
  grid-column: span 2 !important;
}

#patientForm .patient-identity-fields .patient-birth-age-row {
  grid-column: span 2 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 120px !important;
  gap: 10px !important;
  align-items: end !important;
  min-width: 0 !important;
}

#patientForm .patient-identity-fields .patient-email-field,
#patientForm .patient-identity-fields .patient-address-field,
#patientForm .patient-identity-fields .patient-phone-field {
  grid-column: span 2 !important;
}

#patientForm .patient-identity-fields input,
#patientForm .patient-identity-fields select {
  height: 42px !important;
  min-height: 42px !important;
  border-radius: 14px !important;
}

/* Paciente menor de edad dentro del módulo, sin verse como elemento suelto */
#patientForm .minor-card {
  grid-column: 1 / -1 !important;
  padding: 10px 12px !important;
  border: 1px solid rgba(215, 201, 184, .78) !important;
  border-radius: 18px !important;
  background: linear-gradient(180deg, #F5F1EA 0%, #F5F1EA 100%) !important;
}

#patientForm .minor-card .checkbox-row,
#patientForm label.checkbox-row {
  width: fit-content !important;
  min-width: 220px !important;
  max-width: 100% !important;
  min-height: 34px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 9px !important;
  padding: 7px 10px !important;
  margin: 0 !important;
  border: 1px solid rgba(215, 201, 184, .78) !important;
  border-radius: 12px !important;
  background: #FFFFFF !important;
}

#patientForm .minor-card .checkbox-row input[type="checkbox"],
#patientForm label.checkbox-row input[type="checkbox"] {
  position: static !important;
  width: 17px !important;
  height: 17px !important;
  min-height: 17px !important;
  margin: 0 !important;
  flex: 0 0 17px !important;
}

#patientForm .minor-card .checkbox-row span,
#patientForm label.checkbox-row span {
  font-size: .9rem !important;
  line-height: 1.15 !important;
  font-weight: 800 !important;
}

@media (max-width: 980px) {
  #patientForm .patient-identity-card {
    grid-template-columns: 140px minmax(0, 1fr) !important;
  }

  #patientForm .patient-identity-fields {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  #patientForm .patient-identity-fields .patient-name-field,
  #patientForm .patient-identity-fields .patient-document-field,
  #patientForm .patient-identity-fields .patient-birth-age-row,
  #patientForm .patient-identity-fields .patient-email-field,
  #patientForm .patient-identity-fields .patient-address-field,
  #patientForm .patient-identity-fields .patient-phone-field {
    grid-column: span 1 !important;
  }

  #patientForm .patient-identity-fields .patient-name-field,
  #patientForm .patient-identity-fields .patient-address-field {
    grid-column: 1 / -1 !important;
  }
}

@media (max-width: 700px) {
  #patientForm .patient-identity-card {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  #patientForm .patient-identity-card .patient-photo-card {
    width: 136px !important;
    max-width: 136px !important;
    justify-self: start !important;
    height: auto !important;
  }

  #patientForm .patient-identity-fields {
    grid-template-columns: 1fr !important;
  }

  #patientForm .patient-identity-fields .patient-name-field,
  #patientForm .patient-identity-fields .patient-document-field,
  #patientForm .patient-identity-fields .patient-birth-age-row,
  #patientForm .patient-identity-fields .patient-email-field,
  #patientForm .patient-identity-fields .patient-address-field,
  #patientForm .patient-identity-fields .patient-phone-field {
    grid-column: 1 / -1 !important;
  }

  #patientForm .patient-identity-fields .patient-birth-age-row {
    grid-template-columns: 1fr !important;
  }
}


#rips .rips-page {
  display: grid !important;
  gap: 12px !important;
  align-items: start !important;
}

#rips .rips-hero-panel {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 380px) !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 14px 16px !important;
  border-radius: 20px !important;
}

#rips .rips-hero-panel h3 {
  font-size: 1.45rem !important;
  line-height: 1.12 !important;
  margin: 4px 0 5px !important;
}

#rips .rips-hero-panel p,
#rips .rips-hero-note span,
#rips .panel p {
  font-size: .88rem !important;
  line-height: 1.32 !important;
}

#rips .rips-hero-note {
  min-width: 0 !important;
  max-width: 100% !important;
  padding: 10px 12px !important;
  border-radius: 14px !important;
  gap: 3px !important;
}

#rips .rips-summary-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

#rips .rips-summary-grid .stat-card {
  min-height: 74px !important;
  padding: 12px 14px !important;
  border-radius: 16px !important;
}

#rips .rips-summary-grid .stat-card span {
  font-size: .82rem !important;
}

#rips .rips-summary-grid .stat-card strong {
  font-size: 1.35rem !important;
  line-height: 1 !important;
}

#rips .rips-warning-panel {
  padding: 10px 12px !important;
  border-radius: 16px !important;
  gap: 8px !important;
  font-size: .88rem !important;
}

/* Nueva estructura en columnas para evitar espacios muertos */
#rips .rips-workspace {
  display: grid !important;
  grid-template-columns: minmax(330px, .88fr) minmax(420px, 1.12fr) !important;
  gap: 14px !important;
  align-items: start !important;
}

#rips .rips-column {
  display: grid !important;
  gap: 14px !important;
  align-content: start !important;
  min-width: 0 !important;
}

#rips .rips-column > .panel,
#rips .rips-column > form.panel {
  width: 100% !important;
  max-width: 100% !important;
  padding: 14px !important;
  border-radius: 18px !important;
  box-shadow: 0 10px 26px rgba(74, 52, 42, .055) !important;
}

#rips .compact-head,
#rips .panel-head {
  margin-bottom: 10px !important;
}

#rips .saas-kicker {
  min-height: 26px !important;
  padding: 5px 10px !important;
  font-size: .75rem !important;
}

#rips .rips-form {
  display: grid !important;
  gap: 10px !important;
}

#rips .rips-form-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 9px 10px !important;
  align-items: start !important;
}

#rips .rips-form label,
#rips .rips-json-panel label {
  display: flex !important;
  flex-direction: column !important;
  gap: 5px !important;
  margin: 0 !important;
  font-size: .82rem !important;
  line-height: 1.15 !important;
  font-weight: 800 !important;
}

#rips .rips-form input,
#rips .rips-form select,
#rips .rips-form textarea,
#rips .rips-json-panel select {
  height: 40px !important;
  min-height: 40px !important;
  margin-top: 0 !important;
  padding: 0 11px !important;
  border-radius: 12px !important;
  font-size: .88rem !important;
  line-height: 1.2 !important;
}

#rips .rips-form textarea {
  height: auto !important;
  min-height: 76px !important;
  padding: 9px 11px !important;
}

#rips .rips-form button.primary-btn,
#rips .rips-json-panel button,
#rips .rips-json-panel .primary-btn,
#rips .rips-json-panel .secondary-btn {
  min-height: 40px !important;
  padding: 9px 12px !important;
  border-radius: 12px !important;
  font-size: .88rem !important;
}

#rips .rips-ready-check {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 9px !important;
  min-height: 54px !important;
  padding: 9px 12px !important;
  border-radius: 14px !important;
}

#rips .rips-ready-check input {
  width: 18px !important;
  height: 18px !important;
  min-height: 18px !important;
  margin: 0 !important;
  flex: 0 0 auto !important;
}

#rips .rips-ready-check span {
  font-size: .84rem !important;
  line-height: 1.25 !important;
}

#rips .rips-service-picker {
  max-height: 210px !important;
  padding: 8px !important;
  gap: 7px !important;
  border-radius: 14px !important;
}

#rips .rips-check-row {
  padding: 9px 10px !important;
  border-radius: 12px !important;
}

#rips .rips-json-panel {
  gap: 10px !important;
}

#rips .rips-json-panel .item-actions {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
}

#rips .rips-json-status {
  padding: 10px 12px !important;
  border-radius: 13px !important;
  font-size: .86rem !important;
  line-height: 1.3 !important;
}

#rips .rips-json-preview {
  min-height: 170px !important;
  max-height: 310px !important;
  padding: 12px !important;
  border-radius: 14px !important;
  font-size: 11px !important;
  line-height: 1.38 !important;
}

#rips .rips-list {
  display: grid !important;
  gap: 8px !important;
}

#rips .rips-row {
  padding: 10px 12px !important;
  border-radius: 14px !important;
  gap: 10px !important;
}

#rips .rips-row p {
  margin: 4px 0 3px !important;
  line-height: 1.25 !important;
}

#rips .rips-row small {
  line-height: 1.25 !important;
}

/* Compatibilidad con estructura anterior si existe en otras vistas */
#rips .rips-layout {
  gap: 14px !important;
}

@media (max-width: 1220px) {
  #rips .rips-workspace {
    grid-template-columns: 1fr !important;
  }

  #rips .rips-column {
    gap: 12px !important;
  }
}

@media (max-width: 900px) {
  #rips .rips-hero-panel,
  #rips .rips-summary-grid,
  #rips .rips-form-grid,
  #rips .rips-json-panel .item-actions {
    grid-template-columns: 1fr !important;
  }

  #rips .rips-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 560px) {
  #rips .rips-summary-grid {
    grid-template-columns: 1fr !important;
  }

  #rips .rips-column > .panel,
  #rips .rips-column > form.panel,
  #rips .rips-hero-panel,
  #rips .rips-warning-panel {
    padding: 12px !important;
    border-radius: 16px !important;
  }
}



.rips-summary-grid{
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
}

.rips-normative-panel{
  padding: 14px !important;
  border-radius: 18px !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(245, 241, 234,.98)) !important;
}

.rips-normative-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  margin-bottom:12px;
}

.rips-normative-head h3{
  margin:6px 0 5px!important;
  font-size:1.25rem!important;
}

.rips-normative-head p{
  margin:0!important;
  max-width:780px;
  color:var(--muted);
  line-height:1.35;
}

.rips-normative-actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  justify-content:flex-end;
}

.rips-normative-actions .secondary-btn{
  min-height:38px!important;
  padding:8px 12px!important;
  white-space:nowrap;
}

.rips-normative-grid{
  display:grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap:10px;
}

.rips-normative-grid article{
  border:1px solid rgba(74, 52, 42,.14);
  background:#FFFFFF;
  border-radius:14px;
  padding:10px 12px;
  display:grid;
  gap:3px;
}

.rips-normative-grid strong{
  color:var(--primary-dark);
  font-size:1.15rem;
  line-height:1;
}

.rips-normative-grid span{
  color:var(--muted);
  font-size:.84rem;
  font-weight:700;
}

.rips-normative-rules{
  margin-top:10px;
  border:1px dashed rgba(74, 52, 42,.25);
  background:#F5F1EA;
  border-radius:14px;
  padding:10px 12px;
  color:#4A342A;
}

.rips-normative-rules strong{
  color:var(--primary-dark);
}

.rips-normative-rules ul{
  margin:8px 0 0 18px;
  padding:0;
}

.rips-normative-rules li{
  margin:4px 0;
  line-height:1.35;
}

@media (max-width: 1180px){
  .rips-summary-grid,
  .rips-normative-grid{
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
  }
  .rips-normative-head{
    flex-direction:column;
  }
  .rips-normative-actions{
    justify-content:flex-start;
  }
}

@media (max-width: 640px){
  .rips-summary-grid,
  .rips-normative-grid{
    grid-template-columns: 1fr !important;
  }
  .rips-normative-actions .secondary-btn{
    width:100%;
  }
}

/* =========================================================
   Instalador · modo de instalación compacto y profesional
   ========================================================= */
.install-clean-section:first-of-type .install-mode-box {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
  margin-top: 14px !important;
}

.install-clean-section:first-of-type .install-radio {
  position: relative !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 12px !important;
  min-height: 58px !important;
  height: auto !important;
  padding: 12px 14px !important;
  border-radius: 16px !important;
  border: 1px solid rgba(74, 52, 42, .18) !important;
  background: #FFFFFF !important;
  box-shadow: 0 8px 22px rgba(74, 52, 42, .045) !important;
  color: #4A342A !important;
  text-align: left !important;
  cursor: pointer !important;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease, background .18s ease !important;
}

.install-clean-section:first-of-type .install-radio:hover {
  transform: translateY(-1px) !important;
  border-color: rgba(125, 90, 68, .42) !important;
  box-shadow: 0 12px 26px rgba(74, 52, 42, .07) !important;
  background: linear-gradient(180deg, #FFFFFF 0%, #F5F1EA 100%) !important;
}

.install-clean-section:first-of-type .install-radio:has(input:checked) {
  border-color: rgba(125, 90, 68, .65) !important;
  background: linear-gradient(180deg, #F5F1EA 0%, #FFFFFF 100%) !important;
  box-shadow: inset 4px 0 0 #7D5A44, 0 12px 26px rgba(74, 52, 42, .07) !important;
}

.install-clean-section:first-of-type .install-radio input[type="radio"] {
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  min-height: 18px !important;
  margin: 0 !important;
  flex: 0 0 18px !important;
  accent-color: #7D5A44 !important;
}

.install-clean-section:first-of-type .install-radio span {
  display: block !important;
  margin: 0 !important;
  font-size: .94rem !important;
  line-height: 1.22 !important;
  font-weight: 850 !important;
  text-align: left !important;
  color: #4A342A !important;
}

@media (max-width: 760px) {
  .install-clean-section:first-of-type .install-mode-box {
    grid-template-columns: 1fr !important;
  }

  .install-clean-section:first-of-type .install-radio {
    min-height: 54px !important;
    padding: 11px 13px !important;
  }
}

/* ===== Inventario: salidas / consumo de insumos ===== */
#inventory .inventory-layout {
  grid-template-columns: minmax(310px, 390px) minmax(0, 1fr) !important;
  gap: 16px !important;
}

.inventory-side-stack {
  display: grid;
  gap: 14px;
  align-items: start;
}

.inventory-use-form {
  display: grid;
  gap: 12px;
}

.inventory-use-form .form-title-row p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: .9rem;
  line-height: 1.35;
}

.inventory-use-stock-box {
  padding: 11px 12px;
  border: 1px dashed rgba(74, 52, 42, .45);
  border-radius: 14px;
  background: rgba(245, 241, 234, .82);
  color: #4A342A;
  font-weight: 800;
  font-size: .9rem;
  line-height: 1.3;
}

.inventory-use-stock-box.warning {
  border-color: rgba(125, 90, 68, .45);
  background: #F5F1EA;
  color: #4A342A;
}

.inventory-use-stock-box.danger {
  border-color: rgba(180, 35, 24, .42);
  background: #FEE4E2;
  color: #991B1B;
}

.inventory-use-stock-box.success {
  border-color: rgba(74, 52, 42, .38);
  background: #F5F1EA;
  color: #4A342A;
}

.inventory-movement-panel {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(74, 52, 42, .12);
}

.inventory-movement-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.inventory-movement-head h3 {
  margin: 4px 0 0;
}

.inventory-movement-list {
  display: grid;
  gap: 10px;
}

.inventory-movement-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: start;
  padding: 12px;
  border: 1px solid rgba(215, 201, 184, .85);
  border-radius: 16px;
  background: linear-gradient(180deg, #FFFFFF 0%, #F5F1EA 100%);
}

.inventory-movement-item strong {
  color: #4A342A;
}

.inventory-movement-item span,
.inventory-movement-item small,
.inventory-movement-item p {
  display: block;
  margin-top: 4px;
  color: #7D5A44;
  font-size: .88rem;
  line-height: 1.32;
}

.inventory-movement-item p {
  margin-bottom: 0;
}

.inventory-movement-item aside {
  text-align: right;
  min-width: 80px;
}

.inventory-movement-item aside strong {
  display: block;
  color: #991B1B;
  font-size: 1.1rem;
}

.inventory-movement-empty {
  border: 1px dashed rgba(74, 52, 42, .18);
  border-radius: 14px;
}

.inventory-actions .inventory-use {
  background: #F5F1EA !important;
  color: #4A342A !important;
  border-color: rgba(74, 52, 42, .25) !important;
}

@media (max-width: 1100px) {
  #inventory .inventory-layout {
    grid-template-columns: 1fr !important;
  }

  .inventory-side-stack {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .inventory-side-stack,
  .inventory-movement-item {
    grid-template-columns: 1fr;
  }

  .inventory-movement-head {
    align-items: stretch;
    flex-direction: column;
  }

  .inventory-movement-item aside {
    text-align: left;
    min-width: 0;
  }
}

/* ===== Inventario: reordenar formularios arriba y listado debajo ===== */
#inventory .inventory-layout {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 16px !important;
  align-items: start !important;
}

#inventory .inventory-top-grid {
  display: grid !important;
  grid-template-columns: minmax(320px, .95fr) minmax(320px, 1.05fr) !important;
  gap: 16px !important;
  align-items: start !important;
}

#inventory .inventory-form,
#inventory .inventory-use-form {
  position: static !important;
  height: auto !important;
}

#inventory .inventory-list-panel {
  width: 100% !important;
  min-width: 0 !important;
}

#inventory .inventory-list-head {
  align-items: center !important;
}

#inventory .inventory-movement-panel {
  margin-top: 14px !important;
}

@media (max-width: 1100px) {
  #inventory .inventory-top-grid {
    grid-template-columns: 1fr !important;
  }
}

/* =========================================================
   Agenda mensual con filtros automáticos por rol, fecha y especialista
   ========================================================= */
.appointment-date-search-card {
  grid-template-columns: minmax(150px, 190px) minmax(180px, 230px) minmax(180px, 230px) minmax(230px, 1fr) minmax(170px, auto) !important;
}

.appointment-calendar-panel {
  display: grid;
  gap: 14px;
  padding: 16px;
  border: 1px solid #D7C9B8;
  border-radius: 24px;
  background: linear-gradient(135deg, #FFFFFF, #F5F1EA);
  box-shadow: 0 18px 42px rgba(74, 52, 42, .06);
}

.appointment-calendar-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 2px 2px 10px;
  border-bottom: 1px solid #D7C9B8;
}

.appointment-calendar-head h3 {
  margin: 3px 0 4px;
  color: #4A342A;
  font-size: clamp(20px, 2vw, 26px);
}

.appointment-calendar-head p {
  margin: 0;
  color: #7D5A44;
}

.appointment-calendar-toolbar {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.appointment-month-calendar {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 8px;
}

.appointment-calendar-weekday {
  padding: 8px 4px;
  color: #4A342A;
  font-size: 12px;
  font-weight: 900;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.appointment-calendar-day {
  min-width: 0;
  min-height: 118px;
  display: grid;
  align-content: start;
  gap: 8px;
  padding: 10px;
  border: 1px solid #D7C9B8;
  border-radius: 18px;
  background: #FFFFFF;
  color: #4A342A;
  text-align: left;
  cursor: pointer;
  transition: .18s ease;
}

.appointment-calendar-day:hover {
  border-color: #7D5A44;
  transform: translateY(-1px);
  box-shadow: 0 14px 28px rgba(74, 52, 42, .08);
}

.appointment-calendar-day.outside {
  opacity: .42;
  background: #F5F1EA;
}

.appointment-calendar-day.today {
  border-color: #7D5A44;
  box-shadow: inset 0 0 0 2px rgba(125, 90, 68, .12);
}

.appointment-calendar-day.selected {
  border-color: #4A342A;
  background: linear-gradient(135deg, #F5F1EA, #F5F1EA);
  box-shadow: 0 16px 30px rgba(74, 52, 42, .14);
}

.appointment-calendar-day.has-items {
  background: linear-gradient(135deg, #FFFFFF, #F5F1EA);
}

.appointment-calendar-day-number {
  width: 32px;
  height: 32px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  background: #F5F1EA;
  color: #4A342A;
  font-weight: 950;
}

.appointment-calendar-day.selected .appointment-calendar-day-number,
.appointment-calendar-day.today .appointment-calendar-day-number {
  background: #4A342A;
  color: #FFFFFF;
}

.appointment-calendar-items {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.appointment-calendar-chip,
.appointment-calendar-more {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 6px 8px;
  border-radius: 999px;
  background: #F5F1EA;
  border: 1px solid #D7C9B8;
  color: #4A342A;
  font-size: 11px;
  font-weight: 900;
}

.appointment-calendar-chip.warning {
  background: #F5F1EA;
  border-color: #D7C9B8;
  color: #7D5A44;
}

.appointment-calendar-chip.danger {
  background: #FEE4E2;
  border-color: #FECACA;
  color: #991B1B;
}

.appointment-calendar-more {
  background: #F5F1EA;
  border-color: #D7C9B8;
  color: #7D5A44;
  text-align: center;
}

@media (max-width: 1280px) {
  .appointment-date-search-card {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 860px) {
  .appointment-calendar-head {
    flex-direction: column;
    align-items: stretch;
  }

  .appointment-calendar-toolbar {
    justify-content: stretch;
  }

  .appointment-calendar-toolbar button {
    flex: 1 1 160px;
  }

  .appointment-month-calendar {
    gap: 5px;
  }

  .appointment-calendar-weekday {
    font-size: 10px;
  }

  .appointment-calendar-day {
    min-height: 92px;
    padding: 7px;
    border-radius: 14px;
  }

  .appointment-calendar-day-number {
    width: 26px;
    height: 26px;
    font-size: 12px;
  }

  .appointment-calendar-chip,
  .appointment-calendar-more {
    padding: 5px 6px;
    font-size: 9.5px;
  }
}

@media (max-width: 560px) {
  .appointment-calendar-panel {
    padding: 12px;
    border-radius: 20px;
  }

  .appointment-month-calendar {
    grid-template-columns: repeat(7, minmax(38px, 1fr));
    overflow-x: auto;
    padding-bottom: 4px;
  }

  .appointment-calendar-day {
    min-height: 84px;
  }
}

/* =========================================================
   CONTROL DE USUARIOS POR PLAN
   ========================================================= */
.saas-quota-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  margin-top: 22px;
  border: 1px solid #D7C9B8;
  background: linear-gradient(135deg, #F5F1EA 0%, #F5F1EA 100%);
}

.saas-quota-panel h3 {
  margin-bottom: 6px;
}

.saas-quota-panel p {
  margin: 0;
  color: #7D5A44;
  line-height: 1.55;
}

.saas-quota-meter {
  min-width: 170px;
  text-align: right;
}

.saas-quota-meter strong {
  display: block;
  margin-bottom: 10px;
  font-size: 28px;
  color: #4A342A;
}

.saas-quota-meter span {
  display: block;
  width: 100%;
  height: 10px;
  overflow: hidden;
  border-radius: 999px;
  background: #D7C9B8;
}

.saas-quota-meter i {
  display: block;
  width: 0%;
  height: 100%;
  border-radius: inherit;
  background: #4A342A;
  transition: width .25s ease;
}

.saas-quota-panel.quota-full {
  border-color: #D7C9B8;
  background: linear-gradient(135deg, #F5F1EA 0%, #F5F1EA 100%);
}

.saas-quota-panel.quota-full .saas-quota-meter strong {
  color: #991B1B;
}

.saas-quota-panel.quota-full .saas-quota-meter i {
  background: #7D5A44;
}

#saasUserOrganization:disabled,
#saasUserRole:disabled {
  opacity: .8;
  cursor: not-allowed;
  background: #F5F1EA;
}

@media (max-width: 720px) {
  .saas-quota-panel {
    align-items: flex-start;
    flex-direction: column;
  }

  .saas-quota-meter {
    width: 100%;
    text-align: left;
  }
}

/* =========================================================
   PANEL SAAS JERÁRQUICO: EMPRESAS, PLANES Y USUARIOS
   ========================================================= */
.saas-admin-tabs {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 22px;
  padding: 14px;
}

.saas-tab-btn {
  border: 1px solid #D7C9B8;
  background: #FFFFFF;
  color: #4A342A;
  border-radius: 999px;
  padding: 10px 16px;
  font-weight: 900;
  cursor: pointer;
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}

.saas-tab-btn:hover {
  transform: translateY(-1px);
  border-color: #4A342A;
}

.saas-tab-btn.active {
  background: #4A342A;
  color: #FFFFFF;
  border-color: #4A342A;
}

.saas-inline-assign {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: end;
  margin-top: 14px;
  padding: 12px;
  border: 1px dashed #D7C9B8;
  border-radius: 16px;
  background: #F5F1EA;
}

.saas-inline-assign label {
  margin: 0;
}

.saas-module-checks {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 8px;
}

.saas-module-check {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid #D7C9B8;
  border-radius: 14px;
  background: #FFFFFF;
  font-weight: 800;
}

.saas-module-check input {
  width: 18px !important;
  height: 18px;
  accent-color: #4A342A;
}

.saas-feature-list {
  margin: 12px 0 0;
  padding-left: 18px;
  color: #7D5A44;
  line-height: 1.55;
}

@media (max-width: 720px) {
  .saas-admin-tabs {
    align-items: stretch;
    flex-direction: column;
  }

  .saas-tab-btn {
    width: 100%;
  }

  .saas-inline-assign,
  .saas-module-checks {
    grid-template-columns: 1fr;
  }
}

/* Ajuste SaaS: plan contratado + usuarios adicionales por empresa */
.saas-plan-extra-assign {
  grid-template-columns: minmax(220px, 1.4fr) minmax(140px, .7fr) auto;
}

.saas-plan-extra-assign input[type="number"] {
  width: 100%;
}

@media (max-width: 900px) {
  .saas-plan-extra-assign {
    grid-template-columns: 1fr;
  }
}

/* Personalización de apariencia por organización */
:root {
  --sidebar-bg: #4A342A;
  --secondary: #7D5A44;
  --btn-radius: 18px;
  --card-radius: 24px;
}

.sidebar { background: var(--sidebar-bg); }
.stat-card, .panel { border-radius: var(--card-radius); }
.primary-btn, .secondary-btn, .danger-soft-btn, .logout-btn, .nav-btn, input, select, textarea {
  border-radius: var(--btn-radius);
}
.brand-icon.has-logo {
  background: #FFFFFF;
  padding: 4px;
  overflow: hidden;
}
.brand-icon.has-logo img,
.appearance-preview-logo.has-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.appearance-hero {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  margin-bottom: 22px;
}
.appearance-hero h3 { margin: 8px 0 6px; font-size: 26px; }
.appearance-hero p { margin: 0; color: var(--muted); max-width: 880px; }
.appearance-layout {
  display: grid;
  grid-template-columns: minmax(320px, 0.9fr) minmax(360px, 1.1fr);
  gap: 22px;
  align-items: start;
}
.appearance-form { display: grid; gap: 14px; }
.appearance-logo-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.appearance-color-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(140px, 1fr));
  gap: 12px;
}
.appearance-color-grid input[type="color"] {
  width: 100%;
  min-height: 44px;
  padding: 5px;
  cursor: pointer;
}
.appearance-preview-panel { min-height: 100%; }
.appearance-preview-card {
  --preview-primary: #4A342A;
  --preview-secondary: #7D5A44;
  --preview-accent: #B2967D;
  --preview-sidebar: #4A342A;
  --preview-bg: #F5F1EA;
  --preview-panel: #FFFFFF;
  --preview-text: #4A342A;
  --preview-muted: #7D5A44;
  --preview-radius: 24px;
  --preview-btn-radius: 18px;
  display: grid;
  grid-template-columns: 220px 1fr;
  min-height: 360px;
  background: var(--preview-bg);
  border: 1px solid var(--line);
  border-radius: var(--preview-radius);
  overflow: hidden;
  box-shadow: var(--shadow);
}
.appearance-preview-sidebar {
  background: var(--preview-sidebar);
  color: #FFFFFF;
  padding: 24px;
  display: grid;
  gap: 12px;
  align-content: start;
}
.appearance-preview-sidebar small { color: rgba(255,255,255,.72); }
.appearance-preview-sidebar span {
  padding: 10px 12px;
  border-radius: var(--preview-btn-radius);
  background: rgba(255,255,255,.08);
  color: rgba(255,255,255,.86);
  font-weight: 700;
}
.appearance-preview-logo {
  width: 62px;
  height: 62px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  background: linear-gradient(135deg, var(--preview-accent), var(--preview-secondary));
  color: var(--preview-sidebar);
  font-weight: 900;
  overflow: hidden;
}
.appearance-preview-logo.has-logo { background: #FFFFFF; padding: 5px; }
.appearance-preview-content {
  padding: 28px;
  color: var(--preview-text);
  display: grid;
  align-content: start;
  gap: 12px;
}
.appearance-preview-content h4 { margin: 0; font-size: 25px; }
.appearance-preview-content p { margin: 0; color: var(--preview-muted); }
.appearance-preview-actions { display: flex; gap: 10px; flex-wrap: wrap; margin: 8px 0; }
.appearance-preview-card .primary-btn {
  background: var(--preview-primary);
  border-radius: var(--preview-btn-radius);
}
.appearance-preview-card .secondary-btn {
  border-radius: var(--preview-btn-radius);
  color: var(--preview-primary);
  background: var(--preview-panel);
}
.appearance-preview-stat {
  background: var(--preview-panel);
  border: 1px solid rgba(0,0,0,.08);
  border-radius: var(--preview-radius);
  padding: 18px;
  display: grid;
  gap: 8px;
  max-width: 220px;
}
.appearance-preview-stat span { color: var(--preview-muted); font-weight: 700; }
.appearance-preview-stat strong { color: var(--preview-primary); font-size: 28px; }
.appearance-status {
  margin-top: 16px;
  padding: 14px 16px;
  border: 1px dashed var(--line);
  border-radius: 18px;
  color: var(--muted);
  background: rgba(255,255,255,.7);
}

@media (max-width: 980px) {
  .appearance-layout,
  .appearance-preview-card {
    grid-template-columns: 1fr;
  }
  .appearance-preview-sidebar {
    grid-template-columns: auto 1fr;
    align-items: center;
  }
  .appearance-preview-sidebar span { display: none; }
}

@media (max-width: 640px) {
  .appearance-hero { align-items: flex-start; flex-direction: column; }
  .appearance-color-grid { grid-template-columns: 1fr; }
}

/* Mejora de usabilidad del módulo Apariencia */
.appearance-hero-improved {
  background: linear-gradient(135deg, rgba(74, 52, 42,.09), rgba(178, 150, 125,.16)), var(--panel);
  border: 1px solid rgba(74, 52, 42,.18);
}
.appearance-hero-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.appearance-helper-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin: -6px 0 22px;
  padding: 16px;
}
.appearance-helper-item {
  display: grid;
  gap: 4px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(255,255,255,.72);
}
.appearance-helper-item strong {
  color: var(--text);
  font-size: 14px;
}
.appearance-helper-item span {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}
.appearance-layout-improved {
  grid-template-columns: minmax(360px, 1fr) minmax(380px, .92fr);
}
.appearance-form-improved {
  gap: 18px;
}
.appearance-form-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 14px;
}
.appearance-form-head h3 { margin: 6px 0 0; }
.appearance-save-note {
  font-size: 12px;
  font-weight: 800;
  color: var(--primary);
  background: rgba(74, 52, 42,.09);
  border: 1px solid rgba(74, 52, 42,.15);
  border-radius: 999px;
  padding: 8px 10px;
  white-space: nowrap;
}
.appearance-step-card {
  display: grid;
  gap: 14px;
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 16px;
  background: linear-gradient(180deg, rgba(255,255,255,.86), rgba(255,255,255,.62));
}
.appearance-step-title {
  display: grid;
  gap: 4px;
}
.appearance-step-title span {
  color: var(--text);
  font-size: 16px;
  font-weight: 900;
}
.appearance-step-title small {
  color: var(--muted);
  line-height: 1.4;
}
.appearance-field { gap: 8px; }
.appearance-upload-box {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) auto auto;
  gap: 12px;
  align-items: center;
  border: 1px dashed rgba(74, 52, 42,.25);
  border-radius: 18px;
  padding: 14px;
  background: rgba(74, 52, 42,.04);
}
.appearance-upload-box strong {
  display: block;
  color: var(--text);
  margin-bottom: 4px;
}
.appearance-upload-box small {
  color: var(--muted);
  line-height: 1.35;
}
.appearance-upload-trigger {
  position: relative;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-height: 44px;
  padding: 10px 16px;
  border-radius: var(--btn-radius);
  border: 1px solid rgba(74, 52, 42,.23);
  background: var(--panel);
  color: var(--primary);
  font-weight: 900;
  cursor: pointer;
  overflow: hidden;
}
.appearance-upload-trigger input[type="file"] {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}
.appearance-palette-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.appearance-palette-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--panel);
  color: var(--text);
  font-weight: 900;
  cursor: pointer;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.appearance-palette-btn:hover {
  transform: translateY(-1px);
  border-color: rgba(74, 52, 42,.3);
  box-shadow: 0 12px 28px rgba(74, 52, 42, .08);
}
.appearance-palette-btn.is-active {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(74, 52, 42,.12);
}
.appearance-palette-dots {
  display: inline-flex;
  align-items: center;
}
.appearance-palette-dots i {
  width: 20px;
  height: 20px;
  border-radius: 999px;
  border: 2px solid #FFFFFF;
  background: var(--dot);
  box-shadow: 0 4px 10px rgba(74, 52, 42, .12);
  margin-left: -5px;
}
.appearance-palette-dots i:first-child { margin-left: 0; }
.appearance-manual-colors {
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 12px;
  background: rgba(255,255,255,.72);
}
.appearance-manual-colors summary,
.appearance-advanced-box summary {
  cursor: pointer;
  font-weight: 900;
  color: var(--text);
}
.appearance-color-grid-improved {
  margin-top: 12px;
  grid-template-columns: repeat(4, minmax(120px, 1fr));
}
.appearance-color-grid-improved label {
  display: grid;
  gap: 5px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #FFFFFF;
  color: var(--text);
  font-weight: 900;
}
.appearance-color-grid-improved label span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}
.appearance-range-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.appearance-range-grid label {
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #FFFFFF;
  color: var(--text);
  font-weight: 900;
}
.appearance-range-grid input[type="range"] {
  width: 100%;
  accent-color: var(--primary);
}
.appearance-range-grid span {
  justify-self: start;
  color: var(--primary);
  background: rgba(74, 52, 42,.09);
  border-radius: 999px;
  padding: 5px 10px;
  font-size: 12px;
  font-weight: 900;
}
.appearance-advanced-box {
  border: 1px dashed var(--line);
  border-radius: 20px;
  padding: 14px 16px;
  background: rgba(255,255,255,.62);
}
.appearance-advanced-box p {
  margin: 10px 0;
  color: var(--muted);
  font-size: 13px;
}
.appearance-action-bar {
  position: sticky;
  bottom: 14px;
  z-index: 8;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
  padding: 12px;
  border: 1px solid rgba(74, 52, 42,.18);
  border-radius: 22px;
  background: rgba(255,255,255,.88);
  backdrop-filter: blur(12px);
  box-shadow: 0 18px 36px rgba(74, 52, 42, .08);
}
.appearance-preview-panel-improved {
  position: sticky;
  top: 18px;
}
.appearance-preview-mini-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.appearance-preview-mini-grid .appearance-preview-stat {
  max-width: none;
}

@media (max-width: 1180px) {
  .appearance-color-grid-improved { grid-template-columns: repeat(2, minmax(120px, 1fr)); }
}

@media (max-width: 980px) {
  .appearance-helper-strip,
  .appearance-layout-improved,
  .appearance-range-grid,
  .appearance-preview-mini-grid {
    grid-template-columns: 1fr;
  }
  .appearance-preview-panel-improved { position: static; }
}

@media (max-width: 720px) {
  .appearance-hero-actions,
  .appearance-form-head,
  .appearance-upload-box,
  .appearance-palette-grid {
    grid-template-columns: 1fr;
    flex-direction: column;
    align-items: stretch;
  }
  .appearance-upload-box { display: grid; }
  .appearance-save-note { white-space: normal; }
  .appearance-action-bar { position: static; }
  .appearance-color-grid-improved { grid-template-columns: 1fr; }
}


/* =========================================================
   YacoSpa · Paleta principal Linen / Khaki / Camel / Cocoa / Espresso
   Base tomada de la referencia enviada por el cliente.
   Linen: #F5F1EA | Khaki: #D7C9B8 | Camel: #B2967D | Cocoa: #7D5A44 | Espresso: #4A342A
   ========================================================= */
:root {
  --yacospa-linen: #F5F1EA;
  --yacospa-khaki: #D7C9B8;
  --yacospa-camel: #B2967D;
  --yacospa-cocoa: #7D5A44;
  --yacospa-espresso: #4A342A;

  --bg: #F5F1EA !important;
  --panel: #F5F1EA !important;
  --text: #4A342A !important;
  --muted: #7D5A44 !important;
  --line: #D7C9B8 !important;
  --primary: #7D5A44 !important;
  --primary-dark: #4A342A !important;
  --primary-soft: #D7C9B8 !important;
  --secondary: #B2967D !important;
  --accent: #D7C9B8 !important;
  --shadow: 0 20px 50px rgba(74, 52, 42, .12) !important;
  --yaco-soft-border: rgba(125, 90, 68, .22) !important;
  --yaco-soft-shadow: 0 20px 46px rgba(74, 52, 42, .10) !important;
}

body {
  background:
    radial-gradient(circle at 18% 8%, rgba(215, 201, 184, .42), transparent 30%),
    radial-gradient(circle at 88% 0%, rgba(178, 150, 125, .24), transparent 28%),
    linear-gradient(135deg, #F5F1EA 0%, #D7C9B8 100%) !important;
  color: #4A342A !important;
}

.sidebar {
  background: linear-gradient(180deg, #4A342A 0%, #7D5A44 100%) !important;
  color: #F5F1EA !important;
}

.brand-icon,
.appearance-preview-logo,
.auth-logo,
.install-logo,
.login-logo {
  background: linear-gradient(135deg, #D7C9B8 0%, #B2967D 100%) !important;
  color: #4A342A !important;
  box-shadow: 0 16px 34px rgba(74, 52, 42, .20) !important;
}

.brand p,
.sidebar-footer,
.nav-btn {
  color: rgba(245, 241, 234, .78) !important;
}

.nav-btn:hover,
.nav-btn.active {
  background: rgba(245, 241, 234, .14) !important;
  color: #F5F1EA !important;
}

.panel,
.stat-card,
.item,
.patient-card-v2,
.specialist-card-clean,
.appointment-card,
.consent-card,
.payment-card,
.rips-row,
.auth-card,
.login-card,
.install-card,
.appearance-step-card,
.appearance-preview-panel-improved,
.appearance-preview-card {
  background: linear-gradient(180deg, #F5F1EA 0%, rgba(245, 241, 234, .92) 100%) !important;
  border-color: rgba(125, 90, 68, .22) !important;
  box-shadow: 0 20px 48px rgba(74, 52, 42, .12) !important;
  color: #4A342A !important;
}

.panel-head,
.compact-head,
.table-head,
.list-head,
.appearance-form-head,
.appearance-helper-strip,
.appearance-upload-box,
.appearance-manual-colors,
.appearance-advanced-box,
.appearance-action-bar,
.search-results,
.search-results-inline,
.payment-patient-results {
  background: rgba(245, 241, 234, .88) !important;
  border-color: rgba(125, 90, 68, .22) !important;
  color: #4A342A !important;
}

input,
select,
textarea,
.payment-patient-search-shell input,
#paymentPatientSearch {
  background: rgba(245, 241, 234, .94) !important;
  border-color: rgba(125, 90, 68, .28) !important;
  color: #4A342A !important;
}

input:focus,
select:focus,
textarea:focus,
#paymentPatientSearch:focus {
  border-color: #7D5A44 !important;
  box-shadow: 0 0 0 4px rgba(125, 90, 68, .14) !important;
  outline: none !important;
}

.primary-btn,
.login-form .primary-btn,
.login-card .primary-btn,
.install-form .primary-btn,
.auth-main-link,
button.primary-btn,
.saas-primary-action,
.clinical-pdf-document-organized .pdf-header-organized {
  background: linear-gradient(135deg, #7D5A44 0%, #4A342A 100%) !important;
  border-color: #4A342A !important;
  color: #F5F1EA !important;
}

.primary-btn:hover,
button.primary-btn:hover {
  background: linear-gradient(135deg, #4A342A 0%, #7D5A44 100%) !important;
  color: #F5F1EA !important;
}

.secondary-btn,
.badge,
.status-badge,
.appearance-range-grid span,
.search-result-item:hover,
.search-result-item.active {
  background: #D7C9B8 !important;
  border-color: rgba(125, 90, 68, .24) !important;
  color: #4A342A !important;
}

.badge.success,
.badge.active,
.status-active,
.status-paid,
.status-completed {
  background: rgba(178, 150, 125, .28) !important;
  color: #4A342A !important;
}

.badge.warning,
.status-pending,
.status-partial {
  background: rgba(215, 201, 184, .55) !important;
  color: #7D5A44 !important;
}

a,
.forgot-link,
.auth-back-link,
.topbar p,
.panel p,
.saas-kicker,
.appearance-color-grid-improved label span,
.appearance-advanced-box p {
  color: #7D5A44 !important;
}

.stat-card span,
small,
.muted,
.hint,
.help-text {
  color: rgba(74, 52, 42, .72) !important;
}

.appearance-color-grid-improved label,
.appearance-range-grid label,
.appearance-palette-btn {
  background: rgba(245, 241, 234, .86) !important;
  border-color: rgba(125, 90, 68, .22) !important;
  color: #4A342A !important;
}

.appearance-palette-btn:hover,
.appearance-palette-btn.active {
  border-color: #7D5A44 !important;
  box-shadow: 0 0 0 4px rgba(125, 90, 68, .10) !important;
}

.tabs button.active,
.tab-btn.active,
.segmented button.active,
.calendar-day.active,
.calendar-slot.active {
  background: #7D5A44 !important;
  color: #F5F1EA !important;
  border-color: #4A342A !important;
}

.calendar-day,
.calendar-slot,
.timeline-item,
.invoice-card,
.report-card,
.inventory-card {
  background: rgba(245, 241, 234, .86) !important;
  border-color: rgba(125, 90, 68, .22) !important;
}

hr,
.divider {
  border-color: rgba(125, 90, 68, .22) !important;
}

/* =========================================================
   YACOSPA V3 · Afinación sección por sección con paleta Linen
   Objetivo: eliminar acentos clínicos verdes/azules y unificar todo el sistema.
   ========================================================= */
:root {
  --linen: #F5F1EA !important;
  --khaki: #D7C9B8 !important;
  --camel: #B2967D !important;
  --cocoa: #7D5A44 !important;
  --espresso: #4A342A !important;
  --bg: #F5F1EA !important;
  --panel: #F5F1EA !important;
  --text: #4A342A !important;
  --muted: #7D5A44 !important;
  --line: #D7C9B8 !important;
  --primary: #7D5A44 !important;
  --primary-dark: #4A342A !important;
  --primary-soft: #D7C9B8 !important;
  --secondary: #B2967D !important;
  --accent: #D7C9B8 !important;
  --sidebar-bg: #4A342A !important;
  --shadow: 0 22px 55px rgba(74, 52, 42, .13) !important;
}

body,
.main {
  background:
    radial-gradient(circle at 18% 8%, rgba(215, 201, 184, .45), transparent 31%),
    radial-gradient(circle at 86% 1%, rgba(178, 150, 125, .22), transparent 29%),
    linear-gradient(135deg, #F5F1EA 0%, #EFE7DC 55%, #D7C9B8 100%) !important;
}

.sidebar,
.mobile-header {
  background: linear-gradient(180deg, #4A342A 0%, #7D5A44 100%) !important;
  border-color: rgba(215, 201, 184, .24) !important;
}

.topbar,
.operation-hub,
#dashboard .stat-card,
#dashboard .dashboard-appointments-accordion,
#patients .panel,
#appointments .panel,
#clinical .panel,
#consents .panel,
#payments .panel,
#inventory .panel,
#reports .panel,
#specialists .panel,
#messages .panel,
#saas .panel,
#appearance .panel,
.item,
.list .item,
.table-card,
.modal-card,
.drawer-card {
  background: linear-gradient(180deg, rgba(245,241,234,.98) 0%, rgba(245,241,234,.90) 100%) !important;
  border: 1px solid rgba(125, 90, 68, .22) !important;
  box-shadow: 0 22px 48px rgba(74, 52, 42, .11) !important;
  color: #4A342A !important;
}

/* Panel principal */
#dashboard .operation-card,
#dashboard .stat-card {
  background: linear-gradient(145deg, #F5F1EA 0%, #D7C9B8 100%) !important;
  border-color: rgba(125,90,68,.24) !important;
}
#dashboard .operation-icon,
.operation-icon {
  background: #D7C9B8 !important;
  color: #4A342A !important;
  border-color: rgba(125,90,68,.20) !important;
}
#dashboard .operation-card:hover {
  border-color: #7D5A44 !important;
  box-shadow: 0 22px 54px rgba(74,52,42,.16) !important;
}

/* Agenda */
#appointments .appointment-calendar,
#appointments .appointment-calendar-day,
#appointments .calendar-day,
#appointments .appointment-slot,
#appointments .appointment-availability-slots button {
  background: rgba(245,241,234,.92) !important;
  border-color: rgba(125,90,68,.24) !important;
  color: #4A342A !important;
}
#appointments .appointment-calendar-day.is-today,
#appointments .appointment-calendar-day.active,
#appointments .appointment-slot.active,
#appointments .appointment-availability-slots button:hover {
  background: #D7C9B8 !important;
  color: #4A342A !important;
  border-color: #7D5A44 !important;
}
#appointments .appointment-status,
#appointments .appointment-card .badge {
  background: rgba(178,150,125,.28) !important;
  color: #4A342A !important;
}

/* Pacientes */
#patients .patient-search-hero,
#patients .patient-identity-card,
#patients .patient-bulk-panel,
#patients .bulk-preview,
#patients .patient-results-panel,
.patient-card-v2,
.patient-photo-preview {
  background: rgba(245,241,234,.92) !important;
  border-color: rgba(125,90,68,.24) !important;
  color: #4A342A !important;
}
#patients .patient-search-note,
#patients .quick-help,
#patients .field-help {
  background: rgba(215,201,184,.32) !important;
  color: #7D5A44 !important;
  border-color: rgba(125,90,68,.18) !important;
}

/* Historia clínica */
#clinical .clinical-history-kicker,
#clinical .clinical-history-panel-head,
#clinical .clinical-card,
.clinical-accordion,
.clinical-patient-results,
.clinical-search-result {
  background: rgba(245,241,234,.94) !important;
  border-color: rgba(125,90,68,.24) !important;
  color: #4A342A !important;
}
#clinical .clinical-patient-results button:hover,
.clinical-accordion.is-open,
.clinical-search-result:hover {
  background: #D7C9B8 !important;
  color: #4A342A !important;
}

/* Consentimientos */
#consents .consent-summary-card,
#consents .consent-checklist,
#consents .consent-card,
#consents .consent-normative-note,
#consents .signature-pad,
.consent-badge {
  background: rgba(245,241,234,.94) !important;
  border-color: rgba(125,90,68,.24) !important;
  color: #4A342A !important;
}
#consents .consent-badge.signed,
#consents .consent-badge.pending {
  background: #D7C9B8 !important;
  color: #4A342A !important;
}

/* Caja */
#payments .cash-summary-card,
#payments .payment-card,
#payments .payment-method-chip,
#payments .cash-register-box,
#payments .payment-patient-results,
.payment-patient-result,
.payment-pos-preview {
  background: rgba(245,241,234,.94) !important;
  border-color: rgba(125,90,68,.24) !important;
  color: #4A342A !important;
}
#payments .cash-summary-card strong,
#payments .payment-total,
#payments .payment-balance {
  color: #4A342A !important;
}

/* Inventario */
#inventory .inventory-summary-card,
#inventory .inventory-card,
#inventory .inventory-status,
#inventory .laboratory-card,
#inventory .inventory-filter-chip {
  background: rgba(245,241,234,.94) !important;
  border-color: rgba(125,90,68,.24) !important;
  color: #4A342A !important;
}
#inventory .stock-ok,
#inventory .stock-low,
#inventory .stock-out,
#inventory .inventory-status.ok,
#inventory .inventory-status.warning {
  background: #D7C9B8 !important;
  color: #4A342A !important;
}

/* Informes */
#reports .report-filter-card,
#reports .report-result-card,
#reports .report-chart-card,
#reports .chart-track,
#reports .report-table th,
#reports .report-table td {
  background: rgba(245,241,234,.94) !important;
  border-color: rgba(125,90,68,.24) !important;
  color: #4A342A !important;
}
#reports .chart-track i,
.chart-track i,
.mini-chart-bar,
.report-bar {
  background: linear-gradient(90deg, #B2967D, #7D5A44) !important;
}

/* Esteticistas */
#specialists .specialist-card,
#specialists .specialists-panel,
.specialist-card-clean,
.specialist-chip {
  background: rgba(245,241,234,.94) !important;
  border-color: rgba(125,90,68,.24) !important;
  color: #4A342A !important;
}

/* Mensajes */
#messages .message-card,
#messages .message-thread,
#messages .chat-bubble,
#messages .internal-chat-card,
#messages .message-template-card {
  background: rgba(245,241,234,.94) !important;
  border-color: rgba(125,90,68,.24) !important;
  color: #4A342A !important;
}
#messages .chat-bubble.me,
#messages .message-card.active {
  background: #D7C9B8 !important;
  color: #4A342A !important;
}

/* SaaS */
#saas .saas-stat-card,
#saas .saas-admin-tabs,
#saas .saas-plan-card,
#saas .saas-module-check,
#saas .saas-quota-panel,
#saas .audit-row,
#saas .permission-cell,
#saas .company-card {
  background: rgba(245,241,234,.94) !important;
  border-color: rgba(125,90,68,.24) !important;
  color: #4A342A !important;
}
#saas .saas-tab-btn.active,
#saas .saas-module-check input:checked + span,
.saas-tab-btn.active {
  background: #7D5A44 !important;
  color: #F5F1EA !important;
  border-color: #4A342A !important;
}
#saas .saas-quota-meter i,
.progress-bar i,
.progress-fill {
  background: linear-gradient(90deg, #B2967D, #7D5A44) !important;
}

/* Apariencia */
#appearance .appearance-palette-btn,
#appearance .appearance-color-grid-improved label,
#appearance .appearance-range-grid label,
#appearance .appearance-preview-stat,
#appearance .appearance-upload-box,
#appearance .appearance-action-bar {
  background: rgba(245,241,234,.94) !important;
  border-color: rgba(125,90,68,.24) !important;
  color: #4A342A !important;
}
#appearance .appearance-palette-btn.is-active,
#appearance .appearance-palette-btn:hover {
  background: #D7C9B8 !important;
  border-color: #7D5A44 !important;
  color: #4A342A !important;
}
.appearance-palette-dots i {
  border: 1px solid rgba(74,52,42,.22) !important;
}

/* Estados funcionales sin verde */
.success-text,
.positive-text,
.available-text,
.status-success,
.status-ok,
.success,
.ok {
  color: #7D5A44 !important;
}
.badge.success,
.badge.ok,
.status-success,
.status-ok,
.alert-success,
.ok {
  background: rgba(215,201,184,.52) !important;
  border-color: rgba(125,90,68,.24) !important;
  color: #4A342A !important;
}
input[type="checkbox"],
input[type="radio"],
input[type="range"] {
  accent-color: #7D5A44 !important;
}

::-webkit-scrollbar-thumb {
  background: #B2967D !important;
  border-radius: 999px;
}
::-webkit-scrollbar-track {
  background: rgba(245,241,234,.8) !important;
}


/* YacoSpa v4 - módulos sanitarios y auditoría spa */
.spa-form-grid { display: grid; gap: 14px; }
.spa-form-grid.two-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.spa-audit-fields { margin: 18px 0; padding: 18px; border: 1px solid rgba(74, 52, 42, .12); background: linear-gradient(135deg, rgba(245,241,234,.95), rgba(215,201,184,.35)); border-radius: var(--card-radius, 24px); }
.module-audit-grid { display: grid; grid-template-columns: minmax(320px, .9fr) minmax(360px, 1.1fr); gap: 22px; align-items: start; }
.audit-toolbar { display: flex; gap: 12px; align-items: center; margin: 14px 0; }
.audit-toolbar input { flex: 1; }
.audit-list { display: grid; gap: 12px; }
.audit-card { border: 1px solid rgba(74,52,42,.12); background: rgba(245,241,234,.78); border-radius: 20px; padding: 16px; box-shadow: 0 14px 28px rgba(74,52,42,.06); }
.audit-card h4 { margin: 0 0 4px; color: #4A342A; }
.audit-card small { color: #7D5A44; display:block; }
.audit-card p { margin: 10px 0 0; color: #5f4739; line-height: 1.45; }
.audit-actions { display:flex; flex-wrap:wrap; gap: 8px; margin-top: 12px; align-items: center; }
.audit-summary-grid { display:grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 12px 0 16px; }
.checklist-grid { display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; padding: 14px; background:#F5F1EA; border: 1px solid rgba(74,52,42,.12); border-radius: 18px; margin: 10px 0; }
.checklist-grid label { display:flex; gap: 8px; align-items:center; margin:0; color:#4A342A; }
.status-ok { background: rgba(215,201,184,.85) !important; color:#4A342A !important; }
.status-warning { background: rgba(178,150,125,.45) !important; color:#4A342A !important; }
.status-overdue { background: rgba(125,90,68,.22) !important; color:#4A342A !important; }
.status-pending { background: rgba(245,241,234,.9) !important; color:#7D5A44 !important; }
.specialist-extra-clean { display:grid; gap: 5px; margin: 10px 0; }
.specialist-extra-clean small { color:#7D5A44; }
.clinical-evolution-panel { margin-top: 18px; }
.clinical-evolution-list { display:grid; gap: 12px; margin-top: 14px; }
.evolution-photo-card { display:grid; grid-template-columns: 120px 1fr; gap: 14px; align-items:start; border: 1px solid rgba(74,52,42,.12); border-radius: 18px; padding: 12px; background: rgba(245,241,234,.8); }
.evolution-photo-card img, .clinical-photo-card img { width: 100%; max-height: 220px; object-fit: cover; border-radius: 14px; border: 1px solid rgba(74,52,42,.1); }
.clinical-photo-card img { max-width: 420px; }
@media (max-width: 980px) { .module-audit-grid, .spa-form-grid.two-cols, .audit-summary-grid, .checklist-grid { grid-template-columns: 1fr; } .audit-toolbar { flex-direction: column; align-items: stretch; } .evolution-photo-card { grid-template-columns: 1fr; } }

/* =========================================================
   YacoSpa v5 - Paletas Sustainable Skincare
   Este bloque final hace que la paleta seleccionada desde Apariencia
   se aplique en todo el sitio, no solo en el formulario de colores.
   ========================================================= */
:root {
  --primary: #C7A18B;
  --secondary: #E2CFC3;
  --accent: #F1EAE5;
  --sidebar-bg: #9A7565;
  --bg: #FAF7F3;
  --panel: #FFFFFF;
  --text: #2C2724;
  --muted: #826B60;
  --line: #F1EAE5;
  --primary-dark: #9A7565;
  --primary-soft: #F1EAE5;
  --primary-rgb: 199, 161, 139;
  --secondary-rgb: 226, 207, 195;
  --accent-rgb: 241, 234, 229;
  --sidebar-rgb: 154, 117, 101;
  --bg-rgb: 250, 247, 243;
  --panel-rgb: 255, 255, 255;
  --text-rgb: 44, 39, 36;
  --muted-rgb: 130, 107, 96;
  --shadow: 0 22px 55px rgba(var(--text-rgb), .10);
}

body,
.main {
  background:
    radial-gradient(circle at 16% 8%, rgba(var(--accent-rgb), .55), transparent 30%),
    radial-gradient(circle at 88% 2%, rgba(var(--secondary-rgb), .24), transparent 30%),
    linear-gradient(135deg, var(--bg) 0%, rgba(var(--secondary-rgb), .28) 100%) !important;
  color: var(--text) !important;
}

.sidebar,
.mobile-header {
  background: linear-gradient(180deg, var(--sidebar-bg) 0%, var(--primary) 100%) !important;
  border-color: rgba(var(--accent-rgb), .35) !important;
}
.brand-icon,
.operation-icon,
.appearance-preview-logo {
  background: linear-gradient(135deg, var(--accent), var(--secondary)) !important;
  color: var(--text) !important;
}
.brand p,
.sidebar-footer,
.nav-btn { color: rgba(255, 255, 255, .76) !important; }
.nav-btn:hover,
.nav-btn.active {
  background: rgba(var(--accent-rgb), .18) !important;
  color: #FFFFFF !important;
}

.topbar,
.operation-hub,
.stat-card,
.panel,
.item,
.list .item,
.table-card,
.modal-card,
.drawer-card,
#dashboard .panel,
#appointments .panel,
#patients .panel,
#clinical .panel,
#consents .panel,
#payments .panel,
#inventory .panel,
#reports .panel,
#specialists .panel,
#messages .panel,
#saas .panel,
#appearance .panel {
  background: linear-gradient(180deg, rgba(var(--panel-rgb), .98), rgba(var(--bg-rgb), .88)) !important;
  border: 1px solid rgba(var(--primary-rgb), .18) !important;
  box-shadow: 0 22px 48px rgba(var(--text-rgb), .08) !important;
  color: var(--text) !important;
}

input, textarea, select {
  background: rgba(var(--panel-rgb), .98) !important;
  border-color: rgba(var(--primary-rgb), .22) !important;
  color: var(--text) !important;
}
input:focus, textarea:focus, select:focus {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 4px rgba(var(--primary-rgb), .12) !important;
}

.primary-btn,
.saas-tab-btn.active,
#saas .saas-tab-btn.active,
#saas .saas-module-check input:checked + span,
.badge.primary {
  background: var(--primary) !important;
  color: #FFFFFF !important;
  border-color: var(--primary) !important;
}
.primary-btn:hover { background: var(--sidebar-bg) !important; }
.secondary-btn,
.saas-tab-btn,
.filter-chip,
.inventory-filter-chip,
.payment-method-chip,
.specialist-chip {
  background: rgba(var(--accent-rgb), .45) !important;
  color: var(--text) !important;
  border-color: rgba(var(--primary-rgb), .20) !important;
}

#dashboard .operation-card,
#dashboard .stat-card,
#appointments .appointment-calendar,
#appointments .appointment-calendar-day,
#appointments .calendar-day,
#appointments .appointment-slot,
#appointments .appointment-availability-slots button,
#patients .patient-search-hero,
#patients .patient-identity-card,
#patients .patient-bulk-panel,
#patients .bulk-preview,
#patients .patient-results-panel,
.patient-card-v2,
.patient-photo-preview,
#clinical .clinical-history-kicker,
#clinical .clinical-history-panel-head,
#clinical .clinical-card,
.clinical-accordion,
.clinical-patient-results,
.clinical-search-result,
#consents .consent-summary-card,
#consents .consent-checklist,
#consents .consent-card,
#consents .consent-normative-note,
#consents .signature-pad,
.consent-badge,
#payments .cash-summary-card,
#payments .payment-card,
#payments .payment-method-chip,
#payments .cash-register-box,
#payments .payment-patient-results,
.payment-patient-result,
.payment-pos-preview,
#inventory .inventory-summary-card,
#inventory .inventory-card,
#inventory .inventory-status,
#inventory .laboratory-card,
#inventory .inventory-filter-chip,
#reports .report-filter-card,
#reports .report-result-card,
#reports .report-chart-card,
#reports .chart-track,
#reports .report-table th,
#reports .report-table td,
#specialists .specialist-card,
#specialists .specialists-panel,
.specialist-card-clean,
.specialist-chip,
#messages .message-card,
#messages .message-thread,
#messages .chat-bubble,
#messages .internal-chat-card,
#messages .message-template-card,
#saas .saas-stat-card,
#saas .saas-admin-tabs,
#saas .saas-plan-card,
#saas .saas-module-check,
#saas .saas-quota-panel,
#saas .audit-row,
#saas .permission-cell,
#saas .company-card,
#appearance .appearance-color-grid-improved label,
#appearance .appearance-range-grid label,
#appearance .appearance-preview-stat,
#appearance .appearance-upload-box,
#appearance .appearance-action-bar,
.spa-audit-fields,
.audit-card,
.checklist-grid,
.evolution-photo-card {
  background: rgba(var(--panel-rgb), .92) !important;
  border-color: rgba(var(--primary-rgb), .20) !important;
  color: var(--text) !important;
}

#dashboard .operation-card:hover,
#appointments .appointment-calendar-day.is-today,
#appointments .appointment-calendar-day.active,
#appointments .appointment-slot.active,
#appointments .appointment-availability-slots button:hover,
#clinical .clinical-patient-results button:hover,
.clinical-accordion.is-open,
.clinical-search-result:hover,
#messages .chat-bubble.me,
#messages .message-card.active,
#appearance .appearance-palette-btn.is-active,
#appearance .appearance-palette-btn:hover,
.badge.success,
.badge.ok,
.status-success,
.status-ok,
.alert-success,
.ok,
.status-warning,
.status-overdue,
.status-pending {
  background: rgba(var(--secondary-rgb), .38) !important;
  border-color: rgba(var(--primary-rgb), .30) !important;
  color: var(--text) !important;
}

#reports .chart-track i,
.chart-track i,
.mini-chart-bar,
.report-bar,
#saas .saas-quota-meter i,
.progress-bar i,
.progress-fill {
  background: linear-gradient(90deg, var(--secondary), var(--primary)) !important;
}

#appearance .appearance-palette-grid {
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)) !important;
}
#appearance .appearance-palette-btn.appearance-palette-card {
  min-height: 76px;
  justify-content: flex-start;
  align-items: center;
  background: rgba(var(--panel-rgb), .92) !important;
  border: 1px solid rgba(var(--primary-rgb), .18) !important;
}
#appearance .appearance-palette-copy {
  display: grid;
  gap: 2px;
  text-align: left;
  line-height: 1.2;
}
#appearance .appearance-palette-copy strong {
  color: var(--text);
  font-size: 14px;
}
#appearance .appearance-palette-copy small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.appearance-palette-dots i {
  border: 2px solid rgba(var(--panel-rgb), .95) !important;
  box-shadow: 0 4px 10px rgba(var(--text-rgb), .10) !important;
}

.panel p,
.item p,
.topbar p,
.field-help,
.quick-help,
.audit-card small,
.specialist-extra-clean small { color: var(--muted) !important; }
.audit-card h4,
.cash-summary-card strong,
.payment-total,
.payment-balance { color: var(--text) !important; }

input[type="checkbox"],
input[type="radio"],
input[type="range"] { accent-color: var(--primary) !important; }
::-webkit-scrollbar-thumb { background: var(--secondary) !important; border-radius: 999px; }
::-webkit-scrollbar-track { background: rgba(var(--bg-rgb), .82) !important; }

/* YacoSpa v5 - login e instalación también usan la paleta clara por defecto */
body.login-body,
body.install-body,
body.install-clean-body {
  background:
    radial-gradient(circle at 15% 10%, rgba(var(--accent-rgb), .58), transparent 32%),
    radial-gradient(circle at 86% 18%, rgba(var(--secondary-rgb), .30), transparent 28%),
    linear-gradient(135deg, var(--bg) 0%, rgba(var(--secondary-rgb), .25) 100%) !important;
  color: var(--text) !important;
}
.login-card,
.auth-card,
.install-card,
.install-clean-card,
.install-panel,
.db-help,
.login-note,
.success-box {
  background: rgba(var(--panel-rgb), .96) !important;
  border-color: rgba(var(--primary-rgb), .20) !important;
  color: var(--text) !important;
  box-shadow: 0 24px 64px rgba(var(--text-rgb), .10) !important;
}
.login-logo,
.auth-logo,
.install-logo {
  background: linear-gradient(135deg, var(--accent), var(--secondary)) !important;
  color: var(--text) !important;
  box-shadow: 0 16px 34px rgba(var(--text-rgb), .12) !important;
}
.forgot-link,
.auth-back-link,
.login-note a,
.db-help a {
  color: var(--primary) !important;
}


/* =========================================================
   YacoSpa v6 - Apariencia funcional, módulos sin duplicidad y ficha sanitaria organizada
   ========================================================= */
:root {
  --primary-dark: var(--sidebar-bg) !important;
  --primary-soft: var(--accent) !important;
  --line: var(--accent) !important;
  --shadow: 0 22px 55px rgba(var(--text-rgb), .10) !important;
}

body,
.main {
  background:
    radial-gradient(circle at 16% 8%, rgba(var(--accent-rgb), .58), transparent 30%),
    radial-gradient(circle at 88% 2%, rgba(var(--secondary-rgb), .26), transparent 30%),
    linear-gradient(135deg, var(--bg) 0%, rgba(var(--secondary-rgb), .30) 100%) !important;
  color: var(--text) !important;
}

.sidebar,
.mobile-header {
  background: linear-gradient(180deg, var(--sidebar-bg) 0%, var(--primary) 100%) !important;
  color: #fff !important;
  border-color: rgba(var(--accent-rgb), .32) !important;
}
.brand-icon,
.operation-icon,
.login-logo,
.auth-logo,
.install-logo,
.appearance-preview-logo {
  background: linear-gradient(135deg, var(--accent), var(--secondary)) !important;
  color: var(--text) !important;
}
.brand p,
.sidebar-footer,
.nav-btn { color: rgba(255, 255, 255, .78) !important; }
.nav-btn:hover,
.nav-btn.active {
  background: rgba(var(--accent-rgb), .20) !important;
  color: #fff !important;
}

.topbar,
.operation-hub,
.stat-card,
.panel,
.item,
.list .item,
.table-card,
.modal-card,
.drawer-card,
.appointment-form-card,
.appointment-date-search-card,
.appointment-calendar-panel,
.appointment-patient-panel,
.patient-safety-section,
.patient-safety-card,
.appointment-safety-card,
.audit-card,
.spa-audit-fields,
.clinical-card,
.consent-card,
.payment-card,
.inventory-card,
.specialist-card,
.message-card,
.saas-plan-card,
.appearance-step-card,
.appearance-preview-panel-improved {
  background: linear-gradient(180deg, rgba(var(--panel-rgb), .98), rgba(var(--bg-rgb), .88)) !important;
  border: 1px solid rgba(var(--primary-rgb), .18) !important;
  color: var(--text) !important;
  box-shadow: 0 20px 46px rgba(var(--text-rgb), .08) !important;
}

input,
textarea,
select {
  background: rgba(var(--panel-rgb), .98) !important;
  border-color: rgba(var(--primary-rgb), .24) !important;
  color: var(--text) !important;
}
input:focus,
textarea:focus,
select:focus {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 4px rgba(var(--primary-rgb), .14) !important;
}

.primary-btn,
.appointment-mode-btn.active,
.cash-mode-btn.active,
.saas-tab-btn.active,
#saas .saas-tab-btn.active,
#saas .saas-module-check input:checked + span,
.badge.primary {
  background: var(--primary) !important;
  border-color: var(--primary) !important;
  color: #fff !important;
}
.primary-btn:hover { background: var(--sidebar-bg) !important; }
.secondary-btn,
.appointment-mode-btn,
.cash-mode-btn,
.saas-tab-btn,
.filter-chip,
.inventory-filter-chip,
.payment-method-chip,
.specialist-chip,
.badge,
.consent-badge,
.appointment-safety-status,
.patient-safety-pill {
  background: rgba(var(--accent-rgb), .50) !important;
  border-color: rgba(var(--primary-rgb), .20) !important;
  color: var(--text) !important;
}
.badge.success,
.badge.ok,
.status-success,
.status-ok,
.alert-success,
.ok,
.account-ok,
.appointment-calendar-day.active,
.appointment-calendar-day.is-today,
.appointment-slot.active,
.appointment-availability.is-free,
.clinical-accordion.is-open,
.message-card.active,
.chat-bubble.me,
#appearance .appearance-palette-btn.is-active,
#appearance .appearance-palette-btn:hover {
  background: rgba(var(--secondary-rgb), .42) !important;
  border-color: rgba(var(--primary-rgb), .32) !important;
  color: var(--text) !important;
}
.badge.warning,
.status-warning,
.status-pending,
.has-balance,
.needs-review,
.appointment-availability.is-busy {
  background: rgba(var(--primary-rgb), .13) !important;
  border-color: rgba(var(--primary-rgb), .28) !important;
  color: var(--text) !important;
}

#reports .chart-track i,
.chart-track i,
.mini-chart-bar,
.report-bar,
#saas .saas-quota-meter i,
.progress-bar i,
.progress-fill {
  background: linear-gradient(90deg, var(--secondary), var(--primary)) !important;
}

.panel p,
.item p,
.topbar p,
.field-help,
.quick-help,
.audit-card small,
.specialist-extra-clean small,
.appointment-safety-card small,
.patient-safety-card small,
.patient-safety-note span { color: var(--muted) !important; }

.patient-safety-title {
  display: flex !important;
  justify-content: space-between !important;
  gap: 16px !important;
  align-items: flex-start !important;
  margin-bottom: 16px !important;
}
.patient-safety-pill,
.appointment-safety-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  padding: 7px 12px;
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}
.patient-safety-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.patient-safety-card {
  border-radius: var(--card-radius, 24px) !important;
  padding: 16px !important;
  display: grid;
  gap: 14px;
}
.patient-safety-card-emergency { grid-column: 1 / -1; }
.patient-safety-card-head {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.patient-safety-card-head > span {
  width: 34px;
  height: 34px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  background: rgba(var(--primary-rgb), .14) !important;
  color: var(--primary) !important;
  font-weight: 900;
}
.patient-safety-card-head strong {
  display: block;
  color: var(--text) !important;
}
.patient-safety-card-head small {
  display: block;
  margin-top: 2px;
  line-height: 1.35;
}
.patient-safety-stack { display: grid; gap: 12px; }
.patient-safety-note {
  margin-top: 14px;
  padding: 13px 15px;
  border-radius: 18px;
  border: 1px dashed rgba(var(--primary-rgb), .28) !important;
  background: rgba(var(--accent-rgb), .42) !important;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  color: var(--text) !important;
}

.appointment-safety-card {
  margin-top: 14px;
  border-radius: var(--card-radius, 24px) !important;
  padding: 16px !important;
}
.appointment-safety-head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-start;
  margin-bottom: 12px;
}
.appointment-safety-head strong {
  display: block;
  color: var(--text) !important;
  font-size: 16px;
}
.appointment-safety-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.appointment-safety-grid p,
.appointment-safety-history {
  margin: 0;
  border: 1px solid rgba(var(--primary-rgb), .16) !important;
  background: rgba(var(--accent-rgb), .35) !important;
  border-radius: 16px;
  padding: 11px 12px;
}
.appointment-safety-grid span,
.appointment-safety-history span {
  display: block;
  color: var(--muted) !important;
  font-size: 12px;
  font-weight: 800;
  margin-bottom: 4px;
}
.appointment-safety-grid strong {
  display: block;
  color: var(--text) !important;
  font-size: 13px;
  line-height: 1.35;
}
.appointment-safety-history { margin-top: 10px; }
.appointment-safety-history p { margin: 0; color: var(--text) !important; line-height: 1.45; }

input[type="checkbox"],
input[type="radio"],
input[type="range"] { accent-color: var(--primary) !important; }
::-webkit-scrollbar-thumb { background: var(--secondary) !important; border-radius: 999px; }
::-webkit-scrollbar-track { background: rgba(var(--bg-rgb), .82) !important; }

@media (max-width: 980px) {
  .patient-safety-grid,
  .appointment-safety-grid { grid-template-columns: 1fr; }
  .patient-safety-title,
  .appointment-safety-head { flex-direction: column; }
}


/* =========================================================
   YacoSpa v7 · Tema estético claro para clínicas de belleza y spa
   Aplica una experiencia más luminosa, cálida y profesional por módulo.
   ========================================================= */
html { background: var(--bg) !important; }
body {
  background:
    radial-gradient(circle at top left, rgba(var(--secondary-rgb), .42), transparent 34%),
    linear-gradient(135deg, var(--bg) 0%, rgba(var(--accent-rgb), .68) 100%) !important;
  color: var(--text) !important;
}
.sidebar {
  background: linear-gradient(180deg, var(--sidebar-bg) 0%, rgba(var(--secondary-rgb), .36) 100%) !important;
  color: var(--sidebar-text) !important;
  border-right: 1px solid rgba(var(--primary-rgb), .18) !important;
  box-shadow: 18px 0 46px rgba(var(--text-rgb), .06) !important;
}
.brand { padding: 8px 6px 18px !important; margin-bottom: 14px !important; border-bottom: 1px solid rgba(var(--primary-rgb), .14) !important; }
.brand-icon {
  background: linear-gradient(135deg, rgba(var(--primary-rgb), .22), rgba(var(--secondary-rgb), .72)) !important;
  color: var(--text) !important;
  border: 1px solid rgba(var(--primary-rgb), .22) !important;
  box-shadow: 0 14px 28px rgba(var(--primary-rgb), .18) !important;
}
.brand h1, .sidebar-footer p { color: var(--sidebar-text) !important; }
.brand p, .sidebar-footer { color: var(--sidebar-muted) !important; }
.sidebar-footer { border-top-color: rgba(var(--primary-rgb), .15) !important; }
nav { gap: 7px !important; }
.nav-btn {
  color: var(--sidebar-text) !important;
  background: rgba(var(--panel-rgb), .45) !important;
  border: 1px solid transparent !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  min-height: 42px !important;
  box-shadow: none !important;
}
.nav-btn:hover,
.nav-btn.active {
  background: var(--sidebar-active-bg) !important;
  color: var(--sidebar-active-text) !important;
  border-color: rgba(var(--primary-rgb), .22) !important;
  box-shadow: 0 10px 24px rgba(var(--primary-rgb), .13) !important;
  transform: translateX(2px);
}
.main { background: transparent !important; }
.topbar {
  background: rgba(var(--panel-rgb), .78) !important;
  border: 1px solid rgba(var(--primary-rgb), .16) !important;
  border-radius: 26px !important;
  padding: 18px 20px !important;
  box-shadow: 0 16px 44px rgba(var(--text-rgb), .055) !important;
  backdrop-filter: blur(12px);
}
.topbar h2 { color: var(--text) !important; letter-spacing: -.03em !important; }
.topbar p { color: var(--muted) !important; }
.panel, .stat-card, .item, .operation-card, .appointment-form-card, .appointment-mode-panel,
.appointment-calendar-panel, .patient-results-panel, .clinical-history-panel,
.cash-main-panel, .payment-portfolio-card, .inventory-form, .consent-card,
.equipment-card, .waste-card, .document-card, .report-card, .saas-card,
.appearance-step-card, .appearance-preview-panel, .appearance-helper-strip, .appearance-hero {
  background: rgba(var(--panel-rgb), .93) !important;
  border: 1px solid rgba(var(--primary-rgb), .15) !important;
  border-radius: var(--card-radius) !important;
  box-shadow: 0 18px 42px rgba(var(--text-rgb), .06) !important;
  color: var(--text) !important;
}
.panel:hover, .stat-card:hover, .operation-card:hover, .item:hover {
  border-color: rgba(var(--primary-rgb), .28) !important;
  box-shadow: 0 22px 48px rgba(var(--text-rgb), .075) !important;
}
.stat-card { position: relative !important; overflow: hidden !important; }
.stat-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 5px;
  background: linear-gradient(180deg, var(--primary), var(--secondary));
  opacity: .9;
}
.stat-card span, .panel p, .item p, small, .empty-state, .inline-status { color: var(--muted) !important; }
.stat-card strong, .panel h3, .panel h4, .item h4, .operation-card strong,
.form-panel h3, .section h3, .section h4 { color: var(--text) !important; }
.primary-btn, button.primary-btn, .auth-button, .install-btn,
.cash-mode-tab.active, .saas-tab.active {
  background: linear-gradient(135deg, var(--primary) 0%, color-mix(in srgb, var(--primary) 82%, var(--text) 18%) 100%) !important;
  color: #FFFFFF !important;
  border: 1px solid rgba(var(--primary-rgb), .28) !important;
  border-radius: var(--btn-radius) !important;
  box-shadow: 0 14px 28px rgba(var(--primary-rgb), .24) !important;
}
.primary-btn:hover, button.primary-btn:hover, .auth-button:hover, .install-btn:hover {
  filter: saturate(1.04) brightness(.98);
  transform: translateY(-1px);
}
.secondary-btn, button.secondary-btn, .ghost-btn, .cash-mode-tab, .saas-tab,
.appointment-accordion-trigger, .dashboard-accordion-trigger {
  background: rgba(var(--accent-rgb), .72) !important;
  color: var(--text) !important;
  border: 1px solid rgba(var(--primary-rgb), .18) !important;
  border-radius: var(--btn-radius) !important;
  box-shadow: none !important;
}
.secondary-btn:hover, .cash-mode-tab:hover, .saas-tab:hover {
  background: rgba(var(--primary-rgb), .13) !important;
  border-color: rgba(var(--primary-rgb), .28) !important;
}
input, select, textarea, .search-input, .consent-search {
  background: #FFFFFF !important;
  color: var(--text) !important;
  border: 1px solid rgba(var(--primary-rgb), .18) !important;
  border-radius: 16px !important;
  box-shadow: 0 8px 20px rgba(var(--text-rgb), .035) !important;
}
input:focus, select:focus, textarea:focus {
  outline: none !important;
  border-color: rgba(var(--primary-rgb), .58) !important;
  box-shadow: 0 0 0 4px rgba(var(--primary-rgb), .14) !important;
}
label { color: var(--text) !important; }
.badge, .chip, .pill, .consent-badge, .inventory-status, .appointment-count,
.saas-kicker, .operation-status, .payment-account-status {
  background: rgba(var(--primary-rgb), .12) !important;
  color: color-mix(in srgb, var(--primary) 62%, var(--text) 38%) !important;
  border: 1px solid rgba(var(--primary-rgb), .16) !important;
}
.badge.danger, .danger, .inventory-status.danger { background: #FEE4E2 !important; color: #991B1B !important; border-color: #FECACA !important; }
.badge.warning, .warning { background: #FFF4D8 !important; color: #8A5B00 !important; border-color: #FFE2A4 !important; }
.badge.paid, .success, .account-ok { background: rgba(var(--primary-rgb), .14) !important; color: var(--text) !important; border-color: rgba(var(--primary-rgb), .18) !important; }
.table, table, .report-table, .saas-table { background: #FFFFFF !important; border-color: rgba(var(--primary-rgb), .16) !important; }
th { background: rgba(var(--accent-rgb), .74) !important; color: var(--text) !important; }
td { border-color: rgba(var(--primary-rgb), .12) !important; color: var(--text) !important; }

/* Panel principal */
.operation-hub {
  background:
    radial-gradient(circle at top right, rgba(var(--primary-rgb), .16), transparent 32%),
    rgba(var(--panel-rgb), .94) !important;
}
.operation-hub-head h3 { font-size: clamp(24px, 2vw, 34px) !important; letter-spacing: -.035em !important; }
.operation-card-grid { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)) !important; }
.operation-card {
  min-height: 130px !important;
  text-align: left !important;
  background: linear-gradient(145deg, #FFFFFF 0%, rgba(var(--accent-rgb), .68) 100%) !important;
}
.operation-icon, .appointment-summary-avatar, .message-avatar, .patient-avatar, .specialist-avatar {
  background: linear-gradient(135deg, rgba(var(--primary-rgb), .20), rgba(var(--secondary-rgb), .76)) !important;
  color: var(--text) !important;
  border: 1px solid rgba(var(--primary-rgb), .22) !important;
}

/* Agenda */
#appointments .appointment-mode-panel,
#appointments .appointment-schedule-panel,
#appointments .appointment-patient-panel,
#appointments .appointment-calendar-panel {
  background: linear-gradient(145deg, #FFFFFF 0%, rgba(var(--accent-rgb), .58) 100%) !important;
}
.appointment-form-card { padding: 22px !important; }
.appointment-field-row, .appointment-form-grid, .form-grid, .form-grid-2, .form-grid-3 {
  gap: 15px !important;
}
.appointment-patient-safety-card,
.appointment-patient-summary,
.clinical-safety-grid,
.patient-clinical-card,
.appointment-detail-grid p {
  background: rgba(var(--accent-rgb), .68) !important;
  border: 1px solid rgba(var(--primary-rgb), .16) !important;
  border-radius: 18px !important;
}
.appointment-patient-safety-card strong, .appointment-detail-grid strong { color: var(--text) !important; }
.appointment-month-calendar button, .calendar-day, .appointment-day-card {
  background: #FFFFFF !important;
  border-color: rgba(var(--primary-rgb), .15) !important;
  color: var(--text) !important;
}
.appointment-month-calendar button:hover, .calendar-day:hover {
  background: rgba(var(--primary-rgb), .12) !important;
}

/* Clientes e historia estética */
#patients .patient-form-v2, #clinical .clinical-evolution-panel, #clinical .clinical-history-panel {
  background: linear-gradient(145deg, #FFFFFF 0%, rgba(var(--secondary-rgb), .32) 100%) !important;
}
.patient-photo-preview, .clinical-selected-patient, .patient-search-note,
.patient-bulk-panel, .bulk-preview, .clinical-accordion-item {
  background: rgba(var(--accent-rgb), .66) !important;
  border-color: rgba(var(--primary-rgb), .16) !important;
}
.clinical-accordion-item::before, .clinical-accordion-consent::before,
.clinical-accordion-clinical::before, .clinical-accordion-appointment::before {
  background: var(--primary) !important;
}

/* Consentimientos, bioseguridad, tratamientos, equipos, residuos y documentos */
#consents .consent-form, #consents .consent-list-panel,
#biosecurity .panel, #treatments .panel, #equipment .panel, #waste .panel, #documents .panel {
  background: linear-gradient(145deg, #FFFFFF 0%, rgba(var(--accent-rgb), .60) 100%) !important;
}
.consent-checklist, .consent-normative-note, .rips-warning-panel,
.biosecurity-checklist, .treatment-category-card, .equipment-maintenance-card,
.waste-summary-card, .document-expiry-card {
  background: rgba(var(--primary-rgb), .09) !important;
  border-color: rgba(var(--primary-rgb), .17) !important;
  color: var(--text) !important;
}

/* Inventario, caja e informes */
#inventory .stat-card, #payments .cash-main-panel, #reports .panel,
.inventory-card, .payment-card, .report-summary-card, .report-chart-card {
  background: linear-gradient(145deg, #FFFFFF 0%, rgba(var(--accent-rgb), .58) 100%) !important;
}
.balance-box, .payment-pos-preview, .cash-summary-card,
.inventory-alert, .inventory-summary-card, .report-filter-panel {
  background: rgba(var(--accent-rgb), .78) !important;
  border-color: rgba(var(--primary-rgb), .16) !important;
}
.payment-card-pending { border-left: 5px solid #D9A441 !important; }
.payment-card-paid { border-left: 5px solid var(--primary) !important; }

/* SaaS, mensajes y apariencia */
#saas .panel, #messages .panel, #appearance .panel {
  background: rgba(var(--panel-rgb), .95) !important;
}
.message-bubble, .message-template-card, .saas-module-card, .plan-card,
.appearance-palette-card, .appearance-helper-item {
  background: linear-gradient(145deg, #FFFFFF 0%, rgba(var(--accent-rgb), .62) 100%) !important;
  border: 1px solid rgba(var(--primary-rgb), .16) !important;
  color: var(--text) !important;
}
.appearance-palette-card.is-active {
  border-color: rgba(var(--primary-rgb), .52) !important;
  box-shadow: 0 0 0 4px rgba(var(--primary-rgb), .13), 0 18px 38px rgba(var(--primary-rgb), .16) !important;
}
.appearance-palette-dots i { border: 2px solid #FFFFFF !important; box-shadow: 0 8px 18px rgba(var(--text-rgb), .12) !important; }
.appearance-preview-card {
  background: var(--preview-bg, var(--bg)) !important;
  border-color: rgba(var(--primary-rgb), .16) !important;
}
.appearance-preview-sidebar {
  background: var(--preview-sidebar, var(--sidebar-bg)) !important;
  color: var(--preview-text, var(--text)) !important;
  border-right: 1px solid rgba(var(--primary-rgb), .14) !important;
}
.appearance-preview-content { background: var(--preview-panel, #FFFFFF) !important; }

/* Evitar restos del tema oscuro anterior en paneles visibles */
.auth-card, .install-card, .modal-card, .overlay-panel {
  background: rgba(var(--panel-rgb), .96) !important;
  color: var(--text) !important;
  border-color: rgba(var(--primary-rgb), .18) !important;
}
.auth-page, .install-page {
  background: linear-gradient(135deg, var(--bg), rgba(var(--secondary-rgb), .45)) !important;
}

@media (max-width: 900px) {
  .mobile-header {
    background: rgba(var(--panel-rgb), .94) !important;
    border-bottom: 1px solid rgba(var(--primary-rgb), .16) !important;
    color: var(--text) !important;
  }
  .sidebar { box-shadow: 18px 0 48px rgba(var(--text-rgb), .16) !important; }
  .topbar { border-radius: 20px !important; }
}


/* YacoSpa v8: bloqueo preventivo de pantallas heredadas que no pertenecen a estética/spa. */
#odontogram,
#rips,
.nav-btn[data-section="odontogram"],
.nav-btn[data-section="rips"] {
  display: none !important;
}