:root{ /* Fondo con un punto de azul en vez de gris neutro: es lo que hace que un oscuro se vea caro y no apagado. Los separadores bajan a la mitad — una interfaz limpia se ordena con espacio y jerarquía, no con líneas marcadas alrededor de cada cosa. */ --bg:#08080b; --bg2:#0c0c10; --card:#111116; --border:rgba(255,255,255,.055); --border-hover:rgba(255,255,255,.14); --text:#f2f3f5; --muted:#8b8d97; --green:#3B82F6; --red:#ff5c5c; --r:18px; /* Salida rápida y frenado suave: el movimiento se siente inmediato, no "animado". */ --ease:cubic-bezier(.32,.72,0,1); --layer-1:rgba(255,255,255,.022); --layer-2:rgba(255,255,255,.045); --layer-3:rgba(255,255,255,.075); /* Sombra en dos alturas: uno de contacto y otro de ambiente. Una sola sombra grande se ve pegada; dos separan la tarjeta del fondo sin ensuciarlo. */ --shadow:0 1px 2px rgba(0,0,0,.4), 0 12px 32px rgba(0,0,0,.34); --header-bg:rgba(8,8,11,.72); --on-accent:#fff; } /* ============ MODO CLARO ============ Mismo panel, fondo claro. Todo el diseño usa variables, así que el cambio es de paleta: no hay dos hojas de estilo que mantener. Se activa con data-modo="claro" en . */ :root[data-modo="claro"]{ --bg:#f6f7f9; --bg2:#eef0f4; --card:#ffffff; --border:rgba(15,23,30,.07); --border-hover:rgba(15,23,30,.15); --text:#101317; --muted:#646c75; --green:#2563eb; --red:#d92c2c; --layer-1:rgba(15,23,30,.02); --layer-2:rgba(15,23,30,.04); --layer-3:rgba(15,23,30,.07); --shadow:0 1px 2px rgba(15,23,30,.06), 0 10px 28px rgba(15,23,30,.07); --header-bg:rgba(255,255,255,.78); --on-accent:#14171a; } :root[data-modo="claro"] #bg3dApp, :root[data-modo="claro"] #bg3dGate{opacity:.10;filter:invert(1) hue-rotate(180deg)} :root[data-modo="claro"] .card{box-shadow:var(--shadow)} :root[data-modo="claro"] .file-preview-overlay{background:rgba(15,23,30,.55)} :root[data-modo="claro"] .btn{color:#fff} *{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth} body{ background:var(--bg); color:var(--text); /* La fuente del sistema PRIMERO: en Mac e iPhone eso es San Francisco, que es la que da el aire de app nativa. Inter queda de respaldo para Windows y Android, donde es lo más parecido. */ font-family:-apple-system,BlinkMacSystemFont,'SF Pro Display','SF Pro Text','Inter','Segoe UI',Roboto,sans-serif; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; letter-spacing:-.01em; line-height:1.6; -webkit-font-smoothing:antialiased; min-height:100vh; } /* Toque estilo iPhone: cualquier control interactivo "se hunde" un poco al presionar. */ .btn,.chip,.view-tab,.priority-select,.status-select,.temperature-select,.row-del,.theme-swatch{ transition:transform .18s var(--ease),border-color .25s,color .25s,background .25s,box-shadow .25s; } .btn:active,.chip:active,.row-del:active{transform:scale(.96)} .theme-swatch:active{transform:scale(.88)} .container{max-width:1400px;margin:0 auto;padding:0 28px} img{max-width:100%} ::placeholder{color:#4f4f58} /* ===== SHARED PRIMITIVES (copiados de la landing) ===== */ .card{ background:var(--card);border:1px solid var(--border);border-radius:var(--r); padding:24px;position:relative;transition:border-color .3s var(--ease),box-shadow .3s var(--ease),transform .3s var(--ease); will-change:transform;overflow:hidden; } /* Al pasar por encima se levanta apenas. El salto de 3 px y la sombra grande hacían que la pantalla entera pareciera moverse cuando el cursor la recorría. */ .card:hover{border-color:var(--border-hover);box-shadow:0 1px 2px rgba(0,0,0,.4),0 16px 40px rgba(0,0,0,.3);transform:translateY(-1px)} /* Tarjetas del panel (no la de login) semitransparentes con vidrio esmerilado — así las partículas de fondo se ven detrás de todo el contenido, no solo en los huecos. */ .app-main .card{background:color-mix(in srgb,var(--card) 78%,transparent);backdrop-filter:blur(9px) saturate(140%);-webkit-backdrop-filter:blur(9px) saturate(140%)} /* Brillo que sigue el mouse — "respira" con el elemento, da sensación de profundidad al tocarlo. */ .card::before{ content:'';position:absolute;inset:0;pointer-events:none;opacity:0; background:radial-gradient(280px circle at var(--mx,50%) var(--my,50%),color-mix(in srgb,var(--green) 16%,transparent),transparent 70%); transition:opacity .4s; } .card:hover::before{opacity:1} /* ===== MOVIMIENTO SUAVE DE FONDO (bloques que "respiran": suben y se agrandan un poco) ===== */ @keyframes cardFloat{ 0%{transform:translateY(0) scale(1)} 50%{transform:translateY(-6px) scale(1.012)} 100%{transform:translateY(0) scale(1)} } @media (prefers-reduced-motion: no-preference){ .app-main .card{animation:cardFloat 7s ease-in-out infinite} .app-main .card:hover{animation-play-state:paused} .app-main .stat-row .card:nth-child(1),.app-main .file-grid .card:nth-child(1){animation-delay:0s} .app-main .stat-row .card:nth-child(2),.app-main .file-grid .card:nth-child(2){animation-delay:.6s} .app-main .stat-row .card:nth-child(3),.app-main .file-grid .card:nth-child(3){animation-delay:1.2s} .app-main .stat-row .card:nth-child(4),.app-main .file-grid .card:nth-child(4){animation-delay:1.8s} .app-main .stat-row .card:nth-child(5){animation-delay:2.4s} .app-main .stat-row .card:nth-child(6){animation-delay:3s} .app-main .employee-group:nth-child(odd) .card{animation-delay:.3s} .app-main .employee-group:nth-child(even) .card{animation-delay:.9s} } .btn{ display:inline-flex;align-items:center;gap:10px;justify-content:center; background:#fff;color:#000;text-decoration:none; /* 600 en vez de 800: el peso extremo se lee como un botón de anuncio. */ font-weight:600;font-size:.94rem;letter-spacing:-.01em;padding:14px 28px;border-radius:999px; border:none;cursor:pointer;font-family:inherit; transition:transform .2s var(--ease),box-shadow .2s var(--ease),filter .2s var(--ease);width:100%; } .btn .arr{transition:transform .3s var(--ease)} .btn:hover{transform:translateY(-2px);box-shadow:0 12px 40px var(--layer-3)} .btn:hover .arr{transform:translateX(4px)} .btn:disabled{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none} .btn-sm{width:auto;padding:10px 20px;font-size:.85rem} .btn-outline{ background:transparent;color:var(--text);border:1px solid var(--border); } .btn-outline:hover{border-color:var(--border-hover);box-shadow:none} .chip{ border:1px solid var(--border);border-radius:999px;padding:8px 16px; color:var(--muted);font-size:.83rem;font-weight:500;background:none; cursor:pointer;font-family:inherit; transition:border-color .2s var(--ease),color .2s var(--ease),background .2s var(--ease); } .chip:active{transform:scale(.97)} .chip:hover{border-color:var(--border-hover);color:var(--text)} .prod-review-request-btn{color:#ffb4b4;border-color:rgba(255,92,92,.4);background:rgba(255,92,92,.06)} .prod-review-request-btn:hover{border-color:rgba(255,92,92,.7);color:#ffdada;background:rgba(255,92,92,.12)} .prod-review-request-btn:disabled{opacity:.5;cursor:not-allowed} .badge{ display:inline-flex;align-items:center;gap:8px; border:1px solid var(--border);background:rgba(15,15,19,.6); padding:8px 16px;border-radius:999px; font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);font-weight:700; } .kicker{ display:inline-flex;align-items:center;gap:9px; font-size:.68rem;letter-spacing:.14em;text-transform:uppercase; color:var(--muted);margin-bottom:12px;font-weight:600;opacity:.85; } /* La rayita se hace apenas visible: era un adorno que competía con el título. */ .kicker::before{content:'';width:16px;height:1px;background:currentColor;opacity:.45} .center-kicker{justify-content:center} .center-kicker::before{display:none} /* ===== GATE ===== */ .gate{ min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px; position:relative;overflow:hidden; } /* pointer-events:none no es decorativo: es un lienzo que cubre la pantalla entera. Hoy queda por debajo del formulario y no molesta, pero un fondo que acepta el ratón es exactamente el patrón que dejó al equipo sin poder pulsar nada con el agente flotante. Que no se repita. */ #bg3dGate{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none} .gate-vignette{ position:absolute;inset:0;pointer-events:none; background:radial-gradient(ellipse 70% 65% at 50% 50%, transparent 15%, var(--bg) 92%); } .gate-card{max-width:380px;width:100%;text-align:center;position:relative;z-index:2} .gate-logo{height:44px;width:auto;margin:0 auto 20px;display:block;filter:drop-shadow(0 0 16px var(--layer-3))} .gate-title{font-size:1.6rem;font-weight:900;letter-spacing:-.02em;margin-bottom:8px} .gate-sub{color:var(--muted);font-size:.92rem;margin-bottom:26px} .gate-sub code{background:var(--bg);border:1px solid var(--border);border-radius:6px;padding:1px 6px;font-size:.85em} #gateForm input{ width:100%;background:var(--bg);border:1px solid var(--border);border-radius:13px; color:var(--text);padding:15px 18px;font-size:1.1rem;font-family:inherit;text-align:center; letter-spacing:.3em;margin-bottom:14px;outline:none;transition:border-color .3s,box-shadow .3s; } #gateForm input:focus{border-color:var(--layer-3);box-shadow:0 0 0 4px var(--layer-2)} #gateUsername{text-align:left;letter-spacing:normal} .gate-error{color:var(--red);font-size:.85rem;margin-top:14px;display:none} .gate-error.show{display:block} /* ---- Paso "¿quién entra?": equipo interno o creadora ---- */ .gate-role-btn{ width:100%;display:flex;align-items:center;gap:14px;text-align:left; background:var(--bg);border:1px solid var(--border);border-radius:14px; padding:16px 18px;margin-bottom:12px;cursor:pointer;font-family:inherit;color:var(--text); transition:border-color .25s,transform .25s var(--ease),box-shadow .25s; } .gate-role-btn:hover{ border-color:color-mix(in srgb,var(--green) 45%,var(--border)); transform:translateY(-2px);box-shadow:0 10px 30px rgba(0,0,0,.35); } .gate-role-ico{font-size:1.5rem;flex:none} .gate-role-txt{flex:1;display:flex;flex-direction:column;gap:2px} .gate-role-txt strong{font-size:.98rem;font-weight:800} .gate-role-txt small{color:var(--muted);font-size:.78rem} .gate-role-btn .arr{color:var(--muted);flex:none} .gate-role-btn:hover .arr{color:var(--green)} .gate-back-btn{ background:none;border:none;color:var(--muted);font-family:inherit;font-size:.82rem; cursor:pointer;margin-top:16px;padding:4px; } .gate-back-btn:hover{color:var(--text)} /* ---- Producción en ventanas: una cosa a la vez, en vez de un scroll infinito ---- */ .prod-windows{ display:flex;gap:6px;flex-wrap:wrap;margin-bottom:24px;padding:6px; background:var(--bg2);border:1px solid var(--border);border-radius:14px;width:fit-content;max-width:100%; } .prod-window-tab{ display:inline-flex;align-items:center;gap:8px;border:none;background:none;cursor:pointer; font-family:inherit;font-size:.86rem;font-weight:700;color:var(--muted); padding:9px 16px;border-radius:10px;transition:all .2s; } .prod-window-tab:hover{color:var(--text)} .prod-window-tab.active{background:var(--card);color:var(--text);box-shadow:0 2px 10px rgba(0,0,0,.3)} .prod-window-tab.active span{filter:none} /* Tarjetas del resumen */ .prod-dash-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px;margin-bottom:16px} .prod-dash-card{padding:22px} .prod-dash-card h3{font-size:1rem;font-weight:800;margin-bottom:16px} .prod-donut-wrap{display:flex;justify-content:center;padding:4px 0} .prod-donut{width:150px;height:150px} .prod-donut-num{fill:var(--text);font-size:34px;font-weight:800;font-family:inherit} .prod-donut-sub{fill:var(--muted);font-size:13px;font-family:inherit} /* Barras horizontales */ .mini-bars{display:flex;flex-direction:column;gap:10px} .mini-bar-row{display:grid;grid-template-columns:88px 1fr auto;align-items:center;gap:10px} .mini-bar-label{ font-size:.78rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis; } .mini-bar-track{height:9px;background:var(--bg);border-radius:999px;overflow:hidden} .mini-bar-fill{display:block;height:100%;border-radius:999px;transition:width .6s var(--ease)} .mini-bar-val{font-size:.78rem;font-weight:800;white-space:nowrap} /* KPIs compactos */ .prod-kpi-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin-bottom:24px} .prod-kpi{padding:18px 20px;text-align:center} .prod-kpi-num{font-size:1.9rem;font-weight:900;line-height:1.1} .prod-kpi-label{color:var(--muted);font-size:.78rem;margin-top:4px} .prod-kpi.is-bad .prod-kpi-num{color:var(--red)} .prod-kpi.is-warn .prod-kpi-num{color:#ffb020} /* ---- Checklist de la creadora ---- */ .model-checklist-card{border-color:color-mix(in srgb,var(--green) 35%,var(--border))} .model-check-item{ display:flex;align-items:flex-start;gap:11px;padding:11px 13px;margin-bottom:8px;cursor:pointer; background:var(--bg);border:1px solid var(--border);border-radius:11px;transition:all .2s; } .model-check-item:hover{border-color:var(--border-hover)} .model-check-item input{width:auto;margin:2px 0 0;accent-color:var(--green);flex:none} .model-check-item span{font-size:.92rem;line-height:1.45} .model-check-item.done{border-color:color-mix(in srgb,var(--green) 40%,transparent);background:color-mix(in srgb,var(--green) 7%,transparent)} .model-check-item.done span{color:var(--muted);text-decoration:line-through} /* ---- Menú del panel: hub por áreas en vez de una tira de 9 pestañas ---- */ .menu-group{margin-bottom:26px} .menu-group-title{ font-size:.72rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase; color:var(--muted);margin:0 0 9px 4px;opacity:.75; } /* LISTA AGRUPADA. Antes cada entrada era una tarjeta suelta con su propio borde y su sombra: con ocho seguidas, la pantalla se llenaba de cajas compitiendo entre sí. Ahora el grupo es UNA sola pieza y las entradas se separan con una línea de un píxel — el ojo lee la lista de un tirón y el borde exterior es el único que hay. Es el patrón de Ajustes del iPhone, y funciona porque quita ruido sin quitar información. */ .menu-grid{ display:flex;flex-direction:column; background:var(--card);border:1px solid var(--border); border-radius:16px;overflow:hidden; } .menu-card{ display:flex;align-items:center;gap:13px;text-align:left;width:100%; background:transparent;border:0;border-radius:0; padding:14px 16px;cursor:pointer;font-family:inherit;color:var(--text); transition:background .16s var(--ease); position:relative; } /* La línea separadora se pinta con el pseudoelemento y arranca donde empieza el TEXTO, no en el borde: así el icono queda fuera del carril y la lista respira. La última no lleva. */ .menu-card+.menu-card::before{ content:'';position:absolute;left:58px;right:0;top:0;height:1px;background:var(--border); } .menu-card:hover{background:var(--layer-2)} .menu-card:active{background:var(--layer-3)} .menu-card.active{background:var(--layer-2)} /* El icono en su ficha redondeada, como en iOS: le da peso visual y alinea toda la columna. */ .menu-card-ico{ font-size:1.05rem;flex:none;line-height:1; width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center; border-radius:9px;background:var(--layer-2); } .menu-card-txt{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0} .menu-card-txt strong{font-size:.94rem;font-weight:600;letter-spacing:-.01em} .menu-card-txt small{color:var(--muted);font-size:.79rem;line-height:1.4} /* La flecha, apenas insinuada: marca que se puede entrar sin gritarlo. */ .menu-card-arr{color:var(--muted);flex:none;font-weight:400;opacity:.45;font-size:1.05rem} .menu-card-drive{ flex:none;font-size:.95rem;opacity:.5;padding:4px 6px;border-radius:8px; transition:opacity .2s,background .2s; } .menu-card-drive:hover{opacity:1;background:var(--layer-3)} .menu-card-drive-only{border-style:dashed} .menu-card-drive-only:hover{border-style:solid} .menu-card:hover .menu-card-arr{opacity:.8} .panel-backbar{ display:flex;align-items:center;gap:14px;margin-bottom:26px; padding-bottom:16px;border-bottom:1px solid var(--border); } .panel-backbar-title{font-weight:800;font-size:1rem} /* ---- Áreas de la ficha (alguien puede estar en varias a la vez) ---- */ .ficha-areas{display:flex;flex-wrap:wrap;gap:8px} .ficha-area-chk{ display:inline-flex;align-items:center;gap:7px;cursor:pointer; border:1px solid var(--border);border-radius:999px;padding:7px 13px; font-size:.8rem;font-weight:600;color:var(--muted);transition:all .2s; } .ficha-area-chk:hover{border-color:var(--border-hover);color:var(--text)} .ficha-area-chk input{width:auto;margin:0;accent-color:var(--green)} .ficha-area-chk:has(input:checked){ color:var(--green);border-color:color-mix(in srgb,var(--green) 50%,transparent); background:color-mix(in srgb,var(--green) 10%,transparent); } /* ---- Acceso rápido (grupo de WhatsApp del equipo / de las creadoras) ---- */ .quick-link-chip{ text-decoration:none;flex-shrink:0; color:var(--green);border-color:color-mix(in srgb,var(--green) 45%,transparent); background:color-mix(in srgb,var(--green) 8%,transparent); } .quick-link-chip:hover{ color:#fff;border-color:var(--green); background:color-mix(in srgb,var(--green) 18%,transparent); } /* ---- Sub-pestañas de Informes (por área del equipo) ---- */ .informes-area-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:24px} .informes-area-tab.active{ color:var(--green);border-color:color-mix(in srgb,var(--green) 50%,transparent); background:color-mix(in srgb,var(--green) 10%,transparent); } /* ---- Panel de la creadora: su ficha (contrato, capacitación, Telegram, carpeta) ---- */ .model-ficha-grid{ display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px;margin-bottom:30px; } .model-ficha-card{ display:flex;flex-direction:column;gap:6px;padding:24px;text-decoration:none;color:inherit; } .model-ficha-card:hover{border-color:color-mix(in srgb,var(--green) 45%,var(--border))} .model-ficha-ico{font-size:1.7rem;margin-bottom:4px} .model-ficha-card h3{font-size:1rem;font-weight:800} .model-ficha-card p{color:var(--muted);font-size:.84rem;line-height:1.5;flex:1} .model-ficha-cta{color:var(--green);font-size:.82rem;font-weight:700;margin-top:8px} /* ===== APP SHELL ===== */ .app{position:relative} #bg3dApp{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none} .app-header{border-bottom:1px solid var(--border);background:var(--header-bg);backdrop-filter:blur(14px);position:sticky;top:0;z-index:10} .app-header-inner{max-width:1120px;margin:0 auto;padding:18px 28px;display:flex;align-items:center;justify-content:space-between;gap:16px} .app-logo{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--text)} .app-logo img{height:26px;width:auto} .app-logo span{font-weight:800;letter-spacing:.06em;font-size:.92rem} .app-header-right{display:flex;align-items:center;gap:12px} .role-badge{color:var(--text);border-color:var(--border-hover)} .app-main{padding:44px 30px 90px;position:relative;z-index:1} /* La entrada de cada vista, más corta y con menos desplazamiento: media pantalla subiendo diez píxeles medio segundo se nota como lentitud, no como elegancia. */ .app-main>*{animation:viewFadeIn .32s var(--ease)} @keyframes viewFadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}} /* ===== PERSONALIZACIÓN (color de acento por navegador) ===== */ .theme-toggle-btn{font-size:1rem;line-height:1;padding:9px 14px} .theme-swatches{display:flex;justify-content:center;gap:14px} .theme-swatch{ width:38px;height:38px;border-radius:50%;border:2px solid transparent;cursor:pointer; box-shadow:0 0 0 1px var(--layer-3) inset; } .theme-swatch:hover{transform:scale(1.1)} .theme-swatch.active{border-color:#fff;box-shadow:0 0 0 3px var(--layer-3)} /* ===== SECTION HEAD ===== */ .section-head{margin-bottom:28px;display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap} /* 700 y no 900: el peso máximo engorda el texto y le quita aire. Y algo más grande, porque la jerarquía se marca con TAMAÑO, no con grosor. */ .section-head h2{font-size:1.72rem;font-weight:700;letter-spacing:-.028em;line-height:1.15} .section-head p{color:var(--muted);font-size:.94rem;margin-top:6px;line-height:1.5} /* ===== STAT SUMMARY ===== */ .stat-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px;margin-bottom:44px} .stat-card{padding:24px 26px} /* Cifras tabulares: sin esto las columnas de números bailan al actualizarse. */ .stat-num{font-size:2rem;font-weight:600;letter-spacing:-.03em;font-variant-numeric:tabular-nums} .stat-label{color:var(--muted);font-size:.85rem;margin-top:6px} /* ===== PRODUCCIÓN (100 puntos por cuenta, bono diario) ===== */ .production-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:16px} @media(max-width:900px){.production-summary{grid-template-columns:1fr}} .production-ring-card{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:30px} .production-ring-wrap{position:relative;width:130px;height:130px} .production-ring-svg{width:100%;height:100%} .production-ring-center{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:1.5rem;font-weight:900} .production-ring-label{color:var(--muted);font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;margin-top:14px} .production-payment-card{ background:linear-gradient(135deg,#0a0f0c,#0d1c13 55%,#0f2a1a);border-color:rgba(59,130,246,.18); display:flex;flex-direction:column;justify-content:space-between;gap:18px; } .production-payment-head{display:flex;justify-content:space-between;align-items:flex-start;gap:14px} .production-payment-kicker{color:var(--muted);font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;margin-bottom:6px} .production-payment-num{font-size:2.6rem;font-weight:900;letter-spacing:-.02em;color:var(--green)} .production-bonus-pill{ background:rgba(59,130,246,.1);border:1px solid rgba(59,130,246,.25);border-radius:16px; padding:10px 16px;text-align:center;flex-shrink:0; } .production-bonus-pill span{display:block;font-size:.62rem;font-weight:800;text-transform:uppercase;color:var(--muted);letter-spacing:.06em} .production-bonus-pill strong{font-size:.95rem;color:var(--green)} .production-progress-row{display:flex;justify-content:space-between;font-size:.78rem;font-weight:700;color:var(--muted)} .production-progress-bar{width:100%;background:var(--layer-3);height:10px;border-radius:999px;overflow:hidden} .production-progress-bar div{background:linear-gradient(90deg,var(--green),#5eead4);height:100%;border-radius:999px;transition:width .6s var(--ease)} .production-scheme-card{display:flex;flex-direction:column;gap:8px} .production-scheme-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px} .production-scheme-head h4{font-size:.85rem;font-weight:800} .production-scheme-row{display:flex;justify-content:space-between;font-size:.82rem;font-weight:700;background:var(--bg);border-radius:12px;padding:9px 12px} .production-scheme-row strong{color:var(--green)} .production-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px} .production-account-card{transition:border-color .3s,box-shadow .3s,transform .4s var(--ease)} .production-account-card.is-done{border-color:rgba(59,130,246,.4);box-shadow:0 0 0 1px rgba(59,130,246,.15) inset} .production-account-card.is-neglected{border-color:rgba(255,92,92,.4);box-shadow:0 0 0 1px rgba(255,92,92,.15) inset} .production-account-card.has-open-task{border-color:rgba(255,176,32,.45);box-shadow:0 0 0 1px rgba(255,176,32,.18) inset} .production-task-btn-assigned{border-color:rgba(255,176,32,.4)} .production-task-btn-assigned.active{color:#ffb020;text-shadow:0 0 8px #ffb020;box-shadow:0 0 10px rgba(255,176,32,.55),0 0 22px rgba(255,176,32,.3),inset 0 0 14px rgba(255,176,32,.18)} .production-task-btn-assigned.active::before{background:conic-gradient(from var(--neon-angle),#ffb020,#fff,#ffb020)} .production-account-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px;row-gap:8px} .production-account-head > div{flex-wrap:wrap;row-gap:6px} .production-account-badge{font-weight:800;font-size:.92rem;color:var(--text);text-decoration:none} .production-account-badge:hover{text-decoration:underline} .production-points-badge{background:var(--layer-3);color:var(--muted);font-size:.72rem;font-weight:800;padding:4px 10px;border-radius:999px;white-space:nowrap} .production-points-badge.is-done{background:rgba(59,130,246,.14);color:var(--green)} .production-followers-input{ width:100%;background:var(--bg);border:1px solid var(--border);border-radius:10px;color:var(--text); padding:9px 12px;font-size:.85rem;font-family:inherit;font-weight:700;outline:none; } .production-followers-input:focus{border-color:var(--layer-3)} .production-tasks-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:14px} .production-task-btn{ background:var(--bg);border:1px solid var(--border);border-radius:10px;color:var(--muted); font-family:inherit;font-weight:800;font-size:.72rem;text-transform:uppercase;letter-spacing:.02em; padding:9px 6px;cursor:pointer;transition:all .2s var(--ease); } .production-task-btn span{opacity:.75;font-weight:700} .production-task-btn:hover{border-color:var(--border-hover);color:var(--text)} /* Neón: en vez del verde oscuro apagado, un fondo casi negro + texto y contorno brillantes, con una raya de gradiente girando alrededor del borde para que se sienta "vivo". */ @property --neon-angle{syntax:'';inherits:false;initial-value:0deg} .production-task-btn.active{ position:relative;background:#050806;color:var(--green);border-color:transparent; text-shadow:0 0 8px var(--green); box-shadow:0 0 10px rgba(59,130,246,.55),0 0 22px rgba(59,130,246,.3),inset 0 0 14px rgba(59,130,246,.18); z-index:0; } .production-task-btn.active::before{ content:'';position:absolute;inset:-2px;border-radius:10px;padding:2px;z-index:-1; background:conic-gradient(from var(--neon-angle),var(--green),#5eead4,#fff,var(--green)); -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0); -webkit-mask-composite:xor;mask-composite:exclude; animation:neonSpin 3.2s linear infinite; } @keyframes neonSpin{to{--neon-angle:360deg}} .production-task-btn.active span{opacity:.85} .production-task-btn.locked{cursor:not-allowed;opacity:.85} .production-task-btn.active.locked{box-shadow:0 0 6px rgba(59,130,246,.35),inset 0 0 10px rgba(59,130,246,.12)} .production-task-btn.active.locked::before{animation-play-state:paused;opacity:.55} @media (prefers-reduced-motion: reduce){ .production-task-btn.active::before{animation:none} } /* Prioridad del día (categoría más atrasada: reels/historias/posts) — resalta cuál hacer primero, y apaga las demás hasta que esa quede resuelta. */ .production-task-btn-priority{ border-color:#ffb020;color:#ffb020;box-shadow:0 0 10px rgba(255,176,32,.25); animation:priorityPulse 1.8s ease-in-out infinite; } @keyframes priorityPulse{0%,100%{box-shadow:0 0 10px rgba(255,176,32,.25)}50%{box-shadow:0 0 16px rgba(255,176,32,.5)}} .production-task-btn-blocked{opacity:.4;cursor:not-allowed} .production-task-btn-blocked:hover{border-color:var(--border);color:var(--muted)} @media (prefers-reduced-motion: reduce){.production-task-btn-priority{animation:none}} .prod-bell-btn,.prod-folder-btn,.prod-geelark-btn{ background:none;border:1px solid var(--border);border-radius:999px;color:var(--muted); width:32px;height:32px;font-size:.95rem;cursor:pointer;flex-shrink:0;transition:all .2s var(--ease); display:inline-flex;align-items:center;justify-content:center;text-decoration:none; } .prod-bell-btn:hover,.prod-folder-btn:hover,.prod-geelark-btn:hover{border-color:var(--border-hover);color:var(--text);transform:scale(1.08)} .prod-folder-btn{width:26px;height:26px;font-size:.8rem;vertical-align:middle} .prod-bell-btn.unread{border-color:rgba(255,176,32,.5);color:#ffb020;animation:bellPulse 1.6s ease-in-out infinite} @keyframes bellPulse{0%,100%{box-shadow:0 0 0 0 rgba(255,176,32,.35)}50%{box-shadow:0 0 0 6px rgba(255,176,32,0)}} .prod-owner-note{ background:rgba(255,176,32,.08);border:1px solid rgba(255,176,32,.3);border-radius:12px; padding:10px 14px;font-size:.85rem;color:var(--text);white-space:pre-line;margin-top:12px; } .prod-bank-strip{display:flex;gap:12px;overflow-x:auto;padding-bottom:8px;margin-bottom:34px} .prod-bank-card{min-width:210px;flex-shrink:0;padding:14px 16px;margin-bottom:0} .prod-bank-card.is-top{border-color:rgba(59,130,246,.4)} .prod-bank-head{display:flex;justify-content:space-between;align-items:center;gap:10px} /* Tabla + filtros como una sola pieza: un solo marco, los filtros pegados arriba de la tabla en vez de flotar sueltos por su cuenta — se ve y se siente como un único panel de control. */ .prod-table-shell{background:var(--card);border:1px solid var(--border);border-radius:var(--r);overflow:hidden} .prod-filters-band{padding:16px 18px;border-bottom:1px solid var(--border);background:color-mix(in srgb,var(--green) 3%,transparent)} .prod-table-wrap{border:none;border-radius:0;background:transparent} .prod-filters{display:flex;flex-wrap:wrap;gap:9px} .prod-filters select,.prod-filters input{ background:var(--bg);border:1px solid var(--border);border-radius:9px;color:var(--text); padding:8px 11px;font-size:.79rem;font-family:inherit;height:36px; } .prod-filters select{cursor:pointer} .prod-filters input{outline:none;min-width:170px;flex:1 1 170px;max-width:220px} .prod-filters input:focus{border-color:rgba(59,130,246,.5)} .prod-filters select:focus{border-color:rgba(59,130,246,.5)} @media(max-width:640px){.prod-filters-band{padding:12px}.prod-filters select,.prod-filters input{flex:1 1 auto}} .prod-row-neglected td{background:rgba(255,92,92,.06)} .prod-row-has-task td{background:rgba(255,176,32,.06)} .prod-note-btn.has-note{border-color:rgba(255,176,32,.5);color:#ffb020} /* ===== BURBUJA FLOTANTE: crear empleado / modelo / cuenta ===== */ #createBubbleHost{position:fixed;right:24px;bottom:24px;z-index:60;display:flex;flex-direction:column;align-items:flex-end;gap:14px} .create-bubble-fab{ width:56px;height:56px;border-radius:50%;background:var(--green);color:#04150c;border:none; font-size:1.5rem;font-weight:900;cursor:pointer;box-shadow:0 10px 30px rgba(59,130,246,.35); transition:transform .2s var(--ease),box-shadow .2s;flex-shrink:0; } .create-bubble-fab:hover{transform:scale(1.06);box-shadow:0 14px 36px rgba(59,130,246,.45)} .create-bubble-panel{ width:min(360px,calc(100vw - 48px));background:var(--card);border:1px solid var(--border-hover); border-radius:var(--r);padding:22px;box-shadow:0 24px 60px rgba(0,0,0,.5); animation:bubblePop .25s var(--ease); } @keyframes bubblePop{from{opacity:0;transform:translateY(12px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}} .create-bubble-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;gap:10px} .create-bubble-type-tabs{display:flex;gap:6px;background:var(--bg);border-radius:999px;padding:4px} .create-bubble-type-btn{ background:none;border:none;color:var(--muted);font-family:inherit;font-weight:700;font-size:.76rem; padding:7px 12px;border-radius:999px;cursor:pointer;transition:all .2s var(--ease); } .create-bubble-type-btn.active{background:var(--green);color:#04150c} .create-bubble-close{background:none;border:none;color:var(--muted);font-size:1rem;cursor:pointer;padding:4px 8px} .create-bubble-close:hover{color:var(--text)} .create-bubble-body{display:flex;flex-direction:column;gap:12px} /* ===== BURBUJA FLOTANTE: Ayuda (Centro de ayuda + Soporte) ===== */ #helpBubbleHost{position:fixed;left:24px;bottom:24px;z-index:60;display:flex;flex-direction:column;align-items:flex-start;gap:14px} .help-bubble-fab{ position:relative;width:56px;height:56px;border-radius:50%;background:var(--card);color:var(--text); border:1px solid var(--border-hover);font-size:1.35rem;font-weight:900;cursor:pointer; box-shadow:0 10px 30px rgba(0,0,0,.35);transition:transform .2s var(--ease),box-shadow .2s;flex-shrink:0; } .help-bubble-fab:hover{transform:scale(1.06)} .help-bubble-badge{ position:absolute;top:-4px;right:-4px;background:var(--red);color:#fff;font-size:.68rem;font-weight:800; border-radius:999px;min-width:18px;height:18px;display:flex;align-items:center;justify-content:center;padding:0 4px; } .help-bubble-panel{ width:min(400px,calc(100vw - 48px));max-height:min(560px,calc(100vh - 120px));overflow-y:auto; background:var(--card);border:1px solid var(--border-hover);border-radius:var(--r);padding:22px; box-shadow:0 24px 60px rgba(0,0,0,.5);animation:bubblePop .25s var(--ease); } /* El dueño necesita ver la lista de conversaciones Y el hilo completo lado a lado, con informes largos adentro — 400px lo dejaba todo amontonado. Solo se ensancha para el dueño; el chat del empleado (un solo hilo, mensajes cortos) se queda como estaba. */ .help-bubble-panel-owner{width:min(880px,calc(100vw - 48px));max-height:min(680px,calc(100vh - 100px))} .chat-owner-layout{display:grid;grid-template-columns:minmax(200px,260px) 1fr;gap:16px;align-items:start} /* En celular no hay ancho para lista + hilo lado a lado (quedaba todo amontonado e ilegible) — se apilan: primero la lista de conversaciones, el hilo abierto debajo. También se achica el panel flotante entero para que no se salga de la pantalla. */ @media(max-width:640px){ .help-bubble-panel,.help-bubble-panel-owner{width:calc(100vw - 24px);max-height:calc(100vh - 90px);padding:16px} .chat-owner-layout{grid-template-columns:1fr} .chat-report-body{max-height:260px} } .help-bubble-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;gap:10px} .help-bubble-type-tabs{display:flex;gap:6px;background:var(--bg);border-radius:999px;padding:4px} .help-bubble-type-btn{ background:none;border:none;color:var(--muted);font-family:inherit;font-weight:700;font-size:.76rem; padding:7px 12px;border-radius:999px;cursor:pointer;transition:all .2s var(--ease); } .help-bubble-type-btn.active{background:var(--green);color:#04150c} .help-bubble-close{background:none;border:none;color:var(--muted);font-size:1rem;cursor:pointer;padding:4px 8px} .help-bubble-close:hover{color:var(--text)} .help-bubble-body .section-head{margin-top:0} /* ===== BURBUJA FLOTANTE: Mi contenido (dueño) — apilada sobre la de crear (+) ===== */ #myContentBubbleHost{position:fixed;right:24px;bottom:96px;z-index:59;display:flex;flex-direction:column;align-items:flex-end;gap:14px} .mycontent-bubble-fab{background:var(--card);color:var(--text)} .mycontent-bubble-panel{width:min(720px,calc(100vw - 48px));max-height:min(640px,calc(100vh - 140px));overflow-y:auto} .mycontent-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px} /* ===== BURBUJA FLOTANTE: Espacio de trabajo (dueño) — modal grande centrado ===== */ #workspaceBubbleHost{position:fixed;left:24px;bottom:96px;z-index:59;display:flex;flex-direction:column;align-items:flex-start;gap:14px} .workspace-bubble-fab{background:var(--card);color:var(--text)} .workspace-modal-overlay{ position:fixed;inset:0;background:rgba(6,6,7,.78);backdrop-filter:blur(6px); z-index:200;display:flex;align-items:center;justify-content:center;padding:40px 20px; } .workspace-modal{ width:min(960px,94vw);max-height:min(88vh,880px);display:flex;flex-direction:column; background:var(--card);border:1px solid var(--border-hover);border-radius:var(--r); box-shadow:0 30px 90px rgba(0,0,0,.6);animation:bubblePop .25s var(--ease);overflow:hidden; } .workspace-modal-head{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:20px 26px;border-bottom:1px solid var(--border);flex-wrap:wrap} .workspace-modal-tabs{display:flex;gap:6px;background:var(--bg);border-radius:999px;padding:4px} .workspace-modal-tab{ background:none;border:none;color:var(--muted);font-family:inherit;font-weight:700;font-size:.85rem; padding:9px 18px;border-radius:999px;cursor:pointer;transition:all .2s var(--ease);white-space:nowrap; } .workspace-modal-tab.active{background:var(--green);color:#04150c} .workspace-modal-close{background:none;border:none;color:var(--muted);font-size:1.1rem;cursor:pointer;padding:4px 8px} .workspace-modal-close:hover{color:var(--text)} .workspace-plan-link-row{ display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:14px 26px; border-bottom:1px solid var(--border);background:var(--bg); } .workspace-plan-link-row label{font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:700;flex-shrink:0} .workspace-plan-link-row code{ flex:1;min-width:180px;background:var(--card);border:1px solid var(--border);border-radius:10px; padding:9px 12px;font-size:.82rem;color:var(--green);overflow-x:auto;white-space:nowrap; } .workspace-modal-body{flex:1;overflow-y:auto;padding:24px 26px} .ws-section-title{ font-size:.7rem;font-weight:800;text-transform:uppercase;letter-spacing:.2em;color:var(--muted); border-bottom:1px solid var(--border);padding-bottom:6px;margin:22px 0 12px; } .ws-section-title:first-child{margin-top:0} .workspace-list{display:flex;flex-direction:column;gap:8px} .workspace-list-item{ display:flex;align-items:center;justify-content:space-between;gap:10px; background:var(--bg);border:1px solid var(--border);border-radius:10px;padding:11px 14px;font-size:.88rem; } .workspace-list-item label{display:flex;align-items:center;gap:8px;cursor:pointer;flex:1;min-width:0} .workspace-list-item.is-done label{color:var(--muted);text-decoration:line-through} .workspace-list-item .ws-item-del,.workspace-list-item .ws-rem-del{ background:none;border:none;color:var(--muted);cursor:pointer;font-size:.9rem;flex-shrink:0; } .workspace-list-item .ws-item-del:hover,.workspace-list-item .ws-rem-del:hover{color:var(--red)} .workspace-list-item .ws-item-meta{display:flex;align-items:center;gap:8px;flex-shrink:0} .workspace-list-item.priority-alta{border-left:3px solid #ff6b6b} .workspace-list-item.priority-media{border-left:3px solid #ffb020} .workspace-list-item.priority-baja{border-left:3px solid transparent} .ws-priority-badge{font-size:.66rem;font-weight:800;text-transform:uppercase;letter-spacing:.04em;padding:3px 9px;border-radius:999px;white-space:nowrap} .ws-priority-badge.priority-alta{background:rgba(255,107,107,.15);color:#ff6b6b} .ws-priority-badge.priority-media{background:rgba(255,176,32,.15);color:#ffb020} .ws-priority-badge.priority-baja{background:var(--layer-3);color:var(--muted)} .ws-due-badge{font-size:.72rem;color:var(--muted);white-space:nowrap} .ws-due-badge.is-overdue{color:#ff6b6b;font-weight:700} /* Notas */ .ws-notes-toolbar{margin-bottom:16px} .ws-notes-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px} .ws-note-card{background:var(--bg);border:1px solid var(--border);border-radius:14px;padding:16px;display:flex;flex-direction:column;gap:8px;cursor:pointer;transition:border-color .3s} .ws-note-card:hover{border-color:var(--border-hover)} .ws-note-head{display:flex;justify-content:space-between;align-items:baseline;gap:8px} .ws-note-head strong{font-size:.95rem;color:var(--text)} .ws-note-head span{font-size:.68rem;color:var(--muted);flex-shrink:0;white-space:nowrap} .ws-note-card p{font-size:.85rem;color:var(--muted);white-space:pre-line;flex-grow:1;margin:0} .ws-note-actions{display:flex;gap:8px;margin-top:6px} .ws-note-editor{display:flex;flex-direction:column;gap:12px} #wsNoteTitle{ background:var(--bg);border:1px solid var(--border);border-radius:10px;color:var(--text); padding:12px 14px;font-family:inherit;font-size:.95rem;font-weight:700;outline:none; } #wsNoteTitle:focus{border-color:var(--border-hover)} #wsNoteBody{ width:100%;background:var(--bg);border:1px solid var(--border);border-radius:10px;color:var(--text); padding:14px;font-family:inherit;font-size:.88rem;resize:vertical;outline:none;min-height:320px; } #wsNoteBody:focus{border-color:var(--border-hover)} .ws-note-editor-actions{display:flex;gap:10px} /* Checklist */ .ws-checklist-toolbar{display:flex;gap:8px;margin-bottom:16px;flex-wrap:wrap} .ws-checklist-toolbar input[type=text]{flex:1;min-width:160px} .ws-checklist-toolbar select,.ws-checklist-toolbar input{ background:var(--bg);border:1px solid var(--border);border-radius:10px;color:var(--text); padding:10px 12px;font-size:.85rem;font-family:inherit;outline:none; } /* Calendario */ .ws-cal-header{display:flex;align-items:center;justify-content:center;gap:18px;margin-bottom:18px} .ws-cal-header strong{font-size:1.05rem;text-transform:capitalize;min-width:160px;text-align:center} .ws-cal-nav-btn{background:var(--bg);border:1px solid var(--border);color:var(--text);border-radius:10px;width:34px;height:34px;cursor:pointer;font-size:1rem} .ws-cal-nav-btn:hover{border-color:var(--border-hover)} .ws-cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin-bottom:22px} .ws-cal-daylabel{text-align:center;font-size:.66rem;color:var(--muted);font-weight:700;text-transform:uppercase;padding-bottom:4px} .ws-cal-cell{ aspect-ratio:1;border-radius:10px;background:var(--bg);border:1px solid var(--border); display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;cursor:pointer; transition:border-color .2s,background .2s;position:relative; } .ws-cal-cell:hover{border-color:var(--border-hover)} .ws-cal-cell.is-empty{visibility:hidden;cursor:default} .ws-cal-cell.is-today{border-color:var(--green)} .ws-cal-cell.is-selected{background:var(--green);border-color:var(--green)} .ws-cal-cell.is-selected .ws-cal-daynum{color:#04150c;font-weight:800} .ws-cal-daynum{font-size:.85rem;color:var(--text)} .ws-cal-dot{ font-size:.6rem;font-weight:800;background:var(--green);color:#04150c;border-radius:999px; min-width:15px;height:15px;display:flex;align-items:center;justify-content:center;padding:0 3px; position:absolute;top:2px;right:2px; } .ws-cal-cell.is-selected .ws-cal-dot{background:#04150c;color:var(--green)} .ws-cal-add{display:flex;gap:8px;margin-bottom:14px} .ws-cal-add input[type=text]{flex:1} .ws-cal-add input,.ws-cal-add button{ background:var(--bg);border:1px solid var(--border);color:var(--text);border-radius:10px; padding:10px 12px;font-size:.85rem;font-family:inherit;outline:none; } /* ===== TABS DIARIO / RENDIMIENTO ===== */ .view-tabs{display:flex;gap:4px;margin-bottom:32px;border-bottom:1px solid var(--border);flex-wrap:wrap} .view-tab{ display:inline-flex;align-items:center;gap:7px; background:none;border:none;border-radius:10px 10px 0 0;color:var(--muted);font-family:inherit;font-weight:700;font-size:.92rem; padding:12px 14px;cursor:pointer;position:relative;margin-bottom:-1px; } .view-tab-ico{font-size:.98em;line-height:1} .view-tab:hover{color:var(--text);background:var(--layer-2)} .view-tab.active{color:var(--text);background:var(--layer-3)} .view-tab::after{ content:'';position:absolute;left:14px;right:14px;bottom:-1px;height:2px;background:var(--green); transform:scaleX(0);transition:transform .3s var(--ease);transform-origin:center; } .view-tab.active::after{transform:scaleX(1)} /* ===== PRIORIDADES DE HOY (dueño) — lo primero que ve al entrar a Producción ===== */ .priority-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px} .priority-strip-card{padding:20px 22px;border-left:3px solid var(--border)} .priority-strip-card.tone-bad{border-left-color:var(--red)} .priority-strip-card.tone-warn{border-left-color:#ffb020} .priority-strip-card.tone-good{border-left-color:var(--green)} .priority-strip-card.is-clear{border-left-color:var(--green)} .priority-strip-head{display:flex;align-items:center;gap:8px;font-weight:800;font-size:.92rem;margin-bottom:6px} .priority-strip-card p{color:var(--muted);font-size:.85rem;line-height:1.5} .priority-strip-card[data-jump-view]:hover{border-color:var(--border-hover)} .notify-badge-dot{ position:absolute;top:2px;right:-14px;min-width:16px;height:16px;padding:0 4px;border-radius:999px; background:var(--red);color:#fff;font-size:.62rem;font-weight:900;line-height:16px;text-align:center; } /* ===== GRÁFICO DE RENDIMIENTO ===== */ .video-wrap{position:relative;width:100%;padding-top:56.25%;border-radius:14px;overflow:hidden;background:#000} .video-wrap iframe{position:absolute;inset:0;width:100%;height:100%;border:0} .perf-chart{width:100%;height:200px;display:block} .perf-chart .zero-line{stroke:var(--border);stroke-width:1;stroke-dasharray:3,3} .perf-chart .perf-line{fill:none;stroke:var(--green);stroke-width:2} .perf-chart .perf-dot.up{fill:var(--green)} .perf-chart .perf-dot.down{fill:var(--red)} .perf-chart text{fill:var(--muted);font-size:9px;font-family:'Inter',sans-serif} .perf-chart .bar-reels{fill:var(--green)} .perf-chart .bar-stories{fill:#4da6ff} .perf-chart .bar-posts{fill:#ffb020} .legend-dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px;vertical-align:middle} .legend-dot.bar-reels{background:var(--green)} .legend-dot.bar-stories{background:#4da6ff} .legend-dot.bar-posts{background:#ffb020} .status-chip{border-color:var(--border)} .status-chip.status-activa{color:var(--green)} .status-chip.status-caida{color:#ffb020} .status-chip.status-baneada{color:var(--red)} .status-chip.status-muerta{color:#5c5c66} .status-chip.status-en_pausa{color:var(--muted)} /* ===== EMPLOYEE GROUPS (owner view) ===== */ .employee-group{margin-bottom:44px} .employee-group-head{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:18px;flex-wrap:wrap} .employee-name{font-size:1.15rem;font-weight:800;letter-spacing:-.01em;display:flex;align-items:center;gap:10px} .employee-actions{display:flex;gap:8px;flex-wrap:wrap} /* ===== TOOLBAR (filtros, orden, guardar) ===== */ .toolbar{ display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:18px; padding:14px 18px;background:var(--card);border:1px solid var(--border);border-radius:14px; } .toolbar .field-inline{display:flex;align-items:center;gap:8px} .toolbar label{font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:700} .toolbar select,.toolbar input[type=search]{ background:var(--bg);border:1px solid var(--border);border-radius:10px;color:var(--text); padding:8px 12px;font-size:.85rem;font-family:inherit;outline:none; } .toolbar select:focus,.toolbar input:focus{border-color:var(--layer-3)} .toolbar .spacer{flex:1} .toolbar .count{color:var(--muted);font-size:.82rem} .save-bar{ display:flex;align-items:center;gap:14px;margin-bottom:16px;flex-wrap:wrap; } .save-bar .btn{width:auto;padding:12px 26px} .save-bar .dirty-count{color:var(--muted);font-size:.85rem} .save-bar .dirty-count.has-changes{color:var(--green);font-weight:700} /* ===== TABLA DE CUENTAS ===== */ .table-wrap{overflow-x:auto;border:1px solid var(--border);border-radius:var(--r);background:var(--card)} .app-main .toolbar,.app-main .table-wrap,.app-main .accounts-table th{ background:color-mix(in srgb,var(--card) 78%,transparent);backdrop-filter:blur(9px) saturate(140%);-webkit-backdrop-filter:blur(9px) saturate(140%); } table.accounts-table{width:100%;border-collapse:collapse;font-size:.87rem;min-width:900px} .accounts-table th{ text-align:left;padding:13px 16px;font-size:.68rem;letter-spacing:.08em;text-transform:uppercase; color:var(--muted);border-bottom:1px solid var(--border);white-space:nowrap;font-weight:700; position:sticky;top:0;background:var(--card);z-index:1; } .accounts-table th.sortable{cursor:pointer;user-select:none} .accounts-table th.sortable:hover{color:var(--text)} .accounts-table th.sortable .arrow{opacity:.4;margin-left:4px} .accounts-table th.sortable.active .arrow{opacity:1} .accounts-table td{padding:9px 16px;border-bottom:1px solid var(--border);vertical-align:middle;white-space:nowrap} .accounts-table tbody tr:last-child td{border-bottom:none} .accounts-table tbody tr:hover{background:var(--layer-1)} .accounts-table tr.stagnant{background:rgba(255,92,92,.06)} .accounts-table tr.stagnant:hover{background:rgba(255,92,92,.1)} .accounts-table tr.dirty td:first-child{box-shadow:inset 3px 0 0 var(--green)} .accounts-table input[type=number]{ width:80px;background:var(--bg);border:1px solid var(--border);border-radius:8px; color:var(--text);padding:7px 9px;font-size:.85rem;font-family:inherit;outline:none; } .prod-task-toggle-btn{ width:28px;height:28px;border-radius:8px;border:1px solid var(--border);background:var(--bg); color:var(--muted);font-size:.85rem;font-weight:800;cursor:pointer;transition:all .15s; } .prod-task-toggle-btn:hover{border-color:var(--border-hover);color:var(--text)} .prod-task-toggle-btn.done{background:rgba(59,130,246,.14);border-color:rgba(59,130,246,.45);color:var(--green)} .prod-task-toggle-btn.blocked{opacity:.45;cursor:not-allowed} .prod-task-toggle-btn.blocked:hover{border-color:var(--border);color:var(--muted)} .accounts-table input[type=number]:focus{border-color:var(--layer-3)} .accounts-table select.status-select{ background:var(--bg);border:1px solid var(--border);border-radius:8px;color:var(--text); padding:7px 9px;font-size:.8rem;font-family:inherit;outline:none;max-width:120px; } .status-select.status-activa{color:var(--green);border-color:color-mix(in srgb,var(--green) 35%,transparent)} .status-select.status-caida{color:#ffb020;border-color:rgba(255,176,32,.35)} .status-select.status-baneada{color:var(--red);border-color:rgba(255,92,92,.35)} .status-select.status-muerta{color:#8f8f98} .status-select.status-en_pausa{color:var(--muted)} .priority-select{ background:var(--bg);border:1px solid var(--border);border-radius:8px;color:var(--text); padding:7px 9px;font-size:.8rem;font-family:inherit;outline:none;max-width:110px;font-weight:700; } .priority-select.priority-top{color:#0a0a0a;border-color:#ffb020;background:#ffb020} .priority-select.priority-alta{color:var(--text);border-color:var(--layer-3);background:var(--layer-3)} .priority-select.priority-media{color:var(--muted)} .priority-select.priority-baja{color:#5c5c66} .priority-pill{ display:inline-flex;align-items:center;padding:5px 12px;border-radius:999px;font-size:.78rem;font-weight:800; } .priority-pill.priority-top{background:#ffb020;color:#0a0a0a} .priority-pill.priority-alta{background:var(--layer-3);color:var(--text)} .priority-pill.priority-media{background:var(--layer-2);color:var(--muted)} .priority-pill.priority-baja{background:none;color:#5c5c66} .prod-catalog-inline{ background:var(--bg);border:1px solid var(--border);border-radius:8px;color:var(--text); padding:7px 9px;font-size:.8rem;font-family:inherit;outline:none;width:130px; } .prod-catalog-inline:focus{border-color:rgba(59,130,246,.5)} .prod-catalog-inline:not(:placeholder-shown){border-color:color-mix(in srgb,var(--green) 30%,var(--border))} .prod-expand-btn{min-width:38px;font-weight:800} .prod-expand-btn.has-note{color:#ffb020;border-color:rgba(255,176,32,.4)} .prod-notes-btn{min-width:38px} .prod-notes-btn.has-note{color:var(--green);border-color:rgba(59,130,246,.4)} /* ---------- Fila de detalle expandida: todo lo que antes vivía en el modal, ahora dentro de la misma tabla — late como un "nodo" del sistema conectado a la fila de la cuenta. ---------- */ .prod-detail-row td{padding:0;border-bottom:1px solid var(--border)} .prod-detail-panel{ display:grid;grid-template-columns:repeat(4,minmax(220px,1fr));gap:0; background:color-mix(in srgb,var(--green) 4%,var(--card)); border-top:1px solid color-mix(in srgb,var(--green) 30%,var(--border)); border-left:3px solid var(--green);position:relative; } .prod-detail-panel::before{ content:'';position:absolute;left:-3px;top:0;bottom:0;width:3px; background:linear-gradient(180deg,var(--green),transparent 85%); box-shadow:0 0 10px rgba(59,130,246,.6);animation:eneuvePulseVein 2.4s ease-in-out infinite; } .prod-detail-panel > .loading{padding:20px;grid-column:1/-1} .prod-detail-col{padding:16px 18px;border-right:1px solid var(--border)} .prod-detail-col:last-child{border-right:none} .prod-detail-col label{display:block;font-weight:800;font-size:.76rem;margin-bottom:8px;color:var(--green)} .prod-detail-col select,.prod-detail-col textarea,.prod-detail-col input[type="text"],.prod-detail-col input[type="number"]{width:100%} @media(max-width:1100px){.prod-detail-panel{grid-template-columns:repeat(2,1fr)}} @media(max-width:640px){.prod-detail-panel{grid-template-columns:1fr}.prod-detail-col{border-right:none;border-bottom:1px solid var(--border)}} /* ===== Eneuve — sistema vivo: venas, pulso y circuitos que conectan el panel ===== */ @keyframes eneuvePulseVein{0%,100%{opacity:.45;filter:brightness(1)}50%{opacity:1;filter:brightness(1.7)}} @keyframes eneuveHeartbeat{0%,100%{transform:scale(1)}14%{transform:scale(1.055)}28%{transform:scale(1)}42%{transform:scale(1.09)}70%{transform:scale(1)}} @keyframes eneuveFlowLine{0%{background-position:0 0}100%{background-position:-200px 0}} @keyframes eneuveDashFlow{to{stroke-dashoffset:-120}} .eneuve-brain-head .kicker{color:var(--green);text-shadow:0 0 10px rgba(59,130,246,.4)} .eneuve-heart-card{position:relative;overflow:hidden;border-color:color-mix(in srgb,var(--green) 35%,var(--border))} .eneuve-heart-card::after{ content:'';position:absolute;inset:0;pointer-events:none; background:radial-gradient(circle at 20% 20%,rgba(59,130,246,.12),transparent 60%); } .eneuve-heartbeat{display:inline-block;transform-origin:center;animation:eneuveHeartbeat 2.4s ease-in-out infinite;text-shadow:0 0 14px rgba(59,130,246,.5)} @media(prefers-reduced-motion:reduce){.eneuve-heartbeat{animation:none}} .eneuve-vein-divider{width:100%;height:34px;margin:4px 0 6px;opacity:.65} .eneuve-vein-divider svg{width:100%;height:100%;display:block} .eneuve-vein-path{ fill:none;stroke:var(--green);stroke-width:1.5;stroke-linecap:round; filter:drop-shadow(0 0 4px rgba(59,130,246,.65)); stroke-dasharray:7 7;animation:eneuveDashFlow 3.6s linear infinite; } .eneuve-vein-node{fill:var(--green);filter:drop-shadow(0 0 7px rgba(59,130,246,.95));animation:eneuvePulseVein 2.2s ease-in-out infinite} @media(prefers-reduced-motion:reduce){.eneuve-vein-path,.eneuve-vein-node{animation:none}} /* Marco "circuito" para la tabla principal — un filamento de corriente recorriendo el borde superior, como si la tabla fuera el tablero central donde llega toda la señal del sistema. */ .eneuve-circuit-frame{position:relative} .eneuve-circuit-frame::before{ content:'';position:absolute;top:0;left:0;right:0;height:2px;z-index:1; background:linear-gradient(90deg,transparent,var(--green) 15%,#a8ffcf 50%,var(--green) 85%,transparent); background-size:220px 100%;animation:eneuveFlowLine 2.8s linear infinite; box-shadow:0 0 10px rgba(59,130,246,.7); } @media(prefers-reduced-motion:reduce){.eneuve-circuit-frame::before{animation:none}} /* ===== TEMPERATURA (caliente/frío) ===== */ .temperature-select{ background:var(--bg);border:1px solid var(--border);border-radius:8px;color:var(--text); padding:7px 9px;font-size:.8rem;font-family:inherit;outline:none;max-width:120px;font-weight:700; } .temperature-select.temperature-caliente{color:#ff6b3d;border-color:rgba(255,107,61,.4)} .temperature-select.temperature-frio{color:#4da6ff;border-color:rgba(77,166,255,.4)} .temperature-select.temperature-none{color:var(--muted)} .temperature-pill{ display:inline-flex;align-items:center;padding:5px 12px;border-radius:999px;font-size:.78rem;font-weight:800; } .temperature-pill.temperature-caliente{background:rgba(255,107,61,.14);color:#ff6b3d} .temperature-pill.temperature-frio{background:rgba(77,166,255,.14);color:#4da6ff} .temperature-pill.temperature-none{background:none;color:var(--muted)} /* Columna "Cuenta" fija al hacer scroll horizontal — clave en móvil con muchas columnas */ .sticky-col{position:sticky;left:0;background:var(--card);z-index:2;box-shadow:2px 0 0 var(--border)} thead .sticky-col{z-index:3} .accounts-table tr.stagnant .sticky-col{background:#160f10} .growth-cell{font-weight:700;font-variant-numeric:tabular-nums} .growth-cell.up{color:var(--green)} .growth-cell.down{color:var(--red)} .growth-cell.flat{color:var(--muted);font-weight:600} .handle-cell{font-weight:700} .handle-link{color:inherit;text-decoration:none;border-bottom:1px solid transparent;transition:border-color .2s,color .2s} .handle-link:hover{color:var(--green);border-bottom-color:var(--green)} .employee-cell{color:var(--muted)} .row-del{background:none;border:none;color:var(--muted);cursor:pointer;font-size:1rem;padding:4px 8px;font-family:inherit} .row-del:hover{color:var(--red)} /* ===== AUDITORÍA (Gabriela/Argenis — monitoreo del equipo Shanna) ===== */ .days-badge{display:inline-flex;align-items:center;padding:4px 10px;border-radius:999px;font-size:.76rem;font-weight:800;white-space:nowrap} .days-badge.ok{background:rgba(59,130,246,.14);color:var(--green)} .days-badge.warn{background:rgba(255,176,32,.14);color:#ffb020} .days-badge.bad{background:rgba(255,92,92,.14);color:var(--red)} .audit-cat-btn{border:1px solid var(--border);border-radius:999px;padding:9px 16px;font-size:.82rem;font-weight:700;cursor:pointer;background:none;font-family:inherit;transition:all .2s;white-space:nowrap} .audit-cat-btn.cat-excelente{color:var(--green);border-color:color-mix(in srgb,var(--green) 40%,transparent)} .audit-cat-btn.cat-excelente:hover{background:rgba(59,130,246,.1)} .audit-cat-btn.cat-ajustes{color:#ffb020;border-color:rgba(255,176,32,.4)} .audit-cat-btn.cat-ajustes:hover{background:rgba(255,176,32,.1)} .audit-cat-btn.cat-inactiva{color:#ff8a3d;border-color:rgba(255,138,61,.4)} .audit-cat-btn.cat-inactiva:hover{background:rgba(255,138,61,.1)} .audit-cat-btn.cat-suspendida{color:var(--red);border-color:rgba(255,92,92,.4)} .audit-cat-btn.cat-suspendida:hover{background:rgba(255,92,92,.1)} .audit-select-bar{position:sticky;bottom:16px;display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:14px 18px;border-radius:var(--r);background:var(--card);border:1px solid var(--border);box-shadow:0 12px 40px rgba(0,0,0,.4);margin-top:16px;z-index:5} .audit-cat-label{display:inline-flex;align-items:center;gap:6px;padding:4px 12px;border-radius:999px;font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em;white-space:nowrap} .audit-cat-label.cat-excelente{background:rgba(59,130,246,.14);color:var(--green)} .audit-cat-label.cat-ajustes{background:rgba(255,176,32,.14);color:#ffb020} .audit-cat-label.cat-inactiva{background:rgba(255,138,61,.14);color:#ff8a3d} .audit-cat-label.cat-suspendida{background:rgba(255,92,92,.14);color:var(--red)} /* Checkboxes de verificación por cuenta en el compositor — rápido de tildar, no hay que escribir. */ .audit-verify-list{display:flex;flex-direction:column;gap:8px;margin-top:10px} .audit-verify-row{ display:flex;align-items:center;gap:14px;flex-wrap:wrap; background:var(--bg2);border:1px solid var(--border);border-radius:12px;padding:10px 14px; } .audit-verify-check{display:flex;align-items:center;gap:6px;font-size:.8rem;color:var(--muted);cursor:pointer;white-space:nowrap} .audit-verify-check input{width:auto;accent-color:var(--green)} .audit-verify-check:has(input:checked){color:var(--text);font-weight:600} /* Badges de lo ya verificado, en un informe ya enviado. */ .verify-badge{display:inline-flex;align-items:center;padding:3px 10px;border-radius:999px;font-size:.68rem;font-weight:700;white-space:nowrap} .verify-badge.ok{background:rgba(59,130,246,.14);color:var(--green)} .verify-badge.bad{background:rgba(143,143,152,.14);color:var(--muted)} .verify-badge.warn{background:rgba(255,92,92,.14);color:var(--red)} /* ===== FORMS (owner: crear empleado / cuenta) ===== */ .form-card{margin-bottom:44px} .form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin-bottom:16px} /* Las etiquetas iban en MAYÚSCULA sostenida: en un formulario largo eso es ruido y cansa la vista. En minúscula normal se leen igual de rápido y el formulario respira. */ .field label{display:block;font-size:.83rem;font-weight:500;letter-spacing:0;color:var(--muted);margin-bottom:7px} .field input,.field select,.field textarea{ width:100%;background:var(--layer-1);border:1px solid var(--border);border-radius:12px; color:var(--text);padding:13px 14px;font-size:.95rem;font-family:inherit;outline:none; transition:border-color var(--dur,.2s) var(--ease,ease),background var(--dur,.2s) var(--ease,ease),box-shadow var(--dur,.2s) var(--ease,ease); resize:vertical; } .field input:hover,.field select:hover,.field textarea:hover{background:var(--layer-2)} .field input:focus,.field select:focus,.field textarea:focus{ background:var(--layer-2);border-color:var(--border-hover);box-shadow:0 0 0 4px rgba(255,255,255,.05); } .form-actions{display:flex;gap:12px;align-items:center;flex-wrap:wrap} .form-actions .btn{width:auto} .form-msg{font-size:.85rem;color:var(--muted)} .form-msg.error{color:var(--red)} .form-msg.ok{color:var(--green)} /* ===== EMPTY / LOADING ===== */ .empty-state{color:var(--muted);font-size:.95rem;padding:20px 0} .loading{color:var(--muted);font-size:.9rem;padding:60px 0;text-align:center} .toast{ position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(20px); background:#111318;border:1px solid var(--border-hover);border-radius:14px; padding:14px 22px;font-size:.9rem;box-shadow:0 20px 60px rgba(0,0,0,.5); opacity:0;pointer-events:none;transition:opacity .3s,transform .3s;z-index:50; } .toast.show{opacity:1;transform:translateX(-50%) translateY(0)} /* ===== GALERÍA DE ARCHIVOS SUBIDOS (modelo) ===== */ .file-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:14px} .file-card{ display:flex;flex-direction:column;gap:8px;text-decoration:none;color:var(--text); border:1px solid var(--border);border-radius:14px;padding:10px;transition:border-color .25s; } .file-card:hover{border-color:var(--border-hover)} .file-card img{width:100%;height:90px;object-fit:cover;border-radius:8px;background:var(--bg)} .file-card .file-icon{width:100%;height:90px;display:flex;align-items:center;justify-content:center;font-size:2rem;background:var(--bg);border-radius:8px} .file-card span{font-size:.78rem;color:var(--muted);word-break:break-word} .folder-name-input{ flex:1;min-width:200px;background:var(--bg);border:1px solid var(--border);border-radius:12px; color:var(--text);padding:10px 14px;font-family:inherit;font-size:.9rem;outline:none; } .folder-name-input:focus{border-color:var(--layer-3)} .chips{display:flex;flex-wrap:wrap;gap:8px} /* ===== SOPORTE (chat con el equipo Eneuve) ===== */ .support-card{overflow:hidden} .support-widget-header{ display:flex;align-items:center;gap:14px;margin-bottom:18px;padding-bottom:16px; border-bottom:1px solid var(--border); } .support-avatar{ width:44px;height:44px;border-radius:50%;flex-shrink:0; background:linear-gradient(135deg,var(--green),color-mix(in srgb,var(--green) 55%,#000)); display:flex;align-items:center;justify-content:center; font-weight:900;font-size:1.1rem;color:#04150c; box-shadow:0 0 0 3px color-mix(in srgb,var(--green) 15%,transparent); } .support-name{font-weight:800;font-size:1rem;display:flex;align-items:center;gap:7px} .support-verified{ display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px; border-radius:50%;background:var(--green);color:#04150c;font-size:.65rem;font-weight:900; } .support-status{display:flex;align-items:center;gap:7px;color:var(--muted);font-size:.8rem;margin-top:3px} .status-dot{ width:8px;height:8px;border-radius:50%;background:var(--green); box-shadow:0 0 0 0 color-mix(in srgb,var(--green) 60%,transparent);animation:statusPulse 2s infinite; } @keyframes statusPulse{ 0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--green) 55%,transparent)} 70%{box-shadow:0 0 0 8px color-mix(in srgb,var(--green) 0%,transparent)} 100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--green) 0%,transparent)} } .chat-bubble-avatar{ width:18px;height:18px;border-radius:50%;background:var(--green);color:#04150c; font-size:.6rem;font-weight:900;display:inline-flex;align-items:center;justify-content:center; margin-right:6px;flex-shrink:0; } /* ===== INFORME DE AUDITORÍA dentro del chat — tarjeta ancha, no burbuja angosta ===== */ .chat-report-card{ align-self:stretch;width:100%;background:var(--bg);border:1px solid rgba(59,130,246,.35); border-radius:14px;overflow:hidden; } .chat-report-head{ display:flex;align-items:center;gap:8px;padding:10px 16px; background:rgba(59,130,246,.1);color:var(--green);font-size:.76rem;font-weight:800; border-bottom:1px solid rgba(59,130,246,.25); } .chat-report-body{ padding:14px 16px;white-space:pre-line;font-size:.88rem;line-height:1.55;color:var(--text); max-height:360px;overflow-y:auto; } .chat-tag-card{ align-self:stretch;width:100%;background:var(--bg);border:1px solid rgba(255,176,32,.35); border-radius:14px;overflow:hidden; } .chat-tag-card.is-reminder{border-color:rgba(255,176,32,.5)} .chat-tag-card.is-audit{border-color:var(--border)} .chat-tag-card.is-audit .chat-tag-head{background:var(--layer-2);color:var(--muted);border-bottom-color:var(--border)} .chat-tag-head{ display:flex;align-items:center;gap:8px;padding:9px 14px; background:rgba(255,176,32,.1);color:#ffb020;font-size:.74rem;font-weight:800; border-bottom:1px solid rgba(255,176,32,.22);flex-wrap:wrap; } .chat-tag-pill{ font-family:inherit;font-weight:700;font-size:.7rem;color:var(--text); background:var(--layer-3);border-radius:6px;padding:2px 8px;margin-left:auto; } .chat-tag-body{padding:12px 14px;white-space:pre-line;font-size:.86rem;line-height:1.5;color:var(--text)} @media(max-width:640px){ .app-header-inner{padding:16px 20px} .app-main{padding:34px 20px 70px} .section-head{flex-direction:column;align-items:flex-start} } /* ===== AVISOS: modal que bloquea el panel hasta leerlos (lo primero al entrar) ===== */ .notify-gate-overlay{ position:fixed;inset:0;z-index:9999;background:var(--bg); display:flex;align-items:center;justify-content:center;padding:24px; animation:notifyFadeIn .25s ease; } @keyframes notifyFadeIn{from{opacity:0}to{opacity:1}} .notify-gate-card{ background:var(--card);border:1px solid var(--border);border-radius:var(--r); padding:32px;max-width:560px;width:100%;max-height:85vh;display:flex;flex-direction:column; /* Sin esto, un formulario más alto que la pantalla se corta y el botón de guardar queda fuera sin forma de llegar a él. */ overflow-y:auto; box-shadow:0 30px 80px rgba(0,0,0,.5); } .notify-gate-card h2{font-size:1.3rem;font-weight:900} .notify-gate-hint{color:var(--muted);font-size:.88rem;margin-top:8px} .notify-gate-warn{color:var(--red);font-size:.88rem;margin-top:8px;font-weight:700} .notify-gate-list{margin-top:20px;overflow-y:auto;display:flex;flex-direction:column;gap:10px;padding-right:4px} .notify-gate-item{ display:flex;justify-content:space-between;align-items:flex-start;gap:12px; background:var(--bg2);border:1px solid var(--border);border-radius:14px;padding:14px 16px; } .notify-gate-from{color:var(--green);font-size:.72rem;font-weight:800;letter-spacing:.03em;text-transform:uppercase} .notify-gate-text{font-size:.92rem;margin-top:4px;line-height:1.5} .notify-gate-actions{display:flex;gap:10px;margin-top:22px;flex-wrap:wrap;flex-shrink:0} /* En la ficha de la creadora el botón se queda pegado abajo: siempre a la vista, aunque el formulario sea más largo que la pantalla. */ #fichaGateHost .notify-gate-actions{ position:sticky;bottom:-32px;margin:22px -32px -32px;padding:16px 32px 24px; background:var(--card);border-top:1px solid var(--border); } #fichaGateHost .notify-gate-actions .btn{width:100%;justify-content:center;font-size:1rem;padding:14px 24px} .notify-gate-actions .btn{width:auto;padding:12px 24px} /* ===== MODAL: editar cuenta a fondo (dueño) — trabajada hoy / puntos / tarea, todo junto ===== */ .owner-modal-overlay{ position:fixed;inset:0;z-index:9998;background:rgba(0,0,0,.65); display:flex;align-items:center;justify-content:center;padding:24px; animation:notifyFadeIn .2s ease; } .owner-modal-card{ background:var(--card);border:1px solid var(--border);border-radius:var(--r); padding:26px;max-width:480px;width:100%;max-height:88vh;overflow-y:auto; box-shadow:0 30px 80px rgba(0,0,0,.5); } .owner-modal-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px} .owner-modal-head h2{font-size:1.15rem;font-weight:900} .owner-modal-close{background:none;border:none;color:var(--muted);font-size:1.1rem;cursor:pointer;padding:4px} .owner-modal-section{margin-top:18px;padding-top:18px;border-top:1px solid var(--border)} .owner-modal-section:first-of-type{border-top:none;margin-top:14px;padding-top:0} .owner-modal-section label{display:block;font-weight:800;font-size:.82rem;margin-bottom:8px} .owner-modal-section select,.owner-modal-section textarea,.owner-modal-section input[type="text"],.owner-modal-section input[type="number"]{width:100%} .owner-modal-hint{color:var(--muted);font-size:.78rem;margin-top:6px} .owner-modal-row{display:flex;gap:8px;margin-top:8px;flex-wrap:wrap;align-items:center} .owner-modal-row input{flex:1;min-width:100px} .owner-modal-adjust-list{margin-top:10px;display:flex;flex-direction:column;gap:6px;max-height:120px;overflow-y:auto} .owner-modal-adjust-item{font-size:.78rem;color:var(--muted);background:var(--bg2);border-radius:8px;padding:6px 10px} .owner-modal-adjust-item .neg{color:var(--red);font-weight:800} .owner-modal-adjust-item .pos{color:var(--green);font-weight:800} .owner-modal-tenure{color:var(--muted);font-size:.8rem} .owner-modal-chat-messages{display:flex;flex-direction:column;gap:10px;max-height:260px;overflow-y:auto;margin-top:8px;padding-right:2px} /* Detalle plegable: el empleado ve una línea y abre el resto solo si lo necesita. */ .prod-help-details { margin-top: 10px; } .prod-help-details > summary { cursor: pointer; list-style: none; font-size: .78rem; font-weight: 700; color: var(--green); padding: 6px 0; user-select: none; } .prod-help-details > summary::-webkit-details-marker { display: none; } .prod-help-details > summary::before { content: '▸ '; display: inline-block; transition: transform .18s ease; } .prod-help-details[open] > summary::before { content: '▾ '; } .prod-help-details > p { color: var(--muted); font-size: .78rem; line-height: 1.55; margin-top: 4px; } /* Números de la cuenta: seguidores + visualizaciones. Se separa del checklist a propósito — es el único dato que hay que ir a copiar de la app, y tiene que verse cuando falta. */ .numbers-block { margin-top: 12px; padding: 12px; border-radius: 12px; border: 1px solid var(--border); background: var(--layer-1); } .numbers-block.is-ok { border-color: rgba(59,130,246,.35); background: rgba(59,130,246,.05); } .numbers-block.is-overdue { border-color: rgba(255,90,90,.4); background: rgba(255,90,90,.06); } .numbers-block-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; } .numbers-block-title { font-size: .74rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); } .numbers-pill { font-size: .68rem; font-weight: 800; padding: 3px 8px; border-radius: 999px; border: 1px solid var(--border); white-space: nowrap; } .numbers-pill.ok { color: var(--green); border-color: rgba(59,130,246,.4); background: rgba(59,130,246,.08); } .numbers-pill.bad { color: #ff6b6b; border-color: rgba(255,90,90,.45); background: rgba(255,90,90,.08); } .numbers-pill.soft { color: var(--muted); } .numbers-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } @media (max-width: 420px) { .numbers-grid { grid-template-columns: 1fr; } } .prod-numbers-save { margin-top: 10px; width: 100%; justify-content: center; } /* ============ ARCHIVOS (almacenamiento propio, reemplaza a Drive) ============ */ .file-usage { border: 1px solid var(--border); border-radius: var(--r); padding: 16px 18px; background: var(--layer-1); margin-bottom: 20px; } .file-usage-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; font-size: .85rem; color: var(--muted); } .file-usage-head strong { color: var(--text); font-size: .95rem; } .file-usage-note { color: var(--muted); font-size: .76rem; margin-top: 8px; } .file-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; } .file-crumbs { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; min-width: 0; } .file-crumb { background: none; border: none; color: var(--muted); font: inherit; font-size: .86rem; font-weight: 700; cursor: pointer; padding: 4px 6px; border-radius: 8px; } .file-crumb:hover { color: var(--green); background: rgba(59,130,246,.08); } .file-crumb:last-of-type { color: var(--text); } .file-crumb-sep { color: var(--muted); opacity: .5; } .file-actions { display: flex; gap: 8px; flex-wrap: wrap; } .file-drop { border: 1px dashed transparent; border-radius: var(--r); transition: border-color .15s ease, background .15s ease; padding: 2px; } .file-drop.is-over { border-color: var(--green); background: rgba(59,130,246,.06); } .file-folder-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; } .file-folder-card { display: flex; align-items: center; gap: 12px; text-align: left; cursor: pointer; padding: 14px 16px; border-radius: 12px; border: 1px solid var(--border); background: var(--layer-1); color: var(--text); font: inherit; transition: border-color .15s ease, transform .15s ease, background .15s ease; } .file-folder-card:hover { border-color: rgba(59,130,246,.45); background: rgba(59,130,246,.06); transform: translateY(-2px); } .file-folder-ico { font-size: 1.5rem; line-height: 1; } /* flex:1 + min-width:0: el nombre ocupa todo el espacio libre y, si no cabe en una línea, baja por PALABRAS completas — nunca se recorta ni se parte letra por letra. */ .file-folder-name { font-weight: 700; font-size: .9rem; flex: 1; min-width: 0; overflow-wrap: anywhere; } .file-progress-card { border: 1px solid rgba(59,130,246,.35); background: rgba(59,130,246,.05); border-radius: 12px; padding: 14px 16px; margin-bottom: 16px; } .file-progress-card p { font-size: .86rem; margin-bottom: 10px; } .file-progress-row { display: flex; gap: 12px; align-items: flex-start; } .file-progress-info-col { flex: 1; min-width: 0; } .file-progress-thumb { width: 52px; height: 52px; flex-shrink: 0; border-radius: 8px; object-fit: cover; background: var(--layer-1); border: 1px solid var(--border); } .file-progress-thumb-icono { display: flex; align-items: center; justify-content: center; font-size: 1.3rem; } @media (max-width: 560px) { .file-toolbar { align-items: flex-start; flex-direction: column; } .file-actions { width: 100%; } } /* ============ MENÚ PLEGABLE + BUSCADOR ============ */ .panel-search { position: relative; margin-bottom: 22px; } .panel-search-ico { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); opacity: .6; font-size: .95rem; } .panel-search input { width: 100%; padding: 15px 16px 15px 46px; border-radius: 14px; border: 1px solid var(--border); background: var(--layer-2); color: var(--text); font: inherit; font-size: .95rem; transition: border-color .2s var(--ease), background .2s var(--ease), box-shadow .2s var(--ease); } /* El foco se marca con un halo suave alrededor, no cambiando el fondo: cambiar el color de relleno al escribir da la sensación de que el campo "se enciende" y distrae de lo que se está tecleando. */ .panel-search input:focus { outline: none; border-color: rgba(255,255,255,.20); background: var(--layer-3); box-shadow: 0 0 0 4px rgba(255,255,255,.05); } .panel-search-results { display: grid; gap: 8px; margin-bottom: 22px; } .panel-search-row { display: flex; align-items: center; gap: 12px; text-align: left; cursor: pointer; width: 100%; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--border); background: var(--layer-1); color: var(--text); font: inherit; } .panel-search-row:hover { border-color: rgba(59,130,246,.45); background: rgba(59,130,246,.06); } .psr-ico { font-size: 1.15rem; } .psr-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .psr-txt strong { font-size: .92rem; } .psr-txt small { color: var(--muted); font-size: .76rem; } .psr-tag { font-size: .66rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); border: 1px solid var(--border); border-radius: 999px; padding: 3px 9px; } .menu-fold-head { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; cursor: pointer; padding: 16px 18px; border-radius: 14px; border: 1px solid var(--border); background: var(--layer-1); color: var(--text); font: inherit; transition: border-color .15s ease, background .15s ease; } .menu-fold-head:hover { border-color: rgba(59,130,246,.4); background: rgba(59,130,246,.05); } .menu-fold-head.is-open { border-color: rgba(59,130,246,.45); background: rgba(59,130,246,.06); margin-bottom: 12px; } .menu-fold-ico { font-size: 1.4rem; } .menu-fold-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .menu-fold-txt strong { font-size: 1rem; } .menu-fold-txt small { color: var(--muted); font-size: .78rem; } .menu-fold-count { font-size: .7rem; font-weight: 800; color: var(--muted); border: 1px solid var(--border); border-radius: 999px; padding: 2px 9px; } .menu-fold-arr { color: var(--muted); transition: transform .18s ease; display: inline-block; } .menu-fold-head.is-open .menu-fold-arr { transform: rotate(90deg); color: var(--green); } /* Nombres clicables: en cualquier tabla, el nombre lleva a la ficha. */ .name-link { background: none; border: none; padding: 0; font: inherit; font-weight: inherit; color: inherit; cursor: pointer; border-bottom: 1px dashed var(--layer-3); text-align: left; } .name-link:hover { color: var(--green); border-bottom-color: var(--green); } @keyframes rowFlash { 0%, 100% { background: transparent; } 30% { background: rgba(59,130,246,.22); } } .row-flash { animation: rowFlash 1.2s ease 2; } /* Vista previa dentro del panel: se ve qué pieza es antes de bajarla. */ .file-preview-overlay { position: fixed; inset: 0; z-index: 120; background: rgba(0,0,0,.78); display: flex; align-items: center; justify-content: center; padding: 20px; backdrop-filter: blur(4px); } .file-preview-box { background: var(--card, #0d0f0e); border: 1px solid var(--border); border-radius: var(--r); max-width: 940px; width: 100%; max-height: 92vh; overflow: auto; padding: 18px; } .file-preview-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; } .file-preview-head strong { font-size: .95rem; overflow-wrap: anywhere; } .file-preview-body { display: flex; align-items: center; justify-content: center; min-height: 180px; } .file-preview-foot { margin-top: 14px; display: flex; justify-content: flex-end; } .dl-badge { font-size: .72rem; font-weight: 700; color: var(--green); border: 1px solid rgba(59,130,246,.35); background: rgba(59,130,246,.08); border-radius: 999px; padding: 3px 9px; white-space: nowrap; } /* Cartel de zona: deja claro qué se sube en cada carpeta de la modelo. */ .zone-banner { display: flex; flex-direction: column; gap: 3px; border-radius: 12px; padding: 12px 16px; margin-bottom: 16px; border: 1px solid var(--border); background: var(--layer-1); } .zone-banner strong { font-size: .9rem; } .zone-banner span { color: var(--muted); font-size: .8rem; } .zone-banner.zone-raw { border-color: rgba(255,176,32,.4); background: rgba(255,176,32,.06); } .zone-banner.zone-ok { border-color: rgba(59,130,246,.35); background: rgba(59,130,246,.05); } .zone-banner.zone-x { border-color: rgba(255,90,90,.4); background: rgba(255,90,90,.06); } .gate-signup-link { display: block; width: 100%; margin-top: 14px; background: none; border: none; color: var(--green); font: inherit; font-size: .84rem; font-weight: 700; cursor: pointer; } .gate-signup-link:hover { text-decoration: underline; } #gateSignupForm .gate-error { color: var(--muted); } /* Interruptor de modo claro/oscuro. */ .modo-switch{display:grid;grid-template-columns:1fr 1fr;gap:8px} .modo-btn{ padding:10px 12px;border-radius:12px;border:1px solid var(--border);background:var(--layer-1); color:var(--muted);font:inherit;font-size:.85rem;font-weight:700;cursor:pointer; } .modo-btn:hover{border-color:var(--border-hover);color:var(--text)} .modo-btn.active{border-color:var(--green);color:var(--green);background:rgba(59,130,246,.10)} /* ============ ARCHIVOS: cuadrícula con portada ============ */ .file-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:14px;margin-top:18px} .file-card{ border:1px solid var(--border);border-radius:14px;overflow:hidden;background:var(--layer-1); display:flex;flex-direction:column;transition:border-color .15s ease,transform .15s ease; } .file-card:hover{border-color:var(--border-hover);transform:translateY(-2px)} .file-card.is-dragging{opacity:.45} .file-cover{ position:relative;aspect-ratio:16/10;background-size:cover;background-position:center; background-color:var(--layer-2);display:flex;align-items:center;justify-content:center; } .file-cover.no-thumb{background-image:none} .file-cover-ico{font-size:2.2rem;opacity:.75} .file-play{ position:absolute;width:38px;height:38px;border-radius:50%;background:rgba(0,0,0,.55); color:#fff;display:flex;align-items:center;justify-content:center;font-size:.9rem; border:1px solid rgba(255,255,255,.35); } /* Video ya editado bloqueado tras su primera bajada: se ve atenuado y con candado, en vez de desaparecer de la carpeta — así el equipo sabe de un vistazo que alguien ya se lo llevó. */ .file-card-bloqueado{opacity:.72} .file-lock-badge{ position:absolute;top:6px;right:6px;width:26px;height:26px;border-radius:50%; background:rgba(255,90,90,.85);color:#fff;display:flex;align-items:center;justify-content:center; font-size:.85rem;border:1px solid rgba(255,255,255,.3); } .file-card-body{padding:10px 12px 12px;display:flex;flex-direction:column;gap:4px} .file-card-name{font-size:.82rem;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .file-card-meta{color:var(--muted);font-size:.7rem} .file-card-actions{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px} .file-card-actions .chip{padding:5px 10px;font-size:.78rem} .file-folder-card{position:relative} /* Menú de opciones de carpeta (Ctrl+clic, clic derecho o dejar apretado): accesos, color, renombrar, mover, eliminar. */ /* Fondo SÓLIDO (var(--layer-1) es casi transparente y dejaba ver lo de atrás) + contorno con brillo neón suave del color de acento. */ /* Panel "🔑 Rol y accesos": casillas progresivas — cada bloque solo se ve si su propia casilla está marcada, para no tapar todo de una vez. */ .rol-check{display:flex;align-items:center;gap:10px;padding:9px 2px;font-size:.88rem;font-weight:600;cursor:pointer} .rol-check input{width:17px;height:17px;flex:none;accent-color:#3B82F6} .rol-hint{color:var(--muted);font-size:.76rem;margin:-4px 0 6px 27px} .rol-sub{margin:0 0 10px 27px;padding-left:12px;border-left:2px solid var(--border);display:flex;flex-direction:column;gap:2px} .carpeta-menu{position:fixed;z-index:1200;min-width:230px;background:#101318;border:1px solid rgba(59,130,246,.55);border-radius:14px;padding:8px;backdrop-filter:blur(8px);box-shadow:0 0 10px rgba(59,130,246,.35),0 0 26px rgba(59,130,246,.16),0 14px 44px rgba(0,0,0,.6)} :root[data-modo="claro"] .carpeta-menu{background:#ffffff;border-color:rgba(37,99,235,.5);box-shadow:0 0 10px rgba(37,99,235,.28),0 0 24px rgba(37,99,235,.14),0 14px 40px rgba(15,23,30,.25)} .carpeta-menu-title{font-weight:800;font-size:.82rem;padding:8px 10px 10px;border-bottom:1px solid var(--line);margin-bottom:6px;overflow-wrap:anywhere} .carpeta-menu-item{display:block;width:100%;text-align:left;background:none;border:none;color:var(--text);font:inherit;font-size:.86rem;padding:9px 10px;border-radius:9px;cursor:pointer} .carpeta-menu-item:hover{background:var(--layer-2)} .carpeta-menu-danger{color:#ff6b81} .carpeta-menu-colores{display:flex;align-items:center;gap:7px;padding:8px 10px} .carpeta-color{width:22px;height:22px;border-radius:50%;border:2px solid rgba(255,255,255,.25);cursor:pointer;flex-shrink:0} .carpeta-color:hover{transform:scale(1.15)} .carpeta-color-no{background:transparent;color:var(--muted);font-size:.75rem;line-height:1} .file-folder-tools{position:absolute;top:6px;right:6px;display:none;gap:4px} .file-folder-card:hover .file-folder-tools{display:flex} .file-folder-tools .chip{padding:3px 8px;font-size:.72rem} .file-folder-card.is-drop{border-color:var(--green);background:rgba(59,130,246,.12);transform:scale(1.02)} .file-folder-card.is-dragging{opacity:.45} /* Contrato dentro de la ficha. */ .contrato-card{border-color:rgba(59,130,246,.28)} .contrato-fila{display:flex;align-items:center;gap:12px;padding:12px;border-radius:12px;background:var(--layer-1);border:1px solid var(--border);flex-wrap:wrap} .contrato-ico{font-size:1.6rem} /* Ficha en solo lectura (la que ve la creadora de sí misma). */ .ficha-readonly{border-color:rgba(59,130,246,.25)} .ficha-datos{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px} .ficha-dato{display:flex;flex-direction:column;gap:2px;padding:10px 12px;border-radius:12px;background:var(--layer-1);border:1px solid var(--border)} .ficha-dato span{color:var(--muted);font-size:.7rem;letter-spacing:.04em;text-transform:uppercase} .ficha-dato strong{font-size:.9rem} /* Atajos de Archivos: siempre se puede volver a una sección principal sin perderse. */ .file-shortcuts{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px} .file-shortcut.active{color:var(--green);border-color:rgba(59,130,246,.45);background:rgba(59,130,246,.08)} /* ============ CHAT: arreglo de tarjetas aplastadas + orden ============ Las conversaciones viven en contenedores flex con alto máximo. Sin flex-shrink:0 las tarjetas con overflow:hidden se comprimían hasta quedar en una línea de color — que es justo lo que pasaba con las tareas y los avisos: se veía el borde amarillo y nada más. */ .chat-tag-card, .chat-report-card, .chat-bubble-wrap{flex-shrink:0} .chat-tag-body, .chat-report-body{overflow-wrap:anywhere} /* El registro automático va plegado para no tapar la conversación. */ details.chat-tag-card > summary{cursor:pointer;list-style:none} details.chat-tag-card > summary::-webkit-details-marker{display:none} details.chat-tag-card > summary::after{content:'▸';margin-left:auto;transition:transform .18s ease} details.chat-tag-card[open] > summary::after{transform:rotate(90deg)} details.chat-tag-card > summary .chat-tag-pill{margin-left:8px} /* Separador de día. */ .chat-day-sep{display:flex;align-items:center;gap:10px;margin:6px 0;flex-shrink:0} .chat-day-sep::before,.chat-day-sep::after{content:'';height:1px;background:var(--border);flex:1} .chat-day-sep span{ font-size:.68rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted); background:var(--layer-1);border:1px solid var(--border);border-radius:999px;padding:3px 12px; } /* Texto y fichas legibles dentro del panel, sin descargar nada. */ .file-preview-text{ white-space:pre-wrap;word-break:break-word;font-family:inherit;font-size:.88rem;line-height:1.6; color:var(--text);max-height:70vh;overflow:auto;width:100%;text-align:left; } /* Cierre del día: una fila por persona, para llenarlo en segundos. */ .cierre-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px} .cierre-fila{display:flex;align-items:center;gap:10px;padding:8px 12px;border:1px solid var(--border);border-radius:12px;background:var(--layer-1)} .cierre-fila span{font-size:.86rem;font-weight:700;flex:1;min-width:0} .cierre-fila input{width:110px;background:var(--bg);border:1px solid var(--border);border-radius:10px;color:var(--text);padding:8px 10px;font-family:inherit} /* Botón de notificaciones nativas en la cabecera. */ .push-toggle-btn{font-size:1rem;line-height:1;padding:9px 14px} .push-toggle-btn.is-on{color:var(--green);border-color:rgba(59,130,246,.45);background:rgba(59,130,246,.08)} /* Recordatorio programable: hora, destinatario y si es tarea. */ .ws-prog{margin-top:12px;padding:12px;border:1px solid var(--border);border-radius:12px;background:var(--layer-1)} .ws-prog-check{display:flex;align-items:center;gap:8px;font-size:.84rem;font-weight:600;cursor:pointer} .ws-prog-check input{width:auto} .ws-prog-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px} @media(max-width:520px){.ws-prog-grid{grid-template-columns:1fr}} /* Detalle de la subida: cuánto va, a qué velocidad y cuánto queda. */ .file-progress-info{color:var(--muted);font-size:.76rem;margin-top:8px} /* Modelos asignadas a cada persona del equipo. */ .ficha-modelos{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:8px;margin-top:8px} .ficha-modelo-chk{display:flex;align-items:center;gap:8px;font-size:.84rem;padding:8px 10px;border:1px solid var(--border);border-radius:10px;background:var(--layer-1);cursor:pointer} .ficha-modelo-chk input{width:auto} /* Guía del panel: qué es cada cosa, según quién mire. */ .guia-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px} .guia-card{display:flex;gap:12px;align-items:flex-start;padding:14px 16px} .guia-ico{font-size:1.4rem;line-height:1.2} .guia-card strong{font-size:.92rem;display:block;margin-bottom:4px} .guia-card p{color:var(--muted);font-size:.82rem;line-height:1.55} /* ============ BANDEJA DE AVISOS ============ */ .inbox-btn{position:relative;font-size:1rem;line-height:1;padding:9px 14px} .inbox-btn.tiene-pendientes{border-color:rgba(59,130,246,.5);background:rgba(59,130,246,.08)} .inbox-count{ position:absolute;top:-6px;right:-6px;min-width:18px;height:18px;padding:0 5px; background:var(--red);color:#fff;border-radius:999px;font-size:.66rem;font-weight:900; line-height:18px;text-align:center; } .inbox-panel{ position:fixed;top:70px;right:20px;z-index:60;width:min(420px,calc(100vw - 32px)); max-height:min(70vh,560px);overflow-y:auto;background:var(--card); border:1px solid var(--border);border-radius:var(--r);box-shadow:var(--shadow); } .inbox-head{ display:flex;align-items:center;justify-content:space-between;gap:10px; padding:14px 16px;border-bottom:1px solid var(--border);position:sticky;top:0;background:var(--card); } .inbox-list{padding:8px} .inbox-item{padding:12px;border-radius:12px;border:1px solid var(--border);background:var(--layer-1);margin-bottom:8px} .inbox-item.is-read{opacity:.55} .inbox-meta{color:var(--muted);font-size:.7rem;letter-spacing:.04em;text-transform:uppercase} .inbox-text{font-size:.86rem;margin-top:4px;line-height:1.5;overflow-wrap:anywhere} .inbox-actions{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px} .inbox-actions .chip{padding:5px 12px;font-size:.76rem} @media(max-width:520px){.inbox-panel{right:8px;left:8px;width:auto}} /* La notificación entera es el enlace: se pulsa donde sea y lleva al problema. */ .inbox-item.is-clickable, .notify-gate-item.is-clickable{cursor:pointer;transition:border-color .15s ease,background .15s ease} .inbox-item.is-clickable:hover, .notify-gate-item.is-clickable:hover{border-color:rgba(59,130,246,.5);background:rgba(59,130,246,.06)} .inbox-destino{color:var(--green);font-size:.76rem;font-weight:800} .chip-destino{color:var(--green);border-color:rgba(59,130,246,.4)} /* Audios en el chat. */ .chat-mic{padding:10px 14px;font-size:1rem;line-height:1;flex-shrink:0} .chat-mic.grabando{color:#fff;background:var(--red);border-color:var(--red);animation:micLatido 1s ease-in-out infinite} @keyframes micLatido{0%,100%{opacity:1}50%{opacity:.6}} .chat-audio{background:var(--bg);border:1px solid var(--border);border-radius:14px;padding:10px 12px;font-size:.82rem;color:var(--muted)} .chat-audio audio{display:block} /* ============ MÓVIL: que todo esto se pueda usar con el pulgar ============ */ @media(max-width:640px){ .inbox-panel{top:auto;bottom:0;left:0;right:0;width:auto;max-height:80vh;border-radius:var(--r) var(--r) 0 0} .inbox-item{padding:14px} .inbox-text{font-size:.9rem} .inbox-actions .chip{padding:9px 14px;font-size:.82rem} .app-header-inner{gap:8px;padding:12px 14px} .app-header-right{gap:6px} .app-header-right .chip{padding:9px 11px;font-size:.8rem} .app-logo span{display:none} .chat-mic{padding:12px 14px} .file-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))} .prod-window-tab{flex:1 0 auto} .guia-grid{grid-template-columns:1fr} } /* En móvil la cabecera se apretaba y el rol partía en tres líneas. */ @media(max-width:640px){ .role-badge{ max-width:120px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; font-size:.68rem;padding:8px 12px; } .app-header-right .chip{padding:8px 10px} .theme-toggle-btn,.push-toggle-btn,.inbox-btn{padding:8px 10px} } /* ============ MÓVIL: el panel pensado para el pulgar ============ Las tablas anchas, los modales y las rejillas de escritorio no se manejan bien con una mano. Esto ajusta lo que de verdad se usa desde el teléfono. */ @media(max-width:640px){ .app-main{padding:24px 14px 90px} .section-head h2{font-size:1.25rem} .section-head{flex-direction:column;align-items:flex-start;gap:10px} /* Chats: la caja de escribir se queda abajo y el micro es grande. */ .support-card,.workspace-modal,.help-bubble-panel{border-radius:var(--r) var(--r) 0 0} .chat-audio audio{max-width:100%} /* Formularios y modales a una columna. */ .form-grid,.prod-dash-grid,.prod-kpi-row,.ficha-datos,.cierre-grid,.ws-prog-grid{grid-template-columns:1fr} .file-preview-box{padding:14px;max-height:94vh} .notify-gate-card{padding:22px 18px;max-height:92vh} #fichaGateHost .notify-gate-actions{margin:18px -18px -22px;padding:14px 18px 20px} /* Tablas: se deslizan de lado en vez de romper la pantalla. */ .table-wrap{-webkit-overflow-scrolling:touch} .accounts-table{font-size:.82rem} .accounts-table th,.accounts-table td{padding:10px 8px} /* Botones con superficie suficiente para el dedo. */ .chip{padding:10px 16px} .view-tab{padding:10px 14px} .menu-card{padding:14px} .file-folder-card{padding:16px} /* Las burbujas flotantes no deben taparse entre ellas. */ .help-bubble-fab,#wsFab,#bubFab,#myContentFab{transform:scale(.92)} } /* ============ CHAT ESTILO MÓVIL ============ En el teléfono el chat se manejaba mal: todo era del tamaño del escritorio y había que hacer scroll para todo. Esto lo deja compacto, con las burbujas y la caja de escribir a la mano. */ @media(max-width:640px){ /* Menos aire alrededor de la conversación: cabe el doble de mensajes en pantalla. */ .support-card{padding:12px} .support-widget-header{padding:8px 0 10px;margin-bottom:8px} .support-avatar{width:34px;height:34px;font-size:.9rem} .support-name{font-size:.88rem} /* Burbujas más anchas y compactas, como en cualquier chat de móvil. */ .chat-bubble-wrap{max-width:86% !important} .chat-bubble-wrap > div:last-child{padding:8px 12px !important;font-size:.88rem;border-radius:16px !important} .chat-bubble-wrap > div:first-child{font-size:.66rem;margin-bottom:1px} .chat-bubble-avatar{width:16px;height:16px;font-size:.58rem} /* Tarjetas de tarea, nota o informe: mismo ancho que las burbujas, sin tanto relleno. */ .chat-tag-head,.chat-report-head{padding:7px 11px;font-size:.68rem} .chat-tag-body,.chat-report-body{padding:9px 11px;font-size:.83rem} .chat-tag-pill{font-size:.64rem;padding:1px 6px} .chat-day-sep span{font-size:.6rem;padding:2px 9px} /* La conversación ocupa la pantalla y la caja de escribir se queda abajo, fija. */ #chatMessages,#modelChatMessages,#mfChat{max-height:calc(100vh - 320px) !important;gap:6px !important} .support-card > div:last-child{position:sticky;bottom:0;background:var(--card);padding-top:8px} #chatInput,#modelChatInput{padding:10px 12px !important;font-size:.9rem} /* Audio: el reproductor a lo ancho de la burbuja. */ .chat-audio{padding:6px 8px} .chat-audio audio{width:100%;height:36px} /* En el panel de ELITE, la lista de conversaciones va arriba y el chat debajo. */ .chat-owner-layout{display:block !important} #chatConvList{max-height:180px;overflow-y:auto} .chat-conv-btn{padding:10px 4px !important;font-size:.86rem} /* El centro de ayuda ocupa casi toda la pantalla, como una app de mensajería. */ .help-bubble-panel{width:100vw;height:88vh;max-height:88vh;bottom:0;right:0;left:0;border-radius:var(--r) var(--r) 0 0} } /* En el móvil el encabezado del soporte ocupaba un cuarto de pantalla antes del primer mensaje. Se reduce a lo imprescindible: la conversación es lo que importa. */ @media(max-width:640px){ .help-bubble-panel .section-head{margin-bottom:8px} .help-bubble-panel .section-head p, .help-bubble-panel .section-head .kicker{display:none} .help-bubble-panel .section-head h2{font-size:1.05rem} .support-widget-header{border-bottom:1px solid var(--border)} #chatMessages,#modelChatMessages{max-height:calc(100vh - 250px) !important} } /* ============ VENTANA DE MENSAJERÍA ============ Contactos a un lado y conversación al otro. En el móvil se ve una cosa a la vez y se vuelve con la flecha, como en cualquier app de mensajes. */ .chat-app{ display:grid;grid-template-columns:280px 1fr;gap:0; border:1px solid var(--border);border-radius:var(--r);overflow:hidden; height:min(70vh,620px);background:var(--card); } .chat-app-side{border-right:1px solid var(--border);display:flex;flex-direction:column;min-height:0} .chat-app-side-head{padding:12px 14px;border-bottom:1px solid var(--border);display:flex;flex-direction:column;gap:8px} .chat-app-side-head strong{font-size:.92rem} .chat-app-side-head input{ width:100%;background:var(--bg);border:1px solid var(--border);border-radius:10px; color:var(--text);padding:8px 12px;font-family:inherit;font-size:.84rem;outline:none; } #chatConvList{flex:1;overflow-y:auto;padding:4px 10px} .chat-app-main{display:flex;flex-direction:column;min-height:0} .chat-app-topbar{ display:flex;align-items:center;gap:12px;padding:10px 14px; border-bottom:1px solid var(--border);background:var(--layer-1);flex-shrink:0; } .chat-back{ background:none;border:none;color:var(--text);font-size:1.3rem;line-height:1;cursor:pointer; padding:4px 8px;border-radius:8px; } .chat-back:hover{background:var(--layer-2);color:var(--green)} .chat-app-quien{display:flex;flex-direction:column;min-width:0} .chat-app-quien strong{font-size:.92rem} .chat-app-quien small{color:var(--muted);font-size:.72rem} .chat-app-body{flex:1;overflow-y:auto;padding:14px;display:flex;flex-direction:column;min-height:0} .chat-app-body .kicker{display:none} /* Mensajes: fila normal de chat, sin tarjetas ni sombras. */ .msg{display:flex;margin-bottom:6px;flex-shrink:0} .msg-mio{justify-content:flex-end} .msg-burbuja{ max-width:78%;background:var(--layer-2);border-radius:12px;padding:7px 11px; display:flex;align-items:flex-end;gap:8px;flex-wrap:wrap; } .msg-mio .msg-burbuja{background:rgba(59,130,246,.16)} .msg-texto{white-space:pre-line;overflow-wrap:anywhere;font-size:.88rem;line-height:1.45} .msg-hora{color:var(--muted);font-size:.64rem;margin-left:auto;white-space:nowrap;padding-bottom:1px} .msg-audio{width:min(280px,78vw);flex-direction:column;align-items:stretch} .msg-audio .msg-hora{align-self:flex-end} .msg-video{width:min(280px,78vw);flex-direction:column;align-items:stretch} .msg-video .msg-hora{align-self:flex-end} .msg-video-nombre{font-size:.78rem;color:var(--muted);word-break:break-all} .msg-video-guardado{font-size:.7rem;color:var(--green)} /* Vistos de videos explicativos: chip propio ("✓ Visto" al llegar al 85%), lista "Visto por…", y contorno verde alrededor del video cuando TODA la audiencia ya lo vio. */ .video-vistos{display:flex;flex-direction:column;gap:3px;margin-top:4px} .video-chip{font-size:.7rem;color:var(--muted);line-height:1.4} .video-chip-ok{color:var(--green);font-weight:700} .video-visto-todos video{outline:3px solid var(--green);outline-offset:2px;border-radius:10px} /* Guía "( ! )" de las carpetas de audios: banner dentro de la carpeta + botón en la tarjeta. */ .audio-guia{background:var(--layer-1);border:1px solid var(--border);border-left:3px solid #ffb84d;border-radius:10px;padding:12px 14px;margin-bottom:14px;font-size:.86rem} .audio-guia strong{color:#ffb84d;display:block;margin-bottom:6px} .audio-guia p{margin:0 0 6px;color:var(--text)} .audio-guia-ej{color:var(--muted)!important;font-size:.78rem} .audio-guia ul{padding-left:18px;display:flex;flex-direction:column;gap:4px;color:var(--muted)} /* Abajo a la derecha: arriba viven los botones de renombrar/borrar y se pisaban con este. */ .carpeta-guia-btn{ position:absolute;bottom:8px;right:8px;width:24px;height:24px;border-radius:50%; background:linear-gradient(180deg,#ffd27a,#ffb84d);color:#241a04; border:1px solid rgba(255,184,77,.55);box-shadow:0 2px 8px rgba(255,184,77,.35); font-weight:800;font-size:.85rem;cursor:pointer;line-height:1;transition:transform .12s; } .carpeta-guia-btn:hover{transform:scale(1.12)} .file-folder-card{position:relative} /* Cuadro de selección (solo PC): el rectángulo que se dibuja al arrastrar desde el fondo. */ .marquesina{position:fixed;z-index:70;border:1.5px solid var(--green);background:rgba(59,130,246,.12);border-radius:4px;pointer-events:none} /* ============ MENÚ LATERAL DEL DUEÑO (solo PC) ============ */ .menu-lateral{ position:fixed;top:70px;left:10px;bottom:12px;z-index:56;width:248px; display:none;flex-direction:column;overflow:hidden; background:color-mix(in srgb, var(--layer-1) 80%, transparent); backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px); border:1px solid var(--border);border-radius:18px; box-shadow:0 10px 34px rgba(0,0,0,.35); transition:width .2s ease; } .menu-lateral.compacto{width:60px} @media (min-width: 1100px){ .menu-lateral{display:flex} body.con-menu-lateral .app-main{margin-left:264px;max-width:calc(100% - 280px)} body.con-menu-lateral.ml-compacta .app-main{margin-left:76px} } .ml-perfil{display:flex;align-items:center;gap:10px;padding:14px 12px;border-bottom:1px solid var(--border);flex:none} .ml-avatar{width:36px;height:36px;border-radius:50%;background:var(--layer-1);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:1.1rem;flex:none} .ml-quien{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.2} .ml-quien small{color:var(--muted);font-size:.68rem} .ml-quien strong{font-size:.9rem} .ml-plegar{margin-left:auto;background:none;border:1px solid var(--border);border-radius:8px;color:var(--muted);width:24px;height:24px;cursor:pointer;flex:none} .ml-scroll{overflow-y:auto;padding:10px 8px;display:flex;flex-direction:column;gap:10px;flex:1} .ml-titulo{color:var(--muted);font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;padding:0 8px 4px} .ml-seccion{display:flex;flex-direction:column;gap:2px} .ml-item,.ml-grupo{ display:flex;align-items:center;gap:10px;width:100%;padding:7px 10px;border-radius:8px; background:none;border:none;color:var(--text);cursor:pointer;font:inherit;font-size:.84rem;text-align:left; transition:background .15s var(--ease),color .15s var(--ease); } .ml-item span,.ml-grupo span{width:22px;text-align:center;flex:none;opacity:.75;transition:opacity .15s} .ml-item b{font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} /* Los encabezados de grupo dejan de gritar: bajan de peso y de tamaño y se apagan. En una barra lateral, lo que tiene que destacar es DÓNDE estás, no cómo se llaman las secciones. */ .ml-grupo b{font-weight:600;font-size:.72rem;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)} .ml-grupo i{margin-left:auto;color:var(--muted);font-style:normal;font-size:.7rem;opacity:.6} .ml-item:hover,.ml-grupo:hover{background:var(--layer-2)} .ml-item:hover span{opacity:1} /* La sección abierta se marca con un relleno suave y el texto en blanco, no invirtiendo el botón entero a color: el bloque de color sólido tiraba de la vista más que el propio contenido. */ .ml-item.activo{background:var(--layer-3);color:var(--text)} .ml-item.activo b{color:var(--text);font-weight:600} .ml-item.activo span{opacity:1} /* Un filete del color de la marca a la izquierda: señala dónde estás sin pintar todo el botón. */ .ml-item.activo::before{ content:'';position:absolute;left:0;width:3px;height:18px;border-radius:0 3px 3px 0;background:var(--green); } .ml-item{position:relative} .ml-sub{padding-left:18px} .ml-pie{padding:10px;border-top:1px solid var(--border);flex:none} .ml-crear{ display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:10px; border-radius:10px;background:var(--green);color:var(--on-accent);border:none; font-weight:600;font-size:.86rem;letter-spacing:-.01em;cursor:pointer;font:inherit; transition:filter .18s var(--ease),transform .12s var(--ease); } .ml-crear:hover{filter:brightness(1.08)} .ml-crear:active{transform:scale(.97)} .menu-lateral.compacto .ml-item,.menu-lateral.compacto .ml-grupo{justify-content:center;padding:9px 0} .menu-lateral.compacto .ml-pie .ml-crear{padding:10px 0} /* Carpeta marcada por el cuadro de selección */ .file-folder-card.is-selected{outline:2px solid var(--green);outline-offset:2px} /* (!) sin guía todavía (solo lo ve el dueño): punteado, esperando que la escriba */ .carpeta-guia-vacia{background:none;border:1.5px dashed #ffb84d;color:#ffb84d;box-shadow:none;opacity:.75} /* Tour de bienvenida de agencias nuevas */ .tour-caja{max-width:400px;text-align:center;padding:26px 24px} .tour-ico{font-size:2.6rem;margin-bottom:8px} .tour-caja h3{margin-bottom:8px;font-size:1.15rem} .tour-caja p{color:var(--muted);font-size:.9rem;line-height:1.55;margin-bottom:16px} .tour-puntos{display:flex;justify-content:center;gap:6px;margin-bottom:16px} .tour-puntos i{width:7px;height:7px;border-radius:50%;background:var(--border);display:block} .tour-puntos i.on{background:var(--green)} .tour-botones{display:flex;justify-content:center;gap:10px} .chat-video{background:var(--bg);border:1px solid var(--border);border-radius:14px;padding:8px;font-size:.82rem;color:var(--muted);display:block} @media(max-width:640px){ /* Una pantalla a la vez: o los contactos, o la conversación. */ .chat-app{grid-template-columns:1fr;height:calc(100vh - 190px);border:none;border-radius:0} .chat-app[data-vista="lista"] .chat-app-main{display:none} .chat-app[data-vista="chat"] .chat-app-side{display:none} .chat-app-side{border-right:none} #chatConvList{max-height:none} .chat-app-body{padding:10px} .msg-burbuja{max-width:84%} } /* El panel del dueño tiene su propia regla de ancho y se salía de la pantalla en el móvil: hay que apuntar a las dos clases para poder corregirlo. */ @media(max-width:640px){ .help-bubble-panel, .help-bubble-panel.help-bubble-panel-owner{ position:fixed;left:0;right:0;bottom:0;top:auto; width:100%;max-width:100%;height:90vh;max-height:90vh; border-radius:var(--r) var(--r) 0 0;padding:10px; } .chat-app{height:calc(90vh - 130px)} } /* La conversación estira hasta abajo y la caja de escribir se queda pegada al pie: sin esto quedaba media pantalla vacía debajo del último mensaje. */ .chat-app-body{justify-content:flex-start} .chat-app-body #chatMessages{flex:1 1 auto;max-height:none !important;min-height:0;overflow-y:auto} .chat-app-body > div:last-child{flex-shrink:0;margin-top:auto;padding-top:10px} @media(max-width:640px){ .chat-app-body #chatMessages{max-height:none !important} .chat-app-body > div:last-child{position:sticky;bottom:0;background:var(--card)} } /* Aviso de mensajes nuevos cuando estás leyendo más arriba. */ .chat-app-main,.support-card{position:relative} .chat-nuevos{ position:absolute;left:50%;transform:translateX(-50%);bottom:74px;z-index:5; background:var(--green);color:#04150c;border-color:var(--green);font-weight:800; box-shadow:0 6px 20px rgba(0,0,0,.35); } /* Mensaje en camino y mensaje fallido. */ .msg-enviando .msg-burbuja{opacity:.6} .msg-fallo .msg-burbuja{border:1px solid var(--red)} .msg-fallo .msg-hora::after{content:' · no se envió';color:var(--red)} /* Botón "+" del chat y su menú. */ .chat-mas{padding:10px 15px;font-size:1.15rem;line-height:1;flex-shrink:0;font-weight:700} .chat-mas-menu{ position:fixed;z-index:200;width:288px;max-width:calc(100vw - 16px); background:var(--card);border:1px solid var(--border);border-radius:14px; box-shadow:var(--shadow);padding:6px; } .chat-mas-menu button{ display:flex;align-items:center;gap:12px;width:100%;text-align:left;cursor:pointer; background:none;border:none;color:var(--text);font:inherit;padding:11px 12px;border-radius:10px; } .chat-mas-menu button:hover{background:var(--layer-2)} .chat-mas-menu span{font-size:1.25rem} .chat-mas-menu strong{display:block;font-size:.88rem} .chat-mas-menu small{color:var(--muted);font-size:.75rem} /* Mensajes a pantalla completa: dentro de su sección ocupa todo el alto disponible. */ #viewMensajes .chat-app{height:calc(100vh - 260px);min-height:420px} @media(max-width:640px){ #viewMensajes .chat-app{height:calc(100vh - 200px);border:none;border-radius:0} } /* Fichaje del turno de chatting. */ .turno-card{border-color:rgba(59,130,246,.3)} /* Quien trabaja chatting Y marketing: sus dos fichajes van lado a lado (uno debajo del otro en pantallas chicas), agrupados bajo un mismo encabezado — ver turnosHtml() en app.js. */ .turnos-dobles-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px} @media (max-width:720px){.turnos-dobles-grid{grid-template-columns:1fr}} .turno-botones{display:flex;gap:8px;flex-wrap:wrap} .turno-btn,.turno-btn-edicion{padding:11px 16px;font-size:.86rem} .turno-problema{color:#ff6b6b;border-color:rgba(255,90,90,.4)} .turno-problema:hover{border-color:rgba(255,90,90,.75);background:rgba(255,90,90,.08)} .turno-historial{min-height:0} /* Mensaje en camino: se ve que está saliendo, sin que la conversación se redibuje. */ .msg-enviando .msg-burbuja{opacity:.65} .msg-enviando .msg-hora{font-style:italic} /* ============ MENSAJES: pantalla completa, no una ventanita ============ Dentro de su sección el chat ocupa todo el espacio disponible y se ve como una aplicación de mensajería, no como un recuadro flotando sobre el panel. */ #viewMensajes{margin:0 -28px -90px} #viewMensajes .chat-app{ height:calc(100vh - 210px);min-height:480px; grid-template-columns:320px 1fr;border-radius:0;border-left:none;border-right:none; } #viewMensajes .chat-app-side{background:var(--layer-1)} /* Cabecera de la lista. */ .chat-side-titulo{display:flex;align-items:baseline;justify-content:space-between;gap:8px} .chat-side-titulo strong{font-size:1.05rem} .chat-side-titulo span{color:var(--green);font-size:.72rem;font-weight:800} /* Fila de contacto: avatar, nombre, último mensaje y hora — como cualquier app de mensajes. */ .chat-conv-btn{ display:flex;align-items:center;gap:11px;width:100%;text-align:left;cursor:pointer; background:none;border:none;border-radius:12px;padding:10px 10px; color:var(--text);font-family:inherit;margin-bottom:2px; } .chat-conv-btn:hover{background:var(--layer-2)} .chat-conv-btn.activa{background:rgba(59,130,246,.12)} .conv-avatar{ width:42px;height:42px;border-radius:50%;flex-shrink:0; display:flex;align-items:center;justify-content:center; background:linear-gradient(135deg,rgba(59,130,246,.30),rgba(59,130,246,.12)); color:var(--text);font-weight:800;font-size:1rem;border:1px solid rgba(59,130,246,.30); } .conv-avatar.es-modelo{ background:linear-gradient(135deg,rgba(233,64,143,.30),rgba(233,64,143,.12)); border-color:rgba(233,64,143,.35); } .conv-cuerpo{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px} .conv-linea{display:flex;align-items:center;justify-content:space-between;gap:8px;min-width:0} .conv-linea strong{font-size:.9rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .conv-hora{color:var(--muted);font-size:.7rem;flex-shrink:0} .conv-ultimo{color:var(--muted);font-size:.8rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1} .conv-nuevos{ background:var(--green);color:#04150c;font-size:.68rem;font-weight:900; min-width:19px;height:19px;line-height:19px;text-align:center;border-radius:999px;padding:0 6px;flex-shrink:0; } .chat-conv-btn.con-nuevos .conv-ultimo{color:var(--text);font-weight:600} /* Cabecera de la conversación. */ .chat-app-topbar .conv-avatar{width:36px;height:36px;font-size:.9rem} .chat-app-main{background:var(--card)} @media(max-width:640px){ #viewMensajes{margin:0 -14px -90px} #viewMensajes .chat-app{height:calc(100vh - 168px);grid-template-columns:1fr} .conv-avatar{width:46px;height:46px} .chat-conv-btn{padding:11px 12px} } /* En Mensajes, el chat es la pantalla: se retira la cabecera del panel y las burbujas flotantes, que ahí solo tapan la conversación. */ body.en-mensajes .app-main > .section-head, body.en-mensajes #quickSummary{display:none} /* Se esconde el HOST entero (no solo el botón redondo) — si alguna de estas burbujas había quedado ABIERTA (el panel con su propia "✕" para cerrarla) antes de entrar a Mensajes, ese panel se quedaba flotando fijo en la misma esquina donde cae la barra de escribir del chat, y su "✕" terminaba superpuesta arriba del "+" del chat — parecía que el signo "+" se había convertido en una equis. */ body.en-mensajes #helpBubbleHost, body.en-mensajes #workspaceBubbleHost, body.en-mensajes #createBubbleHost, body.en-mensajes #myContentBubbleHost{display:none !important} body.en-mensajes #viewMensajes .chat-app{height:calc(100vh - 140px)} @media(max-width:640px){ body.en-mensajes #viewMensajes .chat-app{height:calc(100vh - 120px)} } /* Función del empleado al crearlo, y firma del mensaje automático. */ .funcion-desc{color:var(--muted);font-size:.78rem;line-height:1.5;margin-top:8px} .msg-auto .msg-burbuja{background:var(--layer-2);border:1px dashed var(--border);flex-direction:column;align-items:flex-start} .msg-firma{color:var(--muted);font-size:.66rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase} .msg-auto .msg-hora{align-self:flex-end} /* Comunidades por departamento. */ .conv-avatar.es-grupo{ background:linear-gradient(135deg,rgba(120,140,255,.30),rgba(120,140,255,.12)); border-color:rgba(120,140,255,.35);font-size:1.15rem; } /* En grupo, cada mensaje lleva su autor arriba. */ .msg-burbuja{flex-wrap:wrap} .msg-autor{ width:100%;color:var(--green);font-size:.7rem;font-weight:800;margin-bottom:2px; letter-spacing:.02em; } .msg-mio .msg-autor{color:var(--muted)} /* Los fichajes de turno se distinguen de la conversación. */ .msg-turno .msg-burbuja{background:var(--layer-1);border:1px solid var(--border)} .msg-turno .msg-texto{font-size:.84rem} /* ---- solapas del chat del empleado (Soporte / su comunidad) ---- */ .chat-solapas { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 12px; } .chat-solapa.activa { background: var(--accent); border-color: var(--accent); color: #06120c; font-weight: 600; } .support-avatar.es-grupo { background: linear-gradient(135deg, #6d5efc, #a78bfa); color: #fff; } /* ---- la burbuja de mensajes, ancha para todos ---- Antes solo el dueño tenía la ventana grande y el equipo se quedaba con una columna de 400 px: se leía mal y era incómodo trabajar ahí. Ahora la burbuja abre a pantalla casi completa para cualquiera, con la misma lista de conversaciones + hilo que la sección Mensajes. */ .help-bubble-fondo { position: fixed; inset: 0; background: rgba(0, 0, 0, .55); backdrop-filter: blur(2px); z-index: -1; } .help-bubble-panel.help-bubble-grande { width: min(1100px, calc(100vw - 48px)); max-height: min(760px, calc(100vh - 80px)); height: min(760px, calc(100vh - 80px)); padding: 16px 18px; display: flex; flex-direction: column; overflow: hidden; } .help-bubble-panel.help-bubble-grande .help-bubble-body { flex: 1; min-height: 0; display: flex; flex-direction: column; } .help-bubble-panel.help-bubble-grande .help-bubble-body > .chat-app { flex: 1; min-height: 0; } .help-bubble-panel.help-bubble-grande .help-bubble-body > div:not(.chat-app) { flex: 1; min-height: 0; overflow-y: auto; } /* ---- hilo y barra de escribir ---- */ .chat-hilo { display: flex; flex-direction: column; gap: 10px; flex: 1 1 auto; min-height: 0; overflow-y: auto; margin: 10px 0 12px; } .chat-barra { display: flex; gap: 10px; flex-shrink: 0; align-items: center; } .chat-barra input[type="text"] { flex: 1; background: var(--bg); border: 1px solid var(--border); border-radius: 12px; color: var(--text); padding: 12px 14px; font-family: inherit; outline: none; min-width: 0; } .chat-barra input[type="text"]:focus { border-color: var(--border-hover); } .chat-solo-lectura { color: var(--muted); font-size: .82rem; text-align: center; padding: 12px; border: 1px dashed var(--border); border-radius: 12px; flex-shrink: 0; } .conv-avatar.es-mirilla { background: linear-gradient(135deg, #4b5563, #9ca3af); color: #fff; } /* La mensajería empotrada en una vista normal (panel de la creadora) necesita una altura propia: dentro de la página no hay un alto que heredar. */ .mensajeria-empotrada { height: min(620px, 72vh); display: flex; } .mensajeria-empotrada > .chat-app { flex: 1; min-height: 0; } @media (max-width: 640px) { .help-bubble-panel.help-bubble-grande { width: 100vw; height: 92vh; max-height: 92vh; padding: 12px; } .mensajeria-empotrada { height: 78vh; } .chat-barra { gap: 6px; } .chat-barra input[type="text"] { padding: 10px 12px; } } /* Dentro de la burbuja grande y de la vista de la creadora, la mensajería ocupa el alto de su contenedor (las reglas de más arriba la fijan a la altura de la pantalla y ahí no corresponde). */ .help-bubble-grande .chat-app, .mensajeria-empotrada .chat-app { height: 100% !important; max-height: 100%; border-radius: var(--r); } @media (max-width: 640px) { .help-bubble-grande .chat-app, .mensajeria-empotrada .chat-app { height: 100% !important; border-radius: 0; } } /* ---- Mensajes a pantalla completa en el móvil ---- La conversación vivía dentro del flujo de la página: con la cabecera y las pestañas arriba, la caja de escribir quedaba por debajo del borde de la pantalla y había que desplazarse para escribir. Ahora la mensajería se apodera de la pantalla y la caja queda siempre abajo. */ .chat-side-titulo { display: flex; align-items: center; gap: 8px; } .chat-salir { display: none; background: none; border: none; color: var(--text); font-size: 1.2rem; line-height: 1; cursor: pointer; padding: 2px 6px; border-radius: 8px; } .chat-salir:hover { background: var(--layer-2); color: var(--green); } @media (max-width: 900px) { body.en-mensajes #viewMensajes { position: fixed; /* Debajo de la cabecera del panel: si arranca en 0 le tapa el nombre de la conversación. */ top: var(--alto-cabecera, 73px); left: 0; right: 0; bottom: 0; z-index: 70; background: var(--bg); margin: 0 !important; display: block !important; } body.en-mensajes #viewMensajes .chat-app, body.en-mensajes #viewMensajes .chat-app[data-vista] { height: 100% !important; max-height: 100%; width: 100%; border: none; border-radius: 0; } .chat-salir { display: block; } /* Con la mensajería encima, el panel de atrás no debe poder desplazarse. */ body.en-mensajes { overflow: hidden; } } /* La columna del chat no puede ser más ancha que la pantalla: por defecto una celda de rejilla no baja de lo que mide su contenido, y la barra de escribir (botones + campo) la estiraba fuera del borde. Con minmax(0,…) y min-width:0 la celda se deja encoger y el campo se adapta. */ #viewMensajes .chat-app, .help-bubble-grande .chat-app, .mensajeria-empotrada .chat-app { grid-template-columns: minmax(0, 1fr); } @media (min-width: 641px) { #viewMensajes .chat-app { grid-template-columns: 320px minmax(0, 1fr); } .help-bubble-grande .chat-app, .mensajeria-empotrada .chat-app { grid-template-columns: 280px minmax(0, 1fr); } } .chat-app-main, .chat-app-side { min-width: 0; } .chat-app-topbar { min-width: 0; } .chat-app-quien strong, .chat-app-quien small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Anular un mensaje: la equis vive dentro de la burbuja y solo aparece al apuntarla, para no ensuciar la conversación. En pantalla táctil se ve siempre (no hay "pasar por encima"). */ .msg-anular { background: none; border: none; color: var(--muted); font-size: .7rem; line-height: 1; cursor: pointer; padding: 2px 4px; border-radius: 6px; opacity: 0; transition: opacity .15s var(--ease), color .15s var(--ease); } .msg:hover .msg-anular { opacity: .7; } .msg-anular:hover { opacity: 1 !important; color: #f87171; background: rgba(248, 113, 113, .12); } .msg-anular:disabled { opacity: .4 !important; cursor: default; } @media (hover: none) { .msg-anular { opacity: .5; } } /* ---- lista de subidas simultáneas ---- Antes solo existía una tarjeta (subida secuencial). Con varios archivos a la vez hace falta una fila por archivo, con scroll si son muchos, sin que salte el layout al terminar uno. */ .file-progress-lista { max-height: 360px; overflow-y: auto; padding-right: 4px; } .file-progress-lista .file-progress-card { margin-bottom: 10px; } .file-progress-lista .file-progress-card:last-child { margin-bottom: 0; } /* ---- enlaces clicables dentro de texto libre (chat, notas, avisos, informes) ---- */ .msg-link { color: var(--green); text-decoration: underline; text-decoration-color: rgba(59, 130, 246, .5); word-break: break-word; overflow-wrap: anywhere; } .msg-link:hover { text-decoration-color: var(--green); } /* Dentro de la burbuja propia (fondo verde) el mismo verde se pierde — se oscurece para que siga distinguiéndose del resto del texto. */ .msg-mio .msg-burbuja .msg-link { color: #04150c; text-decoration-color: rgba(4, 21, 12, .45); font-weight: 700; } /* ---- banner para activar notificaciones ---- Casi nadie tocaba el botón discreto del header — este banner lo pide de frente al entrar, sin bloquear el panel (se puede posponer). */ /* Globito global de subidas en curso: visible desde cualquier vista del panel. */ .subidas-global-badge { position: fixed; bottom: 92px; left: 50%; transform: translateX(-50%); z-index: 250; background: var(--card); border: 1px solid var(--green); border-radius: 999px; color: var(--text); font-size: .8rem; font-weight: 700; padding: 10px 18px; box-shadow: 0 10px 30px rgba(0,0,0,.45); white-space: nowrap; max-width: calc(100vw - 24px); overflow: hidden; text-overflow: ellipsis; } .impersonar-banner { position: fixed; top: 0; left: 0; right: 0; z-index: 300; background: #ffb020; color: #201400; font-size: .82rem; font-weight: 600; padding: 8px 14px; display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; text-align: center; } .impersonar-banner button { background: #201400; color: #ffb020; border: none; border-radius: 8px; padding: 6px 12px; font-weight: 700; font-size: .8rem; cursor: pointer; } #pushBannerHost { position: fixed; left: 0; right: 0; bottom: 0; z-index: 65; display: flex; justify-content: center; padding: 0 16px 16px; pointer-events: none; } .push-banner { pointer-events: auto; display: flex; align-items: center; gap: 14px; max-width: 560px; width: 100%; background: var(--card); border: 1px solid var(--border-hover); border-radius: var(--r); padding: 14px 16px; box-shadow: 0 24px 60px rgba(0,0,0,.5); animation: bubblePop .25s var(--ease); } .push-banner-ico { font-size: 1.6rem; flex-shrink: 0; } .push-banner-texto { flex: 1; min-width: 0; } .push-banner-texto strong { display: block; font-size: .92rem; } .push-banner-texto p { color: var(--muted); font-size: .8rem; margin-top: 2px; line-height: 1.4; } .push-banner-acciones { display: flex; flex-direction: column; gap: 6px; flex-shrink: 0; } .push-banner-acciones .chip:first-child { background: var(--green); color: #04150c; border-color: var(--green); font-weight: 700; } @media (max-width: 640px) { .push-banner { flex-wrap: wrap; } .push-banner-acciones { flex-direction: row; width: 100%; } .push-banner-acciones .chip { flex: 1; } } /* ---- editor de clips ---- */ .ve-clips-lista { display: flex; flex-direction: column; gap: 10px; } .ve-clip-row { display: grid; grid-template-columns: minmax(140px, 1fr) auto minmax(120px, 1fr) auto minmax(110px, 1fr) auto; gap: 12px; align-items: center; padding: 10px 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--layer-1); } .ve-clip-tiempo { display: flex; flex-direction: column; gap: 2px; } .ve-clip-tiempo span { color: var(--muted); font-size: .76rem; } .ve-clip-row label { display: flex; align-items: center; gap: 6px; font-size: .8rem; white-space: nowrap; } .ve-clip-row .field { margin: 0; } .ve-clip-row .field label { display: block; font-size: .7rem; color: var(--muted); margin-bottom: 2px; } @media (max-width: 900px) { .ve-clip-row { grid-template-columns: 1fr 1fr; } } /* ---- contenido para subir ---- */ .cps-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; } .cps-card { padding: 14px; } .cps-card-head { display: flex; justify-content: space-between; align-items: center; font-size: .78rem; color: var(--muted); margin-bottom: 6px; } /* ---- editor de clips: selector de archivo con miniaturas ---- */ .ve-archivos-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; max-height: 320px; overflow-y: auto; padding: 4px; } .ve-archivo-card { display: flex; flex-direction: column; align-items: stretch; gap: 4px; background: var(--layer-1); border: 1px solid var(--border); border-radius: 10px; padding: 6px; cursor: pointer; text-align: left; font-family: inherit; /* Es un