@import url("https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible+Next:ital,wght@0,400;0,500;0,700;0,800;1,400&family=Atkinson+Hyperlegible+Mono:wght@400;500;700&family=Big+Shoulders+Display:wght@800;900&display=swap");
/* ============================================================================









   BotForge · tema.css — SISTEMA DE DISEÑO compartido









   ----------------------------------------------------------------------------









   Dos capas:









   A) Páginas nuevas (portal del cliente, login, turnos, crm, bandeja): marcan









      <html class="bf"> y usan los componentes "bf-*". Claras por defecto,









      oscuras con prefers-color-scheme o [data-theme="dark"].









   B) Compatibilidad (admin.html, cliente.html, agenda.html, …): esas páginas









      NO llevan class="bf"; para ellas siguen valiendo los tokens dark-first









      "Ember & Graphite" y las reglas sobre sus clases históricas (.c, .stat,









      .btn, .badge, .met, .segs, .ov, .toast, .bfk…). No tocar sin grep.









   Sin CDNs, sin red: tipografía del sistema + SVG inline.









   ============================================================================ */



















/* ---- 1. TOKENS ------------------------------------------------------------ */









/* Base (legacy, dark-first). Las páginas nuevas los redefinen en 1b. */









:root,









:root[data-theme="dark"] {









  --bg: #0e1014;









  --bg-0: #0e1014;









  --panel: #14161d;









  --card: #16181f;









  --bd2: #1b1e26;









  --bd: #262a34;









  --chip: #1e212b;









  --tx: #f3efe7;









  --mut: #a7a296;









  --tx3: #6f6b62;









  --ac: #ff6a3d;









  --ac2: #ffb454;









  --ac-soft: rgba(255, 106, 61, 0.14);









  --ac-txt: #ff8a65; /* acento usado como TEXTO (contraste ≥4,5:1) */









  --signal: #2dd4bf;









  --ok: #3fb950;









  --no: #f0553d;









  --wa: #f0a93b;









  --info: #7c86ff;









  --sh: 0 1px 2px rgba(0, 0, 0, 0.5), 0 8px 24px -12px rgba(0, 0, 0, 0.55);









  --sh-hi: 0 10px 40px -14px rgba(255, 106, 61, 0.28), 0 2px 8px rgba(0, 0, 0, 0.5);









  --grad: linear-gradient(120deg, #ff6a3d, #ffb454);









  --spring: cubic-bezier(0.22, 1, 0.36, 1);









  --ring: 0 0 0 3px rgba(255, 106, 61, 0.28);









  --nuevo: #7c86ff;









  --interesado: #2dd4bf;









  --cotizado: #ffb454;









  --reunion: #f472b6;









  --cliente: #3fb950;









  --frio: #6b7280;









  /* escala (compartida) */









  --r-sm: 8px;









  --r: 12px;









  --r-lg: 16px;









  --r-xl: 22px;









  --fs-xs: 11.5px;









  --fs-sm: 12.5px;









  --fs: 14px;









  --fs-md: 15px;









  --fs-lg: 17px;









  --fs-xl: 22px;









  --fs-2xl: 28px;









  --font:









    -apple-system, BlinkMacSystemFont, "Segoe UI Variable", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;









  --mono: ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, monospace;









}









:root[data-theme="light"] {









  --bg: #faf8f4;









  --bg-0: #faf8f4;









  --panel: #ffffff;









  --card: #ffffff;









  --bd2: #f1ede6;









  --bd: #e7e1d6;









  --chip: #f3efe8;









  --tx: #1a160f;









  --mut: #7a7266;









  --tx3: #a39b8d;









  --ac: #e05a2b;









  --ac2: #d98a1f;









  --ac-soft: rgba(224, 90, 43, 0.1);









  --ac-txt: #a83b17; /* acento usado como TEXTO (contraste ≥4,5:1) */









  --signal: #0f766e;









  --ok: #16833a;









  --no: #c8402c;









  --wa: #b5730f;









  --info: #4f5bd5;









  --sh: 0 1px 2px rgba(60, 40, 20, 0.06), 0 8px 24px -14px rgba(60, 40, 20, 0.14);









  --sh-hi: 0 10px 34px -16px rgba(224, 90, 43, 0.3);









  --ring: 0 0 0 3px rgba(224, 90, 43, 0.22);









}



















/* 1b. Páginas nuevas (html.bf): "Papel & Brasa" — claras por defecto. */









html.bf,









html.bf[data-theme="light"] {









  --bg: #f4f5f7;









  --bg-0: #f4f5f7;









  --panel: #ffffff;









  --card: #ffffff;









  --bd2: #f1f2f5;









  --bd: #e3e5ea;









  --chip: #eceef2;









  --tx: #17191f;









  --mut: #667080;









  --tx3: #646b76; /* [07/10] contraste ≥4,5:1 (antes #99a0ab) */









  --ac: #e5562a;









  --ac2: #f0a03a;









  --ac-soft: rgba(229, 86, 42, 0.1);









  --ac-txt: #a83b17; /* acento usado como TEXTO (contraste ≥4,5:1; [07/10 QA] #b8431c daba 4,44 sobre --ac-soft) */









  --signal: #0e8a7a;









  --ok: #1f9d55;









  --no: #d6412c;









  --wa: #c47a0f;









  --info: #4f5bd5;









  --sh: 0 1px 2px rgba(20, 24, 40, 0.05), 0 1px 3px rgba(20, 24, 40, 0.04);









  --sh-hi: 0 12px 32px -14px rgba(20, 24, 40, 0.22);









  --ring: 0 0 0 3px rgba(229, 86, 42, 0.22);









  --nuevo: #5b64d6;









  --interesado: #0b7a6c; /* [07/10] texto ≥4,5:1 (antes #0e8a7a) */









  --cotizado: #9a5f08; /* [07/10] texto ≥4,5:1 (antes #c47a0f) */









  --reunion: #db2777;









  --cliente: #177f44; /* [07/10] texto ≥4,5:1 (antes #1f9d55) */









  --frio: #69717d; /* [07/10] texto ≥4,5:1 (antes #8a93a0) */









  color-scheme: light;









}









@media (prefers-color-scheme: dark) {









  html.bf:not([data-theme="light"]) {









    --bg: #0e1014;









    --bg-0: #0e1014;









    --panel: #14161d;









    --card: #181a22;









    --bd2: #1d2029;









    --bd: #2a2e39;









    --chip: #222630;









    --tx: #f1efea;









    --mut: #a1a5ad;









    --tx3: #878c96; /* [07/10] contraste ≥4,5:1 (antes #6d727c) */









    --ac: #ff6a3d;









    --ac2: #ffb454;









    --ac-soft: rgba(255, 106, 61, 0.16);









    --ac-txt: #ff8a65; /* acento usado como TEXTO (contraste ≥4,5:1) */









    --signal: #2dd4bf;









    --ok: #4ade80;









    --no: #f87161;









    --wa: #fbbf4a;









    --info: #8b93ff;









    --sh: 0 1px 2px rgba(0, 0, 0, 0.5), 0 6px 20px -12px rgba(0, 0, 0, 0.6);









    --sh-hi: 0 12px 40px -14px rgba(0, 0, 0, 0.7);









    --ring: 0 0 0 3px rgba(255, 106, 61, 0.32);









    --nuevo: #8b93ff;









    --interesado: #2dd4bf;









    --cotizado: #ffb454;









    --reunion: #f472b6;









    --cliente: #4ade80;









    --frio: #7c8391;









    color-scheme: dark;









  }









}









html.bf[data-theme="dark"] {









  --bg: #0e1014;









  --bg-0: #0e1014;









  --panel: #14161d;









  --card: #181a22;









  --bd2: #1d2029;









  --bd: #2a2e39;









  --chip: #222630;









  --tx: #f1efea;









  --mut: #a1a5ad;









  --tx3: #878c96; /* [07/10] contraste ≥4,5:1 (antes #6d727c) */









  --ac: #ff6a3d;









  --ac2: #ffb454;









  --ac-soft: rgba(255, 106, 61, 0.16);









  --ac-txt: #ff8a65; /* acento usado como TEXTO (contraste ≥4,5:1) */









  --signal: #2dd4bf;









  --ok: #4ade80;









  --no: #f87161;









  --wa: #fbbf4a;









  --info: #8b93ff;









  --sh: 0 1px 2px rgba(0, 0, 0, 0.5), 0 6px 20px -12px rgba(0, 0, 0, 0.6);









  --sh-hi: 0 12px 40px -14px rgba(0, 0, 0, 0.7);









  --ring: 0 0 0 3px rgba(255, 106, 61, 0.32);









  --nuevo: #8b93ff;









  --interesado: #2dd4bf;









  --cotizado: #ffb454;









  --reunion: #f472b6;









  --cliente: #4ade80;









  --frio: #7c8391;









  color-scheme: dark;









}



















/* ---- 2. BASE (html.bf) ---------------------------------------------------- */









html.bf {









  -webkit-text-size-adjust: 100%;









}









html.bf,









html.bf body {









  margin: 0;









  background: var(--bg);









  color: var(--tx);









  font-family: var(--font);









  font-size: var(--fs);









  line-height: 1.5;









  letter-spacing: -0.005em;









  -webkit-font-smoothing: antialiased;









  text-rendering: optimizeLegibility;









}









html.bf *,









html.bf *::before,









html.bf *::after {









  box-sizing: border-box;









}









html.bf h1,









html.bf h2,









html.bf h3 {









  margin: 0;









  letter-spacing: -0.02em;









  line-height: 1.25;









}









html.bf h1 {









  font-size: var(--fs-xl);









  font-weight: 750;









}









html.bf h2 {









  font-size: var(--fs-lg);









  font-weight: 700;









}









html.bf h3 {









  font-size: var(--fs-md);









  font-weight: 650;









}









html.bf p {









  margin: 0 0 10px;









}









/* :where() deja la especificidad en 0: cualquier componente (.bf-btn, .nav a, .quick a…) manda sobre esto */









html.bf :where(a) {









  color: var(--ac);









  text-decoration: none;









}









html.bf :where(a:hover) {









  text-decoration: underline;









}









html.bf button,









html.bf input,









html.bf select,









html.bf textarea {









  font: inherit;









  color: inherit;









  letter-spacing: inherit;









}









html.bf :focus-visible {









  outline: 2px solid var(--ac);









  outline-offset: 2px;









  border-radius: 6px;









}









html.bf ::selection {









  background: var(--ac-soft);









}









.bf-mono {









  font-family: var(--mono);









  font-size: 0.92em;









}









.bf-num {









  font-variant-numeric: tabular-nums;









}









.bf-muted {









  color: var(--mut);









}









.bf-sr {









  position: absolute !important;









  width: 1px;









  height: 1px;









  overflow: hidden;









  clip: rect(0 0 0 0);









  white-space: nowrap;









}









.bf-stack > * + * {









  margin-top: 14px;









}









.bf-between {









  display: flex;









  align-items: center;









  justify-content: space-between;









  gap: 10px;









}









.bf-row {









  display: flex;









  align-items: center;









  gap: 8px;









  flex-wrap: wrap;









}









.bf-grid2 {









  display: grid;









  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));









  gap: 14px;









}









