:root {
  --bg: #eef1f7; --surface: #ffffff; --border: #dde2ec; --border-2: #c5ccda;
  --t1: #151a2d; --t2: #5b6478; --accent: #3b5bdb; --accent-bg: #e8edff;
  --green: #1a8a4a; --green-bg: #e3f6ea; --green-bd: #b5e2c4;
  --amber: #b26a00; --amber-bg: #fff4dc; --amber-bd: #f3d48e;
  --red: #c92a2a; --red-bg: #ffe8e8; --red-bd: #f5b8b8;
  --r: 14px; --rs: 10px; --shadow: 0 10px 30px rgba(20,26,45,.18);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0f1220; --surface: #181c2e; --border: #2a3048; --border-2: #3a4260;
    --t1: #eef0f7; --t2: #a3abc2; --accent: #7c93ff; --accent-bg: #222a4d;
    --green: #4cc47e; --green-bg: #15301f; --green-bd: #25533a;
    --amber: #f0b44c; --amber-bg: #33280f; --amber-bd: #5a4618;
    --red: #ff7676; --red-bg: #3a1a1c; --red-bd: #62292d;
    --shadow: 0 10px 30px rgba(0,0,0,.5);
  }
}
:root[data-theme="dark"] {
  --bg: #0f1220; --surface: #181c2e; --border: #2a3048; --border-2: #3a4260;
  --t1: #eef0f7; --t2: #a3abc2; --accent: #7c93ff; --accent-bg: #222a4d;
  --green: #4cc47e; --green-bg: #15301f; --green-bd: #25533a;
  --amber: #f0b44c; --amber-bg: #33280f; --amber-bd: #5a4618;
  --red: #ff7676; --red-bg: #3a1a1c; --red-bd: #62292d;
  --shadow: 0 10px 30px rgba(0,0,0,.5); color-scheme: dark;
}
:root[data-theme="light"] { color-scheme: light; }
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--t1);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Inter, Arial, sans-serif; }
.cf-root { max-width: 760px; margin: 0 auto; padding: 14px 16px 60px; }
.cf-root [hidden] { display: none !important; }

.cf-brand { font-size: 13px; font-weight: 700; color: var(--accent); margin-bottom: 8px; }
.cf-title { font-size: 20px; font-weight: 800; margin: 0; }
.cf-sub { font-size: 13px; margin: 4px 0 0; color: var(--t2); }
.cf-label { font-size: 13px; color: var(--t2); display: block; margin-bottom: 6px; }
.cf-error { color: var(--red); font-size: 13px; margin-top: 12px; }

.cf-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px;
  padding: 0 14px; border-radius: var(--rs); border: 1px solid var(--border); background: var(--surface);
  color: var(--t1); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; text-decoration: none; }
.cf-btn:active { transform: scale(.98); }
.cf-btn:disabled { opacity: .5; cursor: default; }
.cf-btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.cf-btn-ghost { border-color: transparent; background: transparent; padding: 0 4px; }
.cf-btn-block { width: 100%; margin-top: 12px; }
.cf-btn-wa { background: #25D366; border-color: #25D366; color: #fff; }
.cf-btn-take { background: var(--accent); border-color: var(--accent); color: #fff; min-height: 36px; font-size: 13px; }
.cf-btn-danger { color: var(--red); border-color: var(--red-bd); }

.cf-input { width: 100%; min-height: 42px; padding: 0 12px; border-radius: var(--rs); border: 1px solid var(--border);
  background: var(--surface); color: var(--t1); font: inherit; font-size: 15px; }
.cf-input:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
textarea.cf-input { padding: 10px 12px; min-height: 70px; resize: vertical; }

.cf-login { max-width: 460px; margin: 28px auto; }
.cf-login-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 18px; }
.cf-login-btn { min-height: 62px; font-size: 16px; border-radius: var(--r); border: 1px solid var(--border);
  background: var(--surface); color: var(--t1); font-weight: 600; cursor: pointer; display: flex; align-items: center; gap: 10px; padding: 0 14px; }
.cf-login-btn.cf-sel { border-color: var(--accent); background: var(--accent-bg); }
.cf-login-pin { margin-top: 16px; display: grid; gap: 10px; }

.cf-header { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 4px 0 14px; }
.cf-header-actions { display: flex; gap: 6px; align-items: center; }
.cf-avatar { width: 36px; height: 36px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent); color: #fff; font-weight: 700; font-size: 14px; flex: 0 0 auto; }

.cf-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 12px; }
.cf-kpi { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); padding: 10px 12px; }
.cf-kpi-num { font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; }
.cf-kpi-lbl { font-size: 12px; color: var(--t2); }
.cf-kpi-accent .cf-kpi-num { color: var(--accent); }
.cf-kpi-amber .cf-kpi-num { color: var(--amber); }
.cf-kpi-green .cf-kpi-num { color: var(--green); }
.cf-kpi-red .cf-kpi-num { color: var(--red); }

.cf-tabs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--r); padding: 4px; margin-bottom: 10px; }
.cf-tab { min-height: 44px; border: 0; border-radius: var(--rs); background: transparent; color: var(--t2);
  font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; line-height: 1.15; }
.cf-tab b { display: block; font-size: 16px; color: var(--t1); font-variant-numeric: tabular-nums; }
.cf-tab-on { background: var(--accent); color: #fff; }
.cf-tab-on b { color: #fff; }

.cf-toolbar { display: flex; gap: 8px; margin-bottom: 10px; }
.cf-select { width: auto; flex: 0 0 104px; }
.cf-chips { display: flex; gap: 6px; margin-bottom: 12px; }
.cf-chips-scroll { overflow-x: auto; padding-bottom: 4px; -webkit-overflow-scrolling: touch; }
.cf-chip { flex: 0 0 auto; min-height: 34px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--border);
  background: var(--surface); color: var(--t2); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.cf-chip b { margin-left: 4px; color: var(--t1); font-variant-numeric: tabular-nums; }
.cf-chip-on { background: var(--t1); color: var(--surface); border-color: var(--t1); }
.cf-chip-on b { color: var(--surface); }

.cf-lista { display: grid; gap: 8px; }
.cf-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); padding: 12px 14px;
  border-left: 4px solid var(--border-2); display: grid; gap: 4px; cursor: pointer; }
