:root {
  --blue: #1f8a8c;
  --blue-strong: #156e74;
  --cyan: #18b8b1;
  --green: #2a9d3d;
  --amber: #f3b23f;
  --accent: #ff6b5e;
  --brand-grad: linear-gradient(135deg, #18b8b1 0%, #1f8a8c 55%, #166b8f 100%);
  --ink: #1c2b39;
  --muted: #6b7785;
  --line: #e3e8ee;
  --surface: #ffffff;
  --page: #eef2f6;
  --soft-blue: #e6f6f6;
  --soft-green: #eaf7ec;
  --soft-amber: #fff5dc;
  font-family: "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
}

* { box-sizing: border-box; }
html { min-height: 100%; background: var(--page); }
body { margin: 0; min-height: 100%; color: var(--ink); background: var(--page); font-size: 14px; }
button, input, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }

.top-shell { height: 64px; display: grid; grid-template-columns: auto minmax(240px, 480px) 1fr; align-items: center; gap: 18px; padding: 0 26px; background: #fff; color: var(--ink); border-bottom: 1px solid var(--line); box-shadow: 0 2px 10px rgba(28,43,57,.04); position: sticky; top: 0; z-index: 20; }
.brand { display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; }
.brand-logo { height: 34px; width: auto; display: block; }
.brand-mark { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; color: #fff; background: var(--brand-grad); font-size: 13px; font-weight: 700; }
.global-search { height: 42px; display: flex; align-items: center; gap: 9px; border-radius: 999px; background: var(--page); border: 1px solid var(--line); padding: 0 16px; color: var(--muted); transition: border-color .15s, box-shadow .15s; }
.global-search:focus-within { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(31,138,140,.14); background: #fff; }
.global-search input { width: 100%; border: 0; outline: 0; background: transparent; color: var(--ink); }
.global-search input::placeholder { color: #94a1ad; }
.search-glyph { font-size: 18px; line-height: 1; color: var(--blue); }
.top-actions { display: flex; justify-content: flex-end; align-items: center; gap: 10px; min-width: 0; }
.quiet-button, .clinic-button { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--line); color: #44515d; background: #fff; font-weight: 600; white-space: nowrap; border-radius: 999px; padding: 8px 14px; }
.quiet-button:hover, .clinic-button:hover { background: var(--page); }
.clinic-button { max-width: 240px; overflow: hidden; text-overflow: ellipsis; }
.avatar { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--brand-grad); color: #fff; font-weight: 700; }
.role-pill { padding: 5px 11px; border-radius: 999px; background: var(--soft-blue); color: var(--blue-strong); font-weight: 600; white-space: nowrap; }

.module-nav { height: 60px; display: flex; align-items: center; gap: 6px; padding: 0 22px; background: #fff; border-bottom: 1px solid var(--line); position: sticky; top: 64px; z-index: 19; overflow-x: auto; }
.module-nav a { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; color: #50616f; border-radius: 999px; white-space: nowrap; font-weight: 600; transition: background .15s, color .15s; }
.module-nav a.active { color: #fff; background: var(--brand-grad); box-shadow: 0 6px 16px rgba(24,184,177,.32); font-weight: 700; }
.module-nav a:hover:not(.active) { background: var(--page); color: var(--ink); }
.module-nav a.active .nav-icon { background: rgba(255,255,255,.22); border-color: rgba(255,255,255,.4); color: #fff; }

.page-shell { padding: 24px clamp(14px, 2.4vw, 40px); }
.workspace { width: min(100%, 1600px); margin: 0 auto; animation: enter .28s ease-out; }
.single-panel { width: min(100%, 1440px); }
@keyframes enter { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

.panel { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 10px 30px rgba(28,43,57,.06); min-width: 0; overflow: hidden; }
.agenda-layout { display: grid; grid-template-columns: 200px minmax(0, 1fr); align-items: start; }
.day-sidebar { background: #fff; border: 1px solid var(--line); border-right: 0; padding: 14px; min-height: 710px; border-radius: 18px 0 0 18px; }
.date-card { text-align: center; padding: 8px 0 12px; }
.weekday, .month { display: block; font-size: 18px; }
.day-row { display: grid; grid-template-columns: 36px 1fr 36px; align-items: center; gap: 6px; }
.day-row button { border: 0; background: transparent; color: #183b58; font-size: 48px; line-height: 1; }
.day-row strong { font-size: 48px; line-height: 1; }
.soft-alert { margin: 0 -12px 10px; padding: 10px; text-align: center; color: #a66f18; background: var(--soft-amber); border-top: 1px solid #f4dfad; border-bottom: 1px solid #f4dfad; }
.select-label { display: block; margin: 8px 0 5px; color: var(--muted); }
.control, input, select { min-height: 38px; border: 1px solid var(--line); border-radius: 10px; background: #fff; padding: 7px 12px; color: var(--ink); }
.filter-stack { display: grid; gap: 9px; padding-top: 12px; color: var(--blue); }
.filter-stack label { display: flex; gap: 8px; line-height: 1.35; }

.tabs-bar { min-height: 56px; display: flex; align-items: center; gap: 6px; padding: 10px 14px; border-bottom: 1px solid var(--line); background: #fbfcfd; position: relative; overflow-x: auto; }
.tab-title, .tab, .tabs-bar a.tab { display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 15px; border: 0; border-radius: 999px; background: transparent; color: #536272; white-space: nowrap; font-weight: 600; }
.tab-title { font-size: 16px; font-weight: 700; color: var(--ink); }
.tab-title span { padding: 4px 9px; border-radius: 999px; color: #fff; background: var(--accent); font-size: 12px; font-weight: 700; }
.tab:hover, .tabs-bar a.tab:hover { background: #eef2f6; }
.tab.active, .tabs-bar a.active { background: var(--soft-blue); color: var(--blue-strong); box-shadow: inset 0 0 0 1px rgba(31,138,140,.3); }
.tab-actions { display: flex; align-items: center; gap: 6px; margin-left: auto; padding: 5px 8px; }
.tab-actions button, .filter-row button, .content-header button, .patient-filter button { min-height: 32px; border: 1px solid #bbc5cf; border-radius: 5px; background: #fff; padding: 0 12px; }
.primary { color: #fff; border-color: transparent !important; background: var(--brand-grad) !important; font-weight: 700; box-shadow: 0 6px 16px rgba(24,184,177,.28); }
.primary:hover { filter: brightness(1.04); }
.success { color: #fff; border-color: #75bd80 !important; background: #82c98b !important; font-weight: 700; }

.inline-search { display: flex; align-items: center; gap: 8px; padding: 14px 10px 10px; }
.inline-search input { width: 100%; }
.agenda-table { padding-bottom: 18px; }
.agenda-head, .appointment-row { display: grid; grid-template-columns: 74px minmax(260px, 1.7fr) minmax(150px, 1fr) minmax(150px, .95fr) minmax(132px, .7fr); align-items: center; column-gap: 12px; padding: 0 10px; }
.agenda-head { height: 32px; font-weight: 700; color: #0c1825; }
.appointment-row { min-height: 78px; border-top: 1px solid var(--line); position: relative; transition: background .12s; }
.appointment-row:hover { background: var(--soft-blue); }
.time-chip { width: 54px; min-height: 62px; display: grid; place-items: center; border-radius: 12px; color: #fff; background: var(--brand-grad); font-weight: 700; box-shadow: 0 5px 14px rgba(24,184,177,.28); }
.time-chip b { line-height: .8; }
.patient-cell { display: grid; gap: 3px; position: relative; }
.patient-cell small { color: #425264; }
.link-button, .state-link { border: 0; background: transparent; color: var(--blue-strong); padding: 0; text-align: left; font-weight: 700; }
.state-link { font-weight: 500; }
.status-pill { display: inline-flex; justify-content: center; min-width: 130px; padding: 7px 12px; border-radius: 999px; color: #fff; background: var(--green); font-weight: 700; }
.floating-menu { display: none; position: absolute; z-index: 30; min-width: 230px; background: #fff; border: 1px solid #aeb8c2; border-radius: 6px; box-shadow: 0 10px 28px rgba(21,32,43,.16); padding: 8px 0; }
.floating-menu.open { display: grid; animation: pop .15s ease-out; }
.floating-menu.right { right: 24px; }
.floating-menu button { border: 0; background: #fff; text-align: left; padding: 9px 16px; color: #2d3b48; }
.floating-menu button:hover { background: #f0f7fc; }
@keyframes pop { from { opacity: 0; transform: scale(.98) translateY(-4px); } to { opacity: 1; transform: scale(1) translateY(0); } }

.content-header { display: flex; justify-content: space-between; gap: 16px; align-items: start; padding: 24px 20px 12px; }
h1 { margin: 0 0 6px; font-size: clamp(22px, 2.2vw, 30px); line-height: 1.05; font-weight: 500; color: #35485a; }
h2 { margin: 0 0 10px; font-size: 16px; }
p { margin: 0; color: #566575; line-height: 1.5; }
.info-band { margin: 10px 12px; padding: 13px 16px; border: 1px solid #acd7ed; border-radius: 5px; color: #16658f; background: #dff3fb; }
.patient-filter, .filter-row { display: flex; gap: 10px; align-items: center; padding: 12px 18px; flex-wrap: wrap; }
.patient-filter input:first-of-type { flex: 1 1 280px; }
.wide-table { overflow: auto; padding: 10px 18px 18px; }
table { width: 100%; border-collapse: collapse; min-width: 760px; }
th { background: var(--blue-strong); color: #fff; text-align: left; padding: 12px 10px; font-size: 13px; }
td { border-bottom: 1px solid #e1e5e9; padding: 12px 10px; color: #46515c; }
.patients-table th { background: var(--blue); }
.dots { width: 30px; height: 30px; border: 0; border-radius: 5px; background: transparent; font-size: 22px; }
.check { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; border: 2px solid #b6c0c9; color: #fff; font-size: 12px; font-weight: 700; }
.check.on { border-color: #49ad5a; background: #49ad5a; }
.progress { width: 90px; height: 14px; background: #e7edf2; border-radius: 3px; overflow: hidden; }
.progress span { display: block; height: 100%; background: var(--blue); }

.stat-row { display: grid; grid-template-columns: repeat(4, minmax(130px, 1fr)); gap: 12px; padding: 14px 20px; }
.stat-row div, .finance-grid article, .admin-grid article, .report-board article, .kanban article { border: 1px solid #dbe1e7; border-radius: 8px; background: #fff; padding: 14px; }
.stat-row span, .finance-grid span { display: block; color: #52606d; }
.stat-row strong, .finance-grid strong { display: block; margin-top: 6px; color: var(--blue); font-size: 28px; line-height: 1; }
.stat-row small { display: block; margin-top: 8px; color: var(--muted); }
.stat-row .green strong { color: var(--green); }
.stat-row .cyan strong { color: var(--cyan); }
.stat-row .amber strong { color: var(--amber); }

.analysis-intro { max-width: 720px; margin: 36px auto 18px; text-align: center; }
.analysis-grid { display: grid; grid-template-columns: 220px 1fr; gap: 36px; align-items: end; padding: 26px 60px; }
.funnel { height: 240px; display: grid; place-items: center; color: #fff; font-size: 22px; font-weight: 700; background: var(--brand-grad); clip-path: polygon(8% 0, 92% 0, 68% 100%, 32% 100%); }
.line-chart, .bar-chart { height: 260px; display: flex; align-items: end; gap: 11px; padding: 20px; border: 1px solid #d7dde3; background: repeating-linear-gradient(to top, #fff, #fff 39px, #edf1f5 40px); }
.line-chart span, .bar-chart span { flex: 1; min-width: 18px; border-radius: 5px 5px 0 0; background: linear-gradient(180deg, #2fc0b8, #1f8a8c); position: relative; }
.bar-chart span { background: linear-gradient(#60bc73, #289b44); }
.bar-chart b { position: absolute; left: 50%; bottom: -24px; transform: translateX(-50%); color: #566575; font-size: 11px; white-space: nowrap; }
.metric-strip { display: flex; justify-content: center; gap: 4px; padding: 16px 20px 34px; }
.metric-strip strong { min-width: 130px; text-align: center; color: #fff; padding: 14px; background: var(--blue); border-radius: 10px; }
.metric-strip strong:nth-child(2) { background: #55b75b; }
.metric-strip strong:nth-child(3) { background: #f2ae41; }
.metric-strip b { font-size: 26px; }
.finance-grid, .admin-grid, .report-board, .kanban { display: grid; gap: 14px; padding: 14px 20px; }
.finance-grid { grid-template-columns: repeat(3, 1fr); }
.admin-grid { grid-template-columns: repeat(3, 1fr); }
.report-board { grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr); }
.kanban { grid-template-columns: repeat(3, 1fr); align-items: start; }
.task { display: grid; gap: 5px; padding: 12px; border: 1px solid #dce2e8; border-radius: 7px; background: #f9fbfc; margin-top: 10px; }
.task span { color: #607080; }

@media (min-width: 1500px) {
  .workspace { width: min(100%, 1880px); }
  .single-panel { width: min(100%, 1680px); }
  .agenda-head, .appointment-row { grid-template-columns: 80px minmax(360px, 1.8fr) minmax(210px, 1fr) minmax(190px, .9fr) minmax(150px, .7fr); }
}

@media (max-width: 900px) {
  .top-shell { grid-template-columns: 1fr auto; height: auto; padding: 10px 12px; gap: 10px; }
  .global-search { grid-column: 1 / -1; order: 3; }
  .top-actions { gap: 8px; }
  .quiet-button, .clinic-button { display: none; }
  .module-nav { top: 94px; padding: 0 8px; }
  .page-shell { padding: 12px 8px; }
  .agenda-layout { grid-template-columns: 1fr; }
  .day-sidebar { min-height: auto; border-right: 1px solid #d6dce3; }
  .filter-stack { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .agenda-panel { border-top: 0; }
  .agenda-head { display: none; }
  .appointment-row { grid-template-columns: 62px 1fr; gap: 10px; padding: 12px; align-items: start; }
  .appointment-row > div:nth-child(n+3) { grid-column: 2; }
  .status-pill { min-width: 0; }
  .content-header { flex-direction: column; }
  .stat-row, .finance-grid, .admin-grid, .report-board, .kanban, .analysis-grid { grid-template-columns: 1fr; padding-left: 12px; padding-right: 12px; }
  .funnel { max-width: 260px; margin: 0 auto; }
  .metric-strip { flex-direction: column; }
}

@media (max-width: 560px) {
  body { font-size: 13px; }
  .brand { font-size: 18px; }
  .role-pill { display: none; }
  .tabs-bar { align-items: center; }
  .tab-title, .tab, .tabs-bar a.tab { padding: 0 10px; }
  .tab-actions { position: sticky; right: 0; background: linear-gradient(90deg, rgba(255,255,255,.8), #fff 22px); }
  .filter-stack { grid-template-columns: 1fr; }
  .patient-filter input, .patient-filter select, .filter-row input, .filter-row select { flex: 1 1 100%; width: 100%; }
  .line-chart, .bar-chart { overflow-x: auto; }
}

/* Dental22 refinements */
.panel, .day-sidebar, .login-card { border-radius: 8px; }
.agenda-layout { gap: 12px; }
.day-sidebar { border-right: 1px solid #d6dce3; }
.top-shell { box-shadow: 0 3px 14px rgba(5, 57, 100, .18); }
.module-nav { box-shadow: 0 2px 12px rgba(30, 41, 54, .06); }
.control, input, select, .tab-actions button, .filter-row button, .content-header button, .patient-filter button, .task button { border-radius: 8px; }
.time-chip, .status-pill, .tab-title span, .role-pill { border-radius: 8px; }
.floating-menu { position: fixed; border-radius: 8px; z-index: 100; padding: 7px; }
.floating-menu button { display: flex; align-items: center; gap: 9px; border-radius: 7px; min-height: 38px; }
.link-button, .state-link, .status-pill, .quiet-button, .clinic-button, .module-nav a, .task button { display: inline-flex; align-items: center; gap: 7px; }
.logout-form { margin: 0; }
.logout-form button { min-height: 30px; border: 1px solid rgba(255,255,255,.45); border-radius: 8px; color: #fff; background: rgba(255,255,255,.12); padding: 0 10px; }

.nav-icon, .btn-icon, .menu-icon, .title-icon { display: inline-grid; place-items: center; flex: 0 0 auto; width: 18px; height: 18px; border-radius: 5px; background: #e8f5fc; border: 1px solid #b7dff3; color: var(--blue); position: relative; }
.btn-icon { width: 16px; height: 16px; border-radius: 4px; }
.menu-icon { width: 20px; height: 20px; }
.title-icon { width: 28px; height: 28px; border-radius: 8px; vertical-align: middle; margin-right: 8px; }
.nav-icon::before, .btn-icon::before, .menu-icon::before, .title-icon::before { content: ""; width: 9px; height: 9px; border: 2px solid currentColor; border-radius: 2px; }
.icon-patient::before { border-radius: 50% 50% 3px 3px; width: 8px; height: 8px; box-shadow: 0 6px 0 -2px currentColor; }
.icon-agenda::before, .icon-date::before { width: 10px; height: 9px; border-radius: 2px; box-shadow: inset 0 3px 0 currentColor; }
.icon-cash::before, .icon-wallet::before { width: 11px; height: 8px; border-radius: 2px; box-shadow: inset 4px 0 0 rgba(8,121,201,.25); }
.icon-report::before { width: 3px; height: 11px; border-width: 0; background: currentColor; box-shadow: 5px -3px 0 currentColor, 10px -7px 0 currentColor; }
.icon-crm::before, .icon-chat::before { width: 11px; height: 8px; border-radius: 5px; box-shadow: 4px 6px 0 -5px currentColor; }
.icon-admin::before { border-radius: 50%; width: 10px; height: 10px; box-shadow: 0 0 0 3px rgba(8,121,201,.15); }
.icon-check::before { width: 9px; height: 5px; border-width: 0 0 2px 2px; transform: rotate(-45deg); border-radius: 0; }
.icon-alert::before { width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 12px solid currentColor; border-top: 0; border-radius: 1px; }
.icon-clock::before { border-radius: 50%; }
.icon-clock::after { content: ""; position: absolute; width: 5px; height: 2px; background: currentColor; transform: translate(2px, 0); }
.icon-plus::before { width: 10px; height: 2px; border: 0; background: currentColor; box-shadow: 0 0 0 currentColor; }
.icon-plus::after { content: ""; position: absolute; width: 2px; height: 10px; background: currentColor; }
.icon-print::before { width: 11px; height: 8px; border-radius: 2px; box-shadow: 0 -5px 0 -2px currentColor; }
.icon-search::before { border-radius: 50%; width: 8px; height: 8px; }
.icon-search::after { content: ""; position: absolute; width: 6px; height: 2px; background: currentColor; transform: translate(5px, 5px) rotate(45deg); }
.icon-mail::before { width: 11px; height: 8px; transform: skewY(-8deg); }
.icon-cancel::before { width: 11px; height: 2px; border: 0; background: currentColor; transform: rotate(45deg); }
.icon-cancel::after { content: ""; position: absolute; width: 11px; height: 2px; background: currentColor; transform: rotate(-45deg); }
.icon-note::before, .icon-plan::before { width: 10px; height: 12px; box-shadow: inset 0 4px 0 rgba(8,121,201,.25); }
.icon-history::before { border-radius: 50%; border-left-color: transparent; }
.icon-status::before { border-radius: 50%; width: 9px; height: 9px; background: currentColor; box-shadow: 0 0 0 3px rgba(8,121,201,.14); }
.icon-login::before { width: 10px; height: 8px; border-left: 0; border-radius: 0 2px 2px 0; }
.icon-news::before { width: 11px; height: 8px; border-radius: 2px; transform: skewX(-10deg); }
.icon-clinic::before { width: 12px; height: 10px; border-radius: 2px; box-shadow: inset 0 -4px 0 rgba(8,121,201,.22); }

.screen-intro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 320px); gap: 14px; padding: 18px 18px 8px; align-items: start; }
.screen-intro h1 { display: flex; align-items: center; }
.intro-tip, .side-help, .filter-explain { border: 1px solid #c9e2f1; background: #f1f9fd; border-radius: 8px; padding: 12px; color: #36566d; }
.intro-tip, .side-help, .filter-explain { display: grid; gap: 5px; }
.intro-tip strong, .side-help strong, .filter-explain strong { color: #0d6092; }
.intro-tip span, .side-help span, .filter-explain span { line-height: 1.45; }
.side-help { margin-bottom: 10px; }
.filter-explain { margin: 12px 0 2px; }
.week-board, .global-board, .reschedule-board, .crm-status-grid, .settings-grid, .practice-list { display: grid; gap: 12px; padding: 12px 18px; }
.week-board { grid-template-columns: repeat(5, minmax(120px, 1fr)); }
.week-board article, .global-board article, .reschedule-board article, .crm-status-grid article, .settings-section, .practice-list { border: 1px solid #d9e1e8; border-radius: 8px; background: #fff; padding: 14px; }
.week-board article { display: grid; gap: 8px; }
.week-board button, .task button { border: 1px solid #c5d4df; border-radius: 8px; background: #f7fbfd; color: #176792; min-height: 32px; }
.global-board { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.global-board article { display: grid; gap: 7px; }
.global-board article span { border-radius: 6px; background: #edf7ee; padding: 7px 9px; color: #2f6640; }
.reschedule-board { grid-template-columns: 1fr 1fr; }

.settings-section { margin: 14px 20px; }
.section-title { padding: 4px 0 12px; }
.section-title.compact { padding: 16px 20px 0; }
.settings-grid { grid-template-columns: repeat(3, minmax(180px, 1fr)); padding: 0; }
.settings-grid label { display: grid; gap: 6px; color: #506172; }
.practice-list { margin-top: 12px; background: #fffaf0; border-color: #f0d69b; }
.practice-list span { display: flex; align-items: center; gap: 8px; color: #594717; }
.crm-status-grid { grid-template-columns: repeat(3, 1fr); }
.crm-status-grid article { display: grid; gap: 6px; }
.crm-status-grid strong { color: var(--blue); }
.crm-status-grid small { color: var(--muted); }
.task button { justify-content: center; margin-top: 6px; }

.login-body { min-height: 100vh; background: linear-gradient(135deg, #18b8b1 0%, #1f8a8c 46%, #eef2f6 46%); }
.login-shell { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.login-card { width: min(100%, 430px); background: #fff; border: 1px solid #d7e1ea; box-shadow: 0 24px 80px rgba(22,45,68,.22); padding: 28px; }
.login-brand { display: flex; justify-content: center; margin-bottom: 14px; }
.login-brand img { height: 60px; width: auto; max-width: 100%; }
.login-form { display: grid; gap: 8px; margin-top: 18px; }
.login-form button { min-height: 42px; border-radius: 8px; margin-top: 8px; }
.login-error { margin-top: 14px; border: 1px solid #efb9b9; background: #fff1f1; color: #9e2d2d; border-radius: 8px; padding: 10px 12px; }

@media (max-width: 900px) {
  .screen-intro, .global-board, .reschedule-board, .crm-status-grid, .settings-grid { grid-template-columns: 1fr; }
  .week-board { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
  .week-board { grid-template-columns: 1fr; }
  .logout-form button { padding: 0 8px; }
}

/* ===== Dental22 v3: filtros, modales, recarga, CRM chat ===== */

/* Filtro multiple de estados */
.filter-multi { display: grid; gap: 8px; padding: 10px; margin-top: 4px; border: 1px solid #d4dde6; border-radius: 10px; background: #fbfdff; }
.filter-multi .fm-all { display: flex; align-items: center; gap: 8px; padding-bottom: 6px; border-bottom: 1px dashed #d4dde6; color: #2b4a63; }
.filter-multi .fm-options { display: grid; gap: 7px; max-height: 220px; overflow: auto; }
.filter-multi .fm-options label { display: flex; align-items: center; gap: 8px; color: #3a4a5a; line-height: 1.3; }
.filter-multi input[type=checkbox] { min-height: 0; width: 16px; height: 16px; accent-color: var(--blue); }
.fm-apply { justify-content: center; margin-top: 2px; }
.fm-count { color: var(--muted); }

/* Tarjeta de recarga automatica */
.reload-card { display: flex; gap: 10px; align-items: flex-start; margin-top: 14px; padding: 12px; border: 1px solid #cfe6d6; border-radius: 10px; background: #f3fbf5; cursor: pointer; }
.reload-card input { margin-top: 2px; width: 18px; height: 18px; accent-color: var(--green); }
.reload-card strong { display: block; color: #1f7a39; }
.reload-card small { display: block; margin-top: 3px; color: #4f6a59; line-height: 1.4; }

/* Boton soft-alert ahora clickeable */
button.soft-alert { width: calc(100% + 24px); border: none; border-top: 1px solid #f4dfad; border-bottom: 1px solid #f4dfad; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; font-weight: 600; }
button.soft-alert:hover { background: #ffeec8; }

/* Split button (Dar cita) */
.split-btn { position: relative; display: inline-flex; }
.split-btn .split-arrow { padding: 0 8px; border-left: 1px solid rgba(255,255,255,.4) !important; border-radius: 0 8px 8px 0 !important; }
.split-btn > .primary:first-child { border-radius: 8px 0 0 8px !important; }
.tab-actions .icon-only { padding: 0 10px; }

/* ===== Modales ===== */
body.modal-open { overflow: hidden; }
.modal-backdrop { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 18px; background: rgba(15,28,40,.55); animation: fade .15s ease-out; }
.modal-backdrop[hidden] { display: none; }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
.modal { width: min(100%, 460px); max-height: 92vh; overflow: auto; background: #fff; border-radius: 14px; box-shadow: 0 30px 80px rgba(10,25,40,.4); animation: pop .16s ease-out; }
.modal-lg { width: min(100%, 880px); }
.modal-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px 6px; }
.modal-head h2 { margin: 0; font-size: 19px; color: #2c3e50; }
.modal-x { border: 0; background: transparent; font-size: 18px; color: #7c8a98; width: 32px; height: 32px; border-radius: 8px; }
.modal-x:hover { background: #eef2f6; }
.modal-help { padding: 0 20px 12px; color: #5a6a78; line-height: 1.5; }
.modal-info { margin: 0 20px 16px; padding: 14px 16px; border-radius: 10px; background: #eef6fb; color: #2c5d7c; }
.modal > input[type=date] { margin: 0 20px; width: calc(100% - 40px); }
.modal-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 20px 18px; color: var(--muted); }
.modal-foot > div { display: flex; gap: 10px; margin-left: auto; }
.modal-foot button { min-height: 38px; border: 1px solid #c2ccd6; border-radius: 9px; background: #fff; padding: 0 16px; }

/* Anulaciones */
.anul-list { display: grid; gap: 10px; padding: 0 20px 8px; }
.anul-row { display: flex; align-items: center; gap: 12px; padding: 12px; border: 1px solid #e6dcc4; border-radius: 10px; background: #fffaf0; }
.anul-row .anul-time { font-weight: 700; color: #a66f18; min-width: 46px; }
.anul-row strong { display: block; color: #3a4a5a; }
.anul-row small { color: var(--muted); }
.anul-row .primary { margin-left: auto; min-height: 34px; padding: 0 14px; border-radius: 9px; }

/* Dar cita - calendario semanal */
.dc-grid { display: grid; grid-template-columns: 230px 1fr; gap: 16px; padding: 0 20px 8px; }
.dc-filters { display: grid; gap: 12px; align-content: start; }
.dc-filters label { display: grid; gap: 5px; color: #51616f; font-size: 13px; }
.dc-check { display: flex !important; align-items: center; gap: 8px; }
.dc-week { border: 1px solid #dde3e9; border-radius: 12px; overflow: hidden; }
.dc-week-head { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; background: #f3f7fa; border-bottom: 1px solid #e1e7ed; }
.dc-week-head button { border: 0; background: transparent; color: var(--blue); font-weight: 600; }
.dc-week-head strong { text-transform: capitalize; color: #36485a; }
.dc-days { display: flex; flex-wrap: wrap; align-content: start; gap: 0; max-height: 380px; overflow: auto; }
.dc-day { flex: 1 1 200px; min-width: 180px; border-right: 1px solid #eef1f4; padding: 10px 12px; display: block; }
.dc-day:last-child { border-right: 0; }
.dc-day.today { background: #f0f9ff; }
.dc-day-name { display: block; font-size: 12px; font-weight: 700; color: #5e6e7c; text-transform: capitalize; padding-bottom: 6px; margin-bottom: 8px; border-bottom: 1px solid #eef1f4; }
.dc-day.today .dc-day-name { color: var(--blue); }
.dc-slot-wrap { display: grid; grid-template-columns: repeat(auto-fill, minmax(58px, 1fr)); gap: 6px; }
.dc-slot { border: 1px solid #cfe0ec; border-radius: 7px; background: #fff; color: #1f6b97; padding: 6px 0; font-size: 12px; cursor: pointer; }
.dc-slot:hover { background: #e9f5fd; }
.dc-slot.picked { background: var(--blue); color: #fff; border-color: var(--blue-strong); }
/* Buscador de paciente en el modal */
.dc-search { position: relative; }
.dc-search-results { position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 2px); background: #fff; border: 1px solid #d5e0e8; border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.12); overflow: hidden; max-height: 240px; overflow-y: auto; }
.dc-sr-item { display: block; width: 100%; text-align: left; border: 0; border-bottom: 1px solid #eef3f7; background: #fff; padding: 8px 12px; cursor: pointer; }
.dc-sr-item:hover { background: #f1f9fd; }
.dc-sr-item strong { display: block; color: #0d3b52; font-size: 13px; }
.dc-sr-item small { color: #748896; font-size: 11px; }
.dc-sr-empty { padding: 10px 12px; color: #748896; font-size: 12px; }
.dc-hint { display: block; font-size: 11px; color: #8496a3; margin-top: 3px; font-weight: 400; }
.dc-hint.ok { color: #1e8b52; font-weight: 600; }

/* ===== CRM estilo WhatsApp ===== */
.crm-wide { width: min(100%, 1320px); }
@media (min-width: 1500px) { .crm-wide { width: min(100%, 1500px); } }
.crm-summary { display: flex; flex-wrap: wrap; gap: 10px; padding: 8px 20px 16px; }
.sum-chip { display: grid; gap: 2px; padding: 10px 14px; min-width: 120px; border: 1px solid #dde4ea; border-radius: 12px; background: #fff; }
.sum-chip .sum-num { font-size: 24px; font-weight: 800; color: #3a4a5a; line-height: 1; }
.sum-chip span:last-child { color: #6a7785; font-size: 12px; }
.sum-chip.tone-blue { border-color: #b9ddf3; background: #f1f9fd; } .sum-chip.tone-blue .sum-num { color: var(--blue); }
.sum-chip.tone-cyan { border-color: #b6e8e4; background: #effbfa; } .sum-chip.tone-cyan .sum-num { color: var(--cyan); }
.sum-chip.tone-green { border-color: #bfe5c6; background: #f1faf3; } .sum-chip.tone-green .sum-num { color: var(--green); }
.sum-chip.tone-amber { border-color: #f1dca5; background: #fff9ec; } .sum-chip.tone-amber .sum-num { color: #c98a1d; }

.crm-app { display: grid; grid-template-columns: 320px 1fr; gap: 0; margin: 0 16px 18px; height: clamp(460px, calc(100vh - 250px), 820px); border: 1px solid #d7dde3; border-radius: 14px; overflow: hidden; background: #fff; }
.crm-app.show-chat { grid-template-columns: 320px 1fr 300px; }
/* Panel derecho: ficha del paciente + acciones + nota interna */
.crm-side { border-left: 1px solid #e2e7ec; background: #f7f9fb; padding: 14px; overflow-y: auto; flex-direction: column; gap: 14px; min-height: 0; display: none; }
.crm-app.show-chat .crm-side { display: flex; }
.crm-side-card { background: #fff; border: 1px solid #e6ecf1; border-radius: 12px; padding: 14px; }
.crm-side-card h4 { margin: 0 0 10px; font-size: .95rem; color: #2c3a47; }
.crm-side-card h4 small { font-weight: 400; color: #97a4b0; font-size: .74rem; display: block; margin-top: 2px; }
.crm-side-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.crm-side-id { min-width: 0; } .crm-side-id strong { display: block; color: #1f2d3a; } .crm-side-id small { color: #7a8894; }
.crm-side-info { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.crm-side-info li { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: .88rem; }
.crm-side-info li > span { color: #90a0ad; } .crm-side-info li strong { color: #2c3a47; }
.crm-side-info a { color: #0e9f6e; font-weight: 600; text-decoration: none; } .crm-side-info em { color: #98a6b2; font-style: italic; font-size: .85rem; }
.crm-actions { display: flex; flex-direction: column; gap: 8px; }
.crm-action { display: flex; align-items: center; gap: 9px; padding: 9px 12px; border: 1px solid #e0e7ee; border-radius: 9px; color: #2c3a47; text-decoration: none; font-weight: 600; font-size: .88rem; background: #fbfdff; }
.crm-action:hover { background: #eef4fb; border-color: #cfe0f2; }
.crm-internal { background: #fdf7f6; border-color: #f2d9d4; }
.crm-internal h4 { color: #b23c30; }
.crm-internal .control { width: 100%; box-sizing: border-box; margin-bottom: 8px; }
.crm-internal .primary { width: 100%; justify-content: center; }
.crm-side-hint { display: block; color: #98857f; font-size: .8rem; margin-top: 6px; }
.crm-list { display: flex; flex-direction: column; border-right: 1px solid #e2e7ec; background: #f7f9fb; min-width: 0; min-height: 0; }
.crm-list-head { display: flex; align-items: center; gap: 8px; padding: 12px; border-bottom: 1px solid #e6ebef; }
.crm-list-head input { width: 100%; }
.crm-list-hint { padding: 8px 12px; font-size: 11.5px; color: #7a8794; background: #eef3f7; }
.crm-items { overflow-y: auto; flex: 1; }
.crm-item { display: flex; gap: 10px; width: 100%; text-align: left; padding: 11px 12px; border: 0; border-bottom: 1px solid #eef2f5; background: transparent; align-items: flex-start; position: relative; }
.crm-item:hover { background: #eef4f9; }
.crm-item.active { background: #e3f1fb; box-shadow: inset 3px 0 0 var(--blue); }
.crm-ava { flex: 0 0 auto; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; color: #fff; background: var(--brand-grad); text-transform: uppercase; font-size: 14px; }
.crm-ava.lg { width: 46px; height: 46px; }
.crm-item-body { display: grid; gap: 3px; min-width: 0; flex: 1; }
.crm-item-top { display: flex; justify-content: space-between; gap: 8px; }
.crm-item-top strong { color: #2b3a48; font-size: 14px; }
.crm-item-top small { color: #93a0ac; font-size: 11px; white-space: nowrap; }
.crm-item-preview { color: #6a7884; font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crm-item-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; }
.ia-badge { font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 20px; color: #fff; }
.ia-gpt { background: #10a37f; } .ia-gemini { background: #6f5bd1; }
.mini-tag { font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 20px; }
.tag-green { background: #e2f6e7; color: #1f7a39; } .tag-amber { background: #fdeccc; color: #a86a12; } .tag-blue { background: #e0eefb; color: #1668a8; }
.tag-pay { background: #fde68a; color: #92560a; }
.pay-warning { display: flex; align-items: center; gap: 10px; padding: 10px 16px; background: #fff4cc; border-bottom: 1px solid #f0d98a; color: #7a5b18; font-size: 13px; }
.pay-warning .pay-ico { font-size: 18px; }
.pay-warning .pay-btn { margin-left: auto; border: 1px solid #d9a93a; border-radius: 8px; min-height: 32px; padding: 0 12px; background: #f3b23f; color: #3a2c08; font-weight: 700; white-space: nowrap; }

/* Administracion: estado de conexiones e instrucciones */
.conn-status { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; padding: 4px 0 16px; }
.conn-card { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border: 1px solid #dbe1e7; border-radius: 10px; background: #fff; }
.conn-card .conn-dot { width: 12px; height: 12px; border-radius: 50%; flex: 0 0 auto; }
.conn-card.on { border-color: #bfe5c6; background: #f4fbf5; } .conn-card.on .conn-dot { background: #2a9d3d; box-shadow: 0 0 0 3px rgba(42,157,61,.18); }
.conn-card.off { border-color: #f0cfa0; background: #fffaf0; } .conn-card.off .conn-dot { background: #e08b2f; box-shadow: 0 0 0 3px rgba(224,139,47,.18); }
.conn-card strong { display: block; color: #2c3e50; } .conn-card small { color: #6b7785; }
.howto-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding: 6px 0 16px; }
.howto { border: 1px solid #d9e1e8; border-radius: 12px; padding: 16px; background: #fff; }
.howto.local { background: #f3f9fd; border-color: #cfe0ec; }
.howto.prod { background: #fbf6ff; border-color: #e0d0f0; }
.howto h3 { display: flex; align-items: center; gap: 9px; margin: 0 0 8px; font-size: 16px; color: #2c3e50; }
.badge-num { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--blue); color: #fff; font-size: 13px; }
.howto ol, .howto ul { margin: 8px 0; padding-left: 20px; color: #44515d; line-height: 1.6; }
.prod-list { list-style: none; padding-left: 0; }
.prod-list li { padding: 8px 0; border-bottom: 1px dashed #e3dcef; }
.howto code { background: #eef2f6; padding: 2px 6px; border-radius: 5px; font-size: 12.5px; word-break: break-all; }
.howto-tip { margin-top: 8px; font-size: 12.5px; color: #5a6a78; }
.settings-grid .span-3 { grid-column: 1 / -1; }
.settings-grid input[readonly] { background: #f6f8fa; color: #44515d; }
@media (max-width: 900px) { .conn-status, .howto-grid { grid-template-columns: 1fr; } }

/* Administracion: pestañas y formulario */
.admin-tabs { display: flex; gap: 6px; padding: 8px 20px 0; border-bottom: 1px solid #e1e6eb; flex-wrap: wrap; }
.admin-tab-btn { border: 1px solid transparent; border-bottom: 0; background: transparent; padding: 10px 16px; border-radius: 10px 10px 0 0; color: #5a6a78; font-weight: 600; }
.admin-tab-btn.active { background: #fff; border-color: #e1e6eb; color: var(--blue); box-shadow: 0 -2px 0 var(--blue) inset; }
.admin-tab { padding: 8px 20px 18px; }
.admin-tab[hidden] { display: none; }
.save-ok { margin: 10px 0; padding: 12px 16px; border-radius: 10px; background: #eaf7ec; border: 1px solid #bfe5c6; color: #1f7a39; font-weight: 600; }
.big-text { width: 100%; min-height: 90px; border: 1px solid #c8d0d8; border-radius: 10px; padding: 10px 12px; font: inherit; color: var(--ink); resize: vertical; line-height: 1.5; }
.full-label { display: grid; gap: 6px; margin: 12px 0; color: #506172; }
.full-label > span { font-size: 13px; }
.chk-field { display: flex !important; align-items: center; gap: 9px; }
.chk-field input { width: 18px; height: 18px; accent-color: var(--blue); }
.form-actions { display: flex; justify-content: flex-end; padding: 16px 0 4px; }
.form-actions .primary { min-height: 42px; padding: 0 22px; border-radius: 10px; }

/* CRM: filtros de la lista */
.crm-filters { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 10px; border-bottom: 1px solid #e6ebef; }
.crm-filter { border: 1px solid #cdd7e0; background: #fff; color: #51616f; border-radius: 16px; padding: 4px 11px; font-size: 12px; font-weight: 600; }
.crm-filter:hover { background: #eef4f9; }
.crm-filter.on { background: var(--blue); border-color: var(--blue-strong); color: #fff; }

/* Fix #9: cadena flex para que el chat largo no rompa el diseño (mensajes scrollean, composer fijo) */
.crm-chat { min-height: 0; }
.crm-thread { min-height: 0; }
.crm-messages { min-height: 0; }
.crm-thread-head, .crm-state-strip, .pay-warning, .crm-composer { flex-shrink: 0; }
.crm-unread { position: absolute; right: 12px; top: 32px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 10px; background: #25d366; color: #fff; font-size: 11px; font-weight: 700; display: grid; place-items: center; }

.crm-chat { display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow: hidden; background: #e9edf0; }
.crm-empty { margin: auto; text-align: center; color: #7a8794; padding: 30px; }
.crm-empty .big-glyph { display: inline-grid; place-items: center; width: 70px; height: 70px; border-radius: 50%; background: #d7e6ef; margin-bottom: 12px; }
.crm-empty .big-glyph::before { content: ""; width: 30px; height: 22px; border: 3px solid #8fb6cf; border-radius: 8px; }
.crm-empty h2 { color: #4a5a68; }
.crm-thread { display: flex; flex-direction: column; flex: 1; height: 100%; min-height: 0; }
.crm-thread[hidden] { display: none; }
.crm-thread-head { display: flex; align-items: center; gap: 12px; padding: 10px 14px; background: #fff; border-bottom: 1px solid #e2e7ec; flex-wrap: wrap; }
.crm-head-info { min-width: 0; }
.crm-head-info strong { display: block; color: #2b3a48; }
.crm-head-info small { color: #8e9ba7; }
.crm-head-meta { display: flex; align-items: center; gap: 14px; margin-left: auto; flex-wrap: wrap; }
.meta-field { display: grid; gap: 3px; font-size: 11px; color: #7a8794; }
.meta-field select { min-height: 32px; }
.ia-switch { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; user-select: none; }
.ia-switch input { display: none; }
.switch-track { width: 42px; height: 24px; border-radius: 20px; background: #c2ccd4; position: relative; transition: background .2s; }
.switch-dot { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: left .2s; box-shadow: 0 1px 3px rgba(0,0,0,.25); }
.ia-switch input:checked + .switch-track { background: #25d366; }
.ia-switch input:checked + .switch-track .switch-dot { left: 21px; }
.switch-text { font-size: 12px; font-weight: 600; color: #4a5a68; }

.crm-state-strip { display: flex; flex-wrap: wrap; gap: 14px; padding: 8px 16px; background: #f5f8fa; border-bottom: 1px solid #e6ebef; font-size: 12.5px; color: #51616f; }
.state-item { display: inline-flex; align-items: center; gap: 6px; }
.state-item strong { color: #2b3a48; }
.state-item .dot { width: 9px; height: 9px; border-radius: 50%; }
.crm-status-field select { min-height: 30px; border: 1px solid #ccd8e1; border-radius: 5px; background: #fff; color: #243341; font-weight: 700; }
.d-blue { background: var(--blue); } .d-cyan { background: var(--cyan); } .d-green { background: var(--green); } .d-gray { background: #9aa6b1; }

.crm-messages { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 8px; background-color: #e9edf0; background-image: radial-gradient(rgba(255,255,255,.5) 1px, transparent 0); background-size: 18px 18px; }
.bubble-row { display: flex; }
.bubble-row.in { justify-content: flex-start; }
.bubble-row.out { justify-content: flex-end; }
.bubble { max-width: 76%; padding: 8px 11px 6px; border-radius: 12px; background: #fff; box-shadow: 0 1px 1px rgba(0,0,0,.08); position: relative; }
.bubble-row.out .bubble { background: #dcf8c6; }
.bubble.ai { background: #e7e0fb; }
.bubble-row.out .bubble.ai { background: #d9eefb; }
.bubble-author { display: block; font-size: 11px; font-weight: 700; color: #5b46a8; margin-bottom: 2px; }
.bubble.ai .bubble-author { color: #5b46a8; }
.bubble-text { display: block; color: #2c3a47; line-height: 1.4; white-space: pre-wrap; }
.bubble-media { margin: 6px 0 2px; }
.bubble-media img { max-width: 220px; max-height: 280px; border-radius: 10px; display: block; border: 1px solid rgba(0,0,0,.1); }
.bubble-media .media-doc { display: inline-block; padding: 8px 12px; border-radius: 10px; background: #eef2f6; color: #1f6b97; font-weight: 600; text-decoration: none; }
.bubble-time { display: block; text-align: right; font-size: 10px; color: #90a0ab; margin-top: 2px; }

.crm-composer { background: #f0f3f5; border-top: 1px solid #e2e7ec; padding: 10px 12px; }
.ia-note { display: flex; gap: 10px; align-items: center; padding: 10px 12px; margin-bottom: 8px; border-radius: 10px; background: #fff6e6; border: 1px solid #f0dba8; color: #7a5b18; font-size: 12.5px; }
.ia-note[hidden] { display: none; }
.empty-filter { padding: 24px 18px; text-align: center; color: var(--muted); }
.empty-filter[hidden] { display: none; }
.composer-input { display: flex; gap: 8px; align-items: center; }
.composer-input input { flex: 1; min-height: 42px; border-radius: 22px; padding: 0 16px; }
.composer-ai { display: inline-flex; align-items: center; gap: 6px; border: 1px solid #c9d6e0; border-radius: 22px; background: #fff; color: #1f6b97; min-height: 42px; padding: 0 14px; white-space: nowrap; font-size: 12.5px; }
.composer-send { min-height: 42px; border-radius: 22px; padding: 0 18px; }
.composer-input.locked { opacity: .5; pointer-events: none; }
.crm-del-btn { display: inline-flex; align-items: center; gap: 6px; background: #fff; color: #c0392b; border: 1px solid #e1b4ad; border-radius: 8px; padding: 6px 12px; font-weight: 700; font-size: .82rem; cursor: pointer; }
.crm-del-btn:hover { background: #fdeeec; }
.crm-del-btn:disabled { opacity: .6; cursor: default; }
.crm-head-meta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

/* Sandbox de prueba IA */
.crm-sandbox { margin: 0 16px 14px; border: 1px solid #cfe0ec; border-radius: 12px; background: #f3f9fd; overflow: hidden; }
.crm-sandbox summary { cursor: pointer; padding: 12px 16px; font-weight: 700; color: #14628f; display: flex; align-items: center; gap: 8px; list-style: none; }
.crm-sandbox summary::-webkit-details-marker { display: none; }
.crm-sandbox[open] summary { border-bottom: 1px solid #d8e6f0; }
.sandbox-body { padding: 14px 16px; }
.sandbox-help { color: #4a6678; line-height: 1.5; margin-bottom: 12px; }
.sandbox-messages { display: flex; flex-direction: column; gap: 8px; min-height: 60px; max-height: 320px; overflow-y: auto; padding: 8px; background: #fff; border: 1px solid #e0e8ef; border-radius: 10px; }
.sb-row { display: flex; }
.sb-row.user { justify-content: flex-end; }
.sb-row.ai { justify-content: flex-start; }
.sb-bubble { max-width: 78%; padding: 8px 12px; border-radius: 12px; line-height: 1.4; white-space: pre-wrap; }
.sb-row.user .sb-bubble { background: #dcf8c6; color: #243; }
.sb-row.ai .sb-bubble { background: #eef2f6; color: #2c3a47; }
.sandbox-input { display: flex; gap: 8px; margin-top: 10px; }
.sandbox-input input { flex: 1; min-height: 42px; border-radius: 22px; padding: 0 16px; }
.sandbox-input button { min-height: 42px; border-radius: 22px; padding: 0 16px; border: 1px solid #c2ccd6; background: #fff; }
.sandbox-status { margin-top: 8px; min-height: 18px; font-size: 13px; color: #1f7a39; }

/* CRM en vivo */
.crm-list-empty { padding: 20px 16px; color: #7a8794; font-size: 13px; line-height: 1.5; }
.crm-list-empty a, .sandbox-help a, .crm-thread a { color: var(--blue); }
.crm-back { display: none; border: 0; background: transparent; font-size: 24px; line-height: 1; color: var(--blue); width: 32px; }
.content-header a.primary { display: inline-flex; align-items: center; gap: 7px; min-height: 38px; padding: 0 16px; border-radius: 8px; text-decoration: none; }
@media (max-width: 920px) { .crm-back { display: inline-flex; } }

/* Pagina de chat publica (estilo WhatsApp/Messenger) */
.pubchat-body { margin: 0; min-height: 100vh; background: #e9edf0; }
.pubchat { display: flex; flex-direction: column; width: min(100%, 480px); height: 100vh; margin: 0 auto; background: #e9edf0; box-shadow: 0 0 40px rgba(0,0,0,.12); }
.pubchat-head { display: flex; align-items: center; gap: 12px; padding: 10px 14px; background: var(--blue); color: #fff; }
.pubchat-head img { height: 30px; background: #fff; border-radius: 8px; padding: 3px 8px; }
.pubchat-head strong { display: block; }
.pubchat-head small { opacity: .9; font-size: 12px; }
.pubchat-messages { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 8px; background-image: radial-gradient(rgba(255,255,255,.5) 1px, transparent 0); background-size: 18px 18px; }
.pc-row { display: flex; }
.pc-row.out { justify-content: flex-end; }
.pc-row.in { justify-content: flex-start; }
.pc-bubble { max-width: 80%; padding: 9px 13px; border-radius: 14px; line-height: 1.4; white-space: pre-wrap; box-shadow: 0 1px 1px rgba(0,0,0,.08); }
.pc-row.out .pc-bubble { background: #dcf8c6; color: #243; border-bottom-right-radius: 4px; }
.pc-row.in .pc-bubble { background: #fff; color: #2c3a47; border-bottom-left-radius: 4px; }
.pubchat-input { display: flex; gap: 8px; padding: 10px; background: #f0f3f5; }
.pubchat-input input { flex: 1; min-height: 46px; border-radius: 24px; padding: 0 18px; border: 1px solid #d4dde6; }
.pubchat-input button { width: 46px; height: 46px; border-radius: 50%; font-size: 18px; }

@media (max-width: 920px) {
  .crm-app { grid-template-columns: 1fr; height: 76vh; }
  .crm-app .crm-chat, .crm-app .crm-side { display: none; }
  .crm-app.show-chat .crm-list { display: none; }
  .crm-app.show-chat .crm-chat { display: flex; }
  .dc-grid { grid-template-columns: 1fr; }
  .dc-days { grid-auto-flow: row; grid-template-columns: repeat(3, 1fr); }
  .crm-head-meta { width: 100%; }
}

/* ===== Agenda v4: barra horizontal de controles (sin sidebar) ===== */
.agenda-page { width: min(100%, 1320px); }
@media (min-width: 1500px) { .agenda-page { width: min(100%, 1480px); } }

.agenda-toolbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 18px; border-bottom: 1px solid var(--line); background: #fbfcfd; }
.date-nav { display: flex; align-items: center; gap: 6px; }
.dn-arrow { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line); background: #fff; color: var(--blue-strong); font-size: 22px; line-height: 1; text-decoration: none; transition: background .12s, transform .12s; }
.dn-arrow:hover { background: var(--soft-blue); transform: scale(1.05); }
.dn-current { min-width: 150px; text-align: center; line-height: 1.15; }
.dn-current strong { display: block; font-size: 17px; color: var(--ink); text-transform: capitalize; }
.dn-current span { font-size: 12px; color: var(--muted); text-transform: capitalize; }
.dn-today { margin-left: 4px; padding: 7px 13px; border-radius: 999px; background: var(--soft-blue); color: var(--blue-strong); font-weight: 700; font-size: 13px; text-decoration: none; }
.dn-today:hover { background: #d3eeee; }

.tb-field { display: flex; flex-direction: column; gap: 2px; font-size: 11px; color: var(--muted); }
.tb-field select { min-width: 190px; }

.state-filter { position: relative; }
.state-filter > summary { display: inline-flex; align-items: center; gap: 8px; list-style: none; cursor: pointer; min-height: 38px; padding: 0 14px; border: 1px solid var(--line); border-radius: 999px; background: #fff; color: #44515d; font-weight: 600; }
.state-filter > summary::-webkit-details-marker { display: none; }
.state-filter[open] > summary { background: var(--soft-blue); color: var(--blue-strong); border-color: rgba(31,138,140,.3); }
.state-filter .sf-help { color: var(--muted); margin-bottom: 8px; line-height: 1.4; }
.state-filter-panel { position: absolute; z-index: 60; top: calc(100% + 8px); left: 0; width: 300px; background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 16px 40px rgba(20,32,43,.18); padding: 14px; display: grid; gap: 9px; }
.state-filter-panel .fm-all { display: flex; align-items: center; gap: 8px; padding-bottom: 7px; border-bottom: 1px dashed var(--line); color: var(--ink); }
.state-filter-panel .fm-options { display: grid; gap: 8px; max-height: 240px; overflow: auto; }
.state-filter-panel .fm-options label { display: flex; align-items: center; gap: 8px; color: #3a4a5a; }
.state-filter-panel input[type=checkbox] { width: 16px; height: 16px; min-height: 0; accent-color: var(--blue); }
.state-filter-panel .fm-apply { justify-content: center; margin-top: 2px; min-height: 38px; }

.alert-chip { display: inline-flex; align-items: center; gap: 7px; min-height: 38px; padding: 0 14px; border-radius: 999px; border: 1px solid #f0d98a; background: var(--soft-amber); color: #a66f18; font-weight: 600; }
.alert-chip:hover { background: #ffeec8; }

.reload-toggle { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; padding: 7px 12px; border-radius: 999px; border: 1px solid #cfe6d6; background: #f3fbf5; color: #1f7a39; font-weight: 600; cursor: pointer; }
.reload-toggle input { width: 16px; height: 16px; min-height: 0; accent-color: var(--green); }

.empty-day { padding: 40px 20px; text-align: center; color: var(--muted); line-height: 1.5; }

@media (max-width: 760px) {
  .agenda-toolbar { gap: 8px; }
  .reload-toggle { margin-left: 0; }
  .tb-field select { min-width: 150px; }
  .state-filter-panel { width: min(86vw, 300px); }
}

/* ===== Agenda v5: calendario por profesional + lista + filtros ===== */
.cal-topbar { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 18px 20px 8px; flex-wrap: wrap; }
.cal-topbar h1 { margin: 0; }
.cal-topbar p { color: var(--muted); text-transform: capitalize; }
.cal-actions { display: flex; align-items: center; gap: 8px; }
.cal-actions > button { min-height: 40px; border: 1px solid var(--line); border-radius: 10px; background: #fff; padding: 0 12px; }

.cal-toolbar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 8px 20px 14px; border-bottom: 1px solid var(--line); }
.period-pills { display: inline-flex; gap: 4px; background: var(--page); padding: 4px; border-radius: 999px; }
.period-pills .pill { padding: 8px 15px; border-radius: 999px; color: #55616d; font-weight: 600; font-size: 13px; text-decoration: none; }
.period-pills .pill.on { background: var(--brand-grad); color: #fff; box-shadow: 0 4px 12px rgba(24,184,177,.3); }
.period-pills .pill:hover:not(.on) { background: #fff; }
.range-form { display: inline-flex; align-items: center; gap: 8px; }
.range-form .control { min-height: 38px; }
.range-form span { color: var(--muted); }
.view-toggle { margin-left: auto; display: inline-flex; gap: 4px; background: var(--page); padding: 4px; border-radius: 10px; }
.view-toggle .vt { display: grid; place-items: center; width: 40px; height: 34px; border-radius: 8px; }
.view-toggle .vt.on { background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.1); }
.view-toggle .vt.on .btn-icon { color: var(--blue); border-color: var(--blue); }

/* Calendario tipo Google Calendar */
.cal { overflow-x: auto; padding: 0 10px 16px; }
.cal-head-row { display: flex; position: sticky; top: 0; background: #fff; z-index: 3; border-bottom: 2px solid var(--line); }
.cal-corner { width: 58px; flex: 0 0 58px; }
.cal-head { flex: 1 1 0; min-width: 150px; padding: 10px 12px; text-align: center; border-left: 1px solid var(--line); }
.cal-head strong { display: block; color: var(--ink); font-size: 14px; }
.cal-head span { color: var(--muted); font-size: 12px; }
.cal-body-row { display: flex; position: relative; }
.cal-times { width: 58px; flex: 0 0 58px; position: relative; }
.cal-time { position: absolute; right: 8px; transform: translateY(-8px); font-size: 11px; color: var(--muted); }
.cal-col-body { flex: 1 1 0; min-width: 150px; position: relative; border-left: 1px solid var(--line); background-image: linear-gradient(to bottom, var(--line) 1px, transparent 1px); background-repeat: repeat-y; }
.cal-appt { position: absolute; left: 4px; right: 4px; border-radius: 8px; padding: 4px 8px; overflow: hidden; background: #eaf4ff; border-left: 4px solid var(--blue); box-shadow: 0 1px 3px rgba(0,0,0,.08); cursor: default; }
.cal-appt .ca-time { font-size: 10px; font-weight: 700; color: #55616d; }
.cal-appt .ca-name { display: block; font-weight: 700; font-size: 12px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-appt .ca-state { display: block; font-size: 10px; color: #6b7785; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* colores por estado */
.st-blue { background: #eaf4ff; border-left-color: #3b82c4; }
.st-green { background: #e9f8ee; border-left-color: #2a9d3d; }
.st-amber { background: #fff6e0; border-left-color: #f3b23f; }
.st-orange { background: #ffefe3; border-left-color: #ff7a45; }
.st-red { background: #fdeaea; border-left-color: #e0574f; }
.st-gray { background: #eef1f4; border-left-color: #9aa6b1; }

/* Lista */
.list-view { padding: 8px 18px 20px; }
.list-day-head { display: flex; justify-content: space-between; align-items: baseline; margin: 16px 0 8px; padding-bottom: 6px; border-bottom: 2px solid var(--line); font-weight: 800; color: var(--ink); text-transform: capitalize; }
.list-day-head span { font-size: 12px; font-weight: 600; color: var(--muted); }
.list-appt { display: grid; grid-template-columns: 100px minmax(170px, 1.6fr) minmax(120px, 1fr) minmax(196px, 1.1fr) minmax(130px, .7fr); align-items: center; gap: 12px; padding: 11px 12px; border-radius: 12px; border: 1px solid var(--line); border-left: 4px solid var(--blue); background: #fff; margin-bottom: 8px; }
.list-appt.st-green { border-left-color: #2a9d3d; } .list-appt.st-amber { border-left-color: #f3b23f; }
.list-appt.st-orange { border-left-color: #ff7a45; } .list-appt.st-red { border-left-color: #e0574f; } .list-appt.st-gray { border-left-color: #9aa6b1; }
.la-time { font-weight: 700; color: #40505c; display: inline-flex; gap: 4px; align-items: center; }
.la-time b { color: #b9c3cc; font-weight: 400; }
.la-patient { display: grid; gap: 2px; }
.la-patient small { color: var(--muted); }
.la-pro { color: #40505c; }
.la-state { display: inline-flex; align-items: center; gap: 7px; color: #40505c; font-size: 13px; }
.la-state .dot { width: 9px; height: 9px; border-radius: 50%; background: currentColor; opacity: .6; }

@media (max-width: 760px) {
  .cal-toolbar { gap: 8px; }
  .view-toggle { margin-left: 0; }
  .list-appt { grid-template-columns: 1fr; gap: 4px; }
  .cal-head, .cal-col-body { min-width: 128px; }
}

/* Patients and admin actions */
.button-like { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 34px; border: 1px solid #bbc5cf; border-radius: 8px; background: #fff; padding: 0 12px; color: var(--ink); text-decoration: none; }
.button-like:hover { background: #f4f8fb; }
.floating-menu a, .floating-menu form button { display: flex; align-items: center; gap: 9px; min-height: 38px; width: 100%; border: 0; border-radius: 7px; background: #fff; color: #2d3b48; text-align: left; padding: 9px 16px; text-decoration: none; }
.floating-menu a:hover, .floating-menu form button:hover { background: #f0f7fc; }
.floating-menu form { margin: 0; }
.patient-create-form { margin: 12px 20px; }
.detail-panel { margin: 12px 20px; border: 1px solid #d9e1e8; border-radius: 8px; background: #fbfdff; padding: 14px; }
.detail-grid { display: grid; grid-template-columns: repeat(3, minmax(160px, 1fr)); gap: 10px; }
.detail-grid span { display: grid; gap: 4px; border: 1px solid #e0e7ee; border-radius: 8px; background: #fff; padding: 10px; }
.detail-grid b { color: #607080; font-size: 12px; }
.compact-table { padding: 12px 0 0; }
.inline-admin-form { display: grid; grid-template-columns: minmax(220px, 1fr) auto; gap: 12px; align-items: end; margin: 12px 20px; }
.inline-admin-form label { display: grid; gap: 6px; color: #506172; }
.chk-field { display: flex !important; align-items: center; gap: 8px !important; min-height: 38px; }
.conn-status { display: grid; grid-template-columns: repeat(4, minmax(150px, 1fr)); gap: 12px; padding: 12px 20px; }
.conn-card { display: flex; gap: 10px; align-items: center; border: 1px solid #dbe1e7; border-radius: 8px; background: #fff; padding: 12px; }
.conn-card small { display: block; color: var(--muted); }
.conn-dot { width: 11px; height: 11px; border-radius: 50%; background: #aab4be; }
.conn-card.on .conn-dot { background: var(--green); }
.conn-card.off .conn-dot { background: #d59a22; }
@media (max-width: 900px) { .detail-grid, .inline-admin-form, .conn-status { grid-template-columns: 1fr; } }

/* Administration and account controls */
.section-title.padded { padding: 18px 20px 8px; }
.settings-grid .span-2 { grid-column: span 2; }
.day-checks { display: flex; flex-wrap: wrap; gap: 10px; padding: 0 0 12px; }
.day-checks label, .switch-row, .inline-form { display: inline-flex; align-items: center; gap: 8px; }
.switch-row input { position: absolute; opacity: 0; pointer-events: none; }
.switch-row span { width: 42px; height: 24px; border-radius: 999px; background: #ccd5dd; position: relative; transition: background .15s; }
.switch-row span::after { content: ""; position: absolute; width: 18px; height: 18px; border-radius: 50%; left: 3px; top: 3px; background: #fff; box-shadow: 0 2px 5px rgba(0,0,0,.18); transition: transform .15s; }
.switch-row input:checked + span { background: var(--green); }
.switch-row input:checked + span::after { transform: translateX(18px); }
.inline-toggle { margin: 0; }
.inline-form select { min-width: 140px; }
.inline-form button { min-height: 34px; border: 1px solid #c7d1db; border-radius: 8px; background: #fff; padding: 0 10px; }
.narrow-form { max-width: 760px; }
.compact-table table { min-width: 520px; }
.save-ok { margin-left: 20px; margin-right: 20px; }
.settings-grid select[multiple] { min-height: 138px; padding: 8px; }

@media (max-width: 900px) {
  .settings-grid .span-2 { grid-column: 1; }
}

/* ===== Admin: Sedes y Boxes ===== */
.res-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; padding: 0 20px; }
.chip-check { display: flex; flex-wrap: wrap; gap: 8px; padding: 4px 0 8px; }
.chip-check.compact { max-width: 320px; gap: 5px; padding: 0; }
.chk-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border: 1px solid var(--line); border-radius: 999px; background: #fff; font-size: 13px; color: #44515d; cursor: pointer; }
.chip-check.compact .chk-chip { padding: 4px 8px; font-size: 12px; }
.chk-chip input { width: 15px; height: 15px; accent-color: var(--blue); }
.chk-chip:hover { background: var(--page); }
.movement-edit { display: grid; grid-template-columns: repeat(5, minmax(92px, 1fr)) auto; gap: 6px; align-items: end; min-width: 560px; }
.movement-edit label { display: grid; gap: 2px; margin: 0; }
.movement-edit label span { font-size: 10px; text-transform: uppercase; letter-spacing: .02em; color: #6d7c88; font-weight: 700; }
.movement-edit input, .movement-edit select { min-height: 32px; width: 100%; }
.row-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.mini-btn { border: 1px solid var(--line); background: #fff; border-radius: 8px; padding: 5px 10px; font-size: 12px; font-weight: 600; color: #44515d; }
.mini-btn:hover { background: var(--page); }
.mini-btn.danger { color: #b3453d; border-color: #f0c7c3; }
@media (max-width: 900px) { .res-grid { grid-template-columns: 1fr; } }

/* ===== Agendamiento inteligente ===== */
.smart-book { padding: 8px 20px 24px; display: grid; grid-template-columns: 400px 1fr; gap: 18px 32px; align-items: start; }
.sb-left { display: flex; flex-direction: column; }
.sb-results { align-self: start; }
.smart-book .sb-confirm { grid-column: 1 / -1; }
@media (max-width: 900px) { .smart-book { grid-template-columns: 1fr; } }
.sb-step { display: flex; gap: 14px; padding: 14px 0; border-bottom: 1px dashed var(--line); }
.sb-num { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--brand-grad); color: #fff; font-weight: 800; }
.sb-body { flex: 1; }
.sb-body > label { display: block; font-weight: 700; color: var(--ink); margin-bottom: 8px; }
.sb-when { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.sb-when .pill { padding: 8px 15px; border-radius: 999px; border: 1px solid var(--line); background: #fff; font-weight: 600; color: #55616d; }
.sb-when .pill.on { background: var(--brand-grad); color: #fff; border-color: transparent; }
.sb-actions { padding: 16px 0; }
.sb-actions .primary { min-height: 44px; padding: 0 22px; }
.sb-results { min-height: 40px; }
.sb-hint { color: var(--muted); padding: 10px 0; }
.slot-day { margin-bottom: 14px; }
.slot-day h4 { margin: 6px 0; color: var(--ink); text-transform: capitalize; font-size: 14px; }
.slot-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.slot-chip { display: inline-grid; gap: 1px; padding: 8px 14px; border-radius: 12px; border: 1px solid var(--line); background: #fff; text-align: center; min-width: 96px; }
.slot-chip b { color: var(--blue-strong); font-size: 15px; }
.slot-chip span { color: var(--muted); font-size: 11px; white-space: nowrap; }
.slot-chip .slot-sede { color: #0879c9; font-weight: 600; font-size: 10.5px; }
.slot-chip.on .slot-sede { color: #eaf3fb; }
.slot-chip:hover { background: var(--soft-blue); border-color: var(--blue); }
.slot-chip.on { background: var(--brand-grad); border-color: transparent; }
.slot-chip.on b, .slot-chip.on span { color: #fff; }
.sb-confirm { margin-top: 16px; padding-top: 16px; border-top: 2px solid var(--line); }
.sb-chosen { padding: 12px 14px; border-radius: 12px; background: var(--soft-green); color: #1f7a39; margin-bottom: 14px; }

/* ===== Ficha clinica / presupuestos / pagos ===== */
.ficha-summary{display:flex;gap:12px;flex-wrap:wrap;align-items:center;padding:12px 20px}
.ficha-kpi{background:#f4f8fb;border:1px solid #e2ecf3;border-radius:12px;padding:8px 16px;display:flex;flex-direction:column;min-width:120px}
.ficha-kpi span{font-size:.72rem;color:#6b7c8a;text-transform:uppercase;letter-spacing:.04em}
.ficha-kpi strong{font-size:1.15rem;color:#0d3b52}
.ficha-alert{background:#fff3f0;border:1px solid #ffd3c9;color:#c0392b;border-radius:10px;padding:8px 14px;font-weight:600}
.tabs-row{display:flex;gap:6px;border-bottom:1px solid #e2ecf3;margin-top:6px}
.tabs-row .tab{padding:10px 16px;border-radius:10px 10px 0 0;color:#57707f;text-decoration:none;font-weight:600}
.tabs-row .tab.on{background:#0879c9;color:#fff}
.ficha-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;padding:16px 20px}
@media(max-width:900px){.ficha-grid{grid-template-columns:1fr}}
.ficha-card{background:#fff;border:1px solid #e2ecf3;border-radius:14px;padding:16px}
.ficha-card h3{margin:0 0 12px;color:#0d3b52}
.ficha-card label{display:block;margin-bottom:10px}
.ficha-card label span{display:block;font-size:.8rem;color:#57707f;margin-bottom:3px}
.ficha-timeline{padding-bottom:20px}
.tl-entry{display:grid;grid-template-columns:130px 1fr;gap:14px;padding:12px 20px;border-top:1px solid #eef3f7}
.tl-date{color:#57707f;font-size:.82rem}
.tl-body p{margin:2px 0}
.budget-picks{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:8px;margin-bottom:12px}
.budget-picks .pick{display:flex;align-items:center;gap:8px;background:#f7fafc;border:1px solid #e2ecf3;border-radius:10px;padding:8px 12px;margin:0}
.budget-picks .pick em{margin-left:auto;color:#0879c9;font-style:normal;font-weight:600}
.budget-card{background:#fff;border:1px solid #e2ecf3;border-radius:14px;padding:14px;margin-bottom:12px}
.budget-head{display:flex;align-items:center;gap:12px;margin-bottom:8px}
.budget-head .budget-date{color:#8496a3;font-size:.82rem}
.budget-head .budget-total{margin-left:auto;font-size:1.1rem;color:#0d3b52}
.mini-table{width:100%;border-collapse:collapse}
.mini-table td{padding:4px 8px;border-top:1px solid #eef3f7;font-size:.9rem}
.badge{font-size:.72rem;padding:3px 10px;border-radius:999px;font-weight:700}
.badge-draft{background:#eef3f7;color:#57707f}
.badge-approved{background:#e6f7ee;color:#1e8b52}
.badge-rejected{background:#fdecea;color:#c0392b}
.badge-closed{background:#e7f0fb;color:#0879c9}
.budget-actions{display:flex;gap:8px;margin-top:8px}
.mini-btn{border:0;border-radius:8px;padding:6px 14px;cursor:pointer;font-weight:600}
.mini-btn.ok{background:#1e8b52;color:#fff}
.mini-btn.danger{background:#c0392b;color:#fff}
.state-select{border:1px solid #d5e0e8;border-radius:8px;padding:5px 8px;background:#fff;font-size:.82rem;color:#0d3b52;max-width:180px}
.list-appt.state-saved{outline:2px solid #1e8b52;transition:outline .2s}

/* Aviso de conflicto de cita en el modal Dar cita */
.dc-conflict { color: #c0392b; font-weight: 700; }
#dcContinue:disabled { opacity: .5; cursor: not-allowed; }

/* ===== Tablero / Reportes ===== */
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; padding: 16px 20px; }
.kpi { border-radius: 16px; padding: 16px 18px; display: flex; flex-direction: column; gap: 2px; color: #fff; box-shadow: 0 6px 18px rgba(28,43,57,.10); }
.kpi span { font-size: .78rem; opacity: .92; text-transform: uppercase; letter-spacing: .03em; }
.kpi strong { font-size: 1.9rem; line-height: 1.05; }
.kpi small { font-size: .78rem; opacity: .9; }
.kpi-green { background: linear-gradient(135deg,#159a5b,#0f7f4a); }
.kpi-blue { background: linear-gradient(135deg,#1479c9,#0b5fa3); }
.kpi-amber { background: linear-gradient(135deg,#e8912b,#cf7615); }
.kpi-teal { background: linear-gradient(135deg,#12a3a3,#0c7f82); }
.kpi-violet { background: linear-gradient(135deg,#7a5cd0,#5b3fb0); }
.kpi-red { background: linear-gradient(135deg,#d64541,#b03530); }
.kpi-slate { background: linear-gradient(135deg,#5a6b7c,#42505e); }
.report-board { display: grid; grid-template-columns: 2fr 1fr; gap: 18px; padding: 8px 20px 24px; }
@media (max-width: 900px) { .report-board { grid-template-columns: 1fr; } }
.rb-card { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 16px 18px; }
.rb-card h2 { margin: 0 0 14px; font-size: 1.05rem; color: #0d3b52; }
.income-chart { display: flex; align-items: flex-end; gap: 10px; min-height: 160px; }
.ic-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; justify-content: flex-end; }
.ic-bar { width: 70%; max-width: 46px; border-radius: 8px 8px 0 0; background: linear-gradient(180deg,#1e9bd7,#0b5fa3); }
.ic-day { color: #6b7c8a; text-transform: capitalize; font-size: 11px; }
.ic-val { color: #0d3b52; font-size: 10px; font-weight: 600; }
.state-list { list-style: none; margin: 0; padding: 0; }
.state-list li { display: flex; align-items: center; gap: 8px; padding: 9px 4px; border-bottom: 1px solid #eef3f7; color: #40515f; }
.state-list li b { margin-left: auto; color: #0d3b52; font-size: 1.05rem; }
.state-list .dot { width: 8px; height: 8px; border-radius: 50%; background: #1479c9; }

/* ===== Odontograma ===== */
.odo-wrap { padding: 16px 20px 28px; }
.odo-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-bottom: 18px; }
.odo-conditions { display: flex; flex-wrap: wrap; gap: 6px; }
.odo-cond { border: 1px solid #d5e0e8; background: #fff; border-radius: 999px; padding: 5px 12px; font-size: 12px; font-weight: 600; cursor: pointer; color: #40515f; }
.odo-cond.on { outline: 2px solid #0879c9; }
.odo-cond.c-caries { border-color: #e0b400; } .odo-cond.c-obturado { border-color: #1479c9; }
.odo-cond.c-corona { border-color: #8a63d2; } .odo-cond.c-endodoncia { border-color: #e8912b; }
.odo-cond.c-implante { border-color: #12a3a3; } .odo-cond.c-ausente { border-color: #c0392b; }
.odo-cond.c-fractura { border-color: #d35400; }
.odo-active { margin-left: auto; color: #57707f; font-size: 13px; }
.odo-arch { display: flex; justify-content: center; gap: 22px; margin: 6px 0; }
.odo-quad { display: flex; gap: 4px; }
.odo-arch:nth-child(3) .odo-quad, .odo-arch:last-child .odo-quad { align-items: flex-start; }
.tooth { width: 40px; display: flex; flex-direction: column; align-items: center; gap: 3px; border: 0; background: transparent; cursor: pointer; padding: 2px; }
.tooth .tooth-face { width: 30px; height: 34px; border: 1.5px solid #b9c6d0; border-radius: 6px 6px 8px 8px; background: #fff; display: block; }
.tooth small { font-size: 10px; color: #7a8794; }
.tooth:hover .tooth-face { border-color: #0879c9; box-shadow: 0 0 0 2px rgba(8,121,201,.15); }
.tooth.t-caries .tooth-face { background: #ffe58a; border-color: #e0b400; }
.tooth.t-obturado .tooth-face { background: #bcd9f5; border-color: #1479c9; }
.tooth.t-corona .tooth-face { background: #e5d8fb; border-color: #8a63d2; }
.tooth.t-endodoncia .tooth-face { background: #ffd9ad; border-color: #e8912b; }
.tooth.t-implante .tooth-face { background: #b7ecec; border-color: #12a3a3; }
.tooth.t-ausente .tooth-face { background: repeating-linear-gradient(45deg,#f3d6d2,#f3d6d2 4px,#fff 4px,#fff 8px); border-color: #c0392b; }
.tooth.t-fractura .tooth-face { background: linear-gradient(135deg,#fff 45%,#f0a97f 45%,#f0a97f 55%,#fff 55%); border-color: #d35400; }
.span-2 { grid-column: span 2; }

/* ===== Recetas + logo ===== */
.rx-table { width: 100%; border-collapse: collapse; margin: 8px 0; }
.rx-table th { text-align: left; font-size: 11px; text-transform: uppercase; color: #748896; padding: 6px 6px; border-bottom: 1px solid var(--line); }
.rx-table td { padding: 4px 4px; }
.rx-table .control { padding: 6px 8px; font-size: 13px; }
.rx-table .rx-del { padding: 4px 10px; }
.logo-preview { display: flex; align-items: center; justify-content: center; min-height: 120px; border: 1px dashed #cdd8e0; border-radius: 12px; background: #f7fafc; margin-bottom: 12px; padding: 10px; }
.logo-preview img { max-height: 120px; max-width: 100%; object-fit: contain; }
.logo-empty { color: #94a3af; font-size: 13px; }

/* Cabecera profesional de la ficha */
.patient-hero { display: flex; align-items: center; gap: 16px; }
.patient-avatar { flex: 0 0 auto; width: 56px; height: 56px; border-radius: 50%; background: var(--brand-grad, linear-gradient(135deg,#0879c9,#12a3a3)); color: #fff; display: grid; place-items: center; font-size: 20px; font-weight: 800; }
.patient-hero h1 { margin: 0; font-size: 1.5rem; }
.patient-hero p { margin: 2px 0 0; color: var(--muted, #6b7c8a); font-size: .9rem; }

/* ===== Adjuntos de la ficha ===== */
.attach-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; }
.attach-card { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: #fff; display: flex; flex-direction: column; }
.attach-thumb { height: 140px; display: flex; align-items: center; justify-content: center; background: #f4f8fb; overflow: hidden; text-decoration: none; }
.attach-thumb img { width: 100%; height: 100%; object-fit: cover; }
.attach-file { font-size: 22px; font-weight: 800; color: #0879c9; letter-spacing: .05em; }
.attach-meta { padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; }
.attach-meta strong { color: #0d3b52; font-size: 13px; }
.attach-meta small { color: #748896; font-size: 11px; }
.attach-meta form { margin-top: 6px; }

/* ============================================================
   PULIDO VISUAL Y UX (capa final)
   ============================================================ */

/* Tablas de datos — usadas en Ficha, Cajas, Recaudación, Inventario, Reportes */
.data-table { border-collapse: separate; border-spacing: 0; font-size: 13.5px; background: #fff; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.data-table thead th { text-align: left; font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); background: #f6f9fb; padding: 11px 14px; border-bottom: 1px solid var(--line); font-weight: 700; }
.data-table tbody td { padding: 11px 14px; border-bottom: 1px solid #eef2f6; color: #33424f; vertical-align: middle; }
.data-table tbody tr:last-child td { border-bottom: 0; }
.data-table tbody tr { transition: background .12s; }
.data-table tbody tr:hover td { background: #f4fafb; }
.data-table th.num, .data-table td.num { text-align: right; font-variant-numeric: tabular-nums; }

/* Foco accesible y agradable en campos */
.control:focus, input:focus, select:focus, textarea:focus { outline: none; border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(24,184,177,.18); }
.control::placeholder { color: #9aa7b2; }
textarea.control { min-height: unset; line-height: 1.5; resize: vertical; }

/* Botones — transiciones y feedback consistente */
.primary, .button-like, .quiet-button, .clinic-button, .mini-btn, .module-nav a, .pill, .tab { transition: transform .08s ease, box-shadow .15s ease, background .15s ease, color .15s ease; }
.primary:hover { filter: brightness(1.05); box-shadow: 0 8px 20px rgba(24,184,177,.34); }
.primary:active, .button-like:active, .quiet-button:active { transform: translateY(1px); }
.button-like:hover { border-color: #b6d9d9; box-shadow: 0 3px 10px rgba(28,43,57,.08); }
button:disabled, .primary:disabled { opacity: .55; cursor: not-allowed; transform: none; }

/* Tarjetas — leve elevación al pasar el mouse */
.kpi { transition: transform .12s ease, box-shadow .15s ease; }
.kpi[href]:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(28,43,57,.16); }
.rb-card, .ficha-card, .budget-card, .attach-card, .panel { transition: box-shadow .15s ease; }
.attach-card:hover { box-shadow: 0 8px 22px rgba(28,43,57,.12); }

/* Pestañas de la ficha — más claras y con hover */
.tabs-row .tab { transition: background .15s, color .15s; }
.tabs-row .tab:not(.on):hover { background: #eef4f7; color: var(--ink); }

/* Nav superior: permitir 2 filas si no cabe (mejor que scroll oculto) */
.module-nav { flex-wrap: wrap; height: auto; min-height: 60px; padding-top: 8px; padding-bottom: 8px; row-gap: 6px; }

/* Estado vacío reutilizable */
.empty-state { text-align: center; color: var(--muted); padding: 34px 20px; }
.empty-state .es-emoji { font-size: 30px; display: block; margin-bottom: 8px; opacity: .8; }

/* Encabezado de página un poco más aireado */
.content-header h1 { letter-spacing: -.01em; }
.content-header p { color: var(--muted); }

/* Badges: base uniforme por si falta */
.badge { display: inline-block; line-height: 1.5; }

/* Chips de hora del agendador y slots — cursor claro */
.slot-chip, .dc-slot, .state-select, .pill, .tab { cursor: pointer; }

/* Scrollbars discretas en zonas con overflow */
.dc-days::-webkit-scrollbar, .crm-thread::-webkit-scrollbar, .module-nav::-webkit-scrollbar { height: 8px; width: 8px; }
.dc-days::-webkit-scrollbar-thumb, .crm-thread::-webkit-scrollbar-thumb { background: #cfdae1; border-radius: 8px; }

/* ============ PULIDO — capa 2 ============ */

/* Tablas "clásicas" (Pacientes, Administración): encabezado más suave + hover + zebra */
.wide-table { border: 1px solid var(--line); border-radius: 14px; overflow: auto; margin: 6px 20px 18px; padding: 0; }
.wide-table table { min-width: 720px; }
.wide-table th { background: #f6f9fb; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; font-size: 11px; font-weight: 700; padding: 11px 14px; border-bottom: 1px solid var(--line); position: sticky; top: 0; }
.wide-table td { padding: 11px 14px; border-bottom: 1px solid #eef2f6; }
.wide-table tbody tr { transition: background .12s; }
.wide-table tbody tr:hover td { background: #f4fafb; }
.wide-table tbody tr:last-child td { border-bottom: 0; }
.patients-table th { background: #f6f9fb; }

/* Tarjetas de resumen antiguas: coherencia con los KPI nuevos */
.stat-row div, .finance-grid article { border-radius: 14px; transition: transform .12s, box-shadow .15s; }
.stat-row div:hover, .finance-grid article:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(28,43,57,.12); }

/* Login: más marca y aire */
.login-body { min-height: 100vh; background: radial-gradient(1200px 600px at 15% -10%, rgba(24,184,177,.35), transparent 60%), linear-gradient(135deg, #18b8b1 0%, #1f8a8c 40%, #eef2f6 40%); }
.login-card { border-radius: 20px; box-shadow: 0 30px 90px rgba(22,45,68,.28); padding: 34px 32px; }
.login-brand { text-align: center; margin-bottom: 6px; }
.login-brand img { height: 66px; }
.login-sub { text-align: center; color: var(--muted); margin: 0 0 18px; font-size: 13.5px; }
.login-form label { display: block; margin-bottom: 12px; }
.login-form .primary { width: 100%; justify-content: center; min-height: 46px; border-radius: 12px; font-size: 15px; margin-top: 4px; }

/* Encabezados de sección/paneles: título con acento sutil */
.content-header h1 { display: flex; align-items: center; gap: 10px; }

/* Filtros redondeados coherentes */
.filter-row .control, .range-form .control, .sede-filter .control { border-radius: 10px; }

/* Modales: un poco más de aire y sombra */
.modal { border-radius: 16px; }
.modal-head h2 { letter-spacing: -.01em; }

/* Panel general: sombra más suave y moderna */
.panel { box-shadow: 0 8px 28px rgba(28,43,57,.07); }

/* Scroll global sutil */
body::-webkit-scrollbar { width: 12px; }
body::-webkit-scrollbar-thumb { background: #cdd8e1; border-radius: 12px; border: 3px solid var(--page); }

/* ============ PULIDO — capa 3 (correcciones) ============ */

/* Logo del login sin deformar (respeta proporción) */
.login-brand img { height: auto !important; width: auto !important; max-height: 62px; max-width: 86%; object-fit: contain; }

/* Agenda: tarjetas de cita legibles (no cortar el nombre, más aire) */
.cal-appt { min-height: 44px; left: 5px; right: 5px; padding: 5px 9px; border-radius: 9px; display: flex; flex-direction: column; gap: 1px; }
.cal-appt .ca-time { font-size: 10px; font-weight: 700; color: #52606d; line-height: 1.1; }
.cal-appt .ca-name { font-size: 12px; font-weight: 700; color: var(--ink); line-height: 1.15; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cal-appt .ca-state { font-size: 10px; }
.cal-appt:hover { box-shadow: 0 4px 12px rgba(28,43,57,.16); z-index: 3; }

/* Receta: cabecera de tabla clara (anula el th teal global) + notas cómodas */
.rx-table th { background: #f6f9fb !important; color: #596b78 !important; border-bottom: 1px solid var(--line); }
.rx-table td { border-bottom: 0; padding: 6px 6px; }
.rx-table { min-width: 0; }
.rx-notes { min-height: 90px; }

/* ============ Atención rápida (cockpit) ============ */
.atn-quick { display: flex; flex-wrap: wrap; gap: 8px; padding: 6px 20px 4px; }
.atn-quick a { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--line); background: #fff; border-radius: 999px; padding: 8px 14px; font-weight: 600; color: #40515f; font-size: 13px; transition: background .12s, box-shadow .12s; }
.atn-quick a:hover { background: var(--soft-blue); box-shadow: 0 3px 10px rgba(28,43,57,.08); }
.atn-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 16px; padding: 12px 20px; align-items: start; }
@media (max-width: 900px) { .atn-grid { grid-template-columns: 1fr; } }
.atn-side { display: flex; flex-direction: column; gap: 16px; }
.atn-main textarea.control { min-height: 96px; }
.atn-start { color: var(--cyan); margin-right: 2px; }
.atn-start:hover { color: var(--blue-strong); }
/* Boton claro "Atender" en la vista lista de agenda (inicia la atencion) */
.atn-start-btn { display: inline-flex; align-items: center; gap: 6px; justify-self: start; background: #0e9f6e; color: #fff; border-radius: 8px; padding: 5px 12px; font-weight: 700; font-size: .85rem; text-decoration: none; margin-bottom: 2px; }
.atn-start-btn:hover { background: #0b8a5f; color: #fff; }
/* Botón flotante naranja para retomar una atención en curso */
.resume-care { position: fixed; right: 20px; bottom: 20px; z-index: 300; display: inline-flex; align-items: center; gap: 8px; background: #ff7a18; color: #fff; font-weight: 700; text-decoration: none; padding: 12px 18px; border-radius: 999px; box-shadow: 0 10px 26px rgba(255,122,24,.4); }
.resume-care:hover { background: #f26a05; color: #fff; }
.resume-care[hidden] { display: none; }
/* Banner de pago/saldo (Atención + modal de llegada de la agenda) */
.pay-banner { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 12px 16px; border-radius: 10px; font-size: .92rem; }
.pay-pending { background: #fdf0e6; border: 1px solid #f3d4b3; color: #a05a1a; }
.pay-partial { background: #fff7e6; border: 1px solid #f1dca0; color: #8a6d1a; }
.pay-ok { background: #eef8f1; border: 1px solid #cfe9d8; color: #1e8b52; }
/* Nota/categoría INTERNA del paciente (solo equipo; nunca el paciente) */
.internal-tag { display: inline-flex; align-items: center; gap: 4px; background: #fdecea; color: #c0392b; border: 1px solid #f0b8b0; border-radius: 999px; padding: 2px 10px; font-size: .72em; font-weight: 800; vertical-align: middle; letter-spacing: .02em; }
/* Bloque de contacto en la ficha (correo arriba, teléfono debajo) */
.patient-contact { display: flex; flex-direction: column; gap: 1px; margin: 4px 0 0; color: #6b7c8a; font-size: .88rem; }
.patient-contact .pc-ico { display: inline-block; width: 18px; color: #90a0ad; }
/* Paginador de listados largos (pacientes) */
.pager { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 12px 4px 4px; }
.pager-info { color: #5a6b78; font-size: .9rem; }
.pager-links { display: flex; gap: 6px; flex-wrap: wrap; }

/* Plan de cuotas de un presupuesto */
.inst-plan { margin: 8px 0 4px; border: 1px solid #e3ebf2; border-radius: 10px; overflow: hidden; }
.inst-plan-head { background: #f4f8fb; padding: 6px 10px; font-size: .8rem; font-weight: 800; color: #5a6b78; }
.inst-row { display: grid; grid-template-columns: auto 1fr auto auto; gap: 10px; align-items: center; padding: 5px 10px; border-top: 1px solid #eef2f5; font-size: .88rem; }
.inst-row .inst-n { font-weight: 700; color: #34414c; }
.inst-row .inst-due { color: #90a0ad; }
.inst-row .inst-amt { font-weight: 700; }
.inst-row .inst-state { font-size: .8rem; color: #b0762a; }
.inst-row.paid { background: #f4fbf6; }
.inst-row.paid .inst-state { color: #1f8a4c; font-weight: 700; }

/* Desglose de recaudación por medio de pago (cierre de caja) */
.pay-breakdown { margin: 10px 0 4px; border: 1px solid #e3ebf2; border-radius: 10px; overflow: hidden; }
.pay-breakdown-title { background: #f4f8fb; padding: 6px 10px; font-size: .78rem; font-weight: 800; color: #5a6b78; text-transform: uppercase; letter-spacing: .03em; }
.pay-breakdown-row { display: grid; grid-template-columns: 1fr auto auto; gap: 10px; align-items: center; padding: 6px 10px; border-top: 1px solid #eef2f5; font-size: .9rem; }
.pay-breakdown-row .pb-name { font-weight: 600; color: #34414c; }
.pay-breakdown-row .pb-count { color: #90a0ad; font-size: .82rem; }
.pay-breakdown-row .pb-amount { font-weight: 800; color: #1f8a4c; min-width: 90px; text-align: right; }

/* Tarjeta de convenios del paciente (general + por servicio) */
.conv-card { margin-top: 14px; }
.conv-block { padding: 8px 0; border-top: 1px solid #eef2f5; }
.conv-block:first-of-type { border-top: none; }
.conv-lbl { font-size: .78rem; font-weight: 800; color: #5a6b78; text-transform: uppercase; letter-spacing: .03em; margin-bottom: 6px; }
.conv-lbl small { text-transform: none; font-weight: 600; color: #90a0ad; letter-spacing: 0; }
.conv-empty { margin: 0; color: #8a97a2; font-size: .88rem; }
.conv-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.conv-chip { display: inline-block; background: #e8f3fc; color: #0b6bb0; border: 1px solid #bfe0f7; border-radius: 999px; padding: 3px 12px; font-size: .84rem; font-weight: 700; }
.conv-chip.alt { background: #eaf7ee; color: #1f8a4c; border-color: #bfe6cd; }
.conv-rows-view { display: flex; flex-direction: column; gap: 6px; }
.conv-row-view { display: flex; align-items: center; gap: 8px; }
.conv-svc { font-weight: 600; color: #34414c; }
.conv-arrow { color: #b0bcc6; }
.conv-checks { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-bottom: 4px; }
.conv-check { display: inline-flex; align-items: center; gap: 6px; font-size: .9rem; }
.conv-edit-row { display: grid; grid-template-columns: 1fr 1fr auto; gap: 8px; margin-bottom: 8px; align-items: center; }
.conv-del { background: #fdecea; color: #c0392b; border: 1px solid #f0b8b0; border-radius: 8px; width: 34px; height: 34px; cursor: pointer; font-weight: 700; }
.conv-add { margin-top: 2px; }
/* Fila "Valor de la cita" en el modal de agenda */
.ct-price { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 6px 20px 4px; padding: 10px 12px; background: #f7f9fb; border: 1px solid var(--line); border-radius: 10px; }
.ct-price > span { font-weight: 600; color: #46535e; }
.ct-price input { max-width: 130px; }
.ct-price small { color: #159a5b; }
.internal-band { display: flex; align-items: center; gap: 12px; border-radius: 10px; padding: 10px 14px; background: #f7f9fb; border: 1px dashed #d6e0e9; color: #5a6a78; }
.internal-band.on { background: #fdf0ee; border: 1px solid #f2c9c2; color: #a5382c; }
.internal-ico { flex: 0 0 auto; font-size: 1.1rem; }
.internal-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.internal-txt small { color: #98857f; font-size: .78rem; }
.internal-band.on .internal-txt small { color: #b98a83; }
.internal-band button { margin-left: auto; white-space: nowrap; }
/* Marca de nota interna en la agenda (lista y calendario) */
.appt-internal { display: inline-flex; align-items: center; justify-content: center; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 6px; background: #fdecea; color: #c0392b; border: 1px solid #f0b8b0; font-size: 10px; font-weight: 800; vertical-align: middle; }

/* ============ Agenda: buscador + detalle de cita ============ */
.agenda-search { position: relative; display: flex; align-items: center; min-width: 240px; flex: 1; max-width: 340px; }
.agenda-search .as-glyph { position: absolute; left: 12px; color: #90a0ac; font-size: 15px; }
.agenda-search input { width: 100%; min-height: 38px; border: 1px solid var(--line); border-radius: 999px; padding: 7px 14px 7px 32px; background: #fff; }
.cal-appt.js-cita { text-align: left; border: 0; border-left: 4px solid var(--blue); width: calc(100% - 10px); font: inherit; }
.cal-appt.js-cita:hover { filter: brightness(.99); }
.cita-detail { padding: 14px 20px 4px; }
.cita-when-line strong { font-size: 22px; color: var(--ink); }
.cita-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.cita-actions .primary, .cita-actions .button-like { min-height: 40px; text-decoration: none; }
.button-like.danger-btn { border-color: #f1c3bd; color: #c0392b; }
.button-like.danger-btn:hover { background: #fdecea; }

/* ============ Correcciones de modales e íconos ============ */

/* Íconos dentro de botones primarios: blancos y sin cajita celeste (se veían mal sobre el teal) */
.primary .btn-icon, .primary .nav-icon, .primary .menu-icon,
.content-header a.primary .btn-icon, .cita-actions .primary .btn-icon,
.form-actions .primary .btn-icon {
  background: transparent !important;
  border-color: transparent !important;
  color: #fff !important;
}

/* Modal Reprogramar: más ancho y grilla que no desborda (adiós scroll horizontal) */
#modalReprogramar .modal { width: min(100%, 540px); }
#modalReprogramar .settings-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; padding: 4px 20px; }
#modalReprogramar .settings-grid label { min-width: 0; }
#modalReprogramar .settings-grid .span-2,
#modalReprogramar .settings-grid .span-3 { grid-column: 1 / -1; }
#modalReprogramar .modal-help { padding: 0 20px; }
.modal { overflow-x: hidden; }

/* Modal de detalle de cita: acciones cómodas y parejas */
.cita-actions { gap: 8px; }
.cita-actions .primary, .cita-actions .button-like { padding: 0 14px; }
.cita-when-line { margin: 2px 0 4px; }

/* ============ Panel de datos de conexión (webhook) ============ */
.conn-help { margin: 6px 20px 14px; padding: 16px 18px; border: 1px solid #cfe3ef; border-radius: 14px; background: linear-gradient(180deg,#f2f9fd,#ffffff); }
.conn-help h3 { margin: 0 0 4px; color: #0d3b52; display: flex; align-items: center; gap: 8px; }
.conn-field { margin-top: 10px; }
.conn-field label { display: block; font-size: 12px; font-weight: 700; color: #57707f; margin-bottom: 4px; }
.cf-row { display: flex; gap: 8px; align-items: center; }
.cf-row input { flex: 1; min-width: 0; min-height: 38px; border: 1px solid var(--line); border-radius: 10px; background: #fff; padding: 7px 12px; color: #33424f; font-family: ui-monospace, "Cascadia Code", Consolas, monospace; font-size: 13px; }
.cf-row .button-like { white-space: nowrap; }

/* ============ Filtro de estado en la agenda ============ */
.agenda-filter { position: relative; }
.stF-panel { position: absolute; z-index: 40; top: calc(100% + 6px); right: 0; min-width: 250px; background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 12px 30px rgba(28,43,57,.16); padding: 8px; max-height: 360px; overflow: auto; }
.stF-head { display: flex; gap: 8px; padding: 4px 6px 8px; border-bottom: 1px solid #eef2f6; }
.stF-link { border: 0; background: #eef4f7; color: #40515f; border-radius: 999px; padding: 5px 12px; font-weight: 600; font-size: 12px; }
.stF-quick { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 6px; border-bottom: 1px solid #eef2f6; }
.stF-chip { border: 1px solid #cfe0ec; background: #fff; color: #1f6b97; border-radius: 999px; padding: 5px 12px; font-size: 12px; font-weight: 600; }
.stF-chip:hover { background: var(--soft-blue); }
.stF-item { display: flex; align-items: center; gap: 8px; padding: 7px 8px; border-radius: 8px; cursor: pointer; }
.stF-item:hover { background: #f4fafb; }
.stF-item span { font-size: 13px; color: #33424f; }
#stFilterCount { color: var(--cyan); font-weight: 700; }

/* ============ Ausencia rápida del profesional ============ */
.cal-head { position: relative; }
.cal-head.is-absent { background: #fdecea; }
.absent-badge { display: inline-block; margin-top: 2px; background: #c0392b; color: #fff; font-size: 10px; font-weight: 800; padding: 2px 8px; border-radius: 999px; letter-spacing: .04em; }
.js-absent { display: block; margin: 6px auto 8px; border: 1px solid #e2c3bd; background: #fff; color: #c0392b; border-radius: 999px; padding: 3px 12px; font-size: 11px; font-weight: 700; }
.js-absent:hover { background: #fdecea; }
.js-absent.on { border-color: #bfe3cd; color: #1e8b52; }
.js-absent.on:hover { background: #eaf7ee; }

/* ============ Fix layout de formularios de la ficha ============ */
.ficha-grid { align-items: start; }
.ficha-card label { display: block; margin-bottom: 12px; }
.ficha-card label > span { display: block; font-size: .8rem; color: #57707f; margin-bottom: 4px; }
/* Todos los controles ocupan el ancho de su celda/tarjeta */
.ficha-card .control,
.ficha-card label > input,
.ficha-card label > select,
.ficha-card label > textarea { width: 100%; }
.ficha-card textarea.control { min-height: 96px; line-height: 1.5; resize: vertical; }
.ficha-card .settings-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; }
.ficha-card .settings-grid label { margin-bottom: 0; }
/* Antecedentes: textarea grande y cómoda */
#antecedentesCard textarea, .ficha-card textarea[name*="MedicalNotes"] { min-height: 120px; }
/* Receta: notas grandes */
.rx-notes { min-height: 100px !important; }
/* Evita que las tarjetas queden con espacio muerto */
.ficha-card { display: flex; flex-direction: column; }
.ficha-card .form-actions { margin-top: auto; }

/* Presupuesto variable */
.bg-total-line { text-align: right; font-size: 1.05rem; color: #0d3b52; margin: 8px 0; }
.bg-total-line strong { color: #0879c9; }
#bgTable td { padding: 6px 8px; vertical-align: middle; }
#bgTable .control { padding: 6px 8px; }

/* ============ Editor de texto enriquecido ============ */
.rich-editor { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: #fff; margin-bottom: 12px; }
.re-toolbar { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; padding: 6px 8px; background: #f6f9fb; border-bottom: 1px solid var(--line); }
.re-toolbar button { border: 1px solid #d5e0e8; background: #fff; border-radius: 6px; min-width: 30px; height: 30px; padding: 0 8px; font-size: 13px; color: #40515f; }
.re-toolbar button:hover { background: var(--soft-blue); }
.re-sep { width: 1px; height: 20px; background: #d5e0e8; margin: 0 4px; }
.re-area { min-height: 180px; padding: 12px 14px; line-height: 1.6; font-size: 14px; color: #2c3e50; outline: none; }
.re-area:empty::before { content: attr(data-placeholder); color: #9aa7b2; }
.re-area h3 { margin: 10px 0 4px; font-size: 15px; }
.re-area ul, .re-area ol { margin: 6px 0 6px 22px; }
.re-area p { margin: 6px 0; }

/* ============ Acciones rápidas por paciente ============ */
.row-actions { display: flex; align-items: center; gap: 6px; justify-content: flex-end; }
.row-actions .button-like { min-height: 30px; padding: 0 10px; font-size: 12px; }
.qa-menu a, .qa-menu button { white-space: nowrap; }

/* ============================================================
   RESPONSIVE MÓVIL (full adaptable)
   ============================================================ */
@media (max-width: 820px) {
  .page-shell { padding: 12px 8px; }
  .workspace, .single-panel { width: 100%; }
  .content-header { flex-direction: column; align-items: stretch; gap: 10px; padding: 16px 14px 10px; }
  .content-header h1 { font-size: 1.35rem; }

  /* Cualquier grilla multi-columna -> una sola columna */
  .ficha-grid, .report-board, .settings-grid, .atn-grid, .kpi-grid,
  .detail-grid, .conn-status, .howto-grid, .form-grid, .res-grid,
  .ficha-card .settings-grid { grid-template-columns: 1fr !important; }
  .settings-grid .span-2, .settings-grid .span-3 { grid-column: 1 / -1 !important; }

  /* Tablas: scroll horizontal en vez de romper el layout */
  .data-table, .mini-table, .rx-table, #bgTable { display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .panel { overflow-x: hidden; }

  /* Modales casi a pantalla completa */
  .modal, .modal-lg, #modalReprogramar .modal { width: calc(100vw - 20px); max-height: 88vh; }
  .modal-backdrop { padding: 10px; }
  .dc-grid { grid-template-columns: 1fr; }

  /* Agenda: cuadrícula por profesional con scroll horizontal */
  .cal-body-row, .cal-head-row { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .cal-head, .cal-col-body { min-width: 150px; }
  .cal-toolbar { flex-wrap: wrap; gap: 8px; }
  .agenda-search { max-width: 100%; order: 3; width: 100%; }

  /* Pestañas de la ficha: scroll horizontal */
  .tabs-row { overflow-x: auto; -webkit-overflow-scrolling: touch; flex-wrap: nowrap; }
  .tabs-row .tab { white-space: nowrap; }

  /* Nav superior: scroll horizontal cómodo */
  .module-nav { flex-wrap: nowrap; overflow-x: auto; }
  .module-nav a { flex: 0 0 auto; }

  /* KPIs y tarjetas más compactas */
  .kpi strong { font-size: 1.5rem; }
  .ficha-summary { padding: 10px 14px; }

  /* Acciones que se salían */
  .cita-actions, .budget-actions, .form-actions { flex-wrap: wrap; }
  .row-actions { flex-wrap: wrap; }
}

@media (max-width: 480px) {
  .top-shell { padding: 8px 10px; }
  .brand-logo { height: 30px; }
  .avatar, .role-pill { display: none; }
  .content-header h1 { font-size: 1.2rem; }
  .kpi strong { font-size: 1.35rem; }
  .re-toolbar { gap: 3px; }
  .re-toolbar button { min-width: 26px; height: 26px; padding: 0 5px; font-size: 12px; }
}

/* ============================================================
   MOBILE v2 — repaso completo (header, tablas, agenda, filtros)
   Esta capa va al final: gana ante reglas mobile anteriores.
   ============================================================ */
@media (max-width: 860px) {
  html, body { overflow-x: hidden; }

  /* ---- Header sin superposiciones ---- */
  .top-shell { display: flex; flex-wrap: wrap; align-items: center; height: auto; padding: 8px 12px; gap: 8px 10px; }
  .brand { order: 0; }
  .brand-logo { height: 30px; }
  .top-actions { order: 1; margin-left: auto; gap: 8px; align-items: center; }
  .global-search { order: 2; flex: 1 1 100%; height: 40px; }
  .top-actions .quiet-button, .top-actions .clinic-button, .role-pill { display: none !important; }
  .logout-form button { padding: 8px 12px; }
  .module-nav { position: sticky; top: auto; }

  /* ---- Tablas: scroll horizontal limpio (no se cortan) ---- */
  .panel, .rb-card, .ficha-card, .detail-panel { overflow: visible; }
  .data-table, .rx-table, .mini-table, #bgTable, .wide-table > table {
    display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap;
  }
  .data-table th, .data-table td, .wide-table th, .wide-table td { padding: 9px 10px; font-size: 12.5px; }
  .wide-table { border: 0; }

  /* ---- Grillas a una columna ---- */
  .ficha-grid, .report-board, .settings-grid, .atn-grid, .kpi-grid,
  .detail-grid, .conn-status, .form-grid, .ficha-card .settings-grid { grid-template-columns: 1fr !important; }
  .settings-grid .span-2, .settings-grid .span-3 { grid-column: 1 / -1 !important; }

  /* ---- Agenda: toolbar sin desbordar ---- */
  .cal-toolbar { flex-wrap: wrap; gap: 8px; align-items: stretch; }
  .period-pills { flex-wrap: wrap; gap: 6px; }
  .agenda-search { flex: 1 1 100%; max-width: none; order: 6; }
  .agenda-filter { order: 5; }
  .date-nav { order: 4; }
  .view-toggle { order: 3; }

  /* Filtro de estado como hoja inferior (no se sale de pantalla) */
  .stF-panel { position: fixed; left: 0; right: 0; bottom: 0; top: auto; width: auto; min-width: 0;
    max-height: 68vh; border-radius: 16px 16px 0 0; box-shadow: 0 -10px 30px rgba(0,0,0,.2); z-index: 80; }

  /* ---- Calendario: head + body scrollean juntos y alineados ---- */
  .cal { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .cal-head-row, .cal-body-row { width: max-content; min-width: 100%; }
  .cal-corner, .cal-times { flex: 0 0 46px; width: 46px; min-width: 46px; }
  .cal-head, .cal-col-body { flex: 0 0 168px; width: 168px; min-width: 168px; }
  .cal-appt { left: 4px; right: 4px; }
  .cal-appt .ca-name { font-size: 12px; }
  .js-absent { font-size: 10px; padding: 2px 8px; }

  /* Lista de citas: apila cómodo */
  .list-appt { grid-template-columns: 1fr !important; gap: 6px; padding: 12px; }
  .list-appt .la-state, .list-appt .la-sit { justify-self: start; }
  .state-select { max-width: 100%; }

  /* ---- Modales full-width ---- */
  .modal, .modal-lg, #modalReprogramar .modal { width: calc(100vw - 20px); max-height: 90vh; overflow: auto; }
  .modal-backdrop { padding: 10px; align-items: flex-start; }
  .dc-grid { grid-template-columns: 1fr; }
  .cita-actions { flex-direction: column; }
  .cita-actions .primary, .cita-actions .button-like { width: 100%; }

  /* ---- Pestañas de la ficha deslizables ---- */
  .tabs-row { overflow-x: auto; -webkit-overflow-scrolling: touch; flex-wrap: nowrap; }
  .tabs-row .tab { white-space: nowrap; }

  .kpi strong { font-size: 1.5rem; }
}

@media (max-width: 480px) {
  .avatar { width: 30px; height: 30px; }
  .content-header h1 { font-size: 1.2rem; }
  .cal-head, .cal-col-body { flex-basis: 150px; width: 150px; min-width: 150px; }
}

/* ============ Matriz de permisos ============ */
.perm-matrix table { min-width: 620px; }
.perm-matrix th, .perm-matrix td { text-align: center; }
.perm-matrix .pm-permcol { text-align: left; position: sticky; left: 0; background: #fff; z-index: 1; min-width: 200px; }
.perm-matrix thead th { background: #f6f9fb; }
.perm-matrix .pm-module td { background: #eef4f7; font-weight: 800; color: #0d3b52; text-transform: uppercase; font-size: 11px; letter-spacing: .05em; text-align: left; position: sticky; left: 0; }
.perm-matrix .pm-cell { padding: 6px; }
.perm-matrix .switch-row { justify-content: center; }

/* ============ Plan de tratamiento por fases ============ */
.plan-card { background:#fff; border:1px solid var(--line); border-radius:14px; padding:14px 16px; margin-bottom:14px; }
.plan-head { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:8px; }
.plan-head strong { color:#0d3b52; }
.plan-total { color:#0879c9; font-weight:700; }
.plan-progress { display:flex; align-items:center; gap:10px; margin:4px 0 6px; }
.pp-bar { flex:1; height:10px; background:#e7edf2; border-radius:999px; overflow:hidden; }
.pp-bar span { display:block; height:100%; background:linear-gradient(90deg,#12a3a3,#0b5fa3); border-radius:999px; transition:width .3s; }
.plan-progress small { color:#57707f; white-space:nowrap; }
.phase-done td { opacity:.7; }
.phase-actions { display:flex; gap:6px; flex-wrap:wrap; }
.plan-addfase { display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-top:10px; padding-top:10px; border-top:1px dashed var(--line); }
.plan-addfase .control { padding:7px 10px; }

/* Plan: dinero + chip de plan activo */
.plan-money { display:flex; flex-wrap:wrap; gap:16px; margin:2px 0 6px; font-size:13.5px; color:#57707f; }
.plan-money strong { color:#0d3b52; }
.plan-money .pm-due strong { color:#c0392b; }
.ficha-kpi.kpi-plan { text-decoration:none; background:#eef7ff; border-color:#cfe3ef; min-width:180px; }
.ficha-kpi.kpi-plan strong { color:#0879c9; font-size:1rem; }
.ficha-kpi.kpi-plan small { color:#57707f; font-size:.72rem; }

/* Cobro por folio */
.cobro-info { font-size: 13px; color: #40515f; }
.cobro-info.ok b { color: #c0392b; }
.cobro-info.err { color: #c0392b; }

/* Nota por voz */
.voice-bar { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; flex-wrap: wrap; }
.voice-bar .rec-on { background: #fde8e8; color: #c0392b; border-color: #f5b7b1; animation: recPulse 1.2s infinite; }
@keyframes recPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(192, 57, 43, .25); } 50% { box-shadow: 0 0 0 6px rgba(192, 57, 43, .08); } }

/* Notas del plan en la ficha */
.plan-notes { font-size: 13px; color: #46586a; margin: 6px 0; display: flex; flex-direction: column; gap: 2px; }
.plan-notes .pn-k { color: #8496a3; font-weight: 600; }
/* Rediseño Plan de tratamiento (mockup): barra superior + crear en modal + tarjetas más claras */
.plan-topbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding: 16px 20px 6px; }
.plan-topbar-info { display: flex; gap: 12px; align-items: flex-start; }
.plan-topbar-ico { width: 40px; height: 40px; border-radius: 11px; background: #e6f6f2; color: #0e9f6e; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.plan-topbar-info h3 { color: #1f2d3a; font-size: 1.15rem; }
.plan-field { display: block; margin-bottom: 12px; }
.plan-field > span { display: block; font-weight: 600; color: #2c3a47; margin-bottom: 5px; }
.paf-label { font-weight: 700; color: #0e9f6e; white-space: nowrap; }
.plan-card { border-left: 4px solid #0e9f6e; }
.plan-card > .plan-head strong { font-size: 1rem; }
.plan-card table thead th { text-transform: uppercase; font-size: 11px; letter-spacing: .03em; color: #90a0ad; }
.plan-addfase { background: #f7f9fb; border: 1px solid #e6ecf1; border-top: 1px solid #e6ecf1; border-radius: 10px; padding: 10px 12px; }

/* ===== Modal "Nuevo plan de tratamiento" (diseño tarjeta) ===== */
.np-modal { max-width: 860px; width: min(860px, 94vw); border-radius: 18px; padding: 0; overflow: hidden; }
.np-head { display: flex; align-items: flex-start; gap: 16px; padding: 26px 28px 18px; }
.np-ico { flex: 0 0 auto; width: 58px; height: 58px; border-radius: 14px; background: #e7f7f5; display: flex; align-items: center; justify-content: center; }
.np-ico .btn-icon { width: 28px; height: 28px; filter: none; }
.np-titles { flex: 1; }
.np-titles h2 { margin: 0 0 6px; font-size: 24px; color: #1c2b39; }
.np-titles p { margin: 0; color: #7b8a97; font-size: 14px; line-height: 1.45; }
.np-head .modal-x { margin-left: auto; }
.np-body { margin: 0 28px; background: #fbfdfe; border: 1px solid #e8eef3; border-radius: 14px; padding: 20px 22px 14px; }
.np-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 640px) { .np-grid { grid-template-columns: 1fr; } }
.np-field { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.np-field > span { font-weight: 700; font-size: 14.5px; color: #1c2b39; }
.np-req { color: #18b8b1; font-weight: 800; }
.np-field .control { min-height: 46px; border-radius: 10px; font-size: 15px; }
.np-field textarea.control { min-height: 130px; resize: vertical; }
.np-input-ico { position: relative; display: block; }
.np-input-ico .control { width: 100%; padding-right: 42px; }
.np-input-ico > .btn-icon { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); opacity: .55; pointer-events: none; }
.np-hint { margin: 0 0 6px; color: #8496a3; font-size: 13px; }
.np-foot { display: flex; justify-content: flex-end; gap: 12px; padding: 20px 28px 24px; }
.np-cancel { background: #fff; border: 1px solid #d7e2ea; border-radius: 12px; padding: 12px 26px; font-weight: 700; font-size: 15px; color: #1c2b39; cursor: pointer; }
.np-cancel:hover { background: #f4f8fb; }
.np-create { display: inline-flex; align-items: center; gap: 8px; background: #14a396; border: 0; border-radius: 12px; padding: 12px 26px; font-weight: 700; font-size: 15px; color: #fff; cursor: pointer; }
.np-create:hover { filter: brightness(1.06); }
.np-create .btn-icon { filter: brightness(0) invert(1); }

/* Botón pill en la barra rápida de atención (mismo look que los links) */
.atn-quick .linklike-quick { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--line); background: #fff; border-radius: 999px; padding: 8px 14px; font-weight: 600; color: #40515f; font-size: 13px; cursor: pointer; transition: background .12s, box-shadow .12s; font-family: inherit; }
.atn-quick .linklike-quick:hover { background: var(--soft-blue); box-shadow: 0 3px 10px rgba(28,43,57,.08); }
/* Total del modal de presupuesto */
.np-total { text-align: right; font-size: 16px; color: #1c2b39; padding: 6px 2px 2px; }
.np-total strong { color: #14a396; font-size: 20px; }

/* ===== Estilos compartidos Atención ↔ Ficha clínica (historial, antecedentes, modal evolución) ===== */
.atn-grid2 { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 16px; padding: 4px 20px 24px; align-items: start; }
.atn-side2 { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.atn-grid2 .rb-card { min-width: 0; }
@media (max-width: 1000px) { .atn-grid2 { grid-template-columns: 1fr; } }
.atn-hist-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.hist-row { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; margin-top: 12px; display: grid; grid-template-columns: 130px 1fr; gap: 10px; align-items: start; }
.hist-when { color: #55616d; font-size: .9rem; }
.hist-cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.hist-cols > div { min-width: 0; }
.hist-cols label { display: block; font-size: .72rem; text-transform: uppercase; letter-spacing: .03em; color: #90a0ad; margin-bottom: 2px; }
.hist-cols span { color: #26323c; font-size: .9rem; }
.hist-detail { grid-column: 1 / -1; margin-top: 4px; }
.hist-detail summary { cursor: pointer; color: #0879c9; font-weight: 600; font-size: .85rem; }
.hist-detail p { margin: 6px 0 0; color: #46535e; font-size: .9rem; }
.atn-hist-foot { text-align: center; margin-top: 14px; }
.atn-hist-foot button, .atn-hist-foot a { color: #0879c9; font-weight: 600; text-decoration: none; }
.hist-extra { display: none; }
.hist-extra.show { display: grid; }
@media (max-width: 720px) { .hist-row { grid-template-columns: 1fr; } .hist-cols { grid-template-columns: 1fr 1fr; } }
.ant-head { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 6px; }
.ant-head-ico { width: 40px; height: 40px; border-radius: 11px; background: #e6f6f2; color: #0e9f6e; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.ant-head h3 { margin: 0; font-size: 1.15rem; color: #1f2d3a; }
.ant-head p { margin: 2px 0 0; color: #6b7c8a; font-size: .86rem; }
.ant-item { display: flex; align-items: center; gap: 12px; border-radius: 12px; padding: 12px 14px; margin-top: 12px; border: 1px solid; }
.ant-item-ico { width: 34px; height: 34px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; background: #fff; }
.ant-item-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ant-item-txt strong { font-size: .96rem; }
.ant-item-txt span { color: #55616d; font-size: .88rem; font-style: italic; }
.ant-check { width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; flex: 0 0 auto; border: 1.5px solid; }
.ant-item.ok { background: #f0faf5; border-color: #cfeadd; }
.ant-item.ok .ant-item-ico { color: #0e9f6e; } .ant-item.ok .ant-item-txt strong { color: #0e9f6e; }
.ant-item.ok .ant-check { color: #0e9f6e; border-color: #a7ddc5; }
.ant-item.info { background: #eef4fb; border-color: #d3e2f2; }
.ant-item.info .ant-item-ico { color: #2f7dd1; } .ant-item.info .ant-item-txt strong { color: #2f7dd1; }
.ant-item.info .ant-check { color: #2f7dd1; border-color: #b3d0ee; }
.ant-item.danger { background: #fdf0ee; border-color: #f2c9c2; }
.ant-item.danger .ant-item-ico { color: #c0392b; } .ant-item.danger .ant-item-txt strong { color: #c0392b; }
.ant-item.danger .ant-item-txt span { font-style: normal; font-weight: 600; color: #b23c30; }
.ant-item.danger .ant-check.warn { color: #c0392b; border-color: #edb6ae; }
.ant-edit2 { border: 1px dashed #bcd3ec; border-radius: 12px; margin-top: 14px; }
.ant-edit2 summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; color: #2f7dd1; font-weight: 700; }
.ant-edit2 summary::-webkit-details-marker { display: none; }
.ant-edit-left { display: inline-flex; align-items: center; gap: 8px; }
.ant-chev { transition: transform .15s; }
.ant-edit2[open] .ant-chev { transform: rotate(180deg); }
.ant-edit-form { padding: 0 14px 14px; }
.ant-edit-form label > span { display: block; font-weight: 600; color: #2c3a47; margin: 8px 0 4px; }
.modal-evo { width: min(100%, 1000px); }
.evo-head { align-items: flex-start; padding: 20px 22px 6px; }
.evo-title { display: flex; gap: 12px; align-items: flex-start; }
.evo-ico { width: 38px; height: 38px; border-radius: 10px; background: #e6f6f2; color: #0e9f6e; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.evo-title h2 { margin: 0; font-size: 20px; color: #1f2d3a; }
.evo-title p { margin: 2px 0 0; color: #6b7c8a; font-size: .9rem; }
.evo-body { padding: 8px 22px 6px; }
.evo-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.evo-btn-outline, .evo-btn-fill { display: inline-flex; align-items: center; gap: 7px; border-radius: 999px; padding: 9px 18px; font-weight: 700; cursor: pointer; font-size: .92rem; }
.evo-btn-outline { background: #fff; color: #0e9f6e; border: 1.5px solid #0e9f6e; }
.evo-btn-outline:hover { background: #eefaf5; }
.evo-btn-outline.rec-on { background: #fdecea; border-color: #e0574f; color: #c0392b; }
.evo-btn-fill { background: #0e9f6e; color: #fff; border: 1.5px solid #0e9f6e; }
.evo-btn-fill:hover { background: #0b8a5f; }
.evo-btn-fill:disabled { opacity: .6; cursor: default; }
.evo-info { display: inline-flex; align-items: center; gap: 6px; background: #f1f5f8; color: #5a6a78; border-radius: 999px; padding: 7px 14px; font-size: .85rem; }
.evo-badge { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; padding: 6px 14px; font-size: .82rem; font-weight: 700; background: #eef1f4; color: #97a4b0; }
.evo-badge.on { background: #e7f7ef; color: #0e9f6e; }
.evo-draft { background: #f3faf8; border: 1px solid #d5ece4; border-radius: 12px; padding: 12px 14px; }
.evo-draft-label { display: flex; align-items: center; gap: 7px; color: #0e9f6e; font-weight: 700; margin-bottom: 8px; }
.evo-draft textarea { width: 100%; box-sizing: border-box; border: 1px solid #cfe4dc; border-radius: 8px; padding: 12px 14px; min-height: 90px; resize: vertical; font: inherit; color: #2a3742; background: #fff; }
.evo-count { text-align: right; color: #9aa7b2; font-size: .78rem; margin-top: 4px; }
.evo-fields { background: #f7f9fb; border: 1px solid #e6ecf1; border-radius: 12px; padding: 16px; margin-top: 14px; }
.evo-fields label { display: block; }
.evo-fields label > span { display: block; font-weight: 700; color: #2c3a47; margin-bottom: 6px; font-size: .92rem; }
.evo-fields input, .evo-fields textarea { width: 100%; box-sizing: border-box; border: 1px solid #d4dde5; border-radius: 8px; padding: 11px 13px; font: inherit; color: #2a3742; background: #fff; }
.evo-fields textarea { resize: vertical; }
.evo-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; margin-bottom: 14px; }
.evo-row3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px 16px; align-items: start; }
@media (max-width: 760px) { .evo-row2, .evo-row3 { grid-template-columns: 1fr; } .evo-badge { margin-left: 0; } }

/* ===== Tonos por tarjeta (plan / presupuesto): fondo suave cíclico para diferenciar ===== */
.tone-0 { background: #f2fbf5 !important; border-color: #cfeadd !important; }   /* verde */
.tone-1 { background: #fff7ec !important; border-color: #f3ddba !important; }   /* naranjo */
.tone-2 { background: #eef6fd !important; border-color: #cfe3f5 !important; }   /* azul */
.tone-3 { background: #f8f2fd !important; border-color: #e4d3f2 !important; }   /* morado */
.tone-4 { background: #eefaf9 !important; border-color: #c9ebe8 !important; }   /* teal */

/* ===== Explicador IA para marketing (Administración → Asistente IA) ===== */
.ia-hero { display: flex; gap: 16px; align-items: flex-start; margin: 0 20px 12px; background: linear-gradient(135deg,#eef7ff,#e9fbf7); border: 1px solid #d5e8f2; border-radius: 14px; padding: 16px 18px; }
.ia-hero-ico { font-size: 34px; line-height: 1; flex: 0 0 auto; }
.ia-hero h3 { margin: 0 0 4px; font-size: 17px; color: #0879c9; }
.ia-hero p { margin: 0; color: #38505f; font-size: 13.5px; line-height: 1.5; }
.ia-how { display: flex; align-items: stretch; gap: 8px; margin: 0 20px 12px; flex-wrap: wrap; }
.ia-how-step { flex: 1 1 200px; display: flex; gap: 10px; align-items: flex-start; background: #fff; border: 1px solid #e2ecf3; border-radius: 12px; padding: 12px 14px; }
.ia-how-n { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; background: #18b8b1; color: #fff; font-weight: 800; display: flex; align-items: center; justify-content: center; font-size: 14px; }
.ia-how-step strong { display: block; font-size: 13.5px; color: #1c2b39; }
.ia-how-step small { color: #6b7c8a; font-size: 12px; }
.ia-how-arrow { display: flex; align-items: center; color: #18b8b1; font-size: 22px; font-weight: 800; }
@media (max-width: 720px) { .ia-how-arrow { display: none; } }
.ia-guide { margin: 10px 0 0; padding-left: 22px; display: flex; flex-direction: column; gap: 9px; }
.ia-guide li { font-size: 13px; color: #38505f; line-height: 1.5; }
.ia-guide li strong { color: #1c2b39; }
label.conn-group { display: block; font-weight: 800; color: #0879c9; font-size: 13.5px; margin: 8px 0 2px; padding-top: 6px; border-top: 1px solid #eef2f5; }

/* ===== Matriz convenio × servicio (Administración → Especialidades) ===== */
.cov-matrix { width: 100%; border-collapse: collapse; margin-top: 8px; }
.cov-matrix th { text-align: left; font-size: 12px; color: #6b7c8a; font-weight: 700; padding: 4px 8px; border-bottom: 1px solid #e2ecf3; }
.cov-matrix td { padding: 5px 8px; vertical-align: middle; border-bottom: 1px solid #f0f4f7; }
.cov-matrix .cov-name { font-weight: 700; color: #1c2b39; white-space: nowrap; }
.cov-matrix .cov-mode { min-width: 150px; }
.cov-matrix .cov-reply { width: 100%; }
.tag-clinic { background: #ffe0b2; color: #b45309; }

/* ============================================================
   Gliver Dental v4 — Menú superior + navegación + encabezado
   ============================================================ */

/* ---- Barra superior: acciones agrupadas y chip de usuario ---- */
.top-shell { gap: 16px; padding: 0 24px; }
.top-actions { gap: 12px; }

.action-group { display: inline-flex; align-items: center; background: #fff; border: 1px solid var(--line);
  border-radius: 14px; padding: 4px; box-shadow: 0 1px 3px rgba(28,43,57,.05); }
.action-group > .quiet-button, .action-group > .clinic-button {
  border: 0; background: transparent; box-shadow: none; border-radius: 10px; padding: 8px 14px; color: #4a5763; }
.action-group > * + * { position: relative; }
.action-group > * + *::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 1px; background: var(--line); }
.action-group > .quiet-button:hover, .action-group > .clinic-button:hover { background: var(--page); }

.user-chip { display: inline-flex; align-items: center; gap: 10px; padding: 5px 12px 5px 6px;
  border: 1px solid var(--line); border-radius: 999px; background: #fff; box-shadow: 0 1px 3px rgba(28,43,57,.05);
  cursor: default; max-width: 220px; }
.user-chip .avatar { width: 36px; height: 36px; font-size: 15px; box-shadow: 0 4px 12px rgba(24,184,177,.35); }
.user-chip .user-meta { display: grid; line-height: 1.15; min-width: 0; }
.user-chip .user-meta strong { color: var(--ink); font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-chip .user-meta small { color: var(--muted); font-size: 11.5px; }
.chip-caret { color: #9aa6b2; font-size: 12px; }

/* ---- Navegación de módulos: pestañas ícono + etiqueta ---- */
.module-nav { height: auto; min-height: 78px; padding: 10px 20px; gap: 4px; align-items: stretch; }
.module-nav a { flex-direction: column; height: auto; justify-content: center; gap: 7px;
  min-width: 76px; padding: 8px 14px 9px; border-radius: 14px; color: #5a6875; font-size: 12.5px; font-weight: 600; position: relative; }
.module-nav a .nav-icon { width: 30px; height: 30px; border-radius: 10px; background: #eef7f7; border-color: #cfe9e8; color: var(--blue); }
.module-nav a .nav-icon::before, .module-nav a .nav-icon::after { transform-origin: center; }
.module-nav a:hover:not(.active):not(.crm-link) { background: var(--page); color: var(--ink); }
.module-nav a.active:not(.crm-link) { background: var(--soft-blue); color: var(--blue-strong); box-shadow: none; font-weight: 700; }
.module-nav a.active:not(.crm-link) .nav-icon { background: #fff; border-color: #b3e0df; color: var(--blue-strong); }
.module-nav a.active:not(.crm-link)::after { content: ""; position: absolute; left: 18px; right: 18px; bottom: 4px; height: 3px; border-radius: 3px; background: var(--brand-grad); }

/* Botón CRM destacado, alineado a la derecha */
.module-nav a.crm-link { margin-left: auto; flex-direction: row; gap: 9px; min-width: auto; align-self: center;
  height: 48px; padding: 0 22px; border-radius: 14px; font-size: 14px; font-weight: 700;
  color: #fff; background: var(--brand-grad); box-shadow: 0 8px 20px rgba(24,184,177,.34); }
.module-nav a.crm-link .nav-icon { width: 22px; height: 22px; background: rgba(255,255,255,.22); border-color: rgba(255,255,255,.4); color: #fff; }
.module-nav a.crm-link:hover { color: #fff; background: var(--brand-grad); box-shadow: 0 10px 24px rgba(24,184,177,.45); transform: translateY(-1px); }
.module-nav a.crm-link:hover .nav-ic { color: #fff; }
.module-nav a.crm-link::after { display: none; }

/* ---- Encabezado de la Agenda (inicio) más pulido ---- */
.cal-topbar { align-items: center; padding: 22px 24px 16px; background: linear-gradient(180deg, #f4fbfb 0%, #ffffff 100%); border-bottom: 1px solid var(--line); }
.cal-topbar h1 { font-size: 23px; letter-spacing: -.01em; }
.cal-topbar p { margin: 5px 0 0; font-weight: 500; }

/* ---- Ajustes responsive ---- */
@media (max-width: 1180px) {
  .module-nav a { min-width: 66px; padding: 8px 10px 9px; font-size: 11.5px; }
}
@media (max-width: 1024px) {
  .action-group { display: none; }
  .user-chip .user-meta { display: none; }
  .user-chip { max-width: none; padding: 4px; border: 0; box-shadow: none; }
  .module-nav { min-height: 68px; }
}

/* ---- v5: iconos SVG del menú (tiles) ---- */
.nav-ic { display: inline-grid; place-items: center; }
.nav-ic svg { display: block; }
.module-nav a .nav-ic { width: 34px; height: 34px; border-radius: 11px; background: #eef7f7; border: 1px solid #d5ebea; color: var(--blue); transition: background .15s, border-color .15s, color .15s; }
.module-nav a .nav-ic svg { width: 19px; height: 19px; }
.module-nav a:hover:not(.active):not(.crm-link) .nav-ic { background: #fff; border-color: #cfe0ea; }
.module-nav a.active:not(.crm-link) .nav-ic { background: #fff; border-color: #a9dcda; color: var(--blue-strong); box-shadow: 0 3px 8px rgba(24,184,177,.18); }
.module-nav a.crm-link .nav-ic { width: 24px; height: 24px; border-radius: 8px; background: rgba(255,255,255,.22); border: 1px solid rgba(255,255,255,.4); color: #fff; }
.module-nav a.crm-link .nav-ic svg { width: 16px; height: 16px; }

/* Botón "Mi cuenta" con su icono */
.top-actions .account-btn { padding: 8px 15px; }
.top-actions .account-btn .nav-ic.sm { width: 18px; height: 18px; color: var(--blue); }
.top-actions .account-btn .nav-ic.sm svg { width: 17px; height: 17px; }

/* ---- v6: botón "Cerrar sesión" para header claro ---- */
.top-shell .logout-form button { min-height: 38px; border: 1px solid var(--line); border-radius: 999px; background: #fff; color: #c0392b; padding: 0 15px; font-weight: 600; gap: 7px; box-shadow: 0 1px 3px rgba(28,43,57,.05); }
.top-shell .logout-form button:hover { background: #fdece9; border-color: #f1c4bd; }
.top-shell .logout-form .btn-icon.icon-login { background: #fdece9; border-color: #f1c4bd; color: #c0392b; }

/* ============================================================
   v7 — Login Gliver Dental (fondo backweb.png / backcell.png)
   ============================================================ */
.login-body { min-height: 100vh; margin: 0; background: #eef3f7 url("../backweb.png") center center / cover no-repeat fixed; }
.login-shell { min-height: 100vh; display: grid; place-items: center; padding: 28px 18px; }

.login-card { width: min(100%, 468px); background: rgba(255,255,255,.97); backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,.9); border-radius: 22px; padding: 34px 34px 28px;
  box-shadow: 0 28px 70px rgba(18,58,84,.18), 0 4px 14px rgba(18,58,84,.06); }

.login-brand { display: flex; justify-content: center; margin: 0 0 10px; }
.login-brand img { height: 42px; width: auto; max-width: 100%; }

/* Bajada "ERP clínico dental" con líneas a los costados (como el mockup) */
.login-tagline { display: flex; align-items: center; gap: 12px; margin: 0 0 22px; }
.login-tagline::before, .login-tagline::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, #d7e3ec); }
.login-tagline::after { background: linear-gradient(90deg, #d7e3ec, transparent); }
.login-tagline span { color: #8b98a6; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; white-space: nowrap; }

.login-title { margin: 0 0 6px; text-align: center; font-size: 25px; font-weight: 800; letter-spacing: -.02em; color: #16324a; }
.login-sub { margin: 0 0 22px; text-align: center; color: var(--muted); font-size: 13.5px; }

.login-form { display: grid; gap: 0; margin: 0; }
.login-form label { margin: 0 0 7px; color: #4a5763; font-weight: 600; font-size: 13px; }

/* Campo con icono adentro */
.login-field { position: relative; display: flex; align-items: center; margin: 0 0 16px; }
.login-field .lf-ic { position: absolute; left: 14px; display: grid; place-items: center; color: var(--blue); pointer-events: none; }
.login-field .lf-ic svg { width: 19px; height: 19px; display: block; }
.login-field input { width: 100%; min-height: 52px; padding: 0 46px 0 46px; border: 1px solid #dbe4ec; border-radius: 13px;
  background: #fbfdfe; color: var(--ink); font-size: 14.5px; transition: border-color .15s, box-shadow .15s, background .15s; }
.login-field input::placeholder { color: #a6b2be; }
.login-field input:focus { outline: 0; background: #fff; border-color: var(--cyan); box-shadow: 0 0 0 4px rgba(24,184,177,.14); }
.login-field .lf-eye { position: absolute; right: 8px; display: grid; place-items: center; width: 36px; height: 36px;
  border: 0; border-radius: 10px; background: transparent; color: #93a1ae; cursor: pointer; }
.login-field .lf-eye svg { width: 19px; height: 19px; display: block; }
.login-field .lf-eye:hover { background: #eef4f8; color: var(--blue); }
.login-field .lf-eye.on { color: var(--blue-strong); }

/* Boton principal */
.login-submit { display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 54px;
  margin: 4px 0 0; border: 0; border-radius: 13px; color: #fff; font-size: 15.5px; font-weight: 700; cursor: pointer;
  background: linear-gradient(100deg, #17b9b2 0%, #1b90a8 52%, #1a5fb4 100%);
  box-shadow: 0 12px 26px rgba(24,140,170,.34); transition: transform .08s ease, box-shadow .18s ease, filter .18s ease; }
.login-submit svg { width: 20px; height: 20px; display: block; }
.login-submit:hover { filter: brightness(1.05); box-shadow: 0 16px 32px rgba(24,140,170,.42); }
.login-submit:active { transform: translateY(1px); }

/* Fila recordarme + aviso de clave */
.login-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 16px 0 0; }
.login-form label.login-remember { display: inline-flex; align-items: center; gap: 9px; margin: 0; color: #4a5763; font-weight: 600; font-size: 13px; cursor: pointer; }
.login-form label.login-remember input { width: 18px; height: 18px; min-height: 0; margin: 0; padding: 0; border-radius: 5px; accent-color: var(--cyan); cursor: pointer; }
.login-hint { color: #97a3af; font-size: 12px; }

.login-sep { height: 1px; margin: 22px 0 16px; background: linear-gradient(90deg, transparent, #e2eaf1 22%, #e2eaf1 78%, transparent); }
.login-patient { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 0; color: var(--muted); font-size: 13.5px; text-align: center; }
.login-patient svg { width: 19px; height: 19px; color: var(--blue); flex: 0 0 auto; }
.login-patient a { color: var(--blue-strong); font-weight: 700; }
.login-patient a:hover { text-decoration: underline; }

.login-error { margin: 0 0 16px; border: 1px solid #f3c2c2; background: #fff3f3; color: #a03030; border-radius: 12px; padding: 11px 14px; font-size: 13.5px; }

/* Movil: usa el fondo vertical */
@media (max-width: 820px) {
  .login-body { background-image: url("../backcell.png"); background-attachment: scroll; }
  .login-card { padding: 28px 22px 24px; border-radius: 20px; }
  .login-title { font-size: 22px; }
  .login-row { justify-content: flex-start; }
}
@media (max-width: 380px) {
  .login-brand img { height: 34px; }
  .login-field input { min-height: 48px; }
}

/* ============================================================
   v8 — CRM en telefono: al abrir un chat, pantalla completa
   (se ocultan KPI/cabecera/sandbox: el hilo ya tiene su propio
    encabezado con boton Volver)
   ============================================================ */
@media (max-width: 920px) {
  body.crm-chat-open .crm-summary,
  body.crm-chat-open .crm-sandbox,
  body.crm-chat-open .content-header,
  body.crm-chat-open .crm-list-hint { display: none; }

  /* El chat aprovecha el alto liberado */
  /* El alto real lo mide el JS (--crm-h) porque la cabecera cambia de alto
     segun el ancho; el calc es solo el respaldo si el JS no corrio. */
  body.crm-chat-open .crm-app { height: calc(100vh - 210px); height: var(--crm-h, calc(100dvh - 210px)); margin: 0 8px 10px; }
  body.crm-chat-open .page-shell { padding-top: 10px; }

  /* Encabezado del hilo mas compacto y pegajoso */
  body.crm-chat-open .crm-thread-head { position: sticky; top: 0; z-index: 3; background: #fff; padding: 8px 10px; gap: 8px; }
  body.crm-chat-open .crm-back { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; margin-right: 2px; border-radius: 10px; background: #eef4f8; font-size: 22px; }

  /* Burbujas y composer con mas aire para el pulgar */
  body.crm-chat-open .crm-messages { padding: 12px 10px; }
  body.crm-chat-open .crm-composer { padding: 10px; gap: 8px; }
  body.crm-chat-open .crm-composer input,
  body.crm-chat-open .crm-composer textarea { min-height: 44px; }
  body.crm-chat-open .crm-composer button { min-height: 44px; }
}

/* ============================================================
   v9 — Correcciones movil (cabecera, aviso de pago, desborde)
   OJO: este bloque va al final a proposito, porque las reglas
   base de v4/v5 se declararon despues de los @media originales
   y los pisaban. Aqui se restablece el comportamiento movil.
   ============================================================ */

/* --- 1) Cabecera: logo proporcionado y con aire --- */
@media (max-width: 900px) {
  .top-shell { height: auto; padding: 10px 14px; gap: 10px; align-items: center; }
  .brand { min-width: 0; }
  .brand-logo { height: 24px; max-width: 62vw; object-fit: contain; }
  .top-actions { gap: 8px; flex-wrap: nowrap; }
  .user-chip { max-width: none; padding: 2px; border: 0; box-shadow: none; }
  .user-chip .chip-caret { display: none; }
  .user-chip .avatar { width: 32px; height: 32px; font-size: 14px; }
  .top-shell .logout-form button { min-height: 34px; padding: 0 12px; }
}
@media (max-width: 480px) {
  /* Una regla antigua ocultaba .avatar en pantallas chicas; con el chip de
     usuario el avatar es la unica senal de quien esta conectado, asi que vuelve. */
  .user-chip .avatar { display: grid; }
}
@media (max-width: 420px) {
  .brand-logo { height: 21px; max-width: 55vw; }
  .top-shell { padding: 9px 12px; }
  .top-shell .logout-form button { padding: 0 10px; }
}

/* --- 2) Aviso de comprobante: mas suave y que no exprima el texto --- */
.pay-warning { flex-wrap: wrap; background: #fffaf0; border-bottom: 1px solid #f0e2bd; color: #7d6428; font-size: 12.5px; line-height: 1.45; }
.pay-warning > span:not(.pay-ico) { flex: 1 1 220px; min-width: 0; }
.pay-warning .pay-ico { font-size: 15px; flex: 0 0 auto; }
.pay-warning .pay-btn { white-space: normal; }

@media (max-width: 920px) {
  /* En telefono: el texto ocupa el ancho y el boton va abajo, completo */
  .pay-warning { align-items: flex-start; gap: 8px; padding: 10px 12px; }
  .pay-warning > span:not(.pay-ico) { flex: 1 1 100%; }
  .pay-warning .pay-btn { margin-left: 0; width: 100%; min-height: 38px; }
}

/* --- 3) Sin desborde horizontal (la barra deslizadora fantasma) ---
   Causa raiz: la ficha lateral trae el atributo [hidden], pero
   ".crm-app.show-chat .crm-side { display:flex }" le ganaba y la dibujaba
   fuera de pantalla. Se respeta [hidden] y ademas se oculta en telefono. */
.crm-app .crm-side[hidden] { display: none; }
@media (max-width: 920px) {
  .crm-app.show-chat .crm-side { display: none; }
  /* ".crm-app.show-chat" define columnas 320px/1fr/300px fuera del @media y le
     ganaba al "1fr" movil: la columna fija de 320px sola ya desbordaba el telefono. */
  .crm-app.show-chat { grid-template-columns: 1fr; }
}

/* El boton CRM no debe empujarse fuera del nav desplazable en telefono */
@media (max-width: 900px) {
  .module-nav a.crm-link { margin-left: 0; }
}

.crm-thread, .crm-chat, .crm-messages, .crm-composer, .crm-state-strip { min-width: 0; max-width: 100%; }
.crm-messages { overflow-x: hidden; overflow-wrap: anywhere; }
@media (max-width: 920px) {
  body.crm-chat-open { overflow-x: hidden; }
}

/* ---- v10: horas de la semana laboral como <select> ----
   Se cambio <input type="time"> por <select> porque Safari en Mac no muestra
   el selector de reloj y el campo quedaba imposible de completar con el mouse. */
.wk-range { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.wk-time { width: auto; min-width: 92px; min-height: 34px; padding: 4px 8px; border: 1px solid var(--line); border-radius: 8px; background: #fff; font-variant-numeric: tabular-nums; }
.wk-time:focus { outline: 0; border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(24,184,177,.14); }

/* ---- v11: pasos del modal "Dar cita" (primero la cita, despues el paciente) ---- */
.dc-step { display: flex; align-items: center; gap: 8px; margin: 4px 0 2px; font-size: 12px; font-weight: 700;
  color: var(--blue-strong); text-transform: uppercase; letter-spacing: .06em; }
.dc-step:not(:first-child) { margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--line); }
.dc-step span { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%;
  background: var(--brand-grad); color: #fff; font-size: 11px; letter-spacing: 0; flex: 0 0 auto; }

/* ---- v12: el estado de la cita no debe cortarse ----
   "Confirmado por WhatsApp" no entraba en los 180px y se leia "Confirmado por WhatsA...". */
.state-select { max-width: 250px; min-width: 200px; }

/* ---- v13: el selector de estado se adapta a su celda ----
   Con min-width fijo se salia de la columna y pisaba "Tipo:" en pantallas de 1024px.
   Ahora ocupa su celda; la columna del grid es la que garantiza el ancho del texto. */
.state-select { width: 100%; min-width: 0; max-width: 260px; }

/* ---- v14: acciones de tabla mas compactas ----
   Con 3 botones (Editar / Activar / Eliminar) en una columna de ~134px se apilaban
   en 3 lineas y la fila quedaba desordenada. Botones mas chicos y alineados a la
   izquierda: entran en 1 o 2 lineas prolijas. */
.row-actions { justify-content: flex-start; align-items: center; flex-wrap: nowrap; row-gap: 4px; column-gap: 5px; }
/* La columna no se deja encoger: si falta ancho, la tabla se desplaza (ya tiene overflow:auto)
   en vez de partir los botones en tres lineas. */
td.row-actions { min-width: 196px; }
.row-actions .mini-btn { padding: 4px 9px; font-size: 11.5px; line-height: 1.5; }
.row-actions form { display: inline-flex; }

/* ---- v15: burbujas de chat con texto sin espacios ----
   Un token, un link sin barras o una palabra pegada larga se salia de la burbuja
   y rompia el ancho del chat publico (el que ve el paciente). */
.pc-bubble, .bubble { overflow-wrap: anywhere; word-break: break-word; }

/* ---- v16: tablas dentro de modales en pantallas chicas ----
   El modal de presupuesto/receta tiene una tabla de 4 columnas (prestacion, cantidad,
   valor, quitar). En un celular se salia del modal casi 300px: el usuario no llegaba
   al valor unitario ni al boton de quitar. Ahora esa zona se desplaza sola. */
@media (max-width: 700px) {
  .np-body { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  /* max-content: la tabla toma exactamente lo que necesita su contenido.
     Con un min-width fijo el boton de quitar quedaba fuera de la propia tabla. */
  .np-body .rx-table { min-width: max-content; }
  .np-body .rx-table .control { font-size: 12.5px; }
}

/* ---- v17: citas cortas en el calendario ----
   Esta clinica agenda de a 15 minutos (la gran mayoria de las citas). A 2 px/min eso
   son 30 px, pero el bloque normal exige 44 px para las tres lineas de texto: todas
   se pisaban. El bloque corto muestra solo hora y nombre, y entra en su franja. */
.cal-appt.ca-corta { min-height: 28px; padding: 2px 8px; gap: 0; }
.cal-appt.ca-corta .ca-state { display: none; }
.cal-appt.ca-corta .ca-name { -webkit-line-clamp: 1; font-size: 11.5px; line-height: 1.2; }
.cal-appt.ca-corta .ca-time { font-size: 9.5px; line-height: 1.1; }
/* Al pasar el mouse se expande para leer todo sin abrir la cita. */
.cal-appt.ca-corta:hover { min-height: 46px; height: auto !important; z-index: 5; }
.cal-appt.ca-corta:hover .ca-state { display: block; }

/* ===== v18: barra de acciones en bloque (sedes / boxes) ===== */
.bulk-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 10px 0 22px; padding: 10px 12px; border: 1px dashed #d8e4ee; border-radius: 10px; background: #fbfdff; }
.bulk-bar small { color: #64798c; }
table .bulk-pick, table .bulk-all { width: auto; min-height: auto; margin: 0; cursor: pointer; accent-color: #1f7a8c; }
@media (max-width: 640px) { .bulk-bar { flex-direction: column; align-items: stretch; } .bulk-bar small { text-align: left; } }

/* ===== v19: panel de confirmaciones (agenda) ===== */
.rc-ok { color: #17795e; font-weight: 600; }
.rc-bad { color: #b4232a; font-weight: 600; }
.rc-wait { color: #64798c; }

/* ===== v20: CRM a pantalla completa =====
   El contenedor pedia calc(100vh - 250px), pero encima de el hay 613px reales (cabecera,
   nav, titulo y chips): el panel se salia 444px por abajo y habia que scrollear la pagina
   entera para leer un chat. Ahora la pagina es una columna de alto fijo y el panel absorbe
   lo que sobra, asi que el chat crece solo y no hay scroll de pagina. */
/* El alto se calcula en JS con la posicion real del panel (--crm-h): el layout esta anidado
   y cualquier constante fija se desincroniza al cambiar la cabecera o abrir el banner. */
.crm-wide .crm-app { height: var(--crm-h, clamp(460px, calc(100vh - 250px), 820px)); margin-bottom: 10px; }

/* Cabecera y chips compactos: juntos ocupaban 332px, mas que cabecera + nav. */
.crm-wide .content-header { padding-top: 10px; padding-bottom: 4px; align-items: center; }
.crm-wide .content-header h1 { font-size: 1.16rem; margin: 0; }
.crm-wide .content-header p { margin: 3px 0 0; font-size: .82rem; line-height: 1.3; max-width: 92ch; }
/* Los chips viven dentro del encabezado: antes eran una franja propia de 161px. */
.crm-wide .content-header { flex-wrap: wrap; row-gap: 6px; }
.crm-wide .crm-summary { padding: 0; gap: 8px; width: 100%; order: 3; }
/* El banner de prueba, compacto: es una ayuda ocasional, no merece una franja entera. */
.crm-wide .crm-sandbox > summary { padding: 5px 12px; font-size: .82rem; }
.crm-wide .sum-chip { display: flex; align-items: baseline; gap: 6px; padding: 5px 10px; min-width: 0; border-radius: 9px; }
.crm-wide .sum-chip .sum-num { font-size: 16px; }
.crm-wide .sum-chip span:last-child { font-size: 11.5px; white-space: nowrap; }
.crm-wide .crm-sandbox { margin-bottom: 8px; }

/* Panel derecho sin scroll propio: tarjetas mas ajustadas. */
.crm-side { padding: 9px; gap: 8px; }
.crm-side-card { padding: 9px 10px; }
.crm-side-card h4 { margin: 0 0 7px; font-size: .9rem; }
.crm-side-head { margin-bottom: 7px; }
.crm-side-info { gap: 5px; }
.crm-side .crm-actions { gap: 5px; }
.crm-side .crm-action { padding: 7px 10px; font-size: .85rem; }
.crm-side .crm-ava.lg { width: 38px; height: 38px; }
.crm-side .crm-internal .crm-side-hint { font-size: .76rem; }
.crm-side .crm-internal textarea { min-height: 46px; }
.crm-side-hint { margin-top: 4px; line-height: 1.35; }
.crm-internal textarea { rows: 2; min-height: 52px; }

@media (max-width: 900px) { .crm-wide { height: auto; min-height: 0; } .crm-wide .crm-app { height: 76vh; } }
.crm-howto > summary { cursor: pointer; color: #6a7785; font-size: .82rem; list-style: none; padding: 2px 0; }
.crm-howto > summary::-webkit-details-marker { display: none; }
.crm-howto > summary::before { content: "▸ "; }
.crm-howto[open] > summary::before { content: "▾ "; }
.crm-howto p { margin: 4px 0 0; font-size: .82rem; line-height: 1.35; max-width: 92ch; color: #6a7785; }

/* Vista completa en ventana aparte: el layout no dibuja cabecera ni menu (SinCromo), asi que
   la conversacion aprovecha toda la ventana. */
body.sin-cromo .page-shell { padding-top: 0; }
body.sin-cromo .crm-wide .content-header { padding-top: 12px; }

/* ===== v21: modales grandes de Administracion =====
   Los modales de profesional y comisiones scrolleaban enteros: el boton "Guardar" quedaba
   debajo del corte y habia que bajar a ciegas para encontrarlo. Ahora cabecera y botones
   quedan fijos y solo el contenido se desplaza. */
dialog.dlg-xl { border: 1px solid #d8e4ee; border-radius: 16px; padding: 0; width: min(1060px, 96vw); max-height: 92vh; box-shadow: 0 24px 70px rgba(20,35,50,.26); }
dialog.dlg-xl .dlg-form { display: flex; flex-direction: column; max-height: 92vh; }
.dlg-head { padding: 16px 22px 12px; border-bottom: 1px solid #eaeff4; }
.dlg-head h3 { margin: 0; font-size: 1.06rem; color: #1f2d3a; }
.dlg-body { padding: 14px 22px 18px; overflow-y: auto; flex: 1; min-height: 0; }
.dlg-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 22px; border-top: 1px solid #eaeff4; background: #fbfdff; border-radius: 0 0 16px 16px; }

/* Titulillo de seccion: ordena el formulario en bloques en vez de una lista larga y plana. */
.dlg-sec { margin: 14px 0 8px; font-size: .82rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #7d8b98; }
.dlg-sec:first-child { margin-top: 0; }
.dlg-sec small { text-transform: none; letter-spacing: 0; font-weight: 400; color: #9aa7b3; margin-left: 8px; }
.dlg-xl .settings-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 16px; }
@media (max-width: 900px) { .dlg-xl .settings-grid { grid-template-columns: 1fr; } }

/* Fichas de seleccion: reemplazan al "Ctrl + clic". Tocar agrega, volver a tocar quita. */
.pick-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.pick-chip { display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px 7px 10px; border: 1px solid #dbe4ec; border-radius: 999px; background: #fff; cursor: pointer; font-size: .88rem; color: #3d4b58; user-select: none; transition: background .12s, border-color .12s; }
.pick-chip input { position: absolute; opacity: 0; width: 0; height: 0; }
.pick-chip .pick-ico { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: #eef3f8; color: #6b7a88; font-weight: 700; font-size: 13px; line-height: 1; }
.pick-chip .pick-ico::before { content: "+"; }
.pick-chip:hover { background: #f3f8fd; border-color: #bcd4e8; }
.pick-chip:has(input:checked) { background: #e8f7ef; border-color: #8fd3ae; color: #12603f; font-weight: 600; }
.pick-chip:has(input:checked) .pick-ico { background: #17a06a; color: #fff; }
.pick-chip:has(input:checked) .pick-ico::before { content: "\2212"; }
.pick-chip:has(input:focus-visible) { outline: 2px solid var(--blue); outline-offset: 2px; }

/* Etiqueta de estado legible (antes era un boton oscuro con texto oscuro). */
.tag-ok { display: inline-block; padding: 3px 10px; border-radius: 999px; background: #e8f7ef; color: #12603f; border: 1px solid #9bd9ba; font-size: 12px; font-weight: 600; white-space: nowrap; }

/* Acciones de fila alineadas con el resto de la tabla. */
table .row-actions { justify-content: flex-start; align-items: center; flex-wrap: nowrap; gap: 6px; }
table .row-actions .mini-btn { min-height: 28px; display: inline-flex; align-items: center; }

/* Ocultar de verdad: ".chk-field" declara display:flex !important y le ganaba al
   display:none puesto desde JS, de modo que campos de "solo al crear" seguian visibles
   al editar. */
.oculto, [hidden] { display: none !important; }

/* Texto de ayuda debajo del titulo de cada casilla. */
.chk-field span small { display: block; font-weight: 400; color: #8b98a4; font-size: .78rem; line-height: 1.35; margin-top: 2px; }
.chk-field { align-items: flex-start; }
.chk-field input[type="checkbox"] { margin-top: 2px; flex: 0 0 auto; }
.dlg-xl .settings-grid .span-3 { grid-column: 1 / -1; }

/* ===== v22: pasada general de modales =====
   Problemas que se repetian en todo el sistema:
   1) .settings-grid imponia 3 columnas de 180px minimo (540px + gaps). Dentro de un modal de
      520px eso no entra y aparecia scroll HORIZONTAL (se veia en "Editar usuario").
   2) Varios formularios scrolleaban enteros, dejando "Guardar" debajo del corte.
   3) El modal de "Dar cita" tenia la columna izquierda fija en 230px: los campos, mas anchos,
      se derramaban sobre el panel de horas. */

/* 1) La rejilla se adapta al ancho real de su contenedor en vez de exigir 3 columnas. */
.settings-grid { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.settings-grid > label { min-width: 0; }
.settings-grid input, .settings-grid select, .settings-grid textarea { max-width: 100%; }

/* 2) Todos los dialogos comparten alto maximo y no desbordan a lo ancho. */
dialog[open] { max-height: 92vh; overflow: hidden; }
dialog > form { max-width: 100%; }
dialog .settings-grid { padding-left: 0; padding-right: 0; }

/* 3) "Dar cita": columnas que no se pisan y ambas con la misma altura util. */
#modalDarCita .modal { width: min(100%, 1040px); }
.dc-grid { grid-template-columns: minmax(0, 300px) minmax(0, 1fr); align-items: stretch; }
.dc-filters, .dc-week { min-width: 0; }
.dc-filters label, .dc-filters .control { max-width: 100%; }
.dc-week { display: flex; flex-direction: column; }
.dc-days { max-height: none; flex: 1; min-height: 0; }
/* El cuerpo del modal scrollea una sola vez, en vez de dos paneles desfasados. */
#modalDarCita .dc-grid { max-height: 62vh; overflow: auto; }

@media (max-width: 860px) {
  .dc-grid { grid-template-columns: 1fr; }
  #modalDarCita .dc-grid { max-height: none; }
}

/* 4) Blindaje contra desborde horizontal dentro de modales. Una tabla ancha (la matriz de
   convenios) empujaba el ancho del modal entero: aparecia scroll horizontal general y el
   contenido se corria, dejando titulo y etiquetas cortados fuera de la vista. Ahora la tabla
   scrollea dentro de su propia caja y el modal nunca se pasa de ancho. */
dialog .dlg-body { overflow-x: hidden; }
dialog .tbl-inner { overflow-x: auto; max-width: 100%; }
dialog .tbl-inner table { min-width: 560px; }
dialog .settings-grid > label, dialog .settings-grid > label > * { min-width: 0; max-width: 100%; }
dialog textarea { max-width: 100%; resize: vertical; }

/* ===== v23: aviso compacto (cajas viejas sin cerrar) =====
   Antes el listado completo se dibujaba en la pagina y empujaba la caja del dia fuera de la
   vista; con muchas filas era imposible llegar a lo que uno venia a hacer. */
.alert-slim { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 14px 20px; padding: 9px 14px; border: 1px solid #e6c2c4; border-radius: 10px; background: #fff7f7; color: #6b4f52; font-size: .9rem; }
.alert-slim .alert-ico { font-size: 1rem; line-height: 1; }
.alert-slim strong { color: #8f3b41; }
.alert-slim .mini-btn { margin-left: auto; white-space: nowrap; }
#staleDialog .dlg-body { max-height: 62vh; }
@media (max-width: 640px) { .alert-slim .mini-btn { margin-left: 0; width: 100%; } }

/* ===== v24: contraste =====
   1) ".mini-btn" declara color oscuro DESPUES de ".primary", que pone blanco: al combinarlos
      quedaba texto oscuro sobre el degradado oscuro de marca (ilegible). Pasaba en el badge
      de triage, en Consentimientos y en Inventario. */
.mini-btn.primary, .mini-btn.primary:hover { color: #fff; }

/* 2) La matriz de convenios heredaba el fondo oscuro del "th" global pero con su propio color
      de texto gris: encabezado ilegible. Se le da fondo claro acorde a ese texto. */
.cov-matrix th { background: #f6f9fb; color: #5d6f7e; border-bottom: 1px solid #dbe6ee; }

/* Preguntas frecuentes del servicio: un par pregunta/respuesta por fila, con boton para
   quitarla. Antes era un textarea libre donde habia que inventar el formato. */
.faq-list { display: flex; flex-direction: column; gap: 8px; }
.faq-item { display: flex; align-items: flex-start; gap: 8px; padding: 9px 10px; border: 1px solid #e3eaf1; border-radius: 10px; background: #fbfdff; }
.faq-fields { display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 0; }
.faq-item .faq-del { flex: 0 0 auto; min-width: 32px; font-size: 16px; line-height: 1; }
.faq-add { margin-top: 8px; align-self: flex-start; }

/* ===== v25: iconos propios (imprimir, alertas, calendario, lista) =====
   Vienen como PNG con transparencia; se muestran al mismo tamano que los iconos dibujados
   por CSS para que la barra no se descuadre. */
.btn-img { width: 20px; height: 20px; object-fit: contain; display: block; }
button:has(> .btn-img), a:has(> .btn-img) { display: inline-flex; align-items: center; justify-content: center; }
.vt .btn-img { width: 19px; height: 19px; }
/* En el estado activo del selector de vista el fondo se aclara: el icono no necesita filtro. */
.vt.on .btn-img { filter: none; }

/* Icono propio dentro del menu principal (CRM). */
.nav-img { width: 22px; height: 22px; object-fit: contain; display: block; }
/* Cuando el boton lleva icono + texto, el icono no debe pegarse a la palabra. */
button:has(> .btn-img):not(.icon-only), a:has(> .btn-img):not(.vt) { gap: 7px; }

/* ===== v26: configuracion de reservas en tarjetas =====
   Eran 11 campos en una lista plana; ahora se agrupan por decision (pago, agenda, monedas,
   validaciones) para poder cambiar uno sin leerlos todos. */
.cfg-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); gap: 16px; padding: 4px 20px 16px; align-items: start; }
.cfg-card { border: 1px solid #e4ebf2; border-radius: 14px; background: #fff; padding: 16px 18px 18px; }
.cfg-card h4 { display: flex; align-items: center; gap: 9px; margin: 0 0 14px; font-size: 1rem; color: #22303d; }
.cfg-num { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 8px; background: #eef4fb; color: #2a6fb0; font-size: 12px; font-weight: 800; }
.cfg-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; }
.cfg-fields > label { display: grid; gap: 6px; align-content: start; color: #506172; min-width: 0; }
.cfg-fields .field-hint { color: #93a1ad; font-size: .76rem; line-height: 1.35; }
.cfg-fields .cfg-wide { grid-column: 1 / -1; }
.cfg-fields input:not([type=checkbox]) { max-width: 100%; }

/* Interruptor para la regla de pago: es un si/no, no un dato mas del formulario. */
.cfg-switch { grid-column: 1 / -1; display: grid; gap: 6px; }
.cfg-switch input[type=checkbox] { appearance: none; width: 46px; height: 26px; min-height: 26px; padding: 0; border: 0; border-radius: 999px; background: #d3dde6; position: relative; cursor: pointer; transition: background .15s; }
.cfg-switch input[type=checkbox]::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .15s; }
.cfg-switch input[type=checkbox]:checked { background: var(--brand-grad, #17a06a); }
.cfg-switch input[type=checkbox]:checked::after { transform: translateX(20px); }
.cfg-switch input[type=checkbox]:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.cfg-switch em { font-style: normal; color: #93a1ad; font-size: .76rem; line-height: 1.35; }

@media (max-width: 780px) { .cfg-grid { grid-template-columns: 1fr; padding: 4px 14px 14px; } }

/* ===== v27: impresion de la agenda =====
   Antes se imprimia la pantalla entera (menu, filtros, botones) y el papel era ilegible.
   Ahora existe una hoja propia que SOLO aparece al imprimir. */
.print-sheet { display: none; }

@media print {
  /* Todo el sistema desaparece; queda unicamente la hoja. */
  body.sin-cromo .page-shell, .top-shell, .module-nav, .cal-topbar, .cal-toolbar,
  .agenda-panel > *:not(.print-sheet), .modal-backdrop, dialog, .resume-care,
  .crm-link, .alert-slim, .save-ok, .floating-menu { display: none !important; }

  html, body { background: #fff !important; margin: 0; padding: 0; }
  .workspace, .panel, .page-shell { margin: 0 !important; padding: 0 !important; border: 0 !important; box-shadow: none !important; background: #fff !important; }

  .print-sheet { display: block; color: #111; font-size: 11pt; }
  @page { size: A4 portrait; margin: 12mm 10mm; }

  .ps-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; border-bottom: 2px solid #111; padding-bottom: 8px; margin-bottom: 14px; }
  .ps-head h1 { margin: 0; font-size: 16pt; }
  .ps-head p { margin: 2px 0 0; font-size: 10pt; color: #333; }
  .ps-meta { text-align: right; font-size: 10pt; }
  .ps-meta strong { font-size: 14pt; display: block; }
  .ps-meta small { color: #555; }

  .ps-block h2 { font-size: 13pt; margin: 0 0 8px; }
  .ps-sub { margin: 0 0 8px; font-size: 10pt; color: #444; }
  /* Cada profesional arranca en hoja nueva. */
  .ps-break { break-before: page; page-break-before: always; }

  .ps-tot { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
  .ps-chip { border: 1px solid #999; border-radius: 4px; padding: 3px 9px; font-size: 9.5pt; }
  .ps-chip b { font-size: 11pt; }

  .ps-table { width: 100%; border-collapse: collapse; font-size: 9.5pt; }
  .ps-table th { background: #eee !important; color: #111 !important; text-align: left; border: 1px solid #999; padding: 5px 6px; font-size: 9pt; text-transform: uppercase; }
  .ps-table td { border: 1px solid #bbb; padding: 5px 6px; vertical-align: top; }
  /* La cabecera se repite en cada hoja cuando la tabla se parte. */
  .ps-table thead { display: table-header-group; }
  .ps-table tr { break-inside: avoid; page-break-inside: avoid; }
  /* Columna en blanco para anotar a mano durante la jornada. */
  .ps-write { min-width: 110px; }
}

/* "Atender" pasó de enlace a envío (POST): el formulario no debe alterar la fila. */
.atn-start-form { display: contents; }

/* Selector "Ver desde" dentro del panel de horas libres. */
.dc-jump { display: inline-flex; align-items: center; gap: 6px; font-size: .8rem; color: #6a7785; font-weight: 400; }
.dc-jump input { min-height: 30px; padding: 3px 8px; font-size: .82rem; max-width: 150px; }

/* ===== v28: modal "Imprimir agenda" ===== */
.imp-body { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; padding: 4px 20px 8px; }
.imp-group { border: 1px solid #e4ebf2; border-radius: 12px; padding: 12px 14px 14px; margin: 0; }
.imp-group legend { font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #7d8b98; padding: 0 6px; }
.imp-opt { display: flex; align-items: flex-start; gap: 9px; padding: 7px 4px; cursor: pointer; }
.imp-opt input { margin-top: 3px; width: auto; min-height: auto; accent-color: var(--blue); }
.imp-opt span { color: #35424f; font-size: .92rem; }
.imp-opt small { display: block; color: #93a1ad; font-size: .76rem; margin-top: 1px; }
.imp-fecha { display: grid; gap: 6px; margin-top: 10px; font-size: .82rem; color: #6a7785; }
.imp-pros { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 8px; padding-top: 10px; border-top: 1px solid #eef3f7; }

/* ===== v29: REGLA DE MARCA — un logo nunca se deforma =====
   Vale para todo el sistema. Si a un logo se le fija ancho Y alto, o se lo mete en un
   contenedor que lo estire, queda achatado y eso no se puede hacer con la marca de un
   cliente. "object-fit: contain" garantiza que se encaje entero respetando su proporcion:
   puede sobrar espacio alrededor, pero jamas se estira. */
img[src*="clinic-logo"], .brand-logo, .doc-logo, .rx-logo, .logo-preview img {
  object-fit: contain !important;
  max-width: 100%;
}
/* Los que no tienen medida propia igual necesitan un tope, para que un logo grande no
   desarme el encabezado del documento. */
.head > img[src*="clinic-logo"],
.brand > img[src*="clinic-logo"] { height: 54px; width: auto; max-width: 220px; }

/* ===== v30: Asistente IA interno ===== */
.ia-btn { white-space: nowrap; }
/* El buscador cede ancho para que el boton entre sin apretar la barra superior. */
.top-shell .global-search { max-width: 520px; }
@media (max-width: 1200px) { .top-shell .global-search { max-width: 340px; } .ia-btn span { display: none; } }

.ia-wide .ia-app { display: grid; grid-template-columns: 290px 1fr; gap: 0; margin: 0 20px 18px;
  border: 1px solid #d7dde3; border-radius: 14px; overflow: hidden; background: #fff; height: clamp(420px, calc(100vh - 300px), 760px); }
.ia-list { border-right: 1px solid #e2e7ec; background: #f7f9fb; overflow-y: auto; min-height: 0; }
.ia-list-head { padding: 12px 14px; font-size: .8rem; font-weight: 700; color: #5d6f7e; border-bottom: 1px solid #e6ebef; }
.ia-list-head small { display: block; font-weight: 400; color: #93a1ad; font-size: .74rem; margin-top: 2px; }
.ia-item { display: block; padding: 10px 14px; border-bottom: 1px solid #edf1f5; text-decoration: none; color: #2c3a47; }
.ia-item:hover { background: #eef4fa; }
.ia-item.on { background: #e8f4ff; box-shadow: inset 3px 0 0 var(--blue); }
.ia-item strong { display: block; font-size: .88rem; }
.ia-item small { display: block; color: #8b98a4; font-size: .76rem; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ia-item em { font-style: normal; color: #a8b4bf; font-size: .7rem; }
.ia-empty { padding: 16px 14px; color: #8b98a4; font-size: .84rem; }

.ia-chat { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.ia-chat-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 14px; border-bottom: 1px solid #e2e7ec; background: #fff; }
.ia-rename { display: flex; gap: 6px; flex: 1; min-width: 200px; }
.ia-rename input { min-height: 32px; }
.ia-acts { display: flex; gap: 6px; flex-wrap: wrap; }
.ia-msgs { flex: 1; min-height: 0; overflow-y: auto; padding: 16px; background: #f4f7fa; display: flex; flex-direction: column; gap: 10px; }
.ia-msg { max-width: 78%; padding: 10px 13px; border-radius: 12px; font-size: .9rem; line-height: 1.5; white-space: pre-wrap; }
.ia-msg.out { align-self: flex-end; background: var(--brand-grad, #17a06a); color: #fff; }
.ia-msg.in { align-self: flex-start; background: #fff; border: 1px solid #e2e9f0; color: #24313d; }
.ia-hint { color: #7b8894; font-size: .88rem; }
.ia-hint ul { margin: 6px 0 0; padding-left: 18px; line-height: 1.7; }
.ia-composer { display: flex; gap: 8px; padding: 12px 14px; border-top: 1px solid #e2e7ec; background: #fff; }
.ia-composer input { flex: 1; }
@media (max-width: 860px) { .ia-wide .ia-app { grid-template-columns: 1fr; height: auto; } .ia-list { max-height: 200px; } }