.bf-ico {









  width: 18px;









  height: 18px;









  flex: none;









  stroke: currentColor;









  fill: none;









  stroke-width: 1.8;









  stroke-linecap: round;









  stroke-linejoin: round;









}









[hidden] {









  display: none !important;









}



















/* ---- 3. MARCA: orbe "Fragua" --------------------------------------------- */









.bf-mark {









  width: 26px;









  height: 26px;









  border-radius: 50%;









  flex: none;









  position: relative;









  background: radial-gradient(circle at 38% 32%, #ffeccb 0%, #ffb454 28%, #ff6a3d 62%, #7a2410 100%);









  box-shadow:









    0 0 0 1px rgba(255, 106, 61, 0.25),









    0 4px 12px -4px rgba(255, 106, 61, 0.6);









}









.bf-mark::after {









  content: "";









  position: absolute;









  inset: 0;









  border-radius: 50%;









  background: radial-gradient(circle at 34% 28%, rgba(255, 255, 255, 0.9), transparent 42%);









}









/* El logo respira: halo suave que entra y sale. Sutil a propósito (es una marca, no un spinner).









   Con "reducir movimiento" activado en el sistema, el bloque global de prefers-reduced-motion lo apaga. */









.bf-mark {









  animation: bfMarkLatido 4.2s ease-in-out infinite;









}









@keyframes bfMarkLatido {









  0%,









  100% {









    box-shadow:









      0 0 0 1px rgba(255, 106, 61, 0.25),









      0 4px 12px -4px rgba(255, 106, 61, 0.6),









      0 0 0 0 rgba(255, 106, 61, 0);









  }









  50% {









    box-shadow:









      0 0 0 1px rgba(255, 106, 61, 0.45),









      0 4px 16px -4px rgba(255, 106, 61, 0.85),









      0 0 0 5px rgba(255, 106, 61, 0.09);









  }









}









.bf-mark.lg {









  width: 40px;









  height: 40px;









}



















/* ---- 4. BOTONES ------------------------------------------------------------ */









.bf-btn {









  --h: 38px;









  display: inline-flex;









  align-items: center;









  justify-content: center;









  gap: 7px;









  min-height: var(--h);









  padding: 0 14px;









  border-radius: 10px;









  border: 1px solid var(--bd);









  background: var(--card);









  color: var(--tx);









  font-weight: 600;









  font-size: var(--fs);









  line-height: 1;









  cursor: pointer;









  white-space: nowrap;









  text-decoration: none !important;









  box-shadow: var(--sh);









  transition:









    transform 0.18s var(--spring),









    border-color 0.18s,









    background 0.18s,









    box-shadow 0.18s,









    opacity 0.18s;









  -webkit-tap-highlight-color: transparent;









}









.bf-btn:hover {









  border-color: color-mix(in srgb, var(--tx) 22%, var(--bd));









  transform: translateY(-1px);









}









.bf-btn:active {









  transform: translateY(0);









}









.bf-btn:disabled,









.bf-btn[aria-disabled="true"] {









  opacity: 0.55;









  cursor: default;









  transform: none;









}









/* [07/10/2026] texto OSCURO sobre el naranja: blanco daba 2,9:1 (oscuro) y 3,7:1 (claro); oscuro da 6,8 y 5,1 */









.bf-btn.pri {









  background: var(--ac);









  border-color: var(--ac);









  color: #1a0d06;









  box-shadow: 0 6px 18px -8px color-mix(in srgb, var(--ac) 70%, transparent);









}









.bf-btn.pri:hover {









  /* aclara en vez de oscurecer: oscurecer bajaba el contraste del texto */









  background: color-mix(in srgb, var(--ac) 88%, #fff);









  border-color: color-mix(in srgb, var(--ac) 88%, #fff);









}









.bf-btn.gh {









  background: transparent;









  border-color: transparent;









  box-shadow: none;









}









.bf-btn.gh:hover {









  background: var(--chip);









}









.bf-btn.soft {









  background: var(--ac-soft);









  border-color: transparent;









  color: var(--ac);









  box-shadow: none;









}









.bf-btn.danger {









  color: var(--no);









}









.bf-btn.danger:hover {









  border-color: var(--no);









  background: color-mix(in srgb, var(--no) 8%, transparent);









}









.bf-btn.ok {









  background: var(--ok);









  border-color: var(--ok);









  color: #06210f; /* blanco sobre verde no llegaba a 4,5:1 en ningún tema */









}









/* páginas viejas en tema claro (verde #16833a): ahí el blanco da 4,8:1 y el oscuro 3,5:1 */









:root[data-theme="light"]:not(.bf) .bf-btn.ok {









  color: #fff;









}









.bf-btn.sm {









  --h: 32px;









  padding: 0 11px;









  font-size: var(--fs-sm);









  border-radius: 8px;









}









.bf-btn.icon {









  padding: 0;









  width: var(--h);









  flex-shrink: 0; /* [07/10/2026 QA] en un encabezado flex con título largo se encogía a 30 px (✕ de la ventana de preferencias) */









}









.bf-btn.block {









  width: 100%;









}









.bf-btn.is-loading {









  color: transparent !important;









  position: relative;









  pointer-events: none;









}









.bf-btn.is-loading::after {









  content: "";









  position: absolute;









  width: 16px;









  height: 16px;









  border-radius: 50%;









  border: 2px solid rgba(255, 255, 255, 0.4);









  border-top-color: #fff;









  animation: bfSpin 0.7s linear infinite;









}









.bf-btn.is-loading:not(.pri)::after {









  border-color: var(--bd);









  border-top-color: var(--tx);









}









@keyframes bfSpin {









  to {









    transform: rotate(360deg);









  }









}



















/* ---- 5. CARDS ---------------------------------------------------------------- */









.bf-card {









  background: var(--card);









  border: 1px solid var(--bd);









  border-radius: var(--r-lg);









  box-shadow: var(--sh);









  padding: 18px;









}









.bf-card.pad0 {









  padding: 0;









  overflow: hidden;









}









.bf-card-hd {









  display: flex;









  align-items: flex-start;









  justify-content: space-between;









  gap: 12px;









  margin-bottom: 14px;









}









.bf-card-hd .t {









  font-size: var(--fs-lg);









  font-weight: 700;









  letter-spacing: -0.02em;









  display: flex;









  align-items: center;









  gap: 9px;









}









.bf-card-hd .s {









  color: var(--mut);









  font-size: var(--fs-sm);









  margin-top: 3px;









  max-width: 62ch;









}









.bf-card + .bf-card {









  margin-top: 14px;









}









.bf-sec {









  padding: 14px 0;









  border-top: 1px solid var(--bd);









}









.bf-sec:first-child {









  border-top: 0;









  padding-top: 0;









}









.bf-sec:last-child {









  padding-bottom: 0;









}



















/* ---- 6. BADGES / DOTS / PILLS ---------------------------------------------- */









.bf-badge {









  display: inline-flex;









  align-items: center;









  gap: 5px;









  padding: 2px 8px;









  border-radius: 999px;









  border: 1px solid var(--bd);









  background: var(--chip);









  color: var(--mut);









  font-size: var(--fs-xs);









  font-weight: 600;









  line-height: 1.5;









  white-space: nowrap;









  vertical-align: middle;









}









.bf-badge.ok {









  color: var(--ok);









  background: color-mix(in srgb, var(--ok) 11%, transparent);









  border-color: color-mix(in srgb, var(--ok) 30%, transparent);









}









.bf-badge.warn {









  color: var(--wa);









  background: color-mix(in srgb, var(--wa) 12%, transparent);









  border-color: color-mix(in srgb, var(--wa) 32%, transparent);









}









.bf-badge.no {









  color: var(--no);









  background: color-mix(in srgb, var(--no) 10%, transparent);









  border-color: color-mix(in srgb, var(--no) 30%, transparent);









}









.bf-badge.info {









  color: var(--info);









  background: color-mix(in srgb, var(--info) 11%, transparent);









  border-color: color-mix(in srgb, var(--info) 30%, transparent);









}









.bf-badge.ac {









  color: var(--ac);









  background: var(--ac-soft);









  border-color: transparent;









}









.bf-dot {









  width: 8px;









  height: 8px;









  border-radius: 50%;









  background: var(--tx3);









  flex: none;









  position: relative;









}









.bf-dot.on {









  background: var(--ok);









  animation: bfPulse 2.4s var(--spring) infinite;









}









.bf-dot.warn {









  background: var(--wa);









}









.bf-dot.no {









  background: var(--no);









}









@keyframes bfPulse {









  0% {









    box-shadow: 0 0 0 0 color-mix(in srgb, var(--ok) 55%, transparent);









  }









  70% {









    box-shadow: 0 0 0 7px transparent;









  }









  100% {









    box-shadow: 0 0 0 0 transparent;









  }









}









.bf-pill {









  display: inline-flex;









  align-items: center;









  gap: 7px;









  padding: 5px 11px;









  border-radius: 999px;









  border: 1px solid var(--bd);









  background: var(--card);









  font-size: var(--fs-sm);









  font-weight: 600;









  white-space: nowrap;









}



















/* ---- 7. TABS / SEGMENTOS ------------------------------------------------------ */









.bf-seg {









  display: inline-flex;









  padding: 3px;









  gap: 2px;









  background: var(--chip);









  border: 1px solid var(--bd);









  border-radius: 10px;









  max-width: 100%;









  overflow-x: auto;









  scrollbar-width: none;









}









.bf-seg::-webkit-scrollbar {









  display: none;









}









.bf-seg button {









  border: 0;









  background: transparent;









  color: var(--mut);









  padding: 6px 12px;









  border-radius: 8px;









  font-size: var(--fs-sm);









  font-weight: 600;









  cursor: pointer;









  white-space: nowrap;









  transition:









    background 0.18s,









    color 0.18s,









    box-shadow 0.18s;









}









.bf-seg button:hover {









  color: var(--tx);









}









.bf-seg button.on,









.bf-seg button[aria-selected="true"] {









  background: var(--card);









  color: var(--tx);









  box-shadow: var(--sh);









}









.bf-tabs {









  display: flex;









  gap: 2px;









  border-bottom: 1px solid var(--bd);









  overflow-x: auto;









  scrollbar-width: none;









}









.bf-tabs::-webkit-scrollbar {









  display: none;









}









.bf-tabs button {









  border: 0;









  background: none;









  color: var(--mut);









  padding: 10px 12px;









  font-size: var(--fs);









  font-weight: 600;









  cursor: pointer;









  white-space: nowrap;









  border-bottom: 2px solid transparent;









  margin-bottom: -1px;









  transition:









    color 0.18s,









    border-color 0.18s;









}









.bf-tabs button:hover {









  color: var(--tx);









}









.bf-tabs button.on,









.bf-tabs button[aria-selected="true"] {









  color: var(--tx);









  border-bottom-color: var(--ac);









}









.bf-tabs button .b {









  color: var(--ac);









  margin-left: 4px;









}



















/* ---- 8. FORMULARIOS ----------------------------------------------------------- */









.bf-field {









  display: flex;









  flex-direction: column;









  gap: 5px;









  min-width: 0;









}









.bf-field > label,









.bf-label {









  font-size: var(--fs-sm);









  font-weight: 600;









  color: var(--tx);









}









.bf-field .hint,









.bf-hint {









  font-size: var(--fs-sm);









  color: var(--mut);









}









.bf-field .err {









  font-size: var(--fs-sm);









  color: var(--no);









}









.bf-input,









.bf-select,









.bf-textarea {









  width: 100%;









  min-height: 40px;









  padding: 8px 12px;









  border: 1px solid var(--bd);









  border-radius: 10px;









  background: var(--card);









  color: var(--tx);









  font-size: var(--fs-md);









  transition:









    border-color 0.18s,









    box-shadow 0.18s;









}









.bf-textarea {









  min-height: 90px;









  resize: vertical;









  line-height: 1.5;









}









.bf-textarea.code {









  font-family: var(--mono);









  font-size: 13px;









  line-height: 1.6;









  white-space: pre-wrap;









  min-height: 320px;









}









.bf-input::placeholder,









.bf-textarea::placeholder {









  color: var(--tx3);









}









.bf-input:focus,









.bf-select:focus,









.bf-textarea:focus {









  outline: none;









  border-color: var(--ac);









  box-shadow: var(--ring);









}









.bf-input[aria-invalid="true"] {









  border-color: var(--no);









}









.bf-select {









  appearance: none;









  padding-right: 34px;









  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");









  background-repeat: no-repeat;









  background-position: right 12px center;









}









.bf-form-grid {









  display: grid;









  grid-template-columns: repeat(auto-fit, minmax(195px, 1fr));









  gap: 12px 14px;









}









.bf-form-grid .span2 {









  grid-column: 1 / -1;









}









.bf-check {









  display: inline-flex;









  align-items: center;









  gap: 8px;









  cursor: pointer;









  font-size: var(--fs);









}









.bf-check input {









  width: 17px;









  height: 17px;









  accent-color: var(--ac);









  margin: 0;









}









/* switch */









.bf-switch {









  display: inline-flex;









  align-items: center;









  gap: 10px;









  cursor: pointer;









  user-select: none;









}









.bf-switch input {









  position: absolute;









  opacity: 0;









  width: 0;









  height: 0;









}









.bf-switch .tg {









  width: 42px;









  height: 24px;









  border-radius: 999px;









  background: color-mix(in srgb, var(--mut) 40%, var(--bd));









  position: relative;









  flex: none;









  transition: background 0.2s;









}









.bf-switch .tg::after {









  content: "";









  position: absolute;









  top: 3px;









  left: 3px;









  width: 18px;









  height: 18px;









  border-radius: 50%;









  background: #fff;









  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);









  transition: transform 0.2s var(--spring);









}









.bf-switch input:checked + .tg {









  background: var(--ok);









}









.bf-switch input:checked + .tg::after {









  transform: translateX(18px);









}









.bf-switch input:focus-visible + .tg {









  box-shadow: var(--ring);









}









.bf-switch input:disabled + .tg {









  opacity: 0.5;









}









.bf-switch .lbl {









  font-weight: 600;









}









.bf-switch .lbl small {









  display: block;









  font-weight: 400;









  color: var(--mut);









  font-size: var(--fs-sm);









}









.bf-chips {









  display: flex;









  flex-wrap: wrap;









  gap: 6px;









}









.bf-chip {









  display: inline-flex;









  align-items: center;









  gap: 6px;









  padding: 5px 10px;









  border-radius: 999px;









  border: 1px solid var(--bd);









  background: var(--card);









  font-size: var(--fs-sm);









  font-weight: 600;









  cursor: pointer;









  color: var(--mut);









  user-select: none;









}









.bf-chip input {









  position: absolute;









  opacity: 0;









  width: 0;









  height: 0;









}









.bf-chip:has(input:checked) {









  background: var(--ac-soft);









  border-color: color-mix(in srgb, var(--ac) 50%, transparent);









  color: var(--ac);









}









.bf-chip:has(input:focus-visible) {









  box-shadow: var(--ring);









}



















/* ---- 9. MÉTRICAS ---------------------------------------------------------------- */









.bf-kpis {









  display: grid;









  grid-template-columns: repeat(2, 1fr);









  gap: 10px;









}









@media (min-width: 720px) {









  .bf-kpis {









    grid-template-columns: repeat(auto-fit, minmax(165px, 1fr));









  }









}









.bf-stat {









  background: var(--card);









  border: 1px solid var(--bd);









  border-radius: var(--r);









  padding: 13px 14px;









  box-shadow: var(--sh);









  min-width: 0;









}









.bf-stat .k {









  font-size: var(--fs-xs);









  font-weight: 600;









  color: var(--mut);









  text-transform: uppercase;









  letter-spacing: 0.05em;









  white-space: nowrap;









  overflow: hidden;









  text-overflow: ellipsis;









}









.bf-stat .v {









  font-size: var(--fs-2xl);









  font-weight: 750;









  letter-spacing: -0.03em;









  line-height: 1.15;









  margin-top: 4px;









  font-variant-numeric: tabular-nums;









}









.bf-stat .v small {









  font-size: var(--fs-sm);









  font-weight: 500;









  color: var(--mut);









  letter-spacing: 0;









  margin-left: 4px;









}









.bf-stat .d {









  font-size: var(--fs-sm);









  color: var(--mut);









  margin-top: 2px;









}



















/* ---- 10. LISTAS / TABLAS -------------------------------------------------------- */









.bf-list {









  display: flex;









  flex-direction: column;









}









.bf-item {









  display: flex;









  align-items: center;









  gap: 12px;









  padding: 11px 0;









  border-top: 1px solid var(--bd);









  min-width: 0;









}









.bf-item:first-child {









  border-top: 0;









}









.bf-item .grow {









  flex: 1;









  min-width: 0;









}









.bf-item .t {









  font-weight: 600;









  white-space: nowrap;









  overflow: hidden;









  text-overflow: ellipsis;









}









.bf-item .s {









  color: var(--mut);









  font-size: var(--fs-sm);









  white-space: nowrap;









  overflow: hidden;









  text-overflow: ellipsis;









}









.bf-avatar {









  width: 36px;









  height: 36px;









  border-radius: 50%;









  flex: none;









  display: grid;









  place-items: center;









  font-weight: 700;









  font-size: 13px;









  color: var(--ac-txt, var(--ac));









  background: var(--ac-soft);









  letter-spacing: 0;









}









.bf-table {









  width: 100%;









  border-collapse: collapse;









  font-size: var(--fs);









}









.bf-table th {









  text-align: left;









  font-size: var(--fs-xs);









  text-transform: uppercase;









  letter-spacing: 0.05em;









  color: var(--mut);









  font-weight: 600;









  padding: 8px 10px;









  border-bottom: 1px solid var(--bd);









}









.bf-table td {









  padding: 10px;









  border-bottom: 1px solid var(--bd);









  vertical-align: middle;









  font-variant-numeric: tabular-nums;









}









.bf-table tr:last-child td {









  border-bottom: 0;









}









.bf-table-wrap {









  overflow-x: auto;









}









@media (max-width: 640px) {









  .bf-table.resp thead {









    display: none;









  }









  .bf-table.resp tr {









    display: block;









    padding: 8px 0;









    border-bottom: 1px solid var(--bd);









  }









  .bf-table.resp td {









    display: flex;









    justify-content: space-between;









    gap: 12px;









    padding: 4px 0;









    border: 0;









  }









  .bf-table.resp td::before {









    content: attr(data-label);









    color: var(--mut);









    font-size: var(--fs-sm);









    font-weight: 600;









  }









}



















/* ---- 11. FEEDBACK: toast, skeleton, empty, tooltip, alert ------------------------- */









.bf-toast {









  position: fixed;









  left: 50%;









  bottom: calc(18px + env(safe-area-inset-bottom));









  transform: translate(-50%, 12px);









  z-index: 500;









  max-width: min(92vw, 420px);









  padding: 11px 16px;









  border-radius: 12px;









  background: var(--tx);









  color: var(--bg);









  font-size: var(--fs);









  font-weight: 500;









  box-shadow: var(--sh-hi);









  opacity: 0;









  pointer-events: none;









  transition:









    opacity 0.22s,









    transform 0.3s var(--spring);









}









.bf-toast.show {









  opacity: 1;









  transform: translate(-50%, 0);









}









.bf-toast.err {









  background: var(--no);









  color: #fff;









}









@media (max-width: 899px) {









  html.bf .has-tabbar .bf-toast {









    bottom: calc(78px + env(safe-area-inset-bottom));









  }









}









.bf-skel {









  display: block;









  border-radius: 8px;









  background: linear-gradient(









    90deg,









    var(--chip) 25%,









    color-mix(in srgb, var(--chip) 50%, var(--card)) 50%,









    var(--chip) 75%









  );









  background-size: 200% 100%;









  animation: bfShimmer 1.4s linear infinite;









  min-height: 14px;









}









@keyframes bfShimmer {









  from {









    background-position: 200% 0;









  }









  to {









    background-position: -200% 0;









  }









}









.bf-empty {









  text-align: center;









  padding: 36px 20px;









  color: var(--mut);









}









.bf-empty .ic {









  width: 44px;









  height: 44px;









  margin: 0 auto 10px;









  border-radius: 14px;









  display: grid;









  place-items: center;









  background: var(--chip);









  color: var(--mut);









}









.bf-empty .ic svg {









  width: 22px;









  height: 22px;









}









.bf-empty .t {









  font-weight: 650;









  color: var(--tx);









  font-size: var(--fs-md);









}









.bf-empty .s {









  font-size: var(--fs-sm);









  max-width: 40ch;









  margin: 4px auto 0;









}









.bf-empty .bf-btn {









  margin-top: 14px;









}









[data-tip] {









  position: relative;









}









[data-tip]::after {









  content: attr(data-tip);









  position: absolute;









  left: 50%;









  bottom: calc(100% + 7px);









  transform: translateX(-50%) translateY(3px);









  background: var(--tx);









  color: var(--bg);









  font-size: var(--fs-xs);









  font-weight: 500;









  line-height: 1.35;









  padding: 6px 9px;









  border-radius: 7px;









  white-space: nowrap;









  max-width: 260px;









  opacity: 0;









  pointer-events: none;









  z-index: 50;









  /* [07/10/2026 QA] oculto de verdad (display:none): con opacity 0 seguía ocupando lugar y, en un botón pegado al









     borde derecho (⚙ del portal), el globo asomaba 10 px fuera y generaba scroll horizontal en escritorio. */









  display: none;









  transition:









    opacity 0.15s,









    transform 0.15s;









}









[data-tip]:hover::after,









[data-tip]:focus-visible::after {









  display: block;









  opacity: 1;









  transform: translateX(-50%) translateY(0);









}









/* la aparición sigue siendo suave donde hay @starting-style (Chrome 117+, Safari 17.5+); en el resto aparece directo */









@starting-style {









  [data-tip]:hover::after,









  [data-tip]:focus-visible::after {









    opacity: 0;









    transform: translateX(-50%) translateY(3px);









  }









}









.bf-alert {









  display: flex;









  gap: 10px;









  align-items: flex-start;









  padding: 11px 13px;









  border-radius: 12px;









  border: 1px solid var(--bd);









  background: var(--bd2);









  font-size: var(--fs-sm);









  color: var(--tx);









}









.bf-alert svg {









  flex: none;









  margin-top: 1px;









}









.bf-alert.warn {









  border-color: color-mix(in srgb, var(--wa) 40%, transparent);









  background: color-mix(in srgb, var(--wa) 9%, transparent);









}









.bf-alert.no {









  border-color: color-mix(in srgb, var(--no) 40%, transparent);









  background: color-mix(in srgb, var(--no) 8%, transparent);









}









.bf-alert.ok {









  border-color: color-mix(in srgb, var(--ok) 40%, transparent);









  background: color-mix(in srgb, var(--ok) 8%, transparent);









}









.bf-alert.info {









  border-color: color-mix(in srgb, var(--info) 35%, transparent);









  background: color-mix(in srgb, var(--info) 8%, transparent);









}



















/* ---- 12. MODAL / SHEET ------------------------------------------------------------ */









.bf-modal {









  position: fixed;









  inset: 0;









  z-index: 400;









  display: flex;









  align-items: flex-end;









  justify-content: center;









  background: rgba(10, 12, 18, 0.55);









  backdrop-filter: blur(4px);









  animation: bfFade 0.18s;









  padding: 0;









}









@media (min-width: 640px) {









  .bf-modal {









    align-items: center;









    padding: 20px;









  }









}









.bf-modal .box {









  width: 100%;









  max-width: 520px;









  max-height: 88vh;









  overflow-y: auto;









  background: var(--card);









  border: 1px solid var(--bd);









  border-radius: 20px 20px 0 0;









  box-shadow: var(--sh-hi);









  padding: 18px;









  padding-bottom: calc(18px + env(safe-area-inset-bottom));









  animation: bfUp 0.28s var(--spring);









}









@media (min-width: 640px) {









  .bf-modal .box {









    border-radius: 18px;









    animation: bfRise 0.24s var(--spring);









  }









}









.bf-modal .box h2 {









  margin-bottom: 6px;









}









.bf-modal .acts {









  display: flex;









  gap: 8px;









  justify-content: flex-end;









  margin-top: 16px;









  flex-wrap: wrap;









}









@keyframes bfFade {









  from {









    opacity: 0;









  }









  to {









    opacity: 1;









  }









}









@keyframes bfUp {









  from {









    transform: translateY(24px);









    opacity: 0;









  }









  to {









    transform: none;









    opacity: 1;









  }









}









@keyframes bfRise {









  from {









    opacity: 0;









    transform: translateY(8px);









  }









  to {









    opacity: 1;









    transform: none;









  }









}









.bf-rise {









  animation: bfRise 0.4s var(--spring) both;









}









.bf-rise:nth-child(2) {









  animation-delay: 0.04s;









}









.bf-rise:nth-child(3) {









  animation-delay: 0.08s;









}









.bf-rise:nth-child(4) {









  animation-delay: 0.12s;









}









.bf-rise:nth-child(n + 5) {









  animation-delay: 0.16s;









}



















/* ---- 13. SHELL: sidebar / topbar / tabbar --------------------------------------- */









.bf-topbar {









  position: sticky;









  top: 0;









  z-index: 20;









  display: flex;









  align-items: center;









  gap: 10px;









  min-height: 56px;









  padding: 8px 14px;









  background: color-mix(in srgb, var(--panel) 88%, transparent);









  backdrop-filter: saturate(1.3) blur(10px);









  border-bottom: 1px solid var(--bd);









}









.bf-topbar .ttl {









  font-weight: 700;









  font-size: var(--fs-lg);









  letter-spacing: -0.02em;









  display: flex;









  align-items: center;









  gap: 8px;









  min-width: 0;









  white-space: nowrap;









  overflow: hidden;









  text-overflow: ellipsis;









}









.bf-topbar .sp {









  flex: 1;









}









.bf-back {









  display: inline-flex;









  align-items: center;









  gap: 4px;









  min-height: 36px;









  padding: 0 10px 0 6px;









  border-radius: 10px;









  color: var(--mut);









  font-weight: 600;









  font-size: var(--fs-sm);









  text-decoration: none !important;









}









.bf-back:hover {









  background: var(--chip);









  color: var(--tx);









}









/* mobile: la cabecera envuelve; el selector pasa a una fila propia y el id se oculta */









@media (max-width: 620px) {









  .bf-topbar {









    flex-wrap: wrap;









    padding-bottom: 10px;









  }









  .bf-topbar .ttl {









    font-size: var(--fs-md);









  }









  .bf-topbar .sp {









    flex: 1 0 auto;









  }









  .bf-topbar .bf-seg {









    order: 10;









    width: 100%;









  }









  .bf-topbar .solo-lg {









    display: none;









  }









}









.bf-page {









  max-width: 1040px;









  margin: 0 auto;









  padding: 18px 16px calc(40px + env(safe-area-inset-bottom));









}









@media (min-width: 900px) {









  .bf-page {









    padding: 26px 28px 60px;









  }









}









.bf-page-hd {









  display: flex;









  align-items: flex-end;









  justify-content: space-between;









  gap: 12px;









  flex-wrap: wrap;









  margin-bottom: 18px;









}









.bf-page-hd .s {









  color: var(--mut);









  margin-top: 3px;









  max-width: 60ch;









}









.bf-eyebrow {









  font-size: var(--fs-xs);









  font-weight: 700;









  color: var(--ac);









  text-transform: uppercase;









  letter-spacing: 0.08em;









  margin-bottom: 4px;









}



















/* ---- 13b. PORTAL DEL CLIENTE: shell (sidebar / cabecera / barra inferior) + inicio ---- */









/* ---- shell: sidebar (desktop) / cabecera + barra inferior (mobile) ---- */









.shell {









  min-height: 100vh;









  min-height: 100dvh;









}









.side {









  display: none;









}









.mhead {









  position: sticky;









  top: 0;









  z-index: 20;









  display: flex;









  align-items: center;









  gap: 10px;









  padding: 10px 14px;









  background: color-mix(in srgb, var(--panel) 90%, transparent);









  backdrop-filter: saturate(1.3) blur(10px);









  border-bottom: 1px solid var(--bd);









}









.mhead .nm {









  font-weight: 700;









  flex: 1;









  min-width: 0;









  white-space: nowrap;









  overflow: hidden;









  text-overflow: ellipsis;









  letter-spacing: -0.02em;









}









.tabbar {









  position: fixed;









  left: 0;









  right: 0;









  bottom: 0;









  z-index: 30;









  display: grid;









  grid-template-columns: repeat(5, 1fr);









  background: color-mix(in srgb, var(--panel) 94%, transparent);









  backdrop-filter: saturate(1.3) blur(12px);









  border-top: 1px solid var(--bd);









  padding-bottom: env(safe-area-inset-bottom);









}









.tabbar a,









.tabbar button {









  display: flex;









  flex-direction: column;









  align-items: center;









  gap: 3px;









  padding: 8px 2px 7px;









  border: 0;









  background: none;









  color: var(--mut);









  font-size: 10.5px;









  font-weight: 600;









  text-decoration: none !important;









  cursor: pointer;









}









.tabbar .on {









  color: var(--ac-txt, var(--ac));









}









.tabbar svg {









  width: 22px;









  height: 22px;









}









.main {









  padding-bottom: 80px;









}









.nav a {









  display: flex;









  align-items: center;









  gap: 11px;









  padding: 9px 12px;









  border-radius: 10px;









  color: var(--mut);









  font-weight: 600;









  font-size: var(--fs);









  text-decoration: none !important;









  transition:









    background 0.15s,









    color 0.15s;









}









.nav a:hover {









  background: var(--chip);









  color: var(--tx);









}









.nav a.on {









  background: var(--ac-soft);









  color: var(--ac-txt, var(--ac));









}









.nav a svg {









  width: 19px;









  height: 19px;









}









.nav .ext {









  margin-left: auto;









  width: 14px;









  height: 14px;









  opacity: 0.5;









}









.nav-h {









  font-size: var(--fs-xs);









  font-weight: 700;









  color: var(--tx3);









  text-transform: uppercase;









  letter-spacing: 0.08em;









  padding: 14px 12px 6px;









}









@media (min-width: 900px) {









  .shell {









    display: grid;









    grid-template-columns: 250px 1fr;









  }









  .mhead,









  .tabbar {









    display: none;









  }









  .main {









    padding-bottom: 0;









    min-width: 0;









  }









  .side {









    display: flex;









    flex-direction: column;









    position: sticky;









    top: 0;









    height: 100vh;









    height: 100dvh;









    padding: 18px 14px;









    background: var(--panel);









    border-right: 1px solid var(--bd);









  }









  .side .brand {









    display: flex;









    align-items: center;









    gap: 10px;









    padding: 4px 8px 16px;









    min-width: 0;









  }









  .side .brand .nm {









    font-weight: 700;









    letter-spacing: -0.02em;









    white-space: nowrap;









    overflow: hidden;









    text-overflow: ellipsis;









  }









  .side .brand small {









    display: block;









    color: var(--mut);









    font-size: var(--fs-xs);









    font-weight: 500;









  }









  .side .nav {









    flex: 1;









    overflow-y: auto;









  }









  .side .foot {









    border-top: 1px solid var(--bd);









    padding-top: 12px;









    display: flex;









    align-items: center;









    gap: 10px;









  }









  .side .foot .u {









    flex: 1;









    min-width: 0;









    font-size: var(--fs-sm);









    line-height: 1.35;









  }









  .side .foot .u b,









  .side .foot .u .bf-muted {









    display: block;









    white-space: nowrap;









    overflow: hidden;









    text-overflow: ellipsis;









  }









  .side .foot .u .bf-muted {









    font-size: var(--fs-xs);









  }









  .side .foot .bf-btn,









  .side .foot .bf-avatar {









    flex: none;









  }









  .side .foot .bf-btn.icon {









    --h: 32px;









  }









}









/* ---- inicio ---- */









.hero {









  display: grid;









  gap: 16px;









  align-items: center;









}









@media (min-width: 720px) {









  .hero {









    grid-template-columns: 1fr 220px;









  }









}









.hero .st {









  display: flex;









  align-items: center;









  gap: 10px;









  font-size: var(--fs-lg);









  font-weight: 700;









  letter-spacing: -0.02em;









}









.hero .st .bf-dot {









  width: 11px;









  height: 11px;









}









.hero .sub {









  color: var(--mut);









  margin-top: 4px;









}









.pulse {









  width: 100%;









  height: 64px;









  color: var(--ok);









  opacity: 0.9;









}









.pulse.off {









  color: var(--tx3);









}









.pulse.warn {









  color: var(--wa);









}









.pulse path {









  stroke: currentColor;









  fill: none;









  stroke-width: 2;









  stroke-linecap: round;









  stroke-linejoin: round;









}









/* trazo de base siempre visible + un barrido que lo recorre (el "latido") */









.pulse path.base {









  opacity: 0.28;









}









.pulse path.run {









  stroke-dasharray: 600;









  stroke-dashoffset: 600;









  animation: pulseDraw 3.2s linear infinite;









}









.pulse.off path.run,









.pulse.warn path.run {









  animation: none;









  opacity: 0;









}









.pulse.off path.base,









.pulse.warn path.base {









  opacity: 0.55;









}









@keyframes pulseDraw {









  0% {









    stroke-dashoffset: 600;









    opacity: 0;









  }









  8% {









    opacity: 1;









  }









  70% {









    stroke-dashoffset: 0;









    opacity: 1;









  }









  100% {









    stroke-dashoffset: 0;









    opacity: 0;









  }









}









.hace {









  display: grid;









  gap: 8px;









  margin-top: 16px;









  padding-top: 14px;









  border-top: 1px solid var(--bd);









}









@media (min-width: 720px) {









  .hace {









    grid-template-columns: 1fr 1fr;









  }









}









.hace .it {









  display: flex;









  gap: 10px;









  align-items: flex-start;









  font-size: var(--fs-sm);









}









.hace .it .ic {









  width: 22px;









  height: 22px;









  border-radius: 7px;









  display: grid;









  place-items: center;









  flex: none;









  background: color-mix(in srgb, var(--ok) 12%, transparent);









  color: var(--ok);









}









.hace .it.off .ic {









  background: var(--chip);









  color: var(--tx3);









}









.hace .it.off {









  color: var(--mut);









}









.hace .it svg {









  width: 13px;









  height: 13px;









}









.quick {









  display: grid;









  grid-template-columns: repeat(2, 1fr);









  gap: 10px;









}









.quick a {









  display: flex;









  align-items: center;









  gap: 10px;









  padding: 12px;









  border-radius: 12px;









  border: 1px solid var(--bd);









  background: var(--card);









  color: var(--tx);









  font-weight: 600;









  text-decoration: none !important;









  transition:









    border-color 0.18s,









    transform 0.18s var(--spring);









}









.quick a:hover {









  border-color: var(--ac);









  transform: translateY(-1px);









}









.quick .ic {









  width: 34px;









  height: 34px;









  border-radius: 9px;









  display: grid;









  place-items: center;









  background: var(--ac-soft);









  color: var(--ac);









  flex: none;









}









.quick small {









  display: block;









  color: var(--mut);









  font-weight: 400;









  font-size: var(--fs-xs);









}









@media (max-width: 420px) {









  /* en celular angosto el texto de cada acceso no entra en dos columnas: el ícono arriba y el texto abajo */









  .quick a {









    flex-direction: column;









    align-items: flex-start;









    gap: 8px;









  }









}









/* ---- 13c0. títulos de grupo de la home: separan el asistente de las reseñas (01/10/2026) ---- */









.grp-h {









  display: flex;









  align-items: baseline;









  flex-wrap: wrap;









  gap: 4px 10px;









  margin: 26px 2px 10px;









  font-size: 1.05rem;









  font-weight: 800;









  letter-spacing: -0.01em;









}









.grp-h small {









  font-size: var(--fs-xs);









  font-weight: 500;









  color: var(--mut);









}









.grp-mini {









  margin: 14px 0 6px;









  font-size: var(--fs-xs);









  font-weight: 700;









  color: var(--tx3);









  text-transform: uppercase;









  letter-spacing: 0.06em;









}









/* ---- 13c. "Tus servicios" (home) + índice de automatizaciones + pasos numerados (01/10/2026) ---- */









.srv-grid {









  display: grid;









  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));









  gap: 10px;









}









