:root {
  --teal: #007a78;
  --teal-dark: #07577a;
  --teal-light: #dff8f1;
  --navy: #123b5d;
  --ink: #17324a;
  --muted: #5f7484;
  --bg: #f2f8fb;
  --card: #ffffff;
  --border: #d7e5ea;
  --danger: #dc4c45;
  --warning: #ad6b00;
  --success: #16815e;
  --info: #2877a2;
  --gold: #f2b544;
  --coral: #e24d46;
  --radius: 16px;
  --hover: #f5faf9;
  --shadow: 0 1px 2px rgba(8, 47, 58, .04), 0 9px 28px rgba(8, 47, 58, .055);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: var(--bg); color: var(--ink); font-size: 14.5px; line-height: 1.55;
}
a { color: var(--teal); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { color: var(--navy); line-height: 1.22; letter-spacing: -.02em; }

/* ---------- Layout ---------- */
.layout { display: flex; min-height: 100vh; }
.sidebar {
  width: 264px; flex-shrink: 0; background: linear-gradient(180deg, #123f63, #075b60 62%, #073746);
  color: #d8ecee; display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh;
  overflow-y: auto;
}
.sidebar::before, .auth-header::before, .portal-topbar::before {
  position: absolute; top: 0; right: 0; left: 0; z-index: 3; height: 3px;
  background: linear-gradient(90deg, #d52b1e 0 33.333%, #f9d616 33.333% 66.666%, #138a42 66.666%);
  content: "";
}
.sidebar .brand {
  padding: 18px 18px 14px; font-size: 21px; font-weight: 700; color: #fff;
  display: flex; align-items: center; gap: 9px; border-bottom: 1px solid rgba(255,255,255,.12);
}
.sidebar .brand .tooth { font-size: 24px; }
.sidebar nav { padding: 8px 11px 16px; flex: 1; }
.sidebar nav a {
  display: flex; align-items: center; gap: 11px; min-height: 41px; padding: 8px 10px;
  border-radius: 9px; color: #bfd7d9; font-size: 13px; font-weight: 600;
}
.sidebar nav a:hover { background: rgba(255,255,255,.08); text-decoration: none; }
.sidebar nav a.active { background: rgba(43,225,198,.2); color: #fff; box-shadow: inset 3px 0 0 #f2b544, inset 0 0 0 1px rgba(119,222,210,.1); }
.sidebar nav .section { padding: 15px 10px 5px; font-size: 9.5px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; color: #779ea3; }
.sidebar .userbox { padding: 14px 18px; border-top: 1px solid rgba(255,255,255,.12); font-size: 13px; }
.sidebar .userbox .name { color: #fff; font-weight: 600; }
.sidebar .userbox a { color: #9fd8dd; }

.main { flex: 1; width: calc(100% - 264px); max-width: 1440px; padding: 32px 38px 70px; }

.topbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; flex-wrap: wrap; gap: 10px; }
.topbar h1 { margin: 0; font-size: 24px; }
.topbar .sub { color: var(--muted); font-size: 14px; }

/* ---------- Components ---------- */
.card {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 22px; margin-bottom: 20px;
  transition: box-shadow .2s ease;
}
.card:hover { box-shadow: 0 2px 6px rgba(16, 42, 51, .1), 0 8px 24px rgba(16, 42, 51, .08); }
.card h2, .card h3 { margin-top: 0; }
.grid { display: grid; gap: 16px; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }

.stat { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 18px; box-shadow: var(--shadow); }
.stat .label { color: var(--muted); font-size: 13px; }
.stat .value { font-size: 26px; font-weight: 700; margin-top: 2px; }
.stat.teal { border-top: 3px solid var(--teal); }
.stat.green { border-top: 3px solid var(--success); }
.stat.blue { border-top: 3px solid var(--info); }
.stat.red { border-top: 3px solid var(--danger); }
.stat.gold { border-top: 3px solid var(--warning); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 8px 16px; border-radius: 10px; border: 1px solid transparent;
  background: linear-gradient(135deg, var(--teal), #086b98); color: #fff; font-weight: 650; font-size: 14px; cursor: pointer;
  transition: background .15s ease, transform .1s ease, box-shadow .15s ease;
}
.btn:hover { background: linear-gradient(135deg, #006b69, var(--teal-dark)); text-decoration: none; color: #fff;
  box-shadow: 0 5px 15px rgba(7, 87, 122, .28); transform: translateY(-1px); }
.btn:active { transform: translateY(0); box-shadow: none; }
.btn.secondary { background: var(--card); color: var(--teal); border-color: var(--teal); }
.btn.secondary:hover { background: var(--teal-light); }
.btn.danger { background: var(--danger); }
.btn.danger:hover { background: #b02a24; }
.btn.small { padding: 4px 10px; font-size: 13px; }
.btn.whatsapp { background: #25d366; }
.btn.whatsapp:hover { background: #1da851; }

table.table { width: 100%; border-collapse: collapse; background: var(--card); }
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table th { text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); padding: 9px 10px; border-bottom: 2px solid var(--border); white-space: nowrap; }
.table td { padding: 9px 10px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.table tr:hover td { background: var(--hover); }

.badge { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; color: #fff; }
.badge.gray { background: var(--muted); }

.flash { padding: 11px 16px; border-radius: 10px; margin-bottom: 14px; font-weight: 500; }
.flash.success { background: #e5f6ec; color: #14683a; border: 1px solid #bfe6cf; }
.flash.danger { background: #fdeae9; color: #99231e; border: 1px solid #f5c6c3; }
.flash.info { background: #e8f1fd; color: #174e94; border: 1px solid #c5daf5; }
.flash.warning { background: #fdf6e0; color: #7a5d00; border: 1px solid #efdfa4; }

/* ---------- Forms ---------- */
form .field { margin-bottom: 14px; }
label { display: block; font-weight: 600; font-size: 13px; margin-bottom: 4px; color: #34454e; }
input[type=text], input[type=email], input[type=password], input[type=tel], input[type=date], input[type=time],
input[type=number], input[type=file], select, textarea {
  width: 100%; min-height: 42px; padding: 9px 12px; border: 1px solid #c6d5d7; border-radius: 9px;
  font-size: 14px; font-family: inherit; background: var(--card); color: var(--ink); transition: border-color .15s, box-shadow .15s;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px rgba(0,122,120,.16); }
textarea { min-height: 90px; resize: vertical; }
.form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.inline-form { display: inline; }

/* ---------- Auth ---------- */
.auth-wrap {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(1000px 600px at 20% 10%, #12707a, #08343a);
  padding: 30px 16px;
}
.auth-card { background: var(--card); border-radius: 16px; padding: 34px; width: 100%; max-width: 470px; box-shadow: 0 20px 60px rgba(0,0,0,.35); }
.auth-card .logo { text-align: center; font-size: 30px; font-weight: 800; color: var(--teal-dark); margin-bottom: 2px; }
.auth-card .tag { text-align: center; color: var(--muted); margin-bottom: 22px; font-size: 14px; }
.price-banner {
  background: linear-gradient(100deg, #07577a, #00a88f); color: #fff; border-radius: 10px;
  padding: 12px 16px; text-align: center; margin-bottom: 18px; font-size: 14px;
}
.price-banner b { font-size: 17px; }

/* ---------- Paneles de ayuda (explicaciones para el/la odontólogo/a) ---------- */
.help-panel {
  background: var(--teal-light); border: 1px solid #bcdfe2; border-radius: var(--radius);
  margin-bottom: 20px; box-shadow: var(--shadow);
}
.help-panel summary {
  cursor: pointer; font-weight: 700; padding: 14px 18px; color: var(--teal-dark);
  font-size: 15px; list-style: none; display: flex; align-items: center; gap: 8px;
}
.help-panel summary::-webkit-details-marker { display: none; }
.help-panel summary::before { content: "▸"; transition: transform .15s ease; flex-shrink: 0; }
.help-panel[open] summary::before { transform: rotate(90deg); }
.help-panel .help-body { padding: 0 18px 16px 34px; font-size: 14px; }
.help-panel .help-body p { margin: 0 0 10px; }
.help-panel .help-body ol, .help-panel .help-body ul { margin: 0 0 10px; padding-left: 20px; }
.help-panel .help-body li { margin-bottom: 7px; }

/* ---------- Doble factor ---------- */
.otp-input {
  text-align: center; font-size: 26px !important; letter-spacing: 10px;
  font-weight: 700; padding: 12px !important;
}

/* ---------- Cuentas demo en el login ---------- */
.demo-box { border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; margin-top: 16px; background: var(--hover); }
.demo-box .demo-title { font-weight: 700; color: var(--teal-dark); font-size: 14px; text-align: center; margin-bottom: 10px; }
.demo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.demo-grid button {
  border: 1px solid var(--teal); background: var(--card); color: var(--teal-dark);
  border-radius: 9px; padding: 9px 6px; font-size: 12.5px; font-weight: 600;
  cursor: pointer; font-family: inherit; line-height: 1.35;
}
.demo-grid button:hover { background: var(--teal-light); }
.demo-grid button .demo-emoji { display: block; font-size: 20px; margin-bottom: 2px; }
.demo-box .demo-note { font-size: 11.5px; color: var(--muted); text-align: center; margin: 8px 0 0; }

/* ---------- Agenda ---------- */
.cal-month { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.cal-month .dow { text-align: center; font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; padding: 4px 0; }
.cal-cell { background: var(--card); border: 1px solid var(--border); border-radius: 8px; min-height: 92px; padding: 5px 6px; font-size: 12px; }
.cal-cell.other { background: var(--bg); opacity: .55; }
.cal-cell.today { border: 2px solid var(--teal); }
.cal-cell .daynum { font-weight: 700; margin-bottom: 3px; }
.appt-chip { display: block; border-radius: 5px; color: #fff; padding: 1px 6px; margin-bottom: 2px; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.appt-chip:hover { text-decoration: none; opacity: .85; color: #fff; }
.block-chip { display: block; border-radius: 5px; background: repeating-linear-gradient(45deg, #d9dde0, #d9dde0 6px, #c8cdd1 6px, #c8cdd1 12px); color: #444; padding: 1px 6px; margin-bottom: 2px; font-size: 11px; }
.week-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; }
.week-col { background: var(--card); border: 1px solid var(--border); border-radius: 10px; min-height: 200px; padding: 8px; }
.week-col.today { border: 2px solid var(--teal); }
.week-col h4 { margin: 0 0 8px; font-size: 13px; text-align: center; }
.appt-line { border-left: 4px solid var(--teal); background: var(--hover); padding: 6px 8px; border-radius: 6px; margin-bottom: 6px; font-size: 12.5px; }

/* ---------- Odontograma ---------- */
.odo-wrap { overflow-x: auto; }
#odontogram svg { display: block; margin: 0 auto; }
.odo-tooth polygon, .odo-tooth rect { stroke: #9fb3ba; stroke-width: 1; fill: var(--card); cursor: pointer; }
.odo-tooth polygon:hover, .odo-tooth rect:hover { fill: #dff0f2; }
.odo-tooth text { font-size: 11px; fill: #33565c; text-anchor: middle; pointer-events: none; font-weight: 600; }
.odo-legend { display: flex; flex-wrap: wrap; gap: 8px 10px; margin: 8px 0 14px; font-size: 13px; }
.odo-legend .swatch { display: inline-block; width: 14px; height: 14px; border-radius: 3px; margin-right: 5px; vertical-align: -2px; }
.odo-panel { background: var(--teal-light); border: 1px solid #bcdfe2; border-radius: 10px; padding: 14px; }
.odo-step { font-weight: 700; color: var(--teal-dark); margin: 12px 0 6px; font-size: 14px; }
.odo-chip {
  border: 1.5px solid var(--border); background: var(--card); color: var(--ink);
  border-radius: 999px; padding: 5px 12px; font-size: 13px; cursor: pointer;
  font-family: inherit; transition: border-color .1s, box-shadow .1s;
}
.odo-chip:hover { border-color: var(--teal); }
.odo-chip.active { border-color: var(--teal); box-shadow: 0 0 0 2px rgba(14,124,134,.25); font-weight: 700; }
.odo-tooth .sel-face { stroke: #0e7c86; stroke-width: 2.5; }
.odo-readonly .odo-tooth polygon, .odo-readonly .odo-tooth rect { cursor: default; }
.odo-arch { font-size: 11px; letter-spacing: 2px; fill: #7b969c; text-anchor: middle; font-weight: 700; }
.odo-midline { stroke: #c3d4d8; stroke-width: 1; }
.odo-summary { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 10px 0 14px; font-size: 13px; }
.odo-sum-chip { background: var(--hover); border: 1px solid var(--border); border-radius: 999px; padding: 4px 12px; }
.odo-sum-chip .swatch { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }
#odo-toast {
  position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%) translateY(20px);
  background: #123a40; color: #fff; padding: 11px 20px; border-radius: 10px;
  box-shadow: 0 6px 24px rgba(0,0,0,.35); font-size: 14px; opacity: 0;
  pointer-events: none; transition: opacity .2s, transform .2s; z-index: 90;
}
#odo-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; }
#odo-toast a { color: #8fe3d9; font-weight: 700; margin-left: 6px; }

@media print {
  .sidebar, .tabs, .no-print, .btn, .flash, .theme-toggle, #odo-toast, .odo-panel,
  .mobile-topbar, .sidebar-backdrop { display: none !important; }
  .layout { display: block; }
  .main { padding: 0; }
  body { background: #fff; }
}

/* ---------- Progreso ---------- */
.progress { background: #e5ecef; border-radius: 999px; height: 12px; overflow: hidden; }
.progress > div { background: linear-gradient(90deg, #14a08c, #0e7c86); height: 100%; border-radius: 999px; }

/* ---------- Gráficos ---------- */
.chart-bars { display: flex; align-items: flex-end; gap: 6px; height: 160px; padding-top: 10px; }
.chart-bars .bar { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; }
.chart-bars .bar > i { display: block; width: 100%; background: linear-gradient(180deg, #14a08c, #0e7c86); border-radius: 4px 4px 0 0; min-height: 2px; }
.chart-bars .bar b { font-size: 10.5px; color: var(--ink); margin-bottom: 2px; font-style: normal; }
.chart-bars .bar span { font-size: 10px; color: var(--muted); margin-top: 4px; white-space: nowrap; }

.tabs { display: flex; gap: 4px; border-bottom: 2px solid var(--border); margin-bottom: 18px; flex-wrap: wrap; }
.tabs a { padding: 8px 14px; border-radius: 8px 8px 0 0; font-weight: 600; color: var(--muted); font-size: 14px; }
.tabs a.active { background: var(--card); color: var(--teal-dark); border: 1px solid var(--border); border-bottom: 2px solid var(--card); margin-bottom: -2px; }
.tabs a:hover { text-decoration: none; color: var(--teal-dark); }

.patient-head { display: flex; gap: 16px; align-items: center; margin-bottom: 16px; }
.avatar { width: 64px; height: 64px; border-radius: 50%; background: var(--teal-light); color: var(--teal-dark); display: flex; align-items: center; justify-content: center; font-size: 24px; font-weight: 700; overflow: hidden; flex-shrink: 0; }
.avatar img { width: 100%; height: 100%; object-fit: cover; }

.empty { text-align: center; color: var(--muted); padding: 26px 10px; }
.muted { color: var(--muted); }
.right { text-align: right; }
.mt0 { margin-top: 0; }
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 14px; }
.gallery .item { border: 1px solid var(--border); border-radius: 10px; overflow: hidden; background: var(--card); }
.gallery .item img { width: 100%; height: 120px; object-fit: cover; display: block; }
.gallery .item .meta { padding: 8px 10px; font-size: 12.5px; }

/* ---------- Chatbot: vinculación por QR ---------- */
.dot-pending {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: #ffc93c; margin-left: 6px; box-shadow: 0 0 6px #ffc93c;
  animation: pulse 1.6s infinite;
}
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

.qr-card { display: flex; gap: 30px; align-items: flex-start; flex-wrap: wrap; }
.qr-side { text-align: center; flex-shrink: 0; }
.qr-img {
  width: 240px; height: 240px; border: 1px solid var(--border); border-radius: 14px;
  padding: 10px; background: #fff; box-shadow: var(--shadow);
}
.qr-status { margin-top: 10px; font-weight: 600; color: var(--warning); }
.qr-steps { padding-left: 20px; line-height: 1.9; }
.qr-card > div:last-child { flex: 1; min-width: 260px; }

/* ---------- Chat (portal del paciente y bandeja del consultorio) ---------- */
.chat-card { padding: 0; overflow: hidden; }
.chat-box {
  height: 460px; overflow-y: auto; padding: 20px;
  background: linear-gradient(180deg, #eef6f7, #f6fafa);
}
.chat-msg { display: flex; margin-bottom: 12px; }
.chat-msg.paciente, .chat-msg.mine { justify-content: flex-end; }
.chat-msg .bubble {
  max-width: 75%; padding: 10px 14px; border-radius: 14px; font-size: 14px;
  background: var(--card); border: 1px solid var(--border); box-shadow: 0 1px 2px rgba(16,42,51,.06);
}
.chat-msg.paciente .bubble, .chat-msg.mine .bubble {
  background: var(--teal); color: #fff; border-color: var(--teal);
  border-bottom-right-radius: 4px;
}
.chat-msg.bot .bubble { border-bottom-left-radius: 4px; background: var(--card); }
.chat-msg.consultorio .bubble { background: #e8f1fd; border-color: #c5daf5; border-bottom-left-radius: 4px; }
.chat-msg .who { font-size: 11.5px; font-weight: 700; margin-bottom: 3px; opacity: .8; }
.chat-msg .text { white-space: pre-line; }
.chat-msg .time { font-size: 10.5px; opacity: .65; margin-top: 4px; text-align: right; }
.chat-form { display: flex; gap: 10px; padding: 14px 16px; background: var(--card); border-top: 1px solid var(--border); }
.chat-form input { flex: 1; }
.chat-form .btn { flex-shrink: 0; }

/* ---------- Portal del paciente ---------- */
.portal-body { background: var(--bg); min-height: 100vh; display: flex; flex-direction: column; }
.portal-topbar {
  background: linear-gradient(90deg, #0a5b63, #0e7c86); color: #fff;
  padding: 14px 26px; display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 10px; box-shadow: 0 2px 10px rgba(8, 52, 58, .25);
}
.portal-brand { font-size: 19px; font-weight: 700; }
.portal-nav { display: flex; gap: 6px; flex-wrap: wrap; }
.portal-nav a {
  color: #d8ecee; font-weight: 600; padding: 7px 14px; border-radius: 8px; font-size: 14px;
}
.portal-nav a:hover { background: rgba(255,255,255,.12); text-decoration: none; }
.portal-nav a.active { background: rgba(255,255,255,.2); color: #fff; }
.portal-main { flex: 1; padding: 26px 22px 50px; max-width: 980px; margin: 0 auto; width: 100%; }
.portal-footer {
  text-align: center; padding: 16px; color: var(--muted); font-size: 13px;
  border-top: 1px solid var(--border); background: var(--card);
}

/* ══════════ Celulares y tablets (menú deslizante + ajustes táctiles) ══════════ */
.mobile-topbar { display: none; }
.sidebar-backdrop { display: none; }

@media (max-width: 900px) {
  /* Barra superior fija con botón de menú (reemplaza a la barra lateral) */
  .mobile-topbar {
    display: flex; align-items: center; gap: 10px;
    position: sticky; top: 0; z-index: 60;
    background: linear-gradient(90deg, #0a5b63, #0e7c86); color: #fff;
    padding: 9px 12px; box-shadow: 0 2px 10px rgba(8, 52, 58, .3);
  }
  .mobile-topbar .nav-toggle {
    background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.3);
    color: #fff; font-size: 20px; line-height: 1; border-radius: 9px;
    padding: 8px 13px; cursor: pointer; font-family: inherit;
  }
  .mobile-topbar .mt-brand { font-weight: 700; font-size: 17px; flex: 1; color: #fff; }
  .mobile-topbar .mt-brand:hover { text-decoration: none; }
  .mobile-topbar .mt-action { color: #fff; font-size: 19px; padding: 6px 8px; }
  .mobile-topbar .mt-action:hover { text-decoration: none; }
  .mobile-topbar .badge { font-size: 11px; vertical-align: top; }

  /* La barra lateral se vuelve un cajón que entra desde la izquierda */
  .layout { flex-direction: column; }
  .sidebar {
    position: fixed; top: 0; left: 0; bottom: 0; z-index: 80;
    width: min(300px, 84vw); height: 100vh; height: 100dvh;
    transform: translateX(-105%); transition: transform .25s ease;
    box-shadow: 0 0 40px rgba(0,0,0,.4);
  }
  body.nav-open .sidebar { transform: none; }
  body.nav-open .sidebar-backdrop {
    display: block; position: fixed; inset: 0;
    background: rgba(8, 20, 24, .5); z-index: 70;
  }
  body.nav-open { overflow: hidden; }
  .sidebar nav a { padding: 13px 18px; }   /* objetivos táctiles más cómodos */
  .sidebar nav a.active { padding-left: 15px; }

  .main { padding: 16px 12px 70px; max-width: 100%; }
  .topbar h1 { font-size: 21px; }
  .card { padding: 16px 14px; }

  /* 16px evita que iPhone haga zoom automático al tocar un campo */
  input[type=text], input[type=email], input[type=password], input[type=tel], input[type=date],
  input[type=time], input[type=number], input[type=file], select, textarea { font-size: 16px; }
  .btn { padding: 10px 16px; }
  .btn.small { padding: 6px 10px; }

  .tabs { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .tabs a { white-space: nowrap; flex-shrink: 0; }

  /* Agenda: mes y semana se deslizan de lado con el dedo */
  .cal-month { overflow-x: auto; -webkit-overflow-scrolling: touch; grid-template-columns: repeat(7, minmax(88px, 1fr)); padding-bottom: 6px; }
  .cal-cell { min-height: 74px; }
  .week-grid { overflow-x: auto; -webkit-overflow-scrolling: touch; grid-template-columns: repeat(7, minmax(155px, 1fr)); padding-bottom: 6px; }

  .chat-box { height: 60vh; height: 60dvh; padding: 14px 10px; }
  .chat-msg .bubble { max-width: 88%; }
  .chat-form { padding: 10px 10px calc(10px + env(safe-area-inset-bottom)); }
  .qr-card { justify-content: center; }

  .portal-topbar { padding: 10px 12px; }
  .portal-nav a { padding: 9px 12px; }
  .portal-main { padding: 18px 12px 40px; }

  .patient-head { flex-wrap: wrap; }
  .auth-card { padding: 24px 18px; }
  .trial-number { font-size: 48px; }
  .theme-toggle-float { top: 10px; right: 10px; }
}

@media (max-width: 600px) {
  .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .stat { padding: 12px 14px; }
  .stat .value { font-size: 21px; }
  .topbar { flex-direction: column; align-items: stretch; }
  .topbar > div:last-child { display: flex; gap: 8px; flex-wrap: wrap; }
  .gallery { grid-template-columns: repeat(2, 1fr); }
}

.qr-loading {
  width: 240px; height: 240px; border: 2px dashed var(--border); border-radius: 14px;
  display: flex; align-items: center; justify-content: center; text-align: center;
  color: var(--muted); background: var(--card); font-size: 14px;
}

/* ══════════ Modo oscuro (html[data-theme="dark"]) ══════════ */
html[data-theme="dark"] {
  --teal: #1a99a4;
  --teal-dark: #7fd6de;
  --teal-light: #10333a;
  --ink: #e3edf0;
  --muted: #94aab3;
  --bg: #0d181c;
  --card: #142329;
  --border: #263b43;
  --hover: #1a2e35;
  --shadow: 0 1px 3px rgba(0,0,0,.4), 0 4px 14px rgba(0,0,0,.3);
}
html[data-theme="dark"] a { color: #6fd0d9; }
html[data-theme="dark"] .btn { color: #fff; }
html[data-theme="dark"] .btn:hover { background: #23aab6; color: #fff; }
html[data-theme="dark"] .card:hover { box-shadow: 0 2px 6px rgba(0,0,0,.5), 0 8px 24px rgba(0,0,0,.4); }
html[data-theme="dark"] label { color: #b8cad1; }
html[data-theme="dark"] input[type=text], html[data-theme="dark"] input[type=email],
html[data-theme="dark"] input[type=password], html[data-theme="dark"] input[type=date],
html[data-theme="dark"] input[type=time], html[data-theme="dark"] input[type=number],
html[data-theme="dark"] input[type=file], html[data-theme="dark"] select,
html[data-theme="dark"] textarea { border-color: var(--border); }
html[data-theme="dark"] .flash.success { background: #0e2b1b; color: #7fd9a5; border-color: #1c4a30; }
html[data-theme="dark"] .flash.danger  { background: #33120f; color: #f1948c; border-color: #5c221d; }
html[data-theme="dark"] .flash.info    { background: #0f2038; color: #8ab6ee; border-color: #1d3a63; }
html[data-theme="dark"] .flash.warning { background: #2e2405; color: #e5c55e; border-color: #57470f; }
html[data-theme="dark"] .help-panel { border-color: #1d4750; }
html[data-theme="dark"] .odo-panel { border-color: #1d4750; }
html[data-theme="dark"] .progress { background: #243940; }
html[data-theme="dark"] .chat-box { background: linear-gradient(180deg, #0f1e23, #12262c); }
html[data-theme="dark"] .chat-msg.consultorio .bubble { background: #16344d; border-color: #1d456a; }
html[data-theme="dark"] .odo-tooth polygon:hover, html[data-theme="dark"] .odo-tooth rect:hover { fill: #1d3d45; }
html[data-theme="dark"] .odo-tooth text { fill: #a8ccd2; }
html[data-theme="dark"] .odo-tooth .sel-face { stroke: #4fd8c8; }
html[data-theme="dark"] .odo-arch { fill: #5f8189; }
html[data-theme="dark"] .odo-midline { stroke: #2a4a52; }
html[data-theme="dark"] .odo-chip.active { box-shadow: 0 0 0 2px rgba(79,216,200,.35); }
html[data-theme="dark"] .odo-step { color: #7fd6cb; }
html[data-theme="dark"] .chart-bars .bar b { color: var(--ink); }
html[data-theme="dark"] .block-chip { background: repeating-linear-gradient(45deg, #2a3a40, #2a3a40 6px, #223035 6px, #223035 12px); color: #aabbc2; }

/* ---------- Botón claro/oscuro ---------- */
.theme-toggle {
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.3);
  color: inherit; border-radius: 999px; padding: 4px 12px; font-size: 12.5px;
  cursor: pointer; font-family: inherit; font-weight: 600; line-height: 1.4;
}
.theme-toggle:hover { background: rgba(255,255,255,.22); }
.theme-toggle-float { position: fixed; top: 14px; right: 14px; z-index: 50; color: #e6f4f5; }

/* ---------- Suscripción gamificada ---------- */
.trial-hero { text-align: center; border-top: 4px solid var(--teal); }
.trial-hero.trial-warning { border-top-color: var(--warning); }
.trial-hero.trial-danger { border-top-color: var(--danger); }
.trial-number { font-size: 64px; font-weight: 800; color: var(--teal-dark); line-height: 1; }
.trial-warning .trial-number { color: var(--warning); }
.trial-danger .trial-number { color: var(--danger); }
.trial-label { color: var(--muted); font-weight: 600; margin-top: 4px; }
.trial-breakdown { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 16px; }
.trial-chip {
  background: var(--teal-light); border: 1px solid var(--border); border-radius: 12px;
  padding: 10px 16px; font-size: 13px; color: var(--ink);
}
.trial-chip b { font-size: 15px; color: var(--teal-dark); }
.trial-chip-off { opacity: .55; }
.trial-chip-total { background: linear-gradient(135deg, var(--teal), #14a08c); color: #fff; border: none; }
.trial-chip-total b { color: #fff; }
.ref-stat { flex: 1; min-width: 110px; text-align: center; background: var(--teal-light); border-radius: 10px; padding: 12px; }
.ref-num { font-size: 30px; font-weight: 700; color: var(--teal-dark); }

/* ---------- Primeros pasos (onboarding) ---------- */
.onboarding { border-top: 4px solid var(--teal); }
.onboard-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.onboard-step {
  display: block; border: 1px solid var(--border); border-radius: 12px; padding: 14px;
  background: var(--hover); color: var(--ink); font-size: 13.5px;
}
.onboard-step:hover { text-decoration: none; border-color: var(--teal); background: var(--teal-light); color: var(--ink); }
.onboard-step b { display: block; margin: 6px 0 4px; color: var(--teal-dark); }
.onboard-step .muted { display: block; }
.onboard-num {
  display: inline-flex; width: 26px; height: 26px; border-radius: 50%;
  background: var(--teal); color: #fff; align-items: center; justify-content: center;
  font-weight: 700; font-size: 14px;
}

/* ══════════ Identidad y navegación 2026 ══════════ */
.skip-link {
  position: fixed; top: 10px; left: 10px; z-index: 200; transform: translateY(-160%);
  border-radius: 9px; background: var(--navy); color: #fff; padding: 10px 16px;
}
.skip-link:focus { transform: none; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.sidebar-brand, .app-brand {
  display: flex; align-items: center; gap: 11px; text-decoration: none;
}
.sidebar-brand { flex-shrink: 0; min-height: 76px; padding: 15px 20px; border-bottom: 1px solid rgba(255,255,255,.09); color: #fff; }
.sidebar-brand:hover, .app-brand:hover { text-decoration: none; }
.sidebar-brand > span:last-child, .app-brand > span:last-child { display: flex; flex-direction: column; line-height: 1.08; }
.sidebar-brand strong, .app-brand strong { font-size: 19px; letter-spacing: -.035em; }
.sidebar-brand small, .app-brand small { margin-top: 4px; color: #7fa7ab; font-size: 8.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.app-brand-mark {
  display: grid; flex: 0 0 38px; width: 38px; height: 38px; place-items: center;
  border-radius: 11px; background: linear-gradient(145deg, #00b99f, #08719b);
  box-shadow: 0 7px 16px rgba(0, 27, 33, .2);
}
.app-brand-mark svg { width: 24px; height: 24px; }
.app-brand-mark path { fill: none; stroke: #fff; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2.25; }
.small-mark { flex-basis: 29px; width: 29px; height: 29px; border-radius: 8px; box-shadow: none; }
.small-mark svg { width: 19px; height: 19px; }
.nav-icon { flex: 0 0 17px; width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; opacity: .86; }
.sidebar nav a.active .nav-icon { color: #72ddd2; opacity: 1; }
.nav-count, .nav-device-count, .nav-days { margin-left: auto; border-radius: 99px; background: rgba(255,255,255,.12); padding: 1px 7px; color: #d9eded; font-size: 9px; font-weight: 800; }
.nav-count { background: #d95850; color: #fff; }
.nav-days.is-low { background: #b97f1d; color: #fff; }
.sidebar .userbox { position: relative; display: grid; grid-template-columns: 38px 1fr auto; align-items: center; gap: 9px; margin: 0 11px 12px; border: 1px solid rgba(255,255,255,.09); border-radius: 12px; background: rgba(255,255,255,.045); padding: 10px; }
.user-avatar { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 11px; background: rgba(81,202,190,.18); color: #8fe1d9; font-weight: 800; }
.user-details { min-width: 0; }
.user-details .name, .sidebar .userbox .name { overflow: hidden; color: #fff; font-size: 11.5px; text-overflow: ellipsis; white-space: nowrap; }
.user-details > div:last-child { overflow: hidden; color: #7fa5aa; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.user-menu { position: relative; }
.user-menu summary { color: #8db1b5; cursor: pointer; font-size: 14px; list-style: none; }
.user-menu summary::-webkit-details-marker { display: none; }
.user-menu > div { position: absolute; right: -1px; bottom: 27px; z-index: 10; display: flex; width: 174px; flex-direction: column; gap: 3px; border: 1px solid var(--border); border-radius: 11px; background: var(--card); padding: 7px; box-shadow: 0 16px 35px rgba(2,31,37,.25); }
.user-menu > div a, .user-menu > div button { display: block; width: 100%; border: 0; border-radius: 7px; background: transparent; color: var(--ink); padding: 8px 9px; font: inherit; font-size: 11px; text-align: left; cursor: pointer; }
.user-menu > div a:hover, .user-menu > div button:hover { background: var(--hover); text-decoration: none; }
.subscription-alert { display: flex; align-items: center; gap: 10px; }
.subscription-alert span { flex: 1; }
.subscription-alert a { font-size: 12px; white-space: nowrap; }

/* ══════════ Panel principal ══════════ */
.dashboard-hero { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 26px; }
.dashboard-hero h1 { margin: 6px 0 5px; font-size: 30px; letter-spacing: -.04em; }
.dashboard-hero p { display: flex; align-items: center; gap: 9px; margin: 0; color: var(--muted); font-size: 12.5px; }
.dashboard-hero p i { width: 3px; height: 3px; border-radius: 50%; background: #9bb0b4; }
.page-eyebrow, .card-kicker { color: var(--teal); font-size: 9.5px; font-weight: 850; letter-spacing: .13em; text-transform: uppercase; }
.dashboard-actions { display: flex; gap: 9px; }
.btn-with-icon { gap: 8px; }
.btn-with-icon svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.dashboard-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 19px; }
.metric-card { display: flex; align-items: center; min-width: 0; gap: 13px; border: 1px solid var(--border); border-radius: 15px; background: var(--card); padding: 18px; box-shadow: var(--shadow); }
.metric-icon { display: grid; flex: 0 0 43px; width: 43px; height: 43px; place-items: center; border-radius: 12px; }
.metric-icon svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; }
.income-icon { background: #e2f5ee; color: #16865f; }
.week-icon { background: #e7f1fa; color: #397ea3; }
.month-icon { background: #eeeafa; color: #705eb2; }
.patients-icon { background: #fff2df; color: #af7118; }
.metric-copy { display: flex; min-width: 0; flex-direction: column; }
.metric-copy > span { color: var(--muted); font-size: 10px; font-weight: 650; }
.metric-copy strong { overflow: hidden; margin: 1px 0; color: var(--navy); font-size: clamp(18px, 1.7vw, 23px); letter-spacing: -.03em; text-overflow: ellipsis; white-space: nowrap; }
.metric-copy small { color: #8b9da1; font-size: 9px; }
.dashboard-main-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(295px, .72fr); align-items: start; gap: 19px; }
.dashboard-main-grid .card { margin: 0; }
.card-heading-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 15px; margin-bottom: 17px; }
.card-heading-row h2 { margin: 3px 0 0; font-size: 18px; }
.card-heading-row h2 b { display: inline-grid; min-width: 21px; height: 21px; margin-left: 5px; place-items: center; border-radius: 7px; background: var(--teal-light); color: var(--teal); font-size: 10px; vertical-align: 2px; }
.card-heading-row > a { margin-top: 6px; color: var(--teal); font-size: 10.5px; font-weight: 750; }
.card-heading-row > a span { font-size: 14px; }
.agenda-today-card { min-height: 472px; padding: 26px; }
.today-timeline { display: grid; }
.timeline-appointment { display: grid; grid-template-columns: 45px 14px minmax(120px, 1fr) auto 14px; align-items: center; gap: 11px; min-height: 74px; border-top: 1px solid #e8efef; color: inherit; text-decoration: none; }
.timeline-appointment:hover { background: var(--hover); text-decoration: none; }
.timeline-appointment time { color: #37575e; font-size: 12px; font-weight: 800; }
.timeline-line { position: relative; align-self: stretch; }
.timeline-line::before { position: absolute; top: 0; bottom: 0; left: 6px; width: 1px; background: #e3ecec; content: ""; }
.timeline-line i { position: absolute; top: 50%; left: 1px; z-index: 1; width: 11px; height: 11px; border: 3px solid var(--card); border-radius: 50%; box-shadow: 0 0 0 1px #dbe6e7; transform: translateY(-50%); }
.timeline-patient { display: flex; min-width: 0; flex-direction: column; }
.timeline-patient strong { overflow: hidden; color: #27474e; font-size: 12.5px; text-overflow: ellipsis; white-space: nowrap; }
.timeline-patient small { overflow: hidden; color: #87989c; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.status-soft { border: 1px solid color-mix(in srgb, var(--status-color), transparent 72%); border-radius: 99px; background: color-mix(in srgb, var(--status-color), transparent 89%); color: var(--status-color); padding: 4px 8px; font-size: 8.5px; font-weight: 800; white-space: nowrap; }
.row-arrow { width: 14px; height: 14px; fill: none; stroke: #9aabad; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.dashboard-side-stack { display: grid; gap: 19px; }
.quick-actions-card, .pending-card { padding: 22px; }
.quick-action-list, .pending-list { display: grid; }
.quick-action-list > a { display: grid; grid-template-columns: 39px 1fr auto; align-items: center; gap: 11px; min-height: 61px; border-top: 1px solid #e8eeee; color: inherit; text-decoration: none; }
.quick-action-list > a:hover { background: var(--hover); text-decoration: none; }
.quick-icon { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 10px; }
.quick-icon svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; }
.payment-quick { background: #e3f5ee; color: #148660; }
.search-quick { background: #e7f1fa; color: #397ea3; }
.message-quick { background: #eeeafa; color: #6c58ad; }
.quick-action-list div, .pending-list div > div { display: flex; min-width: 0; flex-direction: column; }
.quick-action-list b, .pending-list b { color: #345159; font-size: 11px; }
.quick-action-list small, .pending-list small { color: #8b9a9e; font-size: 9px; }
.quick-action-list > a > i, .pending-list > a > i { color: #8ea4a7; font-size: 14px; font-style: normal; }
.pending-list > a, .pending-list > div { display: grid; grid-template-columns: 9px 1fr auto; align-items: center; gap: 10px; min-height: 52px; border-top: 1px solid #e8eeee; color: inherit; text-decoration: none; }
.pending-list > a:hover { background: var(--hover); text-decoration: none; }
.pending-dot { width: 8px; height: 8px; border-radius: 50%; }
.debt-dot { background: #dd6a5d; box-shadow: 0 0 0 4px #fae9e6; }
.stock-dot { background: #d39a35; box-shadow: 0 0 0 4px #fbf0d9; }
.birthday-dot { background: #7867b5; box-shadow: 0 0 0 4px #efecfa; }
.empty-state-modern { display: flex; min-height: 340px; align-items: center; justify-content: center; flex-direction: column; padding: 25px; text-align: center; }
.empty-state-modern > span { display: grid; width: 52px; height: 52px; place-items: center; border-radius: 15px; background: var(--teal-light); color: var(--teal); }
.empty-state-modern svg { width: 25px; height: 25px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.6; }
.empty-state-modern h3 { margin: 15px 0 5px; font-size: 16px; }
.empty-state-modern p { max-width: 340px; margin: 0 0 15px; color: var(--muted); font-size: 11.5px; }
.dashboard-alert-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 19px; margin-top: 19px; }
.dashboard-alert-grid .card { margin: 0; }
.detail-alert-card header { display: flex; align-items: center; gap: 11px; margin-bottom: 15px; }
.detail-alert-card header > div { flex: 1; }
.detail-alert-card header > div > span { color: var(--muted); font-size: 9px; font-weight: 750; text-transform: uppercase; }
.detail-alert-card h2 { margin: 1px 0 0; font-size: 16px; }
.detail-alert-icon { display: grid; width: 37px; height: 37px; place-items: center; border-radius: 11px; background: #fff0e2; color: #bd761c; font-size: 15px; font-weight: 850; }
.detail-alert-card header > a { color: var(--teal); font-size: 10px; font-weight: 750; }
.alert-person { display: flex; align-items: center; gap: 10px; border-top: 1px solid #e8eeee; padding: 11px 0; }
.mini-avatar { display: grid; width: 33px; height: 33px; place-items: center; border-radius: 10px; background: #f1edfa; color: #6f5daf; font-size: 9px; font-weight: 800; }
.alert-person p, .inventory-alert-card li p { display: flex; flex: 1; flex-direction: column; margin: 0; }
.alert-person b, .inventory-alert-card li b { color: #37545b; font-size: 11px; }
.alert-person small, .inventory-alert-card li small { color: #89999d; font-size: 9px; }
.inventory-alert-card ul { margin: 0; padding: 0; list-style: none; }
.inventory-alert-card li { display: flex; align-items: center; gap: 11px; border-top: 1px solid #e8eeee; padding: 11px 0; }
.inventory-alert-card li > span { width: 7px; height: 7px; border-radius: 50%; background: #db6659; box-shadow: 0 0 0 4px #fae9e6; }
.dashboard-help { margin-top: 19px; }
.onboarding-modern { padding: 25px; border-top: 0; }
.onboarding-heading { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 20px; }
.onboarding-icon { display: grid; flex: 0 0 42px; width: 42px; height: 42px; place-items: center; border-radius: 12px; background: var(--teal); color: #fff; font-size: 10px; font-weight: 850; }
.onboarding-heading > div > span { color: var(--teal); font-size: 9px; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
.onboarding-heading h2 { margin: 3px 0; font-size: 20px; }
.onboarding-heading p { margin: 0; color: var(--muted); font-size: 11px; }
.onboarding-modern .onboard-step { position: relative; padding: 15px; }
.onboarding-modern .onboard-step i { position: absolute; top: 14px; right: 14px; color: #8aa3a6; font-style: normal; }

/* ══════════ Autenticación y 2FA guiado ══════════ */
.auth-page { min-height: 100vh; background: var(--card); }
.auth-header { position: fixed; top: 0; right: 0; left: 0; z-index: 30; display: flex; align-items: center; justify-content: space-between; height: 72px; border-bottom: 1px solid rgba(215,229,234,.8); background: rgba(255,255,255,.95); padding: 3px 34px 0; backdrop-filter: blur(15px); }
.app-brand { color: var(--navy); }
.auth-header-actions { display: flex; align-items: center; gap: 16px; }
.auth-header-actions > a { color: var(--muted); font-size: 11px; font-weight: 700; }
.auth-header-actions > a:hover { color: var(--teal); text-decoration: none; }
.auth-theme-toggle { border-color: var(--border); background: var(--hover); color: var(--muted); }
.auth-layout { display: grid; grid-template-columns: minmax(355px, .74fr) minmax(560px, 1.26fr); min-height: 100vh; padding-top: 72px; }
.auth-visual { position: relative; isolation: isolate; display: flex; overflow: hidden; flex-direction: column; justify-content: center; background: linear-gradient(145deg, #123f64, #075e66 68%, #063845); padding: 65px clamp(35px, 5vw, 78px); color: #fff; }
.auth-visual::before { position: absolute; inset: 0; z-index: -2; opacity: .14; background-image: radial-gradient(#80d7cf 1px, transparent 1px); background-size: 23px 23px; content: ""; mask-image: linear-gradient(#000, transparent); }
.auth-visual::after { position: absolute; right: -130px; top: -130px; z-index: -1; width: 360px; height: 360px; border-radius: 50%; background: rgba(242,181,68,.2); content: ""; filter: blur(8px); }
.auth-visual-content { position: relative; z-index: 2; max-width: 440px; }
.auth-kicker { color: #70d9cf; font-size: 9.5px; font-weight: 850; letter-spacing: .14em; text-transform: uppercase; }
.auth-visual h1 { margin: 16px 0 20px; color: #fff; font-size: clamp(38px, 4vw, 55px); letter-spacing: -.05em; line-height: 1.08; }
.auth-visual-content > p { max-width: 420px; margin: 0; color: #bad0d2; font-size: 14px; line-height: 1.75; }
.auth-benefits { display: grid; gap: 17px; margin-top: 34px; }
.auth-benefits > div { display: flex; align-items: center; gap: 11px; }
.auth-benefits i { display: grid; flex: 0 0 29px; width: 29px; height: 29px; place-items: center; border: 1px solid rgba(105,219,207,.3); border-radius: 9px; background: rgba(255,255,255,.07); color: #72ddd2; font-size: 10px; font-style: normal; font-weight: 850; }
.auth-benefits span { display: flex; flex-direction: column; }
.auth-benefits b { color: #eff8f8; font-size: 11px; }
.auth-benefits small { color: #88a9ad; font-size: 9px; }
.auth-visual-foot { position: absolute; right: clamp(35px, 5vw, 78px); bottom: 30px; left: clamp(35px, 5vw, 78px); z-index: 2; margin: 0; color: #718f93; font-size: 8.5px; line-height: 1.5; }
.auth-visual-art { position: absolute; right: -105px; bottom: -105px; width: 340px; height: 340px; opacity: .32; }
.auth-tooth { position: absolute; top: 50%; left: 50%; display: grid; width: 130px; height: 130px; place-items: center; border: 1px solid rgba(109,218,207,.3); border-radius: 50%; background: rgba(19,137,134,.15); transform: translate(-50%,-50%); }
.auth-tooth svg { width: 66px; }
.auth-tooth path { fill: none; stroke: #8ae1d7; stroke-linejoin: round; stroke-width: 2; }
.auth-orbit { position: absolute; border: 1px solid rgba(108,218,207,.23); border-radius: 50%; }
.orbit-a { inset: 15px; }
.orbit-b { inset: -45px; }
.auth-form-side { display: flex; align-items: center; justify-content: center; background: var(--bg); padding: 45px 30px; }
.auth-form-wrap { width: min(440px, 100%); }
.auth-form-wide { width: min(680px, 100%); }
.auth-card-modern { border: 1px solid var(--border); border-radius: 21px; background: var(--card); padding: 34px 38px; box-shadow: 0 24px 60px rgba(8,47,58,.09); }
.auth-card-heading { margin-bottom: 24px; }
.auth-step-label { color: var(--teal); font-size: 9px; font-weight: 850; letter-spacing: .13em; text-transform: uppercase; }
.auth-card-heading h2 { margin: 7px 0 7px; font-size: 29px; letter-spacing: -.04em; }
.auth-card-heading p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.65; }
.auth-card-heading p b { color: var(--ink); }
.access-types { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin: -7px 0 22px; }
.access-types span { display: flex; align-items: center; gap: 8px; border: 1px solid var(--border); border-radius: 9px; background: var(--hover); padding: 8px 10px; color: #506b71; font-size: 9.5px; font-weight: 700; }
.access-types i { display: grid; width: 21px; height: 21px; place-items: center; border-radius: 7px; background: var(--teal-light); color: var(--teal); font-size: 7px; font-style: normal; }
.auth-form .field { margin-bottom: 15px; }
.auth-form label { margin-bottom: 6px; color: #354f56; font-size: 11px; }
.input-with-icon { position: relative; }
.input-with-icon > svg { position: absolute; top: 50%; left: 13px; width: 17px; height: 17px; fill: none; stroke: #8ba0a4; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.6; transform: translateY(-50%); }
.input-with-icon input { min-height: 47px; padding-left: 41px; }
.password-field { position: relative; }
.password-field input { padding-right: 74px; }
.password-field > button { position: absolute; top: 50%; right: 8px; border: 0; border-radius: 7px; background: transparent; color: var(--teal); padding: 6px; font-size: 9px; font-weight: 750; cursor: pointer; transform: translateY(-50%); }
.password-field > button:hover { background: var(--teal-light); }
.auth-submit { width: 100%; min-height: 48px; gap: 12px; margin-top: 3px; font-size: 12.5px; }
.auth-submit span { font-size: 17px; }
.auth-switch { margin: 19px 0 0; color: var(--muted); font-size: 10.5px; text-align: center; }
.auth-switch a { color: var(--teal); font-weight: 800; }
.demo-box-modern { margin-top: 22px; border: 0; border-top: 1px solid var(--border); border-radius: 0; background: transparent; padding: 20px 0 0; }
.demo-heading { display: flex; flex-direction: column; margin-bottom: 10px; text-align: center; }
.demo-heading span { color: var(--navy); font-size: 13px; font-weight: 800; }
.demo-heading small { margin-top: 3px; color: var(--muted); font-size: 10px; line-height: 1.5; }
.demo-box-modern .demo-grid { grid-template-columns: repeat(2, 1fr); }
.demo-box-modern .demo-grid form { min-width: 0; }
.demo-box-modern .demo-grid button { display: flex; width: 100%; min-height: 64px; align-items: center; gap: 9px; border-color: var(--border); padding: 10px; text-align: left; box-shadow: 0 5px 15px rgba(18,59,93,.05); transition: border-color .18s, box-shadow .18s, transform .18s; }
.demo-box-modern .demo-grid button:hover { border-color: #7fc9c5; background: #f1fcf9; box-shadow: 0 9px 20px rgba(18,59,93,.1); transform: translateY(-2px); }
.demo-box-modern .demo-grid button > span:nth-child(2) { display: flex; min-width: 0; flex-direction: column; }
.demo-box-modern .demo-grid b { color: var(--navy); font-size: 10.5px; }
.demo-box-modern .demo-grid small { color: var(--muted); font-size: 8.8px; }
.demo-box-modern .demo-grid button > i { margin-left: auto; color: var(--teal); font-size: 16px; font-style: normal; }
.demo-avatar { display: grid; flex: 0 0 30px; width: 30px; height: 30px; place-items: center; border-radius: 9px; font-size: 9px; font-weight: 850; }
.dentist-demo { background: var(--teal-light); color: var(--teal); }
.patient-demo { background: #e5f2ff; color: #176b9c; }
.demo-mode-banner { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 20px; border: 1px solid #ecd383; border-left: 4px solid var(--gold); border-radius: 12px; background: linear-gradient(100deg, #fff8dc, #ebfaf6); padding: 12px 15px; color: #42596a; box-shadow: 0 6px 18px rgba(18,59,93,.06); font-size: 11.5px; }
.demo-mode-banner b { color: var(--navy); }
.demo-mode-banner a { flex-shrink: 0; border-radius: 8px; background: var(--navy); color: #fff; padding: 7px 10px; font-size: 10px; font-weight: 750; }
.demo-mode-banner a:hover { background: var(--teal); text-decoration: none; }
.auth-security-note { display: flex; align-items: center; gap: 7px; margin-top: 14px; color: #87999c; font-size: 8.5px; }
.auth-security-note svg { flex: 0 0 14px; width: 14px; height: 14px; fill: none; stroke: #3e9c83; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.auth-progress { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; margin-bottom: 28px; }
.auth-progress span { display: flex; align-items: center; gap: 6px; color: #96a5a8; font-size: 8.5px; font-weight: 750; }
.auth-progress span i { display: grid; width: 21px; height: 21px; place-items: center; border: 1px solid var(--border); border-radius: 50%; font-size: 7.5px; font-style: normal; }
.auth-progress span.active, .auth-progress span.complete { color: var(--teal); }
.auth-progress span.active i { border-color: var(--teal); background: var(--teal); color: #fff; }
.auth-progress span.complete i { border-color: #bce2da; background: #e2f5ee; color: #18845f; }
.auth-progress > b { height: 1px; background: var(--border); }
.auth-progress > b.complete { background: #8dcec2; }
.register-card { padding: 31px 36px; }
.register-card .form-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; }
.optional-label, .label-hint { margin-left: 4px; color: #91a1a4; font-size: 8px; font-weight: 600; }
.plain-password-field input { min-height: 42px; }
.password-strength { overflow: hidden; height: 3px; margin-top: 6px; border-radius: 99px; background: #e8eeee; }
.password-strength span { display: block; width: 0; height: 100%; border-radius: inherit; background: #d95850; transition: width .2s ease, background .2s ease; }
.password-strength span[data-score="2"] { background: #d59a32; }
.password-strength span[data-score="3"], .password-strength span[data-score="4"] { background: #18865c; }
.field-help { display: block; margin-top: 4px; color: #8b9a9e; font-size: 8px; }
.form-trust-line { margin: 9px 0 0; color: #84979a; font-size: 8.5px; text-align: center; }
.form-trust-line i { color: #19865f; font-style: normal; }
.referral-welcome { display: flex; align-items: center; gap: 10px; margin: -5px 0 19px; border: 1px solid #c6e7dc; border-radius: 11px; background: #edf9f5; padding: 11px 13px; }
.referral-welcome > span { font-size: 20px; }
.referral-welcome p { margin: 0; color: #315a52; font-size: 10px; }
.referral-welcome small { color: #67827c; font-size: 8.5px; }
.twofactor-card { padding: 30px 35px; }
.twofactor-guide { display: grid; }
.setup-step { display: grid; grid-template-columns: 31px 1fr; gap: 12px; border-top: 1px solid var(--border); padding: 18px 0; }
.setup-number { display: grid; width: 29px; height: 29px; place-items: center; border-radius: 9px; background: var(--teal-light); color: var(--teal); font-size: 9px; font-weight: 850; }
.setup-step h3 { margin: 1px 0 4px; font-size: 13px; }
.setup-step p { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.6; }
.authenticator-downloads { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; margin-top: 12px; }
.store-download { display: grid; grid-template-columns: 35px minmax(0, 1fr) auto; align-items: center; gap: 9px; min-height: 58px; border: 1px solid var(--border); border-radius: 12px; background: var(--card); padding: 9px 10px; color: var(--ink); box-shadow: 0 5px 14px rgba(18,59,93,.055); text-decoration: none; transition: border-color .18s, box-shadow .18s, transform .18s; }
.store-download:hover { border-color: #79c9c3; box-shadow: 0 9px 22px rgba(18,59,93,.12); color: var(--ink); text-decoration: none; transform: translateY(-2px); }
.store-download-icon { display: grid; width: 35px; height: 35px; place-items: center; border-radius: 10px; }
.play-download .store-download-icon { background: #e0f8ef; color: #087969; }
.apple-download .store-download-icon { background: #e8f1fb; color: #173b5c; }
.store-download-icon svg { width: 21px; height: 21px; fill: currentColor; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: .7; }
.store-download > span:nth-child(2) { display: flex; min-width: 0; flex-direction: column; }
.store-download small { color: var(--muted); font-size: 7.5px; line-height: 1.25; }
.store-download strong { overflow: hidden; margin-top: 2px; color: var(--navy); font-size: 9.3px; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
.store-download > i { color: var(--teal); font-size: 14px; font-style: normal; }
.setup-step .store-alternative { margin-top: 9px; color: #728590; font-size: 8.5px; }
.qr-step-content { display: grid; grid-template-columns: 1fr 142px; align-items: center; gap: 15px; }
.qr-shell { grid-column: 2; grid-row: 1 / span 2; border: 1px solid var(--border); border-radius: 14px; background: #fff; padding: 8px; box-shadow: 0 8px 20px rgba(8,47,58,.06); }
.qr-shell .qr-img { width: 124px; height: 124px; border: 0; border-radius: 7px; padding: 0; box-shadow: none; }
.manual-key { margin-top: 11px; }
.manual-key summary, .twofactor-help summary { color: var(--teal); cursor: pointer; font-size: 9.5px; font-weight: 750; }
.manual-key > p { margin: 7px 0 6px; font-size: 8.5px; }
.manual-key > div { display: flex; align-items: center; gap: 6px; }
.manual-key code { overflow: hidden; border-radius: 7px; background: var(--hover); padding: 7px 8px; color: #476269; font-size: 8px; letter-spacing: .08em; text-overflow: ellipsis; }
.manual-key button { border: 1px solid var(--border); border-radius: 7px; background: var(--card); color: var(--teal); padding: 6px 8px; font-size: 8px; font-weight: 750; cursor: pointer; }
.verify-setup-step { border-bottom: 1px solid var(--border); }
.otp-form { display: grid; grid-template-columns: minmax(150px, .65fr) 1fr; align-items: center; gap: 10px; margin-top: 12px; }
.otp-input { min-height: 48px !important; padding: 8px 8px 8px 17px !important; font-size: 21px !important; letter-spacing: 8px; }
.otp-form .auth-submit { min-height: 48px; margin: 0; }
.otp-help { display: block; margin-top: 7px; color: #8a9b9e; font-size: 8px; }
.friendly-security-note { display: flex; align-items: flex-start; gap: 9px; margin-top: 18px; border-radius: 10px; background: var(--hover); padding: 10px 12px; }
.friendly-security-note > span { font-size: 15px; }
.friendly-security-note p { margin: 0; color: #70868a; font-size: 8.5px; line-height: 1.55; }
.friendly-security-note b { color: #405d63; }
.small-switch { margin-top: 13px; }
.verify-card { max-width: 440px; padding: 38px; }
.verify-shield { display: grid; width: 55px; height: 55px; margin: 0 auto 17px; place-items: center; border-radius: 16px; background: var(--teal-light); color: var(--teal); }
.verify-shield svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; }
.centered-auth-heading { text-align: center; }
.verify-otp-form { grid-template-columns: 1fr; }
.verify-otp-form label { text-align: center; }
.verify-otp-form .otp-input { width: 220px; margin: auto; }
.otp-timer-hint { display: flex; align-items: center; justify-content: center; gap: 6px; color: #8a9b9e; font-size: 8.5px; }
.timer-dot { width: 6px; height: 6px; border-radius: 50%; background: #1fa27a; box-shadow: 0 0 0 4px #e2f5ee; }
.twofactor-help { margin-top: 17px; border-top: 1px solid var(--border); padding-top: 13px; }
.twofactor-help ul { margin: 8px 0 0; padding-left: 18px; color: var(--muted); font-size: 9px; }

/* ══════════ Configuración: dos actores ══════════ */
.access-model-card > h3 { margin: 5px 0 8px; }
.access-model-card > p { margin-top: 0; font-size: 12px; }
.settings-actors { display: grid; gap: 10px; margin-top: 22px; }
.settings-actor { display: grid; grid-template-columns: 39px 1fr auto; align-items: center; gap: 11px; border: 1px solid var(--border); border-radius: 12px; background: var(--hover); padding: 12px; }
.settings-actor-icon { display: grid; width: 36px; height: 36px; place-items: center; border-radius: 10px; background: var(--teal-light); color: var(--teal); font-size: 9px; font-weight: 850; }
.patient-actor .settings-actor-icon { background: #e8f1f8; color: #3b7c9c; }
.settings-actor > div { display: flex; min-width: 0; flex-direction: column; }
.settings-actor b { color: #35545a; font-size: 11px; }
.settings-actor small { overflow: hidden; color: #87999c; font-size: 8.5px; text-overflow: ellipsis; white-space: nowrap; }
.settings-actor > i { border-radius: 99px; background: #e1f5ec; color: #18825e; padding: 4px 8px; font-size: 8px; font-style: normal; font-weight: 800; }
.settings-actor > a { color: var(--teal); font-size: 9px; font-weight: 750; }
.intermediary-mini-note { margin-top: 13px; border-left: 3px solid #85cfc5; border-radius: 0 8px 8px 0; background: var(--teal-light); padding: 10px 12px; color: #5d777b; font-size: 9px; }
.intermediary-mini-note b { color: #2f5d60; }

/* ══════════ Portal del paciente ══════════ */
.portal-body { background: #f2f8fb; }
.portal-topbar { position: sticky; top: 0; z-index: 40; min-height: 72px; flex-wrap: nowrap; background: rgba(255,255,255,.96); color: var(--ink); padding: 13px max(22px, calc((100vw - 1180px) / 2)) 10px; border-bottom: 1px solid var(--border); box-shadow: 0 5px 22px rgba(18,59,93,.06); backdrop-filter: blur(16px); }
.portal-brand { display: flex; align-items: center; gap: 10px; flex: 1; color: var(--navy); text-decoration: none; }
.portal-brand:hover { text-decoration: none; }
.portal-brand > span:last-child { display: flex; max-width: 230px; flex-direction: column; line-height: 1.15; }
.portal-brand strong { overflow: hidden; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.portal-brand small { margin-top: 3px; color: var(--muted); font-size: 8px; font-weight: 750; letter-spacing: .09em; text-transform: uppercase; }
.portal-brand .app-brand-mark { flex-basis: 35px; width: 35px; height: 35px; }
.portal-nav { flex-wrap: nowrap; gap: 4px; }
.portal-nav a { display: flex; align-items: center; gap: 6px; border-radius: 9px; color: #61777c; padding: 8px 11px; font-size: 10.5px; }
.portal-nav a svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; }
.portal-nav a:hover { background: var(--hover); color: var(--teal); }
.portal-nav a.active { background: var(--teal-light); color: var(--teal); }
.portal-account { display: flex; align-items: center; justify-content: flex-end; flex: 1; gap: 9px; }
.portal-account .theme-toggle { border-color: var(--border); background: var(--hover); color: var(--muted); }
.portal-user-avatar { display: grid; width: 31px; height: 31px; place-items: center; border-radius: 9px; background: #e8f1f7; color: #3c7c99; font-size: 9px; font-weight: 850; }
.portal-account > a { color: var(--muted); font-size: 9.5px; font-weight: 750; }
.portal-main { max-width: 1120px; padding: 35px 22px 60px; }
.portal-footer { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 9px 20px; border-top: 1px solid var(--border); color: var(--muted); font-size: 9.5px; }
.portal-private { display: inline-flex; align-items: center; gap: 5px; }
.portal-private svg { width: 13px; height: 13px; fill: none; stroke: #2d8e78; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.portal-welcome { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 25px; }
.portal-welcome h1 { margin: 6px 0 5px; font-size: 30px; letter-spacing: -.04em; }
.portal-welcome p { max-width: 550px; margin: 0; color: var(--muted); font-size: 12px; }
.portal-summary-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 19px; }
.portal-summary-card { position: relative; overflow: hidden; min-height: 154px; border: 1px solid var(--border); border-radius: 16px; background: var(--card); padding: 20px; box-shadow: var(--shadow); }
.portal-summary-card::after { position: absolute; right: -35px; bottom: -48px; width: 120px; height: 120px; border-radius: 50%; background: var(--teal-light); content: ""; opacity: .6; }
.portal-summary-icon { display: grid; width: 35px; height: 35px; margin-bottom: 14px; place-items: center; border-radius: 10px; background: var(--teal-light); color: var(--teal); }
.portal-summary-icon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; }
.portal-summary-card > span { display: block; color: var(--muted); font-size: 9px; font-weight: 700; }
.portal-summary-card > strong { position: relative; z-index: 1; display: block; margin-top: 2px; color: var(--navy); font-size: 19px; letter-spacing: -.02em; }
.portal-summary-card > p { position: relative; z-index: 1; margin: 1px 0 0; color: #87989c; font-size: 9px; }
.balance-summary::after { background: #e5f5ec; }
.balance-summary .portal-summary-icon { background: #e5f5ec; color: #228562; }
.balance-summary.has-balance::after, .balance-summary.has-balance .portal-summary-icon { background: #fbe9e6; }
.balance-summary.has-balance .portal-summary-icon { color: #cf5b4f; }
.treatment-summary::after, .treatment-summary .portal-summary-icon { background: #e8eff9; }
.treatment-summary .portal-summary-icon { color: #447da4; }
.portal-content-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 19px; }
.portal-section-card { min-height: 330px; margin: 0; }
.portal-appointment-list, .portal-treatment-list { display: grid; }
.portal-appointment-row { display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 11px; min-height: 67px; border-top: 1px solid #e7eeee; }
.portal-date-box { display: flex; width: 39px; height: 43px; align-items: center; justify-content: center; flex-direction: column; border-radius: 10px; background: var(--teal-light); line-height: 1; }
.portal-date-box b { color: var(--teal); font-size: 15px; }
.portal-date-box span { margin-top: 3px; color: #5e8688; font-size: 7px; font-weight: 800; text-transform: uppercase; }
.portal-appointment-row > div:nth-child(2) { display: flex; min-width: 0; flex-direction: column; }
.portal-appointment-row strong { overflow: hidden; color: #345259; font-size: 10.5px; text-overflow: ellipsis; white-space: nowrap; }
.portal-appointment-row small { color: #87999c; font-size: 8.5px; }
.portal-treatment-row { border-top: 1px solid #e7eeee; padding: 16px 0; }
.portal-treatment-row > div:first-child { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.portal-treatment-row strong { color: #345159; font-size: 10.5px; }
.portal-treatment-row span, .portal-treatment-row small { color: #819397; font-size: 8.5px; }
.portal-treatment-row .progress { height: 7px; margin: 8px 0 5px; }
.compact-empty { min-height: 225px; }
.compact-empty > a { color: var(--teal); font-size: 10px; font-weight: 750; }
.portal-history-card { margin-top: 19px; }
.portal-history-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; }
.portal-history-list > div { display: grid; grid-template-columns: 8px 65px 1fr; align-items: center; gap: 8px; border-radius: 9px; background: var(--hover); padding: 10px; }
.history-marker { width: 7px; height: 7px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 0 4px var(--teal-light); }
.portal-history-list time { color: var(--muted); font-size: 8.5px; }
.portal-history-list strong { overflow: hidden; color: #405b61; font-size: 9.5px; text-overflow: ellipsis; white-space: nowrap; }
.portal-help { margin-top: 19px; }

/* Mejoras de foco y campos */
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 3px solid rgba(8,127,131,.28); outline-offset: 2px; }
input::placeholder, textarea::placeholder { color: #9aa9ac; }

/* ══════════ Adaptación de las vistas nuevas ══════════ */
@media (max-width: 1180px) {
  .dashboard-stats { grid-template-columns: repeat(2, 1fr); }
  .auth-layout { grid-template-columns: minmax(320px,.65fr) minmax(520px,1.35fr); }
  .auth-visual { padding-inline: 45px; }
}

@media (max-width: 980px) {
  .auth-layout { grid-template-columns: 1fr; }
  .auth-visual { display: none; }
  .auth-form-side { min-height: calc(100vh - 72px); }
  .portal-topbar { flex-wrap: wrap; }
  .portal-brand, .portal-account { flex: none; }
  .portal-brand { flex: 1; }
  .portal-nav { order: 3; width: 100%; justify-content: center; border-top: 1px solid var(--border); padding-top: 8px; }
}

@media (max-width: 900px) {
  .sidebar-brand { min-height: 70px; }
  .sidebar nav a { min-height: 45px; }
  .sidebar .userbox { margin-bottom: calc(12px + env(safe-area-inset-bottom)); }
  .main { width: 100%; padding: 22px 15px 70px; }
  .nav-toggle svg, .mt-action svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.9; }
  .mobile-topbar .nav-toggle { display: grid; width: 40px; height: 40px; place-items: center; padding: 0; }
  .mobile-topbar { background: linear-gradient(100deg, #123f63, #007a78); padding-block: 8px; }
  .mobile-topbar .mt-brand { display: flex; align-items: center; gap: 7px; }
  .mobile-topbar .mt-action { position: relative; display: grid; width: 38px; height: 38px; place-items: center; border-radius: 10px; background: rgba(255,255,255,.08); padding: 0; }
  .danger-badge { position: absolute; top: -3px; right: -3px; background: var(--danger); font-size: 8px !important; }
  .dashboard-main-grid { grid-template-columns: 1fr; }
  .dashboard-side-stack { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 680px) {
  .demo-mode-banner { align-items: flex-start; flex-direction: column; gap: 10px; }
  .dashboard-hero, .portal-welcome { align-items: stretch; flex-direction: column; }
  .dashboard-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .dashboard-stats { grid-template-columns: 1fr 1fr; gap: 9px; }
  .metric-card { align-items: flex-start; flex-direction: column; gap: 8px; padding: 14px; }
  .metric-icon { width: 36px; height: 36px; flex-basis: 36px; }
  .metric-copy strong { font-size: 18px; }
  .dashboard-side-stack, .dashboard-alert-grid { grid-template-columns: 1fr; }
  .timeline-appointment { grid-template-columns: 40px 12px 1fr 13px; min-height: 71px; }
  .timeline-appointment .status-soft { display: none; }
  .agenda-today-card { padding: 19px 16px; }
  .card-heading-row { align-items: flex-start; }
  .card-heading-row > a { text-align: right; }
  .auth-header { height: 65px; padding: 0 15px; }
  .auth-header-actions > a { display: none; }
  .auth-layout { padding-top: 65px; }
  .auth-form-side { min-height: calc(100vh - 65px); padding: 24px 12px; }
  .auth-card-modern, .register-card, .twofactor-card, .verify-card { border-radius: 17px; padding: 25px 20px; }
  .register-card .form-row { grid-template-columns: 1fr; gap: 0; }
  .qr-step-content { grid-template-columns: 1fr; }
  .authenticator-downloads { grid-template-columns: 1fr; }
  .qr-shell { grid-column: auto; grid-row: auto; width: 142px; }
  .otp-form { grid-template-columns: 1fr; }
  .auth-progress { gap: 6px; }
  .auth-progress span { font-size: 7.5px; }
  .portal-topbar { padding: 9px 12px; }
  .portal-brand > span:last-child { max-width: 160px; }
  .portal-account .theme-toggle { display: none; }
  .portal-nav { justify-content: stretch; overflow-x: auto; }
  .portal-nav a { flex: 1; justify-content: center; white-space: nowrap; }
  .portal-main { padding: 25px 12px 45px; }
  .portal-summary-grid { grid-template-columns: 1fr; gap: 9px; }
  .portal-summary-card { min-height: 125px; }
  .portal-content-grid { grid-template-columns: 1fr; }
  .portal-footer { align-items: flex-start; flex-direction: column; padding-inline: 16px; }
}

@media (max-width: 460px) {
  .dashboard-hero h1, .portal-welcome h1 { font-size: 26px; }
  .dashboard-stats { grid-template-columns: 1fr 1fr; }
  .metric-copy > span { font-size: 9px; }
  .metric-copy small { display: none; }
  .access-types { grid-template-columns: 1fr; }
  .demo-box-modern .demo-grid { grid-template-columns: 1fr; }
  .auth-card-heading h2 { font-size: 25px; }
  .auth-progress span { max-width: 95px; line-height: 1.2; }
  .verify-otp-form .otp-input { width: 100%; }
  .portal-brand strong { max-width: 130px; }
  .portal-account { gap: 6px; }
  .portal-user-avatar { display: none; }
  .portal-nav a { flex-direction: column; gap: 2px; padding: 6px 9px; font-size: 8px; }
}

/* Modo oscuro para los componentes nuevos */
html[data-theme="dark"] { --navy: #e5f0f2; }
html[data-theme="dark"] .auth-header, html[data-theme="dark"] .portal-topbar { background: rgba(20,35,41,.96); }
html[data-theme="dark"] .auth-form-side, html[data-theme="dark"] .portal-body { background: var(--bg); }
html[data-theme="dark"] .auth-theme-toggle, html[data-theme="dark"] .portal-account .theme-toggle { background: var(--hover); }
html[data-theme="dark"] .metric-icon, html[data-theme="dark"] .quick-icon,
html[data-theme="dark"] .portal-summary-icon, html[data-theme="dark"] .settings-actor-icon,
html[data-theme="dark"] .verify-shield, html[data-theme="dark"] .setup-number { filter: saturate(.75) brightness(.75); }
html[data-theme="dark"] .timeline-line i { border-color: var(--card); }
html[data-theme="dark"] .qr-shell { border-color: #395159; background: #fff; }
html[data-theme="dark"] .manual-key code { background: #1a2e35; }
html[data-theme="dark"] .portal-summary-card::after { opacity: .14; }
html[data-theme="dark"] .status-soft { background: color-mix(in srgb, var(--status-color), transparent 82%); }
html[data-theme="dark"] input[type=tel] { border-color: var(--border); }
html[data-theme="dark"] .demo-mode-banner { border-color: #6a5928; background: linear-gradient(100deg, #302916, #123b3b); color: #c7d5dc; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}