:root {
  --bg: #072a5e;
  --bg-soft: #0b438b;
  --card: #ffffff;
  --primary: #0878d1;
  --primary-dark: #055ca5;
  --accent: #f4bf20;
  --text: #0f172a;
  --muted: #64748b;
  --border: #e2e8f0;
  --danger: #dc2626;
  --success: #16a34a;
  --warning: #d97706;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: #f1f5f9;
  color: var(--text);
  line-height: 1.5;
}

a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---------- Login ---------- */
.login-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--bg) 0%, var(--bg-soft) 100%);
}
.login-card {
  background: var(--card);
  width: 100%;
  max-width: 380px;
  padding: 2.5rem;
  border-radius: 14px;
  box-shadow: 0 20px 50px rgba(0,0,0,.3);
}
.login-card h1 {
  font-size: 1.6rem;
  margin-bottom: .25rem;
  text-align: center;
}
.login-card .sub {
  text-align: center;
  color: var(--muted);
  font-size: .9rem;
  margin-bottom: 1.5rem;
}
.login-security-note { color:var(--muted);font-size:.72rem;text-align:center;line-height:1.4;margin-top:1rem; }

/* ---------- Formularios ---------- */
.field { margin-bottom: 1rem; }
.field label {
  display: block;
  font-size: .82rem;
  font-weight: 600;
  color: var(--muted);
  margin-bottom: .35rem;
}
.field input, .field select {
  width: 100%;
  padding: .7rem .85rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: .95rem;
}
.field input:focus, .field select:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(37,99,235,.15);
}
.btn {
  display: inline-block;
  width: 100%;
  padding: .75rem;
  background: var(--primary);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: .95rem;
  font-weight: 600;
  cursor: pointer;
}
.btn:hover { background: var(--primary-dark); }
.btn-sm { width: auto; padding: .45rem .9rem; font-size: .85rem; }