.srv {









  display: flex;









  flex-direction: column;









  gap: 6px;









  padding: 13px 14px;









  border-radius: 12px;









  border: 1px solid var(--bd);









  background: var(--card);









  color: var(--tx);









  text-decoration: none !important;









  min-width: 0;









  transition:









    border-color 0.18s,









    transform 0.18s var(--spring);









}









a.srv:hover {









  border-color: var(--ac);









  transform: translateY(-1px);









}









.srv .hd {









  display: flex;









  align-items: center;









  gap: 9px;









  font-weight: 700;









}









.srv .hd .ic {









  width: 30px;









  height: 30px;









  border-radius: 8px;









  display: grid;









  place-items: center;









  background: var(--ac-soft);









  color: var(--ac);









  flex: none;









}









.srv .hd .ic svg {









  width: 17px;









  height: 17px;









}









.srv .hd .tt {









  color: var(--tx);









  min-width: 0;









}









.srv .d {









  color: var(--mut);









  font-size: var(--fs-xs);









  line-height: 1.45;









}









.srv.off {









  opacity: 0.72;









}









.auto-idx {









  display: flex;









  flex-wrap: wrap;









  gap: 8px;









  margin: 0 0 14px;









}









.auto-idx a {









  display: inline-flex;









  align-items: center;









  gap: 7px;









  padding: 7px 12px;









  border-radius: 999px;









  border: 1px solid var(--bd);









  background: var(--card);









  color: var(--tx);









  font-size: var(--fs-xs);









  font-weight: 600;









  text-decoration: none !important;









}









