/* Estudio · sistema de diseno (handoff Claude Design, paleta calida arcilla/hueso). */ :root{ /* --muted oscurecido de #87847A a #6A675D para alcanzar contraste AA (>=4.5:1) sobre paper, bone y deep: se usa en texto pequeno (10-13px) por toda la app (metadatos, etiquetas de KPI, estados) que antes quedaba ~3.3:1, ilegible al sol en el celular. */ --bone:#F3F1EA; --paper:#FCFBF7; --deep:#EFEBE0; --ink:#2B2926; --muted:#6A675D; --hair:#E7E3D8; --line2:#DCD7CA; --red:#C96442; --blue:#6E7F63; --yellow:#C79A4E; --accent:#C96442; --r:11px; /* UNA sola declaracion de la voz tipografica. Antes se declaraba aqui (Newsreader / Hanken / Space Mono) y se volvia a declarar 1300 lineas abajo con otras fuentes; la segunda ganaba por cascada, asi que lo que se leia aqui no era lo que se veia en pantalla. El handoff no usa monospace: las etiquetas van en Instrument Sans en mayusculas con letter-spacing. */ --serif:'Cormorant Garamond',Georgia,serif; --sans:'Instrument Sans',system-ui,sans-serif; --mono:'Instrument Sans',system-ui,sans-serif; } *{ box-sizing:border-box; } /* Enlace de salto: oculto hasta enfocarlo con Tab; deja saltar el chat/nav e ir al contenido. */ .skip-link{ position:fixed; left:10px; top:-60px; z-index:100; background:var(--accent,#C96442); color:#fff; padding:10px 16px; border-radius:9px; font-size:14px; text-decoration:none; box-shadow:0 8px 24px -8px rgba(0,0,0,.4); transition:top .15s ease; } .skip-link:focus{ top:10px; } html,body{ margin:0; } /* Foco visible solo para navegacion por teclado (accesibilidad). */ a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible,.chip:focus-visible,.tab:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; } button:disabled{ opacity:.6; cursor:default; } body{ font-family:var(--sans); background:var(--bone); color:var(--ink); -webkit-font-smoothing:antialiased; font-size:15px; } button,input,select,textarea{ font-family:inherit; color:inherit; } ::-webkit-scrollbar{ width:10px; height:10px; } ::-webkit-scrollbar-thumb{ background:#d9d1c0; border:3px solid var(--bone); border-radius:9px; } @keyframes rise{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } } @keyframes pop{ from{ opacity:0; transform:scale(.96); } to{ opacity:1; transform:none; } } /* utilidades */ .fx{ display:flex; } .f1{ flex:1; min-width:0; } .col{ flex-direction:column; } .jb{ justify-content:space-between; } .gap10{ gap:10px; } .fs16{ font-size:16px; } .fs20{ font-size:20px; } .fw5{ font-weight:500; } .fw6{ font-weight:600; } .money{ font-variant-numeric:tabular-nums; font-weight:600; } /* ---------- Login ---------- */ #login{ position:fixed; inset:0; display:none; place-items:center; background:var(--deep); z-index:80; padding:22px; } #login.show{ display:grid; } .login-card{ width:min(94vw,380px); background:var(--paper); border:1px solid var(--hair); border-radius:16px; padding:40px 38px; text-align:center; box-shadow:0 30px 80px -40px rgba(43,40,36,.4); } .login-card .mark{ width:44px; height:44px; margin:0 auto 14px; display:block; } .login-card h1{ font-family:var(--serif); font-weight:500; font-size:30px; margin:0; } .login-card .sub{ font-family:var(--mono); font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:var(--muted); margin:6px 0 26px; } .login-card input{ width:100%; border:1px solid var(--line2); border-radius:9px; background:#FFFDF8; padding:12px 14px; font-size:15px; margin-bottom:12px; outline:none; } .login-card input:focus{ border-color:var(--accent); background:#fff; } .login-err{ color:#B0533A; font-size:13px; min-height:18px; } .auth-switch{ font-size:13px; color:var(--muted); margin-top:6px; } .auth-switch a{ color:var(--accent); cursor:pointer; text-decoration:underline; } /* ---------- Aceptar invitacion / recuperar contrasena (mismo peso visual que #login) ---------- */ #invitacion-card{ position:fixed; inset:0; display:none; place-items:center; background:var(--deep); z-index:80; padding:22px; } #invitacion-card.show{ display:grid; } /* ---------- Proyectos (public/proyectos.js) ---------- El color del proyecto entra como --pj y tiñe la barra de avance, el borde de la tarjeta y la linea de tiempo: es lo que hace reconocible un proyecto de un vistazo. */ .pj-card{ display:block; text-decoration:none; color:inherit; background:var(--paper); border:1px solid var(--hair); border-left:3px solid var(--pj); border-radius:12px; padding:16px 18px; transition:.15s; } .pj-card:hover{ border-color:var(--pj); box-shadow:0 4px 14px -8px rgba(41,40,36,.3); } .pj-card-h{ display:flex; align-items:center; gap:9px; margin-bottom:8px; flex-wrap:wrap; } .pj-ico{ font-size:16px; color:var(--pj); } .pj-nom{ font-weight:600; font-size:15px; flex:1; min-width:0; } .pj-desc{ font-size:13px; color:var(--muted); line-height:1.45; margin-bottom:12px; } .pj-barra{ height:6px; border-radius:99px; background:color-mix(in srgb, var(--ink) 8%, var(--paper)); overflow:hidden; margin:10px 0 8px; } .pj-barra span{ display:block; height:100%; border-radius:99px; transition:width .25s; } .pj-meta{ display:flex; gap:12px; flex-wrap:wrap; font-size:12.5px; color:var(--muted); } .pj-vencidas{ color:#B0533A; font-weight:600; } .pj-resumen{ display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:14px; border:1px solid var(--hair); border-radius:12px; padding:16px 18px; background:var(--paper); } .pj-r-item{ display:flex; flex-direction:column; gap:3px; } .pj-r-lbl{ font-family:var(--mono); font-size:9.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); } .pj-r-val{ font-family:var(--serif); font-size:24px; font-weight:500; line-height:1.1; } .pj-lista{ border:1px solid var(--hair); border-radius:12px; overflow:hidden; } .pj-fila{ display:flex; align-items:center; gap:12px; padding:11px 14px; border-bottom:1px solid var(--hair); cursor:pointer; transition:.12s; } .pj-fila:last-child{ border-bottom:0; } .pj-fila:hover{ background:var(--deep); } .pj-fila.hecha .pj-fila-tit{ text-decoration:line-through; color:var(--muted); } .pj-fila-tit{ flex:1; min-width:0; font-size:14px; } .pj-fila-meta{ display:flex; align-items:center; gap:10px; font-size:12.5px; white-space:nowrap; } .pj-check{ flex:0 0 20px; width:20px; height:20px; border-radius:6px; border:1.5px solid var(--line2); background:transparent; cursor:pointer; color:#fff; font-size:12px; line-height:1; } .pj-check.on{ background:#6E7F63; border-color:#6E7F63; } /* Linea de tiempo: posiciona por fecha sobre el rango del proyecto. No es un Gantt (no dibuja dependencias), es "que cae cuando y que se encima". */ .pj-tl{ border:1px solid var(--hair); border-radius:12px; padding:20px 22px 8px; background:var(--paper); overflow-x:auto; } .pj-tl-eje{ position:relative; height:22px; border-bottom:2px solid var(--hair); margin-bottom:6px; min-width:600px; } .pj-tl-cabo{ position:absolute; left:0; top:0; font-size:11.5px; color:var(--muted); } .pj-tl-cabo.der{ left:auto; right:0; } .pj-tl-hoy{ position:absolute; top:-4px; bottom:-8px; width:2px; background:var(--accent); } .pj-tl-hoy span{ position:absolute; top:-14px; left:50%; transform:translateX(-50%); font-size:10px; color:var(--accent); font-weight:600; } .pj-tl-pista{ position:relative; min-height:120px; min-width:600px; padding-top:10px; } .pj-tl-hito{ position:absolute; top:0; transform:translateX(-50%); max-width:190px; } .pj-tl-punto{ display:block; width:11px; height:11px; border-radius:50%; background:var(--pj); margin:0 auto 8px; } .pj-tl-punto.hecho{ background:#6E7F63; } .pj-tl-punto.vencido{ background:#B0533A; } .pj-tl-caja{ background:var(--deep); border:1px solid var(--hair); border-radius:9px; padding:8px 10px; } .pj-tl-fecha{ font-family:var(--mono); font-size:9.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin-bottom:4px; } .pj-tl-tarea{ font-size:12.5px; line-height:1.35; cursor:pointer; padding:2px 0; } .pj-tl-tarea:hover{ color:var(--accent); } .pj-tl-tarea.hecha{ text-decoration:line-through; color:var(--muted); } /* Caja que contiene al calendario dentro de una pestaña de proyecto: le da el position:relative y la altura que .calfull (absolute; inset:0) necesita para no desbordarse sobre el resto de la pagina. */ .pj-calbox{ position:relative; height:calc(100vh - 340px); min-height:440px; border:1px solid var(--hair); border-radius:12px; overflow:hidden; } .pj-calbox .calfull{ border-radius:12px; } /* Editor de pasos de una plantilla de proyecto. Clases propias (plt-) y NO .pl-*, que ya son del editor de lineas de un paquete con otra rejilla. */ .plt-head,.plt-row{ display:grid; grid-template-columns:1fr 130px 80px 110px 30px; gap:8px; align-items:center; } .plt-head{ font-family:var(--mono); font-size:9.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin-bottom:6px; } .plt-row{ margin-bottom:8px; } .plt-row .inp,.plt-row .sel{ padding:8px 10px; font-size:13px; } @media (max-width:700px){ .plt-head{ display:none; } .plt-row{ grid-template-columns:1fr 1fr; padding:10px; border:1px solid var(--line2); border-radius:10px; } .plt-row .inp[data-k="titulo"]{ grid-column:1/3; } } .pj-colores{ display:flex; gap:7px; flex-wrap:wrap; padding-top:5px; } .pj-color{ width:26px; height:26px; border-radius:50%; border:2px solid transparent; cursor:pointer; } .pj-color.on{ border-color:var(--ink); box-shadow:0 0 0 2px var(--paper) inset; } /* Etiqueta del proyecto dentro del Calendario general */ .cf-proy{ display:inline-block; padding:1px 6px; border-radius:99px; font-size:10px; font-weight:600; background:color-mix(in srgb, var(--pj) 22%, transparent); color:var(--pj); margin-right:4px; } @media (max-width:620px){ .pj-resumen{ grid-template-columns:1fr 1fr; } .pj-tl-hito{ max-width:150px; } } /* ---------- Barra de sesion de soporte (impersonacion) ---------- Fija arriba y con color propio: si estas dentro de la cuenta de otra persona, eso no se puede confundir con tu propia sesion ni un segundo. */ #imp-barra{ position:fixed; top:0; left:0; right:0; z-index:400; display:flex; align-items:center; justify-content:center; gap:14px; flex-wrap:wrap; padding:9px 16px; background:#8A4B2F; color:#FCFBF7; font-size:13px; text-align:center; box-shadow:0 2px 12px -4px rgba(0,0,0,.4); } #imp-barra strong{ font-weight:600; } #imp-barra .btn{ background:rgba(252,251,247,.14); border:1px solid rgba(252,251,247,.4); color:#FCFBF7; } #imp-barra .btn:hover{ background:rgba(252,251,247,.24); } body.con-imp{ padding-top:38px; } @media (max-width:620px){ body.con-imp{ padding-top:62px; } } /* ---------- Cuestionario de bienvenida (mismo peso visual que #login) ---------- */ #onboarding-quiz{ position:fixed; inset:0; display:none; place-items:center; background:var(--deep); z-index:80; padding:22px; overflow-y:auto; } #onboarding-quiz.show{ display:grid; } .quiz-card{ width:min(94vw,560px); text-align:left; max-height:92vh; overflow-y:auto; margin:auto; padding:34px 32px 30px; } .quiz-card .mark{ margin:0 auto 14px; } .quiz-card h1{ text-align:center; } .quiz-card .sub{ text-align:center; margin-bottom:16px; } .quiz-lead{ font-size:13.5px; color:var(--muted); text-align:center; margin:0 0 22px; } .quiz-lead:empty{ display:none; } /* Barra de pasos: reusa .al-wsteps/.al-wstep del wizard del album para que el producto hable un solo idioma visual. Aqui solo se centra y se separa. */ .quiz-steps{ justify-content:center; margin:0 0 18px; } .quiz-steps:empty{ display:none; } .quiz-q{ margin-bottom:20px; } .quiz-qt{ font-size:13.5px; font-weight:600; margin-bottom:4px; } .quiz-ayuda{ font-size:12px; color:var(--muted); margin-bottom:9px; line-height:1.45; } .quiz-qt + .quiz-opts, .quiz-qt + .quiz-ops{ margin-top:9px; } .quiz-opts{ display:flex; flex-wrap:wrap; gap:8px; } .quiz-opt{ font-size:12.5px; font-weight:500; letter-spacing:.01em; padding:8px 14px; border:1px solid var(--line2); background:transparent; color:var(--ink); border-radius:40px; cursor:pointer; transition:.14s; } .quiz-opt:hover{ border-color:var(--accent); } .quiz-opt.on{ background:var(--accent); border-color:var(--accent); color:#fff; } /* Opciones con subtitulo (autonomia, tiempo de entrega): tarjetas apiladas, mismo patron que .xarpiepreg-op. Un chip de una linea no aguanta explicar un trade-off. */ .quiz-ops{ display:flex; flex-direction:column; gap:8px; } .quiz-op{ display:flex; flex-direction:column; gap:2px; text-align:left; padding:11px 14px; border:1px solid var(--line2); border-radius:11px; background:transparent; color:var(--ink); cursor:pointer; transition:.14s; } .quiz-op:hover{ border-color:var(--accent); } .quiz-op.on{ border-color:var(--accent); box-shadow:inset 0 0 0 1px var(--accent); background:var(--bone); } .quiz-op-et{ font-size:13.5px; font-weight:600; } .quiz-op-det{ font-size:12px; color:var(--muted); line-height:1.45; } .quiz-ta{ width:100%; border:1px solid var(--line2); border-radius:9px; background:#FFFDF8; padding:12px 14px; font-size:14px; font-family:inherit; resize:vertical; outline:none; } .quiz-ta:focus{ border-color:var(--accent); background:#fff; } .quiz-btn{ width:100%; margin-top:14px; } /* Atras / Saltar: navegacion secundaria, debajo del boton principal y sin competirle. */ .quiz-nav{ display:flex; justify-content:center; gap:10px; margin-top:12px; } .quiz-nav:empty{ display:none; } .quiz-espera{ text-align:center; padding:10px 0 4px; } .quiz-espera p{ font-size:13.5px; color:var(--muted); margin:16px 0 0; } /* Indeterminada: no sabemos cuanto tarda el modelo, asi que la barra recorre en loop en vez de mentir con un porcentaje. */ .quiz-espera-fill{ width:38%; animation:quizEspera 1.4s ease-in-out infinite; } @keyframes quizEspera{ 0%{ margin-left:0 } 50%{ margin-left:62% } 100%{ margin-left:0 } } .quiz-saludo p{ font-size:14.5px; line-height:1.62; margin:0 0 12px; } .quiz-saludo p:last-child{ margin-bottom:0; } :root[data-theme="dark"] .quiz-ta{ background:#262624; border-color:var(--line2); color:var(--ink); } :root[data-theme="dark"] .quiz-ta:focus{ background:#2C2C2A; } @media (prefers-reduced-motion:reduce){ .quiz-espera-fill{ animation:none; width:100%; } } /* ---------- utilidades varias ---------- */ .muted{ color:var(--muted); } .link-copy{ display:flex; gap:8px; align-items:center; } .link-copy input{ flex:1; } .step-row{ display:grid; grid-template-columns:1fr 70px 90px 116px 28px; gap:8px; align-items:center; margin-bottom:8px; } .step-row input,.step-row select{ padding:8px 10px; font-size:13px; } .badge-inactivo{ opacity:.5; } /* ---------- Shell ---------- */ /* Ancho del riel de Xarpie. Lo pisa el divisor arrastrable (public/app.js) escribiendo --chat-w en linea sobre #app; este clamp es el default y el valor al restablecer. */ #app{ display:none; min-height:100vh; --chat-w: clamp(340px, 30vw, 480px); } #app.show{ display:flex; } .chatpane{ flex:0 0 clamp(320px,34%,460px); background:var(--deep); border-right:1px solid var(--hair); height:100vh; position:sticky; top:0; padding:24px 26px 22px; display:flex; flex-direction:column; min-width:0; } .cp-brand{ display:flex; align-items:center; gap:12px; padding-bottom:18px; border-bottom:1px solid var(--hair); } .mark{ width:40px; height:40px; flex:0 0 40px; } .cp-logout{ margin-left:auto; background:transparent; border:1px solid var(--line2); border-radius:8px; width:30px; height:30px; cursor:pointer; color:var(--muted); font-size:15px; } .cp-logout:hover{ background:#E4DFD2; color:var(--ink); } .greet{ margin-top:18px; padding-bottom:16px; border-bottom:1px solid var(--hair); } .greetkicker{ font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); } .greetname{ font-family:var(--serif); font-weight:500; font-size:31px; letter-spacing:-.012em; line-height:1.04; margin-top:8px; } .chatscroll{ flex:1; min-height:0; overflow-y:auto; overflow-x:hidden; padding:16px 2px 8px; display:flex; flex-direction:column; gap:16px; } .brow{ display:flex; } .brow-ai{ justify-content:flex-start; gap:11px; align-items:flex-start; } .brow-me{ justify-content:flex-end; } .ava{ width:27px; height:27px; flex:0 0 27px; border-radius:50%; background:var(--accent); position:relative; margin-top:3px; } .ava:after{ content:''; position:absolute; width:9px; height:9px; border-radius:50%; background:var(--deep); left:6px; top:6px; } .bubwrap{ min-width:0; max-width:82%; } .bub{ padding:13px 16px; font-size:14.5px; line-height:1.55; border-radius:16px; overflow-wrap:anywhere; white-space:pre-wrap; animation:rise .3s ease both; } .bub-ai{ background:var(--paper); border:1px solid var(--hair); } .bub-me{ background:#EAE3D5; color:var(--ink); border:1px solid var(--hair); } .brow-me .bubwrap{ display:flex; justify-content:flex-end; } .actnote{ font-family:var(--mono); font-size:10.5px; letter-spacing:.04em; color:var(--muted); margin-top:8px; display:flex; align-items:center; gap:7px; } .actnote:before{ content:''; width:8px; height:8px; background:var(--accent); border-radius:50%; display:inline-block; } .bub.typing{ color:var(--muted); font-style:italic; } .chips{ display:flex; flex-wrap:wrap; gap:9px; margin:16px 0 12px; } .chip{ font-size:12.5px; letter-spacing:.02em; padding:8px 15px; border:1px solid var(--line2); background:var(--paper); border-radius:40px; cursor:pointer; color:var(--ink); transition:.14s; } .chip:hover{ border-color:#C6C0B0; background:#ECE7DB; } /* Dos renglones: el texto arriba a todo lo ancho y los botones abajo. Con todo en una sola linea, el riel de Xarpie es angosto y los 4 botones se comian el ancho: el campo se quedaba en 17px y el texto se leia en vertical, una letra por renglon. */ .composer{ display:flex; flex-wrap:wrap; gap:8px; border:1px solid var(--line2); border-radius:16px; background:var(--paper); padding:10px 10px 8px; align-items:center; } .composer #chat-send{ margin-left:auto; } /* El input no muestra outline propio, asi que el foco por teclado se ve en el contenedor. */ .composer:focus-within{ border-color:var(--accent); box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 30%,transparent); } /* Textarea, no input: pegar una lista de precios o un prompt largo en un campo de una sola linea es inusable. Crece solo hasta 200px y de ahi hace scroll (ver autoCrecerChat en app.js). Enter envia, Shift+Enter salta de linea. */ /* order:-1 lo sube al primer renglon; flex-basis 100% lo hace ocupar el ancho completo y empuja los botones al renglon de abajo. min-width:0 para que pueda encogerse. */ .composer textarea#chat-text{ order:-1; flex:1 1 100%; min-width:0; width:100%; border:0; background:transparent; font-family:inherit; font-size:15px; outline:none; padding:4px 2px; resize:none; line-height:1.45; max-height:200px; overflow-y:auto; } /* ---- Xarpie: selector de modo + adjuntar imagen (vision) ---- */ .xarpiemode{ display:flex; gap:6px; margin:2px 0 10px; } .tm-btn{ flex:0 0 auto; font-size:12px; font-weight:600; letter-spacing:.02em; padding:6px 13px; border:1px solid var(--line2); background:transparent; color:var(--muted); border-radius:40px; cursor:pointer; transition:.14s; } .tm-btn:hover{ color:var(--ink); } .tm-btn.on{ background:var(--accent); border-color:var(--accent); color:#fff; } .cp-attach{ flex:0 0 auto; width:34px; height:34px; display:grid; place-items:center; border:0; background:transparent; color:var(--muted); cursor:pointer; border-radius:9px; transition:.14s; } .cp-attach:hover{ background:var(--deep); color:var(--ink); } .cp-attach[hidden]{ display:none; } .cp-attach#chat-mic.listening{ background:var(--red); color:#fff; animation:mic-pulse 1.4s ease-in-out infinite; } .cp-attach#chat-inspect.on{ background:var(--accent); color:#fff; } body.inspeccionando, body.inspeccionando *{ cursor:crosshair !important; } .insp-overlay{ position:fixed; z-index:9999; pointer-events:none; border:2px solid var(--accent); border-radius:6px; background:color-mix(in srgb, var(--accent) 14%, transparent); } @keyframes mic-pulse{ 0%,100%{ box-shadow:0 0 0 0 color-mix(in srgb,var(--red) 45%,transparent); } 50%{ box-shadow:0 0 0 7px color-mix(in srgb,var(--red) 0%,transparent); } } .attach-prev{ display:flex; align-items:center; gap:10px; padding:8px 10px; margin-bottom:8px; border:1px solid var(--line2); border-radius:12px; background:var(--paper); } .attach-prev[hidden]{ display:none; } .attach-prev img{ width:40px; height:40px; object-fit:cover; border-radius:7px; flex:0 0 40px; } .attach-prev img[hidden]{ display:none; } .attach-doc{ width:40px; height:40px; flex:0 0 40px; display:grid; place-items:center; border-radius:7px; background:var(--accent); color:#fff; font-family:var(--mono); font-size:10px; font-weight:700; letter-spacing:.04em; } .attach-doc[hidden]{ display:none; } .attach-name{ flex:1; min-width:0; font-size:12px; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .attach-x{ flex:0 0 auto; width:24px; height:24px; border:0; background:transparent; color:var(--muted); cursor:pointer; font-size:13px; border-radius:6px; } .attach-x:hover{ background:var(--deep); color:var(--ink); } .bub-img{ display:block; max-width:100%; width:auto; max-height:280px; border-radius:10px; margin-bottom:8px; } .brow-me .bub-img{ margin-left:auto; } /* ---------- Content (right) ---------- */ .main{ flex:1; min-width:0; height:100vh; overflow-y:auto; } .topbar{ position:sticky; top:0; z-index:5; background:rgba(243,241,234,.9); backdrop-filter:blur(10px); border-bottom:1px solid var(--hair); display:flex; align-items:center; gap:2px; padding:7px 20px; flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; } .topbar::-webkit-scrollbar{ display:none; } .tab{ position:relative; flex:0 0 auto; white-space:nowrap; font-size:13px; font-weight:500; letter-spacing:.01em; padding:6px 12px; border-radius:8px; border:1px solid transparent; background:transparent; color:var(--muted); cursor:pointer; transition:.13s; } .tab:hover{ background:#ECE7DB; color:var(--ink); } .tab.on{ color:var(--ink); } .tab.on:after{ content:''; position:absolute; left:12px; right:12px; bottom:1px; height:2px; border-radius:2px; background:var(--accent); } .tab-cfg{ margin-left:2px; opacity:.5; font-size:14px; padding:6px 9px; } .tab-cfg:hover{ opacity:1; } /* Posponer una tarea (activa_desde): ver .posp-menu, definido despues de .usermenu porque hereda de esa clase y necesita ganarle el position. */ .posp-wrap{ position:relative; display:inline-flex; } /* navegacion de dos filas: categorias (topbar) + subpestanas (subbar) */ .navbar{ position:sticky; top:0; z-index:6; } .navbar .topbar{ position:static; } .subbar{ display:flex; align-items:center; gap:2px; padding:6px 20px; overflow-x:auto; scrollbar-width:none; background:rgba(239,235,224,.92); backdrop-filter:blur(10px); border-bottom:1px solid var(--hair); } .subbar::-webkit-scrollbar{ display:none; } .subbar[hidden]{ display:none; } .subtab{ flex:0 0 auto; white-space:nowrap; font-size:12.5px; font-weight:500; padding:5px 12px; border-radius:7px; border:1px solid transparent; background:transparent; color:var(--muted); cursor:pointer; transition:.13s; } .subtab:hover{ background:#E4DFD2; color:var(--ink); } .subtab.on{ color:var(--accent); background:color-mix(in srgb, var(--accent) 13%, transparent); } .cp-sess{ font-family:var(--mono); font-size:12px; color:var(--muted); } .wrap{ max-width:1180px; margin:0 auto; padding:28px 32px 80px; overflow-x:auto; } .phead{ display:flex; align-items:flex-end; justify-content:space-between; border-bottom:1px solid var(--hair); padding-bottom:16px; margin-bottom:26px; gap:16px; flex-wrap:wrap; } .ptitle{ font-family:var(--serif); font-weight:500; font-size:36px; letter-spacing:-.01em; line-height:1; } .peyebrow{ position:relative; padding-left:16px; font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin-bottom:9px; } .peyebrow:before{ content:''; position:absolute; left:0; top:5px; width:7px; height:7px; border-radius:50%; background:var(--accent); } /* botones */ .btn{ font-size:13px; font-weight:500; letter-spacing:.04em; padding:10px 18px; border:1px solid var(--line2); border-radius:9px; background:var(--paper); color:var(--ink); cursor:pointer; transition:.14s; } .btn:hover{ background:#ECE7DB; color:var(--ink); } .btn-p{ background:var(--accent); border-color:var(--accent); color:#fff; } .btn-p:hover{ filter:brightness(.94); background:var(--accent); color:#fff; } .btn-sm{ padding:7px 13px; font-size:12px; } .btn-gh{ background:transparent; } .btn-danger{ border-color:#CDA99A; color:#B0533A; background:transparent; } .btn-danger:hover{ background:#B0533A; border-color:#B0533A; color:#fff; } /* pills */ .pill{ display:inline-flex; align-items:center; font-size:11.5px; font-weight:500; letter-spacing:.01em; padding:3px 11px; border-radius:999px; border:1px solid transparent; } .pill-red{ background:#F1DBD0; color:#A2492B; } .pill-blue{ background:#E1E7DD; color:#4E6350; } .pill-yellow{ background:#F0E6CA; color:#836327; } .pill-ink{ background:#E9E5DA; color:#565349; } .pill-ghost{ background:transparent; color:var(--muted); border-color:var(--line2); } /* cards / stats */ .card,.stat,.pblock,.settcard{ background:var(--paper); border:1px solid var(--hair); border-radius:var(--r); box-shadow:0 1px 3px rgba(41,40,36,.04); } .stat{ padding:16px 18px; position:relative; overflow:hidden; } .statlabel{ font-family:var(--mono); font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); } .statnum{ font-family:var(--serif); font-weight:500; font-size:27px; letter-spacing:-.01em; margin-top:6px; line-height:1; font-variant-numeric:tabular-nums; } .statbar{ position:absolute; right:15px; top:16px; width:13px; height:13px; border-radius:50%; box-shadow:0 0 0 4px color-mix(in srgb,var(--paper) 60%,transparent); } .grid3{ display:grid; grid-template-columns:repeat(auto-fit,minmax(132px,1fr)); gap:14px; } .dash{ display:grid; grid-template-columns:1fr 1fr; gap:16px; align-items:start; } .pblock-h{ display:flex; align-items:center; justify-content:space-between; padding:12px 15px; border-bottom:1px solid var(--hair); } .pblock-t{ font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; font-weight:600; } .pblock-t .w-count{ margin-left:8px; vertical-align:1px; } .pbody{ padding:6px 15px 14px; } /* Secciones colapsables de la ficha de cliente (preferencia por usuario). */ .evrow{ display:flex; align-items:center; gap:12px; padding:11px 0; border-bottom:1px solid var(--hair); } .evrow:last-child{ border-bottom:0; } .evtime{ font-family:var(--mono); font-size:12.5px; font-variant-numeric:tabular-nums; width:52px; flex:0 0 52px; color:var(--ink); } .evname{ font-size:14px; line-height:1.2; } .evmeta{ font-size:11.5px; color:var(--muted); margin-top:2px; } .chk{ display:flex; align-items:flex-start; gap:11px; padding:10px 0; border-bottom:1px solid var(--hair); cursor:pointer; } .chk:last-child{ border-bottom:0; } .box{ width:18px; height:18px; flex:0 0 18px; border:1.5px solid var(--ink); border-radius:4px; margin-top:1px; display:flex; align-items:center; justify-content:center; transition:.12s; } .box.done{ background:var(--ink); } .box.done:after{ content:''; width:9px; height:5px; border-left:2px solid var(--paper); border-bottom:2px solid var(--paper); transform:rotate(-45deg) translateY(-1px); } .chktext{ font-size:14px; line-height:1.35; } .chktext.done{ text-decoration:line-through; color:var(--muted); } .empty{ font-size:13px; color:var(--muted); padding:10px 0; } /* ===== Editor de contrato a pantalla completa (#/contrato/:id) — recreacion del handoff "Editor de Contrato.dc.html": overlay fixed;inset:0 (mismo patron que .geditor), paleta oscura PROPIA via --ced-*, panel izquierdo (formulario) + panel derecho (documento sobre "papel"), sin iframe -- la vista previa es un espejo cliente-side de documents.js#contratoBodyV2, hay que mantenerla igual. ===== */ .ced{ --ced-bg:#262624; --ced-panel:#30302e; --ced-panel2:#3a3a36; --ced-line:rgba(255,255,255,.09); --ced-line2:rgba(255,255,255,.05); --ced-ink:#f5f4ee; --ced-ink2:#bdbbb0; --ced-ink3:#84827b; --ced-accent:#d97757; --ced-accent2:#bd5d3a; --ced-ok:#93a986; --ced-gold:#cfa15e; --ced-red:#c9605a; --ced-serif:'Cormorant Garamond',Georgia,serif; --ced-paper:#f4efe9; --ced-paperink:#221d19; --ced-papermut:#6a6158; --ced-paperline:rgba(34,29,25,.14); position:fixed; inset:0; z-index:40; display:flex; flex-direction:column; background:var(--ced-bg); font-family:'Instrument Sans',var(--sans); color:var(--ced-ink); -webkit-font-smoothing:antialiased; } .ced button{ font-family:inherit; cursor:pointer; border:none; background:none; color:inherit; } .ced input,.ced textarea{ font-family:inherit; } .ced .ced-serif{ font-family:var(--ced-serif); font-weight:500; line-height:1; } .ced .ced-label{ text-transform:uppercase; letter-spacing:.16em; font-size:10px; font-weight:600; color:var(--ced-ink3); } /* cabecera */ .ced-top{ display:flex; align-items:center; gap:16px; padding:16px 26px; border-bottom:1px solid var(--ced-line); flex:none; flex-wrap:wrap; } .ced-iconbtn{ width:38px; height:38px; border-radius:100px; border:1px solid var(--ced-line); display:flex; align-items:center; justify-content:center; color:var(--ced-ink2); transition:.14s; flex:none; font-size:16px; } .ced-iconbtn:hover{ border-color:var(--ced-ink3); color:var(--ced-ink); } .ced-thead{ display:flex; flex-direction:column; gap:3px; } .ced-tnum{ font-family:var(--ced-serif); font-size:24px; font-weight:600; line-height:1; } .ced-tsub{ font-size:12px; color:var(--ced-ink3); } .ced-stpill{ display:inline-flex; align-items:center; gap:7px; padding:6px 13px; border-radius:100px; font-size:12px; font-weight:600; white-space:nowrap; } .ced-st-borrador{ background:rgba(189,187,176,.14); color:var(--ced-ink2); } .ced-st-enviado{ background:rgba(217,119,87,.16); color:var(--ced-accent); } .ced-st-falta{ background:rgba(207,161,94,.16); color:var(--ced-gold); } .ced-st-activo{ background:rgba(147,169,134,.16); color:var(--ced-ok); } .ced-st-vencido{ background:rgba(201,96,90,.16); color:var(--ced-red); } .ced-dot{ width:7px; height:7px; border-radius:100px; display:inline-block; background:currentColor; } .ced-spread{ margin-left:auto; display:flex; align-items:center; gap:10px; flex-wrap:wrap; position:relative; } .ced-btn{ display:inline-flex; align-items:center; gap:8px; padding:11px 18px; border-radius:100px; font-size:13px; font-weight:600; transition:.16s; border:1px solid var(--ced-line); color:var(--ced-ink); white-space:nowrap; } .ced-btn:hover{ border-color:var(--ced-ink3); } .ced-btn:disabled{ opacity:.5; cursor:not-allowed; } .ced-btn.accent{ background:var(--ced-accent); border-color:var(--ced-accent); color:#fff; } .ced-btn.accent:hover{ background:var(--ced-accent2); } .ced-btn.sm{ padding:8px 14px; font-size:12.5px; } .ced-savestate{ font-size:11px; color:var(--ced-ink3); white-space:nowrap; } /* panel flotante (Firmantes/Configuracion/Acciones) -- mismo patron abrir/cerrar/ click-afuera/Escape que .usermenu, con paleta --ced-* en vez de la del CRM. */ .ced-panel{ position:absolute; top:100%; right:0; margin-top:8px; width:290px; background:var(--ced-panel); border:1px solid var(--ced-line); border-radius:14px; padding:16px; box-shadow:0 20px 50px -20px rgba(0,0,0,.5); z-index:5; } .ced-panel-t{ font-family:var(--ced-serif); font-size:16px; font-weight:600; margin:0 0 12px; } .ced-prow{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:9px 0; border-bottom:1px solid var(--ced-line2); font-size:13px; } .ced-prow:last-child{ border-bottom:0; } .ced-prow .pn{ font-weight:600; } .ced-prow .ps{ color:var(--ced-ink3); font-size:11.5px; margin-top:2px; } .ced-prow .ps.ok{ color:var(--ced-ok); } .ced-pact{ width:100%; text-align:left; padding:9px 4px; font-size:13px; border-radius:8px; transition:.14s; } .ced-pact:hover{ background:var(--ced-panel2); } .ced-pact.danger:hover{ color:var(--ced-red); } .ced-psep{ height:1px; background:var(--ced-line2); margin:6px 0; } .ced-toggle{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 0; } .ced-toggle .tt{ font-size:13px; font-weight:600; } .ced-toggle .ts{ font-size:11px; color:var(--ced-ink3); margin-top:2px; } .ced-sw2{ width:38px; height:22px; border-radius:100px; background:var(--ced-line); position:relative; transition:.2s; flex:none; } .ced-sw2:after{ content:""; position:absolute; top:2px; left:2px; width:18px; height:18px; border-radius:100px; background:var(--ced-ink); transition:.2s; } .ced-sw2.on{ background:var(--ced-accent); } .ced-sw2.on:after{ left:18px; background:#fff; } /* cuerpo: 2 paneles */ .ced-body{ flex:1; min-height:0; display:flex; } .ced-editor{ width:46%; max-width:620px; min-width:400px; flex:none; overflow-y:auto; border-right:1px solid var(--ced-line); padding:26px 30px 60px; } .ced-sec{ margin-bottom:30px; } .ced-sechd{ display:flex; align-items:center; gap:10px; margin-bottom:16px; } .ced-sechd .n{ width:22px; height:22px; border-radius:100px; background:var(--ced-panel); border:1px solid var(--ced-line); display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; color:var(--ced-ink2); flex:none; } .ced-sechd h3{ font-family:var(--ced-serif); font-size:19px; font-weight:600; margin:0; } .ced-grid2{ display:grid; grid-template-columns:1fr 1fr; gap:14px; } .ced-field{ display:flex; flex-direction:column; gap:7px; margin-bottom:14px; } .ced-field label{ font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--ced-ink3); font-weight:600; } .ced-inp{ background:var(--ced-panel); border:1px solid var(--ced-line); border-radius:11px; padding:12px 14px; font-size:14px; color:var(--ced-ink); outline:none; transition:.14s; width:100%; } .ced-inp:focus{ border-color:rgba(217,119,87,.55); } .ced-inp::placeholder{ color:var(--ced-ink3); } .ced-static{ background:var(--ced-panel); border:1px solid var(--ced-line); border-radius:11px; padding:12px 14px; font-size:14px; color:var(--ced-ink); } .ced-static a{ color:var(--ced-accent); text-decoration:none; font-size:12px; font-weight:600; } .ced-static a:hover{ text-decoration:underline; } .ced-money{ position:relative; } .ced-money .cur{ position:absolute; left:14px; top:50%; transform:translateY(-50%); color:var(--ced-ink3); font-size:14px; } .ced-money .ced-inp{ padding-left:28px; font-family:var(--ced-serif); font-size:20px; font-weight:600; } /* plantillas */ .ced-tplsec{ margin:-4px 0 26px; padding-bottom:26px; border-bottom:1px solid var(--ced-line); } .ced-tplgrid{ display:grid; grid-template-columns:repeat(2,1fr); gap:10px; } .ced-tpl{ position:relative; text-align:left; background:var(--ced-panel); border:1px solid var(--ced-line); border-radius:13px; padding:14px 15px; transition:.14s; cursor:pointer; } .ced-tpl:hover{ border-color:var(--ced-ink3); } .ced-tpl.on{ border-color:var(--ced-accent); background:rgba(217,119,87,.07); } .ced-tpl .tn{ font-family:var(--ced-serif); font-size:17px; font-weight:600; line-height:1.1; padding-right:20px; } .ced-tpl .td{ font-size:11.5px; color:var(--ced-ink3); margin-top:5px; line-height:1.45; max-height:32px; overflow:hidden; } .ced-tpl .tmeta{ font-size:11px; color:var(--ced-ink2); margin-top:9px; display:flex; gap:10px; } .ced-tpl .cbadge{ position:absolute; top:12px; right:12px; font-size:8.5px; letter-spacing:.12em; text-transform:uppercase; font-weight:700; color:var(--ced-gold); } .ced-tpl.on .tick{ position:absolute; top:11px; right:11px; color:var(--ced-accent); } .ced-tpldel{ position:absolute; bottom:11px; right:11px; color:var(--ced-ink3); opacity:0; transition:.14s; } .ced-tpl:hover .ced-tpldel{ opacity:1; } .ced-tpldel:hover{ color:var(--ced-accent); } .ced-tplnew{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; border:1px dashed var(--ced-line); border-radius:13px; padding:14px; color:var(--ced-ink2); font-size:13px; font-weight:600; transition:.14s; min-height:96px; width:100%; } .ced-tplnew:hover{ border-color:var(--ced-accent); color:var(--ced-accent); } .ced-tplsave{ display:flex; gap:10px; margin-top:10px; } .ced-tplsave .ced-inp{ flex:1; } .ced-tplbar{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top:12px; padding:12px 14px; background:var(--ced-panel); border:1px solid var(--ced-line); border-radius:13px; } .ced-tplbar .bn{ font-family:var(--ced-serif); font-size:16px; font-weight:600; display:flex; align-items:center; gap:9px; } .ced-tplbar .pencil{ color:var(--ced-ink3); } .ced-tplbar .pencil:hover{ color:var(--ced-accent); } .ced-tpldirty{ display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:600; color:var(--ced-gold); } .ced-tplbar .acts{ margin-left:auto; display:flex; gap:8px; } .ced-chiprow{ display:flex; gap:8px; flex-wrap:wrap; } .ced-pctchip{ padding:9px 15px; border-radius:100px; border:1px solid var(--ced-line); font-size:13px; font-weight:600; color:var(--ced-ink2); transition:.14s; } .ced-pctchip.on{ background:var(--ced-accent); border-color:var(--ced-accent); color:#fff; } .ced-pctchip:not(.on):hover{ border-color:var(--ced-ink3); color:var(--ced-ink); } .ced-calcbox{ background:var(--ced-panel); border:1px solid var(--ced-line); border-radius:14px; padding:4px 16px; margin-top:14px; } .ced-calcrow{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:13px 0; border-bottom:1px solid var(--ced-line2); font-size:13.5px; } .ced-calcrow:last-child{ border-bottom:none; } .ced-calcrow .cl{ color:var(--ced-ink2); } .ced-calcrow .cv{ font-family:var(--ced-serif); font-size:18px; font-weight:600; } .ced-calcrow.tot .cv{ color:var(--ced-accent); } /* servicios */ .ced-svc{ display:flex; align-items:center; gap:10px; margin-bottom:9px; transition:.14s; } .ced-svc.dragging{ opacity:.4; } .ced-handle{ color:var(--ced-ink3); cursor:grab; flex:none; display:flex; padding:4px; touch-action:none; } .ced-chk{ width:22px; height:22px; border-radius:7px; border:1.5px solid var(--ced-ink3); flex:none; display:flex; align-items:center; justify-content:center; transition:.14s; color:transparent; font-size:13px; } .ced-chk.on{ background:var(--ced-accent); border-color:var(--ced-accent); color:#fff; } .ced-svc .ced-inp{ flex:1; } .ced-svc.off .ced-inp{ color:var(--ced-ink3); text-decoration:line-through; } .ced-del{ width:34px; height:34px; border-radius:9px; border:1px solid var(--ced-line); display:flex; align-items:center; justify-content:center; color:var(--ced-ink3); flex:none; transition:.14s; font-size:14px; } .ced-del:hover{ border-color:var(--ced-accent); color:var(--ced-accent); } .ced-hint{ font-size:12px; color:var(--ced-ink3); margin-top:10px; line-height:1.5; } .ced-addbtn{ display:inline-flex; align-items:center; gap:8px; margin-top:12px; padding:10px 16px; border-radius:100px; border:1px dashed var(--ced-line); font-size:13px; font-weight:600; color:var(--ced-ink2); transition:.14s; } .ced-addbtn:hover{ border-color:var(--ced-accent); color:var(--ced-accent); } /* clausulas */ .ced-clause{ display:flex; gap:12px; padding:12px 0; border-bottom:1px solid var(--ced-line2); } .ced-clause:last-child{ border-bottom:none; } .ced-clause .ct{ flex:1; font-size:13.5px; line-height:1.55; color:var(--ced-ink2); } .ced-clause.off .ct{ color:var(--ced-ink3); opacity:.6; } .ced-clause .ced-chk{ margin-top:1px; } .ced-addclause{ display:flex; gap:10px; margin-top:14px; } .ced-addclause .ced-inp{ flex:1; } .ced-notice{ background:var(--ced-panel); border:1px solid var(--ced-line); border-radius:13px; padding:16px; font-size:13px; line-height:1.6; color:var(--ced-ink2); } .ced-notice p{ margin:0 0 12px; } /* panel derecho: preview */ .ced-preview{ flex:1; min-width:0; overflow-y:auto; background:repeating-linear-gradient(45deg,#211f1d,#211f1d 12px,#232120 12px,#232120 24px); padding:34px; } .ced-previewbar{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:20px; } .ced-paper{ max-width:640px; margin:0 auto; background:var(--ced-paper); color:var(--ced-paperink); border-radius:4px; box-shadow:0 30px 80px -30px rgba(0,0,0,.6); padding:56px 58px 50px; } .ced-pbrand{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding-bottom:20px; border-bottom:1px solid var(--ced-paperline); } .ced-pbrand .pn{ font-family:var(--ced-serif); font-size:22px; font-weight:600; line-height:1.05; } .ced-pbrand img{ display:block; max-height:32px; margin-bottom:6px; } .ced-pbrand .pe{ font-size:9.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--ced-papermut); margin-top:5px; } .ced-pbrand .pmeta{ text-align:right; font-size:11px; color:var(--ced-papermut); line-height:1.7; } .ced-ptitle{ font-family:var(--ced-serif); font-size:34px; font-weight:600; line-height:1.05; margin:30px 0 6px; } .ced-pparties{ font-size:13.5px; line-height:1.7; color:#453e37; } .ced-pparties b{ color:var(--ced-paperink); font-weight:600; } .ced-plabel{ font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--ced-papermut); font-weight:700; margin:32px 0 12px; } .ced-psvc{ display:flex; align-items:flex-start; gap:11px; padding:8px 0; font-size:14px; border-bottom:1px solid rgba(34,29,25,.07); } .ced-psvc:last-child{ border-bottom:none; } .ced-psvc .pc{ color:var(--ced-accent); flex:none; margin-top:2px; } .ced-ptable{ border:1px solid var(--ced-paperline); border-radius:8px; overflow:hidden; } .ced-ptrow{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 18px; border-bottom:1px solid rgba(34,29,25,.08); font-size:14px; } .ced-ptrow:last-child{ border-bottom:none; } .ced-ptrow .pl{ color:#453e37; } .ced-ptrow .pl small{ display:block; color:var(--ced-papermut); font-size:11.5px; margin-top:2px; } .ced-ptrow .pv{ font-family:var(--ced-serif); font-size:19px; font-weight:600; } .ced-ptrow.grand{ background:rgba(217,119,87,.08); } .ced-ptrow.grand .pv{ color:var(--ced-accent2); font-size:22px; } .ced-pclause{ font-size:12.5px; line-height:1.75; color:#453e37; margin-bottom:10px; display:flex; gap:9px; } .ced-pclause .pcn{ font-weight:700; color:var(--ced-paperink); flex:none; } .ced-psign{ display:grid; grid-template-columns:1fr 1fr; gap:40px; margin-top:44px; } .ced-psignbox{ border-top:1px solid var(--ced-paperink); padding-top:10px; } .ced-psignbox img{ display:block; max-height:48px; margin-bottom:4px; } .ced-psignbox .snm{ font-size:13px; font-weight:600; } .ced-psignbox .sst{ font-size:11px; color:var(--ced-papermut); margin-top:2px; } .ced-psignbox.done .snm{ font-family:var(--ced-serif); font-style:italic; font-size:22px; font-weight:500; } .ced-psignbox.done .sst{ color:var(--ced-ok); font-weight:600; } .ced-pfoot{ text-align:center; font-size:11px; color:var(--ced-papermut); margin-top:34px; } @media (max-width:1080px){ .ced-body{ flex-direction:column; } .ced-editor{ width:100%; max-width:none; min-width:0; border-right:none; border-bottom:1px solid var(--ced-line); } .ced-preview{ padding:22px; } .ced-paper{ padding:40px 32px; } } .dz-sw{ width:28px; height:28px; border-radius:50%; border:2px solid transparent; cursor:pointer; padding:0; } .dz-sw.on{ border-color:var(--ink); box-shadow:0 0 0 2px var(--paper), 0 0 0 3px var(--ink); } .dz-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; } .dz-card{ border:1px solid var(--line2); border-radius:10px; background:var(--paper); cursor:pointer; padding:0; height:64px; display:flex; align-items:center; justify-content:center; overflow:hidden; font-size:11px; color:var(--muted); text-align:center; } .dz-card.on{ border-color:var(--accent); box-shadow:inset 0 0 0 1px var(--accent); } .dz-card img{ width:100%; height:100%; object-fit:cover; } .dz-card-add{ font-size:12px; } /* tables */ .table{ width:100%; border-collapse:collapse; background:var(--paper); border:1px solid var(--hair); border-radius:var(--r); overflow:hidden; } .table th{ text-align:left; font-family:var(--mono); font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); font-weight:400; padding:13px 16px; border-bottom:1px solid var(--hair); } .table td{ padding:14px 16px; border-bottom:1px solid var(--hair); font-size:14px; vertical-align:middle; } .trow{ cursor:pointer; transition:.1s; } .trow:hover{ background:#F1EEE5; } .trow:last-child td{ border-bottom:0; } .tname{ font-weight:600; } .tsub{ font-size:12px; color:var(--muted); margin-top:2px; } .docnum{ font-family:var(--mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); } .toolbar{ display:flex; gap:12px; align-items:center; margin-bottom:18px; flex-wrap:wrap; } .search{ flex:1; min-width:200px; display:flex; align-items:center; gap:10px; border:1px solid var(--line2); border-radius:10px; background:var(--paper); padding:9px 15px; } .search input{ border:0; background:transparent; outline:none; font-size:14px; flex:1; } .search .navdot{ width:11px; height:11px; flex:0 0 11px; border:1.5px solid #C6C0B0; border-radius:50%; } .fchips{ display:flex; gap:8px; flex-wrap:wrap; } .fchips[hidden]{ display:none; } .fchip{ font-size:12px; letter-spacing:.05em; text-transform:uppercase; padding:8px 14px; border:1px solid var(--line2); border-radius:8px; background:var(--paper); cursor:pointer; color:var(--muted); } .fchip.on{ background:var(--accent); color:#fff; border-color:var(--accent); } /* modal */ .ov{ position:fixed; inset:0; background:rgba(43,41,38,.42); display:none; align-items:center; justify-content:center; z-index:60; padding:24px; } .ov.show{ display:flex; animation:pop .18s ease both; } .modal{ width:520px; max-width:100%; max-height:90vh; overflow-y:auto; background:var(--paper); border:1px solid var(--line2); border-radius:16px; animation:pop .2s ease both; } .modalwide{ width:600px; } /* Editor de paquete: lleva una tabla de elementos (concepto + entregable + 3 numeros) que no cabe en 600px sin quedar apretada. */ .modalxl{ width:920px; } /* ---------- Editor de paquete: lineas con precio y costo ---------- */ .pl-head,.pl-row{ display:grid; grid-template-columns:1fr 136px 62px 92px 92px 86px 30px; gap:8px; align-items:center; } .pl-head.nocosto,.pl-row.nocosto{ grid-template-columns:1fr 136px 62px 92px 86px 30px; } .pl-head{ font-family:var(--mono); font-size:9.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin-bottom:6px; } .pl-row{ margin-bottom:8px; } .pl-row .inp,.pl-row .sel{ padding:8px 10px; font-size:13px; } .pl-sub{ text-align:right; font-size:13px; color:var(--muted); font-variant-numeric:tabular-nums; } .pl-chips{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:12px; } .pl-chips .chip{ padding:6px 12px; font-size:12px; } .pl-calc{ margin-top:18px; padding:14px 16px; border:1px solid var(--hair); border-radius:12px; background:color-mix(in srgb, var(--ink) 3%, var(--paper)); } .pl-crow{ display:flex; justify-content:space-between; align-items:center; gap:12px; padding:5px 0; font-size:13.5px; } /* Sin esto el [hidden] no surte efecto: una regla de autor con display gana contra la hoja del navegador, y las filas ocultas se seguian viendo. */ .pl-crow[hidden]{ display:none; } .pl-crow .money{ font-variant-numeric:tabular-nums; } .pl-crow.tot{ border-top:1px solid var(--hair); margin-top:8px; padding-top:11px; font-weight:600; font-size:15px; } .pl-crow.tot .v{ color:var(--accent); font-variant-numeric:tabular-nums; } .pl-money{ position:relative; display:inline-block; } .pl-money .cur{ position:absolute; left:11px; top:50%; transform:translateY(-50%); color:var(--muted); font-size:13px; pointer-events:none; } .pl-money .inp{ width:150px; padding-left:24px; text-align:right; font-size:15px; font-weight:600; } .pl-derivados{ margin-top:12px; padding:10px 14px; border-radius:10px; background:var(--bone); font-size:13px; color:var(--muted); } .pl-derivados .flabel{ display:inline; margin-right:6px; } @media (max-width:760px){ .pl-head{ display:none; } .pl-row,.pl-row.nocosto{ grid-template-columns:1fr 1fr; gap:6px; padding:10px; border:1px solid var(--line2); border-radius:10px; } .pl-row .inp[data-k="concepto"]{ grid-column:1/3; } .pl-sub{ text-align:left; } } .modalxl{ width:960px; max-width:96vw; } .mhead{ display:flex; align-items:center; justify-content:space-between; padding:20px 24px; border-bottom:1px solid var(--hair); } .mtitle{ font-family:var(--serif); font-weight:500; font-size:22px; } .x{ width:30px; height:30px; border:1px solid var(--line2); border-radius:8px; background:transparent; cursor:pointer; font-size:15px; line-height:1; color:var(--ink); } .x:hover{ background:#ECE7DB; } .mbody{ padding:22px 24px; } .field{ margin-bottom:16px; } .flabel{ font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-bottom:6px; display:block; } .inp,.sel,.ta{ width:100%; font-size:14px; padding:10px 12px; border:1px solid var(--line2); border-radius:9px; background:#FFFDF8; outline:none; } .inp:focus,.sel:focus,.ta:focus{ background:#fff; border-color:var(--accent); } .ta{ resize:vertical; min-height:76px; } .frow{ display:grid; grid-template-columns:1fr 1fr; gap:14px; } .mfoot{ display:flex; gap:10px; align-items:center; padding:18px 24px; border-top:1px solid var(--hair); } .paybox{ background:#F6F3EB; border:1px solid var(--hair); border-radius:10px; padding:16px; margin-top:4px; } .payline{ display:flex; justify-content:space-between; font-size:13px; padding:6px 0; border-bottom:1px solid var(--hair); } .payline:last-child{ border-bottom:0; } .paybig{ display:flex; justify-content:space-between; align-items:baseline; padding-top:10px; } .settcard{ padding:28px 30px; max-width:680px; } /* toast */ #toast{ position:fixed; left:50%; bottom:34px; transform:translateX(-50%) translateY(14px); background:var(--ink); color:var(--paper); padding:13px 22px; border-radius:10px; font-size:14px; z-index:90; display:flex; align-items:center; gap:11px; opacity:0; pointer-events:none; transition:.25s; } #toast.show{ opacity:1; transform:translateX(-50%) translateY(0); } #toast:before{ content:''; width:9px; height:9px; background:var(--accent); border-radius:50%; } /* FAB del asistente (solo movil) */ #fab{ display:none; position:fixed; right:20px; bottom:20px; z-index:55; background:var(--accent); color:#fff; border:0; border-radius:30px; padding:13px 20px; font-size:14px; cursor:pointer; box-shadow:0 12px 30px -8px rgba(43,40,36,.45); align-items:center; gap:8px; } /* Backdrop del chat de Xarpie en movil: oscurece el CRM detras y cierra al tocar. Fuera de movil nunca se muestra (el chat es una columna fija, no un overlay). */ .cp-backdrop{ display:none; } @media (max-width:860px){ .chatpane{ position:fixed; left:0; top:0; z-index:70; width:min(92vw,420px); height:100vh; transform:translateX(-100%); transition:transform .24s ease; box-shadow:14px 0 40px -20px rgba(0,0,0,.4); } .chatpane.open{ transform:translateX(0); } #app.show{ display:block; } .main{ height:100vh; } #fab{ display:flex; } .dash{ grid-template-columns:1fr; } .frow{ grid-template-columns:1fr; } .cp-sess{ display:none; } /* Señal de que la barra de pestañas se desliza: sin esto, Dinero/Sitio/Marketing quedan fuera de pantalla a la derecha y el usuario no sabe que existen. */ .navbar{ position:sticky; } .navbar::after{ content:''; position:absolute; top:0; right:0; bottom:0; width:26px; pointer-events:none; background:linear-gradient(to right, transparent, var(--bone) 78%); z-index:7; } .cp-backdrop.show{ display:block; position:fixed; inset:0; z-index:69; background:rgba(43,41,38,.42); animation:pop .18s ease both; } } /* Boton de cerrar el chat de Xarpie (visible en movil, dentro de la cabecera del panel). */ .cp-close{ display:none; } @media (max-width:860px){ .cp-close{ display:grid; place-items:center; margin-left:8px; width:30px; height:30px; flex:0 0 30px; border:1px solid var(--line2); border-radius:8px; background:transparent; color:var(--muted); cursor:pointer; font-size:15px; line-height:1; } .cp-close:hover{ background:#E4DFD2; color:var(--ink); } } /* ---------- Editor de la pagina publica (landing) ---------- */ .lp-editor{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:22px; align-items:start; } .lp-panel{ display:flex; flex-direction:column; gap:16px; min-width:0; } .lp-card-sec{ max-width:none; padding:20px 22px; } .lp-status{ font-size:13px; color:var(--muted); } .lp-status .pill{ margin-right:6px; } .lp-domain{ font-size:13px; color:var(--muted); white-space:nowrap; } .lp-tpls{ display:flex; flex-wrap:wrap; gap:8px; margin-top:6px; } .lp-tpl{ padding:8px 14px; border:1px solid var(--line2); border-radius:8px; background:#FFFDF8; font-size:13px; cursor:pointer; } .lp-tpl.on{ border-color:var(--accent); background:#fff; color:var(--accent); font-weight:600; } .lp-color{ width:100%; height:38px; padding:2px; border:1px solid var(--line2); border-radius:9px; background:#fff; cursor:pointer; } .lp-blk{ border:1px solid var(--hair); border-radius:11px; margin-bottom:12px; overflow:hidden; background:#fff; } .lp-blk-h{ display:flex; align-items:center; justify-content:space-between; padding:9px 14px; background:var(--bone); border-bottom:1px solid var(--hair); } .lp-blk-t{ font-weight:600; font-size:13.5px; } .lp-blk-actions{ display:flex; gap:4px; } .lp-mini{ width:26px; height:26px; border:1px solid var(--line2); background:#FFFDF8; border-radius:7px; cursor:pointer; font-size:12px; color:var(--muted); } .lp-mini:disabled{ opacity:.4; cursor:default; } .lp-mini-x:hover{ border-color:var(--red); color:var(--red); } .lp-blk-body{ padding:16px 14px; } .lp-blk-body .field:last-child{ margin-bottom:0; } .lp-note{ font-size:12.5px; margin:4px 0 0; } .lp-addwrap{ display:flex; gap:8px; margin-top:6px; } .lp-addwrap .sel{ flex:1; } .lp-items{ display:flex; flex-direction:column; gap:8px; } .lp-item{ display:flex; gap:6px; align-items:center; } .lp-item .inp{ padding:8px 10px; font-size:13px; } .lp-item-x{ border:0; background:transparent; cursor:pointer; color:var(--muted); font-size:13px; padding:4px; } .lp-item-x:hover{ color:var(--red); } .lp-thumbs{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; } .lp-thumb{ position:relative; width:64px; height:64px; border-radius:8px; overflow:hidden; border:1px solid var(--hair); } .lp-thumb.lp-thumb-lg{ width:120px; height:80px; } .lp-thumb img{ width:100%; height:100%; object-fit:cover; } .lp-thumb-x{ position:absolute; top:2px; right:2px; background:rgba(0,0,0,.55); color:#fff; width:20px; height:20px; border-radius:50%; border:0; line-height:1; cursor:pointer; font-size:11px; } /* Galeria con texto alternativo (SEO de imagenes): la miniatura crece para dejar espacio a un input chico debajo, en vez del cuadrado fijo sin texto. */ .lp-thumbs-alt .lp-thumb{ width:96px; height:auto; overflow:visible; border:0; display:flex; flex-direction:column; gap:4px; } .lp-thumbs-alt .lp-thumb img{ width:96px; height:64px; border-radius:8px; border:1px solid var(--hair); } .lp-thumb-alt{ width:96px; font-size:10.5px; padding:5px 7px; } .lp-add-img{ border:1px dashed var(--line2); background:#FFFDF8; border-radius:8px; padding:0 14px; height:64px; min-width:70px; cursor:pointer; font-size:12.5px; color:var(--muted); } .lp-add-img:hover{ border-color:var(--accent); color:var(--accent); } /* Galeria digital (fotos del evento, CRM y portal comparten el mismo grid). */ .gal-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(96px, 1fr)); gap:8px; } .gal-tile{ position:relative; aspect-ratio:1; border-radius:8px; overflow:hidden; border:1px solid var(--hair); background:var(--hair); } .gal-tile img{ width:100%; height:100%; object-fit:cover; display:block; } .gal-tile-x{ position:absolute; top:4px; right:4px; background:rgba(0,0,0,.6); color:#fff; width:22px; height:22px; border-radius:50%; border:0; line-height:1; cursor:pointer; font-size:12px; } .lp-savebar{ position:sticky; bottom:0; display:flex; align-items:center; justify-content:flex-end; gap:14px; padding:12px 0 4px; background:var(--bone); } .lp-dirty{ font-size:12.5px; color:var(--yellow); font-weight:600; } .lp-previewwrap{ position:sticky; top:18px; border:1px solid var(--hair); border-radius:12px; overflow:hidden; background:#fff; } .lp-preview-top{ font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); padding:10px 14px; border-bottom:1px solid var(--hair); background:var(--paper); } .lp-preview{ width:100%; height:calc(100vh - 150px); min-height:520px; border:0; display:block; background:#fff; } @media (max-width:980px){ .lp-editor{ grid-template-columns:1fr; } .lp-previewwrap{ position:static; } .lp-preview{ height:70vh; } } /* ---------- Disponibilidad semanal (Citas) ---------- */ .ci-day{ display:grid; grid-template-columns:110px 1fr; gap:12px; align-items:start; padding:10px 0; border-bottom:1px solid var(--hair); } .ci-day:last-child{ border-bottom:0; } .ci-day-n{ font-weight:600; font-size:14px; padding-top:8px; } .ci-ranges{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; } .ci-range{ display:flex; align-items:center; gap:6px; background:var(--paper); border:1px solid var(--hair); border-radius:9px; padding:5px 8px; } .ci-range .inp{ width:auto; padding:6px 8px; font-size:13px; } .ci-a{ color:var(--muted); font-size:13px; } .ci-none{ font-size:13px; padding-top:8px; } .ci-add{ white-space:nowrap; } @media (max-width:560px){ .ci-day{ grid-template-columns:1fr; gap:6px; } .ci-day-n{ padding-top:0; } } /* ---------- Ficha del cliente ---------- */ .lp-back{ display:inline-block; color:var(--muted); text-decoration:none; font-size:13px; cursor:pointer; } .lp-back:hover{ color:var(--accent); } .cl-inforow{ display:flex; justify-content:space-between; gap:12px; padding:9px 0; border-bottom:1px solid var(--hair); font-size:14px; } .cl-inforow:last-child{ border-bottom:0; } .cl-notas{ padding:10px 0 2px; border-top:1px solid var(--hair); margin-top:2px; } .cl-notas div:last-child{ white-space:pre-wrap; font-size:14px; margin-top:4px; } .cl-ev{ padding:14px 0; border-bottom:1px solid var(--hair); } .cl-ev:last-child{ border-bottom:0; } .cl-ev-money{ display:flex; justify-content:space-between; align-items:baseline; gap:10px; margin-top:8px; font-size:13px; } .cl-entregables{ display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin-top:10px; } .cl-addpay{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-top:14px; padding-top:14px; border-top:1px solid var(--hair); } .cl-addpay[hidden]{ display:none; } .cl-addpay .inp{ width:110px; } .cl-addpay .sel{ width:auto; flex:1; min-width:120px; } .cl-addtask{ display:flex; gap:8px; align-items:center; margin-top:12px; padding-top:12px; border-top:1px solid var(--hair); } /* Checklist de servicios del contrato (Fase 2): activable/editable/reordenable. */ .cd-serv-row{ display:flex; align-items:center; gap:8px; padding:5px 0; } .cd-serv-row.dragging{ opacity:.4; } .cd-serv-drag{ cursor:grab; color:var(--muted); font-size:13px; line-height:1; flex:0 0 auto; user-select:none; } .cd-serv-row .cd-serv-activo{ flex:0 0 auto; width:16px; height:16px; } .cd-serv-row .cd-serv-texto{ flex:1; min-width:0; } .cd-serv-rm{ flex:0 0 auto; width:26px; height:26px; border:1px solid var(--line2); background:transparent; border-radius:7px; color:var(--muted); cursor:pointer; font-size:12px; } .cd-serv-rm:hover{ border-color:var(--red); color:var(--red); } .cl-addtask .inp{ flex:1; } /* ================= Widget "Habitos diarios" (checklist + racha) ================= */ .hab-rachas{ display:flex; gap:18px; margin-bottom:12px; } .hab-r{ display:flex; flex-direction:column; } .hab-r b{ font-family:var(--serif); font-size:22px; font-weight:600; line-height:1.1; } .hab-r span{ font-size:11px; color:var(--muted); margin-top:2px; } .hab-strip{ display:flex; gap:4px; margin-bottom:14px; } .hab-dot{ width:100%; height:9px; border-radius:3px; background:var(--hair); } .hab-dot-ok{ background:var(--accent); } .hab-dot-no{ background:var(--red); opacity:.55; } .hab-dot-finde{ background:transparent; border:1px dashed var(--hair); } .hab-dot-na{ background:var(--hair); opacity:.4; } .hab-lista{ display:flex; flex-direction:column; gap:2px; } .hab-item{ display:flex; align-items:center; gap:9px; padding:7px 0; cursor:pointer; } .hab-item input[type="checkbox"]{ width:18px; height:18px; flex:0 0 auto; accent-color:var(--accent); cursor:pointer; } .hab-t{ flex:1; font-size:14px; } .hab-item:has(input:checked) .hab-t{ color:var(--muted); text-decoration:line-through; } .hab-badge{ flex:0 0 auto; } .hab-x{ opacity:0; flex:0 0 auto; width:26px; height:26px; padding:0; } .hab-item:hover .hab-x{ opacity:1; } /* ================= Menu de usuario (sidebar) ================= */ .cp-brand{ position:relative; } .cp-menu{ margin-left:auto; background:transparent; border:1px solid var(--line2); border-radius:8px; width:30px; height:30px; cursor:pointer; color:var(--muted); font-size:14px; line-height:1; } .cp-menu:hover{ background:#E4DFD2; color:var(--ink); } .usermenu{ position:absolute; top:44px; right:0; z-index:75; width:230px; background:var(--paper); border:1px solid var(--line2); border-radius:12px; box-shadow:0 18px 44px -20px rgba(43,40,36,.5); padding:6px; animation:pop .16s ease both; } .usermenu[hidden]{ display:none; } /* Menu de "posponer" de una tarea. Reusa .usermenu, pero TIENE que ir despues de ella (misma especificidad: gana la ultima) y en position:fixed, porque la tarjeta .widget tiene overflow:hidden y recortaria un menu absolute. Las coordenadas las calcula el JS desde el boton (ver renderWUrgente). */ .posp-menu{ position:fixed; top:auto; right:auto; width:160px; } .um-head{ padding:10px 12px 12px; border-bottom:1px solid var(--hair); margin-bottom:6px; } .um-name{ font-weight:600; font-size:14px; } .um-role{ font-family:var(--mono); font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-top:4px; } .um-item{ display:block; width:100%; text-align:left; background:transparent; border:0; border-radius:8px; padding:10px 12px; font-size:13.5px; color:var(--ink); cursor:pointer; } .um-item:hover{ background:#ECE7DB; } .um-danger{ color:#B0533A; } .um-danger:hover{ background:#F1DBD0; } .um-sep{ height:1px; background:var(--hair); margin:6px 4px; } /* Control segmentado (tema en Preferencias) */ .seg{ display:flex; gap:6px; background:var(--bone); border:1px solid var(--line2); border-radius:10px; padding:4px; } .seg-btn{ flex:1; text-align:center; background:transparent; border:0; border-radius:7px; padding:9px 8px; font-size:13px; color:var(--muted); cursor:pointer; display:flex; align-items:center; justify-content:center; gap:7px; } .seg-btn.on{ background:var(--paper); color:var(--ink); font-weight:600; box-shadow:0 1px 3px rgba(41,40,36,.12); } .seg-ico{ width:15px; height:15px; } /* ================= Tema oscuro (gris neutro, estilo Claude) ================= */ :root{ color-scheme:light; } /* Gris oscuro casi neutro (apenas tibio), no marron: como el dark de Claude. Bloque UNICO del tema oscuro. Antes habia dos (este y otro ~700 lineas abajo) y el segundo pisaba ink/muted/blue/yellow: leer este no te decia de que color era la app. Los valores de abajo son los que YA se veian (los del bloque que ganaba), fusionados aqui sin cambiar un solo pixel. */ :root[data-theme="dark"]{ color-scheme:dark; --bone:#262624; --paper:#30302E; --deep:#1F1E1D; --ink:#f5f4ee; --muted:#bdbbb0; --hair:#3A3A37; --line2:#4A4A44; --red:#D97757; --accent:#D97757; --ok:#93a986; --blue:#8fb0d4; --yellow:#cfa15e; --gold:#cfa15e; } /* superficies con color fijo (inputs, hovers) que no salen de una variable */ :root[data-theme="dark"] .inp, :root[data-theme="dark"] .sel, :root[data-theme="dark"] .ta{ background:#262624; border-color:var(--line2); color:var(--ink); } :root[data-theme="dark"] .inp:focus, :root[data-theme="dark"] .sel:focus, :root[data-theme="dark"] .ta:focus{ background:#2C2C2A; } :root[data-theme="dark"] .login-card input{ background:#262624; border-color:var(--line2); color:var(--ink); } :root[data-theme="dark"] .login-card input:focus{ background:#2C2C2A; } :root[data-theme="dark"] .btn:hover{ background:#3A3A37; color:var(--ink); } :root[data-theme="dark"] .x:hover, :root[data-theme="dark"] .cp-menu:hover, :root[data-theme="dark"] .um-item:hover{ background:#3A3A37; } :root[data-theme="dark"] .um-danger:hover{ background:#3E2E2A; } :root[data-theme="dark"] .trow:hover{ background:#2C2C2A; } :root[data-theme="dark"] .paybox{ background:#2A2A28; } :root[data-theme="dark"] .search .navdot{ border-color:#5E5E57; } :root[data-theme="dark"] ::-webkit-scrollbar-thumb{ background:#41413C; border-color:var(--bone); } /* editor de la landing (usa fondos claros fijos) */ :root[data-theme="dark"] .lp-tpl, :root[data-theme="dark"] .lp-color, :root[data-theme="dark"] .lp-mini, :root[data-theme="dark"] .lp-add-img{ background:#262624; } :root[data-theme="dark"] .lp-blk, :root[data-theme="dark"] .lp-previewwrap, :root[data-theme="dark"] .lp-preview{ background:var(--paper); } /* pills: fondo tenue del mismo tinte y texto claro */ :root[data-theme="dark"] .pill-red{ background:#3A2A25; color:#E9A385; } :root[data-theme="dark"] .pill-blue{ background:#29332C; color:#A7C199; } :root[data-theme="dark"] .pill-yellow{ background:#33311F; color:#E0C589; } :root[data-theme="dark"] .pill-ink{ background:#34342F; color:#B8B7AF; } /* barra de navegacion y superficies claras que faltaban en oscuro */ :root[data-theme="dark"] .topbar{ background:rgba(31,30,29,.85); } :root[data-theme="dark"] .subbar{ background:rgba(24,23,22,.9); } :root[data-theme="dark"] .subtab:hover{ background:#302E2A; } :root[data-theme="dark"] .bub-me{ background:#3A3A37; border-color:var(--line2); color:var(--ink); } :root[data-theme="dark"] .chip:hover{ background:#3A3A37; border-color:#5A5A52; } :root[data-theme="dark"] .tab:hover{ background:#3A3A37; } :root[data-theme="dark"] .cp-logout:hover{ background:#3A3A37; } /* tarjetas KPI enriquecidas del Panel */ .statsub{ font-family:var(--mono); font-size:10px; letter-spacing:.04em; color:var(--muted); margin-top:7px; } .statsub-alert{ color:var(--red); } .kpigrid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; } .nextwed{ display:flex; align-items:center; gap:16px; background:var(--paper); border:1px solid var(--hair); border-left:3px solid var(--accent); border-radius:var(--r); padding:14px 18px; margin-bottom:16px; box-shadow:0 1px 3px rgba(41,40,36,.04); } .nw-badge{ font-family:var(--serif); font-weight:500; font-size:22px; line-height:1; color:var(--accent); min-width:56px; text-align:center; font-variant-numeric:tabular-nums; } .nw-t{ font-family:var(--serif); font-weight:500; font-size:19px; letter-spacing:-.01em; } .nw-m{ font-family:var(--mono); font-size:11px; letter-spacing:.03em; color:var(--muted); margin-top:4px; } /* ================= Onboarding del estudio nuevo ================= */ .onb-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:12px; } .onb-step{ display:flex; align-items:center; gap:14px; text-align:left; width:100%; padding:14px 16px; border:1px solid var(--line2); border-radius:11px; background:var(--paper); cursor:pointer; transition:.13s; } .onb-step:hover{ border-color:var(--accent); background:#ECE7DB; } .onb-ico{ width:38px; height:38px; flex:0 0 38px; display:grid; place-items:center; border-radius:9px; background:var(--bone); color:var(--accent); font-size:18px; } .onb-t{ display:block; font-weight:600; font-size:14px; } .onb-d{ display:block; font-size:12px; color:var(--muted); margin-top:2px; } :root[data-theme="dark"] .onb-step:hover{ background:#3A3A37; } /* ================= Panel configurable por widgets ================= */ /* 4 columnas con spans: chico=1 (cuarto), mediano=2 (mitad, el ancho historico de w-med), grande=4 (completo, el historico w-full). Cero regresion en los no migrados. */ .wgrid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; align-items:start; } .widget{ background:var(--paper); border:1px solid var(--hair); border-radius:var(--r); box-shadow:0 1px 3px rgba(41,40,36,.04); overflow:hidden; min-width:0; } .w-ch{ grid-column:span 1; } .w-med{ grid-column:span 2; } .w-full{ grid-column:span 4; } .w-head{ display:flex; align-items:center; gap:8px; padding:12px 15px; border-bottom:1px solid var(--hair); } .w-title{ font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; font-weight:600; } .w-count{ font-family:var(--mono); font-size:11px; font-weight:600; color:var(--muted); background:var(--bone); border-radius:999px; padding:1px 8px; min-width:20px; text-align:center; } .w-count:empty{ display:none; } .w-count.wc-red{ color:#A2492B; background:#F1DBD0; } .w-body{ padding:6px 15px 14px; } .w-body .kpigrid{ padding-top:8px; } /* Controles SIEMPRE visibles pero discretos: tenues en reposo, se acentuan al pasar el mouse por la tarjeta o al enfocarlos con teclado. Sin modo edicion. */ .w-drag{ cursor:grab; color:var(--muted); font-size:14px; line-height:1; display:inline-block; user-select:none; opacity:.22; transition:opacity .13s; touch-action:none; } .widget:hover .w-drag, .w-drag:focus-visible{ opacity:.75; } .w-menu{ width:24px; height:24px; flex:0 0 24px; border:1px solid transparent; background:transparent; border-radius:7px; color:var(--muted); cursor:pointer; font-size:15px; line-height:1; opacity:.35; transition:.13s; } .w-quick ~ .w-menu{ margin-left:2px; } .w-head > .w-menu:first-of-type, .w-count ~ .w-menu{ margin-left:auto; } .widget:hover .w-menu, .w-menu:focus-visible{ opacity:1; border-color:var(--line2); } .w-menu:hover{ color:var(--ink); } .widget.dragging{ opacity:.45; } /* Popover del menu de tarjeta (tamano / configurar / subir-bajar / quitar) */ .w-pop{ position:fixed; z-index:220; min-width:210px; background:var(--paper); border:1px solid var(--line2); border-radius:11px; box-shadow:0 10px 30px rgba(20,20,18,.18); padding:8px; } .w-pop-tams{ display:flex; gap:4px; margin-bottom:6px; } .w-pop-tam{ flex:1; font-size:12px; font-weight:600; padding:7px 6px; border:1px solid var(--line2); background:transparent; color:var(--muted); border-radius:8px; cursor:pointer; transition:.13s; } .w-pop-tam.on{ color:var(--accent); border-color:var(--accent); } .w-pop-item{ display:block; width:100%; text-align:left; font-size:13px; padding:8px 10px; border:0; background:transparent; border-radius:8px; color:var(--ink); cursor:pointer; } .w-pop-item:hover{ background:var(--bone); } .w-pop-rm:hover{ color:var(--red); } /* Tarjeta fantasma "+ Agregar widget" al final de la rejilla */ .w-add-card{ grid-column:span 1; min-height:64px; display:flex; align-items:center; justify-content:center; gap:8px; border:1.5px dashed var(--line2); border-radius:var(--r); background:transparent; color:var(--muted); font-size:13px; cursor:pointer; opacity:.6; transition:.15s; } .w-add-card:hover{ opacity:1; border-color:var(--accent); color:var(--accent); } .w-add-plus{ font-size:17px; line-height:1; } /* Boton(es) de accion rapida en el encabezado del widget (crear tarea, cita, cotizacion...). margin-left:auto en el PRIMERO empuja al grupo entero a la derecha, igual que w-rm; se ocultan en modo edicion (mismo espacio que ocupa w-rm ahi) para no duplicar controles. */ .w-quick{ width:24px; height:24px; flex:0 0 24px; display:inline-flex; align-items:center; justify-content:center; border:1px solid var(--line2); background:transparent; border-radius:7px; color:var(--muted); cursor:pointer; font-size:14px; line-height:1; } .w-quick:first-of-type{ margin-left:auto; } .w-quick + .w-quick{ margin-left:2px; } .w-quick:hover{ border-color:var(--accent); color:var(--accent); background:color-mix(in srgb, var(--accent) 8%, transparent); } /* Clase generica para cualquier fila/tarjeta/barra de widget que navega a su origen al hacer clic (ficha de cliente, evento, vista filtrada...). Mismo tratamiento visual que ya usaban wed-row/ses-row: se generaliza para todos los widgets nuevos. */ .wed-row, .ses-row, .w-click{ cursor:pointer; border-radius:8px; margin:0 -8px; padding-left:8px; padding-right:8px; } .wed-row:hover, .ses-row:hover, .w-click:hover{ background:#F1EEE5; } :root[data-theme="dark"] .w-click:hover{ background:#2C2C2A; } /* KPI y barras de progreso clicables: mismo hover, pero sin el margen negativo (ya tienen su propio padding de tarjeta/fila). */ .stat.w-click{ cursor:pointer; margin:0; transition:.13s; } .stat.w-click:hover{ background:#F1EEE5; box-shadow:0 1px 3px rgba(41,40,36,.08); } :root[data-theme="dark"] .stat.w-click:hover{ background:#2C2C2A; } .barrow.w-click{ cursor:pointer; margin:0 -8px; padding-left:8px; padding-right:8px; } .barrow.w-click:hover{ background:#F1EEE5; } :root[data-theme="dark"] .barrow.w-click:hover{ background:#2C2C2A; } .pill.w-click{ cursor:pointer; border:1px solid transparent; } .pill.w-click:hover{ filter:brightness(.95); text-decoration:underline; } /* selector "agregar widget" */ .wadd-grid{ display:grid; grid-template-columns:1fr; gap:10px; } .man-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:10px; } /* .wadd-item nacio como