.cf-card.cf-e-confirmado { border-left-color: var(--green); }
.cf-card.cf-e-cancelado { border-left-color: var(--red); }
.cf-card.cf-e-alerta { border-left-color: var(--amber); }
.cf-card.cf-e-espera { border-left-color: var(--accent); }
.cf-card.cf-ajeno { opacity: .72; }
.cf-card-top { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.cf-card-cliente { font-weight: 700; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cf-card-total { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cf-card-prod { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cf-card-meta { font-size: 12px; color: var(--t2); display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.cf-card-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 4px; }
.cf-card-motivo { font-size: 12px; color: var(--t2); font-style: italic; }
.cf-owner { font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; gap: 4px; }
.cf-owner-me { color: var(--accent); }
.cf-owner-other { color: var(--t2); }

.cf-badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; font-size: 11px;
  font-weight: 700; background: var(--bg); color: var(--t2); border: 1px solid var(--border); }
.cf-badge-canal { background: var(--accent-bg); color: var(--accent); border-color: transparent; }
.cf-badge-confirmado { background: var(--green-bg); color: var(--green); border-color: var(--green-bd); }
.cf-badge-cancelado { background: var(--red-bg); color: var(--red); border-color: var(--red-bd); }
.cf-badge-alerta, .cf-badge-dup { background: var(--amber-bg); color: var(--amber); border-color: var(--amber-bd); }
.cf-badge-espera { background: var(--accent-bg); color: var(--accent); border-color: transparent; }

.cf-vacio { text-align: center; color: var(--t2); padding: 40px 12px; font-size: 14px; }
.cf-skel { height: 96px; border-radius: var(--r); background: var(--surface); border: 1px solid var(--border); opacity: .6; }

.cf-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 90; }
.cf-panel { position: fixed; left: 0; right: 0; bottom: 0; z-index: 100; max-height: 92vh; overflow-y: auto;
  background: var(--surface); border-radius: 18px 18px 0 0; box-shadow: var(--shadow); padding: 8px 16px 28px;
  transform: translateY(105%); transition: transform .22s ease; max-width: 760px; margin: 0 auto; visibility: hidden; }
.cf-panel.cf-open { transform: translateY(0); visibility: visible; }
.cf-panel-grip { width: 44px; height: 5px; border-radius: 3px; background: var(--border-2); margin: 4px auto 12px; }
.cf-p-head { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; }
.cf-p-nombre { font-size: 19px; font-weight: 800; margin: 0 0 4px; }
.cf-p-grid { display: grid; gap: 8px; margin: 12px 0; }
.cf-p-row { display: grid; grid-template-columns: 92px 1fr; gap: 8px; font-size: 14px; }
.cf-p-row span:first-child { color: var(--t2); }
.cf-p-row span:last-child { word-break: break-word; }
.cf-p-acciones { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin: 8px 0 12px; }
.cf-p-acciones .cf-btn { font-size: 13px; padding: 0 8px; }
.cf-aviso { border-radius: var(--rs); padding: 10px 12px; font-size: 13px; margin: 10px 0; }
.cf-aviso-amber { background: var(--amber-bg); border: 1px solid var(--amber-bd); color: var(--amber); }
.cf-aviso-lock { background: var(--bg); border: 1px solid var(--border); color: var(--t1); }
.cf-aviso-me { background: var(--accent-bg); border: 1px solid transparent; color: var(--accent); font-weight: 600; }
.cf-take-big { width: 100%; min-height: 56px; font-size: 17px; margin-top: 4px; }
.cf-sep { border: 0; border-top: 1px solid var(--border); margin: 14px 0; }

.cf-estados { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.cf-estado-btn { min-height: 64px; border-radius: var(--r); border: 2px solid var(--border); background: var(--surface);
  color: var(--t1); font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 2px; }
.cf-estado-btn .cf-emoji { font-size: 22px; }
.cf-estado-btn.cf-sel.cf-e-confirmado { border-color: var(--green); background: var(--green-bg); }
.cf-estado-btn.cf-sel.cf-e-cancelado { border-color: var(--red); background: var(--red-bg); }
.cf-estado-btn.cf-sel.cf-e-alerta { border-color: var(--amber); background: var(--amber-bg); }
.cf-estado-btn.cf-sel.cf-e-espera { border-color: var(--accent); background: var(--accent-bg); }
.cf-motivos { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 8px; }
.cf-motivo-chip { min-height: 32px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--border); background: var(--bg);
  color: var(--t1); font: inherit; font-size: 12px; cursor: pointer; }
.cf-motivo-chip.cf-sel { border-color: var(--accent); background: var(--accent-bg); color: var(--accent); }
.cf-guardar { margin-top: 12px; width: 100%; min-height: 50px; font-size: 16px; }

/* Admin canales */
.cf-adm-row { border: 1px solid var(--border); border-radius: var(--r); padding: 10px 12px; margin-bottom: 8px; }
.cf-adm-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.cf-adm-name { font-weight: 700; display: flex; align-items: center; gap: 8px; }
.cf-adm-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.cf-adm-chips .cf-chip { min-height: 30px; font-size: 12px; }
.cf-adm-chips.cf-dis .cf-chip { opacity: .4; pointer-events: none; }
.cf-switch { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--t2); cursor: pointer; }

.cf-toast { position: fixed; left: 50%; bottom: 20px; transform: translate(-50%, 140%); z-index: 200; opacity: 0; visibility: hidden;
  pointer-events: none; background: var(--t1); color: var(--surface); padding: 10px 16px; border-radius: 999px; font-size: 14px;
  font-weight: 600; transition: transform .2s ease; max-width: 90vw; text-align: center; }
.cf-toast.cf-show { transform: translate(-50%, 0); opacity: 1; visibility: visible; }
.cf-toast.cf-toast-error { background: var(--red); color: #fff; }

.cf-card.cf-mio { border-color: var(--accent); }
.cf-card.cf-flash { animation: cfFlash 1.6s ease 2; }
@keyframes cfFlash { 0%,100% { box-shadow: none; } 50% { box-shadow: 0 0 0 3px var(--accent); } }
.cf-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--red); vertical-align: middle; }
.cf-tabla { width: 100%; border-collapse: collapse; margin-top: 12px; font-size: 13px; font-variant-numeric: tabular-nums; }
.cf-tabla th, .cf-tabla td { padding: 8px 6px; border-bottom: 1px solid var(--border); text-align: center; }
.cf-tabla th:nth-child(2), .cf-tabla td:nth-child(2) { text-align: left; font-weight: 700; }
.cf-tabla th { color: var(--t2); font-weight: 600; font-size: 12px; }
.cf-yo-row { background: var(--accent-bg); }

.cf-selrow { display: flex; gap: 8px; justify-content: flex-end; align-items: center; flex-wrap: wrap; margin-bottom: 2px; }
.cf-sel-modo { font-weight: 700; font-size: 13px; margin-right: auto; }
.cf-btn-tomar-varios { border-color: var(--accent); color: var(--accent); }
.cf-selbar .cf-btn { white-space: nowrap; }
.cf-check-sel { font-size: 13px; font-weight: 700; color: var(--t2); }
.cf-check-sel.on { color: var(--green); }
.cf-card.cf-marcado { border-color: var(--green); background: var(--green-bg); }
.cf-selbar { position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 80; display: flex; align-items: center; gap: 14px;
  background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow); border-radius: 999px; padding: 8px 8px 8px 18px;
  font-weight: 700; font-size: 14px; }
.cf-selbar[hidden] { display: none; }
.cf-hist { margin: 4px 0 12px; }
.cf-hist-row { display: flex; gap: 8px; align-items: flex-start; font-size: 12px; padding: 6px 0; border-bottom: 1px solid var(--border); }
.cf-hist-txt { color: var(--t2); }
.cf-hist-txt b { color: var(--t1); }
.cf-h3 { font-size: 15px; margin: 18px 0 4px; }
.cf-bar { height: 5px; background: var(--bg); border-radius: 3px; margin-top: 3px; overflow: hidden; }
.cf-bar div { height: 100%; border-radius: 3px; }
.cf-mot { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; font-size: 13px; margin: 8px 0; }
.cf-mot .cf-bar { grid-column: 1 / -1; }

.cf-btn-relevo { background: var(--green-bg); border-color: var(--green-bd); color: var(--green); min-height: 36px; font-size: 13px; font-weight: 600; white-space: nowrap; }
.cf-card.cf-ajeno:has(.cf-btn-relevo) { opacity: .9; }
.cf-relevo { margin-top: 12px; padding: 12px; border: 1px solid var(--green-bd); background: var(--green-bg); border-radius: 12px; }
.cf-relevo .cf-take-big { margin-top: 10px; }
.cf-adm-relevo { margin-top: 8px; padding: 6px 10px; border-radius: 10px; background: var(--green-bg); }
.cf-envivo { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 12px 14px; margin-bottom: 12px; cursor: pointer; }
.cf-vivo-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; flex-wrap: wrap; font-size: 14px; }
.cf-vivo-num { font-size: 22px; margin-right: 2px; }
.cf-vivo-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--green); margin-right: 6px; vertical-align: middle; animation: cfPulso 2s infinite; }
@keyframes cfPulso { 0%,100% { opacity: 1; } 50% { opacity: .3; } }
.cf-vivo-bar { display: flex; height: 12px; border-radius: 6px; overflow: hidden; background: var(--border); margin: 10px 0 8px; }
.cf-vivo-bar span { display: block; height: 100%; position: relative; overflow: hidden; border-left: 0 solid var(--surface); box-sizing: border-box;
  transition: width .9s cubic-bezier(.22, 1, .36, 1), border-left-width .3s; }
.cf-vivo-bar span.cf-brillo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,.75), transparent);
  transform: translateX(-100%); animation: cfBarrido 1.1s ease-out; }