.auto-idx a:hover {









  border-color: var(--ac);









}









.bf-item .num {









  flex: none;









  width: 24px;









  height: 24px;









  border-radius: 50%;









  display: grid;









  place-items: center;









  background: var(--ac-soft);









  color: var(--ac);









  font-weight: 700;









  font-size: var(--fs-xs);









}









.turno-mini {









  display: flex;









  gap: 12px;









  align-items: center;









  padding: 9px 0;









  border-top: 1px solid var(--bd);









}









.turno-mini:first-child {









  border-top: 0;









}









.turno-mini .h {









  font-weight: 700;









  font-variant-numeric: tabular-nums;









  min-width: 46px;









}









.turno-mini .h small {









  display: block;









  color: var(--mut);









  font-weight: 500;









  font-size: var(--fs-xs);









}









.cols {









  display: grid;









  gap: 14px;









}









@media (min-width: 900px) {









  .cols {









    grid-template-columns: 3fr 2fr;









    align-items: start;









  }









}









/* ---- automatizaciones / integraciones ---- */









.auto .bf-card-hd {









  align-items: center;









}









.acts {









  display: flex;









  gap: 8px;









  align-items: center;









  flex-wrap: wrap;









  margin-top: 14px;









}









.bf-aplic {









  font-size: var(--fs-sm);









  color: var(--mut);









}