.alert {
  padding: .7rem .9rem;
  border-radius: 8px;
  font-size: .88rem;
  margin-bottom: 1rem;
}
.alert-error { background: #fef2f2; color: var(--danger); border: 1px solid #fecaca; }
.identity-status { display:block; margin-top:.35rem; color:var(--muted); font-size:.78rem; }
.identity-status.is-ok { color:#15803d; }
.identity-status.is-warning { color:var(--warning); }
.identity-status.is-error { color:var(--danger); font-weight:600; }
.onboarding-link { border:0; background:none; color:var(--primary); padding:.3rem 0; cursor:pointer; font-weight:600; }
.onboarding-flow { display:flex; align-items:stretch; gap:.55rem; margin:0 0 1rem; overflow-x:auto; }
.onboarding-flow div { min-width:150px; flex:1; padding:.7rem .8rem; border:1px solid var(--border); border-radius:10px; background:#fff; color:#334155; font-size:.82rem; font-weight:600; position:relative; }
.onboarding-flow div:not(:last-child)::after { content:'→'; position:absolute; right:-.47rem; color:var(--muted); }
.onboarding-flow span { color:var(--success); margin-right:.35rem; }
.mdm-device-head { margin:1rem 0; padding:1rem 1.2rem; background:#fff; border:1px solid var(--border); border-radius:12px; }
.mdm-device-head h2 { margin:0; }.mdm-tags { display:flex;gap:.4rem;flex-wrap:wrap;margin-top:.55rem; }
.mdm-offline { display:flex;flex-direction:column;gap:.2rem;padding:.85rem 1rem;margin-bottom:1rem;background:#fee2e2;color:#991b1b;border:1px solid #fecaca;border-radius:12px; }
.mdm-section { padding:1.2rem;margin-bottom:1rem; }.mdm-section-title { display:flex;justify-content:space-between;gap:1rem;align-items:flex-start;margin-bottom:.8rem; }.mdm-section-title p,.mdm-safe-note { color:var(--muted);font-size:.82rem;margin-top:.2rem; }
.mdm-signal-grid { display:grid;grid-template-columns:140px 1fr;gap:.45rem 1rem;font-size:.88rem; }.mdm-signal-grid span { color:var(--muted); }
.mdm-policy-group { border-top:1px solid var(--border);padding:.9rem 0 .2rem; }.mdm-policy-group h4 { color:#475569;font-size:.78rem;text-transform:uppercase;letter-spacing:.08em;margin-bottom:.3rem; }
.mdm-policy-row,.mdm-consent { display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.55rem 0;cursor:pointer; }.mdm-policy-row span,.mdm-consent span { display:flex;flex-direction:column; }.mdm-policy-row small,.mdm-consent small { color:var(--muted);font-size:.74rem;font-weight:400; }.mdm-policy-row input { appearance:none;width:42px;height:24px;border-radius:999px;background:#cbd5e1;position:relative;flex:0 0 auto;transition:.2s; }.mdm-policy-row input::after { content:'';position:absolute;width:18px;height:18px;border-radius:50%;background:#fff;left:3px;top:3px;box-shadow:0 1px 3px #64748b;transition:.2s; }.mdm-policy-row input:checked { background:var(--primary); }.mdm-policy-row input:checked::after { transform:translateX(18px); }
.mdm-consent { justify-content:flex-start;background:#eff6ff;border:1px solid #bfdbfe;border-radius:10px;padding:.8rem;margin:.8rem 0; }.mdm-consent input { width:auto; }
.mdm-actions { display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.8rem; }.mdm-apply { margin:0 0 1rem; }.mdm-empty { color:var(--muted);padding:1rem;text-align:center; }.mdm-history { display:flex;flex-direction:column;border-bottom:1px solid var(--border);padding:.5rem 0; }.mdm-history small { color:var(--muted); }
.mdm-danger { border:1px solid #fecaca;background:#fff7f7;border-radius:12px;padding:1.2rem;margin:1rem 0; }.mdm-danger>p { color:#991b1b;font-size:.85rem;margin:.25rem 0 .8rem; }.mdm-danger-form { display:grid;grid-template-columns:minmax(220px,1fr) auto;gap:.6rem;align-items:center;margin-top:.7rem; }.mdm-danger-form input[type=text],.mdm-danger-form input:not([type]) { padding:.6rem;border:1px solid #fca5a5;border-radius:8px; }.mdm-danger-form label { grid-column:1/-1;font-size:.8rem;color:#991b1b; }
button:disabled { opacity:.5;cursor:not-allowed; }

/* ---------- Layout panel ---------- */
.layout { display: flex; min-height: 100vh; }
.sidebar {
  width: 264px;
  background: var(--bg);
  color: #cbd5e1;
  padding: 1rem 0 1.5rem;
  flex-shrink: 0;
}
.sidebar .brand {
  color: #fff;
  font-size: 1.25rem;
  font-weight: 700;
  padding: 0 1.1rem 1rem;
  border-bottom: 1px solid rgba(255,255,255,.12);
  margin-bottom: .4rem;
  display: flex;
  align-items: center;
  gap: .7rem;
  letter-spacing: -.03em;
}
.sidebar .brand b { color: #7cc8ff; }
.sidebar .brand small { display:block;color:#9fb7d4;font-size:.58rem;letter-spacing:.08em;text-transform:uppercase;margin-top:-.1rem; }
.brand-mark { width:36px;height:36px;border-radius:10px;background:linear-gradient(145deg,#168be0 55%,var(--accent) 56%);display:grid;place-items:center;color:#fff;font-size:1.45rem; }
.nav-group-label { padding:.85rem 1.25rem .3rem;color:#7897bb;font-size:.65rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase; }
.sidebar nav a {
  display: flex;
  align-items: center;
  gap: .7rem;
  color: #cbd5e1;
  padding: .52rem 1.1rem;
  margin: .08rem .6rem;
  border-radius: 8px;
  font-size: .86rem;
}
.sidebar nav a:hover, .sidebar nav a.active {
  background: rgba(255,255,255,.11);
  color: #fff;
  text-decoration: none;
}
.sidebar nav a.active { box-shadow: inset 3px 0 0 var(--accent); }
.nav-icon { width:1.3rem;text-align:center;font-size:.95rem; }
.sidebar nav a > span:nth-child(2) { flex: 1; min-width: 0; }
.nav-badge {
  margin-left: auto;
  background: #ef4444;
  color: #fff;
  font-size: .65rem;
  font-weight: 700;
  min-width: 1.15rem;
  height: 1.15rem;
  padding: 0 .35rem;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.sc-layout {
  display: grid;
  grid-template-columns: minmax(280px, 340px) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  flex: 1 1 auto;
  height: calc(100vh - 250px);
  min-height: 420px;
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
  margin-top: .75rem;
}
.sc-list, .sc-thread {
  min-height: 0;
  min-width: 0;
  height: 100%;
  overflow: hidden;
}
.sc-list { border-right: 1px solid var(--border); background: #f8fafc; display: flex; flex-direction: column; }
.sc-list-head { padding: .75rem 1rem; font-weight: 700; font-size: .82rem; color: var(--muted); border-bottom: 1px solid var(--border); display: flex; flex-direction: column; gap: .55rem; flex: none; }
.sc-list-head span { text-transform: uppercase; letter-spacing: .04em; }
.sc-list-head input { width: 100%; padding: .45rem .65rem; border: 1px solid var(--border); border-radius: 8px; font-size: .85rem; font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--text); }
#sc-list-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.sc-item {
  display: block; width: 100%; text-align: left; background: transparent; border: 0;
  border-bottom: 1px solid var(--border); padding: .85rem 1rem; cursor: pointer; color: inherit; font: inherit;
}
.sc-item:hover { background: #eef2ff; }
.sc-item.active { background: #dbeafe; }
.sc-item.unread { background: #fff7ed; }
.sc-item-top { display: flex; justify-content: space-between; align-items: center; gap: .5rem; font-weight: 700; font-size: .9rem; }
.sc-item-tenant, .sc-item-time { font-size: .72rem; color: var(--muted); margin-top: .15rem; }
.sc-item-preview { font-size: .78rem; color: #475569; margin-top: .2rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc-unread {
  background: #ef4444; color: #fff; font-size: .68rem; font-weight: 700; min-width: 1.2rem; height: 1.2rem;
  border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; padding: 0 .35rem;
}
.sc-thread { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: #e2e8f0; }
.sc-thread-head { padding: .85rem 1rem; background: #fff; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: .7rem; flex: none; }
.sc-back { display: none; border: 0; background: #e2e8f0; color: var(--text); border-radius: 8px; padding: .35rem .6rem; font-weight: 700; cursor: pointer; }
.sc-thread-meta { font-size: .78rem; color: var(--muted); }
#sc-thread-ui {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
  overflow: hidden;
}
#sc-thread-ui[hidden] { display: none !important; }
#sc-placeholder { flex: 1; }
.sc-msgs { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 1rem; display: flex; flex-direction: column; gap: .55rem; }
.sc-bubble { max-width: 78%; padding: .65rem .85rem; border-radius: 14px; font-size: .9rem; line-height: 1.4; }
.sc-bubble.customer { background: #fff; align-self: flex-start; border-bottom-left-radius: 4px; }
.sc-bubble.staff { background: #2563eb; color: #fff; align-self: flex-end; border-bottom-right-radius: 4px; }
.sc-bubble-name { font-size: .68rem; font-weight: 700; opacity: .75; margin-bottom: .15rem; }
.sc-bubble time { display: block; font-size: .65rem; opacity: .7; margin-top: .25rem; }
.sc-composer {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  padding: .75rem;
  background: #fff;
  border-top: 1px solid var(--border);
  flex: 0 0 auto;
  z-index: 2;
}
.sc-composer input[type=text] { flex: 1; min-width: 0; padding: .65rem .8rem; border: 1px solid var(--border); border-radius: 10px; font-size: .92rem; }
.sc-composer .btn { width: auto; flex: none; }
.sc-thread-head { justify-content: flex-start; }
.sc-thread-actions { margin-left: auto; display: flex; gap: .4rem; }
.sc-icon-btn {
  flex: none; width: 40px; height: 40px; border: 1px solid var(--border); background: #f8fafc;
  border-radius: 10px; cursor: pointer; font-size: 1.1rem; line-height: 1;
}
.sc-icon-btn:hover { background: #e2e8f0; }
.sc-call-btn, .pc-chat-head-actions .pc-chat-icon.pc-call-btn {
  width: auto; min-width: 40px; padding: 0 .7rem; display: inline-flex; align-items: center; gap: .35rem;
  font-size: .82rem; font-weight: 700;
}
.sc-file-chip {
  display: none; width: 100%; order: -1; font-size: .78rem; background: #eff6ff; border: 1px solid #bfdbfe;
  border-radius: 8px; padding: .35rem .6rem; align-items: center; justify-content: space-between; gap: .5rem;
}
.sc-file-chip.on { display: flex; }
.sc-file-chip button { border: 0; background: transparent; cursor: pointer; font-weight: 700; }
.chat-file { margin-top: .35rem; display: grid; gap: .35rem; }
.chat-file-img { max-width: min(280px, 100%); max-height: 320px; width: auto; border-radius: 10px; display: block; cursor: zoom-in; }
.chat-file-video { max-width: min(280px, 100%); max-height: 240px; border-radius: 10px; background: #000; display: block; }
.chat-file-audio { width: min(260px, 100%); }
.chat-file-open { border: 0; background: transparent; padding: 0; cursor: zoom-in; text-align: left; color: inherit; font: inherit; }
.chat-file-actions { display: flex; flex-wrap: wrap; gap: .45rem; align-items: center; }
.chat-file-dl, .chat-file-doc { font-size: .75rem; font-weight: 700; text-decoration: underline; color: inherit; }
.sc-bubble.staff .chat-file-dl, .sc-bubble.staff .chat-file-doc, .sc-bubble.staff .chat-file-open { color: #fff; }
.sc-bubble.customer .chat-file-dl, .sc-bubble.customer .chat-file-doc { color: #1d4ed8; }
.pc-chat-bubble.me .chat-file-dl, .pc-chat-bubble.me .chat-file-doc, .pc-chat-bubble.me .chat-file-open { color: #fff; }
.pc-chat-bubble.them .chat-file-dl, .pc-chat-bubble.them .chat-file-doc { color: #1d4ed8; }
.chat-phone {
  display: inline; background: transparent; border: 0; padding: 0; margin: 0;
  font: inherit; color: inherit; cursor: pointer; font-weight: 800;
  text-decoration: underline; text-underline-offset: 2px;
}
.sc-bubble.customer .chat-phone, .pc-chat-bubble.them .chat-phone { color: #1d4ed8; }
.sc-bubble.staff .chat-phone, .pc-chat-bubble.me .chat-phone { color: #fff; }
.chat-phone-sheet {
  position: fixed; inset: 0; z-index: 245; background: rgba(2,6,23,.55);
  display: flex; align-items: center; justify-content: center; padding: 1rem;
}
.chat-phone-sheet[hidden] { display: none !important; }
.chat-phone-card {
  background: #fff; border-radius: 16px; padding: 1.35rem 1.25rem 1.1rem;
  text-align: center; max-width: 340px; width: 100%;
  box-shadow: 0 18px 40px rgba(15,23,42,.28);
}
.chat-phone-q { font-weight: 700; margin: 0 0 1rem; color: #0f172a; line-height: 1.35; }
.chat-phone-q strong { display: inline-block; word-break: break-all; }
.chat-phone-actions { display: flex; gap: .55rem; justify-content: center; flex-wrap: wrap; margin-bottom: .7rem; }
.chat-phone-call, .chat-phone-wa {
  flex: 1; min-width: 120px; border-radius: 999px; padding: .8rem 1rem;
  font-weight: 800; text-decoration: none; color: #fff; font-size: .95rem;
}
.chat-phone-call:hover, .chat-phone-wa:hover { text-decoration: none; filter: brightness(1.05); }
.chat-phone-call { background: #16a34a; }
.chat-phone-wa { background: #128c7e; }
.chat-phone-cancel {
  border: 0; background: transparent; color: #64748b; font-weight: 700;
  cursor: pointer; padding: .35rem .6rem; font-size: .88rem;
}
.chat-lightbox {
  position: fixed; inset: 0; z-index: 240; background: rgba(2,6,23,.92);
  display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 1rem;
}
.chat-lightbox[hidden] { display: none !important; }
.chat-lightbox-body { max-width: 100%; max-height: 82vh; display: flex; align-items: center; justify-content: center; }
.chat-lightbox img, .chat-lightbox video { max-width: min(96vw, 1400px); max-height: 82vh; object-fit: contain; }
.chat-lightbox iframe { width: min(96vw, 1100px); height: 82vh; border: 0; background: #fff; border-radius: 8px; }
.chat-lightbox-close {
  position: absolute; top: .7rem; right: .9rem; background: transparent; border: 0; color: #fff;
  font-size: 2rem; cursor: pointer; line-height: 1;
}
.chat-lightbox-dl {
  position: absolute; top: 1rem; left: 1rem; color: #fff; font-weight: 700; background: #2563eb;
  padding: .45rem .8rem; border-radius: 8px; text-decoration: none;
}
.chat-lightbox-fallback { color: #fff; }
.rtc-stage {
  position: fixed; inset: 0; z-index: 250; background: #020617;
  display: flex; flex-direction: column; overflow: hidden; height: 100%; height: 100dvh;
}
.rtc-stage[hidden], .rtc-incoming[hidden] { display: none !important; }
.rtc-remote {
  flex: 1 1 auto; min-height: 0; width: 100%; object-fit: contain; background: #000;
}
.rtc-placeholder {
  flex: 1 1 auto; min-height: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  color: #fff; font-size: 1.35rem; font-weight: 700; text-align: center; padding: 2rem;
}
.rtc-timer, .rtc-timer-big {
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  letter-spacing: .08em;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.rtc-timer { font-size: 1.55rem; color: #f8fafc; }
.rtc-timer-big { font-size: 3.2rem; margin-top: .75rem; color: #fff; }
.rtc-bar-meta { display: flex; flex-direction: column; align-items: center; gap: .1rem; }
.rtc-stage:not(.rtc-audio) .rtc-placeholder {
  position: absolute; top: 0; left: 0; right: 0; z-index: 3;
  flex: none; min-height: 0; height: auto;
  background: linear-gradient(to bottom, rgba(2,6,23,.6), transparent);
  pointer-events: none; padding: 1rem 4.5rem .9rem;
}
.rtc-stage:not(.rtc-audio) #rtc-ph-title { font-size: .95rem; opacity: .92; }
.rtc-stage:not(.rtc-audio) .rtc-timer-big {
  margin-top: .2rem; font-size: 1.8rem;
  text-shadow: 0 2px 10px rgba(0,0,0,.75);
}
.rtc-local {
  position: absolute; right: 1rem; top: 4.2rem; width: 120px; height: 160px; object-fit: cover;
  border-radius: 12px; border: 2px solid #fff; transform: scaleX(-1); background: #111; z-index: 2;
  pointer-events: none;
}
.rtc-stage.rtc-audio .rtc-remote {
  position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none;
}
#rtc-remote-audio { position: absolute; width: 0; height: 0; opacity: 0; }
.rtc-close {
  position: fixed; top: 12px; right: 12px; z-index: 260;
  width: 48px; height: 48px; border: 0; border-radius: 50%;
  background: #0f172a; color: #fff; font-size: 2rem; line-height: 1; cursor: pointer;
  box-shadow: 0 4px 16px rgba(0,0,0,.4);
}
.rtc-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 260;
  display: flex; justify-content: center; align-items: center; gap: 1rem; flex-wrap: wrap;
  padding: .9rem 1.2rem calc(.9rem + env(safe-area-inset-bottom, 0px));
  background: #0f172a; color: #fff;
}
.rtc-bar #rtc-label { font-weight: 700; }
.rtc-hang, .rtc-accept {
  border: 0; border-radius: 999px; padding: .85rem 1.8rem; font-weight: 800; cursor: pointer; color: #fff;
  font-size: 1rem; min-width: 140px;
}
.rtc-hang { background: #dc2626; box-shadow: 0 6px 18px rgba(220,38,38,.45); }
.rtc-accept { background: #16a34a; }
.rtc-incoming {
  position: fixed; inset: 0; z-index: 260; background: rgba(2,6,23,.72);
  display: flex; align-items: center; justify-content: center; padding: 1rem;
}
.rtc-incoming-card { background: #fff; border-radius: 16px; padding: 1.5rem; text-align: center; max-width: 340px; width: 100%; }
.rtc-incoming-card p { font-weight: 700; margin: 0 0 1rem; }
.rtc-incoming-actions { display: flex; gap: .6rem; justify-content: center; }
.sc-empty { color: var(--muted); text-align: center; padding: 2rem 1rem; font-size: .9rem; }
.sc-toast {
  position: fixed; right: 1.1rem; bottom: 1.1rem; z-index: 80;
  background: #0f172a; color: #fff; border-radius: 12px; box-shadow: 0 10px 30px rgba(15,23,42,.25); max-width: 320px;
}
.sc-toast a { display: block; color: #fff; padding: .85rem 1rem; font-weight: 600; font-size: .88rem; }
.sc-toast a:hover { text-decoration: none; color: #f4bf20; }
.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar {
  background: #fff;
  border-bottom: 1px solid var(--border);
  padding: .9rem 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.page-heading { display:flex;flex-direction:column; }
.page-heading span { color:var(--muted);font-size:.72rem;font-weight:400; }
.content { padding: 1.5rem; }

/* ---------- Tarjetas de métricas ---------- */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; }
.metric {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.25rem;
}
.metric { box-shadow:0 4px 14px rgba(15,23,42,.04); }
.metric .label { color: var(--muted); font-size: .82rem; text-transform: uppercase; letter-spacing: .03em; }
.metric .value { font-size: 1.9rem; font-weight: 700; margin-top: .35rem; }

/* ---------- Tablas ---------- */
.table-wrap { background: #fff; border: 1px solid var(--border); border-radius: 12px; overflow-x: auto; margin-top: 1rem; }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: .75rem 1rem; font-size: .9rem; }
th { background: #f8fafc; color: var(--muted); font-weight: 600; border-bottom: 1px solid var(--border); }
td { border-bottom: 1px solid var(--border); }
tr:last-child td { border-bottom: none; }

.badge { display: inline-block; padding: .2rem .55rem; border-radius: 999px; font-size: .75rem; font-weight: 600; }
.badge-active  { background: #dcfce7; color: var(--success); }
.badge-locked  { background: #fee2e2; color: var(--danger); }
.badge-pending { background: #fef3c7; color: var(--warning); }

/* ---------- Rejillas reutilizables (responsive) ---------- */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.split-2   { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; align-items: start; }
.split-1-2 { display: grid; grid-template-columns: 1fr 2fr; gap: 1.5rem; align-items: start; }

/* Botón hamburguesa (solo visible en móvil) */
.menu-btn {
  display: none;
  background: none;
  border: none;
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  color: var(--text);
  padding: .1rem .4rem;
  margin-right: .5rem;
}
.nav-backdrop { display: none; }

/* ---------- MÓVIL ---------- */
@media (max-width: 820px) {
  .menu-btn { display: inline-block; }

  html, body { overflow-x: hidden; }
  .content { min-width: 0; max-width: 100vw; }

  .sidebar {
    position: fixed;
    top: 0; left: 0;
    height: 100vh;
    width: 240px;
    z-index: 60;
    transform: translateX(-100%);
    transition: transform .25s ease;
    overflow-y: auto;
    box-shadow: 4px 0 20px rgba(0,0,0,.3);
  }
  body.nav-open .sidebar { transform: translateX(0); }

  .nav-backdrop {
    position: fixed; inset: 0;
    background: rgba(0,0,0,.5);
    z-index: 55;
  }
  body.nav-open .nav-backdrop { display: block; }

  .topbar { position: sticky; top: 0; z-index: 30; }
  .content { padding: 1rem; }

  .form-grid, .split-2, .split-1-2 { grid-template-columns: 1fr; }
  .mdm-section-title { flex-direction:column; }.mdm-danger-form { grid-template-columns:1fr; }.mdm-signal-grid { grid-template-columns:110px 1fr; }

  /* Los formularios angostos ocupan todo el ancho */
  .table-wrap[style*="max-width"] { max-width: 100% !important; }

  /* Barras de acciones: se apilan */
  .toolbar { flex-direction: column; align-items: stretch !important; }
  .toolbar form { flex-wrap: nowrap; width: 100%; }
  .toolbar form input, .toolbar form select { flex: 1 1 auto; min-width: 0 !important; }

  /* Botones a lo ancho para el dedo */
  .content .btn-sm { width: 100%; text-align: center; }
  .toolbar form .btn-sm { flex: 0 0 auto; width: auto; }

  /* En la topbar, ocultar el nombre del usuario (dejar solo Salir) */
  .topbar .user-name { display: none; }
}

/* Barra de acciones (buscador + botón) */
.toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}
.toolbar form { display: flex; gap: .5rem; }

/* Indicador de pasos */
.stepper { display: flex; gap: .5rem; margin-bottom: 1.25rem; flex-wrap: wrap; }
.stepper .step {
  display: flex; align-items: center; gap: .4rem;
  font-size: .85rem; color: var(--muted);
  padding: .35rem .75rem; border-radius: 999px; background: #fff; border: 1px solid var(--border);
}
.stepper .step .dot {
  width: 22px; height: 22px; border-radius: 50%;
  background: #e2e8f0; color: #64748b;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .78rem; font-weight: 700;
}
.stepper .step.active { border-color: var(--primary); color: var(--primary); font-weight: 600; }
.stepper .step.active .dot { background: var(--primary); color: #fff; }
.stepper .step.done .dot { background: var(--success); color: #fff; }
.muted-text { color: var(--muted); }

/* Autocompletar de clientes */
.autocomplete { position: relative; flex: 1; min-width: 0; }
.ac-list {
  position: absolute; top: 100%; left: 0; right: 0;
  background: #fff; border: 1px solid var(--border); border-radius: 8px;
  margin-top: 4px; box-shadow: 0 10px 28px rgba(0,0,0,.14);
  z-index: 60; max-height: 320px; overflow-y: auto;
}
.ac-item { padding: .6rem .8rem; cursor: pointer; border-bottom: 1px solid var(--border); font-size: .92rem; }
.ac-item:last-child { border-bottom: none; }
.ac-item:hover, .ac-item.active { background: #f1f5f9; }
.ac-item small { color: var(--muted); }
.ac-empty { padding: .6rem .8rem; color: var(--muted); font-size: .9rem; }

/* ---------- Módulos CRM ---------- */
.welcome-panel { background:linear-gradient(120deg,#072a5e,#0c65ae);color:#fff;border-radius:16px;padding:1.5rem 1.7rem;margin-bottom:1.35rem;display:flex;justify-content:space-between;gap:1rem;align-items:center;box-shadow:0 12px 30px rgba(7,42,94,.17); }
.welcome-panel h1 { font-size:1.45rem;margin-bottom:.2rem; }
.welcome-panel p { color:#c7ddf3;font-size:.9rem; }
.welcome-panel .btn { width:auto;background:var(--accent);color:#3f3200;white-space:nowrap;font-weight:700; }
.welcome-panel .btn:hover { background:#f0c020;color:#3f3200; }
.welcome-panel .btn.btn-welcome-outline {
  background:rgba(255,255,255,.14);
  color:#fff;
  border:1px solid rgba(255,255,255,.55);
  box-shadow:0 1px 2px rgba(7,42,94,.2);
}
.welcome-panel .btn.btn-welcome-outline:hover { background:rgba(255,255,255,.26);color:#fff; }
.welcome-panel .btn.btn-welcome-teal {
  background:#2dd4bf;
  color:#042f2e;
  border:1px solid rgba(255,255,255,.35);
}
.welcome-panel .btn.btn-welcome-teal:hover { background:#5eead4;color:#042f2e; }

/* Visor web Super Elba dentro de EMSLOCK */
.se-webviewer { display:flex; flex-direction:column; gap:.75rem; min-height:calc(100vh - 148px); }
.se-webviewer-bar { display:flex; align-items:center; gap:.65rem; flex-wrap:wrap; background:#fff; border:1px solid var(--border); border-radius:12px; padding:.65rem .85rem; }
.se-webviewer-title { flex:1; min-width:160px; font-size:.95rem; }
.se-webviewer-back { background:#0f766e !important; color:#fff !important; border-color:#0f766e !important; }
.se-webviewer-back:hover { background:#0d9488 !important; color:#fff !important; }
.se-webviewer-external { background:#fff !important; color:#0f766e !important; border:1px solid #99f6e4 !important; }
.se-webviewer-external:hover { background:#ecfdf5 !important; }
.se-webviewer-frame { flex:1; width:100%; min-height:520px; border:1px solid var(--border); border-radius:12px; background:#fff; }
@media (max-width: 768px) {
  .se-webviewer { min-height:calc(100vh - 120px); }
  .se-webviewer-frame { min-height:420px; }
}
.module-grid { display:grid;grid-template-columns:repeat(auto-fit,minmax(225px,1fr));gap:1rem; }
.module-card { display:flex;gap:.9rem;background:#fff;border:1px solid var(--border);border-radius:13px;padding:1.05rem;color:var(--text);transition:.18s ease; }
.module-card:hover { text-decoration:none;transform:translateY(-2px);box-shadow:0 9px 24px rgba(15,23,42,.08);border-color:#b8d9f2; }
.module-card .module-icon { width:42px;height:42px;border-radius:11px;background:#eaf5fd;display:grid;place-items:center;font-size:1.15rem;flex:0 0 auto; }
.module-card strong { display:block;font-size:.92rem;margin-bottom:.2rem; }
.module-card small { color:var(--muted);line-height:1.35;display:block; }
.section-title { font-size:1.02rem;margin:1.45rem 0 .75rem; }
.empty-state { background:#fff;border:1px dashed #bfd0e1;border-radius:14px;padding:2.3rem 1.5rem;text-align:center;color:var(--muted); }
.empty-state .empty-icon { font-size:2.2rem;margin-bottom:.55rem; }
.empty-state h2 { color:var(--text);font-size:1.1rem;margin-bottom:.35rem; }
.status-dot { width:8px;height:8px;border-radius:50%;display:inline-block;margin-right:.35rem;background:var(--success); }
.map-card { background:#fff;border:1px solid var(--border);border-radius:14px;overflow:hidden;min-height:360px; }
.map-card iframe { width:100%;height:320px;border:0;display:block; }
.map-caption { display:flex;justify-content:space-between;gap:1rem;align-items:center;padding:.8rem 1rem;color:var(--muted);font-size:.82rem; }
.map-unavailable { min-height:360px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:2rem;color:var(--muted); }
.map-unavailable span { font-size:2.5rem;margin-bottom:.5rem; }
.map-unavailable strong { color:var(--text);margin-bottom:.25rem; }
.access-detail { display:flex;flex-direction:column;gap:.12rem;padding:.6rem 0;border-bottom:1px solid var(--border); }
.access-detail:last-child { border-bottom:0; }
.access-detail span { color:var(--muted);font-size:.72rem;text-transform:uppercase;letter-spacing:.04em; }
code { background:#eef2f7;color:#1e3a5f;border-radius:5px;padding:.12rem .35rem;font-size:.82rem; }

/* ---------- Guía de protección MDM ---------- */
.guide-hero { background:linear-gradient(120deg,#062551,#0b5d9b);color:#fff;border-radius:17px;padding:1.7rem;margin-bottom:1rem;display:flex;align-items:center;justify-content:space-between;gap:2rem;box-shadow:0 14px 34px rgba(7,42,94,.18); }
.guide-hero h1 { font-size:1.55rem;margin:.25rem 0; }
.guide-hero p { color:#cfe4f5;max-width:720px; }
.guide-kicker { color:#f5cc4d;font-size:.68rem;font-weight:800;letter-spacing:.12em; }
.guide-status { background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.17);border-radius:12px;padding:1rem;min-width:230px; }
.guide-status strong,.guide-status small { display:block; }.guide-status small { color:#cfe4f5;margin-top:.3rem;line-height:1.35; }
.notice-critical,.notice-warning { border-radius:12px;padding:1rem 1.15rem;margin:1rem 0; }
.notice-critical { background:#fff7ed;border:1px solid #fed7aa;color:#7c2d12; }.notice-warning { background:#fffbeb;border:1px solid #fde68a;color:#78350f; }
.notice-critical p,.notice-warning p { margin-top:.25rem; }
.guide-nav { position:sticky;top:71px;z-index:20;background:#fff;border:1px solid var(--border);border-radius:12px;padding:.6rem;display:flex;gap:.35rem;overflow-x:auto;margin:1rem 0;box-shadow:0 5px 18px rgba(15,23,42,.05); }
.guide-nav a { white-space:nowrap;padding:.42rem .72rem;border-radius:7px;font-size:.78rem;font-weight:600; }.guide-nav a:hover { background:#eaf5fd;text-decoration:none; }
.guide-section { display:grid;grid-template-columns:48px 1fr;gap:1rem;padding:1.4rem 0;border-bottom:1px solid var(--border);scroll-margin-top:140px; }
.guide-section h2 { font-size:1.25rem;margin:.2rem 0 1rem; }.guide-section h3 { font-size:.95rem;margin-bottom:.35rem; }
.guide-number { width:42px;height:42px;display:grid;place-items:center;border-radius:12px;background:#07366f;color:#fff;font-size:1.1rem;font-weight:800; }
.guide-grid { display:grid;gap:1rem; }.guide-grid.three { grid-template-columns:repeat(3,1fr); }.guide-grid.two { grid-template-columns:repeat(2,1fr); }
.guide-card { background:#fff;border:1px solid var(--border);border-radius:13px;padding:1.15rem; }.guide-card>span { font-size:1.5rem;display:block;margin-bottom:.4rem; }.guide-card p,.guide-card li { color:var(--muted);font-size:.86rem; }.guide-card ul { padding-left:1.1rem;margin-top:.5rem; }.guide-card.good { border-top:4px solid var(--success); }.guide-card.bad { border-top:4px solid var(--danger); }
.guide-callout { margin-top:1rem;border-left:4px solid var(--primary);background:#eaf5fd;border-radius:0 10px 10px 0;padding:.9rem 1rem; }.guide-callout p { color:#315674;margin-top:.2rem; }
.provider-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:1rem; }.provider-card { background:#fff;border:1px solid var(--border);border-radius:13px;padding:1.1rem;display:flex;flex-direction:column; }.provider-head { display:flex;gap:.7rem;align-items:center; }.provider-head>span { font-size:1.7rem; }.provider-head small { color:var(--muted); }.provider-card ol,.platform-tabs ol { padding-left:1.15rem;margin:.8rem 0;color:#475569;font-size:.84rem;flex:1; }.provider-card a,.platform-tabs a { font-size:.8rem;font-weight:600; }
.step-list { display:grid;gap:.65rem; }.step-item { background:#fff;border:1px solid var(--border);border-radius:11px;padding:1rem;display:grid;grid-template-columns:45px 1fr;gap:.8rem; }.step-item>b { width:40px;height:40px;border-radius:10px;background:#eaf5fd;color:var(--primary);display:grid;place-items:center; }.step-item p { color:var(--muted); }
.guide-check { background:#07366f;color:#fff;border-radius:13px;padding:1.1rem;margin-top:1rem; }.check-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem;margin-top:.75rem; }.check-grid label { color:#d6e7f5;font-size:.82rem; }
.platform-tabs { display:grid;grid-template-columns:repeat(3,1fr);gap:1rem; }.platform-tabs article { background:#fff;border:1px solid var(--border);border-radius:13px;padding:1.15rem;display:flex;flex-direction:column; }
.guide-lead { color:var(--muted);margin-bottom:.8rem; }.test-flow { display:flex;align-items:stretch;gap:.45rem; }.test-flow>div { flex:1;background:#fff;border:1px solid var(--border);border-radius:11px;padding:.85rem;text-align:center; }.test-flow span,.mora-flow span { width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:#07366f;color:#fff;font-weight:700;margin:0 auto .45rem; }.test-flow strong,.test-flow small { display:block; }.test-flow small { color:var(--muted);margin-top:.25rem;line-height:1.25; }.test-flow i { display:grid;place-items:center;color:var(--primary);font-style:normal; }
.mora-flow { display:grid;grid-template-columns:repeat(3,1fr);gap:.75rem;margin-bottom:1rem; }.mora-flow>div { background:#fff;border:1px solid var(--border);border-radius:12px;padding:1rem;text-align:center; }.mora-flow p { color:var(--muted);font-size:.82rem; }
.api-example { background:#0f172a;color:#dbeafe;border-radius:13px;padding:1.1rem;margin-top:1rem; }.api-example small { color:#94a3b8;display:block; }.api-example pre { background:#020617;border-radius:9px;padding:1rem;margin:.8rem 0;color:#a7f3d0;overflow-x:auto; }.api-example p { color:#cbd5e1;font-size:.84rem;margin-bottom:.5rem; }.api-example code { background:#1e293b;color:#fff; }.api-example a { color:#7dd3fc; }
.final-checklist { background:#fff;border:1px solid var(--border);border-radius:12px;padding:1rem;margin-top:1rem; }.final-checklist ol { display:grid;grid-template-columns:repeat(2,1fr);gap:.45rem 2rem;padding-left:1.3rem;color:#475569; }
.guide-footer { background:#fff;border:2px solid #f4bf20;border-radius:14px;padding:1.2rem;display:flex;justify-content:space-between;align-items:center;gap:1rem;margin:1.5rem 0; }.guide-footer p { color:var(--muted);margin-top:.25rem; }.guide-footer .btn { width:auto;white-space:nowrap; }
.btn:disabled { opacity:.48;cursor:not-allowed;filter:grayscale(.25); }
.license-flow { display:flex;align-items:stretch;gap:.45rem;background:#fff;border:1px solid var(--border);border-radius:13px;padding:1rem;overflow-x:auto; }
.license-flow>div { min-width:135px;flex:1;display:flex;align-items:center;gap:.55rem;font-size:.82rem;color:#334155; }
.license-flow b { width:28px;height:28px;flex:0 0 auto;display:grid;place-items:center;border-radius:50%;background:#07366f;color:#fff; }
.license-flow i { display:grid;place-items:center;color:var(--primary);font-style:normal; }
.inline-license-form { display:grid;gap:.4rem;min-width:190px;margin-top:.55rem; }
.inline-license-form input,.inline-license-form select { min-width:180px;padding:.45rem;border:1px solid var(--border);border-radius:7px; }

@media (max-width: 820px) {
  .welcome-panel { align-items:flex-start;flex-direction:column; }
  .welcome-panel .btn { width:100%;text-align:center; }
  .page-heading span { display:none; }
  .map-caption { align-items:flex-start;flex-direction:column; }
  .guide-hero,.guide-footer { align-items:flex-start;flex-direction:column; }.guide-status,.guide-footer .btn { width:100%; }
  .guide-nav { top:58px; }.guide-section { grid-template-columns:1fr; }.guide-number { width:36px;height:36px; }
  .guide-grid.three,.guide-grid.two,.provider-grid,.platform-tabs,.mora-flow,.check-grid { grid-template-columns:1fr; }
  .test-flow { display:grid;grid-template-columns:1fr; }.test-flow i { transform:rotate(90deg); }
  .final-checklist ol { grid-template-columns:1fr; }
  .license-flow { display:grid;grid-template-columns:1fr; }.license-flow i { transform:rotate(90deg); }
  .sc-layout { grid-template-columns: 1fr; height: calc(100vh - 118px); min-height: 360px; margin-top: .5rem; border-radius: 12px; }
  .sc-layout:not(.sc-open) .sc-thread { display: none; }
  .sc-layout.sc-open .sc-list { display: none; }
  .sc-back { display: inline-block; }
  .sc-list { max-height: none; }
  .sc-thread { min-height: 0; }
}