@keyframes cfBarrido { to { transform: translateX(100%); } }
.cf-vivo-num { display: inline-block; }
.cf-pop, .cf-vl.cf-pop b { animation: cfPop .6s ease-out; }
.cf-vl.cf-pop { animation: none; }
.cf-vl b { display: inline-block; }
@keyframes cfPop { 0% { transform: scale(1); } 40% { transform: scale(1.25); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .cf-vivo-bar span { transition: none; } .cf-vivo-bar span.cf-brillo::after, .cf-pop, .cf-vl.cf-pop b { animation: none; } }
.cf-vb-confirmado { background: var(--green); } .cf-vb-cancelado { background: var(--red); } .cf-vb-espera { background: var(--accent); }
.cf-vb-alerta { background: var(--amber); } .cf-vb-sin { background: var(--t2); opacity: .45; }
.cf-vivo-leg { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 13px; }
.cf-vl { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.cf-vl i { display: inline-block; width: 9px; height: 9px; border-radius: 2px; }
.cf-tabla-vivo td, .cf-tabla-vivo th { white-space: nowrap; }
.cf-vista { margin-bottom: 12px; }
.cf-vista-sel { display: flex; gap: 6px; align-items: center; overflow-x: auto; padding-bottom: 4px; }
.cf-vista-sel .cf-chip { white-space: nowrap; }
.cf-vista-sel > .cf-sub { white-space: nowrap; flex: 0 0 auto; }
.cf-chip-rojo { background: var(--red); color: #fff; border-radius: 9px; padding: 0 6px; margin-left: 4px; font-size: 11px; }
.cf-vista-card { margin-top: 8px; border: 2px solid var(--accent); background: var(--accent-bg); border-radius: 14px; padding: 12px 14px; }
.cf-vista-head { display: flex; justify-content: space-between; gap: 8px; align-items: flex-start; }
.cf-vista-nombre { font-size: 16px; }
.cf-vista-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 10px 0; }
.cf-vista-stats span { background: var(--surface); border-radius: 10px; padding: 8px 6px; text-align: center; font-size: 11px; color: var(--t2); }
.cf-vista-stats b { display: block; font-size: 18px; color: var(--t1); }
.cf-vista-stats b.cf-c-green { color: var(--green); } .cf-vista-stats b.cf-c-red { color: var(--red); }
.cf-vista-acc { margin-bottom: 6px; } .cf-vista-acc .cf-btn { width: 100%; }
@media (max-width: 520px) { .cf-vista-stats { gap: 5px; } .cf-vista-stats span { font-size: 10px; padding: 6px 2px; } .cf-vista-stats b { font-size: 15px; } }
@media (max-width: 340px) { .cf-vista-stats { grid-template-columns: repeat(2, 1fr); } }
.cf-msg-rapido { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.cf-msg-rapido .cf-btn { min-height: 32px; font-size: 12px; border: 1px solid var(--border); }
.cf-msg-pl { display: inline-flex; align-items: center; }
.cf-msg-del { border: 0; background: transparent; color: var(--t2); cursor: pointer; font-size: 13px; padding: 0 4px; }
.cf-msg-texto { min-height: 110px; }
.cf-msg-vars { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 6px; }
.cf-msg-vars .cf-chip { font-size: 12px; min-height: 28px; }
.cf-msg-prev { margin-top: 10px; }
.cf-msg-burbuja { margin-top: 4px; background: #dcf8c6; color: #111; border-radius: 10px 10px 10px 2px; padding: 10px 12px; font-size: 14px; line-height: 1.4; max-width: 92%; }
.cf-badge-olv { background: var(--amber-bg); color: var(--amber); border-color: var(--amber-bd); }
.cf-olv-box { border: 1px solid var(--amber-bd); background: var(--amber-bg); border-radius: 12px; padding: 4px 12px 8px; margin: 8px 0 12px; }
.cf-canc { border: 1px solid var(--red-bd); border-radius: 14px; padding: 12px 14px; margin: 14px 0; }
.cf-canc-kpi { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.cf-canc-kpi > div { display: flex; flex-direction: column; }
.cf-canc-num { font-size: 32px; color: var(--red); line-height: 1.1; }
.cf-canc-vs { font-size: 18px; font-weight: 700; text-align: right; }
.cf-canc-vs.cf-c-red { color: var(--red); } .cf-canc-vs.cf-c-green { color: var(--green); }
.cf-canc-recs { margin-top: 10px; background: var(--red-bg); border-radius: 10px; padding: 10px 12px; font-size: 13px; display: grid; gap: 6px; }
.cf-vta { border: 1px solid var(--green-bd); border-radius: 14px; padding: 12px 14px; margin: 14px 0; }
.cf-vta-row { padding: 8px 0; border-bottom: 1px solid var(--border); }
.cf-vta-row:last-of-type { border-bottom: 0; }
.cf-vta-head { display: flex; justify-content: space-between; gap: 10px; font-size: 14px; flex-wrap: wrap; }
.cf-vta-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.cf-vta-chip { background: var(--green-bg); border: 1px solid var(--green-bd); border-radius: 999px; padding: 3px 10px; font-size: 12px; }
.cf-vta-chip b { color: var(--green); }
.cf-btn-cart { border-color: var(--amber-bd); }
#cf-cart { margin-top: 4px; }
.cf-cart-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; margin-bottom: 10px; padding: 12px 14px; border-radius: 14px; background: var(--amber-bg); border: 1px solid var(--amber-bd); }
.cf-cart-tit { margin: 0; font-size: 18px; }
.cf-badge-cart { background: var(--amber-bg); color: var(--amber); border-color: var(--amber-bd); }
.cf-cart-card { border-left-color: var(--amber); }
.cf-cart-ya { border-color: var(--green-bd); }
.cf-badge-c-recuperado { background: var(--green-bg); color: var(--green); border-color: var(--green-bd); }
.cf-badge-c-nointeresa { background: var(--red-bg); color: var(--red); border-color: var(--red-bd); }
.cf-badge-c-volver, .cf-badge-c-nocontesta { background: var(--accent-bg); color: var(--accent); }
.cf-estado-btn.cf-sel.cf-e-c-recuperado { border-color: var(--green); background: var(--green-bg); }
.cf-estado-btn.cf-sel.cf-e-c-nointeresa { border-color: var(--red); background: var(--red-bg); }
.cf-estado-btn.cf-sel.cf-e-c-volver, .cf-estado-btn.cf-sel.cf-e-c-nocontesta { border-color: var(--accent); background: var(--accent-bg); }
.cf-chip-cart.cf-chip-on { background: var(--amber); border-color: var(--amber); color: #fff; }
.cf-chips-est { margin-top: -2px; align-items: center; }
.cf-chips-est > .cf-sub { white-space: nowrap; flex: 0 0 auto; margin-right: 2px; }
.cf-chip-est { font-size: 12px; }
.cf-chip-vacio { opacity: .5; }
.cf-alr-aviso { white-space: nowrap; font-size: 16px; }
.cf-alr-master { display: flex; align-items: center; gap: 8px; font-size: 16px; margin: 10px 0 2px; }
.cf-alr-master input, .cf-alr-row input[type=checkbox] { width: 18px; height: 18px; }
.cf-alr-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--border); font-size: 14px; flex-wrap: wrap; }
.cf-alr-row label { display: flex; align-items: center; gap: 8px; flex: 1 1 260px; }
.cf-alr-param { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--t2); }
.cf-alr-param .cf-input { width: 110px; padding: 6px 8px; }
.cf-alr-ase { display: grid; grid-template-columns: 1fr 160px auto; gap: 10px; align-items: center; padding: 7px 0; border-bottom: 1px solid var(--border); }
.cf-timer { margin: 8px 0 2px; }
.cf-timer-bar { height: 7px; border-radius: 4px; background: var(--bg); overflow: hidden; }
.cf-timer-bar span { display: block; height: 100%; border-radius: 4px; transition: width .6s ease, background .3s; }
.cf-timer-txt { display: block; font-size: 12px; font-weight: 700; margin-top: 3px; }
.cf-t-verde .cf-timer-bar span { background: var(--green); } .cf-t-verde .cf-timer-txt { color: var(--green); }
.cf-t-amarillo .cf-timer-bar span { background: #e0b100; } .cf-t-amarillo .cf-timer-txt { color: #b58f00; }
.cf-t-naranja .cf-timer-bar span { background: #f07b16; } .cf-t-naranja .cf-timer-txt { color: #e0700f; }
.cf-t-rojo .cf-timer-bar span { background: var(--red); } .cf-t-rojo .cf-timer-txt { color: var(--red); }
.cf-t-prog .cf-timer-bar span { background: var(--t2); opacity: .45; } .cf-t-prog .cf-timer-txt { color: var(--t2); }
.cf-card.cf-urgente { border-color: var(--red); box-shadow: 0 0 0 1px var(--red) inset; }
.cf-t-rojo .cf-timer-txt, .cf-card.cf-urgente .cf-timer-bar span { animation: cf-parpadeo 1.2s ease-in-out infinite; }
@keyframes cf-parpadeo { 50% { opacity: .45; } }
@media (prefers-reduced-motion: reduce) { .cf-t-rojo .cf-timer-txt, .cf-card.cf-urgente .cf-timer-bar span { animation: none; } }
/* Tarjetas: fondo suave del color de su barra de tiempo (o de su estado si ya se gestionó) */
.cf-card { --cc: var(--border-2); position: relative; overflow: hidden; transition: transform .15s ease, box-shadow .2s ease;
  background: linear-gradient(120deg, color-mix(in srgb, var(--cc) 13%, var(--surface)), color-mix(in srgb, var(--cc) 4%, var(--surface)) 55%, var(--surface));
  box-shadow: 0 0 18px color-mix(in srgb, var(--cc) 10%, transparent) inset; }
.cf-card.cf-e-confirmado { --cc: var(--green); } .cf-card.cf-e-cancelado { --cc: var(--red); }
.cf-card.cf-e-alerta { --cc: var(--amber); } .cf-card.cf-e-espera { --cc: var(--accent); }
.cf-card:has(.cf-t-verde) { --cc: var(--green); } .cf-card:has(.cf-t-amarillo) { --cc: #e0b100; }
.cf-card:has(.cf-t-naranja) { --cc: #f07b16; } .cf-card:has(.cf-t-rojo) { --cc: var(--red); }
.cf-card:has(.cf-t-prog) { --cc: var(--t2); }
.cf-card:not(.cf-mio):not(.cf-urgente):not(.cf-marcado) { border-color: color-mix(in srgb, var(--cc) 30%, var(--border)); border-left-color: var(--cc); }
.cf-card::before { content: ''; position: absolute; inset: 0; pointer-events: none; transform: translateX(-100%);
  background: linear-gradient(100deg, transparent 30%, color-mix(in srgb, var(--cc) 14%, transparent) 50%, transparent 70%); }
.cf-card:hover { transform: translateY(-2px); box-shadow: 0 0 18px color-mix(in srgb, var(--cc) 14%, transparent) inset, 0 8px 22px color-mix(in srgb, var(--cc) 16%, transparent); }
.cf-card:hover::before { animation: cfCardLuz 1s ease-out; }
@keyframes cfCardLuz { to { transform: translateX(100%); } }
.cf-card > * { position: relative; }
.cf-card.cf-marcado { background: var(--green-bg); }
.cf-card.cf-urgente { box-shadow: 0 0 0 1px var(--red) inset, 0 0 22px color-mix(in srgb, var(--red) 14%, transparent) inset; }
@media (prefers-reduced-motion: reduce) { .cf-card, .cf-card:hover { transition: none; transform: none; } .cf-card:hover::before { animation: none; } }
.cf-orden { width: auto; flex: 0 0 auto; margin-right: auto; padding-top: 6px; padding-bottom: 6px; }
.cf-btn-riesgo-on { border-color: var(--red); color: var(--red); }
.cf-riesgo-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 4px; border-bottom: 1px solid var(--border); cursor: pointer; }
.cf-riesgo-row:hover { background: var(--bg); }
.cf-riesgo-t { font-weight: 800; color: var(--red); white-space: nowrap; }
.cf-t-txt-rojo { color: var(--red); font-weight: 700; } .cf-t-txt-naranja { color: #e0700f; font-weight: 700; } .cf-t-txt-ok { color: var(--t2); }
.cf-tiempos { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px; margin: 8px 0; }
.cf-tiempos label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-weight: 600; color: var(--t2); }
.cf-tiempos .cf-input { width: 100%; }
.cf-dotc { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; vertical-align: middle; }
.cf-dotc.cf-t-amarillo { background: #e0b100; } .cf-dotc.cf-t-naranja { background: #f07b16; } .cf-dotc.cf-t-rojo { background: var(--red); }
.cf-stack { display: flex; height: 10px; border-radius: 5px; overflow: hidden; background: var(--bg); }
.cf-stack span { display: block; min-width: 0; }
.cf-kpis-ctl { margin: 8px 0; }
.cf-reg-botones { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; margin-top: 6px; }
.cf-reg-btn { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 12px 14px; border-radius: 12px; border: 2px solid var(--border);
  background: var(--surface); color: var(--t1); font: inherit; font-weight: 700; font-size: 15px; cursor: pointer; text-align: left; }
.cf-reg-btn small { font-weight: 600; font-size: 11px; color: var(--t2); }
.cf-reg-btn.cf-sel { border-color: var(--accent); background: var(--accent-bg); }
.cf-reg-input { font-size: 22px; font-weight: 700; letter-spacing: .5px; }
.cf-btn-reg { border-color: var(--green); color: var(--green); }
.cf-adm-boton { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--border); }
.cf-adm-form { display: grid; grid-template-columns: 1fr 1fr auto; gap: 8px; margin-top: 10px; }
.cf-adm-form:has(> :nth-child(2):last-child) { grid-template-columns: 1fr auto; }
@media (max-width: 560px) { .cf-adm-form { grid-template-columns: 1fr; } }

@media (max-width: 560px) {
  .cf-kpis { grid-template-columns: repeat(2, 1fr); }
  .cf-hide-sm { display: none; }
  .cf-title { font-size: 18px; }
  .cf-tab { font-size: 11px; }
}
/* ── Responsive: celular, tablet y PC ── */
html, body { max-width: 100%; overflow-x: hidden; }
.cf-root, .cf-root > * { min-width: 0; }
.cf-header { flex-wrap: wrap; }
.cf-header > div:first-child { min-width: 0; flex: 1 1 200px; }
.cf-header-actions { flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 1000px) { .cf-hide-sm { display: none; } }
@media (max-width: 700px) {
  .cf-root { padding: 10px 12px 60px; }
  .cf-header { gap: 8px; margin-bottom: 10px; }
  .cf-header-actions { width: 100%; flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; padding: 2px 0 6px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .cf-header-actions::-webkit-scrollbar { display: none; }
  .cf-header-actions .cf-btn { flex: 0 0 auto; min-height: 40px; padding: 0 12px; }
  #cf-btn-salir { margin-left: auto; }
  .cf-panel { max-height: 94vh; padding: 8px 12px 24px; }
  .cf-tabla { display: block; overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; }
  .cf-p-acciones { grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)) !important; }
  .cf-card-meta { flex-wrap: wrap; row-gap: 4px; }
  .cf-vivo-top { font-size: 13px; }
  .cf-cart-head { flex-direction: column; }
}
@media (min-width: 1100px) {
  .cf-root { max-width: 1200px; padding-left: 24px; padding-right: 24px; }
  .cf-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .cf-lista > .cf-selrow, .cf-lista > .cf-vacio, .cf-lista > .cf-skel, .cf-lista > p { grid-column: 1 / -1; }
  .cf-panel { max-width: 860px; }
}
@media (min-width: 1600px) {
  .cf-root { max-width: 1500px; }
  .cf-lista { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* riesgo, dirección y notas */
.cf-badge-riesgo2 { background: var(--red-bg); color: var(--red); border-color: var(--red-bd); font-weight: 700; }
.cf-badge-riesgo1 { background: var(--amber-bg); color: var(--amber); border-color: var(--amber-bd); }
.cf-badge-nota { background: var(--bg); color: var(--t1); }
.cf-aviso-riesgo2 { background: var(--red-bg); border: 1px solid var(--red-bd); color: var(--red); }
.cf-aviso-riesgo1 { background: var(--amber-bg); border: 1px solid var(--amber-bd); color: var(--amber); }
.cf-aviso-riesgo2 ul, .cf-aviso-riesgo1 ul { margin: 4px 0 0 18px; padding: 0; }
.cf-aviso-riesgo2 .cf-sub { color: inherit; opacity: .85; margin: 4px 0 0; }
.cf-aviso-dir { background: var(--bg); border: 1px dashed var(--amber-bd); color: var(--t1); }
.cf-btn-dir { display: flex; margin-top: 8px; width: 100%; justify-content: center; }
.cf-notas { margin-top: 12px; }
.cf-nota { background: var(--bg); border: 1px solid var(--border); border-radius: 10px; padding: 7px 10px; margin: 6px 0; font-size: 14px; white-space: pre-wrap; word-break: break-word; }
.cf-nota-h { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--t2); margin-bottom: 2px; }
.cf-nota-h b { color: var(--t1); }
.cf-nota-form { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: end; margin-top: 6px; }
.cf-nota-form .cf-input { min-height: 44px; }
.cf-reg-fecha { width: auto; min-width: 150px; padding: 6px 10px; }
/* lista negra, recompras, bots */
.cf-badge-negra { background: var(--red); color: #fff; border-color: var(--red); font-weight: 700; }
.cf-badge-rec { background: var(--accent-bg, var(--bg)); }
.cf-btn-negra { width: 100%; margin: 4px 0 8px; color: var(--red); font-size: 13px; }
.cf-negra-form { border: 1px solid var(--red-bd); background: var(--red-bg); border-radius: var(--rs); padding: 10px 12px; margin: 8px 0; }
.cf-negra-form .cf-label { color: var(--red); }
.cf-up { color: var(--green); font-weight: 700; font-size: 12px; }
.cf-down { color: var(--red); font-weight: 700; font-size: 12px; }
.cf-tabla-bots td { vertical-align: top; }
.cf-nv { border: 1px solid var(--accent); background: var(--accent-bg); border-radius: var(--r, 14px); padding: 12px 14px; margin: 12px 0; }
.cf-nv-edit { margin: 8px 0 4px; padding: 10px 12px; }
.cf-nv-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 8px 12px; }
.cf-nv-grid label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--t2); }
.cf-nv-pin { display: flex; gap: 6px; }
.cf-nv-pin .cf-input { flex: 1; min-width: 0; }
.cf-btn-mini { padding: 3px 8px; font-size: 12px; margin-left: 6px; }
.cf-confeti { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 9999; }
.cf-mapa3d { position: relative; width: 100%; height: 420px; border: 1px solid var(--border); border-radius: var(--rs); overflow: hidden; background: radial-gradient(ellipse at 50% 40%, var(--accent-bg), var(--bg)); touch-action: pan-y; }
.cf-mapa-canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; cursor: grab; }
.cf-mapa-carga { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--t2); font-size: 14px; }
.cf-mapa-ctrl { position: absolute; top: 8px; right: 8px; display: flex; flex-direction: column; gap: 6px; z-index: 2; }
.cf-mapa-ctrl .cf-btn { width: 38px; height: 38px; padding: 0; font-size: 18px; }
.cf-mapa-info { position: absolute; left: 8px; right: 54px; bottom: 8px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--rs); padding: 8px 10px; font-size: 13px; z-index: 2; box-shadow: 0 4px 14px rgba(0,0,0,.15); }
#cf-mapa-labels { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.cf-mapa-lbl { position: absolute; left: 0; top: 0; font-size: 11px; font-weight: 700; color: var(--t1); background: var(--surface); border: 1px solid var(--border); border-radius: 6px; padding: 1px 5px; white-space: nowrap; }
.cf-mapa-ley { font-size: 12px; color: var(--t2); margin: 6px 0 4px; }
.cf-dot-l { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin: 0 3px 0 6px; vertical-align: middle; }
@media (max-width: 600px) { .cf-mapa3d { height: 360px; } }
.cf-vb-boton { background: #14b8a6; }
.cf-hero { display: flex; flex-wrap: wrap; gap: 14px 28px; align-items: stretch; margin: -2px -4px 12px; padding: 16px 20px; border-radius: 14px; position: relative; overflow: hidden;
  background: linear-gradient(120deg, color-mix(in srgb, var(--green) 22%, var(--surface)), color-mix(in srgb, #14b8a6 14%, var(--surface)) 60%, color-mix(in srgb, #f5b50a 12%, var(--surface)));
  border: 1px solid color-mix(in srgb, var(--green) 45%, transparent); box-shadow: 0 0 24px color-mix(in srgb, var(--green) 18%, transparent) inset; }
.cf-hero::before { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.10) 50%, transparent 70%); transform: translateX(-100%); animation: cfHeroLuz 6s ease-in-out infinite; pointer-events: none; }
@keyframes cfHeroLuz { 0%, 60% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }
.cf-hero-l, .cf-hero-r { position: relative; min-width: 0; }
.cf-hero-r { padding-left: 28px; border-left: 1px solid var(--border-2); }
.cf-hero-lbl { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; opacity: .8; }
.cf-hero-fila { position: relative; line-height: 1; margin: 6px 0 6px; }
.cf-hero-num { font-size: 56px; font-weight: 800; color: var(--green); text-shadow: 0 0 22px color-mix(in srgb, var(--green) 45%, transparent); font-variant-numeric: tabular-nums; display: inline-block; }
.cf-hero-money { font-size: 40px; font-weight: 800; color: var(--amber); text-shadow: 0 0 20px color-mix(in srgb, var(--amber) 35%, transparent); font-variant-numeric: tabular-nums; display: inline-block; }
.cf-hero-sub { font-size: 13px; opacity: .9; }
.cf-hero.cf-hero-pop { animation: cfHeroPop .9s ease-out; }
@keyframes cfHeroPop { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--green) 70%, transparent); } 100% { box-shadow: 0 0 0 16px transparent; } }
.cf-hero-mas { position: absolute; left: 100%; top: 0; margin-left: 8px; font-weight: 800; font-size: 20px; color: var(--green); animation: cfHeroMas 1.4s ease-out forwards; }
@keyframes cfHeroMas { from { opacity: 1; transform: translateY(10px); } to { opacity: 0; transform: translateY(-26px); } }
@media (max-width: 560px) { .cf-hero { padding: 14px 16px; } .cf-hero-r { padding-left: 0; border-left: 0; border-top: 1px solid var(--border-2); padding-top: 12px; width: 100%; } .cf-hero-num { font-size: 46px; } .cf-hero-money { font-size: 32px; } }
@media (prefers-reduced-motion: reduce) { .cf-hero::before, .cf-hero.cf-hero-pop, .cf-hero-mas { animation: none; } }
/* Facturación en Análisis */
.cf-hero-ana { margin: 6px 0 10px; }
.cf-hero-ana .cf-hero-r { flex: 1 1 160px; }
.cf-sube { color: var(--green); } .cf-baja { color: var(--red); }
.cf-fact-split { display: flex; height: 6px; border-radius: 3px; overflow: hidden; margin-top: 8px; background: var(--border); }
.cf-fact-mini { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; margin-bottom: 12px; }
.cf-fact-tile { --cc: var(--red); display: grid; gap: 2px; padding: 10px 14px; border-radius: var(--rs); border: 1px solid color-mix(in srgb, var(--cc) 30%, var(--border));
  background: linear-gradient(120deg, color-mix(in srgb, var(--cc) 11%, var(--surface)), var(--surface)); font-size: 13px; }