.bf-aplic.ok {









  color: var(--ok);









}









.bf-aplic.esperando {









  color: var(--mut);









}









.errs {









  margin-top: 10px;









  font-size: var(--fs-sm);









  color: var(--no);









}









.errs ul {









  margin: 4px 0 0;









  padding-left: 18px;









}









.serv {









  display: grid;









  grid-template-columns: 1fr 96px 36px;









  gap: 8px;









  margin-bottom: 8px;









}









.dias {









  display: grid;









  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));









  gap: 8px;









}









.dias label {









  display: flex;









  align-items: center;









  gap: 8px;









  font-size: var(--fs-sm);









}









.dias label span {









  width: 30px;









  color: var(--mut);









  font-weight: 600;









}









.prof {









  border: 1px solid var(--bd);









  border-radius: 12px;









  padding: 12px;









  margin-bottom: 10px;









  background: var(--bd2);









}









.glos dt {









  font-weight: 650;









  margin-top: 10px;









}









.glos dd {









  margin: 2px 0 0;









  color: var(--mut);









  font-size: var(--fs-sm);









}









.doc-help {









  font-size: var(--fs-sm);









  color: var(--mut);









  margin: 10px 0;









}









.sheet .it {









  display: flex;









  align-items: center;









  gap: 12px;









  padding: 12px 8px;









  border-radius: 10px;









  color: var(--tx);









  font-weight: 600;









  text-decoration: none !important;









  cursor: pointer;









  background: none;









  border: 0;









  width: 100%;









  text-align: left;









}









.sheet .it:hover {









  background: var(--chip);









}









