/* ══════════════════════════════════════════════════════════════════════ PALETA — dos familias de colores, y hay que entender la diferencia: 1) Los "-rgb" y su color entero (var(--accent), var(--green)…) son los colores de TEXTO y de fondos suaves. CAMBIAN con el tema, porque un amarillo que se lee bárbaro sobre violeta oscuro es invisible sobre blanco. 2) Los "-fill" (var(--accent-fill)…) son los colores VIVOS del logo, para rellenos: botones, barras, gradientes. NO cambian nunca, en ningún tema. Un botón amarillo con letras oscuras se lee bien tanto en modo claro como en oscuro, así que la marca se mantiene igual. El tema se elige poniendo data-tema="claro" u "oscuro" en el . Lo hace un script chiquito en el de index.html, antes de que se dibuje nada, para que no pegue un flash blanco al abrir. ══════════════════════════════════════════════════════════════════════ */ :root{ /* ── Colores VIVOS del logo: iguales en los dos temas ── */ --accent-fill:rgb(240,196,41); /* amarillo */ --accent2-fill:rgb(155,79,212); /* violeta */ --accent3-fill:rgb(75,200,200); /* turquesa */ --green-fill:rgb(61,214,140); --red-fill:rgb(240,92,110); --lead-fill:rgb(56,189,248); --amarillo-claro:#f5d65a; /* compañero del amarillo en los degradés */ --rojo-claro:#ff8090; /* compañero del rojo en los degradés */ --text-on-fill:#1a0d35; /* letra oscura que va ARRIBA de esos rellenos */ /* ── TEMA OSCURO (el de siempre, y el que queda por defecto) ── */ --bg-rgb:13,4,32; --bg:rgb(var(--bg-rgb)); --surface-rgb:26,13,53; --surface:rgb(var(--surface-rgb)); --surface2-rgb:37,18,72; --surface2:rgb(var(--surface2-rgb)); --border-rgb:61,31,110; --border:rgb(var(--border-rgb)); --accent-rgb:240,196,41; --accent:rgb(var(--accent-rgb)); --accent2-rgb:155,79,212; --accent2:rgb(var(--accent2-rgb)); --accent3-rgb:75,200,200; --accent3:rgb(var(--accent3-rgb)); --green-rgb:61,214,140; --green:rgb(var(--green-rgb)); --red-rgb:240,92,110; --red:rgb(var(--red-rgb)); --lead-rgb:56,189,248; --lead:rgb(var(--lead-rgb)); --mint-rgb:110,231,183; --mint:rgb(var(--mint-rgb)); /* verde suave de "ya cobrado" */ --gris-rgb:150,150,150; --gris:rgb(var(--gris-rgb)); /* neutro para cosas apagadas */ --wa-rgb:37,211,102; --wa:rgb(var(--wa-rgb)); /* verde de WhatsApp */ --naranja-rgb:255,140,60; --naranja:#ffb070; /* "mañana" / "incompleto" */ --borr-rgb:122,101,168; /* gris violáceo de borradores */ /* Velo para separar filas: en oscuro ACLARA, en claro OSCURECE */ --velo-rgb:255,255,255; /* Fondo negro detrás de los modales y brillo del "cargando" */ --scrim:rgba(0,0,0,.8); --skel:#31195c; /* Recuadro que imita el chat de WhatsApp */ --wap-bg:#081a10; --wap-bd:#1a4a2a; --wap-tx:#d0ecd8; --text:#f5efff;--text2:#c8b4ec;--text3:#9b8bc4; --r-btn:10px;--r-card:14px;--r-chip:8px;--r:var(--r-card); --fd:"Bebas Neue",sans-serif;--fb:"DM Sans",sans-serif;--fm:"DM Mono",monospace; color-scheme:dark; } /* ══ TEMA CLARO ══════════════════════════════════════════════════════ Solo se redefinen las ternas y los textos: TODO lo demás se recalcula solo. Los valores no son "el oscuro dado vuelta": cada uno se eligió para que se lea con al menos 4.5 de contraste sobre blanco (la medida que usan las normas de accesibilidad). El amarillo del logo sobre blanco da 1.66 — ilegible — por eso acá es un ámbar tostado. ═══════════════════════════════════════════════════════════════════ */ [data-tema="claro"]{ --bg-rgb:247,244,252; --surface-rgb:255,255,255; --surface2-rgb:243,239,250; --border-rgb:222,213,240; --accent-rgb:140,102,0; /* ámbar tostado — contraste 5.2 sobre blanco */ --accent2-rgb:123,47,184; /* violeta más profundo — 7.1 */ --accent3-rgb:13,110,110; /* petróleo — 6.1 */ --green-rgb:13,124,74; /* 5.3 */ --red-rgb:186,33,49; /* 6.3 */ --lead-rgb:2,94,145; /* 7.0 */ --mint-rgb:13,122,88; /* 5.3 */ --gris-rgb:107,107,107; /* 5.3 */ --wa-rgb:15,126,66; /* verde WhatsApp oscurecido — 5.1 */ --naranja-rgb:166,74,0; --naranja:rgb(166,74,0); --borr-rgb:108,94,140; /* Hay que REPETIR estas cuentas acá. El navegador resuelve rgb(var(--x-rgb)) en el mismo lugar donde está escrito, y hereda el resultado ya hecho, no la fórmula. Si sólo cambiáramos las ternas de arriba, los textos tomarían el color nuevo pero los fondos se quedarían con el del tema oscuro. */ --bg:rgb(var(--bg-rgb)); --surface:rgb(var(--surface-rgb)); --surface2:rgb(var(--surface2-rgb)); --border:rgb(var(--border-rgb)); --accent:rgb(var(--accent-rgb)); --accent2:rgb(var(--accent2-rgb)); --accent3:rgb(var(--accent3-rgb)); --green:rgb(var(--green-rgb)); --red:rgb(var(--red-rgb)); --lead:rgb(var(--lead-rgb)); --mint:rgb(var(--mint-rgb)); --gris:rgb(var(--gris-rgb)); --wa:rgb(var(--wa-rgb)); --velo-rgb:0,0,0; /* acá el velo tiene que oscurecer, no aclarar */ --scrim:rgba(0,0,0,.45); --skel:#e6dff5; --wap-bg:#e7f8e0; --wap-bd:#c3e6b6; --wap-tx:#1f3d18; --text:#24163a;--text2:#58467c;--text3:#786898; color-scheme:light; } *{box-sizing:border-box;margin:0;padding:0} body{background:var(--bg);color:var(--text);font-family:var(--fb);min-height:100vh;overflow-x:hidden} body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0; background:radial-gradient(ellipse 70% 50% at 15% 10%,rgba(var(--accent-rgb),.06),transparent 60%), radial-gradient(ellipse 60% 40% at 85% 85%,rgba(var(--accent2-rgb),.07),transparent 60%), radial-gradient(ellipse 40% 40% at 50% 50%,rgba(var(--accent3-rgb),.03),transparent 70%)} #app{position:relative;z-index:1} /* ── AUTH ── */ #auth{min-height:100vh;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:24px;padding:24px} .auth-logo{text-align:center} .auth-logo img{width:130px;height:130px;object-fit:contain;filter:drop-shadow(0 4px 24px rgba(var(--accent-rgb),.35))} .auth-logo p{color:var(--text2);font-size:11px;letter-spacing:3px;text-transform:uppercase;margin-top:6px} .auth-card{background:var(--surface);border:1px solid var(--border);border-radius:20px;padding:26px;width:100%;max-width:360px} .auth-card h2{font-family:var(--fd);font-size:26px;letter-spacing:2px;margin-bottom:18px;color:var(--accent)} .role-sel{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-bottom:16px} .rb{padding:10px 6px;border:1px solid var(--border);border-radius:var(--r-btn);background:transparent;color:var(--text2);font-family:var(--fb);font-size:12px;cursor:pointer;transition:all .2s;text-align:center} .rb span{display:block;font-size:20px;margin-bottom:3px} .rb.active{border-color:var(--accent);background:rgba(var(--accent-rgb),.12);color:var(--accent)} /* ── INPUTS ── */ .field{margin-bottom:13px} .field label{display:block;font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:var(--text2);margin-bottom:5px} .note{font-size:11px;color:var(--text3);font-weight:400;text-transform:none;letter-spacing:0} input,textarea,select{width:100%;background:var(--surface2);border:1px solid var(--border);border-radius:8px;color:var(--text);font-family:var(--fb);font-size:14px;padding:10px 14px;outline:none;transition:border-color .2s;-webkit-appearance:none} input:focus,textarea:focus,select:focus{border-color:var(--accent)} select option{background:var(--surface2)} textarea{resize:vertical;min-height:70px} .pin-wrap{position:relative;display:flex;align-items:center} .pin-wrap input{padding-right:42px} .eye{position:absolute;right:10px;background:none;border:none;color:var(--text3);cursor:pointer;font-size:15px;padding:4px;line-height:1} .eye:hover{color:var(--text)} /* ── BUTTONS ── */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:10px 20px;border-radius:var(--r-btn);border:none;font-family:var(--fb);font-size:14px;font-weight:600;cursor:pointer;transition:all .2s} .bp{background:linear-gradient(135deg,var(--accent-fill),var(--amarillo-claro));color:var(--text-on-fill);width:100%} .bp:hover{transform:translateY(-1px);box-shadow:0 8px 24px rgba(var(--accent-rgb),.3)} .bs{background:var(--surface2);border:1px solid var(--border);color:var(--text)} .bd{background:rgba(var(--red-rgb),.12);border:1px solid rgba(var(--red-rgb),.3);color:var(--red)} .bg{background:transparent;border:1px solid var(--border);color:var(--text2);padding:7px 13px;font-size:12px} .bpu{background:rgba(var(--accent3-rgb),.12);border:1px solid rgba(var(--accent3-rgb),.3);color:var(--accent3);padding:7px 13px;font-size:12px} .bsm{padding:7px 14px;font-size:12px;border-radius:var(--r-btn)} .bxs{padding:4px 9px;font-size:11px;border-radius:var(--r-btn)} .blnk{background:none;border:none;color:var(--text3);font-size:11px;cursor:pointer;text-decoration:underline;font-family:var(--fb);padding:4px} /* "Para quién" (modal WhatsApp): 3 botones de ancho fijo e igual, sin reflow. Solo cambia el COLOR el seleccionado — mismo padding, borde 1px y peso 600 siempre, así no se mueven ni cambian de tamaño al tocarlos. */ #wa-aud-wrap .wa-aud{flex:1 1 0;min-width:0;white-space:nowrap;border:1px solid var(--border)} #wa-aud-wrap .wa-aud.sel{background:var(--accent-fill);border-color:var(--accent-fill);color:var(--text-on-fill)} /* ── LAYOUT ── */ #app-main{display:none;flex-direction:column;min-height:100vh} #app-main.on{display:flex} .hdr{background:rgba(var(--bg-rgb),.95);backdrop-filter:blur(20px);border-bottom:1px solid var(--border);padding:0 16px;height:64px;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:100} .hdr-l{display:flex;align-items:center;gap:10px;cursor:pointer} .hdr-l img{width:32px;height:32px;object-fit:contain} .hdr-l span{font-family:var(--fd);font-size:18px;letter-spacing:2px;color:var(--accent)} .hdr-r{display:flex;align-items:center;gap:7px} .ava{width:38px;height:38px;border-radius:50%;background:linear-gradient(135deg,var(--accent2-fill),var(--accent-fill));display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:var(--text-on-fill);cursor:pointer;border:2px solid transparent;transition:border-color .2s;flex-shrink:0} .ava:hover{border-color:var(--accent)} .ava{font-size:19px;line-height:1;overflow:hidden} .ava.ava-img{background:none!important;padding:0} .ava.ava-img img{width:100%;height:100%;object-fit:cover;display:block} /* ── Selector de foto de perfil (tipo Netflix) ── */ .ava-pick{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:4px} .ava-op{width:52px;height:52px;border-radius:50%;border:2px solid var(--border);cursor:pointer; font-size:24px;line-height:1;display:flex;align-items:center;justify-content:center;padding:0; background:var(--surface2);color:var(--text);overflow:hidden;transition:transform .12s,border-color .12s; font-weight:700} .ava-op img{width:100%;height:100%;object-fit:cover;display:block} .ava-op:hover{transform:scale(1.08)} .ava-op.on{border-color:var(--accent);box-shadow:0 0 0 3px rgba(var(--accent-rgb),.28)} .nav{display:flex;background:rgba(var(--bg-rgb),.95);backdrop-filter:blur(20px);border-bottom:1px solid var(--border);padding:0 4px;overflow-x:auto;scrollbar-width:none;position:sticky;top:56px;z-index:99} .nav::-webkit-scrollbar{display:none} .nb{display:flex;flex-direction:column;align-items:center;gap:2px;padding:9px 14px;background:none;border:none;color:var(--text3);font-family:var(--fb);font-size:11px;font-weight:500;cursor:pointer;transition:all .2s;white-space:nowrap;border-bottom:2px solid transparent} .nb span:first-child{font-size:17px} .nb svg{width:20px;height:20px;display:block;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round} .nb.on{color:var(--accent);border-bottom-color:var(--accent)} .content{flex:1;padding:16px;max-width:880px;margin:0 auto;width:100%} /* ── VIEWS ── */ .view{display:none} .view.on{display:block;animation:fi .2s ease} @keyframes fi{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}} /* ── STATS ── */ .sg{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:18px} @media(min-width:600px){.sg{grid-template-columns:repeat(4,1fr)}} .sc{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:13px;position:relative;overflow:hidden} .sc::before{content:"";position:absolute;top:0;left:0;right:0;height:2px} .sc.go::before{background:linear-gradient(90deg,var(--accent-fill),transparent)} .sc.pu::before{background:linear-gradient(90deg,var(--accent2-fill),transparent)} .sc.te::before{background:linear-gradient(90deg,var(--accent3-fill),transparent)} .sc.gr::before{background:linear-gradient(90deg,var(--green-fill),transparent)} .sc.re::before{background:linear-gradient(90deg,var(--red-fill),transparent)} .sl{font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:var(--text3);margin-bottom:5px} .sv{font-family:var(--fd);font-size:22px;letter-spacing:1px;line-height:1} .sv.go{color:var(--accent)}.sv.pu{color:var(--accent2)}.sv.te{color:var(--accent3)}.sv.gr{color:var(--green)}.sv.re{color:var(--red)} .ss{font-size:11px;color:var(--text3);margin-top:3px} /* ── SECTION TITLE ── */ .stit{display:flex;align-items:center;justify-content:space-between;margin-bottom:13px} .stit h2,.vtit{position:relative;font-family:var(--fd);font-size:21px;letter-spacing:2px;color:var(--text);padding-left:14px} .stit h2::before,.vtit::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-52%);width:4px;height:.82em;border-radius:3px;background:linear-gradient(180deg,var(--accent-fill),var(--accent3-fill))} .vtit{display:block;margin-bottom:16px} /* ── EVENT CARDS ── */ .el{display:flex;flex-direction:column;gap:8px} .ec{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:13px 13px 13px 16px;cursor:pointer;transition:all .2s;position:relative;overflow:hidden} .ec:hover{border-color:var(--accent);transform:translateY(-1px)} .ec::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;border-radius:3px 0 0 3px} .ec.pendiente::before{background:var(--accent-fill)}.ec.realizado::before{background:var(--green-fill)} .ec.suspendido::before{background:var(--red-fill)}.ec.reprogramado::before{background:var(--accent2-fill)} .ec.borrador::before{background:var(--text3)}.ec.lead::before{background:var(--lead-fill)} .eh{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:6px} .en{font-weight:600;font-size:14px;color:var(--text);line-height:1.3} .ed{font-family:var(--fm);font-size:11px;color:var(--accent);white-space:nowrap;background:rgba(var(--accent-rgb),.1);padding:3px 7px;border-radius:var(--r-chip)} .em{display:flex;flex-wrap:wrap;gap:7px;font-size:11px;color:var(--text2)} .badge{display:inline-flex;align-items:center;padding:2px 7px;border-radius:20px;font-size:11px;font-weight:600;letter-spacing:.5px;text-transform:uppercase} .bpend{background:rgba(var(--accent-rgb),.15);color:var(--accent);border:1px solid rgba(var(--accent-rgb),.3)} .breal{background:rgba(var(--green-rgb),.15);color:var(--green);border:1px solid rgba(var(--green-rgb),.3)} .bsusp{background:rgba(var(--red-rgb),.15);color:var(--red);border:1px solid rgba(var(--red-rgb),.3)} .brepr{background:rgba(var(--accent2-rgb),.15);color:var(--accent2);border:1px solid rgba(var(--accent2-rgb),.3)} .bbor{background:rgba(var(--borr-rgb),.15);color:var(--text3);border:1px solid rgba(var(--borr-rgb),.3)} .blead{background:rgba(var(--lead-rgb),.12);color:var(--lead);border:1px solid rgba(var(--lead-rgb),.3)} .mes-sep{display:flex;align-items:center;gap:8px;margin:14px 0 8px;padding:7px 12px;background:linear-gradient(90deg,rgba(var(--accent2-rgb),.12),rgba(var(--accent2-rgb),.02));border-left:3px solid var(--accent2);border-radius:6px;cursor:pointer;user-select:none;transition:background .15s;} .mes-sep:first-child{margin-top:4px;} .mes-sep:hover{background:linear-gradient(90deg,rgba(var(--accent2-rgb),.22),rgba(var(--accent2-rgb),.06));} .mes-sep:active{transform:translateY(1px);} .mes-sep .mes-chevron{font-size:11px;color:var(--accent2);width:12px;display:inline-block;text-align:center;transition:transform .15s;} .mes-sep .mes-lbl{font-family:var(--fd);font-size:14px;letter-spacing:1px;color:var(--accent2);text-transform:uppercase;flex:1;} .mes-sep .mes-cnt{font-family:var(--fm);font-size:11px;background:rgba(var(--accent2-rgb),.2);color:var(--accent2);padding:2px 8px;border-radius:var(--r-chip);font-weight:600;} .mes-items{display:block;} /* Barra "Plegar todos / Abrir todos". Aparece sola cuando la lista tiene 2 meses o más (con uno solo no tendría sentido). Va alineada a la derecha y discreta: es una ayuda, no una acción principal. */ .mes-todos{display:flex;justify-content:flex-end;margin:2px 0 -4px;} .mes-todos-btn{background:none;border:1px solid var(--border);color:var(--text3);font-family:var(--fb); font-size:11px;font-weight:600;padding:5px 11px;border-radius:var(--r-chip);cursor:pointer; letter-spacing:.3px;transition:all .15s;} .mes-todos-btn:hover{color:var(--accent2);border-color:var(--accent2);background:rgba(var(--accent2-rgb),.08);} .mes-todos-btn:active{transform:translateY(1px);} /* Con la barra arriba, el primer separador ya no necesita el margen reducido */ .mes-todos+.mes-sep{margin-top:8px;} /* ── Mensajes / chat por evento ── */ .msg-compose{background:var(--surface2);border:1px solid var(--border);border-radius:10px;padding:10px;margin-bottom:14px;} .msg-compose textarea{width:100%;background:var(--surface);border:1px solid var(--border);border-radius:7px;padding:8px 10px;color:var(--text);font-family:var(--fb);font-size:13px;resize:vertical;min-height:55px;outline:none;} .msg-compose textarea:focus{border-color:var(--accent2);} .msg-tools{display:flex;align-items:center;gap:8px;margin-top:8px;flex-wrap:wrap;} .msg-tools select{background:var(--surface);border:1px solid var(--border);color:var(--text);padding:6px 8px;border-radius:7px;font-size:12px;cursor:pointer;} .msg-preview{flex:1;font-size:11px;color:var(--text3);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .msg-feed{display:flex;flex-direction:column;gap:10px;} .msg-empty{text-align:center;color:var(--text3);font-size:12px;padding:20px;} .msg-item{background:var(--surface2);border:1px solid var(--border);border-radius:10px;padding:10px 12px;position:relative;} .msg-item.mine{border-left:3px solid var(--accent);} .msg-head{display:flex;align-items:center;gap:8px;margin-bottom:6px;font-size:11px;} .msg-head .ava{width:24px;height:24px;border-radius:50%;background:linear-gradient(135deg,var(--accent2-fill),var(--accent-fill));display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:var(--text-on-fill);flex-shrink:0;} .msg-head .nom{color:var(--text);font-weight:600;} .msg-head .rol{font-size:10.5px;color:var(--text3);text-transform:uppercase;letter-spacing:.5px;} .msg-head .fec{color:var(--text3);font-size:11px;font-family:var(--fm);margin-left:auto;} .msg-aud-chip{font-size:10.5px;padding:2px 7px;border-radius:var(--r-chip);background:rgba(var(--accent2-rgb),.15);color:var(--accent2);border:1px solid rgba(var(--accent2-rgb),.3);letter-spacing:.3px;white-space:nowrap;} .msg-aud-chip.priv{background:rgba(var(--accent-rgb),.12);color:var(--accent);border-color:rgba(var(--accent-rgb),.3);} .msg-aud-chip.son{background:rgba(var(--accent3-rgb),.12);color:var(--accent3);border-color:rgba(var(--accent3-rgb),.3);} .msg-aud-chip.tod{background:rgba(var(--mint-rgb),.12);color:var(--green);border-color:rgba(var(--mint-rgb),.3);} .msg-txt{font-size:13px;color:var(--text);line-height:1.5;white-space:pre-wrap;word-break:break-word;} .msg-act{display:flex;gap:5px;margin-top:7px;align-items:center;flex-wrap:wrap;} .msg-reac{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:3px 9px;font-size:11px;cursor:pointer;transition:all .12s;display:inline-flex;align-items:center;gap:4px;color:var(--text2);} .msg-reac:hover{border-color:var(--accent);} .msg-reac.active{background:rgba(var(--accent-rgb),.12);border-color:var(--accent);color:var(--accent);} .msg-reac .cnt{font-family:var(--fm);font-size:11px;} .msg-del{position:absolute;top:8px;right:8px;background:transparent;border:none;color:var(--red);cursor:pointer;font-size:14px;padding:2px 6px;border-radius:var(--r-btn);line-height:1;opacity:.5;transition:opacity .15s;} .msg-del:hover{opacity:1;background:rgba(var(--red-rgb),.1);} .msg-system{background:rgba(var(--gris-rgb),.05);border-color:rgba(var(--gris-rgb),.15);color:var(--text3);font-size:11px;text-align:center;padding:6px 12px;} /* Indicador de unread en cards */ .unread-badge{display:inline-flex;align-items:center;gap:3px;background:rgba(var(--accent-rgb),.18);color:var(--accent);border:1px solid rgba(var(--accent-rgb),.4);padding:1px 7px;border-radius:var(--r-chip);font-size:11px;font-weight:600;animation:pulseUnread 2s ease-in-out infinite;} .msg-badge-soft{display:inline-flex;align-items:center;gap:3px;background:rgba(var(--accent2-rgb),.08);color:var(--text3);border:1px solid rgba(var(--accent2-rgb),.18);padding:1px 7px;border-radius:var(--r-chip);font-size:11px;font-weight:500;} @keyframes pulseUnread{0%,100%{box-shadow:0 0 0 0 rgba(var(--accent-rgb),.3);}50%{box-shadow:0 0 0 4px rgba(var(--accent-rgb),0);}} .chk-row{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--text2);cursor:pointer;padding:7px 10px;border-radius:8px;transition:background .15s} .chk-row:hover{background:var(--surface2)} .chk-row input[type=checkbox]{width:16px;height:16px;margin:0;flex-shrink:0;accent-color:var(--lead);cursor:pointer} .pb{margin-top:7px;height:3px;background:var(--surface2);border-radius:3px;overflow:hidden} .pf{height:100%;border-radius:3px;background:linear-gradient(90deg,var(--green-fill),var(--accent3-fill))} /* ── FILTERS ── */ .filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:13px} .fi{flex:1;min-width:150px;padding:8px 12px;background:var(--surface);border:1px solid var(--border);border-radius:8px;color:var(--text);font-size:13px;font-family:var(--fb);outline:none} .fi:focus{border-color:var(--accent)} .fchips{display:flex;flex-wrap:wrap;gap:5px;flex:1 1 100%} .fchip{background:var(--surface);border:1px solid var(--border);color:var(--text3);border-radius:8px; padding:6px 11px;font-size:11.5px;font-family:var(--fb);cursor:pointer;transition:all .15s;white-space:nowrap} .fchip:hover{border-color:var(--accent2);color:var(--text2)} .fchip.on{background:rgba(var(--accent-rgb),.14);border-color:var(--accent);color:var(--accent);font-weight:600} .fsel{padding:8px 10px;background:var(--surface);border:1px solid var(--border);border-radius:8px;color:var(--text);font-size:12px;font-family:var(--fb);outline:none;cursor:pointer;min-width:100px;-webkit-appearance:none} /* ── Filtro desplegable con casillas (estilo planilla de cálculo) ── Reemplaza a las pastillas sueltas: con 7 estados ocupaban dos renglones y no se entendía que se podían combinar. Acá se ve la lista, se tildan varios y el botón resume qué quedó elegido. */ .fdrop{position:relative} .fdrop-btn{display:flex;align-items:center;gap:8px;padding:8px 11px;background:var(--surface); border:1px solid var(--border);border-radius:8px;color:var(--text);font-size:12px; font-family:var(--fb);cursor:pointer;white-space:nowrap;transition:border-color .15s} .fdrop-btn:hover{border-color:var(--accent2)} .fdrop.abierto .fdrop-btn{border-color:var(--accent)} .fdrop.filtrando .fdrop-btn{border-color:var(--accent);color:var(--accent)} .fdrop-flecha{color:var(--text3);font-size:10px;transition:transform .18s} .fdrop.abierto .fdrop-flecha{transform:rotate(180deg)} .fdrop-panel{display:none;position:absolute;top:calc(100% + 5px);left:0;z-index:60;min-width:210px; background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:7px; box-shadow:0 10px 30px rgba(0,0,0,.35)} .fdrop.abierto .fdrop-panel{display:block} .fdrop.der .fdrop-panel{left:auto;right:0} .fdrop-acc{display:flex;gap:6px;padding:2px 2px 7px;margin-bottom:5px;border-bottom:1px solid var(--border)} .fdrop-mini{flex:1;background:var(--surface2);border:1px solid var(--border);color:var(--text2); border-radius:var(--r-chip);padding:5px 7px;font-size:11px;font-family:var(--fb);cursor:pointer;white-space:nowrap} .fdrop-mini:hover{border-color:var(--accent2);color:var(--text)} .fdrop-op{display:flex;align-items:center;gap:9px;padding:7px 8px;border-radius:var(--r-chip); cursor:pointer;font-size:12.5px;color:var(--text2);user-select:none} .fdrop-op:hover{background:var(--surface2);color:var(--text)} .fdrop-op input{width:15px;height:15px;flex-shrink:0;accent-color:var(--accent);cursor:pointer;margin:0} /* En el celular el panel no puede desbordar la pantalla */ @media(max-width:480px){.fdrop{flex:1 1 100%}.fdrop-btn{width:100%}.fdrop-panel{left:0;right:0;min-width:0}} /* ── OVERLAYS ── */ .ov{display:none;position:fixed;inset:0;background:var(--scrim);backdrop-filter:blur(4px);z-index:200;padding:12px;overflow-y:auto;align-items:flex-start;justify-content:center} .ov.on{display:flex} .modal{background:var(--surface);border:1px solid var(--border);width:100%;max-width:660px;margin:auto;overflow:hidden;animation:su .25s ease;display:flex;flex-direction:column;max-height:calc(100vh - 24px)} @keyframes su{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}} .mhd{padding:16px 20px 13px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;flex-shrink:0} .mhd h3{display:flex;align-items:center;gap:9px;font-family:var(--fd);font-size:20px;letter-spacing:2px;color:var(--accent)} .mhd h3 svg{width:17px;height:17px;flex-shrink:0;fill:none;stroke:var(--accent3);stroke-width:2;stroke-linecap:round;stroke-linejoin:round} .share-opt .ic svg{width:22px;height:22px;display:block;fill:none;stroke:var(--accent2);stroke-width:2;stroke-linecap:round;stroke-linejoin:round} .mbd{padding:16px 20px;flex:1 1 auto;overflow-y:auto;min-height:0} .modal input,.modal select,.modal textarea{max-width:100%} .fg>*{min-width:0} .mft{padding:13px 20px;border-top:1px solid var(--border);display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap;flex-shrink:0;background:var(--surface)} .xb{background:none;border:none;color:var(--text3);font-size:20px;cursor:pointer;padding:3px;transition:color .2s} .xb:hover{color:var(--text)} /* ── FORM ── */ .fg{display:grid;grid-template-columns:1fr 1fr;gap:11px} .fg .field{display:flex;flex-direction:column} .fg .field>label{margin-bottom:auto} .fg .field>label+*{margin-top:5px} .fg .full{grid-column:1/-1} @media(max-width:480px){.fg{grid-template-columns:1fr}} /* ── Ruedita de "cargando" ── Pieza reutilizable. Se usa cuando hay que esperar a la nube y no se puede mostrar el resultado antes (si se PUEDE, mejor mostrarlo y no hacer esperar). `cargandoEn(id,texto)` en core.js la pinta dentro de cualquier contenedor. */ .spin{display:inline-block;width:14px;height:14px;flex-shrink:0; border:2px solid rgba(var(--accent-rgb),.25);border-top-color:var(--accent); border-radius:50%;animation:girar .7s linear infinite} @keyframes girar{to{transform:rotate(360deg)}} .cargando{display:flex;align-items:center;gap:9px;font-size:12px;color:var(--text3);padding:10px 2px} @media(prefers-reduced-motion:reduce){.spin{animation-duration:2s}} /* Pares que van SIEMPRE en el mismo renglón, aunque la pantalla sea angosta. El formulario se pasa a una sola columna en el celular, pero hay campos que se leen mucho mejor de a dos (sonido y su viático, honorario y el suyo): la comparación es el dato. Sin row-gap a propósito: el espacio vertical ya lo pone el margin-bottom de cada .field, igual que en el resto del form. */ .par2{display:grid;grid-template-columns:1fr 1fr;gap:0 11px;grid-column:1/-1} /* Imprescindible: sin esto los campos de adentro no pueden achicarse (las celdas de una grilla arrancan con min-width:auto) y empujan el formulario a lo ancho en pantallas angostas. La regla .fg>* solo alcanza a los hijos directos, y acá los campos pasaron a ser nietos. */ .par2>*,.par2 input{min-width:0} /* El "×N" no necesita las flechitas del selector numérico, y en el celular esas flechas le comen el lugar al número. Se ocultan y queda el dígito solo. */ .cant-x{-moz-appearance:textfield;appearance:textfield;padding-left:4px !important;padding-right:4px !important} .cant-x::-webkit-outer-spin-button,.cant-x::-webkit-inner-spin-button{-webkit-appearance:none;margin:0} @media(max-width:480px){ .par2{gap:0 8px} .par2 .cant-x{width:42px !important} .par2 .cant-wrap{gap:5px !important} } .tabs{display:flex;gap:3px;border-bottom:1px solid var(--border);background:var(--surface);padding:0 20px;flex-shrink:0;overflow-x:auto;scrollbar-width:none} .tab{padding:9px 14px;background:none;border:none;color:var(--text3);font-family:var(--fb);font-size:12px;cursor:pointer;border-bottom:2px solid transparent;transition:all .2s;margin-bottom:-1px} .tab.on{color:var(--accent);border-bottom-color:var(--accent)} .tp{display:none}.tp.on{display:block} /* ── MISC ── */ /* flex-wrap + min-width:0 → en pantallas angostas los botones bajan de línea en vez de empujar la fila a lo ancho (antes se salía de la pantalla) */ .pr{display:flex;align-items:center;gap:8px;flex-wrap:wrap;background:var(--surface2);border:1px solid var(--border);border-radius:8px;padding:9px 11px;margin-bottom:7px} .pa{font-family:var(--fm);font-weight:500;color:var(--green);font-size:13px;min-width:80px} .pm{flex:1 1 140px;min-width:0;font-size:11px;color:var(--text2);overflow-wrap:anywhere} .pt{font-size:11px;padding:2px 7px;border-radius:var(--r-chip);background:rgba(var(--green-rgb),.1);color:var(--green);white-space:nowrap} .obslog{background:var(--surface2);border:1px solid var(--border);border-radius:8px;padding:10px;max-height:140px;overflow-y:auto} .obe{font-size:11px;color:var(--text2);padding:3px 0;border-bottom:1px solid rgba(var(--velo-rgb),.04)} .obe:last-child{border-bottom:none} .obd{color:var(--text3);font-family:var(--fm);margin-right:5px;font-size:11px} .ds{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:13px;margin-bottom:11px} .ds h4{font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--text3);margin-bottom:9px} .dg{display:grid;grid-template-columns:1fr 1fr;gap:10px} @media(max-width:480px){.dg{grid-template-columns:1fr}} .di label{font-size:11px;letter-spacing:1px;text-transform:uppercase;color:var(--text3);display:block;margin-bottom:2px} .di value{font-size:13px;color:var(--text);display:block} .di value.mono{font-family:var(--fm);color:var(--accent)} .div{height:1px;background:var(--border);margin:13px 0} .es{text-align:center;padding:40px 20px;color:var(--text3)} .es .ico{font-size:42px;margin-bottom:10px} .ml{display:inline-flex;align-items:center;gap:5px;color:var(--accent3);text-decoration:none;font-size:12px;border:1px solid rgba(var(--accent3-rgb),.3);padding:4px 10px;border-radius:7px;background:rgba(var(--accent3-rgb),.08)} .ct{width:54px;height:54px;object-fit:cover;border-radius:7px;border:1px solid var(--border);cursor:pointer} .ct-wrap{position:relative;display:inline-block;} .ct-del{position:absolute;top:-5px;right:-5px;width:18px;height:18px;border-radius:50%;background:var(--red-fill);color:white;border:none;font-size:10.5px;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;line-height:1;} .cg{display:flex;gap:7px;flex-wrap:wrap;margin-top:7px} /* Reordenar fotos: flechitas ◀ ▶ debajo de cada miniatura */ .ct-move{display:flex;gap:3px;justify-content:center;margin-top:3px} .ct-mv{flex:1;background:var(--surface2);border:1px solid var(--border);color:var(--text2);border-radius:var(--r-btn);font-size:10px;line-height:1;padding:3px 0;cursor:pointer} .ct-mv:disabled{opacity:.3;cursor:default} /* ── Dashboard: saludo + hero + filter ── */ #dash-saludo{margin-bottom:14px;padding:2px 0;} .saludo-txt{font-family:var(--fd);font-size:22px;letter-spacing:1px;color:var(--text);line-height:1.1;} .saludo-txt .nm{color:var(--accent);} .saludo-fec{font-size:11px;color:var(--text3);text-transform:capitalize;margin-top:3px;letter-spacing:.4px;} #dash-hero{margin-bottom:16px;} .hero-card{background:linear-gradient(135deg,rgba(var(--accent2-rgb),.18) 0%,rgba(var(--accent-rgb),.08) 100%);border:1px solid rgba(var(--accent2-rgb),.4);border-radius:14px;padding:16px 18px;cursor:pointer;position:relative;overflow:hidden;} .hero-card::before{content:"";position:absolute;top:-30px;right:-30px;width:120px;height:120px;background:radial-gradient(circle,rgba(var(--accent-rgb),.15) 0%,transparent 70%);pointer-events:none;} .hero-label{font-size:10.5px;letter-spacing:2px;text-transform:uppercase;color:var(--accent3);margin-bottom:7px;font-weight:600;} .hero-nom{font-family:var(--fd);font-size:24px;letter-spacing:.5px;color:var(--text);line-height:1.15;margin-bottom:6px;} .hero-meta{display:flex;flex-wrap:wrap;gap:8px 14px;font-size:12px;color:var(--text2);margin-bottom:8px;} .hero-meta .it{display:flex;align-items:center;gap:4px;} .hero-when{display:inline-block;font-family:var(--fm);font-size:11px;padding:3px 9px;border-radius:var(--r-chip);background:rgba(var(--accent-rgb),.15);border:1px solid rgba(var(--accent-rgb),.35);color:var(--accent);font-weight:600;letter-spacing:.5px;} .hero-when.hoy{background:rgba(var(--red-rgb),.18);border-color:rgba(var(--red-rgb),.5);color:var(--red);animation:pulseHoy 2s ease-in-out infinite;} .hero-when.mañana{background:rgba(var(--accent2-rgb),.18);border-color:rgba(var(--accent2-rgb),.45);color:var(--accent2);} @keyframes pulseHoy{0%,100%{box-shadow:0 0 0 0 rgba(var(--red-rgb),.4);}50%{box-shadow:0 0 0 6px rgba(var(--red-rgb),0);}} .hero-extra{margin-top:10px;padding-top:10px;border-top:1px solid rgba(var(--accent2-rgb),.25);font-size:12px;color:var(--text2);display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;} .hero-row{display:flex;align-items:center;gap:10px;padding:9px 2px;border-top:1px solid rgba(var(--accent2-rgb),.25);cursor:pointer;transition:background .12s;border-radius:6px;} .hero-row:hover{background:rgba(var(--velo-rgb),.05);} .hero-row:active{transform:scale(.99);} .hero-extra strong{color:var(--text);font-family:var(--fm);} /* Stats clickeables */ .sc{cursor:pointer;transition:transform .15s,border-color .15s;} .sc:active{transform:scale(.97);} .sc.active-filter{border-color:var(--accent);box-shadow:0 0 0 2px rgba(var(--accent-rgb),.25);} #dash-filter-info{background:rgba(var(--accent-rgb),.08);border:1px solid rgba(var(--accent-rgb),.3);border-radius:10px;padding:8px 12px;margin-bottom:12px;font-size:12px;color:var(--accent);display:flex;justify-content:space-between;align-items:center;gap:10px;} #dash-filter-info button{background:transparent;border:none;color:var(--accent);font-size:11px;cursor:pointer;padding:3px 9px;border-radius:var(--r-btn);border:1px solid rgba(var(--accent-rgb),.4);} #dash-filter-info button:hover{background:rgba(var(--accent-rgb),.15);} #toast-stack{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;gap:8px;align-items:center;z-index:9999;pointer-events:none;max-width:92vw} .toast{background:var(--surface2);border:1px solid var(--border);border-radius:10px;padding:10px 18px;font-size:13px;box-shadow:0 6px 24px rgba(0,0,0,.4);opacity:0;transform:translateY(20px);transition:opacity .25s,transform .25s;max-width:100%;text-align:center;pointer-events:auto} .toast.on{opacity:1;transform:translateY(0)} .toast.ok{border-color:var(--green);color:var(--green)} .toast.err{border-color:var(--red);color:var(--red)} .toast.warn{border-color:var(--accent);color:var(--accent)} .toast.clickable{text-decoration:underline;text-underline-offset:3px} .toast.clickable::after{content:" →";text-decoration:none} .wap{background:var(--wap-bg);border:1px solid var(--wap-bd);border-radius:var(--r);padding:13px;font-family:var(--fm);font-size:12px;color:var(--wap-tx);line-height:1.7;white-space:pre-wrap;word-break:break-word;max-height:280px;overflow-y:auto} .chip{background:rgba(var(--accent-rgb),.1);border:1px solid rgba(var(--accent-rgb),.2);border-radius:20px;padding:3px 11px;font-size:11px;color:var(--accent);cursor:pointer} .chip.urg{background:rgba(var(--red-rgb),.1);border-color:rgba(var(--red-rgb),.25);color:var(--red)} .chip.urg-hoy{background:rgba(var(--red-rgb),.22);border-color:rgba(var(--red-rgb),.6);color:var(--red);font-weight:600;animation:pulseHoy 1.8s ease-in-out infinite;} .chip.urg-man{background:rgba(var(--naranja-rgb),.18);border-color:rgba(var(--naranja-rgb),.5);color:var(--naranja);font-weight:600;} .chip.urg-pro{background:rgba(var(--accent-rgb),.16);border-color:rgba(var(--accent-rgb),.4);color:var(--accent);} .chip.urg-sem{background:rgba(var(--accent3-rgb),.1);border-color:rgba(var(--accent3-rgb),.28);color:var(--accent3);} /* Delta indicator for KPI comparison */ .sc .delta{font-size:9.5px;margin-top:3px;letter-spacing:.3px;font-weight:600;} .sc .delta.up{color:var(--green);} .sc .delta.down{color:var(--red);} .sc .delta.eq{color:var(--text3);} /* Quick actions */ .qact-wrap{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:14px 0 16px;} .qact{background:var(--surface2);border:1px solid var(--border);border-radius:11px;padding:11px 6px;text-align:center;cursor:pointer;transition:all .15s;display:flex;flex-direction:column;align-items:center;gap:4px;color:var(--text);font-family:var(--fb);} .qact:active{transform:scale(.96);} .qact:hover{border-color:var(--accent);background:rgba(var(--accent-rgb),.06);} .qact .ic{font-size:22px;line-height:1;} .qact .lb{font-size:11px;color:var(--text2);letter-spacing:.3px;} /* Cumpleaños banda */ #dash-bday{margin-bottom:12px;} .bday-line{background:rgba(var(--accent2-rgb),.08);border:1px solid rgba(var(--accent2-rgb),.25);border-radius:10px;padding:8px 12px;font-size:12px;color:var(--text2);display:flex;align-items:center;gap:8px;flex-wrap:wrap;} .bday-line .ic{font-size:16px;} .bday-line strong{color:var(--text);} .bday-line .hoy{color:var(--accent);font-weight:600;animation:pulseHoy 1.8s ease-in-out infinite;} .aniv-line{background:rgba(var(--accent-rgb),.07);border:1px solid rgba(var(--accent-rgb),.25);border-radius:10px;padding:8px 12px;font-size:12px;color:var(--text2);display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:12px;} .aniv-line .ic{font-size:16px;} .aniv-line strong{color:var(--text);} .aniv-line .hoy{color:var(--accent);font-weight:600;animation:pulseHoy 1.8s ease-in-out infinite;} .aniv-line .item{cursor:pointer;border-bottom:1px dashed transparent;transition:border-color .15s;} .aniv-line .item:hover{border-bottom-color:var(--accent);} /* Badge incompleto */ .badge-incomp{font-size:10.5px;letter-spacing:.5px;padding:2px 7px;border-radius:var(--r-chip);background:rgba(var(--naranja-rgb),.15);color:var(--naranja);border:1px solid rgba(var(--naranja-rgb),.4);white-space:nowrap;cursor:help;} /* ── Analytics ── */ .anal-h{font-size:11px;text-transform:uppercase;letter-spacing:1.5px;color:var(--text3);margin-bottom:12px;font-weight:600;} .anal-bar-row{display:grid;grid-template-columns:110px 1fr auto;gap:10px;align-items:center;margin-bottom:8px;font-size:12px;} .anal-bar-row .lbl{color:var(--text2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .anal-bar-row .bar-wrap{background:var(--surface2);border-radius:5px;height:18px;position:relative;overflow:hidden;} .anal-bar-row .bar-fill{height:100%;border-radius:5px;transition:width .4s;background:linear-gradient(90deg,var(--accent2-fill) 0%,var(--accent-fill) 100%);} .anal-bar-row .bar-fill.alt{background:linear-gradient(90deg,var(--accent3-fill) 0%,var(--lead-fill) 100%);} .anal-bar-row .bar-fill.red{background:linear-gradient(90deg,var(--red-fill) 0%,var(--rojo-claro) 100%);} .anal-bar-row .val{color:var(--text);font-family:var(--fm);font-size:11px;text-align:right;min-width:55px;} .funnel-row{display:flex;align-items:center;gap:12px;margin-bottom:6px;} .funnel-row .fbar{flex:1;background:var(--surface2);border-radius:8px;padding:10px 14px;font-size:13px;color:var(--text);display:flex;justify-content:space-between;align-items:center;border:1px solid var(--border);} .funnel-row .fbar .cnt{font-family:var(--fm);font-size:18px;color:var(--accent);} .funnel-row .fconv{font-size:11px;color:var(--text3);font-family:var(--fm);min-width:60px;text-align:right;} .month-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:4px;align-items:end;height:120px;margin-top:8px;} .month-bar{background:linear-gradient(180deg,var(--accent-fill) 0%,var(--accent2-fill) 100%);border-radius:3px 3px 0 0;position:relative;min-height:2px;cursor:default;transition:opacity .15s;} .month-bar:hover{opacity:.8;} .month-bar .mb-val{position:absolute;top:-16px;left:50%;transform:translateX(-50%);font-size:10.5px;font-family:var(--fm);color:var(--text2);white-space:nowrap;} .month-labels{display:grid;grid-template-columns:repeat(12,1fr);gap:4px;margin-top:6px;} .month-labels span{font-size:10.5px;color:var(--text3);text-align:center;text-transform:uppercase;} .insight-card{background:rgba(var(--accent3-rgb),.06);border:1px solid rgba(var(--accent3-rgb),.25);border-radius:10px;padding:11px 13px;margin-bottom:8px;font-size:12.5px;color:var(--text2);line-height:1.5;} .insight-card strong{color:var(--accent3);} .insight-card.warn{background:rgba(var(--accent-rgb),.06);border-color:rgba(var(--accent-rgb),.3);} .insight-card.warn strong{color:var(--accent);} .insight-card.danger{background:rgba(var(--red-rgb),.06);border-color:rgba(var(--red-rgb),.25);} .insight-card.danger strong{color:var(--red);} .top-cli-row{display:flex;justify-content:space-between;align-items:center;padding:8px 0;border-bottom:1px solid var(--border);font-size:13px;} .top-cli-row:last-child{border-bottom:none;} .top-cli-row .rank{color:var(--text3);font-family:var(--fm);font-size:11px;margin-right:8px;} .top-cli-row .nm{flex:1;color:var(--text);} .top-cli-row .ev-cnt{color:var(--accent);font-family:var(--fm);font-size:12px;} /* ── Búsqueda global ── */ .hdr-search-btn{background:rgba(var(--accent3-rgb),.1);border:1px solid rgba(var(--accent3-rgb),.3);color:var(--accent3);width:32px;height:32px;border-radius:var(--r-btn);font-size:14px;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;transition:all .15s;} .hdr-search-btn:hover{background:rgba(var(--accent3-rgb),.2);border-color:var(--accent3);} .search-modal{max-width:560px;padding:0;overflow:hidden;} .search-hd{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--border);background:var(--surface2);} .search-ic{font-size:18px;color:var(--text3);} #search-inp{flex:1;background:transparent;border:none;outline:none;color:var(--text);font-family:var(--fb);font-size:15px;padding:4px 0;} #search-inp::placeholder{color:var(--text3);} .search-close{background:transparent;border:none;color:var(--text3);font-size:18px;cursor:pointer;padding:2px 8px;border-radius:var(--r-btn);} .search-close:hover{background:var(--surface);color:var(--text);} .search-body{max-height:60vh;overflow-y:auto;padding:8px;} .search-empty{padding:40px 20px;text-align:center;} .search-empty kbd{background:var(--surface2);border:1px solid var(--border);border-radius:5px;padding:1px 6px;font-family:var(--fm);font-size:11px;color:var(--text2);margin:0 2px;} .search-group{margin-bottom:14px;} .search-group-h{font-size:10.5px;letter-spacing:1.5px;text-transform:uppercase;color:var(--text3);padding:4px 10px;margin-bottom:4px;font-weight:600;} .search-item{padding:8px 12px;border-radius:8px;cursor:pointer;display:flex;align-items:center;gap:10px;margin-bottom:2px;transition:background .12s;} .search-item:hover,.search-item.active{background:var(--surface2);} .search-item .si-ic{font-size:18px;flex-shrink:0;width:24px;text-align:center;} .search-item .si-main{flex:1;min-width:0;} .search-item .si-nom{font-size:13px;color:var(--text);font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .search-item .si-meta{font-size:11px;color:var(--text3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:1px;} .search-item .si-meta mark{background:rgba(var(--accent-rgb),.25);color:var(--accent);padding:0 2px;border-radius:2px;} .search-item .si-nom mark{background:rgba(var(--accent-rgb),.3);color:var(--accent);padding:0 2px;border-radius:2px;} .search-item .si-badge{font-size:10.5px;padding:2px 7px;border-radius:var(--r-chip);background:var(--surface2);color:var(--text3);flex-shrink:0;letter-spacing:.3px;} .search-noresults{padding:30px 20px;text-align:center;color:var(--text3);font-size:13px;} .cchips{display:flex;flex-wrap:wrap;gap:6px} .calc-bar{background:rgba(var(--accent3-rgb),.06);border:1px solid rgba(var(--accent3-rgb),.2);border-radius:10px;padding:11px 13px;margin-top:8px} .calc-bar .cl{font-size:11px;letter-spacing:1px;text-transform:uppercase;color:var(--text3);margin-bottom:5px} .calc-bar .cv{font-family:var(--fd);font-size:26px;color:var(--accent3)} .calc-bar .cs{font-size:11px;color:var(--text3);margin-top:2px} .cbx-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:6px} .cbx{display:flex;align-items:center;gap:7px;background:var(--surface2);border:1px solid var(--border);border-radius:7px;padding:7px 10px;cursor:pointer;font-size:12px;transition:border-color .2s} .cbx:hover{border-color:var(--accent)} .cbx input[type=checkbox]{width:auto;padding:0;background:none;border:none;accent-color:var(--accent)} .vtag{display:inline-flex;align-items:center;gap:4px;font-size:11px;color:var(--accent2);background:rgba(var(--accent2-rgb),.1);border:1px solid rgba(var(--accent2-rgb),.25);border-radius:var(--r-chip);padding:2px 8px;margin-top:4px} ::-webkit-scrollbar{width:4px;height:4px} ::-webkit-scrollbar-track{background:transparent} ::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px} .mt8{margin-top:8px}.mt14{margin-top:14px}.mb0{margin-bottom:0} .adm-hidden{display:none !important} input[type=checkbox]{width:auto !important;height:18px;padding:0 !important;margin:0;background:transparent;border:none;accent-color:var(--accent);cursor:pointer;flex-shrink:0;-webkit-appearance:checkbox;appearance:checkbox;} /* ════════════════════════════════════════════════════ RENOVACIÓN VISUAL v6.1 — mobile-first + chiches ════════════════════════════════════════════════════ */ /* ── Logo animado en login ── */ .logo-stage{position:relative;width:170px;height:170px;margin:0 auto 4px;display:flex;align-items:center;justify-content:center} .logo-anim{width:132px;height:132px;object-fit:contain;position:relative;z-index:2; filter:drop-shadow(0 6px 28px rgba(var(--accent-rgb),.4)); animation:logoIn 1.1s cubic-bezier(.18,.9,.25,1.05) both, logoFloat 4.5s ease-in-out 1.1s infinite} @keyframes logoIn{0%{opacity:0;transform:scale(.25) rotate(-30deg)}55%{opacity:1;transform:scale(1.14) rotate(7deg)}78%{transform:scale(.96) rotate(-3deg)}100%{transform:scale(1) rotate(0)}} @keyframes logoFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}} .logo-halo{position:absolute;width:160px;height:160px;border-radius:50%;z-index:1; background:radial-gradient(circle,rgba(var(--accent-rgb),.22),rgba(var(--accent2-rgb),.10) 45%,transparent 68%); animation:haloPulse 3.2s ease-in-out infinite} @keyframes haloPulse{0%,100%{transform:scale(.88);opacity:.45}50%{transform:scale(1.18);opacity:.95}} .float-emoji{position:absolute;font-size:22px;opacity:0;z-index:3;pointer-events:none;animation:emojiFloat 4.5s ease-in-out infinite} .fe1{top:2px;left:20px;animation-delay:1.1s} .fe2{top:22px;right:8px;font-size:27px;animation-delay:1.5s} .fe3{bottom:30px;left:2px;animation-delay:1.9s} .fe4{bottom:8px;right:26px;animation-delay:2.3s} .fe5{top:60px;left:-8px;font-size:18px;animation-delay:2.7s} @keyframes emojiFloat{0%{opacity:0;transform:translateY(12px) scale(.5)}22%{opacity:.92;transform:translateY(0) scale(1)}78%{opacity:.85}100%{opacity:0;transform:translateY(-20px) scale(.65)}} .auth-card{animation:su .5s ease .25s both} /* ── Segmented control (recordatorio, etc.) ── */ .seg{display:flex;flex-wrap:wrap;gap:4px;background:var(--surface2);border:1px solid var(--border);border-radius:11px;padding:4px} .seg-b{flex:1 1 auto;min-width:0;padding:9px 6px;background:transparent;border:none;border-radius:var(--r-btn);color:var(--text2);font-family:var(--fb);font-size:12px;font-weight:600;cursor:pointer;transition:all .15s;white-space:nowrap} .seg-b.on{background:linear-gradient(135deg,var(--accent2-fill),var(--accent-fill));color:var(--text-on-fill);box-shadow:0 3px 10px rgba(var(--accent2-rgb),.3)} /* ── Modernización de superficies (más aire y profundidad) ── */ .ec{box-shadow:0 2px 10px rgba(0,0,0,.16);transition:transform .18s,box-shadow .18s,border-color .18s} .ec:hover{box-shadow:0 8px 24px rgba(var(--accent2-rgb),.2)} .ec:active{transform:scale(.99)} .modal{border-radius:22px} .bp{box-shadow:0 4px 16px rgba(var(--accent-rgb),.22)} /* ── Header un poco más limpio ── */ .hdr-l span{background:linear-gradient(135deg,var(--accent),var(--accent3));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent} /* ════════════════════════════════════════════════════ MOBILE (≤640px) — barra de navegación inferior ════════════════════════════════════════════════════ */ @media(max-width:640px){ .nav{position:fixed;top:auto;bottom:0;left:0;right:0; border-top:1px solid var(--border);border-bottom:none; padding:0 2px;padding-bottom:env(safe-area-inset-bottom,0); justify-content:space-around;box-shadow:0 -6px 22px rgba(0,0,0,.35);z-index:150} .nb{flex:0 0 auto;min-width:60px;padding:8px 6px 9px;gap:3px;border-bottom:none;border-top:2px solid transparent} .nb span:first-child{font-size:21px} .nb svg{width:23px;height:23px} .nb.on{border-bottom:none;border-top:2px solid var(--accent);background:rgba(var(--accent-rgb),.07);border-top-left-radius:0;border-top-right-radius:0} .content{padding:14px 14px calc(82px + env(safe-area-inset-bottom,0))} /* Header condensado: el nombre se ve en el modal de perfil */ .hdr{padding:0 12px} #hdr-nom{display:none} /* Toast por encima de la barra inferior */ #toast-stack{bottom:calc(92px + env(safe-area-inset-bottom,0))} /* Títulos de sección un toque más chicos */ .stit h2{font-size:18px} /* Modales con más ancho útil en el celu */ .ov{padding:8px} .modal{max-height:calc(100vh - 16px)} } /* Pantallas muy chicas */ @media(max-width:420px){ .nb{min-width:54px;padding:8px 3px 9px;font-size:10px} .nb span:first-child{font-size:19px} .nb svg{width:21px;height:21px} } /* ── Lista de opciones (Compartir / Más) ── */ .share-list{display:flex;flex-direction:column;gap:8px} .share-opt{display:flex;align-items:center;gap:13px;width:100%;text-align:left; background:var(--surface2);border:1px solid var(--border);border-radius:12px; padding:13px 15px;cursor:pointer;color:var(--text);font-family:var(--fb);transition:all .15s} .share-opt:hover{border-color:var(--accent);background:rgba(var(--accent-rgb),.06);transform:translateY(-1px)} .share-opt:active{transform:scale(.99)} .share-opt .ic{font-size:24px;flex-shrink:0;line-height:1} .share-opt div{display:flex;flex-direction:column;gap:2px;min-width:0} .share-opt strong{font-size:14px;font-weight:600} .share-opt span{font-size:11px;color:var(--text3)} /* ── Mini-juego ── */ .game-hud{display:flex;justify-content:space-between;font-size:13px;color:var(--text2);margin-bottom:8px} .game-hud strong{color:var(--accent);font-family:var(--fm)} .game-stage{position:relative;border-radius:12px;overflow:hidden;border:1px solid var(--border);background:var(--text-on-fill);min-height:150px;max-width:440px;margin:0 auto} #game-canvas{width:100%;height:auto;display:block;touch-action:none} .game-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(var(--bg-rgb),.86);text-align:center;padding:16px;line-height:1.4} .game-ov-inner{max-width:340px;display:flex;flex-direction:column;align-items:center;gap:4px} /* Selector de juegos */ .game-picker{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-bottom:6px} .game-pick{background:var(--surface2);border:1px solid var(--border);border-radius:14px;padding:18px 12px;cursor:pointer;text-align:center;transition:all .15s;color:var(--text);font-family:var(--fb)} .game-pick:hover{border-color:var(--accent);background:rgba(var(--accent-rgb),.06);transform:translateY(-2px)} .game-pick .gp-ic{font-size:36px;line-height:1;margin-bottom:8px} /* Retrato circular: recorta y hace zoom a la cara del personaje */ .game-pick .gp-ic:has(img){width:54px;height:54px;margin:0 auto 8px;border-radius:50%;overflow:hidden; border:2px solid rgba(var(--accent-rgb),.45);box-shadow:0 3px 10px rgba(0,0,0,.35)} .game-pick .gp-ic img{width:100%;height:100%;object-fit:cover;object-position:45% 0%; transform:scale(1.7);transform-origin:51% 2%} .game-pick .gp-nom{font-family:var(--fd);font-size:16px;letter-spacing:1px;color:var(--accent)} .game-pick .gp-desc{font-size:11px;color:var(--text3);margin-top:4px;line-height:1.35} .game-back{display:inline-flex;align-items:center;gap:6px;background:var(--surface2);border:1px solid var(--accent2);color:var(--accent2);font-size:13px;font-weight:600;cursor:pointer;padding:8px 16px;margin-bottom:10px;border-radius:var(--r-btn);font-family:var(--fb);transition:all .15s} .game-back:hover{background:rgba(var(--accent2-rgb),.15);transform:translateX(-2px)} /* Modal del juego a pantalla completa */ #ov-game .modal{max-width:760px} @media(max-width:760px){ #ov-game{padding:0} #ov-game .modal{max-width:100%;width:100%;height:100vh;height:100dvh;max-height:none;border-radius:0} } /* En el celu, el juego convive con la barra inferior: queda visible y usable (z-index por debajo de la nav; !important le gana al z-index inline de openOv) */ @media(max-width:640px){ #ov-game{z-index:140 !important} #ov-game .modal{margin:0;height:calc(100vh - 66px);height:calc(100dvh - 66px - env(safe-area-inset-bottom,0))} } .rank-row{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:8px;margin-bottom:5px;background:var(--surface2);border:1px solid var(--border);font-size:13px} .rank-row.mine{border-color:var(--accent);background:rgba(var(--accent-rgb),.08)} .rank-row .rank-pos{font-size:15px;min-width:30px;text-align:center} .rank-row .rank-nom{flex:1;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .rank-row .rank-pts{font-family:var(--fm);color:var(--accent);font-weight:600} /* ── Toggles (perillas) en el detalle del show ── */ .tgl-row{display:flex;align-items:center;gap:10px;padding:10px 2px;border-bottom:1px solid rgba(var(--velo-rgb),.05)} .tgl-row:last-child{border-bottom:none} .tgl-row .tgl-lbl{font-size:13px;color:var(--text);flex:1} .tgl-row .tgl-state{font-size:11px;color:var(--text3);font-family:var(--fm)} .tgl{position:relative;display:inline-block;width:46px;height:26px;flex-shrink:0;cursor:pointer} .tgl input{opacity:0;width:0;height:0;position:absolute;margin:0} .tgl-track{position:absolute;inset:0;background:var(--surface2);border:1px solid var(--border);border-radius:20px;transition:.2s} .tgl-track::before{content:"";position:absolute;width:20px;height:20px;left:2px;top:2px;background:var(--text3);border-radius:50%;transition:.2s} .tgl input:checked + .tgl-track{background:rgba(var(--green-rgb),.22);border-color:var(--green)} .tgl input:checked + .tgl-track::before{transform:translateX(20px);background:var(--green-fill)} /* ── Separadores de sección en el form de show ── */ .ev-sec{display:flex;align-items:center;gap:8px;font-family:var(--fd);font-size:14px;letter-spacing:1.5px;text-transform:uppercase;color:var(--accent);margin:8px 0 2px;padding-bottom:6px;border-bottom:1px solid var(--border)} .ev-sec:first-child{margin-top:0} /* ── Movimientos financieros (ingresos/egresos) ── */ .mov-row{display:flex;align-items:center;gap:11px;background:var(--surface2);border:1px solid var(--border);border-radius:10px;padding:10px 12px;margin-bottom:7px} .mov-ico{font-size:18px;font-weight:700;width:22px;text-align:center;flex-shrink:0;font-family:var(--fm)} .mov-main{flex:1;min-width:0} .mov-top{font-size:13px;color:var(--text);display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-bottom:2px} .mov-sub{font-size:11px;color:var(--text3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .mov-amt{font-family:var(--fm);font-size:14px;font-weight:600;white-space:nowrap;flex-shrink:0} .mov-chip{font-size:10.5px;padding:1px 7px;border-radius:var(--r-chip);letter-spacing:.3px;white-space:nowrap} .mov-chip.in{background:rgba(var(--green-rgb),.13);color:var(--green);border:1px solid rgba(var(--green-rgb),.3)} .mov-chip.out{background:rgba(var(--red-rgb),.13);color:var(--red);border:1px solid rgba(var(--red-rgb),.3)} /* ── Desktop vs Mobile nav switches ── */ .mob-only{display:none} @media(max-width:640px){ .desk-only{display:none !important} .mob-only{display:flex} } /* ════════════════════════════════════════════════════ SKELETON LOADERS — placeholders con shimmer mientras carga ════════════════════════════════════════════════════ */ @keyframes skShimmer{0%{background-position:-320px 0}100%{background-position:320px 0}} .sk{background:linear-gradient(90deg,var(--surface2) 25%,var(--skel) 50%,var(--surface2) 75%);background-size:640px 100%;animation:skShimmer 1.3s linear infinite;border-radius:8px} .sk-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:13px} .sk-line{height:12px;margin-bottom:8px} .sk-line.lg{height:18px;width:60%} .sk-line.md{width:80%} .sk-line.sm{width:40%;margin-bottom:0} .sk-stat{height:78px} .sk-hero{height:110px;border-radius:var(--r);margin-bottom:16px} /* ── Foco visible para navegación con teclado ── */ button:focus-visible,.nb:focus-visible,.ec:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--accent3);outline-offset:2px} /* ════════════════════════════════════════════════════ SPLASH — logo animado al abrir con sesión guardada Reusa .logo-stage/.logo-anim/.float-emoji del login ════════════════════════════════════════════════════ */ #splash{position:fixed;inset:0;background:var(--bg);z-index:9998; display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px; transition:opacity .45s ease} #splash.out{opacity:0;pointer-events:none} .splash-tit{font-family:var(--fd);font-size:24px;letter-spacing:4px;color:var(--accent); animation:fi .6s ease .5s both} /* ── Acciones del modal de detalle: botones grandes en grilla ── */ .mft.det-actions{display:grid;grid-template-columns:repeat(3,1fr);gap:8px} .act-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px; padding:12px 6px;border-radius:12px;border:1px solid var(--border);background:var(--surface2); color:var(--text);font-family:var(--fb);font-size:12px;font-weight:600;cursor:pointer;transition:all .15s;line-height:1.2} .act-btn span{font-size:22px;line-height:1} .act-btn:hover{transform:translateY(-2px)} .act-btn:active{transform:scale(.97)} .act-btn.wa{background:rgba(var(--wa-rgb),.12);border-color:rgba(var(--wa-rgb),.4);color:var(--wa)} .act-btn.share{background:rgba(var(--accent2-rgb),.12);border-color:rgba(var(--accent2-rgb),.4);color:var(--accent2)} .act-btn.day{background:rgba(var(--accent3-rgb),.12);border-color:rgba(var(--accent3-rgb),.4);color:var(--accent3)} .act-btn.edit{background:rgba(var(--accent-rgb),.10);border-color:rgba(var(--accent-rgb),.4);color:var(--accent)} .act-btn.done{background:rgba(var(--green-rgb),.12);border-color:rgba(var(--green-rgb),.45);color:var(--green)} .act-btn.close{color:var(--text3)} @media(max-width:420px){.mft.det-actions{grid-template-columns:repeat(2,1fr)}} /* ── Secciones colapsables del form de show ── */ .sec-toggle{cursor:pointer;user-select:none} .sec-toggle::after{content:"▾";margin-left:auto;font-size:12px;color:var(--text3);transition:transform .18s} .sec-toggle.sec-closed::after{transform:rotate(-90deg)} .sec-toggle:hover{color:var(--accent3)} /* ── Animación de apertura de modales (tipo tarjeta que "sube") ── */ .ov.on{animation:ovIn .2s ease} .ov.on .modal{animation:modalIn .3s cubic-bezier(.2,.9,.3,1.06)} @keyframes ovIn{from{opacity:0}to{opacity:1}} @keyframes modalIn{from{opacity:0;transform:translateY(16px) scale(.965)}to{opacity:1;transform:none}} /* ── Logo del header: brillo sutil + rebote al tocarlo ── */ .hdr-l img{animation:hdrGlow 4.5s ease-in-out infinite} @keyframes hdrGlow{0%,100%{filter:drop-shadow(0 0 0 rgba(var(--accent-rgb),0))}50%{filter:drop-shadow(0 2px 9px rgba(var(--accent-rgb),.55))}} .hdr-l img.pop{animation:hdrPop .55s cubic-bezier(.2,.9,.3,1.25)} @keyframes hdrPop{0%{transform:scale(1) rotate(0)}40%{transform:scale(1.35) rotate(-10deg)}70%{transform:scale(.92) rotate(6deg)}100%{transform:scale(1) rotate(0)}} /* ── ADELANTOS RECIBIDOS (Cobros) ────────────────────────────── Es un
: se pliega solo, sin JavaScript. Cuando ya está todo cancelado arranca cerrado y en gris, para que no compita con lo que sí hay que mirar. En el Inicio directamente no se dibuja. */ .adel-box{background:rgba(var(--accent3-rgb),.08);border:1px solid rgba(var(--accent3-rgb),.3); border-radius:12px;padding:10px 14px;margin-bottom:16px;} .adel-box>summary{display:flex;align-items:center;justify-content:space-between;gap:10px; flex-wrap:wrap;cursor:pointer;list-style:none;font-size:13px;color:var(--accent3);} .adel-box>summary::-webkit-details-marker{display:none;} .adel-box>summary::after{content:"▼";font-size:10px;color:var(--text3);margin-left:auto;} .adel-box:not([open])>summary::after{content:"▶";} .adel-box>summary strong{font-size:13px;} .adel-saldo{font-size:12px;color:var(--text2);font-weight:400;} .adel-saldo b{font-family:var(--fm);color:var(--accent3);} .adel-filas{margin-top:8px;} /* Cancelado: apagado, para que se note que es historial y no algo pendiente */ .adel-box.ok{background:rgba(var(--border-rgb),.18);border-color:rgba(var(--border-rgb),.5);} .adel-box.ok>summary{color:var(--text2);} .adel-tag{font-size:11px;color:var(--green);border:1px solid var(--green); border-radius:var(--r-chip);padding:1px 8px;font-weight:600;}