/* GENERADO por bin/build_assets.php — no editar: editar assets-src/css/ */ /* ── 00-base.css ── */ /* GARCA — un solo CSS. Tokens sacados del diseño (design/Garca - E1…E9, dirección A "crema evolucionado"). Claro y oscuro: prefers-color-scheme, con override por [data-theme]. */ :root { --bg: #FAF7F1; --surface: #FFFFFF; --surface-2: #FAF7F1; --line: #EFE9DF; --line-2: #E3DACB; --track: #F0E8DC; --bar: #DDD3C4; --ink: #17140F; --ink-2: #453D31; --ink-3: #5E5545; --ink-4: #756B5C; --brand: #1B5BE3; --on-brand: #FFFFFF; --accent: #1B5BE3; --accent-hover: #1746B4; --accent-soft: #E8EEFD; --accent-line: #D4E0FB; --accent-ink: #1746B4; --ok: #157F4C; --ok-ink: #10613C; --ok-soft: #E4F2EA; --warn: #925A0C; --warn-ink: #7A4A08; --warn-soft: #F8EEDC; --hot: #C2410C; --hot-soft: #FAE9E0; --bad: #B3261E; --bad-ink: #98211A; --bad-soft: #F8E3E1; --scrim: rgba(23, 20, 15, .5); --scrim-desk: rgba(23, 20, 15, .42); --sh-panel: rgba(70, 55, 30, .5); --sh-card: 0 1px 2px rgba(70, 55, 30, .04), 0 14px 30px -22px rgba(70, 55, 30, .14); --sh-float: 0 1px 2px rgba(70, 55, 30, .04), 0 18px 40px -26px rgba(70, 55, 30, .26); --sh-sheet: 0 -10px 34px -18px rgba(70, 55, 30, .45); --sh-cta: 0 10px 22px -12px rgba(27, 91, 227, .6); --f-ui: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; --f-num: 'Bricolage Grotesque', 'Plus Jakarta Sans', system-ui, sans-serif; --f-mono: 'Geist Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace; --r-card: 22px; --r-btn: 14px; --r-cta: 18px; /* tokens del diseño exacto (tools/portar.py) */ --ink-5: #938B7B; --ink-6: #B0A797; --ink-7: #B0A899; --line-3: #C9C0B0; --line-4: #4A4238; --accent-line-2: #9CBBFF; --noche: #1E1B16; --page: #FAF7F1; --card: #FFFFFF; --bg-2: #FAF7F1; --on-ink: #FAF7F1; --ink-bg: #17140F; --ink-0: #17140F; --ink-00: #17140F; --negro: #14120E; --track-2: #F5F1E9; --line-5: #D9CFC0; --accent-line-3: #9CBBFF; --sh-g: rgba(70,55,30,.45); --sh-h: rgba(70,55,30,.26); --sh-i: rgba(70,55,30,.3); --scrim-2: rgba(23,20,15,.55); --sh-card-a: rgba(70,55,30,.04); --sh-card-b: rgba(70,55,30,.14); --sh-fab: rgba(27,91,227,.6); --sh-fab-rail: rgba(27,91,227,.55); --qr-fondo: #FAF7F1; --sh-brand-8: rgba(27,91,227,.6); --num-vacio: #C9C0B0; --sh-a: rgba(70,55,30,.04); --sh-b: rgba(70,55,30,.14); --sh-c: rgba(70,55,30,.28); --sh-d: rgba(70,55,30,.45); --sh-e: rgba(70,55,30,.08); --sh-f: rgba(70,55,30,.5); --sh-brand: rgba(27,91,227,.6); color-scheme: light; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #23201A; --surface: #1E1B16; --surface-2: #23201A; --line: #322D25; --line-2: #3C362D; --track: #2A251E; --bar: #3C362D; --ink: #F6F2E9; --ink-2: #D2CABA; --ink-3: #B0A797; --ink-4: #938B7B; --accent: #7DA5FF; --accent-hover: #9CBBFF; --accent-soft: #1E2842; --accent-line: #2D3A5C; --accent-ink: #9CBBFF; --ok: #4BC486; --ok-ink: #74D3A0; --ok-soft: #17301F; --warn: #E0A040; --warn-ink: #E0A040; --warn-soft: #3A2E12; --hot: #FF8A4C; --hot-soft: #3A2417; --bad: #FF6B5E; --bad-ink: #FF8E84; --bad-soft: #3A1F1C; --scrim: rgba(0, 0, 0, .62); --scrim-desk: rgba(0, 0, 0, .6); --sh-panel: rgba(0, 0, 0, .75); --ink-5: #938B7B; --ink-6: #B0A797; --ink-7: #6B6355; --line-3: #8E8575; --line-4: #3C362D; --accent-line-2: #5C79B8; --noche: #1E1B16; --page: #14120E; --card: #23201A; --bg-2: #1E1B16; --on-ink: #F6F2E9; --ink-bg: #2A251E; --ink-0: #000000; --ink-00: #0C0A08; --negro: #000000; --track-2: #2A251E; --line-5: #3C362D; --accent-line-3: #3E5A99; --sh-g: rgba(0,0,0,.6); --sh-h: rgba(0,0,0,.6); --sh-i: rgba(0,0,0,.7); --scrim-2: rgba(0,0,0,.7); --sh-card-a: transparent; --sh-card-b: transparent; --sh-fab: rgba(27,91,227,.6); --sh-fab-rail: rgba(27,91,227,.55); /* E10: .55 también en oscuro */ --qr-fondo: #FFFFFF; /* el QR tiene que poder leerse */ --sh-brand-8: rgba(27,91,227,.8); --num-vacio: #938B7B; --sh-a: rgba(0,0,0,.4); --sh-b: rgba(0,0,0,.5); --sh-c: rgba(0,0,0,.6); --sh-d: rgba(0,0,0,.75); --sh-e: rgba(0,0,0,.5); --sh-f: rgba(0,0,0,.8); --sh-card: 0 1px 2px rgba(0, 0, 0, .4), 0 14px 30px -22px rgba(0, 0, 0, .5); --sh-float: 0 1px 2px rgba(0, 0, 0, .4), 0 18px 40px -26px rgba(0, 0, 0, .6); --sh-sheet: 0 -10px 34px -18px rgba(0, 0, 0, .75); color-scheme: dark; } } :root[data-theme="dark"] { --bg: #23201A; --surface: #1E1B16; --surface-2: #23201A; --line: #322D25; --line-2: #3C362D; --track: #2A251E; --bar: #3C362D; --ink: #F6F2E9; --ink-2: #D2CABA; --ink-3: #B0A797; --ink-4: #938B7B; --accent: #7DA5FF; --accent-hover: #9CBBFF; --accent-soft: #1E2842; --accent-line: #2D3A5C; --accent-ink: #9CBBFF; --ok: #4BC486; --ok-ink: #74D3A0; --ok-soft: #17301F; --warn: #E0A040; --warn-ink: #E0A040; --warn-soft: #3A2E12; --hot: #FF8A4C; --hot-soft: #3A2417; --bad: #FF6B5E; --bad-ink: #FF8E84; --bad-soft: #3A1F1C; --scrim: rgba(0, 0, 0, .62); --scrim-desk: rgba(0, 0, 0, .6); --sh-panel: rgba(0, 0, 0, .75); --ink-5: #938B7B; --ink-6: #B0A797; --ink-7: #6B6355; --line-3: #8E8575; --line-4: #3C362D; --accent-line-2: #5C79B8; --noche: #1E1B16; --page: #14120E; --card: #23201A; --bg-2: #1E1B16; --on-ink: #F6F2E9; --ink-bg: #2A251E; --ink-0: #000000; --ink-00: #0C0A08; --negro: #000000; --track-2: #2A251E; --line-5: #3C362D; --accent-line-3: #3E5A99; --sh-g: rgba(0,0,0,.6); --sh-h: rgba(0,0,0,.6); --sh-i: rgba(0,0,0,.7); --scrim-2: rgba(0,0,0,.7); --sh-card-a: transparent; --sh-card-b: transparent; --sh-fab: rgba(27,91,227,.6); --sh-fab-rail: rgba(27,91,227,.55); /* E10: .55 también en oscuro */ --qr-fondo: #FFFFFF; /* el QR tiene que poder leerse */ --sh-brand-8: rgba(27,91,227,.8); --num-vacio: #938B7B; --sh-a: rgba(0,0,0,.4); --sh-b: rgba(0,0,0,.5); --sh-c: rgba(0,0,0,.6); --sh-d: rgba(0,0,0,.75); --sh-e: rgba(0,0,0,.5); --sh-f: rgba(0,0,0,.8); --sh-card: 0 1px 2px rgba(0, 0, 0, .4), 0 14px 30px -22px rgba(0, 0, 0, .5); --sh-float: 0 1px 2px rgba(0, 0, 0, .4), 0 18px 40px -26px rgba(0, 0, 0, .6); --sh-sheet: 0 -10px 34px -18px rgba(0, 0, 0, .75); color-scheme: dark; } /* ── Base ───────────────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } [hidden] { display: none !important; } /* el atributo hidden le gana a cualquier display de las clases */ html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--page); color: var(--ink); font: 500 15px var(--f-ui); /* line-height normal, como los artboards */ -webkit-font-smoothing: antialiased; } a { color: var(--accent); text-decoration: none; } a:hover { color: var(--accent-hover); } button { font: inherit; color: inherit; } img, svg { display: block; } .num { font-variant-numeric: tabular-nums; } .mono { font-family: var(--f-mono); } .eyebrow { font: 500 11px var(--f-mono); letter-spacing: .11em; text-transform: uppercase; color: var(--ink-4); } .eyebrow-sm { font: 500 10px var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-4); } .muted { color: var(--ink-3); } .note { font: 500 11px var(--f-ui); color: var(--ink-4); } .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; } /* ── Shell ──────────────────────────────────────────────────────────────── */ .app { min-height: 100dvh; display: flex; flex-direction: column; } .topbar { height: 56px; display: flex; align-items: center; justify-content: space-between; padding: 0 20px; } .logo { width: 26px; height: 26px; border-radius: 8px; object-fit: cover; } .avatar { width: 34px; height: 34px; border-radius: 999px; background: var(--accent-soft); border: 1px solid var(--accent-line); display: flex; align-items: center; justify-content: center; font: 600 11px var(--f-mono); color: var(--accent); cursor: pointer; } .page-head { display: none; } .app-main { flex: 1; display: flex; flex-direction: column; min-width: 0; } .main { flex: 1; display: flex; flex-direction: column; gap: 12px; padding: 4px 20px 108px; max-width: 560px; width: 100%; margin: 0 auto; } .col-side { display: flex; flex-direction: column; gap: 12px; } /* Barra inferior (celular) */ .tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; } .tab { display: flex; flex-direction: column; align-items: center; gap: 3px; color: var(--ink-3); font: 500 10.5px var(--f-ui); } .tab.on { color: var(--accent); font-weight: 600; } .tab svg { width: 22px; height: 22px; } .fab { width: 56px; height: 56px; margin: 0 auto; border: 0; border-radius: 20px; background: var(--brand); color: var(--on-brand); display: flex; align-items: center; justify-content: center; box-shadow: var(--sh-cta); cursor: pointer; } .fab svg { width: 26px; height: 26px; } .rail { display: none; } /* ── Tarjetas y piezas ──────────────────────────────────────────────────── */ .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); padding: 12px 16px; display: flex; flex-direction: column; gap: 8px; box-shadow: var(--sh-card); } .card-title { font: 600 17px var(--f-num); color: var(--ink); } .row-between { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .tag { font: 500 10px var(--f-mono); letter-spacing: .05em; color: var(--ink-3); background: var(--surface-2); border: 1px solid var(--line); border-radius: 999px; padding: 3px 8px; white-space: nowrap; } .pill { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px 5px 8px; border-radius: 999px; font: 600 12px var(--f-ui); } .pill svg { width: 14px; height: 14px; } .pill.bien { background: var(--ok-soft); color: var(--ok-ink); } .pill.atencion { background: var(--warn-soft); color: var(--warn-ink); } .pill.alto { background: var(--hot-soft); color: var(--hot); } .pill.pasado { background: var(--bad-soft); color: var(--bad-ink); } .pill.sin_datos { background: var(--surface-2); color: var(--ink-3); border: 1px solid var(--line); } .minibar { position: relative; height: 6px; border-radius: 3px; background: var(--track); overflow: hidden; } .minibar > i { position: absolute; inset: 0 auto 0 0; border-radius: 3px; background: var(--ink-2); } .dots { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; font: 500 11px var(--f-mono); color: var(--ink-3); } .dot { display: inline-flex; align-items: center; gap: 5px; } .dot::before { content: ""; width: 7px; height: 7px; border-radius: 999px; background: var(--ok); } .dot.no::before { background: var(--warn); } .dot.off::before { background: var(--line-2); } .hito { display: inline-flex; align-items: flex-start; gap: 7px; font: 600 12.5px/1.35 var(--f-ui); color: var(--ink-2); } .hito svg { width: 15px; height: 15px; flex: none; margin-top: 1px; color: var(--accent); } /* Botones */ .btn { height: 44px; padding: 0 16px; border-radius: var(--r-btn); border: 1.5px solid var(--accent); background: var(--surface); color: var(--accent); font: 600 14.5px var(--f-ui); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; } .btn:hover { border-color: var(--accent-hover); color: var(--accent-hover); } .btn-cta { height: 56px; width: 100%; border: 0; border-radius: var(--r-cta); background: var(--brand); color: var(--on-brand); font: 700 17px var(--f-ui); cursor: pointer; box-shadow: var(--sh-cta); } .btn-cta:disabled { opacity: .55; cursor: default; box-shadow: none; } .btn-link { background: none; border: 0; color: var(--accent); font: 600 14.5px var(--f-ui); cursor: pointer; padding: 8px; } .btn-ghost { height: 64px; border: 1.5px solid var(--line); background: var(--surface); border-radius: 16px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; cursor: pointer; font: 600 12px var(--f-ui); color: var(--ink); } .btn-ghost svg { width: 22px; height: 22px; color: var(--accent); } /* ── Inicio (Guardián) ──────────────────────────────────────────────────── */ .hero { display: flex; flex-direction: column; animation: up .5s ease-out both; } .hero .lbl { font: 500 15px/1.3 var(--f-ui); color: var(--ink-2); margin-top: 3px; } .hero .big { font: 700 44px/1.05 var(--f-num); letter-spacing: -.03em; color: var(--ink); font-variant-numeric: tabular-nums; } .hero .big.neg { color: var(--bad); } .medidor { display: flex; flex-direction: column; gap: 9px; } .medidor .leyenda { display: flex; justify-content: space-between; align-items: baseline; font: 600 12.5px var(--f-ui); color: var(--ink-2); } .medidor .leyenda span:last-child { font-weight: 500; color: var(--ink-3); } .barra { position: relative; height: 22px; border-radius: 11px; background: var(--track); } .barra .lleno { position: absolute; inset: 0 auto 0 0; border-radius: 11px; background: var(--brand); transform-origin: left; animation: grow .85s cubic-bezier(.2, .75, .2, 1) both; max-width: 100%; } .barra .lleno.pasado { background: var(--bad); } .barra .proy { position: absolute; top: -8px; bottom: -8px; border-left: 2px dashed var(--hot); } .barra .tope { position: absolute; right: 0; top: -8px; bottom: -8px; width: 2px; border-radius: 1px; background: var(--ink); } .medidor .pie { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .proy-txt { font: 500 11.5px var(--f-ui); color: var(--ink-3); text-align: right; } .proy-txt b { color: var(--hot); font-weight: 600; font-variant-numeric: tabular-nums; } .conclusion { margin: 0; font: 600 15px/1.35 var(--f-ui); color: var(--ink); text-wrap: pretty; } .meses { position: relative; height: 46px; display: flex; align-items: flex-end; gap: 6px; } .meses .linea { position: absolute; left: 0; right: 0; border-top: 1px dashed var(--hot); } .meses i { flex: 1; min-height: 2px; background: var(--bar); border-radius: 3px 3px 0 0; transform-origin: bottom; animation: rise .5s ease-out both; } .meses i.hoy { background: var(--brand); } .meses-lbl { display: flex; gap: 6px; font: 500 9.5px var(--f-mono); color: var(--ink-4); } .meses-lbl span { flex: 1; text-align: center; } .meses-lbl span.hoy { color: var(--accent); } .leyenda-tope { display: inline-flex; align-items: center; gap: 5px; font: 500 10px var(--f-mono); color: var(--ink-4); } .leyenda-tope::before { content: ""; width: 14px; border-top: 1px dashed var(--hot); } .kv { display: flex; justify-content: space-between; font: 500 13.5px var(--f-ui); color: var(--ink-2); } .kv b { color: var(--ink); font-variant-numeric: tabular-nums; } /* ── Hoja Facturar ──────────────────────────────────────────────────────── */ .scrim { position: fixed; inset: 0; z-index: 40; background: var(--scrim); opacity: 0; pointer-events: none; transition: opacity .2s; } .scrim.on { opacity: 1; pointer-events: auto; } .x { width: 30px; height: 30px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--ink-3); } .x svg { width: 14px; height: 14px; } .chip { display: inline-flex; align-items: center; gap: 6px; background: var(--accent-soft); border: 1px solid var(--accent-line); border-radius: 999px; padding: 5px 11px; font: 600 12.5px var(--f-ui); color: var(--accent-ink); } .editor { display: none; flex-direction: column; gap: 10px; padding: 4px 0 14px; border-bottom: 1px solid var(--line); } .editor.on { display: flex; } .chips { display: flex; flex-wrap: wrap; gap: 8px; } .chips button { height: 36px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); font: 600 13px var(--f-ui); cursor: pointer; } .chips button.on { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent-ink); } .campo { display: flex; flex-direction: column; gap: 6px; } .campo label { font: 500 12px var(--f-ui); color: var(--ink-3); } .input { height: 46px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--surface); color: var(--ink); padding: 0 14px; font: 500 15px var(--f-ui); width: 100%; } .input.mono { font-family: var(--f-mono); letter-spacing: .02em; } .input:focus { outline: 0; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } .input.err { border-color: var(--bad); } .ayuda { font: 500 12px var(--f-ui); color: var(--ink-3); } .ayuda.ok { color: var(--ok-ink); } .ayuda.err { color: var(--bad-ink); } .acciones3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; width: 100%; padding-top: 14px; } .spin { width: 30px; height: 30px; border-radius: 999px; border: 3px solid var(--accent-soft); border-top-color: var(--accent); animation: spin .8s linear infinite; } .toast { position: fixed; left: 50%; bottom: 96px; z-index: 60; transform: translate(-50%, 20px); opacity: 0; transition: .2s; background: var(--ink); color: var(--bg); padding: 10px 16px; border-radius: 12px; font: 600 13px var(--f-ui); pointer-events: none; max-width: 90vw; } .toast.on { opacity: 1; transform: translate(-50%, 0); } /* ── Páginas simples (entrar, error, próximamente) ─────────────────────── */ .solo { min-height: 100dvh; display: flex; align-items: center; justify-content: center; padding: 24px 20px; } .solo .caja { width: 100%; max-width: 380px; display: flex; flex-direction: column; gap: 14px; } .solo h1 { margin: 6px 0 0; font: 700 30px/1.1 var(--f-num); letter-spacing: -.02em; } .aviso { padding: 10px 12px; border-radius: 12px; font: 600 13px var(--f-ui); } .aviso.bad { background: var(--bad-soft); color: var(--bad-ink); } .vacio { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; padding: 60px 10px; color: var(--ink-3); } .vacio h2 { margin: 0; font: 600 20px var(--f-num); color: var(--ink); } /* ── Escritorio ─────────────────────────────────────────────────────────── */ @media (min-width: 900px) { .app { flex-direction: row; } .tabbar { display: none !important; } .rail { display: flex; position: sticky; top: 0; height: 100dvh; width: 104px; flex: none; z-index: 30; flex-direction: column; align-items: center; gap: 26px; padding: 22px 0; background: var(--surface); border-right: 1px solid var(--line); } .page-head { display: flex; } .main { max-width: none; padding: 0 44px 44px; margin: 0; display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 24px; align-items: start; } .main.una-col { display: flex; max-width: 900px; } .col-main { display: flex; flex-direction: column; gap: 14px; } .hero .big { font-size: 76px; } .meses { height: 230px; gap: 12px; } .meses-lbl { gap: 12px; font-size: 10.5px; } .solo-cel { display: none !important; } .toast { bottom: 32px; } } @media (max-width: 899px) { .col-main { display: contents; } .solo-desk { display: none !important; } } /* sombras de los FAB por página, como en cada artboard (E5 tabla: sin sombra; E5 lista: .6 en los dos temas) */ body[data-page="facturas"] .rail-fab { box-shadow: none !important; } /* el FAB del celular en oscuro: .6 en todos los artboards menos Inicio (.8) */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) body[data-page="inicio"] { --sh-fab: rgba(27,91,227,.8); } } :root[data-theme="dark"] body[data-page="inicio"] { --sh-fab: rgba(27,91,227,.8); } @keyframes up { from { opacity: 0; transform: translateY(6px); } } /* nombres del diseño (Claude Design) */ @keyframes om-up { from { opacity: 0; transform: translateY(6px); } } @keyframes om-grow { from { transform: scaleX(0); } } @keyframes om-rise { from { transform: scaleY(0); } } @keyframes om-pop { from { transform: scale(.6); opacity: 0; } } @keyframes grow { from { transform: scaleX(0); } } @keyframes rise { from { transform: scaleY(0); } } @keyframes pop { from { transform: scale(.6); opacity: 0; } } @keyframes spin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } } /* ── 01-pares.css ── */ /* Tokens por PAR claro/oscuro de los artboards (los genera tools/portar2.py; no editar a mano). */ /* --p-0b0d10-f7f9fb #0B0D10 #F7F9FB */ /* --p-0f7b43-0e2a1c #0F7B43 #0E2A1C */ /* --p-0f7b43-3fcb86 #0F7B43 #3FCB86 */ /* --p-1b5be3-5b8cff #1B5BE3 #5B8CFF */ /* --p-2e343c-c7cdd5 #2E343C #C7CDD5 */ /* --p-49515b-9aa3ad #49515B #9AA3AD */ /* --p-626a74-7c8794 #626A74 #7C8794 */ /* --p-8f5300-e3a63f #8F5300 #E3A63F */ /* --p-c13a0b-ff8552 #C13A0B #FF8552 */ /* --p-c9c0b0-b0a797 #C9C0B0 #B0A797 */ /* --p-d7dce3-262b32 #D7DCE3 #262B32 */ /* --p-dde5f5-23304a #DDE5F5 #23304A */ /* --p-e3e6eb-202429 #E3E6EB #202429 */ /* --p-edeff2-1b1f25 #EDEFF2 #1B1F25 */ /* --p-f2f5fb-141c2e #F2F5FB #141C2E */ /* --p-f6f2e9-f6f2e9 #F6F2E9 #F6F2E9 */ /* --p-f6f9ff-1a2333 #F6F9FF #1A2333 */ /* --p-f7f8fa-101216 #F7F8FA #101216 */ /* --p-fffcf5-23201a #FFFCF5 #23201A */ /* --p-ffffff-07080a #FFFFFF #07080A */ /* --p-ffffff-101216 #FFFFFF #101216 */ /* --p-ffffff-3fcb86 #FFFFFF #3FCB86 */ /* --p-r27-91-227-5-r27-91-227-8 RGBA(27,91,227,.5) RGBA(27,91,227,.8) */ /* --p-r27-91-227-55-r27-91-227-8 RGBA(27,91,227,.55) RGBA(27,91,227,.8) */ /* --p-r27-91-227-6-r27-91-227-8 RGBA(27,91,227,.6) RGBA(27,91,227,.8) */ /* --p-r70-55-30-35-r0-0-0-72 RGBA(70,55,30,.35) RGBA(0,0,0,.72) */ /* --p-r70-55-30-4-r0-0-0-75 RGBA(70,55,30,.4) RGBA(0,0,0,.75) */ :root { --p-0b0d10-f7f9fb: #0B0D10; --p-0f7b43-0e2a1c: #0F7B43; --p-0f7b43-3fcb86: #0F7B43; --p-1b5be3-5b8cff: #1B5BE3; --p-2e343c-c7cdd5: #2E343C; --p-49515b-9aa3ad: #49515B; --p-626a74-7c8794: #626A74; --p-8f5300-e3a63f: #8F5300; --p-c13a0b-ff8552: #C13A0B; --p-c9c0b0-b0a797: #C9C0B0; --p-d7dce3-262b32: #D7DCE3; --p-dde5f5-23304a: #DDE5F5; --p-e3e6eb-202429: #E3E6EB; --p-edeff2-1b1f25: #EDEFF2; --p-f2f5fb-141c2e: #F2F5FB; --p-f6f2e9-f6f2e9: #F6F2E9; --p-f6f9ff-1a2333: #F6F9FF; --p-f7f8fa-101216: #F7F8FA; --p-fffcf5-23201a: #FFFCF5; --p-ffffff-07080a: #FFFFFF; --p-ffffff-101216: #FFFFFF; --p-ffffff-3fcb86: #FFFFFF; --p-r27-91-227-5-r27-91-227-8: rgba(27,91,227,.5); --p-r27-91-227-55-r27-91-227-8: rgba(27,91,227,.55); --p-r27-91-227-6-r27-91-227-8: rgba(27,91,227,.6); --p-r70-55-30-35-r0-0-0-72: rgba(70,55,30,.35); --p-r70-55-30-4-r0-0-0-75: rgba(70,55,30,.4); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --p-0b0d10-f7f9fb: #F7F9FB; --p-0f7b43-0e2a1c: #0E2A1C; --p-0f7b43-3fcb86: #3FCB86; --p-1b5be3-5b8cff: #5B8CFF; --p-2e343c-c7cdd5: #C7CDD5; --p-49515b-9aa3ad: #9AA3AD; --p-626a74-7c8794: #7C8794; --p-8f5300-e3a63f: #E3A63F; --p-c13a0b-ff8552: #FF8552; --p-c9c0b0-b0a797: #B0A797; --p-d7dce3-262b32: #262B32; --p-dde5f5-23304a: #23304A; --p-e3e6eb-202429: #202429; --p-edeff2-1b1f25: #1B1F25; --p-f2f5fb-141c2e: #141C2E; --p-f6f2e9-f6f2e9: #F6F2E9; --p-f6f9ff-1a2333: #1A2333; --p-f7f8fa-101216: #101216; --p-fffcf5-23201a: #23201A; --p-ffffff-07080a: #07080A; --p-ffffff-101216: #101216; --p-ffffff-3fcb86: #3FCB86; --p-r27-91-227-5-r27-91-227-8: rgba(27,91,227,.8); --p-r27-91-227-55-r27-91-227-8: rgba(27,91,227,.8); --p-r27-91-227-6-r27-91-227-8: rgba(27,91,227,.8); --p-r70-55-30-35-r0-0-0-72: rgba(0,0,0,.72); --p-r70-55-30-4-r0-0-0-75: rgba(0,0,0,.75); } } :root[data-theme="dark"] { --p-0b0d10-f7f9fb: #F7F9FB; --p-0f7b43-0e2a1c: #0E2A1C; --p-0f7b43-3fcb86: #3FCB86; --p-1b5be3-5b8cff: #5B8CFF; --p-2e343c-c7cdd5: #C7CDD5; --p-49515b-9aa3ad: #9AA3AD; --p-626a74-7c8794: #7C8794; --p-8f5300-e3a63f: #E3A63F; --p-c13a0b-ff8552: #FF8552; --p-c9c0b0-b0a797: #B0A797; --p-d7dce3-262b32: #262B32; --p-dde5f5-23304a: #23304A; --p-e3e6eb-202429: #202429; --p-edeff2-1b1f25: #1B1F25; --p-f2f5fb-141c2e: #141C2E; --p-f6f2e9-f6f2e9: #F6F2E9; --p-f6f9ff-1a2333: #1A2333; --p-f7f8fa-101216: #101216; --p-fffcf5-23201a: #23201A; --p-ffffff-07080a: #07080A; --p-ffffff-101216: #101216; --p-ffffff-3fcb86: #3FCB86; --p-r27-91-227-5-r27-91-227-8: rgba(27,91,227,.8); --p-r27-91-227-55-r27-91-227-8: rgba(27,91,227,.8); --p-r27-91-227-6-r27-91-227-8: rgba(27,91,227,.8); --p-r70-55-30-35-r0-0-0-72: rgba(0,0,0,.72); --p-r70-55-30-4-r0-0-0-75: rgba(0,0,0,.75); } /* ── 05-hoja.css ── */ /* ── Hoja Facturar → Una (E2). Celular por defecto; escritorio en el @media de abajo. Medidas de los artboards. ── */ .hj { position: fixed; z-index: 41; left: 0; right: 0; bottom: 0; top: auto; max-height: calc(100dvh - 24px); display: flex; flex-direction: column; background: var(--surface); border-radius: 28px 28px 0 0; box-shadow: 0 -10px 34px -18px var(--sh-g); transform: translateY(105%); transition: transform .28s cubic-bezier(.2, .8, .2, 1); padding-bottom: env(safe-area-inset-bottom); } .hj.on { transform: none; } .hj[data-estado="form"] { top: max(24px, calc(100dvh - 748px)); } .hj[data-estado="rechazada"], .hj.hj-abierto[data-estado="form"] { top: max(24px, calc(100dvh - 774px)); } .hj button { font-family: inherit; } /* formulario */ .hj-form { display: none; flex: 1; min-height: 0; flex-direction: column; } .hj[data-estado="form"] .hj-form, .hj[data-estado="rechazada"] .hj-form { display: flex; } .hj-handle { padding: 9px 0 0; display: flex; justify-content: center; flex: none; } .hj-head { height: 48px; flex: none; display: flex; align-items: center; justify-content: space-between; padding: 0 20px; } .hj-titulo { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 600; font-size: 19px; color: var(--ink); } .hj-bajada { display: none; font: 500 13px 'Plus Jakarta Sans', sans-serif; color: var(--ink-3); } .hj-x { width: 30px; height: 30px; border-radius: 999px; background: var(--bg); border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; flex: none; } .hj-x svg { width: 15px; height: 15px; } .hj-error { display: none; flex: none; margin: 0 20px 14px; align-items: flex-start; gap: 10px; background: var(--bad-soft); border-radius: 16px; padding: 13px 14px; } .hj[data-estado="rechazada"] .hj-error { display: flex; } .hj-seg { flex: none; padding: 0 20px 12px; } .hj[data-estado="rechazada"] .hj-seg { display: none; } .hj-pista { flex: none; margin: 0 20px 10px; background: var(--accent-soft); color: var(--accent-ink); border-radius: 12px; padding: 10px 12px; font: 600 12.5px/1.4 'Plus Jakarta Sans', sans-serif; } .hj-cuerpo { flex: 1; display: flex; flex-direction: column; padding: 0 20px; min-height: 0; overflow-y: auto; } /* monto: el número y el cursor son del diseño; el input real queda encima, transparente */ .hj-monto { position: relative; flex: none; padding: 4px 0 14px; border-bottom: 2px solid var(--accent); display: flex; flex-direction: column; gap: 3px; cursor: text; } .hj-eti { font: 500 10px 'Geist Mono', monospace; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-4); } .hj-pesos { display: flex; align-items: baseline; gap: 4px; } .hj-signo { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 600; font-size: 26px; color: var(--ink-3); } .hj-num { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 700; font-size: 46px; line-height: 1.05; letter-spacing: -.03em; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; } .hj-num.vacio { color: var(--num-vacio); } /* E3 Alta 7: #C9C0B0 claro · #938B7B oscuro */ .hj-caret { width: 2px; height: 38px; background: var(--brand); border-radius: 1px; margin-left: 2px; align-self: center; animation: hj-blink 1.1s steps(1) infinite; } .hj-monto-in { position: absolute; inset: 0; width: 100%; opacity: 0; border: 0; padding: 0; background: none; font-size: 16px; cursor: text; } @keyframes hj-blink { 50% { opacity: 0; } } /* filas (celular) */ .hj-fila { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 10px; height: 54px; width: 100%; padding: 0; background: none; border: 0; border-bottom: 1px solid var(--line); cursor: pointer; text-align: left; } .hj-campo:last-child .hj-fila { border-bottom: 0; } .hj-k { font: 500 14px 'Plus Jakarta Sans', sans-serif; color: var(--ink-2); flex: none; } .hj-v { display: flex; align-items: center; gap: 7px; min-width: 0; } .hj-val { font: 600 13.5px 'Plus Jakarta Sans', sans-serif; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .hj-chip-sel { display: inline-flex; align-items: center; gap: 6px; background: var(--accent-soft); border: 1px solid var(--accent-line); border-radius: 999px; padding: 5px 11px; font: 600 12.5px 'Plus Jakarta Sans', sans-serif; color: var(--accent-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 210px; } .hj-eti-campo { display: none; } .hj-editor { display: none; flex-direction: column; gap: 7px; } /* un campo abierto en el celular (y el receptor en "rechazada"): layout del artboard rechazada */ .hj-campo.abierto { padding: 14px 0 12px; display: flex; flex-direction: column; gap: 7px; } .hj-campo.abierto .hj-fila { display: none; } .hj-campo.abierto .hj-eti-campo, .hj-campo.abierto .hj-editor { display: flex; } .hj.hj-abierto .hj-monto, .hj[data-estado="rechazada"] .hj-monto { padding: 0 0 14px; border-bottom: 1px solid var(--line); } .hj.hj-abierto .hj-signo, .hj[data-estado="rechazada"] .hj-signo { font-size: 24px; } .hj.hj-abierto .hj-num, .hj[data-estado="rechazada"] .hj-num { font-size: 40px; } .hj.hj-abierto .hj-caret, .hj[data-estado="rechazada"] .hj-caret { display: none; } .hj.hj-abierto .hj-fila, .hj[data-estado="rechazada"] .hj-fila { height: 52px; border-bottom: 0; border-top: 1px solid var(--line); } .hj.hj-abierto .hj-monto + .hj-campo .hj-fila, .hj[data-estado="rechazada"] .hj-monto + .hj-campo .hj-fila { border-top: 0; } .hj.hj-abierto .hj-campo.abierto + .hj-campo .hj-fila { border-top: 1px solid var(--line); } /* chips (A quién) — medidas del panel de escritorio, iguales en el celular */ .hj-chips { display: flex; flex-wrap: wrap; gap: 8px; } .hj-chips button { display: inline-flex; align-items: center; gap: 7px; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 8px 14px; font: 500 13.5px 'Plus Jakarta Sans', sans-serif; color: var(--ink-2); cursor: pointer; line-height: normal; } .hj-chips button.on { background: var(--accent-soft); border: 1.5px solid var(--accent); padding: 7.5px 13.5px; font-weight: 600; color: var(--accent-ink); } .hj-chips .hj-chip-otro { gap: 6px; border: 1px dashed var(--line-2); color: var(--ink-3); } .hj-chips .hj-chip-otro.on { border-style: solid; } .hj-doc { display: flex; flex-direction: column; gap: 7px; } .hj-doc[hidden] { display: none; } /* cajas (DNI/CUIT, Qué, Fecha) */ .hj-caja { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 54px; border: 1px solid var(--line); border-radius: 16px; padding: 0 15px; background: var(--surface); } .hj-caja:focus-within { border-color: var(--accent); } .hj-caja.err { border: 2px solid var(--bad); padding: 0 14px; } .hj-caja-in { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: none; padding: 0; font: 500 16px 'Plus Jakarta Sans', sans-serif; color: var(--ink); -webkit-appearance: none; appearance: none; } .hj-caja-in::placeholder { color: var(--ink-5); } .hj-caja-in.hj-mono { font: 500 16px 'Geist Mono', monospace; letter-spacing: .02em; } select.hj-caja-in { cursor: pointer; } .hj-caja-ico { display: none; } .hj-caja.err .hj-caja-ico { display: flex; } .hj-ayuda { font: 500 12px 'Plus Jakarta Sans', sans-serif; color: var(--ink-3); } .hj-ayuda:empty { display: none; } .hj-ayuda.ok { color: var(--ok-ink); } .hj-ayuda.err { font: 600 12.5px 'Plus Jakarta Sans', sans-serif; color: var(--bad-ink); } .hj-concepto { display: inline-flex; align-items: center; gap: 8px; border: 0; background: none; padding: 0; cursor: pointer; flex: none; font: 500 12px 'Geist Mono', monospace; color: var(--ink-3); } /* Fecha: selector propio (10-facturar.js). Cerrado, #f-fecha (botón) se ve igual que la caja de siempre; abierto, #f-fecha-pop es un panel con la estética de .bf-pop del buscador, ubicado contra la hoja (.hj es su bloque contenedor: no lo corta el scroll de .hj-cuerpo). .hj-fvelo toma el toque de afuera para cerrar sin que ese toque llegue a otro botón (Emitir, la X). */ .hj .hj-fsel { font-family: 'Plus Jakarta Sans', sans-serif; display: flex; align-items: center; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; } .hj-fsel-txt { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .hj-caja.abierta { border-color: var(--accent); } .hj-fvelo { position: fixed; inset: 0; z-index: 4; -webkit-tap-highlight-color: transparent; } .hj-fpop { position: absolute; z-index: 5; box-sizing: border-box; overflow-y: auto; overscroll-behavior: contain; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 1px 2px var(--sh-a), 0 20px 44px -22px var(--sh-c); padding: 8px; display: flex; flex-direction: column; animation: hj-fpop .14s ease-out; } .hj-fpop.arriba { animation-name: hj-fpop-arriba; } @keyframes hj-fpop { from { opacity: 0; transform: translateY(-4px); } } @keyframes hj-fpop-arriba { from { opacity: 0; transform: translateY(4px); } } .hj-fpop [role="listbox"] { display: flex; flex-direction: column; gap: 2px; outline: 0; } .hj-fop { flex: none; min-height: 44px; padding: 0 12px; border-radius: 10px; display: flex; align-items: center; justify-content: space-between; gap: 10px; font: 600 14px 'Plus Jakarta Sans', sans-serif; color: var(--ink); cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent; } .hj-fop.activa { background: var(--bg); } .hj-fop[aria-selected="true"] { background: var(--accent-soft); color: var(--accent-hover); } .hj-fop svg { flex: none; stroke: currentColor; } .hj-fpop-motivo { margin: 6px 4px 0; padding: 10px 8px 4px; border-top: 1px solid var(--line); font: 500 12px/1.45 'Plus Jakarta Sans', sans-serif; color: var(--ink-4); cursor: default; text-wrap: pretty; } /* pie + teclado */ .hj-pie { flex: none; padding: 10px 20px 12px; display: flex; flex-direction: column; gap: 7px; } .hj-cta { height: 56px; border: 0; border-radius: 18px; background: var(--brand); color: #FFFFFF; font: 700 17px 'Plus Jakarta Sans', sans-serif; cursor: pointer; box-shadow: 0 10px 22px -12px var(--sh-brand); } .hj-cta:disabled { opacity: .45; cursor: default; box-shadow: none; } .hj-nota { text-align: center; font: 500 11px 'Plus Jakarta Sans', sans-serif; color: var(--ink-4); } .hj[data-estado="rechazada"] .hj-pie, .hj.hj-abierto .hj-pie { padding: 12px 20px 26px; gap: 9px; } .hj[data-estado="rechazada"] .hj-cta { box-shadow: none; } .hj[data-estado="rechazada"] .hj-nota { font-size: 11.5px; } .hj-teclado { height: 214px; flex: none; background: var(--bg); border-top: 1px solid var(--line); display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(4, 1fr); gap: 1px; } .hj[data-estado="rechazada"] .hj-teclado, .hj.hj-abierto .hj-teclado { display: none; } .hj-teclado button { border: 0; background: none; display: flex; align-items: center; justify-content: center; font: 500 23px 'Geist Mono', monospace; color: var(--ink); cursor: pointer; padding: 0; -webkit-tap-highlight-color: transparent; } .hj-teclado button:active { background: var(--line); } /* estados: emitiendo · emitida · lenta (hoja de alto automático en el celular) */ .hj-est { display: none; flex-direction: column; padding: 9px 20px 24px; } .hj[data-estado="emitiendo"] .hj-est[data-est="emitiendo"] { display: flex; padding-bottom: 28px; } .hj[data-estado="emitida"] .hj-est[data-est="emitida"], .hj[data-estado="lenta"] .hj-est[data-est="lenta"], .hj[data-estado="bloqueada"] .hj-est[data-est="bloqueada"] { display: flex; } .hj-est-manija { display: flex; justify-content: center; } .hj-ok-cerrar { display: none; } .hj-ok-cab { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 26px 0 0; text-align: center; } .hj-ok-ico { width: 62px; height: 62px; border-radius: 999px; background: var(--ok-soft); display: flex; align-items: center; justify-content: center; animation: om-pop .5s cubic-bezier(.2, .8, .2, 1) both; } .hj-ok-tit { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 600; font-size: 21px; color: var(--ink); } .hj-ok-nro { font: 500 12.5px 'Geist Mono', monospace; letter-spacing: .04em; color: var(--ink-3); } .hj-ok-imp { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 700; font-size: 44px; letter-spacing: -.03em; color: var(--ink); font-variant-numeric: tabular-nums; } .hj-ok-quien { font: 500 13px 'Plus Jakarta Sans', sans-serif; color: var(--ink-3); } .hj-ok-btns { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; padding: 24px 0 0; } .hj-ok-btn { height: 64px; border: 1.5px solid var(--line); background: var(--card); border-radius: 16px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; cursor: pointer; font: 600 12px 'Plus Jakarta Sans', sans-serif; color: var(--ink); } .hj-ok-pie { display: flex; flex-direction: column; align-items: center; } .hj-otra { border: 0; background: none; padding: 18px 0 0; font: 600 14.5px 'Plus Jakarta Sans', sans-serif; color: var(--accent); cursor: pointer; } .hj-ok-queda { display: none; } .hj[data-estado="rechazada"] .hj-chips { display: none; } /* ── Escritorio: panel lateral de 520 px (E2 completo/emitida escritorio) ── */ @media (min-width: 900px) { .hj-scrim { background: var(--scrim-desk); } .hj, .hj[data-estado] { top: 0; right: 0; bottom: 0; left: auto; width: 520px; max-height: none; border-radius: 26px 0 0 26px; box-shadow: -24px 0 60px -30px var(--sh-panel); padding: 30px 36px 32px; transform: translateX(105%); } .hj.on { transform: none; } .hj-handle, .hj-teclado, .hj-est-manija { display: none !important; } .hj-head { height: auto; padding: 0; align-items: flex-start; gap: 12px; } .hj-titulo { font-size: 26px; letter-spacing: -.01em; } .hj-bajada { display: block; } .hj-x { width: 36px; height: 36px; } .hj-x svg { width: 16px; height: 16px; } .hj-error { margin: 20px 0 0; } .hj-seg { padding: 22px 0 0; width: 280px; } .hj-pista { margin: 16px 0 0; } .hj-cuerpo { padding: 0; } .hj-monto, .hj[data-estado="rechazada"] .hj-monto { padding: 26px 0 18px; gap: 4px; border-bottom: 2px solid var(--accent); } .hj-eti { font-size: 10.5px; } .hj-pesos { gap: 6px; } .hj-signo, .hj[data-estado="rechazada"] .hj-signo { font-size: 30px; } .hj-num, .hj[data-estado="rechazada"] .hj-num { font-size: 58px; line-height: 1.02; letter-spacing: -.035em; } .hj-caret, .hj[data-estado="rechazada"] .hj-caret { display: block; height: 46px; margin-left: 0; } /* en escritorio los tres campos están siempre abiertos, como en el artboard */ .hj-campo, .hj-campo.abierto { display: flex; flex-direction: column; gap: 9px; padding: 18px 0 0; } .hj-monto + .hj-campo { padding-top: 22px; } .hj-fila { display: none !important; } .hj-eti-campo, .hj-editor { display: flex; } .hj-editor { gap: 9px; } .hj-caja { height: 52px; padding: 0 16px; } .hj-caja.err { padding: 0 15px; } .hj-caja-in { font-size: 15px; } .hj-fop { min-height: 40px; } .hj-pie, .hj[data-estado="rechazada"] .hj-pie { padding: 18px 0 0; gap: 9px; } .hj-cta { height: 58px; font-size: 18px; box-shadow: 0 12px 26px -14px var(--sh-brand); } .hj-nota, .hj[data-estado="rechazada"] .hj-nota { font-size: 12px; } .hj-est { padding: 0; flex: 1; min-height: 0; } .hj[data-estado="emitiendo"] .hj-est[data-est="emitiendo"] { padding: 0; justify-content: center; } .hj[data-estado="lenta"] .hj-est[data-est="lenta"], .hj[data-estado="bloqueada"] .hj-est[data-est="bloqueada"] { justify-content: center; } .hj-ok-cerrar { display: flex; flex: none; align-items: center; justify-content: flex-end; } .hj-ok-cab { gap: 12px; padding: 44px 0 0; } .hj-ok-ico { width: 76px; height: 76px; } .hj-ok-ico svg { width: 38px; height: 38px; } .hj-ok-tit { font-size: 26px; } .hj-ok-nro { font-size: 13px; } .hj-ok-imp { font-size: 62px; line-height: 1.02; letter-spacing: -.035em; } .hj-ok-quien { font-size: 14px; } .hj-ok-btns { gap: 10px; padding: 34px 0 0; } .hj-ok-btn { height: 72px; border-radius: 18px; gap: 6px; font-size: 13px; } .hj-ok-btn svg { width: 22px; height: 22px; } .hj-ok-pie { flex: 1; justify-content: flex-end; gap: 12px; } .hj-otra { width: 100%; height: 58px; border: 1.5px solid var(--accent); border-radius: 18px; background: var(--surface); color: var(--accent); font: 700 17px 'Plus Jakarta Sans', sans-serif; padding: 0; } .hj-ok-queda { display: block; font: 500 12px 'Plus Jakarta Sans', sans-serif; color: var(--ink-4); } .hj-ok-queda:empty { display: none; } } /* ── 08-busqueda.css ── */ /* Buscador en vivo + fechas (Facturas y Cobros): lib/Busqueda.php arma el marcado, 08-busqueda.js lo maneja. El campo es el de Facturas E5/E10 con sus estilos inline (no se mueve un píxel); acá solo lo que el inline no puede. Colores SOLO con tokens (00-base / 01-pares): así el oscuro sale solo. */ /* ── Campo ─────────────────────────────────────────────────────────────── */ form[data-bf-form]:focus-within { border-color: var(--accent) !important; box-shadow: 0 0 0 1px var(--accent); } /* el borde de 2 px de E9 "Con foco" sin correr nada */ .bf-borrar { width: 28px; height: 28px; flex: none; margin-right: -6px; border: 0; border-radius: 999px; background: none; padding: 0; display: flex; align-items: center; justify-content: center; color: var(--ink-4); cursor: pointer; } .bf-borrar svg { stroke: var(--ink-4); } .bf-borrar:hover { background: var(--bg); } /* iPhone: con menos de 16 px enfoca con zoom. El placeholder queda del tamaño del diseño. */ @supports (-webkit-touch-callout: none) { input[data-bf-q] { font-size: 16px !important; } input[data-bf-q]::placeholder { font-size: 14px; } .bf-campo-desk input[data-bf-q]::placeholder { font-size: 13.5px; } } /* ── Fechas en escritorio: botón + popover ──────────────────────────────── */ .bf-fechas { position: relative; flex: none; } .bf-fechas-btn { height: 42px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); display: flex; align-items: center; gap: 8px; padding: 0 14px; font: 600 13px var(--f-ui); color: var(--ink); cursor: pointer; list-style: none; white-space: nowrap; user-select: none; } .bf-fechas-btn::-webkit-details-marker { display: none; } .bf-fechas-btn::marker { content: ''; } .bf-fechas-btn > svg { stroke: var(--ink); flex: none; } .bf-fechas-btn .bf-chev { stroke: var(--ink-4); transition: transform .15s; } .bf-fechas[open] .bf-chev { transform: rotate(180deg); } .bf-rotulo { max-width: 170px; overflow: hidden; text-overflow: ellipsis; } .bf-fechas-btn.bf-on { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent-hover); } .bf-fechas-btn.bf-on > svg { stroke: var(--accent-hover); } .bf-fechas:not([open]) .bf-pop { display: none; } /* cerrado no existe (Chrome deja medible el contenido de un details cerrado) */ .bf-pop { position: absolute; right: 0; top: calc(100% + 8px); z-index: 25; width: 340px; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 1px 2px var(--sh-a), 0 18px 40px -26px var(--sh-c); padding: 8px; display: flex; flex-direction: column; gap: 2px; } .bf-pop .bf-atajo { height: 40px; width: 100%; padding: 0 12px; border-radius: 10px; border: 0; background: none; display: flex; align-items: center; justify-content: space-between; gap: 10px; font: 600 13.5px var(--f-ui); color: var(--ink); cursor: pointer; text-align: left; } .bf-pista { font: 500 11.5px var(--f-mono); color: var(--ink-4); font-variant-numeric: tabular-nums; white-space: nowrap; } .bf-pop .bf-atajo:hover { background: var(--bg); } .bf-pop .bf-atajo[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent-hover); } .bf-pop .bf-atajo[aria-pressed="true"] .bf-pista { color: var(--accent-hover); } .bf-sep { border: 0; height: 1px; background: var(--line); margin: 6px 4px; } .bf-ayuda { margin: 2px 6px 4px; } /* Cajas DESDE / HASTA (lenguaje de E4 Varias, E5 Automático y E10 simulación). El calendario nativo va encima, transparente. */ .bf-cajas { display: flex; gap: 10px; padding: 6px 4px 4px; } .bf-panel .bf-cajas { padding: 0; } .bf-caja { position: relative; flex: 1; min-width: 0; height: 58px; border-radius: 16px; background: var(--bg); border: 1px solid var(--line); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; cursor: pointer; } .bf-valor { font: 700 16px var(--f-ui); color: var(--ink); font-variant-numeric: tabular-nums; } .bf-valor.bf-vacio { color: var(--ink-4); } .bf-caja:focus-within { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); background: var(--card); } .bf-caja input[type="date"] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; font-size: 16px; margin: 0; padding: 0; border: 0; -webkit-appearance: none; appearance: none; cursor: pointer; background: none; color: transparent; } .bf-caja input[type="date"]::-webkit-calendar-picker-indicator { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; } /* ── Fechas en el celular: ícono en la cabecera + panel en la página ────── */ .bf-cal { width: 30px; height: 34px; border: 0; background: none; padding: 0; display: flex; align-items: center; justify-content: center; position: relative; cursor: pointer; } .bf-cal svg { stroke: var(--ink-2); } .bf-cal.bf-on svg { stroke: var(--accent); } .bf-punto { position: absolute; top: 5px; right: 3px; width: 7px; height: 7px; border-radius: 999px; background: var(--accent); } .bf-panel { background: var(--card); border: 1px solid var(--line); border-radius: 20px; padding: 14px 15px; display: flex; flex-direction: column; gap: 12px; box-shadow: 0 1px 2px var(--sh-a), 0 14px 30px -22px var(--sh-b); } .bf-panel-cab { display: flex; align-items: center; justify-content: space-between; } .bf-cerrar { width: 26px; height: 26px; border-radius: 999px; background: var(--bg); border: 1px solid var(--line); padding: 0; display: flex; align-items: center; justify-content: center; cursor: pointer; } .bf-cerrar svg { stroke: var(--ink-3); } .bf-atajos { display: flex; flex-wrap: wrap; gap: 7px; } .bf-atajos .bf-atajo { padding: 7px 13px; border-radius: 999px; font: 500 12.5px var(--f-ui); color: var(--ink-2); background: var(--bg); border: 1px solid var(--line); cursor: pointer; } /* activo = chip de E5 (fondo ink, texto page: el chip activo del artboard E9 oscuro no se ve) */ .bf-atajos .bf-atajo[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--page); font-weight: 600; } /* ── Resultados ────────────────────────────────────────────────────────── */ .bf-cargando, .bf-cargando[style*="contents"] > * { opacity: .5; transition: opacity .12s .15s; } /* < 150 ms no parpadea */ .bf-link { border: 0; background: none; padding: 0; font: 600 12px var(--f-ui); color: var(--accent); cursor: pointer; } .bf-link:hover { color: var(--accent-hover); } .bf-salidas { display: inline-flex; gap: 16px; } .bf-vacio-cel { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 40px 0; text-align: center; } .bf-vacio-txt { font: 500 14px/1.5 var(--f-ui); color: var(--ink-3); } .bf-vacio-cel .bf-link, .bf-vacio-desk .bf-link { font-size: 13px; } .bf-vacio-desk { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; } .bf-tope { margin: 4px 0 6px; text-align: center; } .bf-tope .bf-link { margin-left: 4px; } .bf-error { font: 500 13px var(--f-ui); color: var(--bad-ink); display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; } .bf-error .bf-link, .bf-error a { font-size: 13px; } /* Tarjeta del período (celular): lenguaje de la tarjeta del mes de Cobros E5 */ .bf-resumen { background: var(--card); border: 1px solid var(--line); border-radius: 20px; padding: 14px 15px; display: flex; flex-direction: column; gap: 10px; box-shadow: 0 1px 2px var(--sh-a), 0 14px 30px -22px var(--sh-b); flex: none; } .bf-res-cab { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 16px; } .bf-res-cols { display: flex; gap: 22px; } .bf-res-col { display: flex; flex-direction: column; gap: 3px; } .bf-res-k { font: 500 11.5px var(--f-ui); color: var(--ink-3); } .bf-res-v { font: 700 15px var(--f-ui); color: var(--ink); font-variant-numeric: tabular-nums; } .bf-resumen .ayuda { margin: 0; } /* Total del período (escritorio): al final de la fila de chips */ .bf-chips { flex-wrap: wrap; row-gap: 10px !important; } .bf-total { margin-left: auto; display: flex; align-items: baseline; gap: 10px; align-self: center; white-space: nowrap; } .bf-total-txt { font: 500 13px var(--f-ui); color: var(--ink-3); } .bf-total-v { font: 700 15px var(--f-ui); color: var(--ink); font-variant-numeric: tabular-nums; } /* Menú ⋮ del celular: el período que exporta, debajo de "Exportar libro de ventas (CSV)" */ .bf-exp-periodo { display: block; margin-top: 2px; } /* ── Escritorio angosto: que la cabecera entre sin scroll horizontal ────── */ @media (min-width: 900px) and (max-width: 1099px) { .bf-rotulo, .bf-chev, .bf-accion-txt { display: none !important; } .bf-fechas-btn, .bf-accion { width: 42px; padding: 0 !important; justify-content: center; } .bf-campo-desk { width: auto !important; flex: 0 1 200px; min-width: 140px; } } /* Facturas 1100–1279: Fechas + buscador de 320 + avatar no entran con "Exportar libro de ventas" escrito: queda el ícono (title y aria-label lo nombran). Así la cabecera no parte el eyebrow en dos líneas. */ @media (min-width: 1100px) and (max-width: 1279px) { body[data-page="facturas"] .bf-accion-txt { display: none !important; } body[data-page="facturas"] .bf-accion { width: 42px; padding: 0 !important; justify-content: center; } } /* Cobros: la cabecera se ajusta en 70-cobros.css (su eyebrow es largo). */ /* ── 09-google.css ── */ /* Entrar con Google (Entrar y el primer paso del alta; app/views/google_boton.php). Solo aparece si Google está prendido. Pautas de marca de Google para botones propios: texto "Continuar con Google" y el logo "G" oficial, sin alterar, SIEMPRE sobre blanco. Por eso el logo va en su círculo blanco (.ggl-logo): en claro se funde con el botón; en oscuro es la marca sobre la tarjeta oscura de GARCA. El resto del botón habla el idioma de GARCA (tarjeta, borde cálido, sombra de tarjeta, 56 px, radio 18, 600 16 px) para que no parezca un pegote de otro sitio; toma los tokens, así que el tema oscuro sale solo. */ .ggl-btn { position: relative; width: 100%; height: 56px; box-sizing: border-box; flex: none; display: flex; align-items: center; justify-content: center; gap: 12px; padding: 0 20px; border: 1px solid var(--line-2); border-radius: 18px; background: var(--card); color: var(--ink); font: 600 16px var(--f-ui); letter-spacing: -.005em; text-decoration: none; cursor: pointer; box-shadow: 0 1px 2px var(--sh-card-a), 0 10px 22px -16px var(--sh-card-b); transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .1s ease; -webkit-tap-highlight-color: transparent; } .ggl-btn:hover { background: var(--bg-2); border-color: var(--line-5); box-shadow: 0 1px 2px var(--sh-card-a), 0 14px 26px -16px var(--sh-card-b); } .ggl-btn:active { transform: scale(.99); } .ggl-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .ggl-logo { width: 30px; height: 30px; flex: none; display: grid; place-items: center; border-radius: 50%; background: #FFFFFF; margin-left: -6px; } .ggl-logo .ggl-g { width: 18px; height: 18px; display: block; } .ggl-sep { display: flex; align-items: center; gap: 14px; margin: 2px 0; font: 500 13px var(--f-ui); color: var(--ink-4); } .ggl-sep::before, .ggl-sep::after { content: ""; flex: 1; height: 1px; background: var(--line); } /* ── 10-facturas.css ── */ /* Facturas: lista EXACTA al diseño (estilos inline en la vista); acá solo lo que el inline no puede: hover, menú, placeholder. */ .fx-q::placeholder { color: var(--ink-4); } .fx-tr:hover { background: var(--bg); } .fx-menu { position: relative; } .fx-menu summary::-webkit-details-marker { display: none; } .fx-menu-pop { position: absolute; right: 0; top: 30px; z-index: 20; min-width: 230px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 1px 2px var(--sh-a), 0 18px 40px -26px var(--sh-c); padding: 6px; } .fx-menu-pop a { display: block; padding: 10px 12px; border-radius: 10px; font: 600 13.5px var(--f-ui); color: var(--ink); } .fx-menu-pop a:hover { background: var(--bg); } /* Detalle */ .fx-det-head { display: flex; align-items: center; gap: 10px; } .fx-det-head .x { width: 32px; height: 32px; flex: none; } .fx-det-head .x svg { width: 16px; height: 16px; } .fx-acciones { padding: 0 15px; gap: 0; } .fx-acc { display: flex; align-items: center; gap: 10px; min-height: 52px; width: 100%; border: 0; background: none; padding: 0; cursor: pointer; font: 600 14px var(--f-ui); color: var(--ink); text-align: left; } .fx-acciones .fx-acc + .fx-acc { border-top: 1px solid var(--line); } .fx-acc > span { flex: 1; } .fx-acc svg { width: 18px; height: 18px; color: var(--ink-4); flex: none; } .fx-acc.bad, .fx-acc.bad svg:first-child { color: var(--bad-ink); } a.fx-acc.card { padding: 0 15px; } /* Tarjeta de comprobante (detalle y vista pública) */ .cp { padding: 18px; gap: 11px; } .cp-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; } .cp-emisor { display: flex; flex-direction: column; gap: 2px; font: 500 10.5px var(--f-ui); color: var(--ink-4); } .cp-emisor b { font: 700 13px var(--f-ui); color: var(--ink); } .cp-emisor .cp-nombre { font: 700 19px var(--f-num); letter-spacing: -.01em; } .cp-emisor .mono { font-size: 10.5px; color: var(--ink-3); } .cp-letra { width: 44px; height: 52px; border: 1.5px solid var(--ink); border-radius: 8px; display: flex; flex-direction: column; align-items: center; justify-content: center; flex: none; } .cp-letra b { font: 700 26px/1 var(--f-num); } .cp-letra small { font: 500 7px var(--f-mono); color: var(--ink-3); } .cp-linea { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; border-top: 1px solid var(--line); padding-top: 10px; font-size: 11px; color: var(--ink-3); } .cp-bloque { display: flex; flex-direction: column; gap: 3px; } .cp-bloque b { font: 600 13.5px var(--f-ui); color: var(--ink); } .cp-total { align-items: flex-end; font-size: 12.5px; } .cp-total > span:first-child { display: flex; flex-direction: column; gap: 2px; color: var(--ink-2); } .cp-total b { font: 700 26px var(--f-num); letter-spacing: -.02em; color: var(--ink); } .cp-tot { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; } .cp-tot b { font-size: 34px; line-height: 1.05; } .cp-qr { display: flex; align-items: center; gap: 12px; border-top: 1px solid var(--line); padding-top: 10px; } .cp-qr > .mono { display: flex; flex-direction: column; gap: 2px; font-size: 10.5px; color: var(--ink-3); } .cp-qr-img { width: 64px; height: 64px; flex: none; background: #fff; border-radius: 6px; padding: 3px; } .cp-qr-img.grande { width: 84px; height: 84px; } .cp-qr-img svg { width: 100%; height: 100%; } .fx-nc { gap: 10px; } /* Vista pública */ .pub { max-width: 440px; margin: 0 auto; min-height: 100dvh; display: flex; flex-direction: column; gap: 12px; padding: 10px 18px 26px; } .pub-top { height: 42px; display: flex; align-items: center; gap: 9px; } .pub-top .logo { width: 22px; height: 22px; border-radius: 7px; } .pub-top .mono { flex: 1; font-size: 11.5px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pub-card { border-radius: 24px; padding: 20px 18px; gap: 13px; } .pub-ok { display: flex; align-items: center; gap: 10px; background: var(--ok-soft); color: var(--ok-ink); border-radius: 16px; padding: 12px 14px; font: 600 12.5px var(--f-ui); } .pub-ok svg { width: 18px; height: 18px; flex: none; } .pub-acc { display: flex; flex-direction: column; gap: 10px; margin-top: auto; } .pub-btn { display: flex; align-items: center; justify-content: center; gap: 9px; color: var(--on-brand); } .pub-btn:hover { color: var(--on-brand); } .pub-btn svg, .pub-btn2 svg { width: 20px; height: 20px; } .pub-btn2 { height: 52px; border-radius: 18px; border: 1.5px solid var(--line); color: var(--ink); font-size: 15.5px; } @media (min-width: 900px) { .fx .fx-buscar { max-width: 520px; } .fx-th { display: grid; grid-template-columns: 34px minmax(0, 1.6fr) 110px 170px 120px 110px 120px; gap: 14px; padding: 0 15px 4px; font: 600 10.5px var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-4); } .fx-th .r { text-align: right; } .fx-tabla { gap: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); padding: 12px 0 4px; box-shadow: var(--sh-card); } .fx-fila { display: grid; grid-template-columns: 34px minmax(0, 1.6fr) 110px 170px 120px 110px 120px; gap: 14px; border: 0; border-top: 1px solid var(--line); border-radius: 0; padding: 10px 15px; background: none; font-size: 13px; } .fx-fila:hover { background: var(--surface-2); } .fx-fila .mono { font-size: 12px; color: var(--ink-2); } .fx-imp b { font-size: 14px; } } .fx-qr svg { width: 100%; height: 100%; display: block; } /* Detalle de factura en escritorio: con comprobante emitido manda el bloque E10 "Factura corta" (.fx-e10). Lo de abajo es solo para las que todavía no tienen CAE (en fila o rechazadas): la tarjeta del celular a la izquierda y las acciones a la derecha. */ @media (min-width: 900px) { .fx-det > .solo-cel { display: none !important; } .fx-det-cuerpo:not(.solo-cel) { display: grid !important; grid-template-columns: minmax(0, 1fr) 360px; column-gap: 36px; row-gap: 14px; align-items: start; padding: 32px 44px 36px !important; } .fx-det-cuerpo:not(.solo-cel) > :first-child { grid-column: 1; grid-row: 1 / span 8; max-width: 660px; width: 100%; box-sizing: border-box; } .fx-det-cuerpo:not(.solo-cel) > :not(:first-child) { grid-column: 2; } .fx-e10 { min-height: calc(100dvh - 88px); box-sizing: border-box; } } /* Escritorio angosto (900–1279): el artboard es de 1440; sin la columna "Origen" y más angostas, para que la tabla entre */ @media (min-width: 900px) and (max-width: 1279px) { .fx-cab, .fx-tr { grid-template-columns: 76px minmax(0, 1fr) 120px 150px 120px !important; gap: 14px !important; } .fx-cab > :nth-child(5), .fx-tr > :nth-child(5) { display: none !important; } } /* ── 15-inicio.css ── */ /* Inicio (opción 1b con la paleta de la app). El medidor anima el arco igual que el diseño (om-dash) y la píldora del semáforo va llena en claro y suave en oscuro, como en 1b, con los colores de cada estado. */ @keyframes om-dash { from { stroke-dashoffset: var(--len); } to { stroke-dashoffset: 0; } } .in-sem { background: var(--in-sem-bg); color: var(--in-sem-fg); } .in-sem[data-sem="bien"] { --in-sem-bg: var(--ok); --in-sem-fg: #FFFFFF; } .in-sem[data-sem="atencion"] { --in-sem-bg: var(--warn); --in-sem-fg: #FFFFFF; } .in-sem[data-sem="alto"] { --in-sem-bg: var(--hot); --in-sem-fg: #FFFFFF; } .in-sem[data-sem="pasado"] { --in-sem-bg: var(--bad); --in-sem-fg: #FFFFFF; } .in-sem[data-sem="sin_datos"] { --in-sem-bg: var(--track); --in-sem-fg: var(--ink-3); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .in-sem[data-sem="bien"] { --in-sem-bg: var(--ok-soft); --in-sem-fg: var(--ok); } :root:not([data-theme="light"]) .in-sem[data-sem="atencion"] { --in-sem-bg: var(--warn-soft); --in-sem-fg: var(--warn); } :root:not([data-theme="light"]) .in-sem[data-sem="alto"] { --in-sem-bg: var(--hot-soft); --in-sem-fg: var(--hot); } :root:not([data-theme="light"]) .in-sem[data-sem="pasado"] { --in-sem-bg: var(--bad-soft); --in-sem-fg: var(--bad); } } :root[data-theme="dark"] .in-sem[data-sem="bien"] { --in-sem-bg: var(--ok-soft); --in-sem-fg: var(--ok); } :root[data-theme="dark"] .in-sem[data-sem="atencion"] { --in-sem-bg: var(--warn-soft); --in-sem-fg: var(--warn); } :root[data-theme="dark"] .in-sem[data-sem="alto"] { --in-sem-bg: var(--hot-soft); --in-sem-fg: var(--hot); } :root[data-theme="dark"] .in-sem[data-sem="pasado"] { --in-sem-bg: var(--bad-soft); --in-sem-fg: var(--bad); } /* el gráfico llena el alto de la pantalla, como en el artboard de 1440×1024 */ @media (min-width: 900px) { .in-escritorio { min-height: calc(100dvh - 84px); box-sizing: border-box; } } /* ── 20-alta.css ── */ /* ── Alta (E3) ───────────────────────────────────────────────────────────── Las vistas llevan los estilos inline portados de los artboards (tools/portar2.py). Acá solo lo que cambia con el estado (foco, error, elegido, pasos) con los mismos valores del artboard, y las animaciones. */ @keyframes om-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } } /* Campos: caja de 54 px; con foco, borde 2 px azul (artboards 1, 2 y 3b); con error, borde 2 px rojo (3c). */ .al-in { flex: 1; min-width: 0; width: 100%; height: 100%; border: 0; outline: 0; background: transparent; padding: 0; margin: 0; } .al-in::placeholder { color: var(--ink-4); opacity: 1; } .al-pass::placeholder { font: 500 15px 'Plus Jakarta Sans', sans-serif; letter-spacing: 0; } .al-caja:focus-within { border: 2px solid var(--accent) !important; } .al-caja.mal { border: 2px solid var(--bad) !important; } .al-oculto { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; margin: 0; } /* Casillas (la autorización del artboard 2, y desde el 19/09 las tres del alta y la de "Traerlo de ARCA": al_casilla en _partes.php): tildada = cuadrado azul con el check; sin tildar al intentar seguir = borde rojo de 2 px, como un campo con error. */ .al-tilde { background: var(--card); box-shadow: inset 0 0 0 1.5px var(--line-2); } .al-tilde svg { opacity: 0; } .al-chk:checked + .al-tilde { background: var(--brand); box-shadow: none; } .al-chk:checked + .al-tilde svg { opacity: 1; } .al-chk:focus-visible + .al-tilde { outline: 2px solid var(--accent); outline-offset: 2px; } .al-casilla.mal .al-chk:not(:checked) + .al-tilde { box-shadow: inset 0 0 0 2px var(--bad); } /* "Crear cuenta" apagado hasta tildar las tres casillas (aria-disabled: se puede tocar y dice cuál falta). Mismo apagado que .btn-cta. */ .al-cta[aria-disabled="true"] { opacity: .55; box-shadow: none !important; cursor: default; } /* Resumen de las cláusulas más importantes (al_tyc): el texto publicado (ol.lg-ol de Legal::html) en un recuadro que scrollea, con la letra de la caja del artboard 2. Las marcas numeradas en mono azul vienen de .lg-ol (55-legal.css). */ .al-tyc-txt { max-height: 188px; overflow-y: auto; overscroll-behavior: contain; margin: 0 -4px; padding: 0 4px 16px; font: 500 12.5px/1.5 'Plus Jakarta Sans', sans-serif; color: var(--ink-2); -webkit-mask-image: linear-gradient(#000 calc(100% - 20px), transparent); mask-image: linear-gradient(#000 calc(100% - 20px), transparent); } .al-tyc-txt:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; } .al-tyc-txt .lg-ol { margin: 0; padding-left: 24px; } .al-tyc-txt .lg-ol > li::marker { font-size: 11px; } .al-tyc-txt .lg-ol > li + li { margin-top: 8px; } .al-tyc-txt strong { font-weight: 700; color: var(--ink); } .al-tyc-txt a { color: var(--accent); } /* Actos del robot en Conectar ARCA (artboard 2, recuadro del candado): lista numerada con la marca en gris. */ .al-actos-l > li::marker { font: 600 11.5px 'Geist Mono', monospace; color: var(--ink-4); } /* Pie con los textos legales, fuera de la pantalla del artboard (se ve al bajar). */ .al-pie-legal { max-width: 390px; margin: 0 auto; padding: 14px 20px calc(18px + env(safe-area-inset-bottom)); } /* Tira "Conectando tu ARCA" (artboard 4). */ .al-tira-ic { border: 2px solid var(--accent); animation: om-pulse 1.4s ease-in-out infinite; } .al-tira-pt { background: var(--brand); } .al-tira[data-st="bad"] .al-tira-ic { border-color: var(--bad); animation: none; } .al-tira[data-st="bad"] .al-tira-pt { background: var(--bad); } .al-tira[data-st="bad"] .al-tira-barra { display: none !important; } /* Pasos de la conexión (artboard 3): hecho · ahora · pendiente. */ .al-paso .i-hecho, .al-paso .i-ahora, .al-paso .i-pend { display: none; } .al-paso.hecho .i-hecho, .al-paso.ahora .i-ahora { display: flex; } .al-paso.pend .i-pend { display: block; } .al-paso-t { flex: 1; font: 500 14px 'Plus Jakarta Sans', sans-serif; color: var(--ink-4); } .al-paso.hecho .al-paso-t { color: var(--ink-3); } .al-paso.ahora .al-paso-t { font-weight: 600; color: var(--ink); } .al-paso-e { font: 500 11px 'Geist Mono', monospace; color: var(--ink-4); } .al-paso.ahora .al-paso-e { color: var(--accent); } .al-paso.pend .al-paso-e { display: none; } /* Token (artboard 3a): 6 casillas; la que sigue, con borde azul y el cursor. El input real va encima, invisible. */ .al-otp-in { position: absolute; left: 0; right: 0; bottom: 0; height: 60px; width: 100%; opacity: 0; border: 0; padding: 0; font-size: 16px; z-index: 1; } .al-otp-c { border: 1px solid var(--line); background: var(--bg); } .al-otp-c.cursor { border: 2px solid var(--accent); background: var(--card); } /* Otro lado (artboard 5): opción elegida con borde azul de 1,5 px y sombra. */ .al-op { display: flex; align-items: center; gap: 13px; text-align: left; height: 76px; width: 100%; margin: 0; background: var(--card); border: 1px solid var(--line); border-radius: 20px; padding: 0 16px; cursor: pointer; } .al-op.on { border: 1.5px solid var(--accent); box-shadow: 0 1px 2px rgba(70,55,30,.04), 0 14px 30px -22px rgba(70,55,30,.14); } .al-op-ic { width: 40px; height: 40px; border-radius: 13px; background: var(--bg); display: flex; align-items: center; justify-content: center; flex: none; color: var(--ink-2); } .al-op.on .al-op-ic { background: var(--accent-soft); color: var(--accent); } .al-op-ic svg { stroke: currentColor; } /* Categoría: corregir (letras A–K y actividad). */ .al-chip { height: 44px; margin: 0; padding: 0; border: 1.5px solid var(--line); border-radius: 12px; background: var(--bg); color: var(--ink-2); font: 600 15px 'Plus Jakarta Sans', sans-serif; cursor: pointer; } .al-chip.on { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); } @media (prefers-reduced-motion: reduce) { .al-tira-ic, .al-paso .i-ahora { animation: none !important; } } /* ── ESCRITORIO (≥900 px) · artboards E10 "Alta crear cuenta escritorio" y "Alta conectando ARCA escritorio" ────────────── Barra de 80 px (_partes.php: al_dtop) y una grilla minmax(0,1fr) + 560 px, gap 60, padding 0/48/48, centrada en alto. Izquierda: el título (al_intro, solo-desk). Derecha: el MISMO formulario del celular, que acá se vuelve la tarjeta de 560 px (surface, borde, radio 28, padding 36, gap 20): sus envoltorios pasan a display:contents para que cada campo sea hijo directo. Conectando trae su propia copia de escritorio (.al-dcon); las hojas 3a–3d van como la tarjeta de la derecha. La sombra usa el par --p-r70-55-30-35-r0-0-0-72 con su valor claro de respaldo: en 01-pares.css el :root claro no se aplica (los comentarios de arriba dejan texto suelto que se come el selector), así que en claro la variable llega vacía. */ .al-paso-d .al-paso-t { font-size: 15.5px; } .al-paso-d .al-paso-e { font-size: 12px; } .al-dtira-pt { background: var(--brand); } .al-dtira[data-st="curso"] .al-dtira-pt { animation: om-pulse 1.4s ease-in-out infinite; } .al-dtira[data-st="bad"] .al-dtira-pt { background: var(--bad); } @media (min-width: 900px) { #al { max-width: none !important; background: transparent !important; } /* fondo: el del body (--page), como el artboard */ #al-top, #al-tira, .al-tit, #al-entrar { display: none !important; } .al-grid { display: grid !important; grid-template-columns: minmax(0, 1fr) 560px; align-items: center; gap: 60px; padding: 0 48px 48px; } .al-grid > .al-tarjeta { flex: none !important; width: 560px; background: var(--surface); border: 1px solid var(--line); border-radius: 28px; padding: 36px; display: flex !important; flex-direction: column; gap: 20px; box-shadow: 0 1px 2px var(--sh-a), 0 24px 50px -30px var(--p-r70-55-30-35-r0-0-0-72, rgba(70,55,30,.35)); } .al-tarjeta .al-cuerpo, .al-tarjeta .al-campos, .al-tarjeta .al-pie { display: contents !important; } /* Campos (E10 crear cuenta): caja de 58 px con fondo --bg; con foco, fondo --card y borde 2 px azul. Rótulo 10,5 px, gap 8. */ #al .al-campo { gap: 8px !important; } #al .al-rot { font-size: 10.5px !important; } #al .al-caja, #al .al-caja-ro { height: 58px !important; padding: 0 18px !important; } #al .al-caja { background: var(--bg) !important; } #al .al-caja:focus-within { background: var(--card) !important; } #al .al-in, #al .al-in-txt { font-size: 16px !important; } #al .al-pass { font-size: 18px !important; } #al .al-pass::placeholder { color: transparent; } #al .al-ver { font-size: 13px !important; } #al .al-ayuda { font-size: 12.5px !important; } #al .al-cta { height: 58px !important; box-shadow: 0 12px 26px -14px var(--sh-fab) !important; } #al .al-nota { font-size: 12px !important; } #al .al-cta[aria-disabled="true"] { box-shadow: none !important; } .al-tyc-d { max-width: 460px; } /* paso 1: el resumen va en la columna izquierda, debajo de los puntos */ #al .al-tyc-d .al-tyc-txt { max-height: 232px; font-size: 13px; } .al-pie-legal { max-width: none; padding: 0 48px 28px; } #al .al-resumen { margin: 0 !important; } /* Conectando: las hojas 3a–3d (token, cambiar clave, no coincide, ARCA no responde) como la tarjeta de la derecha, con el título de la pantalla a la izquierda (mismas medidas que .al-dcon). */ #con-hoja:not([hidden]) { display: grid !important; grid-template-columns: minmax(0, 1fr) 560px; align-items: center; gap: 60px; padding: 0 48px 48px; } #con-hoja .al-hoja-fondo { grid-column: 1; grid-row: 1; flex: none !important; overflow: visible !important; } #con-hoja .al-hoja-tit { padding: 0 0 0 56px !important; gap: 24px !important; } #con-hoja .al-hoja-tit .al-h1 { font-size: 48px !important; line-height: 1.06 !important; letter-spacing: -.035em !important; text-wrap: pretty; } #hoja-paso { font: 500 17px/1.5 'Plus Jakarta Sans', sans-serif !important; } .al-velo, .al-agarre { display: none !important; } #con-hoja .al-estado { grid-column: 2; grid-row: 1; width: 560px; border: 1px solid var(--line); border-radius: 28px !important; padding: 36px !important; box-shadow: 0 1px 2px var(--sh-a), 0 24px 50px -30px var(--p-r70-55-30-35-r0-0-0-72, rgba(70,55,30,.35)) !important; } #con-hoja .al-estado > .al-agarre + * { padding-top: 0 !important; } } /* Escritorio angosto (900–1279 px): el artboard es de 1440 y ahí no cambia nada. Más angosto, la columna del título quedaba en 130–500 px (títulos de 54 px en tres renglones, botones de Conectando partidos): tarjeta de 480, márgenes de 32 y títulos de 40–42 px. Los botones de Conectando bajan de renglón en vez de partirse. */ .al-dbot { flex-wrap: wrap; } .al-dbot > a { white-space: nowrap; } @media (min-width: 900px) and (max-width: 1279px) { .al-dtop { padding: 0 32px !important; } .al-grid, .al-dcon, #con-hoja:not([hidden]) { grid-template-columns: minmax(0, 1fr) 480px !important; gap: 40px !important; padding: 0 32px 40px !important; } .al-grid > .al-tarjeta, #con-pasos-d, #con-hoja .al-estado { width: 480px !important; } .al-intro, .al-dizq, #con-hoja .al-hoja-tit { padding-left: 0 !important; } .al-intro-t { font-size: 42px !important; } .al-dtit, #con-hoja .al-hoja-tit .al-h1 { font-size: 40px !important; } } /* ── 40-ajustes.css ── */ /* ── Ajustes (artboards E7) ────────────────────────────────────────────── Las vistas llevan los estilos inline del artboard (portados con tools/portar.py). Acá solo va lo que el inline no puede: el contenedor, los estados que cambia el JS (con los MISMOS valores del artboard), hover y los banners. */ /* Contenedor: columna del celular; en escritorio, centrada hasta 560 px. Abajo deja lugar a la barra del celular. */ .aj-cab { width: 100%; max-width: 560px; margin: 0 auto; } .aj-wrap { flex: 1; width: 100%; max-width: 560px; margin: 0 auto; display: flex; flex-direction: column; padding-bottom: env(safe-area-inset-bottom); } /* Celular: los artboards E7 no tienen la barra de abajo; cada pantalla tiene su "volver" arriba */ @media (max-width: 899px) { body[data-page="ajustes"] .tabbar { display: none !important; } } .aj-wrap [hidden] { display: none !important; } .aj-wrap button:disabled { opacity: .55; cursor: default; box-shadow: none !important; } .aj-ocupado { opacity: .6; pointer-events: none; } @media (hover: hover) { .aj-fila:hover .aj-t { color: var(--accent) !important; } .aj-wrap [data-ed]:hover span:first-child { color: var(--ink) !important; } .aj-peligro:hover { border-color: var(--bad) !important; } } /* Chips Servicios / Productos (artboard "categoría corregida") */ .aj-chip { display: inline-flex; align-items: center; background: var(--bg); border: 1px solid var(--line); border-radius: 999px; padding: 5px 11px; font: 500 12px 'Plus Jakarta Sans', sans-serif; color: var(--ink-3); cursor: pointer; } .aj-chip.on { background: var(--accent-soft); border-color: var(--accent-line); font-weight: 600; color: var(--accent-ink); } /* Opciones del tope (artboard "tope del mes"): elegida = borde 1.5 azul, radio lleno, título 700 y monto a la derecha */ .aj-op { display: flex; align-items: center; gap: 12px; height: 62px; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 0 15px; cursor: pointer; } .aj-op.on { border: 1.5px solid var(--accent); padding: 0 14.5px; } .aj-op:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; } .aj-radio { width: 22px; height: 22px; border-radius: 999px; border: 2px solid var(--line-2); display: flex; align-items: center; justify-content: center; flex: none; } .aj-op.on .aj-radio { border-color: var(--accent); } .aj-op.on .aj-radio::after { content: ""; width: 10px; height: 10px; border-radius: 999px; background: var(--accent); } .aj-op-t { font: 600 14px 'Plus Jakarta Sans', sans-serif; color: var(--ink); } .aj-op.on .aj-op-t { font-weight: 700; } .aj-op-m { font: 700 15px 'Plus Jakarta Sans', sans-serif; color: var(--ink); font-variant-numeric: tabular-nums; flex: none; } .aj-op:not(.on) .aj-op-m { display: none; } .aj-op-in { display: inline-flex; align-items: baseline; gap: 2px; } .aj-op-in input { font: inherit; color: inherit; background: none; border: 0; border-bottom: 1.5px dashed var(--accent); padding: 0 0 1px; outline: 0; font-variant-numeric: tabular-nums; } .aj-op-in input:focus { border-bottom-style: solid; } /* Porcentaje de cada aviso: ocupa el lugar (46×28) del interruptor del artboard */ .aj-pill { width: 46px; height: 28px; flex: none; border: 0; border-radius: 999px; background: var(--brand); color: #FFFFFF; text-align: center; padding: 0; font: 700 13px 'Plus Jakarta Sans', sans-serif; font-variant-numeric: tabular-nums; } .aj-pill:focus { outline: 2px solid var(--accent); outline-offset: 2px; } /* Selector de categoría (se abre con "Corregir categoría") */ .aj-cats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; } .aj-cats button { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 2px; border-radius: 14px; cursor: pointer; min-width: 0; border: 1px solid var(--line); background: var(--surface); } .aj-cats b { font: 700 20px 'Bricolage Grotesque', sans-serif; color: var(--ink); } .aj-cats span { font: 500 9.5px 'Geist Mono', monospace; color: var(--ink-4); letter-spacing: -.02em; } .aj-cats button.on { background: var(--accent-soft); border: 1.5px solid var(--accent); padding: 7.5px 1.5px; } .aj-cats button.on b { color: var(--accent-ink); } /* Formularios (campos del sistema: .campo/.input del núcleo) */ .aj-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .aj-2 > .campo { min-width: 0; } .aj-wrap select.input { appearance: none; -webkit-appearance: none; padding-right: 34px; cursor: pointer; background-image: linear-gradient(45deg, transparent 50%, var(--ink-4) 50%), linear-gradient(135deg, var(--ink-4) 50%, transparent 50%); background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%; background-size: 5px 5px; background-repeat: no-repeat; } .aj-borrar { width: 32px; height: 32px; flex: none; border-radius: 999px; border: 1px solid var(--line); background: var(--bg); color: var(--ink-3); display: flex; align-items: center; justify-content: center; cursor: pointer; } .aj-borrar svg { width: 13px; height: 13px; } .aj-borrar:hover { color: var(--bad); border-color: var(--bad); } .armado { background: var(--bad-soft) !important; border-color: var(--bad) !important; color: var(--bad-ink) !important; } @media (max-width: 360px) { .aj-2 { grid-template-columns: 1fr; } .aj-cats { grid-template-columns: repeat(3, 1fr); } } /* Escritorio: E10 "Ajustes escritorio". Grilla de la página = la del artboard: 44 | navegación 260 | 36 | sección | 28 | resumen 360 | 44, debajo de la cabecera de 88 px. La navegación y el resumen van en todas las secciones (Ajustes::vista). */ @media (min-width: 900px) { body[data-page="ajustes"] .app-main { display: grid; grid-template-columns: 44px 260px 36px minmax(0, 1fr) 28px 360px 44px; grid-template-rows: auto auto 1fr; min-height: 100dvh; } body[data-page="ajustes"] .app-main > * { grid-column: 1 / -1; } body[data-page="ajustes"] .app-main > .page-head { grid-row: 1; } body[data-page="ajustes"] .app-main > .banners { grid-row: 2; } body[data-page="ajustes"] .app-main > .aj-nav { grid-column: 2; grid-row: 3; display: flex; flex-direction: column; gap: 5px; padding: 28px 0 32px; min-width: 0; } body[data-page="ajustes"] .app-main > .aj-wrap { grid-column: 4; grid-row: 3; max-width: none; margin: 0; padding: 28px 0 32px; min-width: 0; } body[data-page="ajustes"] .app-main > .aj-resumen { grid-column: 6; grid-row: 3; display: flex; flex-direction: column; gap: 16px; padding: 28px 0 32px; min-width: 0; } body[data-page="ajustes"] .aj-wrap > div { padding-left: 0 !important; padding-right: 0 !important; } body[data-page="ajustes"] .aj-wrap > div:first-child { padding-top: 0 !important; } .aj-nav a:not([aria-current]):hover { background: var(--surface); } .aj-resumen a:hover { border-color: var(--line-2) !important; } /* "Mis datos y categoría" con las medidas de E10 (mismo marcado que el celular) */ .aj-datos .aj-cuerpo { gap: 16px !important; } .aj-catc { padding: 24px !important; gap: 16px !important; } .aj-catc .aj-eti { font-size: 10.5px !important; } .aj-catpill { gap: 7px !important; padding: 5px 12px !important; font-size: 11.5px !important; } .aj-letra-w { gap: 14px !important; } .aj-letra-w > span:last-child { gap: 3px !important; } .aj-letra { font-size: 64px !important; } #cat-act { font-size: 20px !important; } .aj-topet { font-size: 12.5px !important; } .aj-cat-pie { flex-direction: row !important; align-items: center; justify-content: space-between; gap: 16px !important; padding-top: 16px !important; } .aj-explica { font-size: 13px !important; max-width: 420px; } .aj-cat-acc { display: flex; gap: 18px; flex: none; } .aj-cat-acc button { font-size: 13.5px !important; } /* "Corregir categoría" sube a la tarjeta como enlace (40-ajustes.js lo mueve) */ .aj-cat-acc #cat-corregir { width: auto !important; height: auto !important; border: 0 !important; border-radius: 0 !important; background: none !important; padding: 0 !important; font: 600 13.5px 'Plus Jakarta Sans', sans-serif !important; color: var(--accent) !important; } .aj-datos .aj-datc { flex: 1; padding: 0 24px !important; border-radius: 22px !important; min-height: 0; } .aj-datos .aj-row { height: 66px !important; gap: 16px !important; } .aj-datos .aj-k, .aj-datos .aj-v { font-size: 14px !important; } .aj-datos .aj-v { max-width: 70% !important; } .aj-chev { display: flex; } .aj-datos .aj-chip { gap: 7px; padding: 6px 13px; font-size: 12.5px; } .aj-datos .aj-chip.on { border: 1.5px solid var(--accent); color: var(--accent-hover); } .aj-datos .aj-pie { padding: 0 !important; } .aj-datos .aj-pie:has(#datos-guardar:not([hidden])) { padding-top: 16px !important; } } /* ── Banners globales (artboard E7 "Banners globales"; ubicación del artboard "Inicio con banner ARCA") ── */ .banners { flex: none; width: 100%; padding: 0 18px 12px; } /* En el celular va DEBAJO de la cabecera de la vista, como en el artboard. Si la vista marca su cabecera con data-cabecera y la pone primera, se reordena solo con CSS; si no, el banner queda arriba de todo. */ @media (max-width: 899px) { .app-main > .banners:has(+ [data-cabecera]) { order: 1; } .app-main > .banners + [data-cabecera] { order: 0; } .app-main > .banners:has(+ [data-cabecera]) ~ :not([data-cabecera]) { order: 2; } .banners { max-width: 560px; margin: 0 auto; } } @media (min-width: 900px) { .banners { padding: 0 44px 16px; } } /* ── 50-landing.css ── */ /* ── Landing pública (design/Garca - E8 Landing.dc.html) ───────────────────────── La vista trae el markup de los artboards con sus estilos inline (tools/portar2.py): celular (.ldc, 390) y escritorio (.ldd, 1440) son bloques distintos (.solo-cel / .solo-desk). Acá: lo que el inline no puede (márgenes que se ajustan al ancho, grillas que se achican entre 900 y 1199, el velo de la foto del hero por tema, estados del buscador de CUIT, preguntas desplegables) y los reseteos de las etiquetas semánticas. */ body.ld { background: var(--bg); overflow-x: hidden; } @media (max-width: 899px) { body.ld { background: var(--page); } } /* el celular va sobre el fondo de página (#14120E en oscuro), el escritorio sobre --bg */ .ld h1, .ld h2, .ld h3, .ld p { margin: 0; } .ld ol, .ld ul { list-style: none; margin: 0; padding: 0; } .ld a:hover { color: inherit; } /* los