.cf-fact-tile b { font-size: 22px; color: var(--cc); font-variant-numeric: tabular-nums; }
.cf-fact-pend { --cc: var(--accent); }
.cf-fact-chart { display: flex; align-items: flex-end; gap: 6px; height: 190px; padding: 8px 4px 0; border-bottom: 1px solid var(--border); overflow-x: auto; }
.cf-fact-col { flex: 1 1 0; min-width: 34px; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 3px; }
.cf-fact-barra { width: 100%; max-width: 44px; display: flex; flex-direction: column; border-radius: 6px 6px 2px 2px; overflow: hidden; transition: filter .2s; animation: cfFactCrece .7s ease-out both; transform-origin: bottom; }
.cf-fact-barra span { display: block; min-height: 0; }
.cf-fact-col:hover .cf-fact-barra { filter: brightness(1.15); }
.cf-fact-top .cf-fact-barra { box-shadow: 0 0 14px color-mix(in srgb, var(--green) 45%, transparent); }
.cf-fact-top .cf-fact-val { color: var(--green); }
.cf-fact-val { font-size: 11px; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.cf-fact-dia { font-size: 10px; color: var(--t2); text-align: center; line-height: 1.2; padding-bottom: 4px; }
.cf-fact-denso .cf-fact-col { min-width: 26px; } .cf-fact-denso .cf-fact-val { writing-mode: vertical-rl; transform: rotate(180deg); font-size: 10px; }
@keyframes cfFactCrece { from { transform: scaleY(0); } to { transform: scaleY(1); } }
.cf-fact-listas { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px 24px; margin: 12px 0 6px; }
.cf-fact-lista h4 { margin: 0 0 6px; font-size: 14px; }
.cf-fact-fila { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; font-size: 13px; margin-bottom: 7px; }
.cf-fact-fila .cf-bar { grid-column: 1 / -1; }
.cf-fact-nom { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .cf-fact-barra { animation: none; } }
/* Cuentas (contabilidad de socios) */
.cf-cta-vacio { text-align: center; padding: 24px 12px; display: grid; gap: 10px; justify-items: center; }
.cf-cta-vacio h3 { margin: 0; }
.cf-cta-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; margin: 10px 0 12px; }
.cf-cta-card { --cc: var(--green); position: relative; overflow: hidden; display: grid; gap: 2px; text-align: left; padding: 12px 14px; border-radius: 14px; cursor: pointer; color: var(--t1); font: inherit;
  border: 1px solid color-mix(in srgb, var(--cc) 35%, var(--border));
  background: linear-gradient(120deg, color-mix(in srgb, var(--cc) 18%, var(--surface)), color-mix(in srgb, var(--cc) 5%, var(--surface)) 60%, var(--surface));
  box-shadow: 0 0 18px color-mix(in srgb, var(--cc) 12%, transparent) inset; transition: transform .15s, box-shadow .2s; }
