/* ===================================================================== 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; /* Tinte de los renglones de la tabla de Agenda, uno por proceso de la sesión. Van por variable porque en modo claro NO sirve el mismo color: los tonos de arriba son claritos y sobre blanco se pierden. Ver el bloque de modo claro. El rojo va más CERRADO y el rosa más CLARO a propósito: siendo los dos de la familia del rojo, si solo cambia el tono se confunden de reojo; separándolos también en profundidad ya no hay manera de equivocarse. */ --row-red: rgba(255, 90, 80, .26); /* sin anticipo */ --row-green: rgba(61, 220, 151, .24); /* pospuesta */ --row-pink: rgba(245, 140, 205, .24); /* realizada */ --row-blue: rgba(99, 168, 255, .24); /* entregada */ --row-off: rgba(150, 160, 180, .13); /* cancelada */ --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; /* Sobre blanco hay que usar los tonos OSCUROS (los de arriba) con más cuerpo: con los claritos del modo oscuro la tabla se veía pastel y no se distinguía. */ --row-red: rgba(192, 57, 43, .22); --row-green: rgba(13, 158, 102, .22); --row-pink: rgba(200, 83, 141, .22); --row-blue: rgba(37, 112, 200, .20); --row-off: rgba(91, 100, 119, .13); --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; } /* ---------- Planes de suscripción (paywall) ---------- */ .plans { display: grid; gap: 10px; margin: 18px auto 10px; max-width: 340px; } @media (min-width: 420px) { .plans { grid-template-columns: 1fr 1fr; } } .plan { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 12px 14px; text-decoration: none; color: inherit; } .plan:hover { border-color: var(--brand, #6C8CFF); } .plan.best { border-color: var(--gold); } .plan-tag { position: absolute; top: -9px; left: 50%; transform: translateX(-50%); background: var(--gold); color: var(--bg); font-size: 10px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; padding: 2px 8px; border-radius: 99px; white-space: nowrap; } .plan-tit { font-size: 12.5px; color: var(--muted); } .plan-precio { font-size: 20px; font-weight: 800; letter-spacing: -.4px; } .plan.best .plan-precio { color: var(--gold); } .plan-per { font-size: 11.5px; opacity: .6; } .plan-ahorro { margin-top: 4px; font-size: 11.5px; font-weight: 700; color: var(--green); } .paywall .plan-legal { margin: 8px auto 0; max-width: 320px; font-size: 11.5px; line-height: 1.5; opacity: .62; } /* ---------- 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) ---------- */ /* Botones anchos con subtítulo (Cómo funciona / Importar agenda): compactos, subtítulo SIEMPRE de una línea para que la barra y la alerta quepan en el cel */ .btn-guia { justify-content: flex-start; gap: 10px; text-align: left; padding: 9px 13px; min-height: 0; } .btn-guia .bg-i { font-size: 17px; flex: none; line-height: 1; } .btn-guia .bg-t { min-width: 0; display: block; } .btn-guia .bg-t b { display: block; font-size: 14px; line-height: 1.25; } .btn-guia .bg-s { display: block; color: var(--muted); font-weight: 500; font-size: 11px; line-height: 1.3; margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .btn-guia.primary .bg-s { color: rgba(255, 255, 255, .85); } /* Alerta compacta (sesiones sin anticipo) */ .list-item.compacto { padding: 9px 12px; } /* 📖 Guía de la app: acordeón de temas (abre/cierra sin JS) */ .guia-item { background: var(--card); border: 1px solid var(--line); border-radius: 14px; margin-bottom: 8px; overflow: hidden; } .guia-item > summary { display: flex; align-items: center; gap: 10px; padding: 12px 14px; cursor: pointer; list-style: none; font-weight: 700; font-size: 14px; color: var(--text); } .guia-item > summary::-webkit-details-marker { display: none; } .guia-item > summary::after { content: '⌄'; margin-left: auto; color: var(--muted); font-size: 17px; line-height: 1; transition: transform .25s ease; } .guia-item[open] > summary::after { transform: rotate(180deg); } .guia-item[open] > summary { border-bottom: 1px solid var(--line); } .guia-ico { font-size: 19px; flex: none; } .guia-t { min-width: 0; } .guia-body { padding: 12px 14px 14px; } .guia-body ul { margin: 0; padding-left: 18px; font-size: 13.5px; line-height: 1.75; } .guia-body li { margin-bottom: 7px; } .guia-body li b { color: var(--text); } /* Capítulos largos: subtítulos, párrafos y cajas destacadas */ .guia-h { font-size: 12px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; color: var(--brand-2); margin: 16px 0 7px; } .guia-body > .guia-h:first-child { margin-top: 2px; } .guia-p { font-size: 13.5px; line-height: 1.7; margin: 0 0 8px; } .guia-ul { margin: 0 0 4px; padding-left: 18px; font-size: 13.5px; line-height: 1.75; } .guia-ul li { margin-bottom: 7px; } .guia-body code { background: var(--card-2); border: 1px solid var(--line); border-radius: 5px; padding: 1px 5px; font-size: 12px; white-space: nowrap; } .guia-oro { background: var(--card-2); border: 1px solid var(--gold); border-radius: 12px; padding: 11px 13px; margin: 14px 0 4px; font-size: 13px; line-height: 1.7; } /* Menú de opciones tipo Ads Manager (Desglose por tiempo) dibujado en la guía */ .radio-demo { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--card-2); margin: 8px 0 12px; } .radio-demo .rd { display: flex; align-items: center; gap: 9px; padding: 9px 12px; border-bottom: 1px solid var(--line); font-size: 13px; } .radio-demo .rd:last-child { border-bottom: none; } .radio-demo .rd.on { background: rgba(108, 140, 255, .12); } .radio-demo .rd-c { width: 15px; height: 15px; border-radius: 50%; flex: none; border: 2px solid var(--muted); background: transparent; } .radio-demo .rd-c.on { border-color: var(--brand); box-shadow: inset 0 0 0 3px var(--brand); } .radio-demo .rd-t { font-weight: 700; min-width: 74px; color: var(--text); } .radio-demo .rd-x { color: var(--muted); font-size: 11.5px; line-height: 1.35; } .radio-demo .rd-x.ok { color: var(--gold); font-weight: 600; } /* Ejemplo visual de cómo debe verse el Excel */ .xls-wrap { overflow-x: auto; margin: 8px 0 12px; -webkit-overflow-scrolling: touch; } .xls { border-collapse: collapse; font-size: 11.5px; white-space: nowrap; background: var(--card-2); border-radius: 8px; overflow: hidden; } .xls td { border: 1px solid var(--line); padding: 6px 9px; color: var(--text); } .xls .xls-cols td, .xls tr td:first-child { background: var(--bg-soft); color: var(--muted); text-align: center; font-size: 10.5px; font-weight: 700; min-width: 22px; } .xls .xls-head td { background: var(--bg-soft); font-weight: 800; color: var(--text); } .xls-map td:first-child { text-align: left; background: transparent; color: var(--text); font-weight: 600; } .xls-map .xls-head td:first-child { background: var(--bg-soft); } .xls .req { color: var(--red); font-weight: 800; } .xls .oro { color: var(--gold); font-weight: 800; } /* 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); } } /* ===================================================================== 🗓️ CALENDARIO — el mes completo con sesiones y recordatorios. La cuadrícula ocupa TODO el ancho y el detalle del día va abajo con aire, para que se lea de un vistazo y no quede amontonado. ===================================================================== */ .cal-top { display: flex; align-items: center; gap: 8px; margin: 2px 0 12px; } /* Sin text-transform: capitalize — pondría "Agosto De 2026". La primera letra se pone en mayúscula desde el JS con capitalizar(). */ .cal-mes { flex: 1; text-align: center; font-size: 17px; font-weight: 800; letter-spacing: -.3px; } .cal-kpis { display: flex; gap: 6px; margin-bottom: 12px; } .cal-k { flex: 1; min-width: 0; background: var(--card); border: 1px solid var(--line); border-radius: 13px; padding: 7px 4px; text-align: center; } .cal-k b { display: block; font-size: 14.5px; font-weight: 800; line-height: 1.25; } .cal-k b.gold { color: var(--gold); } .cal-k span { display: block; font-size: 9.5px; text-transform: uppercase; letter-spacing: .4px; color: var(--muted); font-weight: 700; margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cal-k-btn { cursor: pointer; color: var(--text); transition: transform .1s ease, border-color .15s ease; } .cal-k-btn:active { transform: scale(.94); border-color: var(--brand); } .cal-sem { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin-bottom: 5px; } .cal-sem span { text-align: center; font-size: 9.5px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; color: var(--muted); } .cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; touch-action: pan-y; } .cal-d { position: relative; aspect-ratio: 1 / 1.12; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 4px; padding: 6px 2px 5px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; cursor: pointer; color: var(--text); overflow: hidden; transition: transform .12s ease, border-color .15s ease, background .15s ease; } .cal-d:active { transform: scale(.93); } .cal-d.fuera { opacity: .34; } .cal-n { font-size: 14px; font-weight: 700; line-height: 22px; width: 24px; height: 22px; text-align: center; border-radius: 999px; font-variant-numeric: tabular-nums; } .cal-d.hoy .cal-n { background: linear-gradient(135deg, var(--brand), var(--brand-2)); color: #fff; } .cal-d.sel { border-color: var(--brand); background: var(--card-2); box-shadow: 0 0 0 2px rgba(108, 140, 255, .3); } .cal-pts { display: flex; flex-wrap: wrap; gap: 2.5px; justify-content: center; align-items: center; min-height: 7px; } .cal-pt { width: 6.5px; height: 6.5px; border-radius: 50%; flex: none; display: inline-block; } .cal-pt.red { background: var(--red); } .cal-pt.ok { background: var(--brand-2); } .cal-pt.pink { background: var(--pink); } .cal-pt.blue { background: var(--blue); } .cal-pt.off { background: var(--muted); } .cal-pt.rec { background: #8ea2ff; } .cal-mas { font-size: 8.5px; font-weight: 800; color: var(--muted); font-style: normal; line-height: 1; } /* El mes entra deslizándose del lado hacia el que vas */ @keyframes calDer { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } } @keyframes calIzq { from { opacity: 0; transform: translateX(-16px); } to { opacity: 1; transform: none; } } .cal-grid.entra-der { animation: calDer .22s ease-out both; } .cal-grid.entra-izq { animation: calIzq .22s ease-out both; } .cal-leyenda { display: flex; flex-wrap: wrap; gap: 4px 12px; justify-content: center; margin: 11px 2px 0; font-size: 10.5px; color: var(--muted); } .cal-leyenda span { display: inline-flex; align-items: center; gap: 5px; } /* ---- Detalle del día ---- */ .cal-dia { margin-top: 16px; border-top: 1px solid var(--line); padding-top: 13px; } @keyframes calPop { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } } .cal-dia.pop { animation: calPop .2s ease-out both; } .cal-dia-h { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 0 2px 11px; } .cal-dia-t { font-size: 15.5px; font-weight: 800; letter-spacing: -.2px; } .cal-dia-tot { font-size: 12px; color: var(--muted); white-space: nowrap; } .cal-dia-tot .gold { color: var(--gold); } .cal-ev { display: flex; gap: 9px; margin-bottom: 9px; } .cal-hora { flex: none; width: 46px; text-align: right; padding-top: 11px; font-size: 12.5px; font-weight: 800; color: var(--muted); font-variant-numeric: tabular-nums; } .cal-sh { opacity: .5; } .cal-card { flex: 1; min-width: 0; background: var(--card); border: 1px solid var(--line); border-left: 4px solid var(--line); border-radius: 13px; padding: 10px 12px; cursor: pointer; transition: transform .1s ease, border-color .15s ease; } .cal-card:active { transform: scale(.985); } .cal-card.red { border-left-color: var(--red); background: var(--row-red); } .cal-card.ok { border-left-color: var(--brand-2); } .cal-card.pink { border-left-color: var(--pink); background: var(--row-pink); } .cal-card.blue { border-left-color: var(--blue); background: var(--row-blue); } .cal-card.off { border-left-color: var(--muted); background: var(--row-off); } .cal-card.rec { border-left-color: #8ea2ff; background: rgba(124, 140, 255, .1); } .cal-t { font-weight: 700; font-size: 14px; line-height: 1.3; } .cal-s { font-size: 12px; color: var(--muted); margin-top: 3px; line-height: 1.35; } .cal-f { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 7px; flex-wrap: wrap; } .cal-monto { font-weight: 800; color: var(--gold); font-size: 13.5px; } .cal-vacio { text-align: center; color: var(--muted); font-size: 13px; padding: 16px 10px; border: 1px dashed var(--line); border-radius: 13px; } .cal-add { display: flex; gap: 8px; margin-top: 11px; } .cal-add .btn { flex: 1; justify-content: center; } /* ===================================================================== 📦 PAQUETES — el texto de venta tal cual se manda por WhatsApp. Se muestra con los saltos de línea y emojis que él escribió (pre-wrap), recortado con degradado hasta que toca "Ver todo". ===================================================================== */ .paq { background: var(--card); border: 1px solid var(--line); border-radius: 15px; padding: 13px 14px 12px; margin-bottom: 12px; } .paq-h { display: flex; align-items: center; gap: 8px; margin-bottom: 9px; } .paq-n { font-weight: 800; font-size: 15px; letter-spacing: -.2px; flex: 1; min-width: 0; } .paq-v { flex: none; font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .4px; background: rgba(61, 220, 151, .14); color: var(--green); padding: 4px 9px; border-radius: 999px; } .paq-txt { white-space: pre-wrap; word-break: break-word; font-size: 12.8px; line-height: 1.5; color: var(--muted); max-height: 148px; overflow: hidden; position: relative; -webkit-mask-image: linear-gradient(180deg, #000 62%, transparent 100%); mask-image: linear-gradient(180deg, #000 62%, transparent 100%); } .paq-txt.abierto { max-height: none; -webkit-mask-image: none; mask-image: none; } .paq-ver { background: none; border: none; color: var(--brand-2); font-family: inherit; font-size: 12px; font-weight: 800; padding: 7px 0 2px; cursor: pointer; } .paq-acc { display: flex; gap: 7px; margin-top: 9px; } .paq-acc .btn { flex: 1; justify-content: center; padding: 11px 8px; } .paq-acc .paq-ed { flex: none; width: 46px; padding: 11px 0; } .tbl .cli { font-weight: 600; } /* Cada proceso de la sesión tiene su color de renglón + su barra de 4px a la izquierda. Con el tinte solo no bastaba: de reojo todos se veían iguales. */ .tbl tbody tr.sin-anticipo td { background: var(--row-red); } .tbl tbody tr.sin-anticipo td:first-child { box-shadow: inset 4px 0 0 var(--red); } .tbl tbody tr.pospuesta td { background: var(--row-green); } .tbl tbody tr.pospuesta td:first-child { box-shadow: inset 4px 0 0 var(--green); } .tbl tbody tr.realizada td { background: var(--row-pink); } .tbl tbody tr.realizada td:first-child { box-shadow: inset 4px 0 0 var(--pink); } .tbl tbody tr.entregada td { background: var(--row-blue); } .tbl tbody tr.entregada td:first-child { box-shadow: inset 4px 0 0 var(--blue); } .tbl tbody tr.cancelada td { background: var(--row-off); color: var(--muted); } .tbl tbody tr.cancelada td:first-child { box-shadow: inset 4px 0 0 var(--muted); } .tbl tbody tr.cancelada .cli { text-decoration: line-through; font-weight: 500; } /* Recordatorio dentro de la tabla de Agenda: tinte índigo + barra, para que se distinga de una sesión de un vistazo (no es sesión, no suma en el pie). */ .tbl tbody tr.rec-row td { background: rgba(124, 140, 255, .1); } .tbl tbody tr.rec-row td:first-child { box-shadow: inset 4px 0 0 #8ea2ff; } .tbl tbody tr.rec-row .cli { font-weight: 600; } /* Tabla que CABE en el ancho del teléfono, sin barra de desplazamiento: se usa en el Histórico (resumen anual, detalle del año, ROAS por año) para que se vea la lista completa de un vistazo, no metida en una cajita que hay que deslizar. */ .tbl-box { border: 1px solid var(--line); border-radius: 15px; overflow: hidden; margin-bottom: 4px; } .tbl.fit { white-space: normal; font-size: 12.5px; } .tbl.fit th, .tbl.fit td { padding: 8px 7px; } .tbl.fit .num { font-variant-numeric: tabular-nums; } /* ---------- 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; } .auth-legal { display: flex; align-items: flex-start; gap: 9px; margin: 2px 2px 12px; font-size: 12.5px; line-height: 1.45; color: var(--muted); cursor: pointer; } .auth-legal input { width: 17px; height: 17px; margin: 1px 0 0; accent-color: var(--brand); flex: 0 0 auto; } .auth-legal a { color: var(--brand); } /* ---------- 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) */ /* Altura reservada para 2 líneas: al cambiar la frase, NADA de abajo se mueve (si el contenido brinca justo al tocar, el toque cae en el botón equivocado) */ .frase-roller { overflow: hidden; min-height: 42px; display: flex; align-items: center; } .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; }