.sheet .it svg {









  width: 20px;









  height: 20px;









  color: var(--mut);









}



















/* ---- 14. SCROLLBAR ---------------------------------------------------------------- */









* {









  scrollbar-width: thin;









  scrollbar-color: var(--bd) transparent;









}









*::-webkit-scrollbar {









  width: 10px;









  height: 10px;









}









*::-webkit-scrollbar-thumb {









  background: var(--bd);









  border-radius: 8px;









  border: 2px solid transparent;









  background-clip: content-box;









}



















/* ============================================================================









   B) COMPATIBILIDAD — páginas legacy (admin.html, cliente.html, agenda.html…)









   Solo aplica cuando <html> NO lleva class="bf". Tokens dark-first de arriba.









   ============================================================================ */









html:not(.bf) {









  scroll-behavior: smooth;









}









html:not(.bf) body {









  position: relative;









  font-family: "Satoshi", "Inter", var(--font) !important;









  letter-spacing: -0.006em;









  text-rendering: optimizeLegibility;









}









html:not(.bf) body::before {









  content: "";









  position: fixed;









  inset: 0;









  z-index: 0;









  pointer-events: none;









  background:









    radial-gradient(60vw 40vw at 8% -8%, rgba(255, 106, 61, 0.08), transparent 60%),









    radial-gradient(50vw 40vw at 100% 108%, rgba(45, 212, 191, 0.06), transparent 60%);









}









html:not(.bf) body::after {









  content: "";









  position: fixed;









  inset: 0;









  z-index: 0;









  pointer-events: none;









  opacity: 0.035;









  mix-blend-mode: overlay;









  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");









}









html:not(.bf)[data-theme="light"] body::after {









  opacity: 0.02;









}









html:not(.bf) body > * {









  position: relative;









  z-index: 1;









}









html:not(.bf) .v,









html:not(.bf) .mv,









html:not(.bf) .saldo,









html:not(.bf) .badge,









html:not(.bf) td,









html:not(.bf) th {









  font-variant-numeric: tabular-nums;









}









html:not(.bf) .logo,









html:not(.bf) h1,









html:not(.bf) h2,









html:not(.bf) h3,









html:not(.bf) .nm {









  letter-spacing: -0.02em;









}









html:not(.bf) .top {









  backdrop-filter: saturate(1.2) blur(8px);









  background: color-mix(in srgb, var(--panel) 82%, transparent) !important;









  border-bottom: 1px solid var(--bd) !important;









}









html:not(.bf) .logo .b,









html:not(.bf) .brand .b {









  border-radius: 50% !important;









  background: radial-gradient(circle at 38% 32%, #ffeccb 0%, #ffb454 28%, #ff6a3d 62%, #7a2410 100%) !important;









  box-shadow:









    0 0 0 1px rgba(255, 106, 61, 0.3),









    0 0 16px -2px rgba(255, 106, 61, 0.55);









  position: relative;









  overflow: hidden;









}









html:not(.bf) .logo .b::after,









html:not(.bf) .brand .b::after {









  content: "";









  position: absolute;









  inset: 0;









  border-radius: 50%;









  background: radial-gradient(circle at 34% 28%, rgba(255, 255, 255, 0.92), transparent 42%);









  opacity: 0.85;









}









html:not(.bf) .card,









html:not(.bf) .c,









html:not(.bf) .stat {









  border: 1px solid var(--bd) !important;









  background: var(--card) !important;









  box-shadow: var(--sh) !important;









  transition:









    transform 0.35s var(--spring),









    box-shadow 0.35s var(--spring),









    border-color 0.35s var(--spring);









}









html:not(.bf) .c:hover,









html:not(.bf) .stat:hover {









  transform: translateY(-2px);









  box-shadow: var(--sh-hi) !important;









  border-color: color-mix(in srgb, var(--ac) 45%, var(--bd)) !important;









}









html:not(.bf) .c {









  overflow: hidden;









  position: relative;









}









html:not(.bf) .c::before {









  content: "";









  position: absolute;









  top: 0;









  left: 0;









  right: 0;









  height: 2px;









  background: var(--grad);









  transform: scaleX(0);









  transform-origin: left;









  transition: transform 0.4s var(--spring);









}









html:not(.bf) .c:hover::before {









  transform: scaleX(1);









}









html:not(.bf) .stat .v {









  font-weight: 780;









  background: linear-gradient(180deg, var(--tx), color-mix(in srgb, var(--tx) 72%, var(--mut)));









  -webkit-background-clip: text;









  background-clip: text;









  -webkit-text-fill-color: transparent;









}









html:not(.bf) .stat .k {









  color: var(--mut);









}









html:not(.bf) .dot {









  position: relative;









}









html:not(.bf) .dot.on,









html:not(.bf) .dot.run {









  background: var(--signal) !important;









  animation: bfPulseSig 2.4s var(--spring) infinite;









}









html:not(.bf) .dot.warn {









  background: var(--wa) !important;









}









html:not(.bf) .dot.off,









html:not(.bf) .dot.stop {









  background: #5b6270 !important;









}









@keyframes bfPulseSig {









  0% {









    box-shadow: 0 0 0 0 color-mix(in srgb, var(--signal) 55%, transparent);









  }









  70% {









    box-shadow: 0 0 0 7px transparent;









  }









  100% {









    box-shadow: 0 0 0 0 transparent;









  }









}









html:not(.bf) .badge {









  background: var(--chip);









  border: 1px solid var(--bd) !important;









  color: var(--mut) !important;









  border-radius: 999px !important;









  font-weight: 600;









}









html:not(.bf) .badge.err {









  color: var(--no) !important;









  border-color: color-mix(in srgb, var(--no) 45%, transparent) !important;









  background: color-mix(in srgb, var(--no) 12%, transparent);









}









html:not(.bf) .btn {









  border: 1px solid var(--bd) !important;









  background: var(--card) !important;









  color: var(--tx) !important;









  border-radius: 10px !important;









  transition:









    transform 0.2s var(--spring),









    border-color 0.2s var(--spring),









    box-shadow 0.2s var(--spring),









    background 0.2s var(--spring);









}









html:not(.bf) .btn:hover {









  border-color: color-mix(in srgb, var(--ac) 55%, var(--bd)) !important;









  transform: translateY(-1px);









}









html:not(.bf) .btn:active {









  transform: translateY(0);









}









html:not(.bf) .btn.pri {









  background: var(--grad) !important;









  border-color: transparent !important;









  color: #1a0f08 !important;









  font-weight: 700;









  box-shadow: 0 6px 20px -8px rgba(255, 106, 61, 0.6);









}









html:not(.bf) .btn.gh {









  background: transparent !important;









  box-shadow: none !important;









}









html:not(.bf) input,









html:not(.bf) select,









html:not(.bf) textarea,









html:not(.bf) .sel {









  background: var(--bd2) !important;









  border: 1px solid var(--bd) !important;









  color: var(--tx) !important;









  border-radius: 10px !important;









  transition:









    border-color 0.2s var(--spring),









    box-shadow 0.2s var(--spring);









}









html:not(.bf) input:focus,









html:not(.bf) select:focus,









html:not(.bf) textarea:focus,









html:not(.bf) .sel:focus {









  outline: none;









  border-color: var(--ac) !important;









  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ac) 22%, transparent) !important;









}









html:not(.bf) .segs {









  background: var(--bd2) !important;









  border: 1px solid var(--bd) !important;









  border-radius: 10px !important;









}









html:not(.bf) .segs button.on {









  background: var(--card) !important;









  color: var(--tx) !important;









  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);









}









html:not(.bf) .met {









  background: var(--bd2) !important;









  border: 1px solid transparent;









  border-radius: 10px !important;









  transition: border-color 0.3s var(--spring);









}









html:not(.bf) .c:hover .met {









  border-color: var(--bd);









}









html:not(.bf) .met .mv {









  color: var(--tx);









}









html:not(.bf) .bar {









  background: color-mix(in srgb, var(--mut) 16%, transparent) !important;









}









html:not(.bf) .bar > i {









  background: var(--grad) !important;









  box-shadow: 0 0 10px -2px color-mix(in srgb, var(--ac) 70%, transparent);









  transition: width 0.6s var(--spring);









}









html:not(.bf) .ov {









  backdrop-filter: blur(6px);









  background: rgba(6, 7, 10, 0.72) !important;









}









html:not(.bf) .ov .box {









  background: var(--card) !important;









  border: 1px solid var(--bd) !important;









  box-shadow: var(--sh-hi) !important;









}









html:not(.bf) .toast {









  background: var(--card) !important;









  color: var(--tx) !important;









  border: 1px solid color-mix(in srgb, var(--ac) 40%, var(--bd)) !important;









  border-radius: 12px !important;









  box-shadow: var(--sh-hi) !important;









  backdrop-filter: blur(8px);









}









html:not(.bf) .stats > *,









html:not(.bf) .grid > .c,









html:not(.bf) .kanban .col,









html:not(.bf) .card {









  animation: bfRise 0.5s var(--spring) both;









}









html:not(.bf) .grid > .c:nth-child(2) {









  animation-delay: 0.04s;









}









html:not(.bf) .grid > .c:nth-child(3) {









  animation-delay: 0.08s;









}









html:not(.bf) .grid > .c:nth-child(n + 4) {









  animation-delay: 0.12s;









}









@keyframes bfSpark {









  0% {









    box-shadow: 0 0 0 0 color-mix(in srgb, var(--ac) 60%, transparent);









  }









  100% {









    box-shadow: 0 0 0 22px transparent;









  }









}









.bf-spark {









  animation: bfSpark 0.6s ease-out;









}









/* command palette (⌘K) del admin */









.bfk {









  position: fixed;









  inset: 0;









  z-index: 400;









  display: flex;









  align-items: flex-start;









  justify-content: center;









  padding-top: 12vh;









  background: rgba(6, 7, 10, 0.6);









  backdrop-filter: blur(6px);









  animation: bfFade 0.18s var(--spring);









}









.bfk-box {









  width: min(620px, 92vw);









  background: var(--card);









  border: 1px solid color-mix(in srgb, var(--ac) 32%, var(--bd));









  border-radius: 16px;









  box-shadow: var(--sh-hi);









  overflow: hidden;









  animation: bfRise 0.22s var(--spring) both;









}









.bfk-in {









  display: flex;









  align-items: center;









  gap: 10px;









  padding: 14px 16px;









  border-bottom: 1px solid var(--bd);









}









.bfk-in .ic {









  color: var(--ac);









  font-size: 15px;









}