.cf-cta-card:hover { transform: translateY(-2px); }
.cf-cta-neg { --cc: var(--red); }
.cf-cta-sel { border-width: 2px; border-color: var(--cc); box-shadow: 0 0 0 3px color-mix(in srgb, var(--cc) 25%, transparent), 0 0 22px color-mix(in srgb, var(--cc) 18%, transparent) inset; }
.cf-cta-nom { font-weight: 700; font-size: 14px; }
.cf-cta-saldo { font-size: 26px; font-weight: 800; color: var(--cc); font-variant-numeric: tabular-nums; text-shadow: 0 0 16px color-mix(in srgb, var(--cc) 35%, transparent); }
.cf-cta-est { font-size: 12px; color: var(--t2); }
.cf-cta-add { --cc: var(--accent); justify-items: center; align-content: center; border-style: dashed; background: var(--surface); box-shadow: none; color: var(--t2); }
.cf-cta-box { border: 1px solid var(--border); border-radius: 14px; padding: 14px; margin: 0 0 12px; background: var(--surface); display: grid; gap: 6px; }
.cf-cta-box label.cf-label { display: grid; gap: 4px; }
.cf-p-head a { color: var(--accent); }
.cf-cta-form { --cc: var(--red); border-color: color-mix(in srgb, var(--cc) 30%, var(--border)); background: linear-gradient(160deg, color-mix(in srgb, var(--cc) 7%, var(--surface)), var(--surface) 50%); }
.cf-cta-ing { --cc: var(--green); }
.cf-cta-tipo { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 4px; }
.cf-cta-tipo-btn { display: grid; padding: 10px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); color: var(--t1); font: inherit; font-weight: 700; font-size: 15px; cursor: pointer; }
.cf-cta-tipo-btn small { font-weight: 400; font-size: 11px; color: var(--t2); }
.cf-cta-tipo-btn.cf-sel { border: 2px solid var(--cc); background: color-mix(in srgb, var(--cc) 14%, var(--surface)); }
.cf-cta-mes-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cf-cta-mes-head .cf-h3 { margin: 12px 0 6px; }
.cf-cta-mes-head select { width: auto; }
.cf-cta-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 8px; }
.cf-cta-kpis .cf-fact-tile b { font-size: 18px; }
.cf-cta-movs { display: grid; gap: 6px; }
.cf-cta-mov { display: flex; justify-content: space-between; gap: 10px; padding: 9px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); }
.cf-cta-mov-l, .cf-cta-mov-r { display: grid; gap: 1px; min-width: 0; }
.cf-cta-mov-r { text-align: right; justify-items: end; }
.cf-cta-mov-r b { font-size: 15px; font-variant-numeric: tabular-nums; }
.cf-cta-x { border: 0; background: none; color: var(--t2); font-size: 11px; text-decoration: underline; cursor: pointer; padding: 2px 0 0; }
.cf-cta-anulado { opacity: .55; } .cf-cta-anulado b { text-decoration: line-through; }
.cf-cta-amb { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 10px 0 2px; }
.cf-cta-amb-btn { display: grid; gap: 1px; padding: 9px 12px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); color: var(--t1); font: inherit; font-weight: 700; cursor: pointer; text-align: left; }
.cf-cta-amb-btn small { font-weight: 400; font-size: 11px; color: var(--t2); }
.cf-cta-amb-btn.cf-sel { border: 2px solid var(--accent); background: var(--accent-bg); }
.cf-cta-nuevo { display: grid; grid-template-columns: 1fr auto; gap: 8px; margin-top: 6px; }
.cf-plata-txt { position: fixed; left: 50%; top: 38%; z-index: 10001; transform: translate(-50%, -50%); display: grid; justify-items: center; gap: 2px; pointer-events: none;
  padding: 14px 26px; border-radius: 20px; background: color-mix(in srgb, var(--surface) 88%, transparent); backdrop-filter: blur(6px); box-shadow: 0 12px 40px rgba(0,0,0,.35);
  animation: cfPlataIn 2.7s cubic-bezier(.2,.9,.3,1.2) forwards; }
