/* ─────────────────────────────────────────────────────────────── Sistema de diseño · CRM Barberías — Vertex Consulting Paleta corporativa (azul / near-black), tipografía Inter + Montserrat. Tokens compartidos por todas las páginas internas. ─────────────────────────────────────────────────────────────── */ :root{ --brand:#1A6FFF; /* azul Vertex */ --brand-2:#4F9CFF; /* azul claro (hover) */ --brand-soft:rgba(26,111,255,0.16); --on-brand:#FFFFFF; /* texto sobre azul */ --ink:#FFFFFF; /* títulos / texto fuerte (blanco) */ --text:#D6D6DA; /* texto base (gris claro neutro) */ --muted:#8C8C92; --paper:#000000; /* negro absoluto */ --paper-2:#0A0A0A; /* secciones / encabezados de tabla */ --card:#0D0D0D; /* tarjetas (apenas sobre el negro) */ --line:rgba(255,255,255,0.09); --line-2:rgba(255,255,255,0.06); --ok:oklch(0.78 0.15 150); --ok-soft:oklch(0.78 0.15 150 / .16); --warn:oklch(0.85 0.14 85); --warn-soft:oklch(0.85 0.14 85 / .18); --danger:oklch(0.72 0.18 22); --danger-soft:oklch(0.72 0.18 22 / .18); --shadow:0 1px 2px rgba(0,0,0,.55), 0 16px 40px rgba(0,0,0,.6); --shadow-sm:0 1px 2px rgba(0,0,0,.5); --nav-bg:rgba(0,0,0,0.85); --radius:14px; --ease:cubic-bezier(0.22,1,0.36,1); --nav-h:60px; } /* ── Tema claro opcional (data-theme="light") — blanco + dorado + negro ── */ :root[data-theme="light"]{ --brand:#1A6FFF; /* azul Vertex */ --brand-2:#1557D6; /* azul más oscuro (hover) */ --brand-soft:rgba(26,111,255,0.12); --on-brand:#FFFFFF; --ink:#0e1525; /* casi negro (frío) */ --text:#344054; --muted:#667085; --paper:#f4f6fb; /* blanco limpio y frío (como automotoras) */ --paper-2:#eef2f8; --card:#FFFFFF; --line:#e6e9f0; --line-2:rgba(16,24,40,0.06); --ok:oklch(0.55 0.14 150); --ok-soft:oklch(0.55 0.14 150 / .12); --warn:oklch(0.62 0.13 75); --warn-soft:oklch(0.72 0.15 75 / .15); --danger:oklch(0.55 0.20 22); --danger-soft:oklch(0.58 0.20 22 / .12); --shadow:0 1px 2px rgba(16,24,40,.06), 0 12px 30px rgba(16,24,40,.10); --shadow-sm:0 1px 2px rgba(16,24,40,.08); --nav-bg:rgba(255,255,255,0.85); } :root{color-scheme:dark} :root[data-theme="light"]{color-scheme:light} *{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth} body{ font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif; background:var(--paper);color:var(--text);-webkit-font-smoothing:antialiased; min-height:100vh;line-height:1.5; } h1,h2,h3,.brandfont{font-family:'Montserrat','Inter',system-ui,sans-serif} a{color:inherit;text-decoration:none} .ic{display:inline-block;vertical-align:-0.18em;flex:none} /* ── Sidebar izquierdo (navegación) ───────────────────────────── */ :root{--sidebar:248px} /* El sidebar es fijo a la izquierda; el contenido se corre con padding-left en . */ body.has-sidebar{padding-left:var(--sidebar);padding-top:var(--topbar-h,0px)} .nav{position:fixed;left:0;top:0;z-index:60;width:var(--sidebar);height:100vh; background:var(--nav-bg);backdrop-filter:saturate(160%) blur(12px); border-right:1px solid var(--line);display:flex;flex-direction:column;gap:4px; padding:18px 14px;overflow-y:auto;overscroll-behavior:contain;transition:transform .2s var(--ease)} .nav .brand{display:flex;flex-direction:column;align-items:center;text-align:center;gap:5px; color:var(--ink);font-weight:800;letter-spacing:-.01em;padding:8px 8px 16px} .nav .brand svg{height:38px;width:auto;color:var(--brand)} .nav .brand b{font-family:'Montserrat',sans-serif;font-size:1.18rem;line-height:1} .nav .brand span{color:var(--muted);font-weight:600;font-size:.74rem;letter-spacing:.02em} /* Logo del cliente: sin caja blanca (muchos logos traen su propio fondo). Se ve limpio en claro y oscuro. */ .nav .brand--logo{padding:8px 8px 4px} .nav .brand-logo-img{width:auto;max-width:100%;height:74px;object-fit:contain;display:block} .nav .brand-sub{text-align:center;padding:0 8px 16px;font-weight:600;font-size:.74rem; letter-spacing:.02em;color:var(--muted);line-height:1} .nav .brand-sub a{color:var(--brand);font-weight:800;text-decoration:none} .nav .brand-sub a:hover{text-decoration:underline} .nav-links{display:flex;flex-direction:column;align-items:stretch;gap:3px;margin:0;overflow-y:auto;scrollbar-width:thin} .nav-links::-webkit-scrollbar{width:8px} .nav-links a{display:flex;align-items:center;gap:11px;padding:9px 12px;border-radius:10px;color:var(--text); font-size:.92rem;font-weight:600;white-space:nowrap;transition:background .15s,color .15s} .nav-links a:hover{background:var(--paper-2);color:var(--ink)} .nav-links a.active{background:var(--brand-soft);color:var(--brand-2)} .nav-links a .ic{opacity:.85;flex:none} /* Secciones colapsables del menú */ .nav-g{display:flex;flex-direction:column;gap:3px} .nav-g + .nav-g{margin-top:6px} .nav-g-h{display:flex;align-items:center;width:100%;background:none;border:none;cursor:pointer; padding:7px 12px 3px;color:var(--muted);font-family:inherit;font-size:.67rem;font-weight:800; letter-spacing:.09em;text-transform:uppercase;transition:color .15s} .nav-g-h:hover{color:var(--ink)} .nav-g-h .chev{margin-left:auto;opacity:.7;transition:transform .18s} .nav-g:not(.open) .nav-g-h .chev{transform:rotate(-90deg)} .nav-g-l{display:flex;flex-direction:column;gap:3px} .nav-g:not(.open) .nav-g-l{display:none} .nav-right{margin-top:auto;display:flex;flex-direction:column;align-items:stretch;gap:10px; padding-top:12px;border-top:1px solid var(--line-2)} .nav-right .nav-tools{display:flex;align-items:center;gap:8px;justify-content:flex-start} .cond-pick{display:flex;align-items:center;gap:8px;background:var(--card);border:1px solid var(--line);border-radius:10px; padding:8px 10px;font-size:.86rem;font-weight:600;color:var(--ink);max-width:100%} .cond-pick select{border:none;background:none;font:inherit;color:inherit;font-weight:700;cursor:pointer;outline:none;max-width:100%;text-overflow:ellipsis;width:100%} .who{display:flex;align-items:center;gap:9px;min-width:0} .who .avatar{width:34px;height:34px;border-radius:50%;background:var(--brand);color:var(--on-brand);display:grid;place-items:center;font-weight:800;font-size:.84rem;flex:none} .who .meta{line-height:1.15;min-width:0}.who .meta b{color:var(--ink);font-size:.86rem;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.who .meta span{color:var(--muted);font-size:.72rem;text-transform:capitalize} /* ── Barra superior delgada (título + hamburguesa) ────────────── */ :root{--topbar-h:0px} .topbar{display:none;align-items:center;gap:12px;height:56px;padding:0 14px; position:fixed;top:0;left:0;right:0;z-index:55; background:var(--nav-bg);backdrop-filter:saturate(160%) blur(12px);border-bottom:1px solid var(--line)} .topbar .topbrand{display:none;align-items:center;color:var(--brand)} .topbar .topbrand svg{height:26px;width:auto} .topbar-title{font-family:'Montserrat',sans-serif;font-size:1.05rem;font-weight:800;color:var(--ink); overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0} .nav-scrim{display:none;position:fixed;inset:0;z-index:54;background:rgba(0,0,0,.5)} .nav-scrim.open{display:block} .iconbtn{width:38px;height:38px;border-radius:10px;border:1px solid var(--line);background:var(--card);color:var(--text); display:grid;place-items:center;cursor:pointer;transition:all .15s} .iconbtn:hover{border-color:var(--brand);color:var(--brand)} .paleta-btn .sw{width:17px;height:17px;border-radius:50%;background:var(--brand);box-shadow:inset 0 0 0 2px rgba(255,255,255,.55),0 0 0 1px rgba(0,0,0,.08)} /* Campana de avisos (#2) */ .bell-btn{position:relative} .bell-dot{position:absolute;top:-5px;right:-5px;min-width:17px;height:17px;padding:0 4px;border-radius:9px; background:#e5484d;color:#fff;font-size:.66rem;font-weight:800;display:grid;place-items:center;line-height:1} .avisos-pop{position:fixed;z-index:95;width:min(340px,calc(100vw - 16px));background:var(--card);border:1px solid var(--line); border-radius:14px;box-shadow:0 18px 50px rgba(0,0,0,.35);padding:10px;display:flex;flex-direction:column;gap:4px} .avisos-pop .aviso{display:flex;gap:10px;align-items:flex-start;padding:9px 10px;border-radius:10px;color:var(--ink);font-size:.88rem} .avisos-pop .aviso:hover{background:var(--paper-2)} .avisos-pop .aviso .ic{flex:none;margin-top:1px;color:var(--brand)} .avisos-pop .aviso small{display:block;color:var(--muted);font-size:.78rem;margin-top:1px} .avisos-pop .aviso-vacio{display:flex;gap:8px;align-items:center;justify-content:center;color:var(--muted);padding:14px 8px;font-size:.88rem} /* PIN pad de garzón (#5) */ .pin-dots{display:flex;gap:8px;justify-content:center;margin:6px 0 12px} .pin-dots span{width:12px;height:12px;border-radius:50%;border:1.5px solid var(--line);background:var(--paper-2)} .pin-dots span.on{background:var(--brand);border-color:var(--brand)} .pin-dots span.opt{opacity:.45} .pin-pad{display:grid;grid-template-columns:repeat(3,1fr);gap:8px} .pin-pad button{padding:13px 0;border-radius:12px;border:1px solid var(--line);background:var(--paper-2);color:var(--ink); font:inherit;font-size:1.15rem;font-weight:700;cursor:pointer;transition:all .12s} .pin-pad button:hover{border-color:var(--brand);color:var(--brand)} .pin-pad button.ok{background:var(--brand);color:var(--on-brand);border-color:var(--brand)} .pal-pop{position:fixed;z-index:1200;width:236px;background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow,0 14px 40px rgba(0,0,0,.25));padding:12px;animation:palIn .14s ease} @keyframes palIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}} .pal-t{font-family:'Montserrat',sans-serif;font-weight:800;color:var(--ink);font-size:.92rem;margin:0 2px 8px} .pal-grid{display:flex;flex-direction:column;gap:3px} .pal-sw{display:flex;align-items:center;gap:10px;padding:9px 10px;border:1px solid transparent;border-radius:10px;background:none;color:var(--text);font:inherit;font-size:.92rem;cursor:pointer;text-align:left} .pal-sw:hover{background:var(--brand-soft)} .pal-sw.on{border-color:var(--brand);color:var(--ink);font-weight:600} .pal-sw > span{width:20px;height:20px;border-radius:50%;flex:none;box-shadow:inset 0 0 0 1px rgba(0,0,0,.18)} .pal-sw svg{margin-left:auto;color:var(--brand)} .pal-note{font-size:.74rem;color:var(--muted);margin:9px 2px 1px} .hamb{display:none} .upd-banner{display:flex;align-items:center;gap:12px;justify-content:center;flex-wrap:wrap;background:var(--brand);color:var(--on-brand);padding:9px 16px;font-size:.9rem;font-weight:600} .upd-banner b{font-weight:800} .upd-banner .btn{background:rgba(255,255,255,.18);color:#fff;border:1px solid rgba(255,255,255,.5)} .upd-banner .btn:hover{background:rgba(255,255,255,.28)} /* ── Layout ───────────────────────────────────────────────────── */ .wrap{max-width:1180px;margin:0 auto;padding:26px 20px 60px} .page-head{display:flex;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:22px} .page-head .titles h1{font-size:1.55rem;font-weight:800;color:var(--ink);letter-spacing:-.02em} .page-head .titles p{color:var(--muted);font-size:.92rem;margin-top:3px} .page-head .actions{margin-left:auto;display:flex;gap:10px;flex-wrap:wrap} /* ── Botones ──────────────────────────────────────────────────── */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:42px;padding:0 16px;border-radius:11px; font-size:.92rem;font-weight:700;font-family:inherit;cursor:pointer;border:1px solid transparent;transition:filter .15s,background .15s,border-color .15s,transform .12s;white-space:nowrap} .btn:active{transform:scale(.98)} .btn.primary{background:var(--brand);color:var(--on-brand);box-shadow:0 3px 14px rgba(26,111,255,.32)} .btn.primary:hover{filter:brightness(1.07)} .btn.ghost{background:var(--card);border-color:var(--line);color:var(--ink)} .btn.ghost:hover{border-color:var(--brand);color:var(--brand)} .btn.subtle{background:var(--paper-2);color:var(--text)} .btn.subtle:hover{background:var(--line-2);color:var(--ink)} .btn.danger{background:var(--danger);color:#fff} .btn.sm{min-height:34px;padding:0 11px;font-size:.84rem;border-radius:9px} .btn[disabled]{opacity:.55;cursor:not-allowed} /* ── Tarjetas / KPIs ──────────────────────────────────────────── */ .card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm)} .card.pad{padding:20px} .grid{display:grid;gap:16px} .kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:16px;margin-bottom:22px} .kpi{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:18px 18px 16px;box-shadow:var(--shadow-sm);position:relative;overflow:hidden} .kpi .k-ic{position:absolute;right:14px;top:14px;color:var(--brand);opacity:.22} .kpi .k-lab{font-size:.76rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)} .kpi .k-val{font-size:1.7rem;font-weight:800;color:var(--ink);margin-top:6px;letter-spacing:-.02em;font-family:'Montserrat',sans-serif} .kpi .k-sub{font-size:.82rem;color:var(--muted);margin-top:2px} .kpi.good .k-val{color:var(--ok)} .kpi.bad .k-val{color:var(--danger)} .kpi.warn .k-val{color:var(--warn)} /* ── Tablas ───────────────────────────────────────────────────── */ .tablecard{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm);overflow:hidden} .tbl-top{display:flex;align-items:center;gap:12px;padding:14px 18px;border-bottom:1px solid var(--line-2);flex-wrap:wrap} .tbl-top h3{font-size:1rem;font-weight:700;color:var(--ink)} .tbl-top .sp{margin-left:auto} table{width:100%;border-collapse:collapse;font-size:.9rem} thead th{text-align:left;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--muted); padding:11px 16px;border-bottom:1px solid var(--line);background:var(--paper-2);position:sticky;top:0} tbody td{padding:12px 16px;border-bottom:1px solid var(--line-2);color:var(--text);vertical-align:middle} tbody tr:last-child td{border-bottom:none} tbody tr:hover{background:var(--paper-2)} td .strong,th .strong{color:var(--ink);font-weight:700} .num{text-align:right;font-variant-numeric:tabular-nums;font-feature-settings:"tnum"} .muted{color:var(--muted)} .empty{padding:46px 20px;text-align:center;color:var(--muted)} .empty .ic{opacity:.4;margin-bottom:8px} /* ── Badges / estados ─────────────────────────────────────────── */ .badge{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:999px;font-size:.74rem;font-weight:700;white-space:nowrap} .badge.ok{background:var(--ok-soft);color:var(--ok)} .badge.warn{background:var(--warn-soft);color:oklch(0.5 0.13 70)} .badge.bad{background:var(--danger-soft);color:var(--danger)} .badge.info{background:var(--brand-soft);color:var(--brand-2)} .badge.neutral{background:var(--paper-2);color:var(--muted)} .dot{width:8px;height:8px;border-radius:50%;display:inline-block} /* ── Formularios sueltos ──────────────────────────────────────── */ .field{display:block;margin-bottom:14px} .field label{font-size:.74rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);display:block;margin-bottom:6px} .field input,.field select,.field textarea{width:100%;background:var(--paper);border:1px solid var(--line);color:var(--ink); border-radius:10px;padding:11px 13px;font-size:.96rem;font-family:inherit;transition:border-color .15s,box-shadow .15s} .field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)} .row2{display:grid;grid-template-columns:1fr 1fr;gap:14px} .searchbox{display:flex;align-items:center;gap:9px;background:var(--card);border:1px solid var(--line);border-radius:10px;padding:8px 12px;min-width:200px} .searchbox input{border:none;outline:none;background:none;font:inherit;color:var(--ink);width:100%} .searchbox .ic{color:var(--muted)} /* segmented control */ .seg{display:inline-flex;background:var(--paper-2);border:1px solid var(--line);border-radius:11px;padding:3px;gap:2px;flex-wrap:wrap} .seg button{border:none;background:none;font:inherit;font-weight:600;font-size:.86rem;color:var(--muted);padding:7px 14px;border-radius:8px;cursor:pointer} .seg button.active{background:var(--card);color:var(--ink);box-shadow:var(--shadow-sm)} /* listas de items / tarjetas tipo ficha */ .list{display:grid;gap:12px} .tile{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;box-shadow:var(--shadow-sm)} .tile h4{font-size:1rem;color:var(--ink);font-weight:700;margin-bottom:3px} .tile .meta{font-size:.82rem;color:var(--muted)} /* barra de progreso */ .bar{height:9px;border-radius:99px;background:var(--paper-2);overflow:hidden} .bar > span{display:block;height:100%;background:var(--brand);border-radius:99px;transition:width .5s var(--ease)} .bar.ok > span{background:var(--ok)} hr.sep{border:none;border-top:1px solid var(--line-2);margin:18px 0} /* ── Agenda (calendario por barbero) ──────────────────────────── */ .agenda-grid{display:grid;gap:10px} .col-barbero{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;min-width:200px} .col-barbero .ch{padding:11px 14px;border-bottom:1px solid var(--line-2);font-weight:700;color:var(--ink);display:flex;align-items:center;gap:8px;font-size:.92rem} .col-barbero .ch .swatch{width:10px;height:10px;border-radius:50%;flex:none} .slot{padding:10px 14px;border-bottom:1px solid var(--line-2);display:flex;flex-direction:column;gap:2px;cursor:pointer;transition:background .12s} .slot:hover{background:var(--paper-2)} .slot:last-child{border-bottom:none} .slot .h{font-weight:700;color:var(--ink);font-size:.86rem;font-variant-numeric:tabular-nums} .slot .c{font-size:.82rem;color:var(--text)} .slot .s{font-size:.76rem;color:var(--muted)} .slot.free{color:var(--muted);font-size:.82rem} .cita-card{border-left:3px solid var(--brand);background:var(--brand-soft);border-radius:8px;padding:8px 10px;margin:6px 0} .cita-card.atendida{border-left-color:var(--ok);background:var(--ok-soft)} .cita-card.no_show{border-left-color:var(--danger);background:var(--danger-soft)} .cita-card.cancelada{border-left-color:var(--muted);background:var(--paper-2);opacity:.7} /* POS / caja */ .pos{display:grid;grid-template-columns:1.3fr .9fr;gap:16px;align-items:start} .pos-cat{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px} .chip{border:1px solid var(--line);background:var(--card);border-radius:10px;padding:10px 13px;cursor:pointer;font-weight:600;font-size:.88rem;color:var(--ink);transition:all .12s;text-align:left} .chip:hover{border-color:var(--brand);color:var(--brand)} .chip b{display:block;font-size:.78rem;color:var(--muted);font-weight:600;margin-top:2px} .cart-line{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--line-2)} .cart-line .g{flex:1} .cart-line .g b{color:var(--ink);font-weight:600;font-size:.9rem} .cart-line .g span{display:block;color:var(--muted);font-size:.78rem} @media (max-width:880px){ .pos{grid-template-columns:1fr} } /* ── Animaciones / micro-interacciones ────────────────────────── */ @keyframes vxUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}} @keyframes vxIn{from{opacity:0}to{opacity:1}} @keyframes vxPop{from{opacity:0;transform:scale(.95)}to{opacity:1;transform:none}} @keyframes vxSpin{to{transform:rotate(360deg)}} @keyframes vxPulse{0%,100%{opacity:.5}50%{opacity:1}} /* entrada de la barra y de la página */ .nav{animation:vxIn .35s ease both} .wrap>.page-head{animation:vxUp .45s var(--ease) both} .wrap>#content,.wrap>#cont,.wrap>#lista,.wrap>#tabla,.wrap>#detalle{animation:vxIn .4s var(--ease) both} /* KPIs: entran con un leve stagger y se elevan al pasar el mouse */ .kpi{animation:vxUp .5s var(--ease) both;transition:transform .18s var(--ease),box-shadow .18s var(--ease),border-color .18s} .kpis .kpi:nth-child(2){animation-delay:.06s} .kpis .kpi:nth-child(3){animation-delay:.12s} .kpis .kpi:nth-child(4){animation-delay:.18s} .kpis .kpi:nth-child(5){animation-delay:.24s} .kpi:hover{transform:translateY(-3px);box-shadow:var(--shadow)} a.kpi:hover{border-color:var(--brand)} .kpi .k-ic{transition:transform .25s var(--ease),opacity .2s} .kpi:hover .k-ic{transform:scale(1.12) rotate(-4deg);opacity:.32} /* tarjetas y tablas entran suave */ .tablecard,.card,.tile,.col-barbero{animation:vxUp .5s var(--ease) both} .tile{transition:transform .18s var(--ease),box-shadow .18s var(--ease),border-color .18s} .tile:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:var(--brand)} tbody tr{animation:vxIn .3s ease both} tbody tr{transition:background .15s} /* citas en la agenda */ .cita-card{animation:vxPop .28s var(--ease) both;transition:transform .15s var(--ease),box-shadow .15s,filter .15s} .cita-card:hover{transform:translateY(-2px) scale(1.015);box-shadow:var(--shadow-sm);filter:brightness(1.02)} .slot,.col-barbero{transition:background .15s} /* chips del POS */ .chip{transition:transform .14s var(--ease),border-color .14s,color .14s,box-shadow .14s} .chip:hover{transform:translateY(-2px);box-shadow:var(--shadow-sm)} .chip:active{transform:scale(.96)} .chip[disabled]{pointer-events:none} .cart-line{animation:vxIn .25s ease both} /* botones: leve elevación */ .btn{transition:filter .15s,background .15s,border-color .15s,transform .12s,box-shadow .15s} .btn.primary:hover,.btn.ghost:hover,.btn.subtle:hover{transform:translateY(-1px)} .iconbtn{transition:all .15s var(--ease)} .iconbtn:hover{transform:translateY(-1px) rotate(-3deg)} /* navegación vertical: barra de acento a la izquierda del link activo */ .nav-links a{position:relative} .nav-links a::after{content:"";position:absolute;left:0;top:7px;bottom:7px;width:3px;background:var(--brand); border-radius:3px;transform:scaleY(0);transform-origin:center;transition:transform .2s var(--ease);opacity:.9} .nav-links a:hover::after,.nav-links a.active::after{transform:scaleY(1)} .who .avatar{transition:transform .2s var(--ease)} .who .avatar:hover{transform:scale(1.08)} /* segmented control */ .seg button{transition:background .18s var(--ease),color .18s,transform .12s} .seg button:active{transform:scale(.96)} /* badges */ .badge{transition:transform .12s var(--ease)} /* spinner reutilizable + estado de carga */ .spinner{width:30px;height:30px;border-radius:50%;border:3px solid var(--line);border-top-color:var(--brand); animation:vxSpin .7s linear infinite;display:inline-block;vertical-align:middle} .empty{animation:vxIn .4s ease} /* ── Motivo decorativo de barbería (line-art, marca de agua) ──── */ .wrap{position:relative;z-index:1} .vx-deco{position:fixed;right:18px;bottom:80px;width:min(32vw,360px);color:var(--brand);opacity:.13; pointer-events:none;z-index:0;animation:vxIn 1.1s ease both} .vx-deco svg,.vx-deco img{width:100%;height:auto;display:block} :root[data-theme="light"] .vx-deco{opacity:.07} :root[data-theme="light"] .vx-deco img{filter:invert(1)} /* el line-art es blanco: lo oscurece en tema claro */ @media (max-width:880px){ .vx-deco{width:52vw;right:10px;bottom:70px} } .empty .art-empty{color:var(--brand);opacity:.5;width:120px;height:auto;margin:0 auto 10px;display:block} .empty .art-empty svg{width:100%;height:auto} /* ── Responsive ───────────────────────────────────────────────── */ /* Tablet/desktop intermedio: el contenido respeta el sidebar; nada más cambia. */ @media (max-width:880px){ .row2{grid-template-columns:1fr} .wrap{padding:20px 14px 50px} .tablecard{overflow-x:auto} } /* Móvil/tablet (≤820px): el sidebar es off-canvas y la hamburguesa lo abre. */ @media (max-width:820px){ :root{--topbar-h:56px} body.has-sidebar{padding-left:0} /* el contenido ocupa todo el ancho */ .topbar{display:flex} /* aparece la barra superior delgada */ .topbar .topbrand{display:flex} .hamb{display:grid} /* hamburguesa visible */ .nav{transform:translateX(-100%);box-shadow:var(--shadow)} /* sidebar oculto a la izquierda */ .nav.open{transform:none} /* abierto */ .wrap{padding:20px 14px 50px} } @media (prefers-reduced-motion:reduce){*{animation-duration:.001ms!important;transition-duration:.001ms!important}} ::selection{background:var(--brand-soft);color:var(--ink)} *{scrollbar-width:thin;scrollbar-color:var(--line) transparent} *::-webkit-scrollbar{width:10px;height:10px} *::-webkit-scrollbar-thumb{background:var(--line);border:3px solid transparent;background-clip:padding-box;border-radius:99px} a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:8px} /* Licencia / suscripción */ .lic-banner{padding:9px 18px;text-align:center;font-size:.9rem;font-weight:600;position:relative;z-index:60} .lic-banner a{color:inherit;text-decoration:underline;margin-left:8px} .lic-banner.lic-warn{background:#f59e0b;color:#231400} .lic-banner.lic-bad{background:#dc2626;color:#fff} .lic-overlay{position:fixed;inset:0;z-index:200;background:rgba(7,11,20,.86);backdrop-filter:blur(6px);display:grid;place-items:center;padding:24px} .lic-card{background:var(--card);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);max-width:460px;width:100%;text-align:center;padding:34px 30px} .lic-card .lic-ic{color:var(--brand);display:flex;justify-content:center;margin-bottom:10px} .lic-card h2{font-size:1.5rem;margin-bottom:10px;color:var(--ink)} .lic-card p{color:var(--text);margin-bottom:20px;line-height:1.55} .lic-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap} .lic-foot{margin-top:18px;color:var(--muted);font-size:.8rem} /* Logos de marca de las plataformas de delivery (chip wordmark con color oficial; compartido) */ .plogo{display:inline-flex;align-items:center;gap:5px;border-radius:8px;padding:.30em .58em; font-family:'Montserrat','Inter',sans-serif;font-weight:800;letter-spacing:-.015em;line-height:1;white-space:nowrap; box-shadow:inset 0 0 0 1px rgba(0,0,0,.07)} .plogo .ac{opacity:.9} .plogo.rappi{background:#FF441F;color:#fff} .plogo.pedidosya{background:#FA0050;color:#fff} .plogo.pedidosya .ac{color:#fff;opacity:1} .plogo.ubereats{background:#06C167;color:#0b1f14} .plogo.ubereats .ac{color:#0b1f14} .plogo.justo{background:#141243;color:#fff} .plogo.justo{color:#3BE3B4} .plogo.propio{background:var(--brand);color:#fff} .plogo.otro{background:var(--paper-2,#eef1f6);color:var(--ink)} /* Manual de uso — lector de dos paneles (índice + contenido) */ .manual-ov{position:fixed;inset:0;z-index:9999;display:flex;align-items:stretch;justify-content:center; padding:min(4vh,34px) min(4vw,34px);background:rgba(8,12,22,.55);backdrop-filter:blur(3px);animation:uiFade .14s ease} .man2{display:flex;flex-direction:column;width:100%;max-width:1040px;max-height:100%;background:var(--paper); border:1px solid var(--line);border-radius:18px;overflow:hidden;box-shadow:var(--shadow);animation:man2in .22s var(--ease,ease)} @keyframes man2in{from{opacity:0;transform:translateY(10px) scale(.99)}to{opacity:1;transform:none}} .man2-top{display:flex;align-items:center;gap:14px;justify-content:space-between;padding:15px 18px;border-bottom:1px solid var(--line); background:linear-gradient(180deg,var(--paper-2),var(--paper))} .man2-ttl{display:flex;align-items:center;gap:12px;min-width:0} .man2-logo{display:flex;color:var(--brand)}.man2-logo svg{width:30px;height:27px} .man2-ttl h2{font-family:'Montserrat',sans-serif;font-size:1.12rem;margin:0;line-height:1.1} .man2-sub{margin:2px 0 0;color:var(--muted);font-size:.82rem} .man2-tools{display:flex;align-items:center;gap:8px;flex-shrink:0} .man2-searchw{display:flex;align-items:center;gap:7px;background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:0 10px;color:var(--muted);transition:border-color .15s} .man2-searchw:focus-within{border-color:var(--brand)} .man2-search{border:none;background:none;color:var(--text);font:inherit;font-size:.88rem;padding:8px 0;width:190px;outline:none} .man2-ic{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:10px;border:1px solid var(--line); background:var(--paper);color:var(--text);cursor:pointer;transition:.15s} .man2-ic:hover{border-color:var(--brand);color:var(--brand)} .man2-prog{display:flex;align-items:center;gap:12px;padding:9px 18px;border-bottom:1px solid var(--line);background:var(--paper)} .man2-progbar{flex:1;height:7px;border-radius:99px;background:var(--paper-2);overflow:hidden} .man2-progbar i{display:block;height:100%;background:linear-gradient(90deg,var(--brand),var(--brand-2,var(--brand)));border-radius:99px;transition:width .3s var(--ease,ease)} .man2-progtx{color:var(--muted);font-size:.78rem;font-weight:700;white-space:nowrap} .man2-body{flex:1;display:flex;min-height:0} /* índice */ .man2-toc{width:246px;flex-shrink:0;border-right:1px solid var(--line);background:var(--paper-2);overflow-y:auto;padding:10px} .man2-tocit{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:10px;color:var(--text);text-decoration:none;font-size:.86rem;position:relative} .man2-tocit:hover{background:var(--paper)} .man2-tocit.act{background:var(--brand-soft,rgba(26,111,255,.12));color:var(--brand);font-weight:700} .man2-tocic{display:flex;color:var(--muted);flex-shrink:0}.man2-tocit.act .man2-tocic{color:var(--brand)} .man2-toctx{display:flex;flex-direction:column;line-height:1.2;min-width:0} .man2-toctx small{color:var(--muted);font-size:.72rem;font-weight:600} .man2-tocdone{margin-left:auto;color:var(--ok,#16a34a);opacity:0;transition:.15s;flex-shrink:0} .man2-tocit.done .man2-tocdone{opacity:1} .man2-tocit.done .man2-toctx{opacity:.7} /* contenido */ .man2-content{position:relative;flex:1;overflow-y:auto;padding:22px 26px 34px;scroll-behavior:smooth} /* Pregúntale al manual: panel de respuestas */ .man2-rmeta{color:var(--muted);font-size:.85rem;margin:2px 0 14px} .man2-result{border:1px solid var(--line);border-radius:13px;padding:13px 15px;margin-bottom:12px;background:var(--paper-2)} .man2-rhead{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:7px;flex-wrap:wrap} .man2-rcap{display:inline-flex;align-items:center;gap:6px;font-size:.78rem;font-weight:700;color:var(--brand)} .man2-rtipo{font-size:.68rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);background:var(--paper);border:1px solid var(--line);border-radius:99px;padding:2px 9px} .man2-rq{font-family:'Montserrat',sans-serif;font-weight:800;font-size:.98rem;margin:0 0 4px;color:var(--text)} .man2-rtext{margin:0;color:var(--text);font-size:.92rem;line-height:1.55} .man2-rgo{margin-top:10px;border:1px solid var(--line);background:var(--paper);color:var(--brand);border-radius:9px;padding:6px 12px;font:inherit;font-size:.8rem;font-weight:700;cursor:pointer;transition:.15s} .man2-rgo:hover{border-color:var(--brand);background:var(--brand-soft,rgba(26,111,255,.1))} .man2-noans{text-align:center;padding:34px 20px;color:var(--muted)} .man2-noans svg{color:var(--muted);opacity:.6} .man2-noans p{font-size:1rem;color:var(--text);margin:10px 0 4px} .man2-noans span{font-size:.86rem} .man2-cap{padding-bottom:26px;margin-bottom:22px;border-bottom:1px dashed var(--line)} .man2-cap:last-of-type{border-bottom:none} .man2-caphead{display:flex;align-items:center;gap:12px;margin-bottom:8px} .man2-capic{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:12px;background:var(--brand-soft,rgba(26,111,255,.12));color:var(--brand);flex-shrink:0} .man2-capttl{flex:1;min-width:0} .man2-capttl h3{font-family:'Montserrat',sans-serif;font-size:1.16rem;margin:0;line-height:1.15} .man2-min{display:inline-flex;align-items:center;gap:4px;color:var(--muted);font-size:.76rem;margin-top:2px} .man2-min svg{opacity:.7} .man2-leido{display:inline-flex;align-items:center;gap:6px;flex-shrink:0;border:1px solid var(--line);background:var(--paper);color:var(--muted); border-radius:99px;padding:6px 12px;font:inherit;font-size:.78rem;font-weight:700;cursor:pointer;transition:.15s} .man2-leido:hover{border-color:var(--brand);color:var(--brand)} .man2-cap.leido .man2-leido{background:var(--ok-soft,rgba(22,163,74,.12));border-color:transparent;color:var(--ok,#16a34a)} .man2-cap.leido .man2-capic{background:var(--ok-soft,rgba(22,163,74,.14));color:var(--ok,#16a34a)} .man2-lead{color:var(--text);font-size:.98rem;line-height:1.55;margin:2px 0 14px;padding-left:52px} .man2-content h4{font-family:'Montserrat',sans-serif;font-size:.96rem;margin:16px 0 6px;color:var(--text)} .man2-pasos{margin:0 0 6px;padding-left:20px;color:var(--text);font-size:.92rem;line-height:1.6} .man2-pasos li{margin:5px 0} .man2-pasos li::marker{color:var(--brand);font-weight:700} /* flujo del turno */ .man2-flujo{margin:12px 0 16px;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--paper-2)} .man2-flow{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px;counter-reset:fl} .man2-flow li{counter-increment:fl;display:flex;align-items:center;gap:8px;background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:7px 12px 7px 8px;font-size:.85rem;flex:1 1 auto;min-width:0} .man2-flow li::before{content:counter(fl);display:flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;background:var(--brand);color:var(--on-brand);font-size:.75rem;font-weight:800;flex-shrink:0} /* callouts */ .man2-ct{display:block;font-family:'Montserrat',sans-serif;font-size:.7rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:6px} .man2-call{margin:12px 0;padding:11px 14px 11px 16px;border-radius:12px;border-left:4px solid;position:relative} .man2-call ul{margin:0;padding-left:18px;font-size:.9rem;line-height:1.55;color:var(--text)} .man2-call ul li{margin:4px 0} .man2-call.tip{background:var(--brand-soft,rgba(26,111,255,.09));border-color:var(--brand)} .man2-call.tip .man2-ct{color:var(--brand)} .man2-call.ojo{background:var(--warn-soft,rgba(217,119,6,.1));border-color:var(--warn,#d97706)} .man2-call.ojo .man2-ct{color:var(--warn,#d97706)} /* atajos */ .man2-atajos{margin:14px 0} .man2-chips{display:flex;flex-wrap:wrap;gap:8px} .man2-atajo{display:inline-flex;align-items:center;gap:7px;background:var(--paper-2);border:1px solid var(--line);border-radius:99px;padding:5px 12px 5px 6px;font-size:.83rem;color:var(--text)} .man2-atajo kbd{font-family:ui-monospace,Menlo,monospace;font-size:.76rem;background:var(--paper);border:1px solid var(--line);border-bottom-width:2px;border-radius:6px;padding:2px 7px;color:var(--text)} /* faq */ .man2-faq{margin:16px 0} .man2-q{border:1px solid var(--line);border-radius:10px;margin-bottom:7px;overflow:hidden;background:var(--paper)} .man2-q summary{cursor:pointer;padding:10px 14px;font-weight:700;font-size:.9rem;list-style:none;position:relative;padding-right:34px} .man2-q summary::-webkit-details-marker{display:none} .man2-q summary::after{content:'+';position:absolute;right:14px;top:50%;transform:translateY(-50%);color:var(--brand);font-size:1.15rem;font-weight:400;line-height:1} .man2-q[open] summary::after{content:'–'} .man2-q summary:hover{color:var(--brand)} .man2-q p{margin:0;padding:0 14px 12px;color:var(--text);font-size:.88rem;line-height:1.55} /* glosario */ .man2-glos{margin:16px 0 0} .man2-glos>div{display:flex;gap:10px;padding:8px 0;border-top:1px solid var(--line)} .man2-glos>div:first-of-type{border-top:none} .man2-glos dt{font-weight:800;color:var(--text);font-size:.88rem;flex:0 0 32%;max-width:180px;font-family:'Montserrat',sans-serif} .man2-glos dd{margin:0;color:var(--muted);font-size:.87rem;line-height:1.5} .man2-empty{padding:40px;text-align:center;color:var(--muted)} /* pie */ .man2-foot{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:13px 18px;border-top:1px solid var(--line);background:var(--paper-2)} .man2-hint{color:var(--muted);font-size:.78rem} .man2-foot .man2-ok{white-space:nowrap} @media (max-width:760px){ .manual-ov{padding:0} .man2{max-width:100%;border-radius:0;border:none} .man2-top{flex-wrap:wrap;gap:10px 8px;padding:12px 14px} .man2-ttl{flex:1 1 100%}.man2-ttl h2{font-size:1.05rem}.man2-sub{display:none} .man2-logo svg{width:26px;height:23px} .man2-tools{width:100%} .man2-searchw{flex:1}.man2-search{width:auto;flex:1} .man2-body{flex-direction:column} .man2-toc{width:auto;border-right:none;border-bottom:1px solid var(--line);display:flex;gap:6px;overflow-x:auto;padding:8px 10px} .man2-tocit{flex-direction:column;text-align:center;gap:4px;padding:8px 10px;min-width:74px;flex-shrink:0;font-size:.72rem} .man2-toctx small,.man2-tocdone{display:none} .man2-lead{padding-left:0} .man2-content{padding:18px 16px 30px} .man2-glos>div{flex-direction:column;gap:2px}.man2-glos dt{flex-basis:auto} .man2-hint{display:none} } /* impresión / PDF: expande todo, oculta la app y los controles */ @media print{ body.has-man2 > *:not(.manual-ov){display:none!important} .manual-ov{position:static;padding:0;background:none;display:block} .man2{max-width:none;max-height:none;box-shadow:none;border:none;display:block} .man2-tools,.man2-toc,.man2-foot,.man2-prog,.man2-leido{display:none!important} .man2-body,.man2-content{display:block;overflow:visible;max-height:none} .man2-q p{display:block!important} .man2-cap{break-inside:avoid} } /* Fix colisión de nombres (14-jul): 'pos'/'neg' se usan como ESTADO (positivo/negativo) en muchas secciones (finanzas, gastos, flujo, movimientos, etc.) y chocaban con .pos, que es el grid del punto de venta. Eso convertía tarjetas/celdas en un grid de 2 columnas, tiraba el monto a una columna angosta y lo recortaba. Aquí se neutraliza el grid SOLO en esos usos-estado, sin tocar el layout real del punto de venta (.pos por sí solo). */ .kpi.pos, .kpi.neg, .kpi.net, .kpi.proy, .er-card.pos, .er-card.neg, .dif.pos, .dif.neg { display:block; grid-template-columns:none; gap:0 } td.pos, td.neg { display:table-cell; grid-template-columns:none; gap:0 } .amt.pos, .amt.neg { display:inline; grid-template-columns:none } /* ── Paleta de marca de Cafe Bar 2001 (data-pal lo estampa App.applyPaleta) ─────────────── Estas reglas del CRM pintan sobre var(--brand) con blanco HARDCODEADO, saltandose --on-brand: con el dorado del tema oscuro el texto queda a 2.57:1. Se corrigen SOLO bajo esta paleta, asi ningun otro local cambia de aspecto. */ :root[data-pal^="marca2001"] .btn.primary{box-shadow:0 3px 14px rgba(201,154,55,.30)} :root[data-pal^="marca2001"][data-theme="light"] .btn.primary{box-shadow:0 3px 14px rgba(107,53,24,.28)} :root[data-pal^="marca2001"] .plogo.propio{color:var(--on-brand)} :root[data-pal^="marca2001"] .upd-banner .btn{ background:color-mix(in srgb,var(--on-brand) 18%,transparent); color:var(--on-brand); border-color:color-mix(in srgb,var(--on-brand) 50%,transparent); } :root[data-pal^="marca2001"] .upd-banner .btn:hover{background:color-mix(in srgb,var(--on-brand) 28%,transparent)}