:root {
  --navy-950: #101828;
  --navy-900: #172033;
  --navy-800: #24324a;
  --ink: #1d2939;
  --muted: #667085;
  --muted-2: #98a2b3;
  --line: #d8dee9;
  --line-strong: #c3ccd9;
  --surface: #ffffff;
  --canvas: #f4f6f8;
  --soft: #eef2f6;
  --accent: #d94b78;
  --accent-dark: #b62f5b;
  --teal: #0e7188;
  --teal-soft: #e5f4f6;
  --success: #14866d;
  --success-soft: #e7f7f1;
  --warning: #c97a17;
  --warning-soft: #fff4dc;
  --danger: #c9364e;
  --danger-soft: #fff0f2;
  --shadow-sm: 0 2px 8px rgba(16, 24, 40, .06);
  --shadow-md: 0 12px 32px rgba(16, 24, 40, .1);
  --sidebar-width: 256px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: Inter, "Segoe UI", Arial, sans-serif; color: var(--ink); background: var(--canvas); }
body, button, input, textarea, select { font-size: 14px; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; }
button { cursor: pointer; }
img { max-width: 100%; display: block; }
.icon { width: 18px; height: 18px; flex: 0 0 auto; }
.muted { color: var(--muted); }
.text-right { text-align: right; }
.hide-mobile { display: initial; }