.cf-plata-txt span { font-size: 44px; line-height: 1; }
.cf-plata-txt b { font-size: 34px; font-weight: 800; font-variant-numeric: tabular-nums; }
.cf-plata-txt small { font-size: 14px; color: var(--t2); font-weight: 600; }
.cf-plata-ing { border: 2px solid var(--green); } .cf-plata-ing b { color: var(--green); text-shadow: 0 0 18px color-mix(in srgb, var(--green) 45%, transparent); }
.cf-plata-gas { border: 2px solid var(--red); animation-name: cfPlataGas; } .cf-plata-gas b { color: var(--red); }
.cf-plata-quieto { animation: cfPlataQuieto 1.6s ease forwards; }
@keyframes cfPlataIn { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.4); } 12% { opacity: 1; transform: translate(-50%, -50%) scale(1.12); } 22% { transform: translate(-50%, -50%) scale(1); } 80% { opacity: 1; transform: translate(-50%, -50%) scale(1); } 100% { opacity: 0; transform: translate(-50%, -80%) scale(.9); } }
@keyframes cfPlataGas { 0% { opacity: 0; transform: translate(-50%, -30%); } 14% { opacity: 1; transform: translate(-50%, -50%); } 80% { opacity: 1; transform: translate(-50%, -54%); } 100% { opacity: 0; transform: translate(-50%, -90%) rotate(-4deg); } }
@keyframes cfPlataQuieto { 0%, 85% { opacity: 1; } 100% { opacity: 0; } }
.cf-cta-pend { --cc: var(--amber); border: 1px solid color-mix(in srgb, var(--cc) 45%, var(--border)); border-radius: 14px; padding: 12px 14px; margin: 0 0 12px;
  background: linear-gradient(120deg, color-mix(in srgb, var(--cc) 14%, var(--surface)), var(--surface) 70%); display: grid; gap: 6px; }