.bfk-in input {









  flex: 1;









  border: 0 !important;









  background: transparent !important;









  color: var(--tx) !important;









  font-size: 16px;









  outline: none;









  box-shadow: none !important;









}









.bfk-hint {









  font-size: 11px;









  color: var(--mut);









  border: 1px solid var(--bd);









  border-radius: 6px;









  padding: 2px 6px;









}









.bfk-list {









  max-height: 52vh;









  overflow-y: auto;









  padding: 6px;









}









.bfk-sec {









  font-size: 10.5px;









  text-transform: uppercase;









  letter-spacing: 0.06em;









  color: var(--mut);









  padding: 8px 10px 4px;









}









.bfk-it {









  display: flex;









  align-items: center;









  gap: 11px;









  padding: 9px 11px;









  border-radius: 10px;









  cursor: pointer;









  font-size: 14px;









}









.bfk-it .em {









  width: 26px;









  height: 26px;









  border-radius: 7px;









  display: grid;









  place-items: center;









  background: var(--bd2);









  font-size: 14px;









  flex: none;









}









.bfk-it .tt {









  flex: 1;









  overflow: hidden;









  text-overflow: ellipsis;









  white-space: nowrap;









}









.bfk-it .tt small {









  color: var(--mut);









  font-size: 12px;









}









.bfk-it .go {









  color: var(--mut);









  font-size: 12px;









  opacity: 0;









}









.bfk-it.sel {









  background: color-mix(in srgb, var(--ac) 16%, transparent);









  box-shadow: inset 2px 0 0 var(--ac);









}









.bfk-it.sel .em {









  background: var(--grad);









  color: #1a0f08;









}









.bfk-it.sel .go {









  opacity: 1;









}









.bfk-empty {









  padding: 22px;









  text-align: center;









  color: var(--mut);









  font-size: 13px;









}



















/* ---- accesibilidad: menos movimiento ---------------------------------------- */









@media (prefers-reduced-motion: reduce) {









  *,









  *::before,









  *::after {









    animation-duration: 0.001ms !important;









    animation-iteration-count: 1 !important;









    transition-duration: 0.001ms !important;









    scroll-behavior: auto !important;









  }









}



















/* ---- Seguimiento (home del cliente): filas número + texto, con una fila en alerta ---- */









.seg-fila {









  display: flex;









  align-items: center;









  gap: 14px;









  padding: 11px 0;









  border-bottom: 1px solid var(--bd);









}









.seg-fila:last-child {









  border-bottom: 0;









}









.seg-n {









  font-size: 26px;









  font-weight: 700;









  line-height: 1;









  min-width: 48px;









  text-align: right;









  font-variant-numeric: tabular-nums;









  color: var(--tx);









}









.seg-tx {









  display: flex;









  flex-direction: column;









  gap: 2px;









  min-width: 0;









}









.seg-tx b {









  font-size: var(--fs-sm);









  font-weight: 600;









}









.seg-tx span {









  font-size: var(--fs-xs);









  color: var(--mut);









  line-height: 1.35;









}









.seg-fila.alerta .seg-n {









  color: var(--wa);









}









.seg-fila.alerta .seg-tx span {









  color: var(--wa);









}



















/* [07/10/2026] pantallas táctiles: controles de al menos 40 px (dedo) y sin tooltips flotantes, que en celular









   se salían del ancho y generaban scroll horizontal (QA multi-dispositivo). */









@media (hover: none) and (pointer: coarse) {









  .bf-btn,









  .bf-btn.sm {









    --h: 40px;









  }









  .bf-seg button,









  .bf-check,









  .bf-switch {









    min-height: 40px;









  }









  [data-tip]::after,









  [data-tip]::before {









    display: none !important;









  }









  .auto-idx a {









    min-height: 40px; /* [07/10/2026 QA] chips del índice del Asistente: 33 px → dedo */









  }









}


















/* [07/10/2026] Portal — Inicio reordenado: estado + "Te esperan" arriba; "Qué hace" y "Tus servicios" lado a lado */








.ini-top {








  display: grid;








  grid-template-columns: minmax(0, 1fr) minmax(240px, 300px);








  gap: 14px;








  align-items: stretch;








}








.ini-top > .bf-card,








.ini-dos > .bf-card {








  margin: 0;








}








.ini-dos {








  display: grid;








  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);








  gap: 14px;








  margin-top: 14px;








  align-items: start;








}








.esperan {








  display: flex;








  align-items: center;








  gap: 12px;








  text-decoration: none;








  color: var(--tx);








  border-color: color-mix(in srgb, var(--ac) 45%, var(--bd));








  background: var(--ac-soft);








}








.esperan:hover {








  border-color: var(--ac);








}








.esperan .n {








  font-size: 30px;








  font-weight: 750;








  color: var(--ac-txt, var(--ac));








  font-variant-numeric: tabular-nums;








  min-width: 28px;








}








.esperan .tx {








  flex: 1;








  min-width: 0;








  display: flex;








  flex-direction: column;








}








.esperan .tx small {








  color: var(--mut);








  font-size: var(--fs-sm);








}








.esperan .tx b {








  color: var(--tx); /* [07/10 QA] en claro heredaba el acento (3:1 sobre el fondo tintado) */








}








.esperan .ir {








  font-weight: 700;








  color: var(--ac-txt, var(--ac));








  white-space: nowrap;








}








.esperan.cero {








  background: var(--card);








  border-color: var(--bd);








}








.esperan.cero .n,








.esperan.cero .ir {








  color: var(--mut);








}








#sec-inicio .bf-page-hd {








  align-items: center;








}








#prefsModal .box > .bf-card-hd {








  margin-bottom: 12px;








}








@media (min-width: 900px) {








  .solo-movil-card {








    display: none;








  }








}








@media (max-width: 760px) {








  .ini-top,








  .ini-dos {








    grid-template-columns: minmax(0, 1fr);








  }








}















/* [07/10/2026] Portal — Asistente en acordeón: plegada = solo el encabezado (título, qué hace, estado) */







.bf-card.acc > .bf-card-hd {







  cursor: pointer;







  position: relative;







  padding-right: 34px;







  border-radius: var(--r);







}







.bf-card.acc > .bf-card-hd::after {







  content: "";







  position: absolute;







  right: 8px;







  top: 50%;







  width: 9px;







  height: 9px;







  border-right: 2px solid var(--mut);







  border-bottom: 2px solid var(--mut);







  transform: translateY(-70%) rotate(45deg);







  transition: transform 0.2s;







}







.bf-card.acc:not(.plegada) > .bf-card-hd::after {







  transform: translateY(-30%) rotate(-135deg);







}







.bf-card.acc > .bf-card-hd:focus-visible {







  outline: 2px solid var(--ac);







  outline-offset: 2px;







}







.bf-card.acc.plegada > :not(.bf-card-hd) {







  display: none !important;







}







.bf-card.acc.plegada > .bf-card-hd {







  margin-bottom: 0;







}







.bf-card.acc.plegada:hover {







  border-color: color-mix(in srgb, var(--ac) 35%, var(--bd));







}







#sec-automatizaciones .bf-card.acc {







  margin-bottom: 10px;







}













/* [07/10/2026] Portal — Conexiones en pestañas */






.con-tabs {






  margin-bottom: 14px;






  overflow-x: auto;






  flex-wrap: nowrap;






}






.con-tabs button {






  white-space: nowrap;






}






.bf-card.fuera-tab {






  display: none !important;






}











/* [07/10/2026] Portal — buscador de ajustes (Ctrl K) */





.busca-btn {





  display: flex;





  align-items: center;





  gap: 8px;





  width: 100%;





  min-height: 40px;





  margin: 0 0 10px;





  padding: 0 10px;





  border: 1px solid var(--bd);





  border-radius: var(--r-sm);





  background: var(--panel);





  color: var(--mut);





  font: inherit;





  font-size: var(--fs-sm);





  cursor: pointer;





  text-align: left;





}





.busca-btn:hover {





  border-color: color-mix(in srgb, var(--ac) 40%, var(--bd));





  color: var(--tx);





}





.busca-btn span {





  flex: 1;





}





.busca-btn kbd {





  font-family: var(--mono);





  font-size: 11px;





  border: 1px solid var(--bd);





  border-radius: 6px;





  padding: 1px 5px;





  color: var(--mut);





}





.busca-modal {





  align-items: flex-start;





}





.busca-modal .box {





  margin-top: 8vh;





  border-radius: 16px;





  max-width: 560px;





  padding: 12px;





}





.busca-in {





  display: flex;





  align-items: center;





  gap: 10px;





  min-height: 46px;





  padding: 0 12px;





  border: 1px solid var(--bd);





  border-radius: var(--r);





  background: var(--panel);





}





.busca-in input {





  flex: 1;





  min-width: 0;





  border: 0;





  outline: 0;





  background: transparent;





  color: var(--tx);





  font: inherit;





  font-size: var(--fs-md);





}





.busca-res {





  display: flex;





  flex-direction: column;





  gap: 2px;





  margin-top: 8px;





  max-height: 60vh;





  overflow-y: auto;





}





.busca-res button {





  display: flex;





  flex-direction: column;





  align-items: flex-start;





  gap: 2px;





  min-height: 44px;





  padding: 8px 12px;





  border: 0;





  border-radius: var(--r-sm);





  background: transparent;





  color: var(--tx);





  font: inherit;





  text-align: left;





  cursor: pointer;





}





.busca-res button small {





  color: var(--mut);





  font-size: var(--fs-xs);





}





.busca-res button.on,





.busca-res button:hover {





  background: var(--ac-soft);





}





.busca-res .vacio {





  color: var(--mut);





  padding: 14px 12px;





  font-size: var(--fs-sm);





}





.bf-card.busca-hit {





  animation: buscaHit 1.6s ease-out;





}





@keyframes buscaHit {





  0%,





  35% {





    box-shadow: 0 0 0 3px var(--ac);





  }





  100% {





    box-shadow: var(--sh);





  }





}





@media (max-width: 899px) {





  .busca-modal .box {





    margin-top: 0;





    border-radius: 0 0 16px 16px;





  }





}



















/* [07/10 QA2] contraste de badges: el color del estado se mezcla hacia --tx, que sube el contraste en los dos temas









   (claro: oscurece; oscuro: aclara). En tema claro .warn/.ok/.ac daban 3,3-3,5:1 y el badge neutro 4,31:1.









   --wa/--ok/--ac NO se tocan porque también se usan como fondos y puntos. */









.bf-badge {









  color: color-mix(in srgb, var(--mut) 75%, var(--tx));









}









