/* ===== CRM Power Solar — hoja de estilo mobile-first ===== */ *{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent} :root{ /* ---- superficie / texto (tema claro, default) ---- */ --bg:#eef1f5;--card:#ffffff;--ink:#12212e;--muted:#6b7c8d;--faint:#93a1af; --line:#e4e9ef;--line2:#eef2f6;--field-bg:#fbfcfe;--nav-bg:rgba(255,255,255,.92); --brand:#0b2239;--brand2:#123a5e;--accent:#f59e0b;--accent-d:#d97706; --ok:#16a34a;--warn:#dc2626;--info:#2563eb; --shadow:0 1px 2px rgba(16,32,48,.06),0 4px 16px rgba(16,32,48,.06); --shadow-sm:0 1px 2px rgba(16,32,48,.06); --radius:16px;--radius-sm:11px; /* ---- colores semánticos (badges/pills) — un token = fondo por color-mix + texto ---- */ --s-blue:#1d4ed8;--s-indigo:#4338ca;--s-amber1:#b45309;--s-amber2:#92400e;--s-orange:#c2410c; --s-green:#15803d;--s-red:#b91c1c;--s-sky:#0369a1;--s-emerald:#047857;--s-violet:#6d28d9;--s-rose:#9f1239; /* ---- barras del embudo (más vivas que los badges, a propósito) ---- */ --fb-nuevo:#3b82f6;--fb-contactado:#6366f1;--fb-negociacion:#ea580c; /* ---- acento "hoy" en gráficas ---- */ --hoy:#059669;--hoy-light:#34d399; } /* El sistema decide el tema por defecto; el toggle (data-theme) siempre gana sobre esto. */ @media (prefers-color-scheme: dark){ :root{ --bg:#0d1520;--card:#16202c;--ink:#e7edf3;--muted:#8ea0b3;--faint:#5b6b7c; --line:#26333f;--line2:#1c2732;--field-bg:#111a24;--nav-bg:rgba(13,21,32,.88); --ok:#22c55e;--warn:#f87171;--info:#60a5fa; --shadow:0 1px 2px rgba(0,0,0,.3),0 4px 16px rgba(0,0,0,.32); --shadow-sm:0 1px 2px rgba(0,0,0,.28); --s-blue:#60a5fa;--s-indigo:#a5b4fc;--s-amber1:#fbbf24;--s-amber2:#fcd34d;--s-orange:#fb923c; --s-green:#4ade80;--s-red:#f87171;--s-sky:#38bdf8;--s-emerald:#34d399;--s-violet:#c4b5fd;--s-rose:#fb7185; --fb-nuevo:#60a5fa;--fb-contactado:#a5b4fc;--fb-negociacion:#fb923c; --hoy:#34d399;--hoy-light:#6ee7b7; } } /* El botón claro/oscuro (base.html) fija data-theme en — gana en ambas direcciones. */ :root[data-theme="dark"]{ --bg:#0d1520;--card:#16202c;--ink:#e7edf3;--muted:#8ea0b3;--faint:#5b6b7c; --line:#26333f;--line2:#1c2732;--field-bg:#111a24;--nav-bg:rgba(13,21,32,.88); --ok:#22c55e;--warn:#f87171;--info:#60a5fa; --shadow:0 1px 2px rgba(0,0,0,.3),0 4px 16px rgba(0,0,0,.32); --shadow-sm:0 1px 2px rgba(0,0,0,.28); --s-blue:#60a5fa;--s-indigo:#a5b4fc;--s-amber1:#fbbf24;--s-amber2:#fcd34d;--s-orange:#fb923c; --s-green:#4ade80;--s-red:#f87171;--s-sky:#38bdf8;--s-emerald:#34d399;--s-violet:#c4b5fd;--s-rose:#fb7185; --fb-nuevo:#60a5fa;--fb-contactado:#a5b4fc;--fb-negociacion:#fb923c; --hoy:#34d399;--hoy-light:#6ee7b7; } :root[data-theme="light"]{ --bg:#eef1f5;--card:#ffffff;--ink:#12212e;--muted:#6b7c8d;--faint:#93a1af; --line:#e4e9ef;--line2:#eef2f6;--field-bg:#fbfcfe;--nav-bg:rgba(255,255,255,.92); --ok:#16a34a;--warn:#dc2626;--info:#2563eb; --shadow:0 1px 2px rgba(16,32,48,.06),0 4px 16px rgba(16,32,48,.06); --shadow-sm:0 1px 2px rgba(16,32,48,.06); --s-blue:#1d4ed8;--s-indigo:#4338ca;--s-amber1:#b45309;--s-amber2:#92400e;--s-orange:#c2410c; --s-green:#15803d;--s-red:#b91c1c;--s-sky:#0369a1;--s-emerald:#047857;--s-violet:#6d28d9;--s-rose:#9f1239; --fb-nuevo:#3b82f6;--fb-contactado:#6366f1;--fb-negociacion:#ea580c; --hoy:#059669;--hoy-light:#34d399; } body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; background:var(--bg);color:var(--ink);line-height:1.45;-webkit-font-smoothing:antialiased; padding-bottom:calc(74px + env(safe-area-inset-bottom));transition:background-color .15s,color .15s} /* ---- top bar (gradiente — se queda navy en ambos temas, es el color de marca) ---- */ header.top{position:sticky;top:0;z-index:20; background:linear-gradient(135deg,var(--brand) 0%,var(--brand2) 100%); color:#fff;display:flex;align-items:center;gap:10px;padding:13px 16px; padding-top:calc(13px + env(safe-area-inset-top)); box-shadow:0 2px 12px rgba(11,34,57,.18)} .logo{font-weight:800;letter-spacing:.2px;white-space:nowrap;font-size:16px} .top-title{flex:1;font-size:14px;opacity:.82;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .logout{color:#fff;opacity:.72;font-size:13px;text-decoration:none; border:1px solid rgba(255,255,255,.25);padding:5px 11px;border-radius:99px} .logout:active{opacity:1} .top-user{color:#fff;opacity:.85;font-size:12.5px;font-weight:600;white-space:nowrap} .top-cfg{color:#fff;opacity:.72;text-decoration:none;font-size:15px;padding:2px 4px; background:none;border:none;cursor:pointer;line-height:1;width:auto;flex:0 0 auto} .top-cfg:active{opacity:1} main{padding:14px;max-width:780px;margin:0 auto} /* ---- bottom nav (celular) ---- */ nav.bottom{position:fixed;bottom:0;left:0;right:0;z-index:20; background:var(--nav-bg);backdrop-filter:saturate(180%) blur(14px); border-top:1px solid var(--line);display:flex;padding-bottom:env(safe-area-inset-bottom)} nav.bottom a{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px; padding:9px 0 7px;font-size:10.5px;font-weight:500;color:var(--faint);text-decoration:none; position:relative;transition:color .15s} nav.bottom a span{font-size:21px;line-height:1;filter:grayscale(.35);opacity:.7;transition:.15s} nav.bottom a.on{color:var(--accent-d);font-weight:700} nav.bottom a.on span{filter:none;opacity:1;transform:translateY(-1px)} nav.bottom a.on::before{content:"";position:absolute;top:0;width:26px;height:3px;border-radius:0 0 4px 4px; background:var(--accent)} /* ---- cards ---- */ .card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius); padding:16px;margin-bottom:14px;box-shadow:var(--shadow);transition:background-color .15s,border-color .15s} .card h2{font-size:14px;font-weight:700;letter-spacing:.1px;margin-bottom:12px; display:flex;justify-content:space-between;align-items:center;gap:8px} /* ---- grids & stats ---- */ .grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px} .grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:10px} .stat{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-sm); padding:14px 10px;text-align:center;box-shadow:var(--shadow-sm);position:relative;overflow:hidden} .stat::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--accent);opacity:.85} .stat b{display:block;font-size:22px;font-weight:800;letter-spacing:-.5px;line-height:1.1} .stat small{color:var(--muted);font-size:11px;font-weight:500;display:block;margin-top:3px} /* ---- forms ---- */ input,select,textarea{font:inherit;width:100%;padding:12px 13px;border:1px solid var(--line); border-radius:var(--radius-sm);background:var(--field-bg);color:var(--ink); transition:border-color .15s,box-shadow .15s,background-color .15s; -webkit-appearance:none;appearance:none} select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%236b7c8d' d='M1 1l5 5 5-5'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:right 13px center;padding-right:34px} input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent); box-shadow:0 0 0 3px rgba(245,158,11,.15);background:var(--card)} textarea{min-height:74px;resize:vertical} label{font-size:11.5px;font-weight:600;color:var(--muted);display:block;margin:10px 0 4px; text-transform:uppercase;letter-spacing:.3px} button,.btn{font:inherit;width:100%;padding:12px 14px;border-radius:var(--radius-sm);border:none; background:linear-gradient(135deg,var(--accent) 0%,var(--accent-d) 100%);color:#fff;font-weight:700; cursor:pointer;text-align:center;text-decoration:none;display:inline-block; box-shadow:0 2px 8px rgba(217,119,6,.28);transition:transform .1s,box-shadow .15s} button:active,.btn:active{transform:translateY(1px);box-shadow:0 1px 4px rgba(217,119,6,.25)} button.sec,.btn.sec{background:var(--line2);color:var(--ink);box-shadow:none;border:1px solid var(--line)} .btn.wa{background:linear-gradient(135deg,#25d366 0%,#128c7e 100%);color:#fff;box-shadow:0 2px 8px rgba(18,140,126,.28)} button.mini{width:auto;padding:8px 13px;font-size:13px;border-radius:9px} form.inline{display:inline} /* ---- list items ---- */ .item{display:block;background:var(--card);border:1px solid var(--line);border-radius:var(--radius-sm); padding:13px 15px;margin-bottom:9px;text-decoration:none;color:var(--ink);box-shadow:var(--shadow-sm); transition:transform .1s,box-shadow .15s,background-color .15s} .item:active{transform:scale(.99);box-shadow:none} .item .t{font-weight:700;font-size:15px;display:flex;justify-content:space-between;gap:8px;align-items:center} .item .s{font-size:12.5px;color:var(--muted);margin-top:5px;display:flex;flex-wrap:wrap;align-items:center;gap:2px} /* ---- badges (etapas / estados) — fondo = color-mix del token semántico, mismo en los 2 temas ---- */ .badge{font-size:10.5px;font-weight:700;padding:3px 9px;border-radius:99px;background:var(--line2); color:var(--muted);white-space:nowrap;text-transform:capitalize;letter-spacing:.2px} .badge.nuevo{background:color-mix(in srgb,var(--s-blue) 16%,transparent);color:var(--s-blue)} .badge.contactado{background:color-mix(in srgb,var(--s-indigo) 16%,transparent);color:var(--s-indigo)} .badge.cita,.badge.entrevista{background:color-mix(in srgb,var(--s-amber1) 18%,transparent);color:var(--s-amber1)} .badge.propuesta,.badge.documentos{background:color-mix(in srgb,var(--s-amber2) 20%,transparent);color:var(--s-amber2)} .badge.negociacion,.badge.entrenamiento{background:color-mix(in srgb,var(--s-orange) 18%,transparent);color:var(--s-orange)} .badge.ganado,.badge.activo,.badge.pagado,.badge.aceptada{background:color-mix(in srgb,var(--s-green) 16%,transparent);color:var(--s-green)} .badge.perdido,.badge.inactivo,.badge.cancelado,.badge.rechazada{background:color-mix(in srgb,var(--s-red) 16%,transparent);color:var(--s-red)} .badge.firmado,.badge.enviada{background:color-mix(in srgb,var(--s-blue) 16%,transparent);color:var(--s-blue)} .badge.instalado{background:color-mix(in srgb,var(--s-sky) 16%,transparent);color:var(--s-sky)} /* ---- pills (tipo de producto) ---- */ .pill{display:inline-flex;align-items:center;gap:3px;font-size:11px;font-weight:700; padding:3px 9px;border-radius:99px;white-space:nowrap;border:1px solid transparent} .pill.placas{background:color-mix(in srgb,var(--s-amber1) 16%,transparent);color:var(--s-amber1); border-color:color-mix(in srgb,var(--s-amber1) 34%,transparent)} .pill.ecoflow{background:color-mix(in srgb,var(--s-emerald) 16%,transparent);color:var(--s-emerald); border-color:color-mix(in srgb,var(--s-emerald) 34%,transparent)} .pill.bateria{background:color-mix(in srgb,var(--s-violet) 16%,transparent);color:var(--s-violet); border-color:color-mix(in srgb,var(--s-violet) 34%,transparent)} .pill.roofing{background:color-mix(in srgb,var(--s-rose) 16%,transparent);color:var(--s-rose); border-color:color-mix(in srgb,var(--s-rose) 34%,transparent)} .pill.otro{background:var(--line2);color:var(--muted);border-color:var(--line)} .late{color:var(--warn);font-weight:700} .today{color:var(--accent-d);font-weight:700} /* ---- calendario (rejilla del mes) ---- */ .cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin-bottom:6px} .cal-dow{text-align:center;font-size:10.5px;font-weight:700;color:var(--faint); text-transform:uppercase;padding-bottom:4px} .cal-day{position:relative;aspect-ratio:1;display:flex;align-items:center;justify-content:center; background:var(--card);border:1px solid var(--line);border-radius:9px;text-decoration:none; color:var(--ink);font-size:13px} .cal-day.out{opacity:.35} .cal-day.today{border-color:var(--accent-d);border-width:2px;font-weight:800;color:var(--accent-d)} .cal-day.late{border-color:var(--warn)} .cal-badge{position:absolute;top:2px;right:2px;background:var(--accent);color:#fff; font-size:9px;font-weight:800;min-width:15px;height:15px;border-radius:99px; display:flex;align-items:center;justify-content:center;padding:0 3px} /* ---- chips (filtros) ---- */ .chips{display:flex;gap:7px;overflow-x:auto;padding:2px 0 10px;-webkit-overflow-scrolling:touch; scrollbar-width:none} .chips::-webkit-scrollbar{display:none} .chips a{white-space:nowrap;font-size:12.5px;font-weight:600;padding:8px 13px;border-radius:99px; background:var(--card);border:1px solid var(--line);color:var(--muted);text-decoration:none; box-shadow:var(--shadow-sm);transition:.12s} .chips a.on{background:var(--brand);color:#fff;border-color:var(--brand);box-shadow:0 2px 8px rgba(11,34,57,.22)} .row{display:flex;gap:9px;align-items:center} .row>*{flex:1} .muted{color:var(--muted);font-size:13px} .mt{margin-top:11px} /* ---- estado vacío (icono + texto orientador) ---- */ .empty{text-align:center;padding:36px 18px;color:var(--muted)} .empty .e-icon{font-size:34px;margin-bottom:10px;opacity:.85} .empty .e-title{font-weight:700;color:var(--ink);font-size:14.5px;margin-bottom:4px} .empty .e-sub{font-size:12.5px;line-height:1.5;max-width:340px;margin:0 auto} /* ---- timeline (historial) ---- */ .timeline{list-style:none;padding-left:2px} .timeline li{border-left:2px solid var(--line);padding:0 0 15px 15px;margin-left:6px;position:relative} .timeline li:last-child{border-left-color:transparent} .timeline li:before{content:"";position:absolute;left:-6px;top:3px;width:11px;height:11px; border-radius:99px;background:var(--accent);box-shadow:0 0 0 3px rgba(245,158,11,.15)} .timeline b{text-transform:capitalize} .timeline .f{font-size:11px;color:var(--faint);margin-top:2px} /* ---- misc ---- */ details.add{margin-bottom:14px} details.add summary{list-style:none;cursor:pointer} details.add summary::-webkit-details-marker{display:none} details.add summary .btn{width:100%} details.add[open] summary .btn{background:var(--line2);color:var(--ink);box-shadow:none;border:1px solid var(--line)} a.plain{color:var(--info);text-decoration:none;font-size:13px;font-weight:600} table{width:100%;border-collapse:collapse;font-size:13px} td,th{padding:9px 6px;border-bottom:1px solid var(--line2);text-align:left} th{font-size:11px;text-transform:uppercase;letter-spacing:.3px;color:var(--muted)} /* ---- dashboard: KPI héroe (se queda navy en ambos temas, es el color de marca) ---- */ .hero-kpi{background:linear-gradient(135deg,var(--brand) 0%,var(--brand2) 100%);color:#fff; border-radius:var(--radius);padding:18px 18px 16px;margin-bottom:14px; box-shadow:0 4px 18px rgba(11,34,57,.28);position:relative;overflow:hidden} .hero-kpi::after{content:"";position:absolute;right:-38px;top:-38px;width:130px;height:130px; border-radius:99px;background:radial-gradient(circle,rgba(245,158,11,.32) 0%,rgba(245,158,11,0) 70%)} .hero-kpi>small{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;opacity:.72} .hero-kpi>b{display:block;font-size:34px;font-weight:800;letter-spacing:-1px;line-height:1.15; margin:2px 0 12px;font-variant-numeric:tabular-nums} .hero-row{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;border-top:1px solid rgba(255,255,255,.14); padding-top:11px} .hero-row>div{text-align:center} .hero-row b{display:block;font-size:15px;font-weight:800;font-variant-numeric:tabular-nums} .hero-row small{font-size:10px;opacity:.66;text-transform:uppercase;letter-spacing:.3px} /* ---- contador en h2 ---- */ .count{font-size:11px;font-weight:800;background:var(--line2);color:var(--muted); padding:2px 9px;border-radius:99px;min-width:26px;text-align:center} .count.warn{background:color-mix(in srgb,var(--s-red) 16%,transparent);color:var(--s-red)} /* ---- barras horizontales (embudo / fuentes) ---- */ .bar-row{display:flex;align-items:center;gap:9px;padding:5px 0;text-decoration:none;color:var(--ink)} .bar-label{flex:0 0 88px;font-size:12px;font-weight:600;color:var(--muted);text-transform:capitalize; white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .bar-track{flex:1;height:10px;background:var(--line2);border-radius:99px;overflow:hidden} .bar-fill{display:block;height:100%;border-radius:99px;background:var(--accent); animation:growX .5s ease-out} .bar-n{flex:0 0 26px;text-align:right;font-size:12.5px;font-weight:800;font-variant-numeric:tabular-nums} @keyframes growX{from{width:0}} .fb-nuevo{background:var(--fb-nuevo)}.fb-contactado{background:var(--fb-contactado)}.fb-cita{background:var(--accent)} .fb-propuesta{background:var(--accent-d)}.fb-negociacion{background:var(--fb-negociacion)} .fb-ganado{background:var(--ok)}.fb-perdido{background:var(--warn)} .fb-fuente{background:linear-gradient(90deg,var(--brand2),var(--brand))} /* ---- barras verticales (tendencia / actividad) ---- */ .vbars{display:flex;gap:6px;align-items:stretch;height:96px} .vbar{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;min-width:0} .vbar-v{font-size:9.5px;font-weight:700;color:var(--muted);height:12px;line-height:12px; font-variant-numeric:tabular-nums;white-space:nowrap} .vbar-track{flex:1;width:100%;max-width:26px;background:var(--line2);border-radius:7px; display:flex;align-items:flex-end;overflow:hidden} .vbar-fill{display:block;width:100%;background:linear-gradient(180deg,var(--accent) 0%,var(--accent-d) 100%); border-radius:7px 7px 0 0;animation:growY .5s ease-out} .vbar-fill.is-hoy{background:linear-gradient(180deg,var(--hoy-light) 0%,var(--hoy) 100%)} .vbar-l{font-size:10px;font-weight:700;color:var(--faint);text-transform:uppercase} .vbar-l.is-hoy{color:var(--hoy)} @keyframes growY{from{height:0}} @media (prefers-reduced-motion: reduce){.bar-fill,.vbar-fill{animation:none}} /* ---- login ---- */ .login-wrap{min-height:82vh;display:flex;align-items:center;justify-content:center;padding:20px} .login-box{width:100%;max-width:350px} .login-box .card{padding:24px} .login-box h1{text-align:center;margin-bottom:6px;font-size:23px;font-weight:800} .err{color:var(--warn);font-size:13px;margin-top:10px;text-align:center} .ok{color:var(--ok);font-size:13px;margin-top:10px;text-align:center} /* ===== escritorio (≥900px): sidebar en vez de tab bar, contenido más ancho ===== */ @media (min-width:900px){ body{padding-bottom:0} header.top{padding-left:236px} main{max-width:1160px;padding:22px 26px 40px;margin-left:210px} nav.bottom{top:0;bottom:0;left:0;right:auto;width:210px;flex-direction:column; padding:16px 10px;border-top:none;border-right:1px solid var(--line); background:var(--card);backdrop-filter:none;justify-content:flex-start;gap:2px} nav.bottom a{flex:0 0 auto;flex-direction:row;justify-content:flex-start;gap:11px; padding:10px 12px;border-radius:var(--radius-sm);font-size:13px} nav.bottom a span{font-size:18px} nav.bottom a.on{background:color-mix(in srgb,var(--accent) 12%,transparent)} nav.bottom a.on::before{content:none} .grid-2col{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start} .grid-2col>.card{margin-bottom:0} } /* ---- tablero (kanban) ---- */ .tb-hint{font-size:12px;color:var(--muted);margin:2px 0 10px} .tb-board{display:flex;gap:10px;overflow-x:auto;padding-bottom:14px; -webkit-overflow-scrolling:touch;scrollbar-width:thin} .tb-col{flex:0 0 250px;display:flex;flex-direction:column;background:var(--card); border:1px solid var(--line);border-radius:var(--radius);max-height:70vh} .tb-col-h{display:flex;justify-content:space-between;align-items:center;gap:8px; padding:10px 12px;border-bottom:1px solid var(--line);font-size:12.5px;font-weight:700; text-transform:capitalize;position:sticky;top:0;background:var(--card);border-radius:var(--radius) var(--radius) 0 0} .tb-count{font-size:11px;font-weight:700;color:var(--muted);background:var(--line2); border-radius:99px;padding:2px 8px;min-width:22px;text-align:center} .tb-drop{flex:1;overflow-y:auto;padding:8px;display:flex;flex-direction:column;gap:8px;min-height:60px} .tb-drop.sobre{background:color-mix(in srgb,var(--s-blue) 10%,transparent);outline:2px dashed var(--s-blue);outline-offset:-4px} .tb-card{background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:9px 10px; cursor:grab;display:flex;flex-direction:column;gap:6px} .tb-card:active{cursor:grabbing} .tb-card.drag{opacity:.45} .tb-card.guardando{opacity:.5;pointer-events:none} .tb-card.atrasado{border-left:3px solid var(--s-red)} .tb-nombre{font-size:13px;font-weight:700;color:var(--fg);text-decoration:none;line-height:1.25} .tb-nombre:hover{text-decoration:underline} .tb-meta{display:flex;flex-wrap:wrap;gap:4px;align-items:center} .tb-tag{font-size:10.5px;color:var(--muted);background:var(--line2);border-radius:99px;padding:2px 7px} .tb-next{font-size:11px;color:var(--muted);line-height:1.35} .tb-next.rojo{color:var(--s-red);font-weight:600} .tb-pie{display:flex;flex-wrap:wrap;gap:6px;align-items:center;justify-content:space-between; border-top:1px solid var(--line);padding-top:6px;margin-top:1px} .tb-quien{font-size:10.5px;color:var(--muted)} .tb-wa{font-size:10.5px;font-weight:700;color:#128c7e;text-decoration:none} .tb-mover{font-size:10.5px;font-weight:700;padding:3px 9px;border-radius:99px;cursor:pointer; background:var(--line2);color:var(--fg);border:1px solid var(--line)} .tb-vacio{text-align:center;color:var(--muted);font-size:12px;padding:10px 0;margin:0} @media (max-width:640px){.tb-col{flex:0 0 84vw;max-height:none}}