:root {
  color-scheme: light;
  --brand: #2156d9;
  --brand-dark: #153a96;
  --ink: #152033;
  --muted: #64748b;
  --surface: #ffffff;
  --background: #f2f6ff;
  --border: #dbe4f0;
  --success: #147d45;
  --danger: #b42318;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

html { min-height: 100%; background: var(--background); }

body {
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(circle at top left, rgba(33, 86, 217, .14), transparent 32rem),
    var(--background);
}

button, input, select, textarea { font: inherit; }

.shell {
  width: min(100% - 2rem, 980px);
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0 auto;
  padding: max(2rem, env(safe-area-inset-top)) 0 max(2rem, env(safe-area-inset-bottom));
  display: grid;
  place-items: center;
}

.card {
  width: 100%;
  padding: clamp(1.25rem, 4vw, 2.5rem);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 1.25rem;
  box-shadow: 0 20px 55px rgba(30, 64, 175, .10);
}

.card.narrow { max-width: 720px; }
.eyebrow { color: var(--brand); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; font-size: .75rem; }
h1, h2 { line-height: 1.12; }
h1 { margin: .5rem 0 1rem; font-size: clamp(2rem, 6vw, 3.5rem); }
h2 { margin-top: 2rem; }
p { line-height: 1.65; }
.muted { color: var(--muted); }

dl { display: grid; gap: .75rem; }
dl div { display: flex; justify-content: space-between; gap: 1rem; padding: .85rem 0; border-bottom: 1px solid var(--border); }
dt { color: var(--muted); }
dd { margin: 0; font-weight: 700; text-align: right; }

.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.field { display: grid; gap: .4rem; }
.field.full { grid-column: 1 / -1; }
label { font-weight: 700; }
input, select, textarea {
  width: 100%;
  min-height: 2.9rem;
  padding: .7rem .8rem;
  color: var(--ink);
  background: #fff;
  border: 1px solid #aebed1;
  border-radius: .65rem;
}
textarea { resize: vertical; }
input[type="checkbox"] { width: 1.2rem; min-height: 1.2rem; margin: 0 .45rem 0 0; vertical-align: middle; }
input:focus-visible, select:focus-visible, button:focus-visible { outline: 3px solid rgba(33, 86, 217, .28); outline-offset: 2px; }

.actions { display: flex; justify-content: flex-end; gap: .75rem; margin-top: 1.5rem; }
.button {
  min-height: 2.9rem;
  padding: .7rem 1.15rem;
  border: 0;
  border-radius: .7rem;
  background: var(--brand);
  color: white;
  font-weight: 800;
  cursor: pointer;
}
.button:hover { background: var(--brand-dark); }
.notice { padding: 1rem; border-radius: .7rem; border: 1px solid var(--border); background: #f8fafc; }
.notice.error { color: var(--danger); border-color: #f1a9a3; background: #fff4f2; }
.notice.success { color: var(--success); border-color: #9bd3b6; background: #f0fff7; }
.checklist { padding: 0; list-style: none; }
.checklist li { display: flex; justify-content: space-between; gap: 1rem; padding: .65rem 0; border-bottom: 1px solid var(--border); }
.ok { color: var(--success); font-weight: 800; }
.bad { color: var(--danger); font-weight: 800; }
.secret { padding: 1rem; overflow-wrap: anywhere; background: #0f172a; color: #e2e8f0; border-radius: .7rem; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.auth-card form { display: grid; gap: 1rem; }
.two-factor-card > h1 { font-size: clamp(1.85rem, 4vw, 2.6rem); }
.code-value { max-width: 26rem; overflow-wrap: anywhere; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.totp-setup-grid { display: grid; grid-template-columns: minmax(15rem, .9fr) minmax(16rem, 1.1fr); gap: 1.25rem; margin: 1.25rem 0; }
.totp-qr-panel, .totp-instructions { padding: 1rem; border: 1px solid var(--border); border-radius: .85rem; background: #f8faff; }
.totp-qr-panel h2, .totp-instructions h2 { margin: 0 0 .85rem; font-size: 1.08rem; }
.totp-qr { width: min(100%, 17rem); aspect-ratio: 1; margin: 0 auto; padding: .75rem; display: grid; place-items: center; color: var(--muted); background: #fff; border: 1px solid #c8d4e3; border-radius: .75rem; }
.totp-qr svg { width: 100%; height: auto; display: block; }
.totp-sensitive-note { margin: .75rem 0 0; color: var(--danger); font-size: .82rem; text-align: center; }
.totp-steps { margin: 0 0 .75rem; padding-left: 1.25rem; line-height: 1.65; }
.totp-instructions dl { margin-bottom: 0; }
.totp-manual { padding: .85rem 1rem; border: 1px solid var(--border); border-radius: .75rem; background: #f8fafc; }
.totp-manual .secret { max-width: none; letter-spacing: .05em; }
.auth-card .totp-regenerate-form { margin-top: 1rem; display: flex; align-items: center; flex-wrap: wrap; gap: .75rem; }
.totp-regenerate-form small { color: var(--muted); }
.recovery-codes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; padding: 0; list-style: none; }
.recovery-codes li { padding: .75rem; border: 1px solid var(--border); border-radius: .6rem; font: 700 1rem ui-monospace, SFMono-Regular, Menlo, monospace; text-align: center; }

.topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  min-height: 4.2rem;
  padding: .75rem max(1rem, calc((100vw - 1180px) / 2));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  background: rgba(255,255,255,.96);
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(12px);
}
.brand { color: var(--ink); font-size: 1.2rem; font-weight: 900; text-decoration: none; }
.topbar nav { display: flex; align-items: center; flex-wrap: wrap; gap: 1rem; }
.topbar nav a, .link-button { color: var(--brand-dark); font-weight: 700; text-decoration: none; }
.topbar nav form { margin: 0; }
.link-button { padding: 0; border: 0; background: transparent; cursor: pointer; }
.app-shell { width: min(100% - 2rem, 1180px); margin: 0 auto; padding: 2rem 0 max(2rem, env(safe-area-inset-bottom)); }
.page-heading { display: flex; justify-content: space-between; align-items: end; gap: 1rem; margin-bottom: 1.5rem; }
.page-heading h1 { margin: .35rem 0; font-size: clamp(1.8rem, 5vw, 3rem); }
.dashboard-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-bottom: 1rem; }
.metric-card { display: grid; gap: .35rem; padding: 1.25rem; background: #fff; border: 1px solid var(--border); border-radius: 1rem; }
.metric-card span, .metric-card small { color: var(--muted); }
.metric-card strong { font-size: 1.45rem; }
.action-list { display: flex; flex-wrap: wrap; gap: .75rem; }
.action-list a { padding: .7rem 1rem; border: 1px solid var(--border); border-radius: .65rem; font-weight: 700; text-decoration: none; }
.narrow-left { max-width: 720px; }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: .85rem; text-align: left; border-bottom: 1px solid var(--border); vertical-align: top; }
th { color: var(--muted); font-size: .85rem; }
.danger-button { padding: .55rem .75rem; border: 1px solid #e5a39e; border-radius: .55rem; color: var(--danger); background: #fff4f2; font-weight: 800; cursor: pointer; }
details { margin: 1rem 0; }
summary { color: var(--brand-dark); font-weight: 700; cursor: pointer; }

@media (max-width: 680px) {
  .grid { grid-template-columns: 1fr; }
  .field.full { grid-column: auto; }
  dl div, .checklist li { align-items: flex-start; flex-direction: column; }
  dd { text-align: left; }
  .topbar { align-items: flex-start; flex-direction: column; }
  .topbar nav { gap: .75rem; }
  .dashboard-grid { grid-template-columns: 1fr; }
  .recovery-codes { grid-template-columns: 1fr; }
  .totp-setup-grid { grid-template-columns: 1fr; }
  .totp-qr { width: min(100%, 15rem); }
}

/* Plataforma SaaS — Fases 3 y 4 */
.layout-platform, .layout-organization { background: #f4f7fc; }
.platform-frame { min-height: 100vh; min-height: 100dvh; display: grid; grid-template-columns: 260px minmax(0, 1fr); }
.sidebar {
  position: sticky; top: 0; height: 100vh; height: 100dvh; z-index: 30;
  display: flex; flex-direction: column; overflow-y: auto;
  padding: 1.25rem 1rem max(1rem, env(safe-area-inset-bottom));
  color: #dbe7ff; background: linear-gradient(180deg, #0e2d69 0%, #071a3c 100%);
  box-shadow: 12px 0 36px rgba(15, 35, 75, .12);
}
.sidebar-brand { display: flex; align-items: center; gap: .8rem; padding: .25rem .35rem 1.2rem; border-bottom: 1px solid rgba(255,255,255,.12); }
.sidebar-brand > div { display: grid; }
.sidebar-brand strong { color: #fff; font-size: 1.05rem; }
.sidebar-brand small { color: #9fb8e7; }
.brand-mark { width: 2.45rem; height: 2.45rem; display: grid; place-items: center; border-radius: .8rem; color: #0e2d69; background: #fff; font-weight: 900; }
.sidebar-nav { display: grid; gap: .22rem; padding: 1rem 0; }
.nav-link { display: flex; align-items: center; min-height: 2.55rem; padding: .58rem .75rem; border-radius: .65rem; color: #c8d8f6; text-decoration: none; font-weight: 680; }
.nav-link:hover { color: #fff; background: rgba(255,255,255,.08); }
.nav-link.active { color: #fff; background: linear-gradient(135deg, #2766e6, #1e52c0); box-shadow: 0 8px 24px rgba(0,0,0,.18); }
.sidebar-footer { margin-top: auto; display: grid; gap: .4rem; padding: 1rem .65rem 0; border-top: 1px solid rgba(255,255,255,.12); }
.sidebar-footer small { color: #8faadc; }
.sidebar-footer a { color: #fff; font-size: .88rem; font-weight: 700; }
.platform-workspace { min-width: 0; }
.platform-topbar { position: sticky; top: 0; z-index: 20; min-height: 4.25rem; padding: .7rem clamp(1rem, 3vw, 2rem); display: flex; align-items: center; justify-content: space-between; gap: 1rem; background: rgba(255,255,255,.94); border-bottom: 1px solid var(--border); backdrop-filter: blur(14px); }
.topbar-context { display: grid; }
.topbar-context small { color: var(--muted); }
.account-menu { display: flex; align-items: center; gap: 1rem; font-size: .9rem; }
.account-menu > span { max-width: 18rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
.account-menu form { margin: 0; }
.platform-content { width: min(100% - clamp(2rem, 5vw, 4rem), 1480px); margin: 0 auto; padding: 2rem 0 4rem; }
.mobile-nav { display: none; position: relative; }
.mobile-nav summary { margin: 0; padding: .6rem .8rem; border: 1px solid var(--border); border-radius: .6rem; list-style: none; }
.content-heading { margin-bottom: 1.5rem; display: flex; justify-content: space-between; align-items: flex-end; gap: 1.25rem; }
.content-heading h1 { margin: .35rem 0 .45rem; font-size: clamp(1.9rem, 4vw, 3rem); }
.content-heading p { margin: 0; color: var(--muted); }
.heading-meta { display: flex; align-items: center; gap: .75rem; }
.button, .secondary-button, .danger-button, .table-action { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; white-space: nowrap; }
.secondary-button { min-height: 2.75rem; padding: .65rem 1rem; border: 1px solid #bdcce0; border-radius: .65rem; color: var(--brand-dark); background: #fff; font-weight: 800; cursor: pointer; }
.secondary-button:hover { border-color: var(--brand); background: #f6f9ff; }
.secondary-button.small, .danger-button.small { min-height: 2.2rem; padding: .45rem .7rem; font-size: .85rem; }
.notice + .notice { margin-top: .75rem; }
.platform-content > .notice { margin-bottom: 1rem; }
.kpi-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin-bottom: 1rem; }
.kpi-grid.compact { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.kpi-card { min-width: 0; display: grid; gap: .3rem; padding: 1.15rem; background: #fff; border: 1px solid var(--border); border-radius: .9rem; box-shadow: 0 8px 28px rgba(30,64,175,.05); }
.kpi-card span, .kpi-card small { color: var(--muted); }
.kpi-card strong { font-size: clamp(1.35rem, 3vw, 1.9rem); }
.content-grid { display: grid; gap: 1rem; margin-bottom: 1rem; }
.content-grid.two-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.content-grid.align-start { align-items: start; }
.panel-card, .plan-card { margin-bottom: 1rem; padding: clamp(1.1rem, 2.5vw, 1.6rem); background: #fff; border: 1px solid var(--border); border-radius: .95rem; box-shadow: 0 10px 35px rgba(30,64,175,.05); }
.panel-card h2, .plan-card h2 { margin: 0; font-size: 1.15rem; }
.panel-title { margin-bottom: 1rem; display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.panel-title p { margin: .25rem 0 0; color: var(--muted); font-size: .92rem; }
.panel-title > a { color: var(--brand-dark); font-weight: 750; }
.alert-list { display: grid; }
.alert-list a { padding: .75rem 0; display: flex; justify-content: space-between; color: var(--ink); border-bottom: 1px solid var(--border); text-decoration: none; }
.alert-list a:last-child { border-bottom: 0; }
.status-summary { display: grid; gap: .75rem; }
.status-summary > div { display: flex; justify-content: space-between; align-items: center; padding: .7rem 0; border-bottom: 1px solid var(--border); }
.status-pill, .privilege-badge, .severity { display: inline-flex; align-items: center; width: fit-content; padding: .28rem .58rem; border-radius: 999px; font-size: .76rem; font-weight: 850; line-height: 1.2; }
.status-active, .status-success, .status-healthy, .status-trial { color: #087443; background: #dcf8e9; }
.status-inactive, .status-archived, .status-canceled, .status-revoked { color: #526176; background: #e9eef5; }
.status-suspended, .status-failed, .status-error, .status-blocked, .status-past_due { color: #a32b21; background: #ffe6e3; }
.status-pending, .status-running, .status-warning, .status-pending_2fa, .status-accepted { color: #8a5700; background: #fff0c7; }
.status-denied { color: #823bb5; background: #f1e4ff; }
.privilege-badge { color: #1746b5; background: #e3edff; }
.severity-info { color: #1746b5; background: #e3edff; }
.severity-warning, .severity-medium { color: #8a5700; background: #fff0c7; }
.severity-critical, .severity-high { color: #a32b21; background: #ffe6e3; }
.text-danger { color: var(--danger); }
.text-success { color: var(--success); }
.table-subtitle { margin-top: .25rem; display: block; color: var(--muted); font-size: .82rem; }
.table-action { min-height: 2.2rem; padding: .42rem .7rem; border: 1px solid #c8d6e8; border-radius: .55rem; color: var(--brand-dark); font-weight: 800; }
code { padding: .15rem .35rem; border-radius: .35rem; color: #27364f; background: #edf2f9; font: .85em ui-monospace, SFMono-Regular, Menlo, monospace; overflow-wrap: anywhere; }
.filter-bar, .inline-form { display: flex; align-items: flex-end; gap: .75rem; margin-bottom: 1rem; }
.filter-bar.wrap { flex-wrap: wrap; }
.grow { flex: 1 1 16rem; }
.form-panel { max-width: 980px; }
.form-panel form { display: grid; gap: 1rem; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.form-grid .full { grid-column: 1 / -1; }
.check-field { display: flex; align-items: center; align-self: end; min-height: 2.9rem; }
.read-only-value { min-height: 2.9rem; padding: .75rem .8rem; border: 1px solid var(--border); border-radius: .65rem; background: #f7f9fc; }
.detail-list { gap: 0; }
.detail-list div { align-items: flex-start; }
.detail-list dd { max-width: 65%; }
.feature-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; }
.feature-card { padding: 1rem; display: grid; gap: .75rem; border: 1px solid var(--border); border-radius: .75rem; }
.feature-card > div { display: grid; gap: .25rem; }
.feature-card small { color: var(--muted); }
.danger-zone { border-color: #efbbb5; background: #fffafa; }
.context-actions { margin: -0.5rem 0 1rem; display: flex; justify-content: flex-end; }
.management-list { display: grid; gap: .75rem; }
.management-item { margin: 0; padding: .9rem 1rem; border: 1px solid var(--border); border-radius: .75rem; background: #fbfdff; }
.management-item > summary { margin: 0; display: flex; align-items: center; justify-content: space-between; gap: 1rem; list-style: none; }
.management-item > summary::-webkit-details-marker { display: none; }
.management-item > summary > span:first-child { display: grid; gap: .25rem; }
.management-item > summary small { color: var(--muted); font-weight: 500; }
.management-item > form { margin-top: 1rem; }
.archive-inline { padding-top: 1rem; display: flex; align-items: flex-end; gap: .75rem; border-top: 1px solid var(--border); }
.archive-inline label { flex: 1 1 auto; display: grid; gap: .4rem; }
button:disabled { opacity: .5; cursor: not-allowed; }
.danger-link { padding: .25rem; border: 0; color: var(--danger); background: transparent; font-weight: 800; cursor: pointer; text-decoration: underline; }
.empty-state { padding: 2.5rem 1rem; color: var(--muted); text-align: center; border: 1px dashed #c6d2e1; border-radius: .75rem; }
.empty-state strong { display: block; color: var(--ink); font-size: 1.1rem; }
.row-actions { display: flex; align-items: center; flex-wrap: wrap; gap: .45rem; }
.row-actions form { margin: 0; }
.invitation-card { max-width: 760px; }
.invitation-card > h1 { max-width: 18ch; font-size: clamp(1.85rem, 4vw, 2.55rem); line-height: 1.08; overflow-wrap: normal; }
.update-title { max-width: 20ch; margin-bottom: .25rem; font-size: clamp(1.85rem, 4vw, 2.55rem); line-height: 1.08; }
.update-version { margin: 0 0 1.25rem; color: var(--muted); font-weight: 700; }
.detail-list dd small { color: var(--muted); font-weight: 500; }
.password-control { position: relative; }
.password-control > input { padding-right: 3.25rem; }
.password-toggle { position: absolute; top: 50%; right: .45rem; width: 2.25rem; height: 2.25rem; padding: .45rem; display: grid; place-items: center; transform: translateY(-50%); border: 0; border-radius: .5rem; color: var(--brand-dark); background: transparent; cursor: pointer; }
.password-toggle:hover { background: #edf3ff; }
.password-toggle svg { width: 1.25rem; height: 1.25rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.select-search { min-height: 2.45rem; margin-bottom: .45rem; background: #f8fbff; }
.status-delivery_failed, .status-expired { color: #a32b21; background: #ffe6e3; }
.pagination { margin-top: 1rem; display: flex; flex-wrap: wrap; gap: .35rem; }
.pagination a { width: 2.25rem; height: 2.25rem; display: grid; place-items: center; border: 1px solid var(--border); border-radius: .5rem; color: var(--brand-dark); text-decoration: none; }
.pagination a.current { color: #fff; background: var(--brand); border-color: var(--brand); }
.pagination .secondary-button { width: auto; height: auto; }
.card-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 1rem; }
.plan-card { display: flex; flex-direction: column; }
.plan-price { margin: .5rem 0 1rem; font-size: 1.75rem; }
.plan-price small { color: var(--muted); font-size: .8rem; }
.plain-list, .step-list { padding-left: 1.25rem; line-height: 1.8; }
.plan-footer { margin-top: auto; padding-top: 1rem; display: flex; justify-content: space-between; align-items: center; gap: .75rem; border-top: 1px solid var(--border); color: var(--muted); }
.action-details { min-width: 12rem; }
.action-details summary { margin: 0; }
.action-details form { margin-top: .75rem; display: grid; gap: .5rem; }
.action-details label { display: grid; gap: .3rem; font-size: .8rem; }
.health-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 1rem; margin-bottom: 1rem; }
.health-card { padding: 1rem; display: flex; align-items: flex-start; gap: .75rem; background: #fff; border: 1px solid var(--border); border-radius: .85rem; }
.health-card p { margin: .25rem 0 0; color: var(--muted); font-size: .86rem; }
.health-dot { width: .75rem; height: .75rem; flex: 0 0 auto; margin-top: .25rem; border-radius: 50%; background: #94a3b8; box-shadow: 0 0 0 5px #edf2f7; }
.health-dot.healthy { background: #14a35f; box-shadow: 0 0 0 5px #dff8eb; }
.health-dot.warning { background: #e49a13; box-shadow: 0 0 0 5px #fff1ce; }
.health-dot.failed { background: #d33b2e; box-shadow: 0 0 0 5px #ffe8e5; }
.check-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: .75rem; }
.check-grid > div { padding: .85rem; display: flex; justify-content: space-between; border: 1px solid var(--border); border-radius: .65rem; }
.announcement-list { display: grid; gap: .75rem; }
.announcement-list article { padding: 1rem; display: flex; justify-content: space-between; gap: 1rem; border: 1px solid var(--border); border-radius: .75rem; }
.announcement-list h3 { margin: .5rem 0 .2rem; }
.announcement-list p { margin: 0 0 .5rem; }
.announcement-list article > div:last-child { display: flex; flex-direction: column; align-items: flex-end; gap: .75rem; }
.maintenance-banner { position: relative; z-index: 100; padding: .65rem 1rem; color: #573300; background: #fff0bd; border-bottom: 1px solid #e5c45a; text-align: center; font-size: .9rem; font-weight: 700; }
.global-announcement { position: relative; z-index: 99; padding: .55rem 1rem; text-align: center; font-size: .88rem; border-bottom: 1px solid transparent; }
.global-announcement.announcement-info { color: #173c77; background: #eaf2ff; border-color: #b8d0f5; }
.global-announcement.announcement-warning { color: #573300; background: #fff3cc; border-color: #e5c45a; }
.global-announcement.announcement-critical { color: #7e1710; background: #ffe7e4; border-color: #eba9a2; }

/* Phase 6: motor QR y experiencia pública. */
.input-with-suffix { display: flex; align-items: stretch; }
.input-with-suffix input { border-radius: .65rem 0 0 .65rem; }
.input-with-suffix span { padding: .75rem; display: grid; place-items: center; color: var(--muted); background: #f4f7fb; border: 1px solid var(--border); border-left: 0; border-radius: 0 .65rem .65rem 0; }
.field small { color: var(--muted); font-weight: 500; }
.form-actions { display: flex; justify-content: flex-end; gap: .75rem; }
.qr-preview-card { text-align: center; }
.qr-print-card { width: min(100%, 27rem); margin: 0 auto 1rem; padding: 1.5rem; display: grid; justify-items: center; gap: .55rem; color: #0c1730; background: #fff; border: 2px solid #d9e2ef; border-radius: 1rem; }
.qr-print-card h3, .qr-print-card p { margin: 0; }
.qr-print-card p { color: var(--muted); }
.qr-print-card small { color: var(--muted); }
.qr-brand { color: var(--brand); font-size: .82rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.qr-code-box { width: min(100%, 21rem); aspect-ratio: 1; padding: .5rem; display: grid; place-items: center; background: #fff; border-radius: .5rem; }
.qr-code-box svg { width: 100%; height: 100%; display: block; }
.qr-actions { margin-bottom: 1rem; display: flex; justify-content: center; flex-wrap: wrap; gap: .55rem; }
.secure-url { margin: 0; padding: .75rem; display: grid; gap: .3rem; text-align: left; background: #f5f8fd; border-radius: .65rem; overflow-wrap: anywhere; }
.secure-url span { color: var(--muted); font-size: .8rem; }
.danger-action-form { padding: 1rem; display: grid; gap: .75rem; border: 1px solid #f0c3be; border-radius: .75rem; background: #fff; }
.danger-action-form h3, .danger-action-form p { margin: 0; }
.visitor-shell { width: 100%; min-height: 100svh; min-height: 100dvh; padding: max(1rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right)) max(1rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left)); display: grid; place-items: center; }
.visitor-card { width: min(100%, 38rem); padding: clamp(1.25rem, 5vw, 2.25rem); display: grid; gap: 1.1rem; background: #fff; border: 1px solid var(--border); border-radius: 1.15rem; box-shadow: 0 22px 60px rgba(24,57,110,.1); }
.visitor-card h1 { margin: -.25rem 0 0; font-size: clamp(2rem, 8vw, 3rem); line-height: 1.05; }
.visitor-brand { display: flex; align-items: center; gap: .7rem; }
.visitor-brand > div { display: grid; }
.visitor-brand small { color: var(--muted); }
.visitor-message { margin: 0; padding: .9rem; color: #223454; background: #f4f7fc; border-radius: .7rem; }
.visitor-directory { display: grid; gap: 1rem; }
.visitor-directory select { min-height: 9rem; margin-top: .45rem; }
.visitor-primary { width: 100%; min-height: 3.5rem; font-size: 1.05rem; }
.visitor-destination { padding: 1rem; display: grid; gap: .2rem; background: #f4f7fc; border-radius: .75rem; }
.visitor-destination span { color: var(--muted); font-size: .84rem; }
.visitor-ready { padding: 1rem; display: flex; gap: .8rem; color: #075e38; background: #e9fbf2; border: 1px solid #a8e3c6; border-radius: .75rem; }
.visitor-ready > span { width: 2rem; height: 2rem; flex: 0 0 auto; display: grid; place-items: center; color: #fff; background: #12a260; border-radius: 50%; font-weight: 900; }
.visitor-ready p { margin: .2rem 0 0; color: #236249; }
.visitor-card footer { padding-top: 1rem; display: flex; justify-content: space-between; gap: 1rem; color: var(--muted); border-top: 1px solid var(--border); font-size: .82rem; }

@media print {
  body * { visibility: hidden !important; }
  .qr-print-card, .qr-print-card * { visibility: visible !important; }
  .qr-print-card { position: fixed; inset: 0; width: 185mm; height: 260mm; margin: auto; padding: 18mm; align-content: center; border: 2px solid #cbd5e1; box-shadow: none; }
  .qr-code-box { width: 125mm; }
  @page { size: A4 portrait; margin: 12mm; }
}

@media (max-width: 1180px) {
  .kpi-grid.compact { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .kpi-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .card-grid, .feature-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .health-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

@media (max-width: 860px) {
  .platform-frame { display: block; }
  .sidebar { display: none; }
  .mobile-nav { display: block; }
  .mobile-nav[open] nav { position: absolute; top: calc(100% + .5rem); left: 0; width: min(82vw, 20rem); max-height: 70vh; overflow-y: auto; padding: .5rem; display: grid; background: #fff; border: 1px solid var(--border); border-radius: .75rem; box-shadow: 0 18px 45px rgba(15,35,75,.2); }
  .mobile-nav nav a { padding: .7rem; color: var(--ink); text-decoration: none; border-radius: .5rem; }
  .mobile-nav nav a:hover { background: var(--background); }
  .topbar-context { display: none; }
  .platform-content { width: min(100% - 2rem, 760px); padding-top: 1.25rem; }
  .content-grid.two-columns { grid-template-columns: 1fr; }
  .content-heading { align-items: flex-start; }
}

@media (max-width: 620px) {
  .account-menu > span { display: none; }
  .content-heading { flex-direction: column; }
  .content-heading > .button, .content-heading > .secondary-button { width: 100%; }
  .kpi-grid, .kpi-grid.compact, .card-grid, .feature-grid, .health-grid, .check-grid { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .form-grid .full { grid-column: auto; }
  .filter-bar, .inline-form { align-items: stretch; flex-direction: column; }
  .filter-bar .secondary-button, .inline-form > button { width: 100%; }
  .panel-title, .announcement-list article { flex-direction: column; }
  .announcement-list article > div:last-child { align-items: flex-start; }
  .detail-list dd { max-width: 100%; }
  .context-actions { justify-content: stretch; }
  .context-actions .button { width: 100%; }
  .archive-inline { align-items: stretch; flex-direction: column; }
  .form-actions { align-items: stretch; flex-direction: column-reverse; }
  .form-actions > * { width: 100%; }
  .visitor-card footer { flex-direction: column; }
}
.privacy-card { max-width: 48rem; }
.privacy-card h1 { font-size: clamp(2rem, 6vw, 3.4rem); }
.privacy-card h2 { margin: 1.35rem 0 .35rem; font-size: 1.1rem; }
.privacy-card p { line-height: 1.65; }

/* Phase 6 QR management UX */
.qr-kpi-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.kpi-card .kpi-date { font-size: 1rem; line-height: 1.35; }
.type-badge { display: inline-flex; align-items: center; width: fit-content; padding: .26rem .55rem; border-radius: 999px; color: #1746b5; background: #e3edff; font-size: .76rem; font-weight: 850; line-height: 1.2; }
.type-badge.legacy { color: #8a5700; background: #fff0c7; }
.status-revoked { color: #a32b21; background: #ffe6e3; }
.status-expired { color: #8a5700; background: #fff0c7; }
.sort-link { color: inherit; text-decoration: none; font-weight: inherit; }
.sort-link:hover { color: var(--brand); text-decoration: underline; }
.filter-bar.is-enhanced .qr-filter-fallback { display: none; }
@media (max-width: 1100px) { .qr-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) { .qr-kpi-grid { grid-template-columns: 1fr; } }

/* Phase 6.1.5.5: QR quick actions */
.qr-row-actions { display: flex; align-items: center; justify-content: flex-end; gap: .45rem; min-width: 9.5rem; }
.quick-actions { position: relative; display: inline-flex; }
.quick-actions-toggle { width: 2.25rem; min-width: 2.25rem; height: 2.25rem; border: 1px solid #c8d6e8; border-radius: .55rem; background: #fff; color: var(--brand-dark); font-size: 1.35rem; font-weight: 900; line-height: 1; cursor: pointer; }
.quick-actions-toggle:hover, .quick-actions-toggle:focus-visible { border-color: #7da2df; box-shadow: 0 0 0 3px rgba(37, 99, 235, .14); outline: none; }
.quick-actions-menu { position: absolute; z-index: 40; right: 0; top: calc(100% + .35rem); min-width: 12.5rem; padding: .4rem; border: 1px solid #d6e0ee; border-radius: .7rem; background: #fff; box-shadow: 0 16px 34px rgba(15, 35, 70, .18); }
.quick-actions-menu[hidden] { display: none; }
.quick-actions-menu a { display: block; padding: .58rem .7rem; border-radius: .45rem; color: var(--brand-dark); text-decoration: none; font-weight: 750; }
.quick-actions-menu a:hover, .quick-actions-menu a:focus-visible { background: #edf4ff; outline: none; }
.quick-actions-menu .danger-link { color: #b42318; }
.quick-actions-menu .danger-link:hover, .quick-actions-menu .danger-link:focus-visible { background: #fff0ee; }
@media (max-width: 760px) {
  .qr-row-actions { min-width: auto; justify-content: flex-start; }
  .quick-actions-menu { position: fixed; left: 1rem; right: 1rem; top: auto; bottom: 1rem; min-width: 0; max-height: 60vh; overflow-y: auto; }
}

/* Phase 6.1.5.6: Mobile First foundation */
:root {
  --tap-target: 2.75rem;
  --content-gutter: clamp(.9rem, 3.5vw, 2rem);
  --section-gap: clamp(.85rem, 2vw, 1.25rem);
}

html, body { max-width: 100%; overflow-x: clip; }
img, svg, video, canvas { max-width: 100%; height: auto; }
.break-safe, td, dd, .panel-card, .kpi-card { min-width: 0; overflow-wrap: anywhere; word-break: normal; }
.button, .secondary-button, .danger-button, .table-action, .link-button,
.mobile-nav summary, .pagination a, input, select, textarea { min-height: var(--tap-target); }

.platform-content {
  width: min(calc(100% - (2 * var(--content-gutter))), 1480px);
  padding: clamp(1rem, 3vw, 2rem) 0 clamp(2rem, 6vw, 4rem);
}
.content-heading { margin-bottom: var(--section-gap); }
.content-heading h1 { font-size: clamp(1.8rem, 5vw, 3rem); text-wrap: balance; }
.panel-card, .plan-card { padding: clamp(1rem, 3vw, 1.6rem); }
.kpi-grid, .content-grid, .health-grid { gap: var(--section-gap); }
.table-wrap { max-width: 100%; }

.mobile-nav summary {
  min-width: 4.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-weight: 800;
  color: var(--brand-dark);
  background: #fff;
}
.mobile-nav summary::-webkit-details-marker { display: none; }
.mobile-nav[open] summary { background: #edf4ff; border-color: #9bb7e8; }
.mobile-nav nav .nav-link { color: var(--ink); background: transparent; box-shadow: none; }
.mobile-nav nav .nav-link.active { color: #fff; background: linear-gradient(135deg, #2766e6, #1e52c0); }

@media (max-width: 860px) {
  .platform-topbar {
    min-height: 4.25rem;
    padding: max(.65rem, env(safe-area-inset-top)) var(--content-gutter) .65rem;
  }
  .account-menu { gap: .6rem; }
  .account-menu .link-button { padding: .55rem .25rem; }
  .mobile-nav[open] nav {
    position: fixed;
    inset: calc(4.25rem + env(safe-area-inset-top)) var(--content-gutter) auto var(--content-gutter);
    width: auto;
    max-height: calc(100dvh - 5.5rem - env(safe-area-inset-bottom));
    padding: .65rem;
    gap: .25rem;
    border-radius: .9rem;
    box-shadow: 0 22px 60px rgba(7,26,60,.28);
  }
  .mobile-nav nav a { min-height: var(--tap-target); display: flex; align-items: center; }
}

@media (max-width: 700px) {
  .content-heading { gap: .85rem; }
  .content-heading p { font-size: .96rem; line-height: 1.55; }
  .content-heading > .button, .content-heading > .secondary-button { width: 100%; }
  .filter-bar { gap: .75rem; }
  .filter-bar .field, .filter-bar .grow { width: 100%; flex-basis: auto; }
  .filter-bar > a { align-self: center; min-height: var(--tap-target); display: inline-flex; align-items: center; }

  .responsive-table { display: block; }
  .responsive-table thead { display: none; }
  .responsive-table tbody { display: grid; gap: .85rem; }
  .responsive-table tr {
    display: grid;
    gap: 0;
    padding: .95rem;
    border: 1px solid var(--border);
    border-radius: .85rem;
    background: #fff;
    box-shadow: 0 6px 20px rgba(30,64,175,.045);
  }
  .responsive-table td {
    width: 100%;
    min-height: 2.65rem;
    padding: .65rem 0;
    display: grid;
    grid-template-columns: minmax(6.5rem, 38%) minmax(0, 1fr);
    align-items: start;
    gap: .75rem;
    border-bottom: 1px solid var(--border);
  }
  .responsive-table td:last-child { border-bottom: 0; padding-bottom: 0; }
  .responsive-table td::before {
    content: attr(data-label);
    color: var(--muted);
    font-size: .78rem;
    font-weight: 800;
    line-height: 1.35;
  }
  .responsive-table td > * { min-width: 0; }
  .responsive-table td code { width: fit-content; max-width: 100%; }
  .responsive-table .responsive-actions { display: block; padding-top: .8rem; }
  .responsive-table .responsive-actions::before { display: none; }
  .responsive-table .responsive-actions .table-action { width: 100%; }
  .responsive-table .table-subtitle { margin-top: .2rem; }

  .activity-table td, .audit-table td { grid-template-columns: minmax(5.6rem, 32%) minmax(0, 1fr); }
  .activity-table td[data-label="Acción"] code,
  .audit-table td[data-label="Acción"] code,
  .audit-table td[data-label="Request"] code { white-space: normal; overflow-wrap: anywhere; }

  .health-card { min-height: 5rem; align-items: center; }
  .detail-list div { gap: .35rem; }
  .detail-list dt, .detail-list dd { width: 100%; }
  .detail-list dd { overflow-wrap: anywhere; }
  .check-grid > div { min-height: var(--tap-target); align-items: center; }
}

@media (max-width: 480px) {
  :root { --content-gutter: .75rem; }
  .platform-topbar { gap: .5rem; }
  .account-menu .link-button { font-size: .9rem; }
  .content-heading h1 { font-size: clamp(1.75rem, 9vw, 2.2rem); }
  .eyebrow { font-size: .7rem; }
  .panel-card, .plan-card, .kpi-card { border-radius: .85rem; }
  .kpi-card { padding: 1rem; }
  .responsive-table td { grid-template-columns: 1fr; gap: .25rem; }
  .responsive-table td::before { margin-bottom: .05rem; }
  .pagination a { min-width: var(--tap-target); }
}


/* Phase 6.1.5.7: compact sticky mobile app bar and true card tables */
@media (max-width: 860px) {
  .platform-topbar {
    position: sticky;
    top: 0;
    z-index: 60;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    min-height: 3.75rem;
    padding: max(.45rem, env(safe-area-inset-top)) var(--content-gutter) .45rem;
    gap: .6rem;
  }
  .topbar-context {
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: center;
    text-align: center;
  }
  .topbar-context strong {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: clamp(.88rem, 3.5vw, 1rem);
  }
  .topbar-context small { display: none; }
  .mobile-nav summary {
    min-width: 3.5rem;
    padding-inline: .65rem;
  }
  .account-menu { justify-self: end; }
  .account-menu .link-button {
    min-width: 3.5rem;
    font-size: .85rem;
    white-space: nowrap;
  }
  .platform-content { padding-top: 1rem; }
}

@media (max-width: 700px) {
  .context-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: .65rem;
    width: 100%;
  }
  .context-actions .button,
  .context-actions .secondary-button {
    width: 100%;
    min-width: 0;
    justify-content: center;
    white-space: normal;
    text-align: center;
  }
  .admin-table .secondary-danger,
  .qr-table .table-action { width: 100%; }
  .qr-table .qr-row-actions {
    display: grid;
    grid-template-columns: minmax(0,1fr) auto;
    gap: .55rem;
    align-items: center;
  }
  .qr-table .quick-actions-toggle {
    width: var(--tap-target);
    min-width: var(--tap-target);
    height: var(--tap-target);
  }
}

@media (max-width: 480px) {
  .platform-topbar { grid-template-columns: auto minmax(0,1fr) auto; }
  .account-menu .link-button { font-size: 0; width: 2.75rem; min-width: 2.75rem; padding: 0; }
  .account-menu .link-button::before { content: 'Salir'; font-size: .78rem; font-weight: 800; }
  .content-heading h1 { line-height: 1.08; }
}

/* Phase 7 — TimBell Creation Experience + dashboard widgets */
.qr-wizard-heading { max-width: 1120px; margin-inline: auto; }
.qr-wizard { max-width: 1120px; margin-inline: auto; padding: clamp(1rem, 3vw, 2rem); overflow: hidden; }
.wizard-progress { display: grid; grid-template-columns: repeat(4, 1fr); gap: .55rem; margin-bottom: clamp(1.4rem, 4vw, 2.4rem); }
.wizard-progress-step { min-width: 0; padding: .4rem; display: flex; align-items: center; justify-content: center; gap: .45rem; border: 0; color: var(--muted); background: transparent; font: inherit; }
.wizard-progress-step > span { width: 2rem; height: 2rem; flex: 0 0 auto; display: grid; place-items: center; border: 2px solid #cbd7e7; border-radius: 999px; background: #fff; font-weight: 900; }
.wizard-progress-step small { font-weight: 800; }
.wizard-progress-step.is-active { color: var(--brand-dark); }
.wizard-progress-step.is-active > span { color: #fff; border-color: var(--brand); background: var(--brand); box-shadow: 0 0 0 5px rgba(23,70,181,.1); }
.wizard-progress-step.is-complete > span { color: #fff; border-color: var(--success); background: var(--success); }
.wizard-step { animation: wizardIn .22s ease-out; }
@keyframes wizardIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.wizard-question { max-width: 760px; margin: 0 auto 1.35rem; text-align: center; }
.wizard-question h2 { margin: .3rem 0 .45rem; font-size: clamp(1.55rem, 5vw, 2.25rem); line-height: 1.12; }
.wizard-question p { margin: 0; color: var(--muted); }
.wizard-step-label { color: var(--brand); font-size: .78rem; font-weight: 900; letter-spacing: .09em; text-transform: uppercase; }
.choice-card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .85rem; }
.choice-card-grid-two { max-width: 820px; margin-inline: auto; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.choice-card { position: relative; min-height: 130px; padding: 1.1rem; display: flex; align-items: flex-start; gap: .8rem; text-align: left; color: var(--ink); border: 1px solid #cfdaea; border-radius: 1rem; background: #fff; cursor: pointer; transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease, background .16s ease; }
.choice-card:hover { transform: translateY(-2px); border-color: #8facdf; box-shadow: 0 12px 30px rgba(30,64,175,.1); }
.choice-card.is-selected { border-color: var(--brand); background: #f5f8ff; box-shadow: 0 0 0 3px rgba(23,70,181,.1); }
.choice-card-icon { width: 2.7rem; height: 2.7rem; flex: 0 0 auto; display: grid; place-items: center; border-radius: .8rem; background: #eef4ff; font-size: 1.45rem; }
.choice-card > span:nth-child(2) { display: grid; gap: .32rem; }
.choice-card strong { font-size: 1rem; line-height: 1.25; }
.choice-card small { color: var(--muted); line-height: 1.4; }
.choice-card-check { position: absolute; top: .7rem; right: .7rem; width: 1.45rem; height: 1.45rem; display: none; place-items: center; color: #fff; border-radius: 999px; background: var(--brand); font-weight: 900; }
.choice-card.is-selected .choice-card-check { display: grid; }
.wizard-form-grid { max-width: 850px; margin-inline: auto; }
.advanced-settings { max-width: 850px; margin: 1rem auto 0; padding: .85rem 1rem; border: 1px solid var(--border); border-radius: .8rem; background: #f9fbfe; }
.advanced-settings summary { margin: 0; color: var(--brand-dark); font-weight: 850; cursor: pointer; }
.advanced-settings[open] summary { margin-bottom: 1rem; }
.wizard-actions { max-width: 850px; margin: 1.5rem auto 0; padding-top: 1rem; display: flex; justify-content: space-between; gap: .75rem; border-top: 1px solid var(--border); }
.wizard-actions [data-wizard-next], .wizard-actions [data-wizard-submit] { margin-left: auto; min-width: 9rem; }
.wizard-review { display: grid; grid-template-columns: minmax(240px, .8fr) minmax(280px, 1.2fr); gap: clamp(1.2rem, 4vw, 3rem); align-items: center; max-width: 900px; margin: 0 auto 1rem; }
.review-preview { display: grid; place-items: center; padding: 1rem; border-radius: 1rem; background: linear-gradient(145deg, #eef4ff, #f8fbff); }
.review-phone { width: min(100%, 240px); padding: .55rem; border-radius: 2rem; background: #17233a; box-shadow: 0 18px 50px rgba(23,35,58,.22); }
.review-phone-camera { width: 4rem; height: .45rem; display: block; margin: .15rem auto .55rem; border-radius: 999px; background: #2f3a4e; }
.review-phone-screen { min-height: 350px; padding: 2rem 1rem; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .7rem; text-align: center; border-radius: 1.5rem; background: #fff; }
.review-phone-screen small, .review-phone-screen p { color: var(--muted); }
.review-phone-screen strong { font-size: 1.25rem; }
.review-phone-screen button { width: 100%; margin-top: .5rem; padding: .75rem; color: #fff; border: 0; border-radius: .75rem; background: var(--brand); font-weight: 850; opacity: 1; }
.review-list { margin: 0; display: grid; gap: 0; }
.review-list > div { padding: .9rem 0; display: grid; grid-template-columns: 140px 1fr; gap: .8rem; border-bottom: 1px solid var(--border); }
.review-list dt { color: var(--muted); font-weight: 700; }
.review-list dd { margin: 0; font-weight: 850; }
.visitor-video-link { margin: -.25rem 0 1rem; display: inline-flex; align-items: center; justify-content: center; min-height: 2.7rem; padding: .6rem .85rem; color: var(--brand-dark); border: 1px solid #c8d6e8; border-radius: .7rem; background: #f7faff; font-weight: 800; text-decoration: none; }

.dashboard-hero { max-width: 1160px; margin: 0 auto 1.35rem; padding: clamp(1.2rem, 3vw, 2rem); display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; border: 1px solid #d6e2f3; border-radius: 1.25rem; background: radial-gradient(circle at 85% 15%, rgba(83,133,235,.17), transparent 32%), linear-gradient(145deg, #fff, #f5f8ff); box-shadow: 0 18px 50px rgba(30,64,175,.08); }
.dashboard-hero h1 { margin: .35rem 0 .45rem; font-size: clamp(2rem, 5vw, 3.2rem); line-height: 1.04; }
.dashboard-hero p { max-width: 680px; margin: 0; color: var(--muted); }
.dashboard-overview { max-width: 1160px; margin: 0 auto 1rem; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .85rem; }
.dashboard-widget { min-width: 0; min-height: 132px; padding: 1rem; display: flex; align-items: flex-start; gap: .85rem; border: 1px solid var(--border); border-radius: 1rem; background: #fff; box-shadow: 0 10px 30px rgba(30,64,175,.05); }
.dashboard-widget.primary { border-color: #adc4ed; background: linear-gradient(145deg, #fff, #f2f6ff); }
.dashboard-widget-icon { width: 2.75rem; height: 2.75rem; flex: 0 0 auto; display: grid; place-items: center; border-radius: .85rem; background: #edf3ff; font-size: 1.35rem; }
.dashboard-widget > div { min-width: 0; display: grid; gap: .2rem; }
.dashboard-widget span:not(.dashboard-widget-icon), .dashboard-widget small { color: var(--muted); }
.dashboard-widget strong { font-size: clamp(1.55rem, 3vw, 2.1rem); line-height: 1; }
.dashboard-widget small { line-height: 1.35; }
.dashboard-main-grid { max-width: 1160px; margin: 0 auto 1rem; display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(280px, .6fr); gap: 1rem; }
.dashboard-main-grid .panel-card, .dashboard-activity-card { margin-bottom: 0; }
.dashboard-activity-card { max-width: 1160px; margin: 0 auto; }
.health-widget-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; }
.health-widget { min-width: 0; padding: .85rem; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .65rem; color: var(--ink); border: 1px solid var(--border); border-radius: .8rem; background: #fbfdff; text-decoration: none; }
.health-dot { width: .65rem; height: .65rem; border-radius: 999px; }
.health-widget.is-ok .health-dot { background: var(--success); box-shadow: 0 0 0 4px rgba(8,116,67,.1); }
.health-widget.has-alert .health-dot { background: var(--danger); box-shadow: 0 0 0 4px rgba(163,43,33,.1); }
.health-widget strong { font-size: 1.2rem; }
.dashboard-status-summary > div { padding: .9rem 0; }
.activity-feed { display: grid; }
.activity-feed-item { position: relative; padding: .9rem 0 .9rem 1.6rem; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1rem; border-bottom: 1px solid var(--border); }
.activity-feed-item:last-child { border-bottom: 0; }
.activity-feed-marker { position: absolute; left: .15rem; top: 1.25rem; width: .65rem; height: .65rem; border-radius: 999px; background: var(--brand); box-shadow: 0 0 0 4px rgba(23,70,181,.1); }
.activity-feed-main { min-width: 0; display: grid; gap: .25rem; }
.activity-feed-main strong { overflow-wrap: anywhere; }
.activity-feed-main small, .activity-feed-meta time { color: var(--muted); }
.activity-feed-meta { display: grid; justify-items: end; gap: .35rem; text-align: right; }

@media (max-width: 900px) {
  .choice-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dashboard-overview { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dashboard-main-grid { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .wizard-progress-step small { display: none; }
  .wizard-progress-step { padding-inline: 0; }
  .choice-card-grid, .choice-card-grid-two { grid-template-columns: 1fr; }
  .choice-card { min-height: 104px; }
  .wizard-review { grid-template-columns: 1fr; }
  .review-list > div { grid-template-columns: 1fr; gap: .2rem; }
  .wizard-actions { position: sticky; bottom: calc(.6rem + env(safe-area-inset-bottom)); z-index: 4; margin-inline: -.35rem; padding: .7rem; border: 1px solid rgba(203,215,231,.9); border-radius: .9rem; background: rgba(255,255,255,.95); box-shadow: 0 12px 35px rgba(23,35,58,.16); backdrop-filter: blur(12px); }
  .wizard-actions > * { flex: 1 1 0; min-width: 0 !important; }
  .dashboard-hero { align-items: stretch; flex-direction: column; text-align: center; }
  .dashboard-hero .button { width: 100%; }
  .dashboard-overview { grid-template-columns: 1fr; }
  .dashboard-widget { min-height: 105px; align-items: center; }
  .health-widget-grid { grid-template-columns: 1fr; }
  .activity-feed-item { grid-template-columns: 1fr; gap: .55rem; }
  .activity-feed-meta { justify-items: start; text-align: left; }
}


/* TimBell Smart 2.1 - Clientes y panel comercial */
.client-status-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.75rem;margin:0 0 1rem}.client-status-tab{min-height:78px;padding:.9rem 1rem;display:flex;align-items:center;justify-content:space-between;gap:.7rem;color:var(--ink);border:1px solid var(--border);border-radius:1rem;background:#fff;text-decoration:none}.client-status-tab strong{font-size:1.35rem}.client-status-tab.active{border-color:var(--brand);background:#f3f7ff;box-shadow:0 0 0 3px rgba(23,70,181,.08)}
.client-card-list{display:grid;gap:.75rem}.client-card{padding:1rem;display:grid;grid-template-columns:minmax(220px,1.4fr) minmax(160px,.7fr) minmax(210px,1fr) auto;align-items:center;gap:1rem;border:1px solid var(--border);border-radius:1rem;background:#fff}.client-card-title{display:flex;align-items:center;flex-wrap:wrap;gap:.55rem}.client-card-main p{margin:.3rem 0;color:var(--muted)}.client-card-main small,.client-card-plan small{color:var(--muted)}.client-card-plan{display:grid;gap:.2rem}.client-card-plan span{color:var(--muted);font-size:.82rem}.client-card-usage{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.35rem}.client-card-usage span{padding:.45rem .55rem;border-radius:.6rem;background:#f5f8fc;font-size:.82rem}.client-card-action{white-space:nowrap}
.business-kpis .dashboard-widget{color:var(--ink);text-decoration:none}.dashboard-widget.warning{border-color:#e7c56f;background:#fffaf0}.dashboard-widget.danger{border-color:#e8aaa5;background:#fff7f6}.funnel-summary{display:grid;gap:.65rem}.funnel-summary>div{padding:.8rem;display:flex;align-items:center;justify-content:space-between;border:1px solid var(--border);border-radius:.75rem;background:#fbfdff}.funnel-summary strong{font-size:1.4rem}
.consumption-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.8rem}.consumption-card{padding:1rem;border:1px solid var(--border);border-radius:.9rem;background:#fbfdff}.consumption-card>div:first-child{display:flex;align-items:end;justify-content:space-between;gap:.5rem}.consumption-card span{color:var(--muted)}.consumption-card strong{font-size:1.1rem}.usage-bar{height:.55rem;margin:.8rem 0 .45rem;overflow:hidden;border-radius:999px;background:#e5ebf3}.usage-bar span{height:100%;display:block;border-radius:inherit;background:var(--brand)}.consumption-card small{color:var(--muted)}
@media(max-width:900px){.client-status-tabs{grid-template-columns:repeat(2,minmax(0,1fr))}.client-card{grid-template-columns:1fr 1fr}.client-card-action{justify-self:start}.consumption-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.client-status-tabs{grid-template-columns:1fr 1fr}.client-status-tab{min-height:68px;padding:.75rem;flex-direction:column;align-items:flex-start}.client-card{grid-template-columns:1fr}.client-card-usage{grid-template-columns:1fr 1fr}.client-card-action{width:100%;text-align:center}.consumption-grid{grid-template-columns:1fr}.content-heading h1{font-size:clamp(1.65rem,9vw,2.25rem)}}


/* TimBell Smart 3.0 — Design System y densidad visual */
:root{--surface-soft:#f7f9fd;--radius-sm:.7rem;--radius-md:1rem;--radius-lg:1.3rem;--shadow-soft:0 10px 30px rgba(30,64,175,.06)}
.compact-heading{margin-bottom:1rem}.form-section{margin-bottom:1rem}.form-section h2{margin:.15rem 0 0}.plan-builder-layout{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:1rem;align-items:start}.plan-builder-main{min-width:0}.plan-preview{position:sticky;top:1rem}.preview-price{margin:1.2rem 0;display:flex;align-items:baseline;gap:.35rem}.preview-price strong{font-size:2rem}.preview-price small{color:var(--muted)}.limit-editor-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem}.limit-editor{padding:.85rem;border:1px solid var(--border);border-radius:.85rem;background:var(--surface-soft)}.limit-editor.is-unlimited{background:#effaf4;border-color:#b9dfc9}.limit-editor-head{margin-bottom:.55rem;display:flex;align-items:center;justify-content:space-between;gap:.6rem}.switch-label{display:flex!important;align-items:center;gap:.4rem;color:var(--muted);font-size:.78rem!important;cursor:pointer}.switch-label input{width:auto}.sticky-form-actions{position:sticky;bottom:0;z-index:5;padding:.8rem;background:rgba(247,249,253,.95);border:1px solid var(--border);border-radius:.9rem;backdrop-filter:blur(12px)}.plan-duration{margin:.2rem 0 .7rem;padding:.7rem .8rem;display:flex;justify-content:space-between;border-radius:.75rem;background:var(--surface-soft)}.plan-duration span{color:var(--muted)}.client-quick-actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.7rem;margin-bottom:1rem}.client-quick-actions a{padding:.85rem;display:grid;gap:.2rem;color:var(--ink);text-decoration:none;border:1px solid var(--border);border-radius:.9rem;background:#fff}.client-quick-actions a:hover{border-color:var(--brand);background:#f5f8ff}.client-quick-actions small{color:var(--muted)}.client-edit-disclosure{padding:0;overflow:hidden}.client-edit-disclosure>summary{padding:1rem 1.2rem;color:var(--brand-dark);font-weight:850;cursor:pointer}.client-edit-disclosure[open]>summary{border-bottom:1px solid var(--border)}.client-edit-disclosure>.content-grid{padding:1rem}.client-edit-disclosure .panel-card{box-shadow:none}.kpi-grid.compact{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:900px){.plan-builder-layout{grid-template-columns:1fr}.plan-preview{position:static;order:-1}.client-quick-actions{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:620px){.dashboard-overview{grid-template-columns:repeat(2,minmax(0,1fr))}.dashboard-widget{min-height:92px;padding:.8rem;display:grid;grid-template-columns:auto 1fr}.dashboard-widget-icon{width:2.2rem;height:2.2rem;font-size:1.05rem}.dashboard-widget strong{font-size:1.55rem}.dashboard-widget small{font-size:.76rem}.kpi-grid.compact{grid-template-columns:repeat(2,minmax(0,1fr))}.kpi-card{min-height:100px;padding:.9rem}.client-quick-actions{grid-template-columns:repeat(3,minmax(0,1fr))}.client-quick-actions a{padding:.7rem .45rem;text-align:center}.client-quick-actions small{display:none}.limit-editor-grid{grid-template-columns:1fr}.plan-preview{padding:1rem}.plan-builder-main .panel-card{padding:1rem}.sticky-form-actions>*{flex:1}.consumption-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.consumption-card{padding:.8rem}.consumption-card>div:first-child{align-items:start;flex-direction:column}.content-heading{align-items:flex-start}.content-heading .secondary-button{min-height:2.7rem}}


/* TimBell Smart 3.1 — mobile cards, platform identities and module roadmap */
.entity-card-list{display:grid;gap:.8rem}.entity-card{padding:1rem;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:1rem;align-items:center;border:1px solid var(--border);border-radius:1rem;background:#fff;box-shadow:var(--shadow-soft)}.entity-card-head{min-width:0;display:flex;align-items:flex-start;justify-content:space-between;gap:.8rem}.entity-card-head>div{min-width:0;display:grid;gap:.25rem}.entity-card-head strong,.entity-card-head small{overflow-wrap:anywhere}.entity-card-head small{color:var(--muted)}.entity-card-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.6rem}.entity-card-grid>div{min-width:0;padding:.65rem;border-radius:.7rem;background:var(--surface-soft)}.entity-card-grid>div.wide{grid-column:span 2}.entity-card-grid span{display:block;margin-bottom:.2rem;color:var(--muted);font-size:.76rem;font-weight:750}.entity-card-grid strong{display:block;overflow-wrap:anywhere;font-size:.9rem}.entity-card-action{justify-self:end;white-space:nowrap}.compact-filters{margin-bottom:1rem}.module-legend{margin-bottom:1rem;display:flex;flex-wrap:wrap;gap:1rem}.module-legend span{display:flex;align-items:center;gap:.4rem;color:var(--muted);font-size:.85rem;font-weight:750}.module-dot{width:.65rem;height:.65rem;border-radius:999px}.module-dot.active{background:var(--success)}.module-dot.beta{background:#b56a00}.module-dot.upcoming{background:#718096}.module-stage-available{color:#087443;background:#e9f8ef}.module-stage-beta{color:#8a4d00;background:#fff3dc}.module-stage-upcoming{color:#4a5568;background:#edf1f5}.module-card{grid-template-columns:minmax(0,1fr) auto}.module-card .entity-card-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:860px){.mobile-centered-heading{text-align:center;align-items:stretch}.mobile-centered-heading>div{width:100%}.entity-card{grid-template-columns:1fr}.entity-card-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.entity-card-action{width:100%;justify-self:stretch;text-align:center}.compact-filters .secondary-button{width:100%}}
@media(max-width:480px){.entity-card{padding:.85rem}.entity-card-head{flex-direction:column}.entity-card-grid,.module-card .entity-card-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.entity-card-grid>div.wide{grid-column:1/-1}}

/* TimBell Smart 3.2 — navegación por categorías y densidad desktop */
.client-status-tab{transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease}.client-status-tab:hover{transform:translateY(-1px)}
.client-status-active{border-color:#a9dcc2;background:#effaf4}.client-status-active:hover{border-color:#59b985}.client-status-active strong{color:#087443}
.client-status-trial{border-color:#ead18d;background:#fff9e9}.client-status-trial:hover{border-color:#d8ad3d}.client-status-trial strong{color:#8a5700}
.client-status-suspended{border-color:#efb4ae;background:#fff4f2}.client-status-suspended:hover{border-color:#dc776d}.client-status-suspended strong{color:#a32b21}
.client-status-archived{border-color:#cbd5e1;background:#f3f6f9}.client-status-archived:hover{border-color:#94a3b8}.client-status-archived strong{color:#526176}
.client-results-panel .panel-title{align-items:center}

@media(min-width:861px){
  .entity-card.user-row-card{grid-template-columns:minmax(260px,1.25fr) minmax(520px,2.2fr) auto;align-items:center}
  .user-row-card .entity-card-head{align-items:center}
  .user-row-card .entity-card-grid{grid-template-columns:repeat(4,minmax(105px,1fr))}
  .entity-card.template-row-card{grid-template-columns:minmax(320px,1.8fr) minmax(260px,.9fr) auto;align-items:center}
  .template-row-card .entity-card-head{align-items:center}
  .template-row-card .entity-card-grid{grid-template-columns:repeat(2,minmax(110px,1fr))}
  .entity-card.module-row-card{grid-template-columns:minmax(360px,1.8fr) minmax(380px,1.35fr) auto;align-items:center}
  .module-row-card .entity-card-head{align-items:center}
  .module-row-card .entity-card-grid{grid-template-columns:repeat(3,minmax(110px,1fr))}
  .user-row-card .entity-card-action,.template-row-card .entity-card-action,.module-row-card .entity-card-action{align-self:center;justify-self:end}
  .user-row-card .entity-card-grid>div,.template-row-card .entity-card-grid>div,.module-row-card .entity-card-grid>div{height:100%;display:flex;flex-direction:column;justify-content:center}
}
@media(max-width:620px){
  .client-status-tabs{gap:.6rem}
  .client-status-tab{min-height:76px}
  .client-results-panel{margin-top:.1rem}
}