/* ============================================================
   MonTech Médico · Estructura y piezas comunes
   Sobre la base del sistema: menú lateral blanco con el activo
   relleno en azul, saludo arriba, tarjetas de cifras con ícono,
   barra inferior en el teléfono.
   ============================================================ */

body { background: var(--bg-app); }
.u-solo-oscuro { display: none !important; }
[data-theme="dark"] .u-solo-claro { display: none !important; }
[data-theme="dark"] .u-solo-oscuro { display: block !important; }
a { color: var(--text-brand); }
a:hover { text-decoration: underline; text-underline-offset: 2px; }
.nav a:hover, .tabbar a:hover, .buscador a:hover, .aviso:hover, .btn:hover, .rol:hover, a.card:hover, a.fila:hover { text-decoration: none; }

/* ============================================================
   Entrada
   ============================================================ */
.login__art {
  background:
    radial-gradient(110% 90% at 100% 0%, rgba(125, 211, 252, 0.45) 0%, rgba(125, 211, 252, 0) 58%),
    radial-gradient(90% 70% at 0% 100%, rgba(10, 79, 184, 0.85) 0%, rgba(10, 79, 184, 0) 70%),
    linear-gradient(160deg, #1a7df5 0%, #0a5ed6 55%, #0a4fb8 100%);
}
.login__iso { right: -80px; bottom: -70px; width: 420px; opacity: 0.12; filter: brightness(0) invert(1); }
.login__eyebrow { color: #d6e9ff; }
.login__eyebrow::before { background: #7dd3fc; }
.login__title span { color: #bfe3ff; }
.login__sub { color: rgba(255, 255, 255, 0.86); }
.login__logo { width: 210px; margin-bottom: var(--s-6); }
.login__welcome { font-size: 26px; }
.login__roles { display: flex; flex-direction: column; gap: var(--s-3); }
.rol {
  display: flex; align-items: center; gap: var(--s-4); width: 100%; text-align: left;
  padding: var(--s-4); border-radius: var(--r-lg); border: 1px solid var(--border);
  background: var(--bg-surface); box-shadow: var(--sh-1);
  transition: border-color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast);
}
.rol:hover { border-color: var(--brand); box-shadow: var(--sh-2); }
.rol:active { transform: translateY(1px); }
.rol .avatar--lg { width: 50px; height: 50px; font-size: var(--fs-16); }
.rol__txt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.rol__txt small { font-size: var(--fs-11); font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--brand-ink); }
.rol__txt b { font-size: var(--fs-16); margin-top: 1px; }
.rol__txt span { font-size: var(--fs-12); color: var(--text-muted); margin-top: 2px; line-height: 1.4; }
.rol__ir { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--bg-inset); color: var(--text-secondary); flex: 0 0 auto; transition: background var(--t-fast), color var(--t-fast); }
.rol:hover .rol__ir { background: var(--mt-azul-600); color: #fff; }
.rol__ir svg { width: 16px; height: 16px; }
.login__aviso { margin-top: var(--s-5); font-size: var(--fs-12); color: var(--text-muted); line-height: 1.5; }
.login__reset { margin-top: var(--s-2); padding: 0; border: 0; background: none; color: var(--text-brand); font-size: var(--fs-12); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.login__foot { margin-top: var(--s-6); }
@media (max-width: 860px) {
  .login__panel { padding: var(--s-7) var(--s-5) calc(var(--s-6) + env(safe-area-inset-bottom, 0px)); }
  .login__logo { width: 180px; margin-bottom: var(--s-5); }
}

/* ============================================================
   Menú lateral
   ============================================================ */
.nav__word { font-size: 17px; }
.nav__word em { font-style: normal; color: var(--brand); font-weight: 700; }
.nav__iso { border-radius: 0; object-fit: contain; }
.nav__group {
  padding: var(--s-4) 12px 6px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--text-muted);
}
.nav__group:first-child { padding-top: var(--s-1); }
.nav__item { min-height: 42px; border-radius: 12px; text-decoration: none; }
.nav__item.is-active { background: var(--bg-nav-active); color: var(--text-nav-active); box-shadow: 0 8px 16px -8px rgba(11, 108, 240, 0.55); }
.nav__item.is-active svg { color: #fff; }
.nav__item.is-active::before { display: none; }
.nav__item.is-active .nav__badge { background: rgba(255, 255, 255, 0.18); color: #fff; }
.nav__badge--info { background: var(--info-soft); color: var(--info-ink); }
.app.is-collapsed .nav__group, .app.is-collapsed .nav__sep { display: none; }
@media (max-width: 860px) {
  .nav__group { display: none; }
  .app.is-menu .nav__group { display: block; }
}
.nav__card {
  background:
    radial-gradient(110% 80% at 100% 0%, rgba(125, 211, 252, 0.5) 0%, rgba(125, 211, 252, 0) 62%),
    linear-gradient(160deg, #2f86f6 0%, #0a5ed6 100%);
}
.nav__card-ico { color: var(--mt-azul-600); }
.nav__card-btn { color: var(--mt-azul-600); }
.nav__card-btn:hover { background: #e7f1ff; }
/* En pantallas bajas (portátiles de 768 px) la tarjeta taparía el final del menú: el recorrido sigue en Configuración */
@media (min-width: 861px) and (max-height: 860px) { .nav__card { display: none; } }

/* ============================================================
   Barra superior
   ============================================================ */
.topbar { gap: var(--s-4); }
.topbar__saludo { display: flex; flex-direction: column; min-width: 0; flex: 0 1 auto; margin-right: var(--s-2); }
.topbar__saludo b { font-size: var(--fs-18); font-weight: 700; letter-spacing: -0.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar__saludo span { font-size: var(--fs-12); color: var(--text-muted); white-space: nowrap; text-transform: none; }
.topbar__search { flex: 0 1 380px; }
.topbar__lupa { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--text-muted); pointer-events: none; display: flex; }
.topbar__lupa svg { width: 16px; height: 16px; }
.topbar__search input { background: var(--bg-muted); }
#btnAsistente { color: var(--brand); }
#btnAsistente:hover { background: var(--brand-soft); border-color: transparent; }
@media (max-width: 1180px) { .topbar__saludo { display: none; } }
@media (max-width: 640px) {
  .topbar__lupa { left: 12px; }
  #btnAsistente { display: none; }
}

/* Resultados del buscador */
.buscador {
  position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 880; min-width: 320px;
  background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--r-lg);
  box-shadow: var(--sh-3); padding: 6px; max-height: min(460px, 70vh); overflow-y: auto;
  animation: popIn 140ms ease both;
}
.buscador__item { display: flex; align-items: center; gap: var(--s-3); padding: 9px 10px; border-radius: var(--r); color: var(--text-primary); }
.buscador__item.is-sel, .buscador__item:hover { background: var(--bg-inset); }
.buscador__txt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.buscador__txt b { font-size: var(--fs-13); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.buscador__txt small { font-size: var(--fs-12); color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.buscador__vacio { padding: var(--s-4); font-size: var(--fs-13); color: var(--text-muted); }
@media (max-width: 640px) {
  .buscador { position: fixed; top: calc(var(--topbar-h) + 4px); left: var(--s-2); right: var(--s-2); min-width: 0; }
  .buscador .badge { display: none; }
}

/* Avisos */
.notif-panel { right: var(--s-7); top: calc(var(--topbar-h) + 6px); position: fixed; }
.notif-panel__lista { overflow-y: auto; flex: 1 1 auto; }
.aviso { display: flex; gap: var(--s-3); padding: var(--s-3) var(--s-5); border-bottom: 1px solid var(--border); color: var(--text-primary); position: relative; }
.aviso:hover { background: var(--bg-muted); }
.aviso.is-nuevo::after { content: ""; position: absolute; right: var(--s-4); top: 18px; width: 7px; height: 7px; border-radius: 50%; background: var(--brand); }
.aviso__txt { display: flex; flex-direction: column; min-width: 0; padding-right: var(--s-3); }
.aviso__txt b { font-size: var(--fs-13); font-weight: 600; line-height: 1.35; }
.aviso__txt small { font-size: var(--fs-12); color: var(--text-muted); margin-top: 2px; line-height: 1.4; }
.notif-panel__pie { display: flex; gap: var(--s-2); align-items: center; padding: var(--s-3) var(--s-5); font-size: var(--fs-11); color: var(--text-muted); background: var(--bg-muted); border-top: 1px solid var(--border); }
.notif-panel__pie svg { flex: 0 0 auto; }
.notif-panel__pie a { margin-left: auto; flex: 0 0 auto; font-weight: 600; white-space: nowrap; }
@media (max-width: 640px) { .notif-panel { top: calc(var(--topbar-h) + 4px); } .aviso { padding: var(--s-3) var(--s-4); } }

/* Menú de la cuenta */
.menu--usuario { min-width: 240px; }

/* ============================================================
   Barra inferior (teléfono)
   ============================================================ */
.tabbar { display: none; }
@media (max-width: 640px) {
  :root { --tabbar-h: 62px; }
  .tabbar {
    display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 600;
    height: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px)); padding-bottom: env(safe-area-inset-bottom, 0px);
    background: var(--bg-surface);
    background: color-mix(in srgb, var(--bg-surface) 94%, transparent);
    -webkit-backdrop-filter: saturate(1.4) blur(12px); backdrop-filter: saturate(1.4) blur(12px);
    border-top: 1px solid var(--border);
  }
  .tabbar__item {
    position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    color: var(--text-muted); font-size: 10.5px; font-weight: 600; text-decoration: none; -webkit-tap-highlight-color: transparent;
  }
  .tabbar__item svg { width: 22px; height: 22px; }
  .tabbar__item.is-active { color: var(--brand); }
  [data-theme="dark"] .tabbar__item.is-active { color: #fff; }
  .tabbar__item.is-active svg { stroke-width: 2.4; }
  .tabbar__item.is-active::before { content: ""; position: absolute; top: 0; left: 28%; right: 28%; height: 3px; border-radius: 0 0 3px 3px; background: var(--brand); }
  .tabbar__dot {
    position: absolute; top: 6px; left: calc(50% + 6px); min-width: 17px; height: 17px; padding: 0 4px;
    border-radius: 9px; font-style: normal; font-size: 10px; font-weight: 700; color: #fff; background: var(--danger);
    display: grid; place-items: center; border: 2px solid var(--bg-surface);
  }
  .tabbar__dot--warn { background: var(--warn); }
  .tabbar__dot--info { background: var(--info); }
  .view__inner { padding-bottom: calc(var(--tabbar-h) + var(--s-7) + env(safe-area-inset-bottom, 0px)); }
  .toasts { bottom: calc(var(--tabbar-h) + var(--s-3) + env(safe-area-inset-bottom, 0px)); }
  .tour { bottom: calc(var(--tabbar-h) + var(--s-3) + env(safe-area-inset-bottom, 0px)); }
  .app.is-menu .tabbar { display: none; }
}

/* ============================================================
   Piezas
   ============================================================ */
.card { border-radius: var(--r-lg); }
.card__head h3 { font-size: var(--fs-16); font-weight: 700; }
.page-head h1 { font-size: 26px; }
@media (max-width: 640px) { .page-head h1 { font-size: 21px; } }

/* KPI con ícono en círculo, como en la referencia */
.kpi { padding: var(--s-5) var(--s-5) var(--s-4); }
.kpi__icon {
  width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; margin-top: -4px;
  background: var(--brand-soft);
  background: color-mix(in srgb, var(--kpi-accent, var(--brand)) 13%, transparent);
}
.kpi__icon svg { width: 19px; height: 19px; }
.kpi__label { color: var(--text-secondary); font-weight: 600; font-size: var(--fs-13); }
.kpi__value { font-size: 30px; }
a.kpi { color: inherit; text-decoration: none; }
a.kpi:hover { border-color: var(--border-strong); box-shadow: var(--sh-2); }
@media (max-width: 640px) {
  .kpi { padding: var(--s-4) var(--s-4) var(--s-3); }
  .kpi__icon { width: 34px; height: 34px; border-radius: 10px; }
  .kpi__value { font-size: 24px; }
}

.avatar { font-weight: 700; }
.avatar--t1 { background: #e7f1ff; color: #0a5ed6; }
.avatar--t2 { background: #dcf6f2; color: #0b7a6e; }
.avatar--t3 { background: #efeafe; color: #6d3fd8; }
.avatar--t4 { background: #fef1e2; color: #a85a0c; }
.avatar--t5 { background: #fde9ee; color: #b4325a; }
.avatar--t6 { background: #e3f6ec; color: #13744a; }
[data-theme="dark"] .avatar--t1 { background: rgba(59, 143, 247, 0.18); color: #9cc6fc; }
[data-theme="dark"] .avatar--t2 { background: rgba(45, 212, 191, 0.16); color: #7ee7d8; }
[data-theme="dark"] .avatar--t3 { background: rgba(167, 139, 250, 0.18); color: #c9b8fd; }
[data-theme="dark"] .avatar--t4 { background: rgba(245, 165, 74, 0.16); color: #f8c486; }
[data-theme="dark"] .avatar--t5 { background: rgba(240, 117, 150, 0.16); color: #f7a9bf; }
[data-theme="dark"] .avatar--t6 { background: rgba(60, 201, 138, 0.16); color: #86e0b5; }
.avatar--navy { background: var(--mt-azul-600); color: #fff; }
[data-theme="dark"] .avatar--navy { background: var(--mt-azul-700); }
.avatar--xl { width: 64px; height: 64px; font-size: 22px; border-radius: 18px; }

.persona { display: flex; align-items: center; gap: var(--s-3); min-width: 0; }
.persona__txt { display: flex; flex-direction: column; min-width: 0; }
.persona__txt b { font-weight: 600; font-size: var(--fs-13); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.persona__txt span { font-size: var(--fs-12); color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.eva { display: inline-grid; place-items: center; min-width: 28px; height: 24px; padding: 0 6px; border-radius: 8px; font-weight: 700; font-size: var(--fs-12); font-variant-numeric: tabular-nums; }
.eva--ok { background: var(--ok-soft); color: var(--ok-ink); }
.eva--warn { background: var(--warn-soft); color: var(--warn-ink); }
.eva--danger { background: var(--danger-soft); color: var(--danger-ink); }

.tipo-cita { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-12); font-weight: 600; color: var(--text-secondary); white-space: nowrap; }
.tipo-cita::before { content: ""; width: 8px; height: 8px; border-radius: 3px; background: var(--tc); flex: 0 0 auto; }

.badge--gold { background: var(--mt-gold-100); color: #8a5c00; }
[data-theme="dark"] .badge--gold { color: #f7d27a; }
.badge--accent { background: var(--accent-soft); color: var(--accent-ink); }

.btn--primary { background: var(--mt-azul-600); border-color: var(--mt-azul-600); box-shadow: 0 6px 14px -8px rgba(11, 108, 240, 0.6); }
.btn--primary:hover:not(:disabled) { background: var(--mt-azul-700); border-color: var(--mt-azul-700); }
[data-theme="dark"] .btn--primary { background: var(--mt-azul-700); border-color: var(--mt-azul-500); }
[data-theme="dark"] .btn--primary:hover:not(:disabled) { background: var(--mt-azul-500); }
.btn--accent { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn--accent:hover:not(:disabled) { background: var(--mt-turquesa-600); border-color: var(--mt-turquesa-600); }
.btn--soft { background: var(--brand-soft); color: var(--brand-ink); }
@media (max-width: 640px) {
  .page-head__actions { width: 100%; }
  .page-head__actions .btn { flex: 1 1 auto; }
  .btn { height: 40px; }
  .btn--sm { height: 34px; }
}
@media (pointer: coarse) {
  .iconbtn { width: 42px; height: 42px; }
  .chip { padding: 7px 13px; }
  .segmented button { padding: 8px 13px; }
}

.vacio { display: flex; align-items: center; gap: var(--s-2); padding: var(--s-4); color: var(--text-muted); font-size: var(--fs-13); }
.nota-demo { display: flex; align-items: flex-start; gap: var(--s-2); padding: 9px 12px; border-radius: var(--r); background: var(--brand-soft); color: var(--brand-ink); font-size: var(--fs-12); line-height: 1.45; }
.nota-demo svg { flex: 0 0 auto; margin-top: 2px; }
.doc-listo { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3); border: 1px solid var(--border); border-radius: var(--r); background: var(--bg-muted); }
.doc-listo__ico { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; background: var(--brand-soft); color: var(--brand); flex: 0 0 auto; }
.doc-listo b { display: block; font-size: var(--fs-13); word-break: break-all; }
.doc-listo span { font-size: var(--fs-12); color: var(--text-muted); }

/* Modales y paneles en el teléfono: hoja que sube desde abajo */
@media (max-width: 640px) {
  .modal-backdrop { place-items: end center; padding: 0; }
  .modal { max-width: none !important; width: 100%; border-radius: 20px 20px 0 0; max-height: calc(100vh - 40px); max-height: calc(100dvh - 40px); padding-bottom: env(safe-area-inset-bottom, 0px); animation: subeHoja 260ms cubic-bezier(0.22, 1, 0.36, 1) both; }
  .modal__foot .btn { flex: 1 1 auto; }
  .modal__foot .u-right { margin-left: 0; }
}
@keyframes subeHoja { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }

/* Recorrido */
.tour { background: linear-gradient(160deg, #2f86f6 0%, #0a5ed6 100%); }
.tour__num { color: #d6e9ff; }
.tour .btn--primary { background: #fff; color: var(--mt-azul-600); border-color: #fff; }
.tour .btn--primary:hover { background: #e7f1ff; }
.tour-foco { outline: 3px solid var(--brand) !important; outline-offset: 4px; border-radius: var(--r-lg); animation: foco 1.6s ease-in-out 2; }
@keyframes foco { 0%, 100% { outline-color: var(--brand); } 50% { outline-color: rgba(11, 108, 240, 0.25); } }
body.en-tour .view__inner { padding-bottom: 240px; }

/* Formularios */
.form-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 860px) { .form-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .form-grid--3 { grid-template-columns: minmax(0, 1fr); } }
.field .textarea { min-height: 76px; }
.check-lista { display: flex; flex-direction: column; gap: var(--s-2); }
.opciones { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.opcion { position: relative; }
.opcion input { position: absolute; opacity: 0; pointer-events: none; }
.opcion span { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: var(--r); border: 1px solid var(--border-strong); font-size: var(--fs-13); font-weight: 600; color: var(--text-secondary); cursor: pointer; background: var(--bg-surface); }
.opcion input:checked + span { background: var(--mt-azul-600); border-color: var(--mt-azul-600); color: #fff; }
.opcion input:focus-visible + span { outline: 2px solid var(--brand); outline-offset: 2px; }

@media print {
  .tabbar, .tour, .notif-panel { display: none !important; }
}