.cf-cta-pend-head { display: flex; align-items: center; gap: 8px; }
.cf-cta-pend-tot { margin-left: auto; color: var(--amber); font-size: 18px; font-variant-numeric: tabular-nums; }
.cf-cta-pend-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px; border-radius: 10px; background: var(--surface); border: 1px solid var(--border); }
.cf-cta-pend-row .cf-btn { white-space: nowrap; }
.cf-cta-retiro { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 8px 10px; border-radius: 10px; border: 1px dashed var(--border-2); cursor: pointer; font-size: 14px; }
.cf-cta-retiro.cf-sel { border: 1px solid var(--amber); background: color-mix(in srgb, var(--amber) 12%, var(--surface)); }
.cf-cta-tag { display: inline-block; width: fit-content; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; margin-top: 2px; }
.cf-cta-tag-pend { background: color-mix(in srgb, var(--amber) 18%, transparent); color: var(--amber); }
.cf-cta-tag-ok { background: color-mix(in srgb, var(--green) 15%, transparent); color: var(--green); }
/* Métricas de pauta */
.cf-met-bar { display: grid; gap: 8px; margin: 10px 0 8px; }
.cf-met-fechas { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.cf-met-fechas input { width: auto; flex: 1 1 130px; min-width: 0; max-width: 170px; } .cf-met-fechas select { width: auto; margin-left: auto; }
.cf-met-bar .cf-chips { flex-wrap: wrap; overflow: visible; }
.cf-met-cargando { position: sticky; top: 0; z-index: 2; text-align: center; font-size: 12px; font-weight: 700; padding: 4px; border-radius: 8px; background: var(--accent-bg); color: var(--accent); margin-bottom: 6px; }
.cf-met-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 8px; margin-bottom: 10px; }
.cf-met-kpis .cf-fact-tile b { font-size: 20px; }
.cf-met-rec { border: 1px solid color-mix(in srgb, var(--amber) 40%, var(--border)); background: color-mix(in srgb, var(--amber) 9%, var(--surface)); border-radius: 12px; padding: 10px 14px; margin-bottom: 8px; font-size: 13px; }
.cf-met-rec p { margin: 6px 0 0; }
.cf-met-bots { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 8px; }
.cf-met-bot { border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; background: var(--surface); cursor: pointer; transition: border-color .15s, transform .15s; }
.cf-met-bot:hover { border-color: var(--accent); transform: translateY(-1px); }
.cf-met-bot-top { display: flex; justify-content: space-between; font-size: 15px; }
.cf-met-bot-g { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12.5px; color: var(--t2); margin-top: 6px; }
.cf-met-bot-g b { color: var(--t1); }
.cf-met-ids { margin-top: 8px; display: grid; gap: 6px; cursor: default; }
.cf-met-ids textarea { font-family: ui-monospace, Consolas, monospace; font-size: 12px; }
.cf-met-chart { width: 100%; height: 190px; display: block; }
.cf-met-bar-g { fill: color-mix(in srgb, var(--accent) 55%, transparent); } .cf-met-bar-g:hover { fill: var(--accent); }
.cf-met-l-pedidos { stroke: #14b8a6; stroke-width: 2; } .cf-met-p-pedidos { fill: #14b8a6; }
.cf-met-l-conf { stroke: var(--green); stroke-width: 2; stroke-dasharray: 4 3; } .cf-met-p-conf { fill: var(--green); }
.cf-met-tx { font-size: 10px; fill: var(--t2); }
.cf-ana-rango { margin-top: 10px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.cf-ana-rango .cf-chips { flex-wrap: wrap; margin-bottom: 0; }
.cf-ana-fechas { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 8px; align-items: center; max-width: 420px; }
.cf-ana-fechas .cf-input { width: 100%; min-width: 0; box-sizing: border-box; }
.cf-ana-txt { margin: 0; }
.cf-px-abrir { margin: 10px 0 4px; }
.cf-px-abrir .cf-btn { width: 100%; justify-content: center; }
.cf-px { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; margin: 8px 0 12px; }
.cf-px-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.cf-px .cf-label { margin: 4px 0 0; }
.cf-px-chips { flex-wrap: wrap; margin-bottom: 0; }
.cf-px-fila { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.cf-px-fechas { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 8px; align-items: center; max-width: 440px; }
.cf-px-fechas.cf-px-uno { grid-template-columns: minmax(0, 1fr); max-width: 220px; }
.cf-px .cf-input { width: 100%; min-width: 0; box-sizing: border-box; }
.cf-px-reparto { display: grid; gap: 6px; padding: 10px; border: 1px dashed var(--border); border-radius: 12px; }
.cf-px-rep-fila { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 150px); gap: 8px; align-items: center; font-weight: 600; }
.cf-px-rep-fila span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cf-px-resumen { margin: 0; }
.cf-px-h4 { margin: 10px 0 0; font-size: 14px; }
.cf-px-lotes { display: grid; gap: 6px; }
.cf-px-lote { border: 1px solid var(--border); border-radius: 10px; padding: 8px 10px; display: grid; gap: 3px; }
.cf-px-lote-top { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.cf-px-anulado { opacity: .55; text-decoration: line-through; }
.cf-px-anulado .cf-sub:last-child { text-decoration: none; }
.cf-met-plats { display: flex; flex-wrap: wrap; gap: 4px 12px; }
.cf-met-bot-ext { margin: 2px 0 4px; }
.cf-vivo-ase { display: inline-block; margin-top: 2px; line-height: 1.5; }
.cf-vivo-rank { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.cf-chip-mini { min-height: 26px; font-size: 12px; padding: 0 10px; cursor: default; }
.cf-sal-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 8px; margin-top: 10px; }
.cf-sal-fila { display: grid; grid-template-columns: 14px minmax(0, 1fr); gap: 10px; align-items: start; border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; background: var(--surface); }
.cf-sal-dot { width: 12px; height: 12px; border-radius: 50%; margin-top: 4px; }
.cf-sal-ok { background: var(--green); } .cf-sal-mal { background: var(--red); } .cf-sal-med { background: var(--amber); }
.cf-sal-errs { display: grid; gap: 6px; }
.cf-sal-err { border-left: 3px solid var(--red); padding: 4px 10px; background: var(--surface); border-radius: 6px; word-break: break-word; }
.cf-px-abrir { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 8px; }
.cf-met-tool { --c1: #f43f5e; --c2: #f59e0b; position: relative; display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; align-items: center; gap: 12px; width: 100%;
  min-height: 64px; padding: 10px 14px; border-radius: 16px; cursor: pointer; text-align: left; font: inherit; color: var(--t1);
  border: 1px solid color-mix(in srgb, var(--c1) 55%, var(--border)); background: linear-gradient(120deg, color-mix(in srgb, var(--c1) 18%, var(--surface)), color-mix(in srgb, var(--c2) 12%, var(--surface)));
  box-shadow: 0 4px 16px -8px color-mix(in srgb, var(--c1) 60%, transparent); transition: transform .15s, box-shadow .15s, border-color .15s; }
.cf-met-tool-pc { --c1: #10b981; --c2: #06b6d4; }
.cf-met-tool:hover { transform: translateY(-2px); box-shadow: 0 10px 24px -10px color-mix(in srgb, var(--c1) 75%, transparent); border-color: var(--c1); }
.cf-met-tool:active { transform: translateY(0); }
.cf-met-tool-on { border-color: var(--c1); box-shadow: 0 0 0 2px color-mix(in srgb, var(--c1) 45%, transparent), 0 10px 24px -10px color-mix(in srgb, var(--c1) 75%, transparent); }
.cf-met-tool-ico { width: 46px; height: 46px; border-radius: 13px; display: flex; align-items: center; justify-content: center; font-size: 22px;
  background: linear-gradient(135deg, var(--c1), var(--c2)); box-shadow: 0 4px 12px -4px color-mix(in srgb, var(--c1) 80%, transparent); }
.cf-met-tool-txt { display: grid; gap: 2px; min-width: 0; }
.cf-met-tool-txt b { font-size: 15px; }
.cf-met-tool-txt span { font-size: 12.5px; color: var(--t2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cf-met-tool-go { width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px; color: var(--c1);
  background: color-mix(in srgb, var(--c1) 16%, transparent); }
.cf-pc { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; margin: 8px 0 12px; }
.cf-pc-cob-top { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }
.cf-pc-filtros { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; }
.cf-pc-filtros .cf-input { width: 100%; min-width: 0; box-sizing: border-box; }
.cf-pc-lista { display: grid; gap: 6px; }
.cf-pc-fila { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 0.8fr) minmax(0, 1fr); gap: 8px; align-items: end; border: 1px solid var(--border); border-left: 4px solid var(--green); border-radius: 10px; padding: 8px 10px; background: var(--surface); }
.cf-pc-falta { border-left-color: var(--amber); }
.cf-pc-cambio { border-left-color: var(--accent); background: color-mix(in srgb, var(--accent) 7%, var(--surface)); }
.cf-pc-nom { display: grid; gap: 2px; min-width: 0; }
.cf-pc-nom b { overflow-wrap: anywhere; }
.cf-pc-costo, .cf-pc-igual { display: grid; gap: 2px; min-width: 0; }
.cf-pc-costo .cf-input, .cf-pc-igual .cf-input { width: 100%; min-width: 0; box-sizing: border-box; }
@media (max-width: 560px) { .cf-pc-fila { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .cf-pc-nom { grid-column: 1 / -1; } }
.cf-met-sincosto { margin-top: 4px; }
.cf-lg-plats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 8px; margin: 10px 0; }
.cf-lg-plat { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 10px; align-items: center; border: 1px solid var(--border); border-left: 5px solid var(--pc); border-radius: 14px; padding: 10px 12px; background: var(--surface); }
.cf-lg-pronto { opacity: .55; }
.cf-lg-logo { width: 64px; height: 44px; display: flex; align-items: center; justify-content: center; border-radius: 10px; background: color-mix(in srgb, var(--pc) 12%, transparent); }
.cf-lg-logo img { max-width: 56px; max-height: 38px; object-fit: contain; }
.cf-lg-logo span { font-weight: 800; font-size: 22px; color: var(--pc); }
.cf-lg-plat-txt { display: grid; gap: 2px; min-width: 0; }
.cf-lg-subir { cursor: pointer; white-space: nowrap; background: var(--pc) !important; border-color: var(--pc) !important; color: #111 !important; }
.cf-lg-prev { margin-bottom: 10px; }
.cf-lg-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.cf-lg-chips span { border: 1px solid var(--border); border-radius: 999px; padding: 3px 10px; font-size: 13px; background: var(--surface); }
.cf-lg-lista { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 8px; }
.cf-lg-fila { border: 1px solid var(--border); border-radius: 12px; padding: 8px 12px; background: var(--surface); display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; min-width: 0; }
.cf-lg-fila-top { display: flex; justify-content: space-between; gap: 8px; }
.cf-lg-fila-top b:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.cf-lg-bar { display: flex; height: 8px; border-radius: 99px; overflow: hidden; background: var(--border); }
.cf-met-real { margin-top: 4px; }
.cf-met-gr { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 12px 22px; margin: 0 0 10px; padding: 16px 20px; border-radius: 18px;
  border: 1px solid color-mix(in srgb, #a78bfa 45%, var(--border)); background: linear-gradient(135deg, color-mix(in srgb, #a78bfa 14%, var(--surface)), var(--surface)); }
.cf-met-gr-c { min-width: 0; display: grid; gap: 4px; align-content: start; }
.cf-met-gr-lg { border-left: 1px solid var(--border-2); padding-left: 22px; }
.cf-met-gr-tag { text-transform: none; letter-spacing: 0; font-weight: 600; opacity: .75; margin-left: 4px; }
@media (max-width: 660px) { .cf-met-gr { padding: 14px 16px; } .cf-met-gr-lg { border-left: 0; padding-left: 0; border-top: 1px solid var(--border-2); padding-top: 10px; } }
.cf-met-orden { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; margin-bottom: 8px; }
.cf-met-orden .cf-chips { flex-wrap: wrap; margin-bottom: 0; }
.cf-met-orden .cf-input { width: 100%; min-width: 0; box-sizing: border-box; }
.cf-met-ads { display: grid; gap: 8px; }
.cf-met-ad { display: flex; gap: 10px; border: 1px solid var(--border); border-left: 4px solid var(--border-2); border-radius: 12px; padding: 10px; background: var(--surface); }
.cf-met-ad-venta { border-left-color: var(--green); } .cf-met-ad-conv { border-left-color: var(--amber); }
.cf-met-thumb { width: 64px; height: 64px; flex: 0 0 64px; border-radius: 8px; object-fit: cover; background: var(--bg); display: grid; place-items: center; font-size: 24px; }
.cf-met-ad-info { min-width: 0; flex: 1; display: grid; gap: 2px; }
.cf-met-ad-top { display: flex; justify-content: space-between; gap: 8px; } .cf-met-ad-top b:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cf-met-ad-camp { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cf-met-ad-m { display: flex; flex-wrap: wrap; gap: 3px 12px; font-size: 12px; color: var(--t2); margin-top: 3px; align-items: center; } .cf-met-ad-m b { color: var(--t1); }
.cf-met-ad-m b.cf-sube { color: var(--green); } .cf-met-ad-m b.cf-baja { color: var(--red); } .cf-met-medio { color: var(--amber) !important; }
.cf-met-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--t2); margin-right: 4px; vertical-align: middle; }
.cf-met-active { background: var(--green); box-shadow: 0 0 6px var(--green); } .cf-met-paused { background: var(--amber); }
.cf-met-tag-mal { background: color-mix(in srgb, var(--red) 15%, transparent); color: var(--red); }
.cf-met-org { margin-top: 10px; padding: 8px 12px; border-radius: 10px; background: color-mix(in srgb, var(--green) 8%, var(--surface)); border: 1px solid var(--border); font-size: 13px; }
.cf-met-cfg-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 8px 14px; }
.cf-met-head-btns { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; align-items: center; }
.cf-met-auto { font-size: 13px; white-space: nowrap; }
.cf-met-auto-on { border-color: var(--red) !important; color: var(--red); background: color-mix(in srgb, var(--red) 10%, transparent); }
.cf-met-envivo { color: var(--red); animation: cfMetPulso 1.6s ease-in-out infinite; }
@keyframes cfMetPulso { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
.cf-met-estado { margin-left: auto; border: 1px solid var(--border-2); background: var(--surface); color: var(--t1); border-radius: 999px; padding: 3px 12px; font-size: 12px; font-weight: 700; cursor: pointer; font-family: inherit; }
.cf-met-estado:disabled { opacity: .6; cursor: wait; }
.cf-met-pausar:hover { border-color: var(--amber); color: var(--amber); }
.cf-met-activar { border-color: color-mix(in srgb, var(--green) 50%, var(--border)); color: var(--green); } .cf-met-activar:hover { background: color-mix(in srgb, var(--green) 12%, transparent); }
.cf-met-hero { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 22px; }
.cf-met-hero .cf-hero-l, .cf-met-hero .cf-hero-r { min-width: 0; }
.cf-met-hero .cf-hero-r { padding-left: 22px; }
.cf-met-big { font-size: clamp(24px, 2.7vw, 38px) !important; line-height: 1.1; max-width: 100%; white-space: nowrap; letter-spacing: -.5px; }
@media (max-width: 900px) { .cf-met-hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .cf-met-hero .cf-hero-l { grid-column: 1 / -1; } .cf-met-hero .cf-hero-r:nth-child(2) { padding-left: 0; border-left: 0; } .cf-met-big { font-size: clamp(24px, 5vw, 38px) !important; } }
@media (max-width: 560px) { .cf-met-hero { grid-template-columns: minmax(0, 1fr); } .cf-met-hero .cf-hero-r { padding-left: 0; border-left: 0; border-top: 1px solid var(--border-2); padding-top: 10px; } .cf-met-big { font-size: 32px !important; } }
.cf-met-ad-info { grid-template-columns: minmax(0, 1fr); } .cf-met-ad-top b:first-child { min-width: 0; } .cf-met-ad-top b:last-child { flex: none; }
.cf-met-horas { height: 170px; }
.cf-met-hp { fill: color-mix(in srgb, #14b8a6 55%, transparent); } .cf-met-hc { fill: color-mix(in srgb, var(--green) 60%, transparent); } .cf-met-htop { fill: var(--green); }
.cf-met-ad { cursor: pointer; flex-wrap: wrap; } .cf-met-ad:hover { border-color: var(--border-2); }
.cf-met-ad-open { border-color: var(--accent) !important; box-shadow: 0 0 0 1px var(--accent); }
.cf-met-addet { flex: 1 1 100%; min-width: 0; width: 100%; margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--border-2); cursor: default; }
.cf-met-adtab { font-size: 12px; margin-top: 6px; } .cf-met-adtab td, .cf-met-adtab th { padding: 3px 8px; text-align: right; } .cf-met-adtab td:first-child, .cf-met-adtab th:first-child { text-align: left; }
@media (max-width: 560px) { .cf-met-fechas input { max-width: none; } .cf-met-fechas select { margin-left: 0; flex: 1 1 100%; } .cf-met-bots { grid-template-columns: 1fr; } .cf-met-thumb { width: 48px; height: 48px; flex-basis: 48px; } }
@media (max-width: 560px) { .cf-cta-kpis { grid-template-columns: 1fr 1fr; } .cf-cta-grid { grid-template-columns: 1fr 1fr; } .cf-cta-saldo { font-size: 21px; } }
.cf-chip-regver { border-style: dashed; }
.cf-fila-boton td { background: color-mix(in srgb, #14b8a6 8%, transparent); }
/* Ventas reales por rango */
.cf-hero-rango { display: flex; flex-wrap: wrap; gap: 4px; margin: 6px 0 2px; align-items: center; }
.cf-hr-chip { border: 1px solid color-mix(in srgb, currentColor 22%, transparent); background: transparent; color: inherit; border-radius: 999px; padding: 2px 10px; font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; opacity: .8; }
.cf-hr-chip:hover { opacity: 1; }
.cf-hr-chip.cf-hr-on { background: var(--green); border-color: var(--green); color: #fff; opacity: 1; }
.cf-hr-fechas { display: inline-flex; gap: 4px; align-items: center; }
.cf-hr-fechas[hidden] { display: none; }
.cf-hr-fechas input { width: auto; padding: 3px 6px; font-size: 12px; min-height: 0; }
.cf-hero-cargando .cf-hero-num, .cf-hero-cargando .cf-hero-money { opacity: .35; }
.cf-met-entrante { margin-top: 4px; opacity: .85; }
/* Rendimiento: el navegador no dibuja las tarjetas que no están en pantalla */
.cf-card, .cf-met-ad { content-visibility: auto; contain-intrinsic-size: auto 150px; }
@media (prefers-reduced-motion: reduce) { .cf-vivo-dot, .cf-t-rojo .cf-timer-txt, .cf-card.cf-urgente .cf-timer-bar span, .cf-met-envivo { animation: none !important; } }
/* ── Marca Pulso ── */
.cf-pulso { display: inline-flex; align-items: center; gap: 10px; }
.cf-pulso-ico { flex: 0 0 auto; width: 1.45em; height: 1.45em; border-radius: 28%; display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #f43f5e, #a855f7); box-shadow: 0 4px 14px -4px rgba(244, 63, 94, .6); }
.cf-pulso-ico svg { width: 72%; height: 72%; fill: none; stroke: #fff; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 44; stroke-dashoffset: 0; animation: cf-latido 2.4s ease-in-out infinite; }
@keyframes cf-latido { 0% { stroke-dashoffset: 44; } 45%, 100% { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { .cf-pulso-ico svg { animation: none; } }
.cf-brand.cf-pulso { font-size: 16px; color: var(--t1); }
.cf-brand.cf-pulso small { font-weight: 600; color: var(--t2); font-size: 13px; }