.bf-badge.ok {









  color: color-mix(in srgb, var(--ok) 65%, var(--tx));









}









.bf-badge.warn {









  color: color-mix(in srgb, var(--wa) 65%, var(--tx));









}









.bf-badge.no {









  color: color-mix(in srgb, var(--no) 75%, var(--tx));









}









.bf-badge.info {









  color: color-mix(in srgb, var(--info) 75%, var(--tx));









}









.bf-badge.ac {









  color: var(--ac-txt, var(--ac));









}









/* [07/10/2026] Portal — Notas de voz: una tarjeta por voz (principal + turnos por día y horario) */




.voces {




  display: flex;




  flex-direction: column;




  gap: 10px;




}




.voz-fila {




  border: 1px solid var(--bd);




  border-radius: var(--r);




  padding: 12px;




  background: var(--panel);




}




.voz-fila.principal {




  border-color: color-mix(in srgb, var(--ac) 40%, var(--bd));




}




.voz-cab {




  display: flex;




  align-items: center;




  justify-content: space-between;




  gap: 8px;




  margin-bottom: 8px;




}




.voz-fila .vId {




  margin-top: 6px;




}




.voz-fila .bf-row input[type="time"] {




  min-width: 0;




  flex: 1;




}




.voz-uso {




  padding-top: 8px;




}




.voz-barra {




  display: block;




  height: 8px;




  border-radius: 4px;




  background: var(--bd);




  overflow: hidden;




}




.voz-barra span {




  display: block;




  height: 100%;




  width: 0;




  background: var(--ok);




  transition: width 0.3s;




}




.voz-barra span.alto {




  background: var(--wa);




}




.voz-fino summary {




  cursor: pointer;




  font-weight: 600;




  min-height: 40px;




  display: flex;




  align-items: center;




}




.voz-fino input[type="range"] {




  width: 100%;




}



















/* [07/10/2026] el interruptor se toca con el dedo: área de 40 px de alto (el dibujo sigue igual) */









.bf-switch {









  min-height: 40px;









}









.voz-fino summary {









  list-style: none;









  gap: 8px;









}









.voz-fino summary::-webkit-details-marker {









  display: none;









}









.voz-fino summary::before {









  content: "";









  width: 8px;









  height: 8px;









  border-right: 2px solid var(--mut);









  border-bottom: 2px solid var(--mut);









  transform: rotate(-45deg);









  transition: transform 0.2s;









}









.voz-fino[open] summary::before {









  transform: rotate(45deg);









}











/* ============================================================================
   MARCA CARTEL (13/10/2026) — misma identidad que la landing ("Cartel de almacén"):
   cobalto #1D3FBF + amarillo señal #FFD23F, fondo celeste pizarra, Atkinson Hyperlegible
   (texto) + Big Shoulders (títulos de página). Va AL FINAL a propósito: pisa los tokens de
   arriba sin tocarlos. Para volver a "Ember & Graphite": borrar este bloque y el @import
   de la línea 1 (backup en prod: demos/tema.css.bak_ember_20261013).
   ============================================================================ */
:root,
:root[data-theme="dark"],
html.bf,
html.bf[data-theme="light"],
html.bf[data-theme="dark"],
:root[data-theme="light"] {
  --font: "Atkinson Hyperlegible Next", -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --mono: "Atkinson Hyperlegible Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --titulo: "Big Shoulders Display", Impact, "Arial Narrow", sans-serif;
  --amarillo: #ffd23f;
  --tinta: #111318;
}
/* claro: páginas nuevas (portal, login, turnos, crm, bandeja) y legacy con tema claro */
html.bf,
html.bf[data-theme="light"],
:root[data-theme="light"] {
  --bg: #e4ebf5;
  --bg-0: #e4ebf5;
  --panel: #ffffff;
  --card: #ffffff;
  --bd2: #edf1f7;
  --bd: #cfd8e6;
  --chip: #e9eef6;
  --tx: #111318;
  --mut: #474c55;
  --tx3: #5d636d;
  --ac: #1d3fbf;
  --ac2: #ffd23f;
  --ac-soft: rgba(29, 63, 191, 0.1);
  --ac-txt: #1d3fbf;
  --grad: linear-gradient(#1d3fbf, #1d3fbf);
  --sh: 0 1px 2px rgba(17, 19, 24, 0.06), 0 1px 3px rgba(17, 19, 24, 0.05);
  --sh-hi: 0 12px 30px -14px rgba(17, 19, 24, 0.25);
  --ring: 0 0 0 3px rgba(29, 63, 191, 0.25);
  --cotizado: #8a5a00;
}
/* oscuro: tinta azulada (no negro con brillo); el cobalto se aclara para leerse */
:root,
:root[data-theme="dark"],
html.bf[data-theme="dark"] {
  --bg: #0f1420;
  --bg-0: #0f1420;
  --panel: #151b2a;
  --card: #18203a;
  --bd2: #1d2538;
  --bd: #2b3550;
  --chip: #212a40;
  --tx: #eef1f6;
  --mut: #a6aec0;
  --tx3: #8b94a8;
  --ac: #3d5ce0;
  --ac2: #ffd23f;
  --ac-soft: rgba(111, 140, 255, 0.16);
  --ac-txt: #9fb4ff;
  --grad: linear-gradient(#3d5ce0, #3d5ce0);
  --sh: 0 1px 2px rgba(0, 0, 0, 0.45), 0 6px 20px -12px rgba(0, 0, 0, 0.55);
  --sh-hi: 0 12px 34px -14px rgba(0, 0, 0, 0.65);
  --ring: 0 0 0 3px rgba(111, 140, 255, 0.35);
  --cotizado: #ffd23f;
}
@media (prefers-color-scheme: dark) {
  html.bf:not([data-theme="light"]) {
    --bg: #0f1420;
    --bg-0: #0f1420;
    --panel: #151b2a;
    --card: #18203a;
    --bd2: #1d2538;
    --bd: #2b3550;
    --chip: #212a40;
    --tx: #eef1f6;
    --mut: #a6aec0;
    --tx3: #8b94a8;
    --ac: #3d5ce0;
    --ac2: #ffd23f;
    --ac-soft: rgba(111, 140, 255, 0.16);
    --ac-txt: #9fb4ff;
    --grad: linear-gradient(#3d5ce0, #3d5ce0);
    --sh: 0 1px 2px rgba(0, 0, 0, 0.45), 0 6px 20px -12px rgba(0, 0, 0, 0.55);
    --sh-hi: 0 12px 34px -14px rgba(0, 0, 0, 0.65);
    --ring: 0 0 0 3px rgba(111, 140, 255, 0.35);
    --cotizado: #ffd23f;
  }
}

/* tipografía */
html:not(.bf) body {
  font-family: var(--font) !important;
}
html.bf h1 {
  font-family: var(--titulo);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.005em;
  line-height: 1;
  font-size: calc(var(--fs-xl) * 1.35);
}
html.bf h2,
html.bf h3 {
  letter-spacing: -0.01em;
}

/* logo: ícono oficial de Atenti ([R18]: antes cuadro cobalto con centro amarillo), sin brillo ni latido */
.bf-mark,
html:not(.bf) .logo .b,
html:not(.bf) .brand .b {
  border-radius: 22% !important;
  background: #1d3fbf !important;
  box-shadow:
    inset 0 0 0 calc(var(--m, 26px) * 0.24) #1d3fbf,
    inset 0 0 0 999px var(--amarillo) !important; /* [R18] lo tapa el ícono de Atenti (abajo) */
  background: #1d3fbf url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='72 40 880 880'%3E%3Crect width='1024' height='1024' fill='%231D3FBF'/%3E%3Cg stroke='%2313141A' stroke-width='40' stroke-linejoin='round'%3E%3Cpath transform='translate(0 -62) translate(512 140) scale(0.86 0.97) translate(-512 -140)' d='M402 140 L622 140 Q636 140 634 154 L586 486 Q584 500 570 500 L454 500 Q440 500 438 486 L390 154 Q388 140 402 140 Z' fill='%23FFD23F'/%3E%3Crect x='491' y='580' width='42' height='60' rx='6' fill='%23FFFFFF'/%3E%3Crect x='446' y='542' width='132' height='46' rx='18' fill='%23FFFFFF'/%3E%3Cpath d='M332 808 A180 180 0 0 1 692 808 Z' fill='%23FFFFFF'/%3E%3Crect x='296' y='800' width='432' height='86' rx='22' fill='%23FFD23F'/%3E%3C/g%3E%3C/svg%3E") center / cover no-repeat !important;
  box-shadow: none !important;
  animation: none !important;
}
.bf-mark::after,
html:not(.bf) .logo .b::after,
html:not(.bf) .brand .b::after {
  display: none !important;
}
.bf-mark.lg {
  --m: 40px;
}

/* botones principales: cobalto con texto blanco (5,1:1 en oscuro, 8,6:1 en claro), sombra plana */
.bf-btn.pri,
html:not(.bf) .btn.pri {
  background: var(--ac) !important;
  border-color: var(--tinta) !important;
  color: #fff !important;
  box-shadow: 3px 3px 0 var(--tinta) !important;
}
.bf-btn.pri:hover,
html:not(.bf) .btn.pri:hover {
  background: color-mix(in srgb, var(--ac) 86%, #000) !important;
  border-color: var(--tinta) !important;
}
.bf-btn.pri:active,
html:not(.bf) .btn.pri:active {
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0 var(--tinta) !important;
}
@media (prefers-color-scheme: dark) {
  html.bf:not([data-theme="light"]) .bf-btn.pri {
    border-color: var(--ac) !important;
    box-shadow: 3px 3px 0 #000 !important;
  }
}
html.bf[data-theme="dark"] .bf-btn.pri,
html:not(.bf):not([data-theme="light"]) .btn.pri {
  border-color: var(--ac) !important;
  box-shadow: 3px 3px 0 #000 !important;
}

/* fondo de las páginas legacy: sin resplandor naranja ni ruido */
html:not(.bf) body::before {
  background: none !important;
}
html:not(.bf) body::after {
  display: none !important;
}

/* [UX1] "Más" es el único <button> de la barra inferior: html.bf button {font:inherit} le ganaba (más grande y más abajo) */
html.bf .tabbar button {
  font-size: 10.5px;
  font-weight: 600;
  line-height: inherit;
  letter-spacing: normal;
  color: var(--mut);
  justify-content: flex-start;
}
html.bf .tabbar button.on {
  color: var(--ac-txt, var(--ac));
}