/* ===================================================================== FotoControl v3 · Sistema de diseño Identidad: grafito profundo + gradiente índigo→cian (apertura de cámara) El dorado se reserva para DINERO (valores monetarios). ===================================================================== */ @font-face { font-family: 'Sora'; src: url('../fonts/sora-var.woff2') format('woff2-variations'); font-weight: 100 900; font-style: normal; font-display: swap; } :root { --bg: #0a0c10; --bg-soft: #0f1218; --card: #151922; --card-2: #1c212c; --line: #262d3a; --text: #f2f4f8; --muted: #8c95a6; /* Marca */ --brand: #6c8cff; --brand-2: #4ecbf0; --brand-grad: linear-gradient(135deg, #5b7cff, #38b6e8); /* Compatibilidad con acentos históricos (ahora en marca) */ --accent: #6c8cff; --accent-2: #8fb0ff; /* Semánticos */ --gold: #ebc98c; /* dinero */ --green: #3ddc97; --red: #ff7a70; --blue: #63a8ff; --pink: #f5a3c7; --radius: 18px; --safe-top: env(safe-area-inset-top, 0px); /* barra de estado del iPhone (notch) */ --safe-bottom: env(safe-area-inset-bottom, 0px); /* Componentes con fondo propio (cambian con el tema) */ --topbar-bg: rgba(10, 12, 16, .82); --tabbar-bg: rgba(10, 12, 16, .92); --panel-grad: linear-gradient(135deg, #141a2c 0%, #131722 60%); --kpi-big-grad: linear-gradient(135deg, #141a2c, #151922); --bar-gasto-grad: linear-gradient(180deg, #3a4152, #2a2f3c); --auth-feat-bg: rgba(21, 25, 34, .75); --card-fb-grad: linear-gradient(135deg, #0f1b2e, #1c1c22); --card-brain-grad: linear-gradient(135deg, #12203a, #1c1c22); --card-brain-line: #24406e; --card-warn-grad: linear-gradient(135deg, #1f1612, #1c1c22); --card-warn-line: #3a2a1c; } /* ---------- MODO CLARO (data-theme="light" en ) ---------- */ :root[data-theme="light"] { --bg: #eef1f7; --bg-soft: #f6f8fc; --card: #ffffff; --card-2: #e9edf5; --line: #d9dfeb; --text: #181b23; --muted: #5b6477; --accent-2: #3b63d9; /* legible sobre blanco */ --brand-2: #075e85; /* el cian de marca, oscurecido para leerse sobre blanco (teléfonos en tablas, links) */ --gold: #a3730d; --green: #0d9e66; --red: #d84a41; --blue: #2570c8; --pink: #c8538d; --topbar-bg: rgba(255, 255, 255, .85); --tabbar-bg: rgba(252, 253, 255, .94); --panel-grad: linear-gradient(135deg, #e9eefb 0%, #f5f7fd 60%); --kpi-big-grad: linear-gradient(135deg, #e9eefb, #ffffff); --bar-gasto-grad: linear-gradient(180deg, #aeb8ca, #c4cddd); --auth-feat-bg: rgba(255, 255, 255, .8); --card-fb-grad: linear-gradient(135deg, #e7f0fe, #f7faff); --card-brain-grad: linear-gradient(135deg, #e8eefc, #f6f9ff); --card-brain-line: #bfd0f0; --card-warn-grad: linear-gradient(135deg, #fcf2df, #fffaf0); --card-warn-line: #e8d5ac; } * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; } html, body { margin: 0; padding: 0; width: 100%; height: 100%; overflow: hidden; /* el documento queda FIJO; #app es el que scrollea */ overscroll-behavior: none; position: fixed; /* nada de rebote del navegador */ inset: 0; } body { font-family: 'Sora', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; background: var(--bg); color: var(--text); font-size: 14.5px; line-height: 1.5; } #app { max-width: 540px; margin: 0 auto; height: 100vh; height: 100dvh; overflow-y: auto; overflow-x: hidden; /* solo este scrollea, vertical */ overscroll-behavior: none; /* sin rebote ni scroll-chaining */ -webkit-overflow-scrolling: touch; padding-bottom: calc(100px + var(--safe-bottom)); /* espacio para la barra inferior */ } /* ---------- Logo (apertura) ---------- */ .logo-ap { display: inline-grid; place-items: center; width: 38px; height: 38px; } .logo-ap svg { width: 100%; height: 100%; display: block; } .logo-ap-lg { width: 68px; height: 68px; } /* ---------- Topbar ---------- */ .topbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; /* en iPhone instalada (pantalla completa), respetar la barra de estado */ padding: calc(13px + var(--safe-top)) 16px 13px; background: var(--topbar-bg); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); } .brand { display: flex; align-items: center; gap: 10px; } .brand-mark { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: radial-gradient(120% 120% at 30% 20%, #1d2334 0%, #12151d 70%); border: 1px solid var(--line); padding: 6px; } .brand-mark svg { width: 100%; height: 100%; display: block; } .brand-text strong { display: block; font-size: 14px; font-weight: 700; letter-spacing: -.2px; } .brand-text small { color: var(--muted); font-size: 11px; } .icon-btn { background: var(--card); border: 1px solid var(--line); color: var(--text); width: 40px; height: 40px; border-radius: 12px; font-size: 16px; cursor: pointer; transition: transform .1s ease, border-color .15s ease; } .icon-btn:active { transform: scale(.94); border-color: var(--brand); } /* ---------- Vistas ---------- */ /* Sin transform en la animación: un ancestro con transform ROMPE position:sticky (los encabezados/totales pegados de las tablas dejan de funcionar) */ .view { padding: 16px; animation: fade .25s ease; } @keyframes fade { from { opacity: 0; } to { opacity: 1; } } .section-title { font-size: 12px; text-transform: uppercase; letter-spacing: 1px; color: var(--muted); font-weight: 700; margin: 24px 4px 10px; } .section-title:first-child { margin-top: 4px; } /* ---------- Inicio: hero + prueba ---------- */ .hero { margin: 4px 2px 14px; } .hero-hello { font-size: 20px; font-weight: 800; letter-spacing: -.4px; } .hero-date { font-size: 12.5px; color: var(--muted); margin-top: 2px; } .hero-date::first-letter { text-transform: uppercase; } .trial-pill { background: rgba(108, 140, 255, .12); border: 1px solid rgba(108, 140, 255, .35); color: var(--text); border-radius: 12px; padding: 9px 13px; font-size: 12.5px; margin: 0 0 14px; } .trial-pill a { color: var(--brand-2); font-weight: 700; text-decoration: none; } /* Frase del día */ .frase-card { position: relative; overflow: hidden; background: var(--panel-grad); border: 1px solid rgba(108, 140, 255, .3); border-radius: 16px; padding: 14px 16px 15px; margin: 0 0 18px; } .frase-card::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--brand-grad); } .frase-label { font-size: 10.5px; letter-spacing: .8px; text-transform: uppercase; color: var(--brand-2); font-weight: 700; margin-bottom: 7px; } .frase-text { font-size: 15px; line-height: 1.5; font-weight: 600; } /* ---------- Inicio: tiles con datos en vivo ---------- */ .stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; } .stat-tile { text-align: left; cursor: pointer; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 13px 14px 12px; color: var(--text); font-family: inherit; transition: transform .1s ease, border-color .15s ease; min-width: 0; } .stat-tile:active { transform: scale(.97); border-color: var(--brand); } .stat-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; } .stat-ico { width: 32px; height: 32px; border-radius: 10px; flex: none; display: grid; place-items: center; font-size: 16px; box-shadow: 0 4px 12px rgba(0, 0, 0, .35); } .stat-name { font-size: 12px; font-weight: 700; color: var(--muted); letter-spacing: .2px; } .stat-value { font-size: 21px; font-weight: 800; letter-spacing: -.6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .stat-value.pos { color: var(--green); } .stat-value.neg { color: var(--red); } .stat-value.gold { color: var(--gold); } .stat-sub { font-size: 11px; color: var(--muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Gradientes de iconos (comparten nombres históricos) */ .t-blue { background: linear-gradient(135deg, #3d6fd6, #5aa6ff); } .t-gold { background: linear-gradient(135deg, #c98f3e, #e8c98a); } .t-green { background: linear-gradient(135deg, #22996b, #3ddc97); } .t-pink { background: linear-gradient(135deg, #d15f92, #f5a3c7); } .t-purple { background: linear-gradient(135deg, #7a5cd0, #a78bfa); } .t-cyan { background: linear-gradient(135deg, #2f8fb0, #5bc7e0); } .t-amber { background: linear-gradient(135deg, #b8862f, #e0a94a); } .t-teal { background: linear-gradient(135deg, #2b8f7f, #48c2ad); } .t-gray { background: linear-gradient(135deg, #42424c, #5a5a66); } .t-fb { background: linear-gradient(135deg, #1877f2, #4a9bff); } .t-roas { background: var(--brand-grad); } /* ---------- Paywall (renovación) ---------- */ .paywall { text-align: center; padding: 36px 10px 10px; } .paywall .logo-ap-lg { margin-bottom: 16px; } .paywall h2 { margin: 0 0 8px; font-size: 21px; letter-spacing: -.4px; } .paywall p { margin: 0 auto 18px; max-width: 320px; font-size: 13.5px; } /* ---------- Cards ---------- */ .card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; margin-bottom: 12px; } .card-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; } /* ---------- KPIs ---------- */ .kpi-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; } .kpi { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 13px 14px; } .kpi .label { color: var(--muted); font-size: 11.5px; font-weight: 600; display: flex; align-items: center; gap: 6px; } .kpi .value { font-size: 22px; font-weight: 800; margin-top: 6px; letter-spacing: -.6px; } .kpi.big { grid-column: span 2; background: var(--kpi-big-grad); border-color: rgba(108, 140, 255, .28); } /* Tarjetas con acento (mismas en ambos temas, cambian por variables) */ .card-fb { background: var(--card-fb-grad) !important; border-color: #1877f2 !important; } .card-brain { background: var(--card-brain-grad) !important; border-color: var(--card-brain-line) !important; } .card-warn { background: var(--card-warn-grad) !important; border-color: var(--card-warn-line) !important; } .card-brand { background: var(--kpi-big-grad) !important; border-color: rgba(108, 140, 255, .28) !important; } .kpi.big .value { font-size: 30px; } .value.pos { color: var(--green); } .value.neg { color: var(--red); } .value.gold { color: var(--gold); } /* ---------- Mini barras ---------- */ .bars { display: flex; align-items: flex-end; gap: 6px; height: 70px; margin-top: 10px; } .bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; } .bar { width: 100%; border-radius: 5px 5px 0 0; background: var(--brand-grad); min-height: 3px; } .bar.gasto { background: var(--bar-gasto-grad); } .bar-label { font-size: 10px; color: var(--muted); } /* ---------- Listas ---------- */ .list-item { display: flex; align-items: center; gap: 12px; padding: 12px; background: var(--card); border: 1px solid var(--line); border-radius: 15px; margin-bottom: 8px; transition: border-color .15s ease; } .list-item:active { border-color: var(--brand); } .list-item .avatar { width: 40px; height: 40px; border-radius: 12px; flex: none; display: grid; place-items: center; font-weight: 700; font-size: 14px; background: var(--card-2); color: var(--accent-2); } .list-item .grow { flex: 1; min-width: 0; } .list-item .title { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .list-item .sub { color: var(--muted); font-size: 12px; } .list-item .amount { font-weight: 700; white-space: nowrap; } /* ---------- Pills ---------- */ .pill { display: inline-block; padding: 3px 9px; border-radius: 999px; font-size: 11px; font-weight: 700; background: var(--card-2); color: var(--muted); } .pill.gold { background: rgba(235, 201, 140, .14); color: var(--gold); } .pill.green { background: rgba(61, 220, 151, .13); color: var(--green); } .pill.red { background: rgba(255, 122, 112, .14); color: var(--red); } .pill.blue { background: rgba(99, 168, 255, .14); color: var(--blue); } /* ---------- Botones ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 16px; border-radius: 14px; border: 1px solid var(--line); background: var(--card); color: var(--text); font-size: 14.5px; font-weight: 600; font-family: inherit; cursor: pointer; width: 100%; transition: transform .1s ease, border-color .15s ease; } .btn:active { transform: scale(.98); } .btn.primary { background: var(--brand-grad); color: #fff; border: none; box-shadow: 0 6px 18px rgba(83, 122, 255, .28); } .btn.ghost { background: transparent; } .btn.danger { color: var(--red); border-color: rgba(255, 122, 112, .3); } .btn.sm { width: auto; padding: 8px 12px; font-size: 13px; border-radius: 11px; } .fab { position: fixed; right: max(16px, calc((100vw - 540px) / 2 + 16px)); bottom: calc(84px + var(--safe-bottom)); z-index: 25; width: 56px; height: 56px; border-radius: 18px; border: none; background: var(--brand-grad); color: #fff; font-size: 28px; font-weight: 700; cursor: pointer; box-shadow: 0 8px 24px rgba(0, 0, 0, .45); } .fab:active { transform: scale(.92); } /* Barra inferior retirada */ .tabbar { display: none !important; } /* Botón atrás + logo clicable */ #btnBack { font-size: 26px; line-height: 1; padding: 0; } #brandHome { cursor: pointer; } /* ---------- Formularios ---------- */ .field { margin-bottom: 14px; } .field label { display: block; font-size: 12px; color: var(--muted); font-weight: 600; margin-bottom: 6px; } .field input, .field select, .field textarea { width: 100%; padding: 12px; border-radius: 12px; background: var(--bg-soft); border: 1px solid var(--line); color: var(--text); font-size: 15px; font-family: inherit; } .field textarea { min-height: 70px; resize: vertical; } .field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(108, 140, 255, .18); } .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } /* ---------- Modal ---------- */ .modal { position: fixed; inset: 0; z-index: 50; display: flex; align-items: flex-end; justify-content: center; } .modal.hidden { display: none; } .modal-backdrop { position: absolute; inset: 0; background: rgba(4, 6, 10, .65); backdrop-filter: blur(2px); } .modal-card { position: relative; width: 100%; max-width: 540px; background: var(--bg-soft); border-top-left-radius: 24px; border-top-right-radius: 24px; border-top: 1px solid var(--line); max-height: 90vh; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; /* no arrastra ni rebota la página */ touch-action: pan-y; /* el modal SOLO se mueve vertical */ animation: slideUp .28s ease; padding-bottom: calc(16px + var(--safe-bottom)); } @keyframes slideUp { from { transform: translateY(100%); } to { transform: none; } } .modal-head { position: sticky; top: 0; z-index: 2; background: var(--bg-soft); display: flex; align-items: center; justify-content: space-between; padding: 16px; border-bottom: 1px solid var(--line); } .modal-head::before { content: ''; position: absolute; top: 7px; left: 50%; transform: translateX(-50%); width: 42px; height: 4px; border-radius: 4px; background: var(--line); } .modal-head h3 { margin: 0; font-size: 16.5px; letter-spacing: -.2px; } .modal-body { padding: 16px; } /* ---------- Toast ---------- */ .toast { position: fixed; bottom: calc(100px + var(--safe-bottom)); left: 50%; transform: translateX(-50%); background: #fff; color: #10131a; padding: 11px 18px; border-radius: 13px; font-weight: 700; font-size: 13.5px; z-index: 60; box-shadow: 0 10px 28px rgba(0, 0, 0, .5); max-width: 88vw; text-align: center; } .toast.hidden { display: none; } /* ---------- Vacíos ---------- */ .empty { text-align: center; color: var(--muted); padding: 40px 20px; } .empty .emoji { font-size: 40px; display: block; margin-bottom: 10px; } .hidden { display: none !important; } .muted { color: var(--muted); } .center { text-align: center; } .mt { margin-top: 14px; } .flex { display: flex; gap: 10px; } .flex-1 { flex: 1; } /* ---------- Tabla tipo Excel (agenda) ---------- */ /* Caja contenida con su propia barra vertical (la página no crece hasta abajo). La barra se pinta SIEMPRE visible en los costados. */ .box-scroll { max-height: 62vh; /* arranque; el JS la estira hasta la tabbar */ overflow-y: auto; padding: 2px 8px 2px 2px; border: 1px solid var(--line); border-radius: 15px; scrollbar-width: thin; scrollbar-color: var(--brand) var(--card); } .box-scroll::-webkit-scrollbar { width: 8px; } .box-scroll::-webkit-scrollbar-track { background: var(--card); border-radius: 8px; } .box-scroll::-webkit-scrollbar-thumb { background: var(--brand); border-radius: 8px; } .box-scroll .day-h { position: sticky; top: 0; background: var(--bg); z-index: 1; padding-top: 4px; } /* OJO scroll táctil: contener SOLO el eje X; el gesto vertical debe pasar a la página (si se contienen ambos ejes, en Android el swipe vertical sobre la tabla se traba). touch-action pan-x pan-y deja al navegador rutear cada eje. */ .tbl-wrap { overflow-x: auto; overscroll-behavior-x: contain; overscroll-behavior-y: auto; touch-action: pan-x pan-y; -webkit-overflow-scrolling: touch; border: 1px solid var(--line); border-radius: 15px; } /* border-collapse: separate (no collapse) — con collapse, los sticky de thead/tfoot NO funcionan */ .tbl { border-collapse: separate; border-spacing: 0; width: 100%; font-size: 13px; white-space: nowrap; } .tbl th { text-align: left; color: var(--muted); font-weight: 700; font-size: 10px; text-transform: uppercase; letter-spacing: .5px; padding: 9px 10px; border-bottom: 1px solid var(--line); background: var(--bg-soft); position: sticky; top: 0; z-index: 2; } .tbl td { padding: 10px; border-bottom: 1px solid var(--line); } .tbl tbody tr:last-child td { border-bottom: 1px solid var(--line); } .tbl tbody tr:active { background: var(--card-2); } .tbl .num { text-align: right; } .tbl tfoot td { font-weight: 800; border-top: 2px solid var(--brand); background: var(--bg-soft); position: sticky; bottom: 0; z-index: 2; } /* En PC (mouse): la tabla scrollea DENTRO de su caja para que la barra horizontal siempre esté a la mano, y se puede ARRASTRAR con el mouse como en el cel. */ @media (hover: hover) and (pointer: fine) { .tbl-wrap { max-height: 72vh; overflow-y: auto; cursor: grab; } .tbl-wrap.arrastrando { cursor: grabbing; user-select: none; } .tbl-wrap::-webkit-scrollbar { height: 10px; width: 10px; } .tbl-wrap::-webkit-scrollbar-track { background: var(--card); border-radius: 8px; } .tbl-wrap::-webkit-scrollbar-thumb { background: var(--line); border-radius: 8px; border: 2px solid var(--card); } .tbl-wrap::-webkit-scrollbar-thumb:hover { background: var(--brand); } } .tbl .cli { font-weight: 600; } .tbl tbody tr.sin-anticipo td { background: rgba(255, 122, 112, .09); } .tbl tbody tr.sin-anticipo td:first-child { box-shadow: inset 3px 0 0 var(--red); } .tbl tbody tr.pospuesta td { background: rgba(61, 220, 151, .1); } .tbl tbody tr.pospuesta td:first-child { box-shadow: inset 3px 0 0 var(--green); } .tbl tbody tr.realizada td { background: rgba(245, 163, 199, .12); } .tbl tbody tr.realizada td:first-child { box-shadow: inset 3px 0 0 var(--pink); } .tbl tbody tr.entregada td { background: rgba(99, 168, 255, .1); } .tbl tbody tr.entregada td:first-child { box-shadow: inset 3px 0 0 var(--blue); } /* ---------- Login ---------- */ #authOverlay { position: fixed; inset: 0; z-index: 100; background: radial-gradient(90% 55% at 50% 0%, rgba(84, 116, 255, .16) 0%, rgba(10, 12, 16, 0) 60%), var(--bg); display: flex; align-items: center; justify-content: center; padding: calc(24px + var(--safe-top)) 24px calc(24px + var(--safe-bottom)); overflow-y: auto; } #authOverlay.hidden { display: none; } .auth-card { width: 100%; max-width: 390px; padding: 12px 0; } .auth-brand { text-align: center; margin-bottom: 18px; } .auth-brand .logo-ap-lg { margin-bottom: 10px; filter: drop-shadow(0 6px 22px rgba(84, 116, 255, .45)); } .auth-brand h1 { margin: 0 0 6px; font-size: 27px; font-weight: 800; letter-spacing: -.8px; } .auth-tag { margin: 0 auto; font-size: 13.5px; color: var(--muted); max-width: 300px; line-height: 1.45; } .auth-feats { display: grid; gap: 7px; margin: 18px 0 20px; } .auth-feat { display: flex; align-items: center; gap: 10px; background: var(--auth-feat-bg); border: 1px solid var(--line); border-radius: 13px; padding: 10px 13px; font-size: 12.8px; font-weight: 500; } .auth-feat span { font-size: 16px; flex: none; } .auth-msg { padding: 10px 12px; border-radius: 11px; font-size: 13px; margin-bottom: 12px; background: var(--card-2); color: var(--muted); } .auth-msg.err { background: rgba(255, 122, 112, .13); color: var(--red); } .auth-msg.ok { background: rgba(61, 220, 151, .13); color: var(--green); } .auth-foot { text-align: center; font-size: 12px; margin-top: 18px; } /* ---------- Embudo CRM ---------- */ .stage-track { display: flex; gap: 6px; overflow-x: auto; overscroll-behavior-x: contain; overscroll-behavior-y: auto; touch-action: pan-x pan-y; padding-bottom: 4px; margin: 0 -16px; padding-left: 16px; padding-right: 16px; } .stage-col { flex: none; width: 150px; } .stage-head { font-size: 12px; color: var(--muted); margin-bottom: 8px; display: flex; justify-content: space-between; } .stage-count { background: var(--card-2); border-radius: 999px; padding: 0 7px; font-size: 11px; } /* ===================================================================== FotoControl 4 · Barra inferior + pantalla Hoy + segmentos ===================================================================== */ .tabbar2 { position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: 540px; z-index: 30; background: var(--tabbar-bg); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 7px; /* aire entre las dos filas */ padding: 8px 8px calc(9px + var(--safe-bottom)); } .tb-fila { display: flex; align-items: stretch; gap: 6px; } .tb-hueco { flex: none; width: 62px; } /* alinea la fila de arriba con el botón ＋ */ /* Cuadrícula: cada botón es una celda con su marco, simétrica arriba y abajo */ .tb { flex: 1; color: var(--muted); background: var(--card); border: 1px solid var(--line); font-family: inherit; cursor: pointer; border-radius: 13px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 7px 0 5px; min-width: 0; } .tb:active { transform: scale(.94); } .tb .tb-i { font-size: 20px; line-height: 1; } .tb .tb-l { font-size: 9.5px; font-weight: 700; letter-spacing: .03em; } .tb.on { color: var(--text); border-color: var(--brand); background: var(--card-2); } .tb.on .tb-i { filter: drop-shadow(0 2px 10px rgba(108, 140, 255, .85)); } .tb-plus { flex: none; width: 62px; position: relative; border: none; background: none; cursor: pointer; } .tb-plus i { position: absolute; left: 50%; top: -28px; transform: translateX(-50%); width: 52px; height: 52px; border-radius: 17px; font-style: normal; background: var(--brand-grad); color: #fff; font-size: 25px; font-weight: 700; display: grid; place-items: center; box-shadow: 0 8px 22px rgba(83, 122, 255, .4); } .tb-plus:active i { transform: translateX(-50%) scale(.92); } /* Pantalla Hoy */ .mini-kpis { display: flex; gap: 8px; margin: 2px 0 4px; } .mk { flex: 1; background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 10px 11px; cursor: pointer; min-width: 0; transition: border-color .15s ease; } .mk:active { border-color: var(--brand); } .mk .mk-l { font-size: 10px; color: var(--muted); font-weight: 600; letter-spacing: .03em; white-space: nowrap; } .mk .mk-v { font-size: 16.5px; font-weight: 800; letter-spacing: -.03em; margin-top: 2px; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mk .mk-v.pos { color: var(--green); } .mk .mk-v.neg { color: var(--red); } .mk .mk-v.gold { color: var(--gold); } .frase-mini { background: var(--panel-grad); border: 1px solid rgba(108, 140, 255, .3); border-radius: 14px; padding: 11px 13px; margin: 0 0 14px; font-size: 13.5px; line-height: 1.5; font-weight: 600; } .frase-mini b { display: block; color: var(--brand-2); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 4px; } /* Frase dinámica: la actual sube y la nueva entra desde abajo (mismo rectángulo) */ .frase-roller { overflow: hidden; min-height: 21px; } .frase-roller span { display: block; will-change: transform, opacity; } .frase-out { animation: fraseOut .45s ease forwards; } .frase-in { animation: fraseIn .52s ease; } @keyframes fraseOut { to { transform: translateY(-115%); opacity: 0; } } @keyframes fraseIn { from { transform: translateY(115%); opacity: 0; } to { transform: none; opacity: 1; } } @media (prefers-reduced-motion: reduce) { .frase-out, .frase-in { animation: none; } } /* Avatar de hora (tarjetas de sesión del día) */ .ava-time { flex-direction: column; line-height: 1.05; font-size: 13px; } .ava-time small { font-size: 8.5px; color: var(--muted); font-weight: 700; } /* Control segmentado (Lista/Tabla, Movimientos/Por cobrar) */ .seg { display: flex; background: var(--card); border: 1px solid var(--line); border-radius: 13px; padding: 3px; gap: 3px; margin: 10px 0; } .seg button { flex: 1; border: none; background: none; color: var(--muted); font-family: inherit; font-size: 12.5px; font-weight: 700; padding: 8px 4px; border-radius: 10px; cursor: pointer; } .seg button.on { background: var(--brand-grad); color: #fff; } /* Chips del hub de Reportes */ .rep-chips { display: flex; gap: 6px; overflow-x: auto; overscroll-behavior-x: contain; overscroll-behavior-y: auto; touch-action: pan-x pan-y; padding: 2px 2px 8px; margin-bottom: 6px; scrollbar-width: none; } .rep-chips::-webkit-scrollbar { display: none; } .rep-chips button { border: 1px solid var(--line); background: var(--card); color: var(--muted); font-family: inherit; font-size: 12px; font-weight: 700; padding: 8px 14px; border-radius: 999px; cursor: pointer; white-space: nowrap; flex: none; } .rep-chips button.on { background: var(--brand-grad); color: #fff; border-color: transparent; } /* Encabezados de día (Agenda en lista) */ .day-h { display: flex; align-items: baseline; gap: 8px; margin: 16px 2px 8px; } .day-h:first-of-type { margin-top: 6px; } .day-h .d-big { font-size: 13.5px; font-weight: 800; } .day-h .d-mut { font-size: 11px; color: var(--muted); } /* Botón WhatsApp compacto (Por cobrar) */ .wa-mini { border: none; font-family: inherit; cursor: pointer; white-space: nowrap; background: rgba(61, 220, 151, .13); color: var(--green); font-size: 11px; font-weight: 700; padding: 8px 11px; border-radius: 10px; text-decoration: none; display: inline-block; } .wa-mini:active { transform: scale(.95); } /* Hoja de acciones del botón + (dentro del modal) */ .sh-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; } .sh-a { display: flex; align-items: center; gap: 10px; text-align: left; background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 13px 12px; cursor: pointer; color: var(--text); font-family: inherit; } .sh-a:active { border-color: var(--brand); } .sh-a .sh-i { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; font-size: 18px; flex: none; } .sh-a b { font-size: 13px; display: block; } .sh-a small { font-size: 10.5px; color: var(--muted); } /* ---------- Foto de fondo personalizada (cada fotógrafo sube la suya en Ajustes) ---------- */ #fotoFondo { position: fixed; inset: 0; z-index: 0; pointer-events: none; background-size: cover; background-position: center; opacity: .3; display: none; } :root[data-theme="light"] #fotoFondo { opacity: .22; } /* sobre fondo claro pide menos presencia */ #app { position: relative; z-index: 1; } /* ---------- Asesor (IA local): chat de preguntas ---------- */ .as-input { display: flex; gap: 8px; margin: 0 0 12px; } .as-input input { flex: 1; background: var(--card); border: 1px solid var(--line); color: var(--text); border-radius: 12px; padding: 12px 14px; font-family: inherit; font-size: 14px; } .as-input input:focus { outline: none; border-color: var(--brand); } .as-sugeridas { display: flex; flex-wrap: wrap; gap: 7px; margin: 0 0 16px; } .as-chip { background: var(--card-2); border: 1px solid var(--line); color: var(--text); font-family: inherit; font-size: 12.5px; padding: 8px 12px; border-radius: 999px; cursor: pointer; transition: transform .1s ease, border-color .15s ease; } .as-chip:active { transform: scale(.96); } .as-chip:hover { border-color: var(--brand); } .as-q { display: flex; justify-content: flex-end; margin: 4px 0 8px; } .as-q span { background: var(--brand-grad); color: #fff; font-weight: 600; font-size: 13.5px; padding: 9px 13px; border-radius: 14px 14px 4px 14px; max-width: 85%; } .as-a { font-size: 13.5px; line-height: 1.6; border-radius: 14px 14px 14px 4px; margin-bottom: 16px; }