/* Public website */
.site-header {
  position: sticky;
  z-index: 40;
  top: 0;
  min-height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  padding: 10px max(28px, calc((100vw - 1240px) / 2));
  color: #fff;
  background: rgba(16, 24, 40, .96);
  border-bottom: 1px solid rgba(255, 255, 255, .1);
}
.site-brand { display: inline-flex; align-items: center; gap: 12px; min-width: 190px; }
.site-brand img { width: 58px; height: 46px; object-fit: cover; border-radius: 7px; background: #020305; }
.site-brand span { display: grid; gap: 1px; }
.site-brand b { font-size: 18px; }
.site-brand small { color: #b9c4d6; font-size: 11px; }
.site-header nav { display: flex; align-items: center; gap: 28px; color: #dbe3ef; font-size: 13px; font-weight: 700; }
.site-header nav a { padding: 12px 0; border-bottom: 2px solid transparent; }
.site-header nav a:hover { color: #fff; border-color: var(--accent); }
.site-header-actions { display: flex; align-items: center; gap: 10px; }
.site-status { display: inline-flex; align-items: center; gap: 7px; color: #dbe3ef; font-size: 12px; font-weight: 700; }
.status-dot { width: 8px; height: 8px; border-radius: 50%; background: #35c897; box-shadow: 0 0 0 4px rgba(53, 200, 151, .12); }

.hero {
  position: relative;
  min-height: 690px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  color: #fff;
  background-color: var(--navy-950);
  background-image: url('pos-hero-20260722.png');
  background-size: cover;
  background-position: center top;
}
.hero::before { content: ""; position: absolute; inset: 0; background: rgba(11, 18, 31, .78); }
.hero-inner { position: relative; width: min(1240px, calc(100% - 56px)); margin: 0 auto; padding: 96px 0 88px; }
.hero-kicker, .section-kicker { display: inline-flex; align-items: center; gap: 8px; color: #f7a7c0; font-size: 11px; font-weight: 900; text-transform: uppercase; }
.hero-kicker::before, .section-kicker::before { content: ""; width: 24px; height: 2px; background: currentColor; }
.hero h1 { max-width: 820px; margin: 18px 0 16px; font-size: 64px; line-height: 1.02; letter-spacing: 0; }
.hero h1 span { color: #ffc3d5; }
.hero p { max-width: 680px; margin: 0; color: #e0e6ef; font-size: 18px; line-height: 1.6; }
.hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.hero-proof { display: flex; flex-wrap: wrap; gap: 26px; margin-top: 44px; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, .18); }
.hero-proof div { display: grid; gap: 3px; }
.hero-proof strong { font-size: 20px; }
.hero-proof span { color: #bdc8d9; font-size: 12px; }

.button, .action-button, .admin-form button, .support-form button {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 0 16px;
  font-weight: 800;
  line-height: 1;
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease, border-color .16s ease;
}
.button:hover, .action-button:hover, .admin-form button:hover, .support-form button:hover { transform: translateY(-1px); }
.button.primary, .action-button.primary, .admin-form button, .support-form button { color: #fff; background: var(--accent); border-color: var(--accent); box-shadow: 0 8px 20px rgba(217, 75, 120, .22); }
.button.primary:hover, .action-button.primary:hover, .admin-form button:hover, .support-form button:hover { background: var(--accent-dark); border-color: var(--accent-dark); }
.button.secondary { color: #fff; background: rgba(255, 255, 255, .09); border-color: rgba(255, 255, 255, .35); }
.button.ghost, .action-button { color: var(--navy-800); background: #fff; border-color: var(--line-strong); }
.button.ghost:hover, .action-button:hover { background: var(--soft); border-color: #9ba8ba; }
.button.danger { color: var(--danger); background: #fff; border-color: #efb5be; }

.public-section { padding: 80px max(28px, calc((100vw - 1240px) / 2)); }
.public-section.white { background: #fff; }
.services-showcase {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at top left, rgba(14, 113, 136, .08), transparent 28%),
    radial-gradient(circle at bottom right, rgba(217, 75, 120, .08), transparent 26%),
    linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}
.services-showcase::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: linear-gradient(rgba(152, 162, 179, .12) 1px, transparent 1px), linear-gradient(90deg, rgba(152, 162, 179, .12) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: linear-gradient(180deg, rgba(0,0,0,.16), transparent 85%);
}
.services-showcase-shell {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 28px;
}
.section-heading { max-width: 720px; margin-bottom: 34px; }
.section-heading-split { max-width: none; display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 24px; align-items: end; }
.section-heading h2 { margin: 12px 0 12px; color: var(--navy-950); font-size: 38px; line-height: 1.12; }
.section-heading p { margin: 0; color: var(--muted); font-size: 16px; line-height: 1.65; }
.section-aside-card { display: grid; gap: 8px; padding: 20px; border: 1px solid var(--line); border-radius: 8px; background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%); box-shadow: var(--shadow-sm); }
.section-aside-card strong { color: var(--navy-950); font-size: 16px; }
.section-aside-card p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.6; }
.services-showcase-head { margin-bottom: 0; }
.services-aside-card {
  gap: 14px;
  border-color: rgba(36, 50, 74, .12);
  border-radius: 14px;
  background: rgba(255, 255, 255, .86);
  backdrop-filter: blur(10px);
}
.services-aside-points { display: grid; gap: 10px; }
.services-aside-points span {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #344054;
  font-size: 12px;
  font-weight: 700;
}
.services-aside-points .icon { width: 15px; height: 15px; color: var(--teal); }
.pillar-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--line); background: #fff; box-shadow: var(--shadow-sm); }
.pillar { min-height: 250px; padding: 30px; border-right: 1px solid var(--line); }
.pillar:last-child { border-right: 0; }
.pillar-icon { width: 42px; height: 42px; display: grid; place-items: center; margin-bottom: 34px; color: #fff; background: var(--teal); border-radius: 6px; }
.pillar:nth-child(2) .pillar-icon { background: var(--accent); }
.pillar:nth-child(3) .pillar-icon { background: var(--navy-800); }
.pillar h3 { margin: 0 0 10px; color: var(--navy-950); font-size: 24px; }
.pillar p { margin: 0; color: var(--muted); line-height: 1.55; }

.product-band { display: grid; grid-template-columns: minmax(0, .85fr) minmax(480px, 1.15fr); gap: 56px; align-items: center; }
.product-band-copy h2 { margin: 12px 0; font-size: 40px; line-height: 1.12; color: var(--navy-950); }
.product-band-copy > p { color: var(--muted); font-size: 16px; line-height: 1.65; }
.check-list { display: grid; gap: 14px; margin-top: 26px; }
.check-list div { display: flex; align-items: flex-start; gap: 12px; }
.check-list .icon { margin-top: 2px; color: var(--success); }
.check-list b { display: block; margin-bottom: 3px; }
.check-list small { color: var(--muted); font-size: 13px; line-height: 1.45; }
.product-shot { overflow: hidden; border: 1px solid var(--line-strong); background: #fff; box-shadow: var(--shadow-md); }
.shot-bar { height: 34px; display: flex; align-items: center; gap: 6px; padding: 0 12px; background: var(--navy-900); }
.shot-bar i { width: 8px; height: 8px; border-radius: 50%; background: #fff; opacity: .45; }
.product-shot img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; object-position: top left; }

.operation-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.operation-item { min-height: 180px; display: grid; grid-template-columns: 44px 1fr; gap: 18px; padding: 26px; background: var(--canvas); }
.operation-item .icon { width: 28px; height: 28px; color: var(--teal); }
.operation-item h3 { margin: 0 0 8px; font-size: 18px; }
.operation-item p { margin: 0; color: var(--muted); line-height: 1.55; }

.plans-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.plan { position: relative; min-height: 300px; display: flex; flex-direction: column; overflow: hidden; padding: 28px; border: 1px solid var(--line); border-radius: 14px; background: #fff; box-shadow: 0 14px 34px rgba(16, 24, 40, .08); transition: transform .24s ease, box-shadow .24s ease, border-color .24s ease; }
.plan::before { content: ""; position: absolute; inset: 0 0 auto; height: 4px; background: linear-gradient(90deg, var(--teal), var(--accent)); opacity: .78; }
.plan:hover { transform: translateY(-5px); border-color: rgba(14, 113, 136, .3); box-shadow: 0 22px 48px rgba(16, 24, 40, .14); }
.plan.featured { border: 2px solid var(--teal); background: linear-gradient(180deg, #fff 0%, #f3fbfc 100%); }
.plan-label { align-self: flex-start; margin-bottom: 20px; padding: 5px 8px; color: var(--teal); background: var(--teal-soft); border-radius: 4px; font-size: 10px; font-weight: 900; text-transform: uppercase; }
.plan-head { display: grid; gap: 10px; }
.plan h3 { margin: 0; font-size: 24px; }
.plan > p { min-height: 48px; color: var(--muted); line-height: 1.5; }
.plan-price { display: flex; align-items: baseline; gap: 8px; margin-top: 8px; color: var(--navy-950); font-size: 28px; font-weight: 900; }
.plan-price small { color: var(--muted); font-size: 12px; font-weight: 700; }
.plan-capacity { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.plan-capacity span { display: inline-flex; align-items: center; min-height: 28px; padding: 0 10px; border: 1px solid var(--line); border-radius: 999px; color: #344054; background: #f8fafc; font-size: 11px; font-weight: 800; }
.plan ul { display: grid; gap: 11px; margin: 18px 0 28px; padding: 0; list-style: none; }
.plan li { display: flex; gap: 9px; color: #344054; }
.plan li .icon { color: var(--success); }
.plan .button { margin-top: auto; }

.service-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.service-card {
  position: relative;
  min-height: 320px;
  display: grid;
  gap: 18px;
  align-content: start;
  padding: 26px;
  border: 1px solid rgba(36, 50, 74, .1);
  border-radius: 18px;
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 18px 38px rgba(16, 24, 40, .08);
  backdrop-filter: blur(12px);
  transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease, background .28s ease;
}
.service-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  border-radius: 18px 18px 0 0;
  background: linear-gradient(90deg, var(--teal) 0%, var(--accent) 100%);
  opacity: .9;
}
.service-card:hover {
  transform: translateY(-6px);
  border-color: rgba(14, 113, 136, .22);
  box-shadow: 0 24px 52px rgba(16, 24, 40, .14);
}
.service-card.highlighted {
  border-color: rgba(14, 113, 136, .24);
  background: linear-gradient(180deg, rgba(255,255,255,.98) 0%, rgba(240,250,252,.96) 100%);
}
.service-card-head { display: grid; gap: 12px; }
.service-card-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.service-icon {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  color: var(--teal);
  background: linear-gradient(180deg, #ffffff 0%, #e6f6f8 100%);
  border: 1px solid rgba(14, 113, 136, .14);
  border-radius: 14px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9);
}
.service-icon .icon { width: 22px; height: 22px; }
.service-badge {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 0 11px;
  border-radius: 999px;
  color: var(--teal);
  background: var(--teal-soft);
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}
.service-badge-alt {
  color: var(--accent-dark);
  background: #ffedf3;
}
.service-card strong { color: var(--navy-950); font-size: 24px; line-height: 1.18; }
.service-card p { margin: 0; color: var(--muted); line-height: 1.7; font-size: 15px; }
.service-points {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.service-points li {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #344054;
  font-size: 12px;
  font-weight: 700;
}
.service-points .icon { width: 15px; height: 15px; color: var(--success); }
.service-meta {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid rgba(36, 50, 74, .08);
}
.service-meta span { color: var(--navy-950); font-size: 28px; font-weight: 900; }
.service-meta small { color: var(--muted); font-size: 11px; font-weight: 800; text-transform: uppercase; }
.service-card .button {
  min-height: 44px;
  border-radius: 10px;
  transition: transform .22s ease, box-shadow .22s ease, background .22s ease, border-color .22s ease, color .22s ease;
}
.service-card:hover .button {
  transform: translateY(-1px);
  border-color: rgba(14, 113, 136, .24);
}
[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity .7s ease,
    transform .7s cubic-bezier(.22, 1, .36, 1);
  transition-delay: var(--reveal-delay, 0ms);
}
[data-reveal="up"].is-visible {
  opacity: 1;
  transform: translateY(0);
}

.support-layout { display: grid; grid-template-columns: minmax(300px, .75fr) minmax(0, 1.25fr); gap: 48px; align-items: start; }
.support-copy h2 { margin: 12px 0; font-size: 38px; }
.support-copy p { color: var(--muted); line-height: 1.6; }
.support-note { display: flex; gap: 12px; margin-top: 26px; padding: 18px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.support-note .icon { color: var(--accent); }
.support-note b, .support-note small { display: block; }
.support-note small { margin-top: 3px; color: var(--muted); }
.support-form { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding: 28px; border: 1px solid var(--line); background: #fff; box-shadow: var(--shadow-sm); }
.support-form label, .admin-form label, .field-label { display: grid; gap: 7px; min-width: 0; color: #475467; font-size: 11px; font-weight: 800; text-transform: uppercase; }
.support-form .full, .form-section, .form-actions { grid-column: 1 / -1; }
input, textarea, select {
  width: 100%;
  min-height: 40px;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  padding: 9px 11px;
  color: var(--ink);
  background: #fff;
  outline: 0;
}
textarea { min-height: 96px; resize: vertical; }
input:focus, textarea:focus, select:focus { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(14, 113, 136, .12); }
.form-status { grid-column: 1 / -1; padding: 11px 13px; border: 1px solid #a9dfcc; color: #0c654f; background: var(--success-soft); border-radius: 6px; font-weight: 700; }
.form-status.error { border-color: #efb5be; color: var(--danger); background: var(--danger-soft); }
.site-footer { color: #dce4ef; background: var(--navy-950); }
.footer-inner { width: min(1240px, calc(100% - 56px)); min-height: 130px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 30px; }
.footer-brand { display: flex; align-items: center; gap: 14px; }
.footer-brand img { width: 58px; height: 46px; object-fit: cover; border-radius: 7px; }
.footer-brand b, .footer-brand small { display: block; }
.footer-brand small { margin-top: 3px; color: #98a5b8; }
.footer-links { display: flex; gap: 22px; color: #b9c4d6; font-size: 13px; }

/* Admin shell */
.admin-body { min-width: 320px; overflow-x: hidden; background: var(--canvas); }
.admin-app { min-height: 100vh; display: grid; grid-template-columns: var(--sidebar-width) minmax(0, 1fr); }
.admin-sidebar { position: sticky; z-index: 60; top: 0; height: 100vh; display: grid; grid-template-rows: auto minmax(0, 1fr) auto auto; color: #fff; background: var(--navy-950); border-right: 1px solid rgba(255, 255, 255, .08); }
.admin-brand-row { min-height: 78px; display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid rgba(255, 255, 255, .09); }
.admin-brand { display: flex; align-items: center; gap: 11px; min-width: 0; }
.admin-brand img { width: 48px; height: 40px; object-fit: cover; border-radius: 6px; background: #000; }
.admin-brand span { min-width: 0; display: grid; }
.admin-brand b { font-size: 17px; }
.admin-brand small { color: #9facc0; font-size: 11px; }
.admin-nav { min-height: 0; overflow-y: auto; padding: 12px 10px; scrollbar-width: thin; scrollbar-color: #4d5a70 transparent; }
.nav-group { display: grid; gap: 3px; margin-bottom: 15px; }
.nav-group-title { padding: 6px 10px 4px; color: #748198; font-size: 10px; font-weight: 900; text-transform: uppercase; }
.admin-nav a, .admin-sidebar footer a { min-height: 40px; display: flex; align-items: center; gap: 11px; padding: 0 11px; color: #bac5d5; border-radius: 6px; font-size: 13px; font-weight: 700; }
.admin-nav a:hover, .admin-sidebar footer a:hover { color: #fff; background: rgba(255, 255, 255, .07); }
.admin-nav a.active { color: #fff; background: #26354d; box-shadow: inset 3px 0 0 var(--accent); }
.admin-nav .icon, .admin-sidebar footer .icon { width: 17px; height: 17px; }
.sidebar-status { display: flex; align-items: center; gap: 10px; margin: 0 14px 10px; padding: 12px; border: 1px solid rgba(255, 255, 255, .09); background: rgba(255, 255, 255, .04); border-radius: 6px; }
.sidebar-status b, .sidebar-status small { display: block; }
.sidebar-status b { font-size: 12px; }
.sidebar-status small { margin-top: 2px; color: #92a0b5; font-size: 10px; }
.admin-sidebar footer { display: grid; gap: 2px; padding: 10px; border-top: 1px solid rgba(255, 255, 255, .09); }
.admin-sidebar footer a { min-height: 34px; font-size: 12px; }
.sidebar-close { display: none; color: #fff; background: transparent; border-color: rgba(255, 255, 255, .14); }
.sidebar-scrim { display: none; }

.admin-shell { min-width: 0; min-height: 100vh; }
.admin-topbar { min-height: 78px; display: flex; align-items: center; gap: 16px; padding: 13px 24px; background: #fff; border-bottom: 1px solid var(--line); }
.page-heading { min-width: 0; flex: 1; }
.page-heading > span { display: block; color: var(--accent-dark); font-size: 10px; font-weight: 900; text-transform: uppercase; }
.page-heading h1 { margin: 3px 0 0; color: var(--navy-950); font-size: 24px; line-height: 1.2; }
.page-heading p { margin: 3px 0 0; color: var(--muted); font-size: 12px; }
.admin-account { display: flex; align-items: center; gap: 10px; padding-left: 18px; border-left: 1px solid var(--line); }
.admin-account > span:last-child { display: grid; }
.admin-account b { font-size: 12px; }
.admin-account small { margin-top: 2px; color: var(--muted); font-size: 10px; }
.account-avatar { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: var(--teal); font-weight: 900; }
.icon-button { width: 38px; height: 38px; display: inline-grid; place-items: center; flex: 0 0 auto; border: 1px solid var(--line); border-radius: 6px; color: var(--navy-800); background: #fff; }
.icon-button:hover { background: var(--soft); }
.icon-button.sidebar-close { display: none; }
.menu-button { display: none; }
.admin-content { min-width: 0; display: grid; gap: 18px; padding: 22px 24px 32px; }

/* Admin page components */
.page-actions { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.page-actions-copy h2 { margin: 0; color: var(--navy-950); font-size: 18px; }
.page-actions-copy p { margin: 4px 0 0; color: var(--muted); font-size: 12px; }
.page-actions-buttons { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.search-box { position: relative; width: min(340px, 100%); }
.search-box .icon { position: absolute; top: 50%; left: 11px; transform: translateY(-50%); color: var(--muted-2); pointer-events: none; }
.search-box input { padding-left: 36px; }
.flash { display: flex; align-items: center; gap: 10px; border: 1px solid #a9dfcc; border-radius: 6px; padding: 12px 14px; color: #0b684d; background: var(--success-soft); font-weight: 700; }
.flash.error { color: var(--danger); background: var(--danger-soft); border-color: #efb5be; }
.flash .icon { width: 17px; }

.metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.metric-card { min-width: 0; display: grid; grid-template-columns: 42px 1fr; gap: 14px; align-items: center; padding: 18px; border: 1px solid var(--line); border-radius: 7px; background: #fff; box-shadow: var(--shadow-sm); }
.metric-icon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 6px; color: var(--teal); background: var(--teal-soft); }
.metric-card:nth-child(2) .metric-icon { color: var(--accent-dark); background: #ffedf3; }
.metric-card:nth-child(3) .metric-icon { color: #4e5f78; background: #edf1f6; }
.metric-card:nth-child(4) .metric-icon { color: var(--warning); background: var(--warning-soft); }
.metric-card small { display: block; color: var(--muted); font-size: 10px; font-weight: 900; text-transform: uppercase; }
.metric-card strong { display: block; margin-top: 3px; color: var(--navy-950); font-size: 26px; }
.metric-card a { margin-top: 3px; display: inline-flex; align-items: center; gap: 4px; color: var(--teal); font-size: 11px; font-weight: 800; }
.metric-card a .icon { width: 12px; height: 12px; }

.admin-layout { min-width: 0; display: grid; grid-template-columns: minmax(280px, 340px) minmax(0, 1fr); gap: 16px; align-items: start; }
.admin-layout.wide-form { grid-template-columns: minmax(340px, 430px) minmax(0, 1fr); }
.admin-two-panels { min-width: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.panel, .admin-form, .table-card { min-width: 0; border: 1px solid var(--line); border-radius: 7px; background: #fff; box-shadow: var(--shadow-sm); }
.panel-head, .table-card-head, .form-head { min-height: 58px; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 13px 16px; border-bottom: 1px solid var(--line); }
.panel-head h2, .table-card-head h2, .form-head h2 { margin: 0; color: var(--navy-950); font-size: 15px; }
.panel-head p, .table-card-head p, .form-head p { margin: 3px 0 0; color: var(--muted); font-size: 11px; }
.panel-body { padding: 16px; }
.admin-form { display: grid; grid-template-columns: 1fr; gap: 13px; padding: 0 16px 16px; }
.admin-form .form-head { margin: 0 -16px; }
.admin-form.narrow { width: min(560px, 100%); }
.security-panel { max-width: 620px; }
.admin-form.unstyled-form { width: 100%; border: 0; box-shadow: none; }
.admin-form.two-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.admin-form textarea { min-height: 82px; }
.admin-form .check-label { min-height: 40px; display: flex; align-items: center; gap: 9px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 6px; color: var(--ink); background: var(--soft); text-transform: none; }
.check-label input { width: 16px; min-height: 16px; margin: 0; }
.form-actions { display: flex; align-items: center; justify-content: flex-end; gap: 9px; padding-top: 3px; }
.form-actions button { min-width: 140px; }
.form-hint { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.45; }

.table-card { overflow: hidden; }
.table-card-head .search-box { width: min(280px, 46%); }
.table-wrap { width: 100%; overflow: auto; max-height: min(540px, calc(100vh - 250px)); scrollbar-width: thin; scrollbar-color: #aeb8c7 #edf1f5; }
.table-wrap::-webkit-scrollbar { width: 10px; height: 10px; }
.table-wrap::-webkit-scrollbar-track { background: #edf1f5; }
.table-wrap::-webkit-scrollbar-thumb { background: #aeb8c7; border: 2px solid #edf1f5; border-radius: 8px; }
table { width: 100%; border-collapse: collapse; font-size: 12px; }
th, td { padding: 11px 13px; border-bottom: 1px solid #e5e9f0; text-align: left; vertical-align: middle; }
th { position: sticky; z-index: 2; top: 0; color: #59667a; background: #f5f7fa; font-size: 10px; font-weight: 900; text-transform: uppercase; white-space: nowrap; }
tbody tr { background: #fff; }
tbody tr:hover { background: #fafbfd; }
tbody tr:last-child td { border-bottom: 0; }
td strong { color: var(--navy-950); }
td small { display: block; max-width: 360px; margin-top: 3px; overflow-wrap: anywhere; color: var(--muted); font-size: 10px; line-height: 1.35; }
.cell-main { display: flex; align-items: center; gap: 9px; min-width: 0; }
.cell-avatar { width: 30px; height: 30px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 5px; color: var(--teal); background: var(--teal-soft); font-size: 11px; font-weight: 900; }
.cell-avatar-logo { overflow: hidden; border: 1px solid var(--line); padding: 0; background: #fff; cursor: zoom-in; }
.cell-avatar-logo img { width: 100%; height: 100%; display: block; object-fit: contain; }
.cell-avatar-logo:hover { border-color: var(--teal); box-shadow: 0 6px 16px rgba(14, 113, 136, .18); transform: translateY(-1px); }
.client-logo-viewer { display: none !important; z-index: 180; }
.client-logo-viewer:not([hidden]) { display: grid !important; }
.client-logo-card { width: min(560px, 100%); }
.client-logo-preview { min-height: 360px; display: grid; place-items: center; padding: 28px; background: #f5f7fa; }
.client-logo-preview img { max-width: 100%; max-height: min(520px, 65vh); object-fit: contain; filter: drop-shadow(0 14px 24px rgba(16, 24, 40, .12)); }
.modal-close-button { display: grid; place-items: center; padding: 0; font-size: 24px; line-height: 1; }
.empty-state { min-height: 180px; display: grid; place-items: center; padding: 30px; text-align: center; }
.empty-state .icon { width: 30px; height: 30px; margin: 0 auto 10px; color: var(--muted-2); }
.empty-state b { display: block; }
.empty-state p { margin: 5px 0 0; color: var(--muted); font-size: 12px; }
.pill { display: inline-flex; align-items: center; gap: 5px; min-height: 24px; padding: 3px 8px; border-radius: 999px; color: #475467; background: #edf1f5; font-size: 10px; font-weight: 900; white-space: nowrap; }
.pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .7; }
/* Cada estado que status_label() sabe nombrar tiene que tener su familia de color aca. Si falta,
   el badge cae al gris base y "Clave invalida" termina viendose igual que "Pagado". Once estados
   estaban asi: los de cobros -pendiente, pagado, vencido, cotizado, pausado-, el de tickets
   -abierto- y los que devuelve el endpoint de licencia -en gracia, sin cupo, clave invalida, sin
   clave, lugar liberado-. */
.pill.active, .pill.success, .pill.closed, .pill.paid { color: #0b684d; background: var(--success-soft); }
.pill.trial, .pill.working, .pill.normal, .pill.grace, .pill.pending, .pill.quoted, .pill.open, .pill.missing { color: #8a5711; background: var(--warning-soft); }
.pill.suspended, .pill.expired, .pill.cancelled, .pill.error, .pill.urgent, .pill.overdue, .pill.device_limit, .pill.invalid, .pill.sin_ubicaciones { color: var(--danger); background: var(--danger-soft); }
/* Neutros: describen algo ya resuelto o que no exige accion. Un lugar liberado no es una falla,
   es el sistema haciendo lo suyo. */
.pill.inactive, .pill.paused, .pill.released { color: #59667a; background: #edf1f5; }
.inline-actions,
.table-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, max-content));
  align-items: start;
  justify-content: start;
  gap: 8px;
  min-width: 0;
}
.inline-actions form,
.table-actions form { margin: 0; }
.inline-actions .action-button,
.table-actions .button,
.table-actions .action-button {
  min-width: 0;
  min-height: 34px;
  padding: 0 12px;
}
.inline-actions > .pill,
.table-actions > .pill {
  width: fit-content;
}
.table-status-form {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(140px, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.table-status-form select {
  min-width: 0;
  width: 100%;
  min-height: 34px;
  padding: 6px 8px;
}
.form-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  padding: 12px 16px 0;
}
.form-toolbar .pill { flex: 0 0 auto; }
.record-note {
  margin: 0;
  padding: 11px 12px;
  border: 1px dashed var(--line-strong);
  border-radius: 6px;
  color: var(--muted);
  background: #fafbfd;
  font-size: 11px;
  line-height: 1.5;
}
.form-inline-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 13px;
}
.form-inline-grid .full { grid-column: 1 / -1; }
.table-logo {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}
.table-logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.table-logo-fallback {
  color: var(--muted);
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}
.data-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 15px; color: var(--muted); background: #fafbfd; border-top: 1px solid var(--line); font-size: 11px; }
code { border-radius: 4px; padding: 2px 5px; color: #344054; background: #edf1f5; }

.modal-open { overflow: hidden; }
.modal-shell[hidden] { display: none !important; }
.modal-shell { position: fixed; z-index: 120; inset: 0; display: grid; place-items: center; padding: 24px; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(16, 24, 40, .58); }
.modal-card { position: relative; width: min(1080px, 100%); max-height: calc(100vh - 48px); display: grid; grid-template-rows: auto minmax(0, 1fr); overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: #fff; box-shadow: 0 28px 70px rgba(16, 24, 40, .24); }
.modal-head { min-height: 68px; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 16px 18px; border-bottom: 1px solid var(--line); }
.modal-head h2 { margin: 0; color: var(--navy-950); font-size: 18px; }
.modal-head p { margin: 4px 0 0; color: var(--muted); font-size: 12px; }
.modal-body { min-height: 0; overflow: auto; padding: 18px; scrollbar-width: thin; scrollbar-color: #aeb8c7 #edf1f5; }
.modal-split { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(320px, .8fr); gap: 18px; align-items: start; }
.modal-panel { min-width: 0; border: 1px solid var(--line); border-radius: 8px; background: #fff; overflow: hidden; }
.modal-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; padding: 0 16px 16px; }
.modal-form-grid .panel-head { grid-column: 1 / -1; margin: 0 -16px; }
#plans-modal .modal-card { width: min(1220px, 100%); }
#plans-modal .modal-split { grid-template-columns: minmax(0, 1.12fr) minmax(390px, .88fr); }
#plans-modal .modal-panel { min-height: 0; }
#plans-modal .stack-list { max-height: calc(100vh - 190px); overflow: auto; }
#plans-modal .modal-form-grid { align-content: start; }
#plans-modal .check-label { min-height: 42px; align-self: end; }
#plans-modal .modal-head .icon-button { display: grid; place-items: center; padding: 0; font-size: 24px; line-height: 1; }
.stack-list { display: grid; gap: 12px; padding: 16px; }
.stack-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 14px; border: 1px solid var(--line); border-radius: 8px; background: #fafbfd; }
.stack-item-copy { min-width: 0; display: grid; gap: 6px; }
.stack-item-title { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.stack-item-copy strong { color: var(--navy-950); font-size: 15px; }
.stack-item-copy p { margin: 0; color: var(--ink); font-size: 13px; line-height: 1.5; }
.stack-item-copy small { color: var(--muted); font-size: 11px; line-height: 1.45; }
.stack-item-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.stack-item-actions form { margin: 0; }
.capacity-table td { vertical-align: top; }
.capacity-meter { display: grid; gap: 10px; min-width: 180px; }
.capacity-meter-copy { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.capacity-meter-copy strong { color: var(--navy-950); font-size: 18px; }
.capacity-meter-copy small { color: var(--muted); font-size: 10px; font-weight: 800; text-transform: uppercase; }
.capacity-bar { height: 10px; overflow: hidden; border-radius: 999px; background: #e8edf4; }
.capacity-bar span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--teal) 0%, #34b4cf 100%); }

.activity-list { display: grid; }
.activity-row { display: grid; grid-template-columns: 34px 1fr auto; gap: 11px; align-items: center; padding: 13px 16px; border-bottom: 1px solid var(--line); }
.activity-row:last-child { border-bottom: 0; }
.activity-row > .icon { width: 32px; height: 32px; padding: 7px; border-radius: 6px; color: var(--teal); background: var(--teal-soft); }
.activity-row b, .activity-row small { display: block; }
.activity-row b { font-size: 12px; }
.activity-row small { margin-top: 3px; color: var(--muted); font-size: 10px; }
.key-value-list { display: grid; gap: 10px; }
.key-value-list > div { display: grid; gap: 5px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.key-value-list > div:last-child { border-bottom: 0; }
.key-value-list span { color: var(--muted); font-size: 11px; font-weight: 800; text-transform: uppercase; }
.key-value-list strong { color: var(--navy-950); font-size: 18px; }
.production-panel { overflow: hidden; }
.production-download { display: grid; gap: 8px; }
.production-download strong { font-size: 26px; color: var(--navy-950); }
.production-download span { color: var(--ink); font-weight: 700; }
.production-inline { display: flex; flex-wrap: wrap; gap: 8px; }
.production-priority-list { display: grid; gap: 12px; }
.production-priority-item { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 16px; border: 1px solid #efb5be; border-radius: 7px; background: #fff7f8; }
.production-priority-copy { min-width: 0; display: grid; gap: 8px; }
.production-priority-copy h3 { margin: 0; color: var(--navy-950); font-size: 18px; line-height: 1.25; }
.production-priority-copy p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.55; }
.production-list { display: grid; gap: 14px; }
.production-checklist-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.production-check-card { min-width: 0; display: grid; gap: 14px; padding: 18px; border: 1px solid var(--line); border-radius: 10px; background: #fff; box-shadow: var(--shadow-sm); }
.production-check-card.ok { border-color: #b7e4d3; background: #fbfefc; }
.production-check-card.error { border-color: #efb5be; background: #fffafb; }
.production-check-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.production-check-body { display: grid; gap: 6px; }
.production-check-body small { color: var(--muted); font-size: 10px; font-weight: 900; text-transform: uppercase; }
.production-check-body h3 { margin: 0; color: var(--navy-950); font-size: 17px; line-height: 1.3; }
.production-check-body p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.6; }
.production-check-action { display: flex; justify-content: flex-start; }
.production-row { min-width: 0; display: grid; grid-template-columns: 140px minmax(0, 1fr) auto; gap: 18px; align-items: center; padding: 18px; border: 1px solid var(--line); border-radius: 7px; background: #fff; }
.production-row.ok { border-color: #b7e4d3; background: #fbfefc; }
.production-row.error { border-color: #efb5be; background: #fffafb; }
.production-row-status { display: grid; gap: 10px; justify-items: start; }
.production-row-icon { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 6px; }
.production-row.ok .production-row-icon { color: var(--success); background: var(--success-soft); }
.production-row.error .production-row-icon { color: var(--danger); background: var(--danger-soft); }
.production-row-main { min-width: 0; display: grid; gap: 5px; }
.production-row-main small { color: var(--muted); font-size: 10px; font-weight: 900; text-transform: uppercase; }
.production-row-main h3 { margin: 0; color: var(--navy-950); font-size: 16px; line-height: 1.3; }
.production-row-main p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.55; }
.production-row-action { display: flex; align-items: center; justify-content: flex-end; }
.production-row-action .button { min-width: 200px; }
.ordered-notes { display: grid; gap: 12px; }
.ordered-notes > div { display: grid; grid-template-columns: 30px 1fr; gap: 12px; align-items: start; }
.ordered-notes strong { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: var(--teal); }
.ordered-notes span { color: var(--ink); line-height: 1.55; }

/* Login */
.login-page { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(420px, 520px); background: var(--navy-950); }
.login-visual { position: relative; display: flex; align-items: flex-end; min-height: 100vh; overflow: hidden; padding: 52px; color: #fff; background-image: url('login-preview-20260722.png'); background-size: cover; background-position: top left; }
.login-visual::before { content: ""; position: absolute; inset: 0; background: rgba(16, 24, 40, .82); }
.login-visual-content { position: relative; max-width: 560px; }
.login-visual img { width: 92px; height: 72px; object-fit: cover; margin-bottom: 28px; border-radius: 7px; }
.login-visual h2 { margin: 0 0 12px; font-size: 36px; line-height: 1.12; }
.login-visual p { margin: 0; color: #c4cedd; font-size: 15px; line-height: 1.6; }
.login-panel { min-height: 100vh; display: grid; place-items: center; padding: 36px; background: #fff; }
.login-card { width: min(390px, 100%); display: grid; gap: 16px; }
.login-card-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; }
.login-card-brand img { width: 58px; height: 46px; object-fit: cover; border-radius: 6px; background: #000; }
.login-card-brand b, .login-card-brand small { display: block; }
.login-card-brand b { font-size: 18px; }
.login-card-brand small { margin-top: 2px; color: var(--muted); font-size: 11px; }
.login-card .eyebrow { color: var(--accent-dark); font-size: 10px; font-weight: 900; text-transform: uppercase; }
.login-card h1 { margin: 3px 0 2px; color: var(--navy-950); font-size: 30px; }
.login-card > p { margin: 0 0 10px; color: var(--muted); line-height: 1.5; }
.login-card label { display: grid; gap: 7px; color: #475467; font-size: 11px; font-weight: 800; text-transform: uppercase; }
.password-field { position: relative; }
.password-field input { padding-right: 46px; }
.password-field .icon-button { position: absolute; top: 1px; right: 1px; width: 38px; height: 38px; border: 0; background: transparent; }
.login-card .action-button { width: 100%; min-height: 44px; }
.security-note { display: flex; gap: 9px; padding-top: 18px; border-top: 1px solid var(--line); color: var(--muted); font-size: 11px; line-height: 1.5; }
.security-note .icon { color: var(--success); }

@media (max-width: 1120px) {
  .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .admin-layout, .admin-layout.wide-form { grid-template-columns: 300px minmax(0, 1fr); }
  .production-priority-item, .production-row { grid-template-columns: 1fr; }
  .product-band { grid-template-columns: 1fr; }
  .product-shot { max-width: 820px; }
  .modal-split { grid-template-columns: 1fr; }
  #plans-modal .modal-split { grid-template-columns: 1fr; }
  .section-heading-split,
  .production-checklist-grid { grid-template-columns: 1fr; }
  .service-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 900px) {
  .site-header nav { display: none; }
  .hero { min-height: 620px; }
  .hero h1 { font-size: 48px; }
  .pillar-grid, .plans-grid, .service-grid { grid-template-columns: 1fr; }
  .pillar { min-height: auto; border-right: 0; border-bottom: 1px solid var(--line); }
  .pillar:last-child { border-bottom: 0; }
  .operation-grid, .support-layout { grid-template-columns: 1fr; }

  .admin-app { grid-template-columns: 1fr; }
  .admin-sidebar { position: fixed; left: 0; transform: translateX(-102%); width: min(var(--sidebar-width), calc(100vw - 44px)); box-shadow: 18px 0 48px rgba(16, 24, 40, .28); transition: transform .2s ease; }
  .sidebar-open .admin-sidebar { transform: translateX(0); }
  .sidebar-scrim { position: fixed; z-index: 50; inset: 0; display: block; pointer-events: none; opacity: 0; background: rgba(16, 24, 40, .54); transition: opacity .2s ease; }
  .sidebar-open .sidebar-scrim { pointer-events: auto; opacity: 1; }
  .icon-button.sidebar-close, .menu-button { display: inline-grid; }
  .admin-layout, .admin-layout.wide-form { grid-template-columns: 1fr; }
  .admin-two-panels { grid-template-columns: 1fr; }
  .admin-form:not(.narrow) { display: none; }
  .admin-form.is-open { display: grid; }
}

@media (max-width: 680px) {
  body, button, input, textarea, select { font-size: 13px; }
  .site-header { min-height: 64px; padding: 8px 18px; }
  .site-brand { min-width: 0; }
  .site-brand img { width: 48px; height: 38px; }
  .site-brand b { font-size: 15px; }
  .site-status { display: none; }
  .site-header-actions .button { min-height: 38px; padding: 0 12px; }
  .hero { min-height: 580px; background-position: 28% top; }
  .hero-inner { width: calc(100% - 36px); padding: 72px 0 54px; }
  .hero h1 { font-size: 39px; }
  .hero p { font-size: 15px; }
  .hero-proof { gap: 18px; }
  .public-section { padding: 56px 18px; }
  .section-heading h2, .product-band-copy h2, .support-copy h2 { font-size: 30px; }
  .services-showcase-shell { gap: 20px; }
  .service-card {
    min-height: 0;
    padding: 22px;
    border-radius: 16px;
  }
  .service-card strong { font-size: 21px; }
  .service-card p { font-size: 14px; }
  .service-meta span { font-size: 24px; }
  .pillar { padding: 24px; }
  .operation-item { grid-template-columns: 1fr; min-height: 0; }
  .support-form { grid-template-columns: 1fr; padding: 20px; }
  .support-form label { grid-column: 1 / -1; }
  .footer-inner { width: calc(100% - 36px); min-height: 170px; flex-direction: column; align-items: flex-start; justify-content: center; }
  .footer-links { flex-wrap: wrap; }

  .admin-topbar { min-height: 68px; padding: 10px 14px; }
  .page-heading h1 { font-size: 20px; }
  .page-heading p { display: none; }
  .admin-account { padding-left: 0; border-left: 0; }
  .admin-account > span:last-child { display: none; }
  .admin-content { padding: 14px; }
  .page-actions { align-items: stretch; flex-direction: column; }
  .page-actions-buttons { width: 100%; }
  .page-actions-buttons .search-box { flex: 1 1 100%; width: 100%; }
  .metric-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .metric-card { grid-template-columns: 34px 1fr; gap: 9px; padding: 13px; }
  .metric-icon { width: 34px; height: 34px; }
  .metric-card strong { font-size: 21px; }
  .metric-card a { display: none; }
  .table-card-head { align-items: stretch; flex-direction: column; }
  .table-card-head .search-box { width: 100%; }
  .table-actions,
  .inline-actions,
  .form-inline-grid { min-width: 0; grid-template-columns: 1fr; }
  .table-status-form { grid-template-columns: 1fr; }
  .table-status-form select { min-width: 0; width: 100%; }
  .production-row { padding: 14px; }
  .production-row-status { justify-items: start; }
  .production-row-action, .production-priority-item > .button { width: 100%; }
  .production-row-action .button, .production-priority-item > .button { width: 100%; min-width: 0; }
  .table-wrap { max-height: 470px; }
  .admin-form.two-cols { grid-template-columns: 1fr; }
  .admin-form.two-cols .form-section, .admin-form.two-cols .form-actions { grid-column: 1; }
  .modal-shell { padding: 12px; }
  .modal-card { max-height: calc(100vh - 24px); }
  .modal-body { padding: 14px; }
  .modal-form-grid, .stack-item { grid-template-columns: 1fr; }
  .stack-item-actions { justify-content: flex-start; }
  .login-page { grid-template-columns: 1fr; background: #fff; }
  .login-visual { display: none; }
  .login-panel { padding: 24px; }
  .hide-mobile { display: none; }
}

@media (max-width: 420px) {
  .metric-grid { grid-template-columns: 1fr; }
  .hero h1 { font-size: 34px; }
  .hero-actions .button { width: 100%; }
}

/* 2026 interface refinement */
.public-menu-button {
  display: none;
  color: #fff;
  border-color: rgba(255, 255, 255, .2);
  background: rgba(255, 255, 255, .06);
}
.public-announcement {
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 8px 24px;
  color: #dce5ef;
  background: #24324a;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  font-size: 12px;
}
.public-announcement strong { color: #fff; }
.public-announcement a { color: #ffb5cb; font-weight: 900; }
.public-process {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
  box-shadow: var(--shadow-sm);
}
.public-process article {
  min-width: 0;
  padding: 28px;
  border-right: 1px solid var(--line);
}
.public-process article:last-child { border-right: 0; }
.public-process-step {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  margin-bottom: 26px;
  border-radius: 8px;
  color: #fff;
  background: var(--navy-800);
  font-weight: 900;
}
.public-process article:nth-child(2) .public-process-step { background: var(--teal); }
.public-process article:nth-child(3) .public-process-step { background: var(--accent); }
.public-process h3 { margin: 0 0 9px; color: var(--navy-950); font-size: 20px; }
.public-process p { margin: 0; color: var(--muted); line-height: 1.6; }
.pillar, .plan, .service-card, .product-shot, .support-form, .operation-grid { border-radius: 8px; }
.pillar-grid { overflow: hidden; border-radius: 8px; }
.pillar, .operation-item { transition: background .18s ease, transform .18s ease; }
.pillar:hover, .operation-item:hover { background: #f8fbfc; }
.service-card { border-radius: 8px; }
.service-card::before { border-radius: 8px 8px 0 0; }

.admin-body {
  --sidebar-width: 270px;
  background: #eef2f6;
}
.admin-sidebar {
  background: #172033;
  box-shadow: 8px 0 28px rgba(16, 24, 40, .08);
}
.admin-brand-row { min-height: 84px; padding: 14px 18px; }
.admin-brand img { width: 54px; height: 44px; }
.admin-nav { padding: 14px 12px 20px; }
.nav-group { gap: 4px; margin-bottom: 18px; }
.nav-group-title { padding: 7px 12px 5px; color: #8492a8; letter-spacing: 0; }
.admin-nav a {
  min-height: 42px;
  padding: 0 12px;
  border-radius: 7px;
  transition: color .16s ease, background .16s ease, transform .16s ease;
}
.admin-nav a:hover { transform: translateX(2px); }
.admin-nav a.active {
  background: #293951;
  box-shadow: inset 3px 0 0 #ef6f9a;
}
.sidebar-status {
  border-radius: 8px;
  background: rgba(255, 255, 255, .055);
}
.admin-topbar {
  position: sticky;
  z-index: 35;
  top: 0;
  min-height: 84px;
  padding: 14px 28px;
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 4px 16px rgba(16, 24, 40, .04);
  backdrop-filter: blur(12px);
}
.page-heading > span { color: var(--teal); }
.page-heading h1 { font-size: 25px; }
.admin-content {
  width: 100%;
  max-width: 1720px;
  margin: 0 auto;
  gap: 20px;
  padding: 24px 28px 40px;
}
.page-actions {
  min-height: 76px;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  box-shadow: var(--shadow-sm);
}
.page-actions-copy h2 { font-size: 19px; }
.page-actions-copy p { max-width: 760px; line-height: 1.55; }
.button, .action-button, .admin-form button, .support-form button {
  border-radius: 7px;
}
.button:active, .action-button:active, .admin-form button:active, .support-form button:active {
  transform: translateY(0) scale(.98);
}
.metric-grid { gap: 14px; }
.metric-card {
  min-height: 112px;
  align-items: start;
  padding: 18px;
  border-radius: 8px;
  box-shadow: 0 6px 18px rgba(16, 24, 40, .055);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.metric-card:hover {
  transform: translateY(-2px);
  border-color: #bdc7d5;
  box-shadow: 0 10px 24px rgba(16, 24, 40, .08);
}
.metric-icon { border-radius: 8px; }
.metric-card strong { font-size: clamp(21px, 2vw, 27px); }
.panel, .admin-form, .table-card {
  border-radius: 8px;
  box-shadow: 0 6px 18px rgba(16, 24, 40, .05);
}
.panel-head, .table-card-head, .form-head {
  min-height: 66px;
  padding: 15px 18px;
  background: #fbfcfd;
}
.panel-head h2, .table-card-head h2, .form-head h2 { font-size: 16px; }
.admin-form { gap: 15px; padding: 0 18px 18px; }
.admin-form .form-head { margin: 0 -18px; }
.admin-form label, .field-label { letter-spacing: 0; }
input, textarea, select {
  min-height: 42px;
  border-radius: 7px;
  transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
input:hover, textarea:hover, select:hover { border-color: #aeb9c8; }
.table-wrap { max-height: min(590px, calc(100vh - 245px)); }
th { height: 42px; background: #eef3f7; color: #475467; }
th, td { padding: 12px 14px; }
tbody tr { transition: background .14s ease; }
tbody tr:nth-child(even) { background: #fcfdfe; }
tbody tr:hover { background: #f1f8fa; }
tbody tr.filter-hidden { display: none; }
.cell-avatar { width: 36px; height: 36px; border-radius: 7px; }
.cell-avatar-logo:hover { transform: scale(1.04); }
.table-actions, .inline-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
}
.table-status-form {
  flex: 1 1 210px;
  grid-column: auto;
  grid-template-columns: minmax(110px, 1fr) auto;
}
.table-actions .button,
.table-actions .action-button,
.inline-actions .button,
.inline-actions .action-button { white-space: nowrap; }
.record-note { border-radius: 7px; }
.data-foot { min-height: 42px; padding: 10px 16px; }

.modal-shell {
  z-index: 160;
  padding: 28px;
  animation: modal-fade .16s ease both;
}
.modal-backdrop {
  background: rgba(13, 21, 35, .66);
  backdrop-filter: blur(5px);
}
.modal-card {
  border-radius: 8px;
  box-shadow: 0 34px 90px rgba(8, 15, 28, .34);
  animation: modal-rise .22s cubic-bezier(.2, .8, .2, 1) both;
}
.modal-head {
  min-height: 76px;
  padding: 17px 20px;
  background: #fbfcfd;
}
.modal-head h2 { font-size: 20px; }
.modal-body { padding: 20px; }
.modal-panel { border-radius: 8px; }
.modal-close-button,
.modal-head .icon-button,
.client-email-close {
  width: 40px;
  min-width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  padding: 0;
  border-radius: 50%;
  font-size: 23px;
  line-height: 1;
}
.modal-feedback {
  position: sticky;
  z-index: 5;
  top: 0;
  margin-bottom: 16px;
  box-shadow: 0 8px 18px rgba(16, 24, 40, .08);
}
.client-email-card,
.client-email-panel,
.client-email-template { border-radius: 8px; }
.client-email-head {
  min-height: 76px;
  padding: 17px 20px;
  background: #fbfcfd;
}
.client-email-body { padding: 20px; }
.client-email-template {
  transition: border-color .16s ease, background .16s ease, transform .16s ease;
}
.client-email-template:hover { transform: translateY(-1px); border-color: #aeb9c8; }
@keyframes modal-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes modal-rise {
  from { opacity: 0; transform: translateY(14px) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.capacity-summary {
  min-width: 260px;
  display: grid;
  gap: 9px;
}
.capacity-line { display: grid; gap: 5px; }
.capacity-line-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: #475467;
  font-size: 10px;
  font-weight: 800;
}
.capacity-line-head strong { color: var(--navy-950); font-size: 11px; }
.capacity-track {
  height: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: #e4e9f0;
}
.capacity-track span {
  display: block;
  width: var(--capacity, 0%);
  height: 100%;
  border-radius: inherit;
  background: var(--teal);
}
.capacity-line.warning .capacity-track span { background: var(--warning); }
.capacity-line.danger .capacity-track span { background: var(--danger); }
.capacity-plan {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 2px;
}
.capacity-plan strong { font-size: 13px; }
.capacity-plan small { color: var(--muted); font-size: 10px; }
.capacity-empty {
  padding: 10px 12px;
  border: 1px dashed var(--line-strong);
  border-radius: 7px;
  color: var(--muted);
  background: #fafbfd;
  font-size: 11px;
}
.dashboard-health-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(300px, .65fr);
  gap: 16px;
}
.dashboard-alert-list { display: grid; gap: 10px; padding: 16px; }
.dashboard-alert {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  gap: 11px;
  align-items: center;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}
.dashboard-alert > .icon {
  width: 34px;
  height: 34px;
  padding: 8px;
  border-radius: 8px;
  color: var(--warning);
  background: var(--warning-soft);
}
.dashboard-alert b, .dashboard-alert small { display: block; }
.dashboard-alert small { margin-top: 3px; color: var(--muted); font-size: 10px; }
.payment-filters { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.payment-filters select { width: auto; min-width: 150px; }
.payment-due { display: grid; gap: 3px; }
.payment-due.overdue strong { color: var(--danger); }
.payment-method-badge {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  margin-top: 4px;
  padding: 3px 8px;
  border-radius: 999px;
  color: #475467;
  background: #edf1f5;
  font-size: 10px;
  font-weight: 800;
}

@media (max-width: 1120px) {
  .dashboard-health-grid { grid-template-columns: 1fr; }
  .public-process { grid-template-columns: 1fr; }
  .public-process article { border-right: 0; border-bottom: 1px solid var(--line); }
  .public-process article:last-child { border-bottom: 0; }
}
@media (max-width: 900px) {
  .public-menu-button { display: inline-grid; }
  .site-header nav[data-public-nav] {
    position: absolute;
    top: 100%;
    right: 16px;
    left: 16px;
    display: none;
    align-items: stretch;
    gap: 2px;
    padding: 10px;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 8px;
    background: #172033;
    box-shadow: 0 18px 42px rgba(8, 15, 28, .3);
  }
  .public-menu-open .site-header nav[data-public-nav] { display: grid; }
  .site-header nav[data-public-nav] a { padding: 12px; border: 0; border-radius: 6px; }
  .site-header nav[data-public-nav] a:hover { background: rgba(255, 255, 255, .07); }
  .admin-content { padding: 20px; }
  .admin-sidebar { box-shadow: none; }
  .sidebar-open .admin-sidebar { box-shadow: 18px 0 48px rgba(16, 24, 40, .28); }
}
@media (max-width: 680px) {
  .public-announcement { align-items: flex-start; flex-direction: column; gap: 3px; padding: 10px 18px; }
  .site-header-actions .site-status { display: none; }
  .admin-content { padding: 14px; }
  .page-actions { padding: 14px; }
  .modal-shell { padding: 10px; }
  .modal-card { max-height: calc(100vh - 20px); }
  .capacity-summary { min-width: 220px; }
  .payment-filters, .payment-filters .search-box, .payment-filters select { width: 100%; }
}

/* TIPO DE UBICACION CON ICONOS
   Un <select> no admite iconos adentro de sus <option>, asi que el tipo pasa a ser un grupo de
   radios con forma de tarjeta. De paso se ven las cuatro opciones juntas con su explicacion, en
   vez de tener que desplegar la lista para saber que hay. */
.type-picker { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; border: 0; margin: 0; padding: 0; }
.type-picker legend { padding: 0 0 7px; font-size: 12px; font-weight: 700; color: var(--muted); }
.type-option { position: relative; margin: 0; cursor: pointer; }
.type-option input { position: absolute; opacity: 0; width: 0; height: 0; }
.type-option-body { display: grid; justify-items: center; gap: 4px; text-align: center; padding: 12px 10px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); transition: border-color .15s, background .15s; }
.type-option-body svg { width: 22px; height: 22px; color: var(--muted); }
.type-option-body b { font-size: 13px; }
.type-option-body small { font-size: 10.5px; line-height: 1.35; color: var(--muted); }
.type-option:hover .type-option-body { border-color: var(--border-strong, var(--border)); }
.type-option input:checked + .type-option-body { border-color: var(--primary); background: rgba(37,99,235,.08); }
.type-option input:checked + .type-option-body svg { color: var(--primary); }
/* El foco tiene que verse: con el radio escondido, quien navega con el teclado se quedaba sin
   saber donde estaba parado. */
.type-option input:focus-visible + .type-option-body { outline: 2px solid var(--primary); outline-offset: 2px; }

.type-tag { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; }
.type-tag svg { width: 15px; height: 15px; color: var(--muted); flex: none; }

/* Campos que el sistema completa solo. Se muestran como dato, no como formulario: un input
   deshabilitado invita a intentar escribir en el y no explica por que no se puede. */
.field-readonly { display: grid; gap: 4px; padding: 11px 13px; border: 1px dashed var(--border); border-radius: 9px; background: rgba(148,163,184,.07); }
.field-readonly > span { font-size: 12px; font-weight: 700; color: var(--muted); }
.field-readonly code { font-size: 13.5px; font-weight: 700; color: var(--text); word-break: break-all; }
.field-readonly small { font-size: 11px; line-height: 1.45; color: var(--muted); }

.field-hint { display: block; margin-top: 4px; font-size: 11px; line-height: 1.4; color: var(--muted); }
input.is-mirrored { background: rgba(148,163,184,.12); color: var(--muted); }

/* LOGINS CENTRADOS
   Antes los dos usaban la misma pantalla partida: una foto enorme a la izquierda y el formulario
   a la derecha. Dos problemas: ocupaba media pantalla para no decir nada, y el panel del proveedor
   y el portal del cliente se veian identicos, cuando son dos puertas a cosas distintas.
   Ahora los dos son una tarjeta centrada, y cada uno con su identidad: el de administracion
   oscuro y sobrio, el del cliente claro. */
.login-page.login-centrado {
  display: grid;
  place-items: center;
  grid-template-columns: none;
  min-height: 100vh;
  padding: 24px;
}
.login-page.login-centrado .login-panel {
  min-height: 0;
  width: min(410px, 100%);
  padding: 30px 28px 26px;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 18px 48px rgb(12 18 28 / .16);
}
.login-centrado .login-card { width: 100%; gap: 14px; }
.login-centrado .login-encabezado { display: grid; gap: 5px; }
.login-centrado .login-encabezado h1 { margin: 0; font-size: 25px; line-height: 1.15; }
.login-centrado .login-encabezado p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
.login-centrado .login-card-brand { margin-bottom: 4px; }
.login-centrado .security-note { font-size: 11.5px; line-height: 1.45; }

/* Administracion: fondo oscuro, la marca del proveedor arriba. Es una puerta privada. */
.login-page.login-admin { background: var(--navy-950, #0d1626); }

/* Portal del cliente: claro y sin la marca del proveedor. El dueno viene a mirar SU negocio. */
.login-page.login-portal { background: linear-gradient(160deg, #eef3fb, #dfe8f6 60%, #eaf1f7); }
.login-portal .login-panel { box-shadow: 0 20px 52px rgb(23 42 74 / .14); }
.login-portal .login-encabezado h1 { color: var(--navy, #17233c); }

@media (max-width: 480px) {
  .login-page.login-centrado { padding: 14px; }
  .login-page.login-centrado .login-panel { padding: 24px 20px 20px; }
}

/* El logo que se ve en la barra del portal es el DEL CLIENTE. Sin logo cargado, sus iniciales. */
.portal-brand img { width: 38px; height: 38px; object-fit: cover; border-radius: 8px; background: #fff; }
.portal-brand-iniciales {
  width: 38px; height: 38px; flex: none;
  display: grid; place-items: center;
  border-radius: 8px;
  background: rgb(255 255 255 / .14);
  color: #fff;
  font-size: 13px; font-weight: 800; letter-spacing: .04em;
}

/* ACCESOS AL PORTAL
   Los bloques de esta pantalla se dibujaban sin caja propia y pegados al borde. */
.portal-credencial { border: 1px solid var(--border-strong, var(--border)); }
.portal-credencial-cuerpo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 12px;
  padding: 0 18px 4px;
}
.portal-credencial-cuerpo > div {
  display: grid; gap: 5px;
  padding: 12px 14px;
  border: 1px dashed var(--border-strong, var(--border));
  border-radius: 10px;
  background: rgb(148 163 184 / .07);
}
.portal-credencial-cuerpo small {
  font-size: 10.5px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; color: var(--muted);
}
.portal-credencial-cuerpo code { font-size: 13px; font-weight: 700; word-break: break-all; }
/* La contrasena temporal se muestra una sola vez: tiene que saltar a la vista para copiarla. */
.portal-credencial-cuerpo .portal-clave {
  font-size: 17px; letter-spacing: .06em;
  color: var(--accent, #2563eb);
}
.portal-credencial-nota { margin: 0; padding: 10px 18px 16px; color: var(--muted); font-size: 12px; }

/* El alta de acceso era un formulario suelto sin grilla ni respiro. */
.admin-form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  align-items: end;
  gap: 12px;
  padding: 0 18px 18px;
}
.admin-form-grid label { display: grid; gap: 5px; font-size: 12px; font-weight: 700; color: var(--muted); }
.admin-form-grid input, .admin-form-grid select { width: 100%; }
.admin-form-grid button { justify-self: start; }

/* Las tres acciones por fila se amontonaban sin separacion. */
.table-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.table-actions form { display: inline-flex; min-width: auto; margin: 0; }

/* El link de las credenciales es un enlace de verdad, con dominio: se copia y funciona. Antes
   salia como texto y ademas sin dominio -solo /portal/login.php-, que pegado en un mensaje no
   lleva a ningun lado. */
.portal-credencial-enlace { font-size: 12.5px; font-weight: 700; word-break: break-all; color: var(--accent, #2563eb); }
.portal-credencial-envio { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 18px 0; }
.portal-credencial-envio .action-button { display: inline-flex; align-items: center; gap: 7px; }

/* PERSONAS DEL PORTAL
   El primer intento reuso nombres de clase del panel de administracion -page-panel,
   setting-card, form-grid- que en el portal no existen. Resultado: el formulario y la tabla
   quedaron sin contenedor, apilados en una columna de 340px sobre una pagina de 1366, y la
   casilla de "puede entrar a la caja" suelta con su texto pegado a la etiqueta siguiente.
   Aca la pantalla usa el vocabulario del portal -table-card, table-wrap- y define lo suyo. */
.personas-form { padding: 0 18px 18px; display: grid; gap: 18px; }
.personas-grupo { display: grid; gap: 10px; }
.personas-grupo-titulo {
  font-size: 12px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase;
  color: var(--muted, #64748b);
}
/* Las columnas se acomodan solas al ancho: en una notebook entran dos o tres, en un monitor
   grande cuatro, y en el telefono una. Sin numeros fijos que haya que corregir por pantalla. */
.personas-campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; }
.personas-campos label { display: grid; gap: 5px; font-size: 13px; font-weight: 700; min-width: 0; }
.personas-campos label.ancho-2 { grid-column: span 2; }
.personas-campos input, .personas-campos select { width: 100%; min-width: 0; }
.personas-campos label small { font-weight: 600; color: var(--muted, #64748b); }

/* La casilla y su explicacion, juntas: sola era un cuadrado sin etiqueta al lado. */
.personas-switch {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 11px 13px; border: 1px solid var(--border, #e2e8f0); border-radius: 10px;
  background: rgb(148 163 184 / .07); cursor: pointer;
}
.personas-switch input { width: 17px; height: 17px; margin-top: 2px; flex: 0 0 auto; }
.personas-switch span { display: grid; gap: 2px; }
.personas-switch small { color: var(--muted, #64748b); font-weight: 600; }

/* Las sucursales donde trabaja, que pueden ser varias: casillas en fila que se leen como una lista de
   lugares. La principal se elige aparte y solo aparece si hay mas de una marcada. */
.personas-campos .personas-sucursales { grid-column: 1 / -1; min-width: 0; display: grid; gap: 10px; margin: 0; padding: 12px 13px 13px; border: 1px solid var(--border, #e2e8f0); border-radius: 10px; }
.personas-sucursales legend { padding: 0 6px; font-size: 13px; font-weight: 700; }
.personas-sucursales-lista { display: flex; flex-wrap: wrap; gap: 8px; }
.personas-sucursales .personas-sucursal { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border: 1px solid var(--border, #e2e8f0); border-radius: 999px; font-weight: 600; cursor: pointer; }
.personas-sucursales .personas-sucursal input { width: 16px; height: 16px; margin: 0; flex: 0 0 auto; }
.personas-sucursales .personas-sucursal:has(input:checked) { border-color: var(--accent, #2563eb); background: rgb(37 99 235 / .07); }
.personas-sucursales .personas-principal { max-width: 320px; }
.personas-sucursales .personas-principal[hidden] { display: none; }

.personas-acciones { display: flex; justify-content: flex-end; }

/* Editar y dar de baja en linea: apilados hacian la fila el doble de alta y la tabla se leia
   como una lista de botones en vez de una lista de gente. */
.personas-fila-acciones { display: flex; align-items: center; gap: 8px; justify-content: flex-end; }
.personas-fila-acciones form { margin: 0; }

@media (max-width: 720px) {
  .personas-campos label.ancho-2 { grid-column: span 1; }
  .personas-fila-acciones { flex-direction: column; align-items: stretch; }
}

/* Una accion que da de baja a alguien no puede verse igual que "Editar". El portal tenia la
   variante primary pero no la de peligro, asi que los dos botones salian identicos. */
.action-button.danger {
  color: #b91c1c; border-color: rgb(185 28 28 / .35); background: rgb(185 28 28 / .06);
}
.action-button.danger:hover { color: #fff; background: #b91c1c; border-color: #b91c1c; }


/* ROLES Y PERMISOS DEL PORTAL
   Son 38 casillas: en una lista plana no se pueden revisar, y menos decidir. Se agrupan por
   area -venta, caja, stock- que es como la gente piensa lo que alguien "puede hacer". */
.roles-permisos-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; }
.roles-dominio {
  margin: 0; border: 1px solid var(--border, #e2e8f0); border-radius: 10px; padding: 10px 12px 12px;
  background: rgb(148 163 184 / .05);
}
.roles-dominio legend {
  padding: 0 6px; font-size: 11.5px; font-weight: 800; letter-spacing: .5px;
  text-transform: uppercase; color: var(--muted, #64748b);
}
.roles-permiso-linea { display: flex; align-items: center; gap: 8px; padding: 3px 0; font-size: 13px; font-weight: 600; cursor: pointer; }
.roles-permiso-linea input { width: 15px; height: 15px; flex: 0 0 auto; }
.roles-asignar-inline { margin: 0; }
.roles-asignar-inline select { min-width: 150px; }


/* Estado del archivo de logo en el formulario de cliente. Que la ruta este guardada no dice
   nada: lo que importa es si el archivo esta, porque es lo que las cajas van a intentar bajar. */
.form-alerta { display: block; margin-top: 4px; color: #b91c1c; }
.form-ok { display: block; margin-top: 4px; color: #15803d; font-weight: 700; }