/* V3 polish ADDENDUM 39 (2026-05-19) — Anti Auto Dark Theme Android.
`color-scheme: only light` a nivel root le indica a Chrome Android /
Samsung Internet que esta página no quiere la inversión automática
de colores. La página visualmente sigue siendo dark via CSS
explícito; este hint solo desactiva el filtro de Force Dark. */
:root{ --ease: cubic-bezier(0.65,0,0.35,1); color-scheme: only light; }
*,*::before,*::after{ box-sizing:border-box; }
html,body{ background:#0A0A0F; color:#F4F1EA; }
/* V3 polish ADDENDUM 33 (2026-05-19) — overflow-x defense.
Antes: solo body tenía `overflow-x: hidden`. En algunos browsers móviles
(Samsung Internet, Chrome Android con scrollbar overlay), body
overflow-x no siempre propaga al viewport raíz, dejando que pequeños
leaks horizontales (animaciones translateX entrando desde +28px) generen
scrollbar de página. Ahora: `overflow-x: clip` en HTML (root, defensa
dura) + `overflow-x: clip` en body (consistencia). `clip` es más
restrictivo que `hidden` (no se puede scrollear ni programáticamente) y
evita el bug del double-scroll. */
html{
overflow-x: clip;
}
body{
font-family: Geist, system-ui, sans-serif;
font-feature-settings: "ss01","cv11";
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
overflow-x: clip;
scrollbar-gutter: stable;
}
::selection{ background: rgba(51,194,234,0.30); color:#fff; }
/* Permanent (visually stable) scrollbars on internal scroll regions */
.stable-scroll{ scrollbar-gutter: stable; overflow-y: scroll; }
.stable-scroll::-webkit-scrollbar{ width: 8px; }
.stable-scroll::-webkit-scrollbar-track{ background: transparent; }
.stable-scroll::-webkit-scrollbar-thumb{ background: rgba(244,241,234,0.08); border-radius: 999px; }
.stable-scroll::-webkit-scrollbar-thumb:hover{ background: rgba(244,241,234,0.16); }
a:focus-visible, button:focus-visible, [role="button"]:focus-visible {
outline: 2px solid rgba(51, 194, 234, 0.85);
outline-offset: 3px;
border-radius: 4px;
}
.kicker{ font-family:"Geist Mono", monospace; font-size:11px; letter-spacing:0.18em; text-transform:uppercase; color: rgba(244,241,234,0.5); }
.display-lg{ font-family:"Instrument Serif",serif; font-weight:400; line-height: 0.98; letter-spacing:-0.01em; }
.tabular { font-variant-numeric: tabular-nums; }
/* .ng-stage como wrapper TRANSPARENTE: deja ver el canvas/grilla/particulas
de la landing (bg-canvas) que vive en z-0 y la vignette de la body (z-1).
Los radiales muy suaves siguen aportando profundidad sin tapar.
Cambio puntual 2026-05-16: se removió el cierre sólido `#0A0A0F` que
ocluía el fondo original en toda la sección V7. */
.ng-stage{
background:
radial-gradient(120% 80% at 50% 0%, rgba(158,123,255,0.05), transparent 50%),
radial-gradient(80% 60% at 100% 100%, rgba(51,194,234,0.04), transparent 55%);
}
/* ─── WhatsApp-like chat (no logos) ─── */
.wa-shell{
background: #ECE5DD; color: #111B21; border-radius: 12px; overflow: hidden;
box-shadow: 0 24px 56px -22px rgba(0,0,0,0.55), 0 1px 0 rgba(255,255,255,0.03) inset;
}
.wa-header{ background: linear-gradient(180deg, #075E54 0%, #054C44 100%); color:#fff; }
.wa-bg{
background-color: #ECE5DD;
background-image:
radial-gradient(rgba(17,27,33,0.035) 1px, transparent 1px),
radial-gradient(rgba(7,94,84,0.025) 1px, transparent 1px);
background-size: 22px 22px, 14px 14px;
background-position: 0 0, 11px 7px;
}
.wa-bubble{
position: relative; max-width: 78%;
border-radius: 8px; padding: 7px 10px 6px;
font-size: 14px; line-height: 1.42;
box-shadow: 0 1px 0.5px rgba(0,0,0,0.13);
word-wrap: break-word; overflow-wrap: break-word;
}
.wa-bubble.in{ background:#FFFFFF; color:#111B21; border-top-left-radius: 0; }
.wa-bubble.out{ background:#DCF8C6; color:#111B21; border-top-right-radius: 0; }
.wa-bubble.in::before{
content:""; position:absolute; left:-7px; top:0;
width:0;height:0;border-style:solid;border-width:0 8px 8px 0;
border-color: transparent #FFFFFF transparent transparent;
filter: drop-shadow(0 1px 0.5px rgba(0,0,0,0.13));
}
.wa-bubble.out::before{
content:""; position:absolute; right:-7px; top:0;
width:0;height:0;border-style:solid;border-width:0 0 8px 8px;
border-color: transparent transparent transparent #DCF8C6;
filter: drop-shadow(0 1px 0.5px rgba(0,0,0,0.13));
}
.wa-bubble a, .wa-link{
color: #1976D2; text-decoration: underline; word-break: break-all;
}
.wa-time{ font-size: 10.5px; color: #667781; margin-left: 8px; }
.wa-checks{ color:#34B7F1; font-size: 13px; margin-left: 3px; letter-spacing:-2px; }
/* Audio bubble (used in audio_principal) */
.wa-audio-wrap{ max-width: 280px; }
.wa-audio-row{ display:flex; align-items:center; gap:10px; }
.wa-audio-play{
width:34px; height:34px; border-radius:50%;
background:#075E54; color:#fff;
display:flex; align-items:center; justify-content:center;
font-size: 14px; flex-shrink:0;
}
.wa-wave{ display:flex; align-items:center; gap:2.5px; flex:1; }
.wa-wave span{ display:block; width:2.5px; border-radius:2px; background: rgba(7,94,84,0.55); }
.wa-audio-meta{ display:flex; justify-content:space-between; padding-top: 3px; font-size:10.5px; color:#667781; }
/* Audio transcript chip (compact micro-explanation tied to the audio bubble) */
.wa-audio-transcript-row{
display: flex;
justify-content: flex-start;
padding: 0 12px;
margin: -2px 0 6px 0;
animation: chip-row-in 320ms var(--ease) both;
}
.wa-audio-transcript-chip{
display: inline-flex;
align-items: flex-start;
gap: 6px;
max-width: 86%;
padding: 5px 11px 6px 11px;
border-radius: 10px;
background: rgba(51,194,234,0.10);
border: 1px solid rgba(51,194,234,0.34);
color: rgba(17,27,33,0.85);
font-family: 'Geist', sans-serif;
font-size: 11px;
line-height: 1.38;
letter-spacing: 0;
}
.wa-audio-transcript-chip .ic{
color: #33C2EA;
font-size: 11px;
flex-shrink: 0;
margin-top: 1px;
font-weight: 600;
}
.wa-audio-transcript-chip .tx{
white-space: normal;
}
/* Image attachment */
.wa-image{
background:#FFFFFF; padding:4px; border-radius:8px;
box-shadow: 0 1px 0.5px rgba(0,0,0,0.13);
max-width: 220px;
}
.wa-image-thumb{
width:100%; height:130px; border-radius:6px;
background: linear-gradient(135deg, rgba(7,94,84,0.10), rgba(7,94,84,0.18)),
repeating-linear-gradient(45deg, rgba(0,0,0,0.04) 0 6px, transparent 6px 12px);
display:flex; align-items:center; justify-content:center;
font-size: 11px; font-family: 'Geist Mono', monospace; color: rgba(0,0,0,0.55);
}
.wa-image-name{ font-size:11px; color:#667781; padding: 4px 4px 2px; display:flex; justify-content:space-between; }
/* PDF attachment */
.wa-pdf{
background:#FFFFFF; border-radius:8px; padding: 10px 12px;
box-shadow: 0 1px 0.5px rgba(0,0,0,0.13);
display:flex; align-items:center; gap:10px;
max-width: 260px;
}
.wa-pdf-icon{
width: 36px; height: 36px; border-radius: 6px;
background: #FCE8E6; color: #C5221F;
display: flex; align-items: center; justify-content: center;
font-family: 'Geist Mono', monospace; font-size: 10px; font-weight: 700;
flex-shrink: 0;
}
.wa-pdf-meta{ flex: 1; min-width: 0; }
.wa-pdf-name{ font-size: 13px; color: #111B21; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wa-pdf-sub{ font-size: 11px; color: #667781; margin-top: 1px; }
.wa-pdf-time{ font-size: 10.5px; color: #667781; align-self: flex-end; }
.wa-typing{
background:#FFFFFF; border-radius:12px; padding:8px 12px;
display:inline-flex; align-items:center; gap:4px;
box-shadow: 0 1px 0.5px rgba(0,0,0,0.13);
}
.wa-typing span{
width:6px; height:6px; border-radius:50%;
background:#667781; opacity:.4;
animation: waBounce 1.1s infinite ease-in-out;
}
.wa-typing span:nth-child(2){ animation-delay: .18s; }
.wa-typing span:nth-child(3){ animation-delay: .36s; }
@keyframes waBounce{ 0%,60%,100%{ transform: translateY(0); opacity:.4 } 30%{ transform: translateY(-4px); opacity:1 } }
.wa-input{ background:#F0F2F5; padding:8px 10px; display:flex; align-items:center; gap:10px; }
.wa-input-field{ flex:1; background:#FFF; border-radius:21px; padding:9px 14px; font-size:14px; color:#667781; box-shadow:0 1px 0.5px rgba(0,0,0,.13); }
.wa-input-btn{ width:38px; height:38px; border-radius:50%; background:#075E54; color:#fff; display:flex; align-items:center; justify-content:center; font-size:16px; flex-shrink:0; }
.wa-date-pill{
display:inline-block; padding: 4px 12px;
background: rgba(255,255,255,0.92); color: #54656F;
border-radius: 8px; font-size: 12px; font-family: 'Geist Mono', monospace;
letter-spacing: 0.08em; text-transform: uppercase;
box-shadow: 0 1px 1px rgba(0,0,0,0.08);
}
/* Staff (human) takeover bubble */
.wa-staff-banner{
background: linear-gradient(135deg, rgba(242,178,92,0.18), rgba(242,178,92,0.06));
color: #5C3D11;
border: 1px dashed rgba(242,178,92,0.55);
border-radius: 8px;
padding: 8px 12px;
margin: 6px 12px 4px;
font-size: 12px;
text-align: center;
}
.wa-bubble.staff{
background: #FFF6E5; color: #5C3D11;
border-top-left-radius: 0;
border: 1px solid rgba(242,178,92,0.45);
}
.wa-bubble.staff::before{
border-color: transparent #FFF6E5 transparent transparent;
}
.wa-staff-tag{
display:inline-block; font-family:'Geist Mono', monospace;
font-size: 9.5px; letter-spacing: 0.18em; text-transform: uppercase;
color: #8C5A0A; margin-bottom: 4px;
}
/* ─── Right-stage (replaces stable-scroll on right column · no internal scrollbar) ─── */
.right-stage{
min-height: 720px;
overflow: visible;
display: flex;
flex-direction: column;
}
/* ─── Capability spotlight (the active capability gets protagonism) ─── */
.cap-spotlight{
position: relative;
background:
linear-gradient(180deg, rgba(51,194,234,0.10), rgba(158,123,255,0.05)),
rgba(10,10,15,0.94);
border: 1px solid rgba(51,194,234,0.50);
border-radius: 16px;
padding: 18px 20px 16px;
box-shadow:
0 0 0 1px rgba(51,194,234,0.08),
0 16px 40px -16px rgba(51,194,234,0.30),
inset 0 1px 0 rgba(244,241,234,0.05);
animation: spotlightEnter 460ms var(--ease) both;
}
.cap-spotlight.violet{
background:
linear-gradient(180deg, rgba(158,123,255,0.12), rgba(51,194,234,0.04)),
rgba(10,10,15,0.94);
border-color: rgba(158,123,255,0.55);
box-shadow:
0 0 0 1px rgba(158,123,255,0.10),
0 16px 40px -16px rgba(158,123,255,0.35),
inset 0 1px 0 rgba(244,241,234,0.05);
}
/* Addendum 33 retry: translateX → translateY. */
@keyframes spotlightEnter{
0%{ opacity:0; transform: translateY(10px) scale(.97); }
100%{ opacity:1; transform: translateY(0) scale(1); }
}
.cap-spotlight-label{
display: inline-flex; align-items: center; gap: 8px;
font-family: 'Geist Mono', monospace;
font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase;
color: rgba(51,194,234,0.95); margin-bottom: 14px;
}
.cap-spotlight.violet .cap-spotlight-label{ color: rgba(158,123,255,0.95); }
.cap-spotlight-label .live-dot{
width: 6px; height: 6px; border-radius: 50%;
background: #33C2EA;
box-shadow: 0 0 0 3px rgba(51,194,234,0.20);
animation: live-dot-pulse 1.4s ease-in-out infinite;
}
.cap-spotlight.violet .cap-spotlight-label .live-dot{
background: #9E7BFF; box-shadow: 0 0 0 3px rgba(158,123,255,0.20);
}
@keyframes live-dot-pulse{
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.4; transform: scale(0.85); }
}
.cap-spotlight-main{
display: flex; align-items: flex-start; gap: 14px;
}
.cap-spotlight-icon{
width: 44px; height: 44px; border-radius: 12px;
background: linear-gradient(135deg, rgba(51,194,234,0.20), rgba(51,194,234,0.05));
border: 1px solid rgba(51,194,234,0.45);
color: #33C2EA;
display: flex; align-items: center; justify-content: center;
font-size: 22px; flex-shrink: 0;
box-shadow: 0 4px 12px -4px rgba(51,194,234,0.40);
}
.cap-spotlight.violet .cap-spotlight-icon{
background: linear-gradient(135deg, rgba(158,123,255,0.20), rgba(158,123,255,0.05));
border-color: rgba(158,123,255,0.45);
color: #9E7BFF;
box-shadow: 0 4px 12px -4px rgba(158,123,255,0.40);
}
.cap-spotlight-text{
font-size: 15px; line-height: 1.5; color: #F4F1EA;
font-weight: 400;
}
/* ─── Capability history (past capabilities as compact ticks) ─── */
.cap-history{
margin-top: 14px;
padding: 14px 16px;
border-top: 1px solid rgba(244,241,234,0.08);
}
.cap-history-label{
font-family: 'Geist Mono', monospace;
font-size: 9.5px; letter-spacing: 0.20em; text-transform: uppercase;
color: rgba(244,241,234,0.42); margin-bottom: 10px;
display: flex; align-items: baseline; justify-content: space-between;
}
.cap-history-count{ color: rgba(244,241,234,0.55); }
.cap-history-list{ display: flex; flex-wrap: wrap; gap: 6px; }
.cap-history-pill{
display: inline-flex; align-items: center; gap: 6px;
padding: 5px 10px; border-radius: 999px;
background: rgba(51,194,234,0.06);
border: 1px solid rgba(51,194,234,0.20);
color: rgba(244,241,234,0.78);
font-size: 11.5px;
animation: historyPill 320ms var(--ease) both;
}
.cap-history-pill .check{ color:#33C2EA; font-weight:600; }
@keyframes historyPill{
0%{ opacity:0; transform: translateY(4px) scale(.96) }
100%{ opacity:1; transform: translateY(0) scale(1) }
}
.cap-history-empty{
font-size: 11.5px; color: rgba(244,241,234,0.4); font-style: italic;
}
/* ─── Legacy capability card (still used for ghost state during email_notice) ─── */
.cap-card{
background: linear-gradient(180deg, rgba(244,241,234,0.04), rgba(244,241,234,0.015));
border: 1px solid rgba(244,241,234,0.10);
border-radius: 12px;
padding: 12px 14px;
backdrop-filter: blur(8px) saturate(110%);
transition: opacity 380ms var(--ease), transform 380ms var(--ease), border-color 380ms var(--ease);
}
.cap-card[data-state="enter"]{ animation: capEnter 460ms var(--ease) both; }
.cap-card[data-state="ghost"]{ opacity:.30; transform: scale(.985); border-color: rgba(244,241,234,0.06); }
/* Addendum 33 retry: translateX → translateY (evita push horizontal en mobile). */
@keyframes capEnter{ 0%{ opacity:0; transform: translateY(10px) scale(.97) } 100%{ opacity:1; transform: translateY(0) scale(1) } }
.cap-icon{
display:inline-flex; align-items:center; justify-content:center;
width:22px; height:22px; border-radius:50%;
background: rgba(51,194,234,0.12); border:1px solid rgba(51,194,234,0.35); color:#33C2EA;
font-size:11px; flex-shrink:0;
}
.cap-card.violet .cap-icon{ background:rgba(158,123,255,.10); border-color:rgba(158,123,255,.35); color:#9E7BFF; }
/* ─── Email-notice (pre-email state) ─── */
.email-notice{
background: linear-gradient(135deg, rgba(51,194,234,0.10), rgba(158,123,255,0.08));
border: 1px solid rgba(51,194,234,0.35);
border-radius: 12px;
padding: 14px 16px;
display: flex; align-items: center; gap: 14px;
box-shadow: 0 8px 24px -12px rgba(51,194,234,0.25);
animation: noticeEnter 420ms var(--ease) both;
}
/* Addendum 33 retry: translateX → translateY. */
@keyframes noticeEnter{
0%{ opacity:0; transform: translateY(12px) scale(.96) }
60%{ opacity:1; transform: translateY(0) scale(1.02) }
100%{ opacity:1; transform: translateY(0) scale(1) }
}
.notice-icon{
width: 44px; height: 44px; border-radius: 12px;
background: linear-gradient(135deg, #33C2EA, #9E7BFF);
color: #fff;
display:flex; align-items:center; justify-content:center;
font-size: 22px; flex-shrink: 0;
box-shadow: 0 4px 12px -2px rgba(51,194,234,0.4);
animation: notice-bounce 1.6s ease-in-out infinite;
}
@keyframes notice-bounce{ 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(-4px); } }
/* ─── Follow-up card (tarjeta de seguimiento agendado) ─── */
.followup-card{
background:
linear-gradient(180deg, rgba(51,194,234,0.06), rgba(158,123,255,0.04)),
rgba(10,10,15,0.94);
border: 1px solid rgba(51,194,234,0.40);
border-radius: 14px;
padding: 18px;
box-shadow: 0 16px 40px -16px rgba(51,194,234,0.30), 0 0 0 1px rgba(51,194,234,0.10);
animation: followupEnter 600ms var(--ease) both;
}
.followup-card[data-state="leave"]{ animation: followupLeave 460ms var(--ease) both; }
.followup-card.is-fresh{
animation:
followupEnter 600ms var(--ease) both,
followupFreshGlow 2200ms ease-out 200ms both;
}
/* Addendum 33 retry: translateX → translateY. */
@keyframes followupEnter{
0%{ opacity:0; transform: translateY(12px) scale(.96) }
100%{ opacity:1; transform: translateY(0) scale(1) }
}
@keyframes followupLeave{
0%{ opacity:1; transform: scale(1) }
100%{ opacity:0; transform: scale(.92) translateY(-8px); }
}
@keyframes followupFreshGlow{
0%{
box-shadow:
0 0 0 0 rgba(51,194,234,0.55),
0 16px 40px -16px rgba(51,194,234,0.30),
0 0 0 1px rgba(51,194,234,0.10);
border-color: rgba(51,194,234,0.85);
}
25%{
box-shadow:
0 0 0 12px rgba(51,194,234,0.10),
0 16px 44px -14px rgba(51,194,234,0.55),
0 0 0 1.5px rgba(51,194,234,0.55);
border-color: rgba(51,194,234,0.75);
}
100%{
box-shadow:
0 0 0 0 rgba(51,194,234,0),
0 16px 40px -16px rgba(51,194,234,0.30),
0 0 0 1px rgba(51,194,234,0.10);
border-color: rgba(51,194,234,0.40);
}
}
.followup-icon{
width: 44px; height: 44px; border-radius: 12px;
background: linear-gradient(135deg, rgba(51,194,234,0.85), rgba(158,123,255,0.85));
color: #fff;
display:flex; align-items:center; justify-content:center;
font-size: 20px;
box-shadow: 0 0 0 4px rgba(51,194,234,0.12);
}
.followup-status{
display: inline-flex; align-items: center; gap: 6px;
padding: 4px 10px; border-radius: 999px;
background: rgba(51,194,234,0.14); color: #33C2EA;
font-size: 11px; font-family: 'Geist Mono', monospace;
letter-spacing: 0.10em; text-transform: uppercase;
}
.followup-status .dot{
width: 6px; height: 6px; border-radius: 50%; background: #33C2EA;
animation: followup-pulse 1.6s ease-in-out infinite;
}
@keyframes followup-pulse{ 0%,100%{ opacity:1 } 50%{ opacity:.3 } }
.followup-field{
display: grid; grid-template-columns: 120px 1fr; gap: 12px;
padding: 6px 0; border-bottom: 1px solid rgba(244,241,234,0.06);
font-size: 13px;
}
.followup-field:last-child{ border-bottom: none; }
.followup-field .k{
font-family: 'Geist Mono', monospace; font-size: 10.5px;
letter-spacing: 0.06em; text-transform: uppercase; color: rgba(244,241,234,0.5);
}
.followup-field .v{ color: #F4F1EA; }
/* Resolved / Bot silent card */
.resolved-card, .silent-card{
background: rgba(51,194,234,0.05);
border: 1px dashed rgba(51,194,234,0.30);
border-radius: 12px;
padding: 14px 16px;
display: flex; align-items: center; gap: 14px;
animation: noticeEnter 420ms var(--ease) both;
}
.silent-card{
background: rgba(244,241,234,0.04);
border: 1px dashed rgba(244,241,234,0.20);
}
.resolved-icon, .silent-icon{
width: 36px; height: 36px; border-radius: 50%;
background: rgba(51,194,234,0.12);
border: 1px solid rgba(51,194,234,0.35);
color: #33C2EA;
display:flex; align-items:center; justify-content:center;
font-size: 16px; flex-shrink: 0;
}
.silent-icon{
background: rgba(244,241,234,0.06);
border-color: rgba(244,241,234,0.18);
color: rgba(244,241,234,0.65);
}
/* ─── Gmail-like email ─── */
.gm-shell{
background:#FFFFFF; color:#202124; border-radius: 12px; overflow:hidden;
box-shadow: 0 24px 56px -20px rgba(51,194,234,0.20), 0 0 0 1px rgba(51,194,234,0.30);
animation: gmEnter 640ms var(--ease) both;
}
/* Addendum 33 retry: translateX → translateY. */
@keyframes gmEnter{
0%{ opacity:0; transform: translateY(14px) scale(.98) }
100%{ opacity:1; transform: translateY(0) scale(1) }
}
.gm-header{ padding: 14px 18px; border-bottom: 1px solid #E8EAED; display:flex; align-items:center; gap:12px; }
.gm-chip{
display:inline-flex; align-items:center; gap:6px;
padding: 3px 10px; border-radius: 999px;
background:#E8F0FE; color:#1A73E8;
font-size:10.5px; font-weight:500;
letter-spacing: 0.04em;
}
.gm-chip.warn{ background:#FCE8E6; color:#C5221F; }
.gm-chip.ok{ background:#E6F4EA; color:#137333; }
.gm-chip.violet{ background:#F3E8FD; color:#7B1FA2; }
.gm-chip.amber{ background:#FFF6E5; color:#8C5A0A; }
.gm-subject-row{
padding: 14px 20px 4px;
display:flex; align-items:flex-start; justify-content:space-between; gap:14px;
}
.gm-subject{
font-family:"Instrument Serif", Georgia, serif;
font-size: 22px; line-height: 1.25; color:#202124;
min-width:0; flex:1;
}
.gm-cta-inline{
margin-top: 2px;
background:#1A73E8; color:#FFF;
padding: 7px 10px; border-radius: 999px;
font-size:12px; font-weight: 600;
display:inline-flex; align-items:center; gap: 6px; cursor: pointer;
white-space: nowrap; flex-shrink:0;
box-shadow: 0 8px 18px -12px rgba(26,115,232,.8);
transition: background 220ms var(--ease), transform 220ms var(--ease);
}
.gm-cta-inline:hover{ background:#1557B0; transform: translateY(-1px); }
.gm-meta{ padding: 0 20px 12px; color:#5F6368; font-size:12.5px; }
.gm-body{ padding: 0 20px 14px; font-size:13.5px; color:#202124; line-height:1.6; }
.gm-fields{
margin: 0 20px 14px; padding: 12px 14px;
background:#F8F9FA; border-radius: 10px; border:1px solid #E8EAED;
}
.gm-fields .row{ display:grid; grid-template-columns: 150px 1fr; gap: 12px; padding: 4px 0; font-size: 12.5px; }
.gm-fields .k{ color:#5F6368; font-family:'Geist Mono', monospace; font-size:10.5px; letter-spacing: .04em; text-transform: uppercase; }
.gm-fields .v{ color:#202124; }
.gm-attachment{
display:inline-flex; align-items:center; gap:8px;
padding: 8px 12px; border: 1px solid #E8EAED; border-radius: 8px;
background:#FFFFFF; font-size: 12.5px; color: #202124; margin-right: 6px; margin-bottom: 6px;
}
.gm-attachment .icon{
width:26px; height:26px; border-radius:6px;
background:#E8F0FE; color:#1A73E8;
display:flex; align-items:center; justify-content:center;
font-family:'Geist Mono', monospace; font-size:9.5px; font-weight:600;
}
.gm-attachment .icon.pdf{ background:#FCE8E6; color:#C5221F; }
/* ─── Ticks below output ─── */
.ticks-block{
margin-top: 12px;
padding: 14px 16px;
background: linear-gradient(180deg, rgba(51,194,234,0.05), rgba(10,10,15,0));
border: 1px solid rgba(244,241,234,0.10);
border-radius: 12px;
animation: ticksIn 540ms var(--ease) both;
animation-delay: 320ms;
}
@keyframes ticksIn{ 0%{ opacity:0; transform: translateY(8px) } 100%{ opacity:1; transform: translateY(0) } }
.tick-pill{
display:inline-flex; align-items:center; gap:6px;
padding: 5px 10px; border-radius: 999px;
background: rgba(51,194,234,0.10);
border: 1px solid rgba(51,194,234,0.32);
color: #F4F1EA;
font-size: 11.5px;
margin: 4px;
animation: tickPill 360ms var(--ease) both;
}
.tick-pill .check{ color:#33C2EA; font-weight:600; }
@keyframes tickPill{ 0%{ opacity:0; transform: translateY(6px) scale(.95) } 100%{ opacity:1; transform: translateY(0) scale(1) } }
/* ─── Tabs verticals ─── */
.vtab{ transition: color 220ms var(--ease), border-color 220ms var(--ease), background 220ms var(--ease); }
.vtab[data-active="true"]{
color:#F4F1EA; background: rgba(51,194,234,0.10); border-color: rgba(51,194,234,0.40);
}
.vtab[data-active="true"] .vtab-dot{ background:#33C2EA; box-shadow: 0 0 0 3px rgba(51,194,234,0.18); }
/* ─── Flow chips ─── */
.fchip{ transition: all 200ms var(--ease); cursor: pointer; }
.fchip[data-active="true"]{
background: rgba(244,241,234,0.06); color:#F4F1EA; border-color: rgba(244,241,234,0.18);
}
.fchip[data-active="true"] .fdot{ background: #33C2EA; }
/* ─── Speed pills ─── */
.spd{ transition: all 200ms var(--ease); cursor: pointer; }
.spd[data-active="true"]{ background: rgba(51,194,234,0.18); color:#33C2EA; border-color: rgba(51,194,234,0.45); }
button[aria-label="Pausar"] > span,
button[aria-label="Reproducir"] > span,
button[aria-label="Replay"] > span{ font-size: 0 !important; }
/* ─── Scrubber (no fill, just thumb + ticks) ─── */
.scrub-track{ position: relative; height: 4px; background: rgba(244,241,234,0.06); border-radius: 999px; cursor: pointer; }
.scrub-fill{ display: none; }
.scrub-tick{
position: absolute; top:50%; width:2px; height:8px; margin-top:-4px;
background: rgba(244,241,234,0.20); border-radius:1px; pointer-events:none;
}
.scrub-tick[data-passed="true"]{ background: rgba(51,194,234,0.85); }
.scrub-thumb{
position: absolute; top:50%; width:14px; height:14px; margin-top:-7px; margin-left:-7px;
background:#F4F1EA; border:2px solid #33C2EA; border-radius:50%;
box-shadow: 0 0 0 6px rgba(51,194,234,0.10);
cursor: grab; transition: transform 120ms var(--ease);
}
.scrub-thumb:active{ cursor: grabbing; transform: scale(1.15); }
/* ═══════════════════════════════════════════════════════════════
V6 ATTENTION · EmailNotice "Correo nuevo" momento dramático
icono grande centrado · slide-in suave · 3 dots de "preparando"
═══════════════════════════════════════════════════════════════ */
.email-notice-v6{
position: relative;
background: linear-gradient(180deg, rgba(51,194,234,0.12), rgba(158,123,255,0.06));
border: 1px solid rgba(51,194,234,0.45);
border-radius: 16px;
padding: 28px 24px 22px;
text-align: center;
box-shadow:
0 0 0 1px rgba(51,194,234,0.10),
0 24px 60px -20px rgba(51,194,234,0.40),
inset 0 1px 0 rgba(244,241,234,0.05);
animation: emailNoticeEnter 800ms var(--ease) both;
}
@keyframes emailNoticeEnter{
0% { opacity: 0; transform: translateY(28px) scale(.94); }
55% { opacity: 1; transform: translateY(0) scale(1.03); }
100% { opacity: 1; transform: translateY(0) scale(1); }
}
.email-notice-v6-icon{
width: 64px; height: 64px; border-radius: 18px;
background: linear-gradient(135deg, #33C2EA, #9E7BFF);
color: #FFFFFF;
display: flex; align-items: center; justify-content: center;
font-size: 32px;
margin: 0 auto 14px;
box-shadow:
0 12px 28px -8px rgba(51,194,234,0.50),
0 0 0 4px rgba(51,194,234,0.10);
animation: emailNoticeIcon 2.2s ease-in-out infinite;
}
@keyframes emailNoticeIcon{
0%, 100%{ transform: translateY(0) rotate(0deg); }
30% { transform: translateY(-6px) rotate(-3deg); }
60% { transform: translateY(-2px) rotate(2deg); }
}
.email-notice-v6-title{
font-family: "Instrument Serif", Georgia, serif;
font-size: 24px; line-height: 1.15;
color: #F4F1EA;
margin-bottom: 4px;
}
.email-notice-v6-sub{
font-size: 13px;
color: rgba(244,241,234,0.68);
line-height: 1.45;
max-width: 340px;
margin: 0 auto 14px;
}
.email-notice-v6-prep{
display: inline-flex; align-items: center; gap: 6px;
padding: 5px 12px;
border-radius: 999px;
background: rgba(51,194,234,0.10);
border: 1px solid rgba(51,194,234,0.25);
}
.email-notice-v6-prep .dot{
width: 5px; height: 5px; border-radius: 50%;
background: #33C2EA; opacity: 0.4;
animation: emailPrepDot 1.4s ease-in-out infinite;
}
.email-notice-v6-prep .dot:nth-child(2){ animation-delay: 0.22s; }
.email-notice-v6-prep .dot:nth-child(3){ animation-delay: 0.44s; }
@keyframes emailPrepDot{
0%, 60%, 100%{ opacity: 0.4; transform: translateY(0); }
30% { opacity: 1; transform: translateY(-3px); }
}
/* ═══════════════════════════════════════════════════════════════
V6 ATTENTION · OPTION A · AGENT WORK STAGE
icono central grande · texto de acción · rastro persistente
═══════════════════════════════════════════════════════════════ */
.stage-shell{
background:
radial-gradient(80% 60% at 50% 30%, rgba(51,194,234,0.10), transparent 60%),
linear-gradient(180deg, rgba(244,241,234,0.03), rgba(244,241,234,0.01));
border: 1px solid rgba(244,241,234,0.10);
border-radius: 16px;
padding: 22px 20px 18px;
position: relative;
}
.stage-header{
display: flex; align-items: center; justify-content: space-between;
margin-bottom: 14px;
font-family: 'Geist Mono', monospace;
font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase;
color: rgba(244,241,234,0.55);
}
.stage-header .live{ display: inline-flex; align-items: center; gap: 7px; color: rgba(51,194,234,0.92); }
.stage-header .live .pulse{
width: 7px; height: 7px; border-radius: 50%; background: #33C2EA;
box-shadow: 0 0 0 3px rgba(51,194,234,0.20);
animation: stage-live 1.4s ease-in-out infinite;
}
@keyframes stage-live{
0%, 100%{ opacity: 1; transform: scale(1); }
50% { opacity: 0.45; transform: scale(0.85); }
}
.stage-icon-wrap{
display: flex; align-items: center; justify-content: center;
margin: 18px 0 16px;
}
.stage-icon{
width: 110px; height: 110px; border-radius: 32px;
background:
radial-gradient(60% 60% at 50% 40%, rgba(51,194,234,0.20), transparent 70%),
linear-gradient(135deg, rgba(51,194,234,0.18), rgba(158,123,255,0.10));
border: 1px solid rgba(51,194,234,0.32);
color: #F4F1EA;
display: flex; align-items: center; justify-content: center;
font-size: 48px;
box-shadow:
0 0 0 8px rgba(51,194,234,0.06),
0 20px 50px -16px rgba(51,194,234,0.45);
transition: all 600ms var(--ease);
position: relative;
}
.stage-icon::after{
content: ""; position: absolute; inset: -8px;
border-radius: 38px;
border: 1px solid rgba(51,194,234,0.18);
animation: stage-icon-ring 2.6s ease-in-out infinite;
pointer-events: none;
}
@keyframes stage-icon-ring{
0%, 100%{ transform: scale(1); opacity: 0.6; }
50% { transform: scale(1.06); opacity: 0.25; }
}
.stage-action{
text-align: center;
font-size: 16px; line-height: 1.4;
color: #F4F1EA;
margin-bottom: 6px;
min-height: 22px;
animation: stage-action-in 480ms var(--ease) both;
}
@keyframes stage-action-in{
0%{ opacity: 0; transform: translateY(4px); }
100%{ opacity: 1; transform: translateY(0); }
}
.stage-action-sub{
text-align: center;
font-size: 12.5px; color: rgba(244,241,234,0.55);
margin-bottom: 18px;
}
.stage-trail{
border-top: 1px solid rgba(244,241,234,0.08);
padding-top: 14px;
}
.stage-trail-label{
font-family: 'Geist Mono', monospace;
font-size: 9.5px; letter-spacing: 0.20em; text-transform: uppercase;
color: rgba(244,241,234,0.45);
margin-bottom: 10px;
display: flex; justify-content: space-between;
}
.stage-trail-list{
display: flex; flex-wrap: wrap; gap: 6px;
}
.stage-trail-chip{
display: inline-flex; align-items: center; gap: 6px;
padding: 5px 11px; border-radius: 999px;
background: rgba(51,194,234,0.08);
border: 1px solid rgba(51,194,234,0.25);
color: rgba(244,241,234,0.85);
font-size: 11.5px;
animation: stage-chip-in 360ms var(--ease) both;
}
.stage-trail-chip .check{ color: #33C2EA; font-weight: 600; }
@keyframes stage-chip-in{
0%{ opacity: 0; transform: translateY(6px) scale(.96); }
100%{ opacity: 1; transform: translateY(0) scale(1); }
}
.stage-output{ margin-top: 14px; }
/* ═══════════════════════════════════════════════════════════════
V6 ATTENTION · OPTION B · INBOX REVEAL
bandeja del agente · skills se acumulan como líneas · email cae
═══════════════════════════════════════════════════════════════ */
.inbox-shell{
background: linear-gradient(180deg, rgba(244,241,234,0.03), rgba(244,241,234,0.01));
border: 1px solid rgba(244,241,234,0.10);
border-radius: 16px;
padding: 18px 18px 16px;
}
.inbox-header{
display: flex; align-items: center; gap: 10px;
padding-bottom: 12px;
border-bottom: 1px solid rgba(244,241,234,0.08);
margin-bottom: 12px;
}
.inbox-header-icon{
width: 32px; height: 32px; border-radius: 8px;
background: rgba(51,194,234,0.14);
border: 1px solid rgba(51,194,234,0.32);
color: #33C2EA;
display: flex; align-items: center; justify-content: center;
font-size: 16px;
}
.inbox-header-title{
font-size: 13.5px; color: #F4F1EA; font-weight: 500;
}
.inbox-header-sub{
font-family: 'Geist Mono', monospace;
font-size: 9.5px; letter-spacing: 0.18em; text-transform: uppercase;
color: rgba(244,241,234,0.50);
margin-top: 1px;
}
.inbox-header-count{
margin-left: auto;
font-family: 'Geist Mono', monospace;
font-size: 11px; color: rgba(244,241,234,0.55);
padding: 2px 9px; border-radius: 999px;
background: rgba(244,241,234,0.06);
border: 1px solid rgba(244,241,234,0.10);
}
.inbox-line{
display: flex; align-items: flex-start; gap: 12px;
padding: 9px 4px;
border-bottom: 1px solid rgba(244,241,234,0.05);
animation: inbox-line-in 380ms var(--ease) both;
}
.inbox-line:last-child{ border-bottom: none; }
@keyframes inbox-line-in{
0%{ opacity: 0; transform: translateX(-8px); }
100%{ opacity: 1; transform: translateX(0); }
}
.inbox-line-status{
width: 18px; height: 18px; border-radius: 50%;
background: rgba(51,194,234,0.14);
border: 1px solid rgba(51,194,234,0.40);
color: #33C2EA;
display: flex; align-items: center; justify-content: center;
font-size: 11px; flex-shrink: 0; margin-top: 1px;
}
.inbox-line.active .inbox-line-status{
background: #33C2EA; color: #0A0A0F;
box-shadow: 0 0 0 4px rgba(51,194,234,0.20);
animation: inbox-active-pulse 1.4s ease-in-out infinite;
}
@keyframes inbox-active-pulse{
0%, 100%{ box-shadow: 0 0 0 4px rgba(51,194,234,0.20); }
50% { box-shadow: 0 0 0 8px rgba(51,194,234,0.06); }
}
.inbox-line-text{
font-size: 13px; line-height: 1.4;
color: rgba(244,241,234,0.88);
}
.inbox-line.active .inbox-line-text{
color: #F4F1EA;
font-weight: 500;
}
.inbox-line.pending .inbox-line-status{
background: transparent; border-color: rgba(244,241,234,0.12); color: rgba(244,241,234,0.30);
}
.inbox-line.pending .inbox-line-text{
color: rgba(244,241,234,0.35); font-style: italic;
}
.inbox-output{
margin-top: 14px;
padding-top: 14px;
border-top: 1px dashed rgba(51,194,234,0.30);
}
/* ═══════════════════════════════════════════════════════════════
V6 ATTENTION · OPTION C · SPLIT RESULT
arriba: salida tangible · abajo: 4 bloques iluminándose
═══════════════════════════════════════════════════════════════ */
.split-shell{ display: flex; flex-direction: column; gap: 14px; }
.split-result-slot{
min-height: 60px;
}
.split-result-empty{
background:
radial-gradient(60% 60% at 50% 50%, rgba(51,194,234,0.05), transparent 60%),
linear-gradient(180deg, rgba(244,241,234,0.025), rgba(244,241,234,0.005));
border: 1px dashed rgba(244,241,234,0.14);
border-radius: 14px;
padding: 22px 16px;
text-align: center;
color: rgba(244,241,234,0.45);
font-size: 12.5px;
font-style: italic;
}
.split-blocks{
display: grid; grid-template-columns: 1fr;
gap: 8px;
}
.split-block{
display: grid; grid-template-columns: 44px 1fr auto;
gap: 12px; align-items: center;
padding: 10px 12px;
border-radius: 10px;
border: 1px solid rgba(244,241,234,0.08);
background: rgba(244,241,234,0.02);
transition: all 380ms var(--ease);
}
.split-block[data-state="active"]{
border-color: rgba(51,194,234,0.45);
background: linear-gradient(180deg, rgba(51,194,234,0.08), rgba(51,194,234,0.02));
box-shadow: 0 6px 18px -10px rgba(51,194,234,0.35);
}
.split-block[data-state="done"]{
border-color: rgba(244,241,234,0.10);
background: rgba(244,241,234,0.025);
}
.split-block-icon{
width: 36px; height: 36px; border-radius: 9px;
background: rgba(244,241,234,0.06);
border: 1px solid rgba(244,241,234,0.10);
display: flex; align-items: center; justify-content: center;
font-size: 18px;
color: rgba(244,241,234,0.55);
transition: all 300ms var(--ease);
}
.split-block[data-state="active"] .split-block-icon{
background: rgba(51,194,234,0.18);
border-color: rgba(51,194,234,0.45);
color: #33C2EA;
box-shadow: 0 0 0 4px rgba(51,194,234,0.10);
}
.split-block[data-state="done"] .split-block-icon{
background: rgba(51,194,234,0.08);
border-color: rgba(51,194,234,0.20);
color: rgba(51,194,234,0.85);
}
.split-block-text{ min-width: 0; }
.split-block-key{
font-family: 'Geist Mono', monospace;
font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase;
color: rgba(244,241,234,0.55);
margin-bottom: 2px;
}
.split-block[data-state="active"] .split-block-key{ color: #33C2EA; }
.split-block[data-state="done"] .split-block-key{ color: rgba(244,241,234,0.62); }
.split-block-val{
font-size: 13px; line-height: 1.4;
color: rgba(244,241,234,0.92);
}
.split-block-val.empty{
color: rgba(244,241,234,0.32);
font-style: italic;
}
.split-block-status{
font-family: 'Geist Mono', monospace;
font-size: 9.5px; letter-spacing: 0.16em; text-transform: uppercase;
color: rgba(244,241,234,0.32);
flex-shrink: 0;
}
.split-block[data-state="active"] .split-block-status{ color: #33C2EA; }
.split-block[data-state="done"] .split-block-status{ color: rgba(51,194,234,0.62); }
/* ═══════════════════════════════════════════════════════════════
V6 · RIGHT PANEL STYLE SELECTOR (chips above the demo)
═══════════════════════════════════════════════════════════════ */
.style-selector{
display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
padding: 10px 14px;
margin-bottom: 14px;
background: linear-gradient(180deg, rgba(244,241,234,0.03), rgba(244,241,234,0.01));
border: 1px solid rgba(244,241,234,0.10);
border-radius: 12px;
}
.style-selector-label{
font-family: 'Geist Mono', monospace;
font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase;
color: rgba(244,241,234,0.55);
margin-right: 4px;
}
.style-chip{
display: inline-flex; align-items: center; gap: 7px;
padding: 6px 12px; border-radius: 999px;
border: 1px solid rgba(244,241,234,0.12);
background: transparent;
color: rgba(244,241,234,0.62);
font-size: 12.5px;
cursor: pointer;
transition: all 200ms var(--ease);
}
.style-chip:hover{ color:#F4F1EA; border-color: rgba(244,241,234,0.30); }
.style-chip[data-active="true"]{
background: rgba(51,194,234,0.14);
border-color: rgba(51,194,234,0.50);
color: #F4F1EA;
}
.style-chip .letter{
width: 18px; height: 18px; border-radius: 4px;
background: rgba(244,241,234,0.10);
display: flex; align-items: center; justify-content: center;
font-family: 'Geist Mono', monospace; font-size: 10px; font-weight: 600;
color: rgba(244,241,234,0.70);
transition: all 200ms var(--ease);
}
.style-chip[data-active="true"] .letter{
background: rgba(51,194,234,0.30); color: #F4F1EA;
}
/* ═══════════════════════════════════════════════════════════════
OPTION A · Resultado + ticks (sobria, sin glow)
═══════════════════════════════════════════════════════════════ */
.panelA-active{
background: rgba(244,241,234,0.04);
border: 1px solid rgba(244,241,234,0.12);
border-radius: 10px;
padding: 12px 14px;
display: flex; align-items: flex-start; gap: 12px;
animation: panelA-in 320ms var(--ease) both;
}
.panelA-active.violet{ border-color: rgba(158,123,255,0.30); }
@keyframes panelA-in{
0%{ opacity:0; transform: translateY(4px); }
100%{ opacity:1; transform: translateY(0); }
}
.panelA-active-label{
font-family: 'Geist Mono', monospace;
font-size: 9.5px; letter-spacing: 0.20em; text-transform: uppercase;
color: rgba(244,241,234,0.50);
margin-bottom: 4px;
}
.panelA-active-text{ font-size: 14px; line-height: 1.45; color: #F4F1EA; }
.panelA-icon{
width: 28px; height: 28px; border-radius: 7px;
background: rgba(51,194,234,0.14);
border: 1px solid rgba(51,194,234,0.32);
color: #33C2EA;
display: flex; align-items: center; justify-content: center;
font-size: 13px; flex-shrink: 0;
}
.panelA-active.violet .panelA-icon{
background: rgba(158,123,255,0.12); border-color: rgba(158,123,255,0.32); color: #9E7BFF;
}
.panelA-ticks{
display: flex; flex-wrap: wrap; gap: 5px;
margin-top: 14px; padding-top: 12px;
border-top: 1px solid rgba(244,241,234,0.08);
}
.panelA-tick{
display: inline-flex; align-items: center; gap: 5px;
padding: 4px 9px; border-radius: 999px;
background: rgba(51,194,234,0.06);
border: 1px solid rgba(51,194,234,0.20);
color: rgba(244,241,234,0.78);
font-size: 11px;
animation: panelA-tick-in 280ms var(--ease) both;
}
.panelA-tick .check{ color: #33C2EA; font-weight: 600; }
@keyframes panelA-tick-in{
0%{ opacity:0; transform: translateY(3px); }
100%{ opacity:1; transform: translateY(0); }
}
/* ═══════════════════════════════════════════════════════════════
OPTION B · Timeline vertical de capacidades
═══════════════════════════════════════════════════════════════ */
.panelB{
position: relative;
padding: 4px 0 4px 28px;
}
.panelB::before{
content: ""; position: absolute;
left: 9px; top: 8px; bottom: 8px;
width: 2px;
background: linear-gradient(180deg,
rgba(51,194,234,0.30) 0%,
rgba(51,194,234,0.20) 50%,
rgba(244,241,234,0.10) 100%);
border-radius: 2px;
}
.panelB-node{
position: relative;
padding: 7px 0 7px 4px;
transition: opacity 320ms var(--ease);
}
.panelB-node .dot{
position: absolute;
left: -23px; top: 11px;
width: 12px; height: 12px; border-radius: 50%;
background: #0A0A0F;
border: 2px solid rgba(244,241,234,0.30);
transition: all 280ms var(--ease);
}
.panelB-node[data-state="active"] .dot{
background: #33C2EA;
border-color: #33C2EA;
box-shadow: 0 0 0 4px rgba(51,194,234,0.20);
animation: panelB-dot-pulse 1.4s ease-in-out infinite;
}
.panelB-node[data-state="active"].violet .dot{
background: #9E7BFF; border-color: #9E7BFF;
box-shadow: 0 0 0 4px rgba(158,123,255,0.20);
}
.panelB-node[data-state="done"] .dot{
background: rgba(51,194,234,0.20);
border-color: rgba(51,194,234,0.60);
}
.panelB-node[data-state="pending"] .dot{
background: #0A0A0F;
border-color: rgba(244,241,234,0.18);
}
@keyframes panelB-dot-pulse{
0%, 100%{ box-shadow: 0 0 0 4px rgba(51,194,234,0.20); }
50%{ box-shadow: 0 0 0 7px rgba(51,194,234,0.06); }
}
.panelB-node-text{
font-size: 13px; line-height: 1.45;
color: rgba(244,241,234,0.92);
animation: panelB-node-in 320ms var(--ease) both;
}
.panelB-node[data-state="done"] .panelB-node-text{ color: rgba(244,241,234,0.65); }
.panelB-node[data-state="pending"] .panelB-node-text{ color: rgba(244,241,234,0.32); font-style: italic; }
.panelB-node[data-state="done"] .check{ color: #33C2EA; margin-right: 4px; }
@keyframes panelB-node-in{
0%{ opacity:0; transform: translateX(-6px); }
100%{ opacity:1; transform: translateX(0); }
}
.panelB-output-block{
margin-bottom: 14px;
}
.panelB-header{
font-family: 'Geist Mono', monospace;
font-size: 9.5px; letter-spacing: 0.22em; text-transform: uppercase;
color: rgba(244,241,234,0.50);
padding: 2px 0 8px 0;
margin-left: -28px;
display: flex; align-items: center; justify-content: space-between;
}
/* ─── V6 final · B1: capacidades contraíbles (acordeón al llegar email) ─── */
.b1-summary-pill{
margin-top: 10px; margin-left: -28px;
display: inline-flex; align-items: center; gap: 8px;
padding: 8px 14px;
border-radius: 999px;
background: rgba(51,194,234,0.10);
border: 1px solid rgba(51,194,234,0.32);
color: #F4F1EA;
font-size: 12px;
cursor: pointer;
transition: all 200ms var(--ease);
}
.b1-summary-pill:hover{
background: rgba(51,194,234,0.16);
border-color: rgba(51,194,234,0.50);
}
.b1-summary-icon{
display: inline-flex; align-items: center; justify-content: center;
width: 16px; height: 16px;
color: #33C2EA;
font-size: 11px;
}
.b1-summary-count{
display: inline-flex; align-items: center; justify-content: center;
min-width: 22px; height: 18px; padding: 0 6px;
border-radius: 999px;
background: rgba(51,194,234,0.20);
color: #33C2EA;
font-family: 'Geist Mono', monospace; font-size: 11px;
}
.b1-collapse-btn{
margin-left: auto; margin-right: 4px;
display: inline-flex; align-items: center; gap: 4px;
padding: 3px 9px;
border-radius: 999px;
background: rgba(244,241,234,0.04);
border: 1px solid rgba(244,241,234,0.10);
color: rgba(244,241,234,0.55);
font-family: 'Geist Mono', monospace;
font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase;
cursor: pointer;
transition: all 180ms var(--ease);
}
.b1-collapse-btn:hover{
color: #F4F1EA; border-color: rgba(244,241,234,0.25);
}
/* ─── V6 final · B2: timeline COMPACT (used in 3-column mode) ─── */
.panelB-compact{
padding: 6px 0 6px 22px;
}
.panelB-compact::before{ left: 7px; }
.panelB-compact .panelB-node{ padding: 5px 0 5px 2px; }
.panelB-compact .panelB-node .dot{ left: -19px; top: 9px; width: 10px; height: 10px; }
.panelB-compact .panelB-node-text{ font-size: 12px; line-height: 1.4; }
.panelB-compact .panelB-header{ font-size: 9px; margin-left: -22px; }
/* ─── V6 final · 3-column demo stage (B2 when output arrives) ─── */
.demo-stage{
display: flex;
gap: 32px;
margin-bottom: 24px;
}
.demo-stage .demo-chat-col{
transition: width 600ms cubic-bezier(0.65,0,0.35,1);
}
.demo-stage.two-col .demo-chat-col,
.demo-stage.two-col .demo-right-col{
width: calc(50% - 16px);
flex-shrink: 0;
}
/* V3 polish ADDENDUM 13 (2026-05-18) — Demo V7 responsive en mobile.
Stack vertical: WhatsApp arriba (height ajustado), Centro Operativo +
output debajo. Se preserva la lógica/timing del demo; solo cambia layout
CSS. wa-shell height baja a 560px para que entre todo el chat + un
vistazo a los blocks del panelC sin scroll forzado de la página.
panelC: en mobile el "bottom-alignment" de Addendum 11 no aplica
(el stack vertical lo hace innecesario); se desactiva `flex:1` y
`margin-top:auto` para que los blocks queden compactos y el output
aparezca naturalmente después.
V3 polish ADDENDUM 20 (2026-05-18) — Mobile demo impact polish.
Reglas adicionales para reducir la altura del header del demo (que
ocupaba ~444 px en 390px de viewport, dejando el chat fuera del primer
viewport al entrar al anchor #agente). Tabs y fchips ahora horizontal-
scroll con snap, sin generar wrap a 2 filas. timelineControls compacto.
panelC blocks más densos. Padding del wrapper section reducido. */
@media (max-width: 767px){
/* Layout demo */
.demo-stage{
gap: 14px;
flex-direction: column;
}
.demo-stage.two-col .demo-chat-col,
.demo-stage.two-col .demo-right-col{
width: 100%;
}
.wa-shell{
height: min(560px, 64vh) !important;
}
.right-stage{
min-height: 0;
}
.panelC[data-compact="true"]{
flex: 0 1 auto;
min-height: 0;
}
.panelC[data-compact="true"] .panelC-output-slot{
margin-top: 12px;
margin-bottom: 0;
}
/* ─── Header del demo (Addendum 20) ─── */
/* Wrapper section: padding vertical más chico en mobile.
V3 polish ADDENDUM 33 retry (2026-05-19) — Defensa real contra
horizontal overflow durante animaciones translateX (panelC-active-slide-in,
gmEnter, capEnter, etc. entran desde +28px).
`overflow-x: clip` clipea visualmente, pero el browser todavía mide
`body.scrollWidth` viendo las posiciones reales de los descendientes
(verificado en Chrome 412 mobile: peak ~421 vs viewport 412). Para
que `body.scrollWidth <= viewport + 1` (check estricto del brief) se
agrega `contain: paint` que crea un boundary de containment de pintura
Y de layout overflow — las posiciones de los grandchildren NO se
propagan a ancestros para scrollWidth. */
.v7-demo-section{
padding-top: 28px;
padding-bottom: 28px;
overflow-x: clip;
contain: paint;
}
/* Container interno: padding horizontal más chico para ganar ancho efectivo */
.v7-demo-section > div{
padding-left: 16px;
padding-right: 16px;
}
/* Header bloque: margen inferior reducido */
.v7-demo-section > div > header{
margin-bottom: 14px;
}
.v7-demo-section > div > header .kicker{
font-size: 9.5px;
margin-bottom: 8px;
}
/* H1 más chico + line-height compacto para que entre en 2 líneas */
.v7-demo-section > div > header h1{
font-size: 24px !important;
line-height: 1.12 !important;
margin-bottom: 8px !important;
max-width: 100% !important;
}
/* Descripción más compacta — 13.5px, 2-3 líneas */
.v7-demo-section > div > header > p{
font-size: 13.5px !important;
line-height: 1.48 !important;
margin-bottom: 12px !important;
max-width: 100% !important;
}
/* Vertical tabs (Inmobiliaria / Club) — scroll horizontal una fila */
.v7-demo-section > div > header div[role="tablist"]{
flex-wrap: nowrap !important;
overflow-x: auto;
scrollbar-width: none;
margin-bottom: 10px;
gap: 6px !important;
padding-bottom: 2px;
scroll-snap-type: x mandatory;
}
.v7-demo-section > div > header div[role="tablist"]::-webkit-scrollbar{ display: none; }
.v7-demo-section .vtab{
flex-shrink: 0;
scroll-snap-align: start;
padding: 6px 12px !important;
font-size: 12px !important;
}
/* Flow chips — scroll horizontal una fila con snap */
.v7-demo-section .fchip{
flex-shrink: 0;
scroll-snap-align: start;
padding: 5px 10px !important;
font-size: 11.5px !important;
}
/* El parent de fchips (header > div con flex flex-wrap gap-1.5) */
.v7-demo-section header > div.flex.flex-wrap{
flex-wrap: nowrap !important;
overflow-x: auto;
scrollbar-width: none;
padding-bottom: 2px;
scroll-snap-type: x mandatory;
}
.v7-demo-section header > div.flex.flex-wrap::-webkit-scrollbar{ display: none; }
/* Flujo activo meta (último div del header) */
.v7-demo-section header > div:last-child{
margin-top: 8px !important;
font-size: 11.5px !important;
flex-wrap: wrap !important;
gap: 6px !important;
}
/* En 390 ocultar la descripción italic del flow (texto largo) para no
generar 3+ líneas — el nombre del flujo basta. */
.v7-demo-section header > div:last-child > span:nth-child(3),
.v7-demo-section header > div:last-child > span:nth-child(4){
display: none;
}
/* ─── timelineControls (Addendum 20) ─── */
/* Reduce padding vertical para slim controls */
.demo-right-col > div:first-child{
padding: 10px 12px !important;
margin-bottom: 10px !important;
}
/* Botones más compactos */
.demo-right-col > div:first-child .size-10{
width: 36px !important;
height: 36px !important;
}
.demo-right-col > div:first-child .size-9{
width: 32px !important;
height: 32px !important;
}
/* ─── panelC compact (Addendum 20) ─── */
.panelC[data-compact="true"] .panelC-block{
min-height: 38px;
padding: 6px 10px;
}
.panelC[data-compact="true"] .panelC-block-key{
font-size: 9.5px !important;
}
.panelC[data-compact="true"] .panelC-block-val{
font-size: 11.5px !important;
line-height: 1.36 !important;
}
/* V3 polish ADDENDUM 24 (2026-05-18) — Single active capability card mobile.
Antes: 5 blocks (Entendió/Consultó/Detectó/Pidió/Avisó) renderizados
siempre todos visibles en mobile — la pantalla quedaba saturada y el
chat tenía menos protagonismo.
Ahora (mobile-only):
- `[data-state="idle"]` → display:none. Las capacidades aún no
ejecutadas no se muestran (no aportan info en mobile compacto).
- `[data-state="active"]` → card grande, prominente, con glow + label
"AHORA" (CSS content): el foco visual.
- `[data-state="done"]` → chips compactos abajo del active, vía CSS
`order` (active=0, done=1). Solo muestra el `.panelC-block-key`
(etiqueta corta tipo "ENTENDIÓ"); el `.panelC-block-val` (texto
largo) queda oculto. Color tenue para sugerir "ya ejecutado".
Resultado:
- 1 card grande con la capacidad actual.
- 0-4 chips compactos abajo como historial.
- Más espacio para el chat (panelC más bajo → wa-shell crece).
- Cero cambios JSX para la data flow (el motor de la demo decide
qué está "active" y qué "done" — solo cambia la presentación). */
/* V3 polish ADDENDUM 26 (2026-05-18) — Card activa premium.
Antes: la regla desktop default `.panelC-block[data-state="active"]`
definía `::before` (scan animado) y `::after` (border interno
`1px solid rgba(255,255,255,0.10)` + inset shadow `0 0 22px cyan/12`)
que se renderizaban encima del border ya cyan del block, dando
sensación de "doble box".
Ahora en mobile:
- `::before` desactivado (sin scan).
- `::after` reescrita como badge "AHORA" positioned top/right (con
`inset: auto !important` para neutralizar `inset: 0` del desktop).
- Un único border cyan/55 + glass + glow externo sutil.
- Animación slide-in from right cada vez que el block entra a
`data-state="active"` (CSS animation re-fires al cambiar el match
del selector). */
/* V3 polish ADDENDUM 29 (2026-05-18) — Card activa mobile FINAL layout.
Antes (Addendum 26): grid 90px/1fr + badge "AHORA" overlay top-right.
Martín pidió: título arriba a la izquierda, descripción abajo full
width, sin grilla 2-col, sin badge AHORA, sin doble box. */
.panelC .panelC-block[data-state="active"]{
order: 0;
padding: 14px 16px 13px !important;
min-height: 76px !important;
display: flex !important;
flex-direction: column !important;
align-items: stretch !important;
grid-template-columns: none !important;
gap: 8px !important;
position: relative;
transform: none !important;
/* Single border + glass + glow externo */
border: 1px solid rgba(91,213,242,0.55) !important;
background:
linear-gradient(180deg, rgba(51,194,234,0.06), rgba(10,10,15,0.55)) !important;
backdrop-filter: blur(12px) saturate(130%);
-webkit-backdrop-filter: blur(12px) saturate(130%);
box-shadow:
0 18px 40px -22px rgba(91,213,242,0.55),
0 0 24px rgba(51,194,234,0.18) !important;
animation: panelC-active-slide-in 340ms cubic-bezier(0.22,0.61,0.36,1) both !important;
}
/* Mata el scan ::before del desktop default en mobile */
.panelC .panelC-block[data-state="active"]::before{
display: none !important;
content: none !important;
}
/* V3 polish ADDENDUM 33 retry (2026-05-19) — translateX → translateY
en mobile. Antes: slide horizontal 28px (entrando desde la derecha)
generaba body.scrollWidth = vw+9..16 durante la animación, fallando
el check estricto del brief `body.scrollWidth <= vw + 1` aún con
overflow-x: clip / contain: paint en ancestros (Chrome mide
scrollWidth ignorando clipping intermedio). Ahora: slide vertical
(translateY 12px → 0). El efecto sigue siendo un "entering from
outside" pero por arriba/abajo, que es eje no-medido por el check. */
@keyframes panelC-active-slide-in {
0% { opacity: 0; transform: translateY(12px); }
100% { opacity: 1; transform: translateY(0); }
}
/* Addendum 29: badge "AHORA" eliminado en mobile (era ::after). */
.panelC .panelC-block[data-state="active"]::after{
display: none !important;
content: none !important;
}
.panelC .panelC-block[data-state="active"] .panelC-block-key{
font-size: 10.5px !important;
font-weight: 600;
width: 100% !important;
align-self: flex-start !important;
text-align: left !important;
}
.panelC .panelC-block[data-state="active"] .panelC-block-val{
font-size: 13.5px !important;
line-height: 1.42 !important;
color: rgba(244,241,234,0.95) !important;
width: 100% !important;
display: block !important;
}
/* Reduced motion: sin slide-in */
@media (prefers-reduced-motion: reduce){
.panelC .panelC-block[data-state="active"]{
animation: none !important;
}
}
/* Idle: ocultar las capacidades pendientes — en mobile no aportan */
.panelC .panelC-block[data-state="idle"]{
display: none !important;
}
/* V3 polish ADDENDUM 32 (2026-05-19) — Done blocks dentro de .panelC
quedan OCULTOS en mobile. Ahora el historial vive abajo de la barra
de controles vía . La regla de Addendum 30
(que iluminaba los done blocks como logrados) queda heredada en
desktop pero no se ejecuta en mobile porque los nodos están
display:none. */
.panelC .panelC-block[data-state="done"]{
display: none !important;
}
/* Addendum 29: header semántico del panelC eliminado en mobile.
Antes (Addendum 26): pseudo .panelC::before con tamaño reducido.
Ahora: oculto, el título de la card activa ya comunica la capacidad. */
.panelC::before{
display: none !important;
content: none !important;
}
/* Más espacio al chat: ahora el panelC mobile es más corto, podemos
darle al wa-shell un poco más de altura (480 px o 60vh, lo menor). */
.wa-shell{
height: min(480px, 60vh) !important;
}
/* ─── V3 ADDENDUM 21 → 24 (2026-05-18) — Chat más espacio.
Inicialmente 460px/56vh (Addendum 21). Addendum 24 sube a 500/62vh
porque el panelC mobile pasa a single-card + history compacto,
liberando espacio vertical para el chat. */
.wa-shell{
height: min(500px, 62vh) !important;
}
/* V3 polish ADDENDUM 23 (2026-05-18) — chat blur fix.
Antes (Addendum 22): pseudo `.wa-bg::before` sticky top con gradient
de 36px que generaba una línea/blur visible cuando los mensajes
scrollean hacia arriba. Martín lo reportó como "se ve mal logrado".
Ahora: pseudo eliminado. El chat scrollea limpio con corte natural
en el borde del wa-shell (`overflow: hidden` propio del shell).
Mantenemos solo `position: relative` por si otros pseudos lo necesitan. */
.demo-stage .wa-bg{
position: relative;
}
/* V3 polish ADDENDUM 23 (2026-05-18) — Composer WhatsApp oculto en mobile.
La barra inferior (emoji 😊 + attach 📎 + input "escribí un mensaje" +
mic 🎤) no aporta narrativa al demo y consume ~52 px que ahora se
liberan para chat + capacidades + salida. Solo mobile — desktop sigue
mostrando el composer realista. */
.demo-stage .wa-input{
display: none !important;
}
/* V3 polish ADDENDUM 23 (2026-05-18) — Email/salida tangible polish mobile.
Grid de fields con label column más compacta (96 px vs 150 px desktop)
+ paddings reducidos + CTA inline más chiquito para evitar overflow. */
.gm-fields .row{
grid-template-columns: 96px 1fr !important;
gap: 8px !important;
font-size: 11.5px !important;
}
.gm-fields .k{
font-size: 9.5px !important;
letter-spacing: 0.02em !important;
}
.gm-cta-inline{
padding: 6px 10px !important;
font-size: 11px !important;
gap: 4px !important;
}
.gm-subject{
font-size: 14.5px !important;
line-height: 1.25 !important;
}
.gm-subject-row{
flex-wrap: wrap !important;
gap: 8px !important;
}
/* V3 polish ADDENDUM 34 (2026-05-19) — Mobile email header redo.
Las reglas anteriores aqui se rompian en el parser CSS (probablemente
por una combinacion comment + selectores compound en el bloque). El
sintoma era remitente comprimido a 18px de ancho cuando habia 2+
chips largos (NUEVA INSCRIPCION + LEGAJO COMPLETO, RE AVISO +
FRUSTRACION DETECTADA, etc.).
Solucion: bloque limpio, comment ASCII puro, selectores simples,
sin compound classes problematicas. */
.gm-shell .gm-header { display: block !important; padding: 14px 18px 10px !important; }
.gm-shell .gm-header > div:first-child { display: none !important; }
.gm-shell .gm-header > div:nth-child(2) { margin-bottom: 8px !important; width: 100% !important; }
.gm-shell .gm-header > div:nth-child(2) > div:first-child { font-size: 13px !important; line-height: 1.25 !important; white-space: normal !important; word-break: normal !important; overflow-wrap: anywhere !important; }
.gm-shell .gm-header > div:nth-child(2) > div:nth-child(2) { display: none !important; }
.gm-shell .gm-header > div:nth-child(3) { display: flex !important; flex-wrap: wrap !important; justify-content: flex-start !important; gap: 6px !important; width: 100% !important; }
.gm-shell .gm-chip { padding: 3px 8px !important; font-size: 9.5px !important; letter-spacing: 0.02em !important; max-width: 100% !important; }
/* FollowUp card también — mismas reglas de label compactas */
.followup-field{
grid-template-columns: 88px 1fr !important;
}
.followup-field .k{
font-size: 9.5px !important;
}
/* V3 polish ADDENDUM 32 (2026-05-19) — Reorder mobile right-col:
1) panelC (card activa + salida tangible)
2) timelineControls (stop/play, reset, anterior, siguiente, velocidad)
3) MobileMilestoneHistory (historial de hitos LOGRADOS debajo)
Cambio respecto a Addendum 20: antes el historial vivía dentro de
.panelC como done blocks arriba de los controles. Ahora ese historial
se renderiza en debajo de timelineControls
para que el flujo visual sea: chat → caps activa/output → controles
→ historial logrado. */
.demo-right-col{
display: flex;
flex-direction: column;
}
.demo-right-col > div:first-child{
order: 2;
margin-top: 12px !important;
margin-bottom: 0 !important;
}
.demo-right-col > .panelC{
order: 1;
}
.demo-right-col > .mobile-milestone-history{
order: 3;
margin-top: 12px;
}
/* Real-device mobile polish (2026-05-19): controles limpios.
En mobile se eliminan velocidad + scrubber; quedan solo play,
restart, caso anterior y caso siguiente, con tamaño uniforme. */
.v7-timeline-controls{
padding: 12px !important;
border-radius: 18px !important;
background: rgba(10,10,15,0.58) !important;
border-color: rgba(91,213,242,0.18) !important;
box-shadow: 0 18px 44px -30px rgba(51,194,234,0.55) !important;
}
.v7-control-row{
display: grid !important;
grid-template-columns: repeat(4, 1fr);
gap: 10px !important;
margin-bottom: 0 !important;
align-items: center;
}
.v7-control-btn,
.v7-case-nav{
width: 48px !important;
height: 48px !important;
min-width: 48px !important;
min-height: 48px !important;
margin: 0 auto !important;
border-color: rgba(91,213,242,0.32) !important;
color: rgba(91,213,242,0.92) !important;
background: rgba(10,10,15,0.62) !important;
box-shadow: 0 0 0 1px rgba(91,213,242,0.05) inset;
}
.v7-case-nav{
border-color: rgba(91,213,242,0.42) !important;
background: rgba(10,10,15,0.62) !important;
box-shadow:
0 0 0 1px rgba(91,213,242,0.06) inset,
0 10px 22px -18px rgba(91,213,242,0.70) !important;
}
.v7-control-primary{
background: rgba(51,194,234,0.15) !important;
border-color: rgba(91,213,242,0.55) !important;
box-shadow: 0 0 22px -12px rgba(91,213,242,0.95) !important;
}
.v7-control-btn > span,
.v7-case-nav > span{
font-size: 18px !important;
line-height: 1 !important;
display: inline-flex;
align-items: center;
justify-content: center;
transform: none !important;
}
.v7-speed-control,
.v7-scrubber-wrap{
display: none !important;
}
/* Addendum 29: el header semántico del panelC compact se elimina
en mobile. El protagonismo lo lleva la card activa (título arriba +
descripción full width) y el chip-row del historial. */
.panelC[data-compact="true"]::before{
display: none !important;
content: none !important;
}
.panelC[data-compact="true"] .panelC-block[data-state="active"]{
box-shadow:
inset 0 0 0 1px rgba(91,213,242,0.55),
0 0 0 1px rgba(91,213,242,0.40),
0 14px 32px -14px rgba(91,213,242,0.55),
0 0 22px rgba(51,194,234,0.32);
background: linear-gradient(180deg, rgba(51,194,234,0.08), rgba(10,10,15,0.92));
}
/* Addendum 30: el override compact que bajaba opacity a 0.62 queda
neutralizado; la regla base de Addendum 30 maneja la presentación. */
.panelC[data-compact="true"] .panelC-block[data-state="done"]{
opacity: 1;
}
/* ─── Mobile narrative simplification (Addendum 21) ───
Secciones marcadas como `.mobile-optional` quedan ocultas por
defecto en mobile. Se revelan cuando reciben `.is-revealed`
(toggled por el hash listener en app.jsx). */
.mobile-optional:not(.is-revealed){
display: none !important;
}
}
.demo-stage.three-col .demo-chat-col{
width: calc(50% - 66px);
flex-shrink: 0;
}
.demo-stage.three-col .demo-timeline-col{
width: 280px;
flex-shrink: 0;
animation: thirdColFadeIn 520ms var(--ease) both;
}
.demo-stage.three-col .demo-email-col{
flex: 1; min-width: 0;
animation: thirdColEnter 640ms var(--ease) both;
animation-delay: 80ms;
}
@keyframes thirdColFadeIn{
0%{ opacity: 0; transform: translateX(-8px); }
100%{ opacity: 1; transform: translateX(0); }
}
@keyframes thirdColEnter{
0%{ opacity: 0; transform: translateX(24px); }
100%{ opacity: 1; transform: translateX(0); }
}
/* ═══════════════════════════════════════════════════════════════
V6 INLINE · Skills chips dentro del chat WhatsApp
═══════════════════════════════════════════════════════════════ */
.chat-skill-row{
display: flex; flex-wrap: wrap; gap: 4px;
padding: 0 12px;
margin-bottom: 4px;
animation: chip-row-in 320ms var(--ease) both;
}
.chat-skill-row.right{ justify-content: flex-end; }
@keyframes chip-row-in{
0%{ opacity: 0; transform: translateY(-2px); }
100%{ opacity: 1; transform: translateY(0); }
}
.chat-skill-chip{
display: inline-flex; align-items: center; gap: 5px;
padding: 3px 9px;
border-radius: 999px;
background: rgba(51,194,234,0.10);
border: 1px solid rgba(51,194,234,0.28);
color: rgba(51,194,234,0.95);
font-size: 10.5px;
font-family: 'Geist Mono', monospace;
letter-spacing: 0.04em;
line-height: 1.2;
white-space: nowrap;
}
.chat-skill-chip.violet{
background: rgba(158,123,255,0.10);
border-color: rgba(158,123,255,0.32);
color: rgba(158,123,255,0.95);
}
.chat-skill-chip .ic{
color: inherit;
font-size: 9px;
opacity: 0.85;
}
/* ═══════════════════════════════════════════════════════════════
V7 · 3 ESTILOS DE BURBUJAS EXPLICATIVAS DENTRO DE WHATSAPP
Compacto · Nota · Neón
═══════════════════════════════════════════════════════════════ */
/* --- Estilo 1: COMPACTO (sobrio, default) --- */
.chat-skill-row.compact .chat-skill-chip{
font-size: 11px;
padding: 3px 10px;
border-radius: 999px;
background: rgba(51,194,234,0.10);
border: 1px solid rgba(51,194,234,0.34);
color: rgba(17,27,33,0.85);
font-family: 'Geist', sans-serif;
letter-spacing: 0;
text-transform: none;
box-shadow: none;
}
.chat-skill-row.compact .chat-skill-chip.violet{
background: rgba(158,123,255,0.10);
border-color: rgba(158,123,255,0.34);
color: rgba(17,27,33,0.85);
}
.chat-skill-row.compact .chat-skill-chip .ic{
color: #33C2EA;
font-size: 10px;
font-weight: 600;
}
.chat-skill-row.compact .chat-skill-chip.violet .ic{ color: #9E7BFF; }
/* --- Estilo 2: NOTA (narrativa, tipo papel pegado) --- */
.chat-skill-row.note{
flex-direction: column;
align-items: flex-start;
gap: 4px;
}
.chat-skill-row.note.right{ align-items: flex-end; }
.chat-skill-row.note .chat-skill-chip{
display: inline-flex; align-items: baseline; gap: 6px;
padding: 5px 11px 5px 12px;
border-radius: 6px;
border: none;
border-left: 3px solid #33C2EA;
background: rgba(255,255,255,0.92);
color: #1F2937;
font-size: 11.5px;
font-family: 'Geist', sans-serif;
letter-spacing: 0;
text-transform: none;
max-width: 80%;
line-height: 1.4;
box-shadow: 0 1px 1px rgba(0,0,0,0.06);
white-space: normal;
}
.chat-skill-row.note .chat-skill-chip.violet{
border-left-color: #9E7BFF;
}
.chat-skill-row.note .chat-skill-chip .ic{
font-family: 'Geist Mono', monospace;
font-size: 9.5px;
letter-spacing: 0.10em;
text-transform: uppercase;
color: #33C2EA;
font-weight: 600;
flex-shrink: 0;
}
.chat-skill-row.note .chat-skill-chip.violet .ic{ color: #9E7BFF; }
/* --- Estilo 3: NEÓN (oscuro, marca GalaxIA, llamativo) --- */
.chat-skill-row.neon .chat-skill-chip{
padding: 4px 11px;
border-radius: 999px;
background: linear-gradient(135deg, rgba(51,194,234,0.20), rgba(158,123,255,0.16));
border: 1px solid rgba(158,123,255,0.40);
color: #EAF7FF;
font-size: 10.5px;
font-family: 'Geist Mono', monospace;
letter-spacing: 0.06em;
text-transform: lowercase;
box-shadow:
0 0 0 1px rgba(51,194,234,0.10),
0 6px 18px -10px rgba(51,194,234,0.55);
}
.chat-skill-row.neon .chat-skill-chip.violet{
background: linear-gradient(135deg, rgba(158,123,255,0.24), rgba(51,194,234,0.14));
border-color: rgba(158,123,255,0.50);
}
.chat-skill-row.neon .chat-skill-chip .ic{
color: rgba(255,255,255,0.95);
font-size: 10px;
text-transform: none;
}
.chat-skill-row.neon .chat-skill-chip.violet .ic{ color: rgba(255,255,255,0.95); }
/* --- Selector de estilo de burbuja (V7) --- */
.bubble-style-selector{
display: inline-flex; align-items: center; gap: 6px;
padding: 4px 10px;
border-radius: 999px;
background: rgba(244,241,234,0.04);
border: 1px solid rgba(244,241,234,0.10);
}
.bubble-style-label{
font-family: 'Geist Mono', monospace;
font-size: 9.5px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: rgba(244,241,234,0.42);
margin-right: 4px;
}
.bubble-style-chip{
display: inline-flex; align-items: center;
padding: 3px 10px;
border-radius: 999px;
background: transparent;
border: 1px solid transparent;
color: rgba(244,241,234,0.55);
font-size: 11px;
cursor: pointer;
transition: all 200ms var(--ease);
}
.bubble-style-chip:hover{ color: #F4F1EA; }
.bubble-style-chip[data-active="true"]{
background: rgba(51,194,234,0.16);
border-color: rgba(51,194,234,0.40);
color: #F4F1EA;
}
/* --- Centro Operativo (Panel C) · V7 con whatItDid + potential abajo --- */
.panelC-summary{
margin-top: 12px;
padding-top: 12px;
border-top: 1px solid rgba(244,241,234,0.08);
}
.panelC-summary-block{
margin-bottom: 10px;
}
.panelC-summary-block:last-child{ margin-bottom: 0; }
.panelC-summary-label{
font-family: 'Geist Mono', monospace;
font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase;
color: rgba(51,194,234,0.85);
margin-bottom: 6px;
display: inline-flex; align-items: center; gap: 7px;
}
.panelC-summary-label.alt{ color: rgba(158,123,255,0.85); }
.panelC-summary-label .ic{
display: inline-flex; align-items: center; justify-content: center;
width: 16px; height: 16px; border-radius: 4px;
background: rgba(51,194,234,0.14);
color: #33C2EA;
font-size: 9px;
}
.panelC-summary-label.alt .ic{
background: rgba(158,123,255,0.14); color: #9E7BFF;
}
.panelC-summary-text{
font-size: 13.5px; line-height: 1.55;
color: rgba(244,241,234,0.90);
}
/* ═══════════════════════════════════════════════════════════════
V6 INLINE · Milestones band (hitos unificados con el scrubber)
═══════════════════════════════════════════════════════════════ */
.milestones-band{
display: flex; align-items: center; gap: 14px;
flex-wrap: wrap;
padding: 10px 14px;
margin-bottom: 14px;
background: linear-gradient(180deg, rgba(244,241,234,0.025), rgba(244,241,234,0.005));
border: 1px solid rgba(244,241,234,0.08);
border-radius: 10px;
}
.milestones-band-label{
font-family: 'Geist Mono', monospace;
font-size: 9.5px; letter-spacing: 0.22em; text-transform: uppercase;
color: rgba(244,241,234,0.40);
margin-right: 6px;
}
.milestone{
display: inline-flex; align-items: center; gap: 7px;
font-family: 'Geist Mono', monospace;
font-size: 11.5px;
letter-spacing: 0.02em;
color: rgba(244,241,234,0.42);
transition: color 280ms var(--ease);
}
.milestone[data-state="done"]{ color: rgba(244,241,234,0.85); }
.milestone[data-state="active"]{ color: #33C2EA; font-weight: 500; }
.milestone-dot{
display: inline-flex; align-items: center; justify-content: center;
width: 16px; height: 16px; border-radius: 50%;
background: rgba(244,241,234,0.03);
border: 1px solid rgba(244,241,234,0.15);
color: rgba(244,241,234,0.32);
font-size: 9.5px;
transition: all 280ms var(--ease);
}
.milestone[data-state="done"] .milestone-dot{
background: rgba(51,194,234,0.18);
border-color: rgba(51,194,234,0.55);
color: #33C2EA;
}
.milestone[data-state="active"] .milestone-dot{
background: #33C2EA; border-color: #33C2EA; color: #0A0A0F;
box-shadow: 0 0 0 4px rgba(51,194,234,0.18);
animation: milestone-pulse 1.4s ease-in-out infinite;
}
@keyframes milestone-pulse{
0%, 100%{ box-shadow: 0 0 0 4px rgba(51,194,234,0.18); }
50% { box-shadow: 0 0 0 7px rgba(51,194,234,0.06); }
}
/* ═══════════════════════════════════════════════════════════════
V6 INLINE · Panel A nuevo (resultado + resumen + potencial)
═══════════════════════════════════════════════════════════════ */
.pa-result-slot{ margin-bottom: 14px; }
.pa-summary-block{
background: linear-gradient(180deg, rgba(244,241,234,0.03), rgba(244,241,234,0.005));
border: 1px solid rgba(244,241,234,0.10);
border-radius: 12px;
padding: 14px 16px;
margin-bottom: 10px;
animation: pa-block-in 460ms var(--ease) both;
}
@keyframes pa-block-in{
0%{ opacity: 0; transform: translateY(6px); }
100%{ opacity: 1; transform: translateY(0); }
}
.pa-summary-label{
font-family: 'Geist Mono', monospace;
font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase;
color: rgba(51,194,234,0.85);
margin-bottom: 8px;
display: inline-flex; align-items: center; gap: 7px;
}
.pa-summary-label.alt{ color: rgba(158,123,255,0.85); }
.pa-summary-label .ic{
display: inline-flex; align-items: center; justify-content: center;
width: 18px; height: 18px; border-radius: 5px;
background: rgba(51,194,234,0.12);
color: #33C2EA;
font-size: 10px;
}
.pa-summary-label.alt .ic{
background: rgba(158,123,255,0.12); color: #9E7BFF;
}
.pa-summary-text{
font-size: 14px; line-height: 1.55;
color: rgba(244,241,234,0.92);
}
.pa-live-placeholder{
background:
radial-gradient(80% 60% at 50% 30%, rgba(51,194,234,0.06), transparent 60%),
linear-gradient(180deg, rgba(244,241,234,0.025), rgba(244,241,234,0.005));
border: 1px dashed rgba(244,241,234,0.14);
border-radius: 14px;
padding: 28px 22px;
text-align: center;
color: rgba(244,241,234,0.55);
font-size: 13px;
line-height: 1.5;
margin-bottom: 14px;
}
.pa-live-placeholder .ic{
display: block;
font-size: 28px;
color: rgba(51,194,234,0.50);
margin-bottom: 10px;
}
/* ─── V6 final · B3: Timeline horizontal full-width ─── */
.b3-timeline-wrap{
margin-bottom: 24px;
padding: 18px 24px 16px;
background: linear-gradient(180deg, rgba(244,241,234,0.025), rgba(244,241,234,0.005));
border: 1px solid rgba(244,241,234,0.10);
border-radius: 14px;
animation: b3-wrap-in 540ms var(--ease) both;
}
@keyframes b3-wrap-in{
0%{ opacity: 0; transform: translateY(-6px); }
100%{ opacity: 1; transform: translateY(0); }
}
.b3-timeline-header{
display: flex; align-items: center; justify-content: space-between;
font-family: 'Geist Mono', monospace;
font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase;
color: rgba(244,241,234,0.50);
margin-bottom: 14px;
}
.b3-timeline-header .live{
display: inline-flex; align-items: center; gap: 7px;
color: rgba(51,194,234,0.95);
}
.b3-timeline-header .live .pulse{
width: 6px; height: 6px; border-radius: 50%;
background: #33C2EA;
box-shadow: 0 0 0 3px rgba(51,194,234,0.20);
animation: live-dot-pulse 1.4s ease-in-out infinite;
}
.b3-timeline{
display: flex; align-items: flex-start;
width: 100%;
padding: 4px 12px;
}
.b3-node{
flex: 1; min-width: 0;
display: flex; flex-direction: column; align-items: center; gap: 10px;
position: relative;
}
.b3-node:not(:first-child)::before{
content: ""; position: absolute;
top: 15px; /* center of dot 32px (16px - 1px border) */
left: calc(-50% + 18px);
right: calc(50% + 18px);
height: 2px;
background: rgba(244,241,234,0.10);
transition: background 320ms var(--ease);
z-index: 0;
}
.b3-node[data-prev-done="true"]::before{
background: linear-gradient(90deg, rgba(51,194,234,0.35), rgba(51,194,234,0.60));
}
.b3-dot{
width: 32px; height: 32px; border-radius: 50%;
background: rgba(244,241,234,0.04);
border: 2px solid rgba(244,241,234,0.18);
display: flex; align-items: center; justify-content: center;
font-size: 14px;
color: rgba(244,241,234,0.50);
transition: all 320ms var(--ease);
z-index: 1;
position: relative;
}
.b3-node[data-state="done"] .b3-dot{
background: rgba(51,194,234,0.18);
border-color: rgba(51,194,234,0.60);
color: #33C2EA;
}
.b3-node[data-state="active"] .b3-dot{
background: #33C2EA;
border-color: #33C2EA;
color: #0A0A0F;
box-shadow: 0 0 0 5px rgba(51,194,234,0.18);
animation: b3-dot-pulse 1.4s ease-in-out infinite;
}
.b3-node[data-state="email_notice"] .b3-dot{
background: linear-gradient(135deg, #33C2EA, #9E7BFF);
border-color: rgba(51,194,234,0.55);
color: #FFFFFF;
box-shadow: 0 0 0 6px rgba(51,194,234,0.25);
animation: b3-dot-pulse 1.4s ease-in-out infinite;
}
.b3-node[data-state="pending"] .b3-dot{
background: rgba(244,241,234,0.02);
border-color: rgba(244,241,234,0.10);
color: rgba(244,241,234,0.28);
}
@keyframes b3-dot-pulse{
0%, 100%{ box-shadow: 0 0 0 5px rgba(51,194,234,0.18); }
50% { box-shadow: 0 0 0 9px rgba(51,194,234,0.05); }
}
.b3-label{
font-size: 11px;
font-family: 'Geist Mono', monospace;
letter-spacing: 0.06em; text-transform: uppercase;
text-align: center;
color: rgba(244,241,234,0.45);
transition: color 280ms var(--ease);
line-height: 1.3;
}
.b3-node[data-state="done"] .b3-label{ color: rgba(244,241,234,0.78); }
.b3-node[data-state="active"] .b3-label{ color: #33C2EA; font-weight: 500; }
.b3-node[data-state="email_notice"] .b3-label{ color: #F4F1EA; font-weight: 500; }
/* ─── B3 · Live card (columna derecha cuando no hay output todavía) ─── */
.b3-live-card{
background:
radial-gradient(80% 60% at 50% 30%, rgba(51,194,234,0.10), transparent 60%),
linear-gradient(180deg, rgba(244,241,234,0.03), rgba(244,241,234,0.01));
border: 1px solid rgba(244,241,234,0.10);
border-radius: 14px;
padding: 28px 22px;
display: flex; flex-direction: column; align-items: center;
gap: 14px;
min-height: 320px;
justify-content: center;
}
.b3-live-card-label{
font-family: 'Geist Mono', monospace;
font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase;
color: rgba(51,194,234,0.85);
display: inline-flex; align-items: center; gap: 7px;
}
.b3-live-card-label .pulse{
width: 6px; height: 6px; border-radius: 50%;
background: #33C2EA;
box-shadow: 0 0 0 3px rgba(51,194,234,0.20);
animation: live-dot-pulse 1.4s ease-in-out infinite;
}
.b3-live-card-icon{
width: 86px; height: 86px; border-radius: 24px;
background:
radial-gradient(60% 60% at 50% 40%, rgba(51,194,234,0.20), transparent 70%),
linear-gradient(135deg, rgba(51,194,234,0.18), rgba(158,123,255,0.10));
border: 1px solid rgba(51,194,234,0.32);
color: #F4F1EA;
display: flex; align-items: center; justify-content: center;
font-size: 36px;
box-shadow: 0 14px 36px -12px rgba(51,194,234,0.40);
transition: all 500ms var(--ease);
}
.b3-live-card-action{
text-align: center;
font-size: 14.5px; line-height: 1.5;
color: #F4F1EA;
max-width: 340px;
animation: b3-action-in 380ms var(--ease) both;
}
@keyframes b3-action-in{
0%{ opacity: 0; transform: translateY(4px); }
100%{ opacity: 1; transform: translateY(0); }
}
/* ─── B-subselector (B1 / B2 chips visible when B is active) ─── */
.b-subselector{
display: inline-flex; align-items: center; gap: 6px;
margin-left: 10px;
padding-left: 12px;
border-left: 1px solid rgba(244,241,234,0.10);
}
.b-subselector-label{
font-family: 'Geist Mono', monospace;
font-size: 9.5px; letter-spacing: 0.18em; text-transform: uppercase;
color: rgba(244,241,234,0.45);
margin-right: 4px;
}
.b-sub-chip{
display: inline-flex; align-items: center; gap: 6px;
padding: 4px 10px;
border-radius: 999px;
background: transparent;
border: 1px solid rgba(244,241,234,0.10);
color: rgba(244,241,234,0.55);
font-size: 11.5px;
cursor: pointer;
transition: all 200ms var(--ease);
}
.b-sub-chip:hover{ color: #F4F1EA; border-color: rgba(244,241,234,0.25); }
.b-sub-chip[data-active="true"]{
background: rgba(51,194,234,0.14);
border-color: rgba(51,194,234,0.45);
color: #F4F1EA;
}
.b-sub-chip .num{
font-family: 'Geist Mono', monospace; font-size: 10px;
color: rgba(244,241,234,0.50);
}
.b-sub-chip[data-active="true"] .num{ color: #33C2EA; }
/* ═══════════════════════════════════════════════════════════════
OPTION C · Centro operativo (Entendió · Consultó · Decidió · Generó)
═══════════════════════════════════════════════════════════════ */
.panelC{ display: flex; flex-direction: column; gap: 10px; }
/* Modo compacto: se activa con data-compact="true" cuando el flow llega a
email / seguimiento / aviso. Reduce ~30-40% el alto de cada slot para
liberar espacio al resultado (Gmail panel · FollowUp card · Notice card)
sin sacrificar legibilidad ni la animación del slot activo. */
.panelC[data-compact="true"]{ gap: 6px; }
/* V3 polish ADDENDUM 11 (2026-05-18): cuando el flow llega a su salida tangible
(email / seguimiento / aviso), el panelC se estira para ocupar toda la altura
disponible dentro de la columna derecha. El output-slot usa margin-top:auto
para empujarse hasta el bottom — su borde inferior queda alineado con el
bottom del frame WhatsApp (height: 820px en wa-shell). Tolerancia ~8-16 px
gracias al gap propio del panelC. min-height:0 evita overflow del flex item. */
.panelC[data-compact="true"]{
flex: 1 1 auto;
min-height: 0;
}
.panelC[data-compact="true"] .panelC-block{
min-height: 42px;
padding: 7px 11px;
gap: 10px;
grid-template-columns: 96px 1fr;
flex: 0 0 auto;
}
.panelC[data-compact="true"] .panelC-block-key{ font-size: 10px; }
.panelC[data-compact="true"] .panelC-block-key .ic{ font-size: 11px; }
.panelC[data-compact="true"] .panelC-block-val{ font-size: 12px; line-height: 1.38; }
/* Empuja la salida hasta el bottom del panelC (que ahora flex-fillea).
margin-bottom:12px deja un breathing room visual de ~12px entre el borde
inferior de la tarjeta y el borde inferior del frame WhatsApp — dentro
del rango 8-16 px que pidió el brief de Addendum 11. */
.panelC[data-compact="true"] .panelC-output-slot{
margin-top: auto;
margin-bottom: 12px;
flex: 0 0 auto;
}
.panelC-header{
display: flex; align-items: center; gap: 10px;
padding: 0 0 10px 0;
border-bottom: 1px solid rgba(244,241,234,0.10);
}
.panelC-header-dot{
width: 8px; height: 8px; border-radius: 50%;
background: #33C2EA;
box-shadow: 0 0 0 3px rgba(51,194,234,0.20);
animation: live-dot-pulse 1.4s ease-in-out infinite;
}
.panelC-header-label{
font-family: 'Geist Mono', monospace;
font-size: 10.5px; letter-spacing: 0.22em; text-transform: uppercase;
color: rgba(244,241,234,0.80);
}
.panelC-header-meta{
margin-left: auto;
font-family: 'Geist Mono', monospace;
font-size: 10px; letter-spacing: 0.10em; text-transform: uppercase;
color: rgba(244,241,234,0.42);
}
.panelC-block{
position: relative;
display: grid; grid-template-columns: 118px 1fr;
gap: 15px; align-items: center;
min-height: 62px;
padding: 12px 14px;
border: 1px solid rgba(244,241,234,0.08);
border-radius: 10px;
background: rgba(244,241,234,0.02);
overflow: hidden;
transition: border-color 320ms var(--ease), background 320ms var(--ease), box-shadow 320ms var(--ease), transform 320ms var(--ease);
}
.panelC-block[data-state="active"]{
border-color: rgba(51,194,234,0.88);
background:
radial-gradient(120% 160% at 18% 50%, rgba(51,194,234,0.24), rgba(51,194,234,0.06) 44%, rgba(158,123,255,0.05) 72%, rgba(244,241,234,0.025)),
linear-gradient(90deg, rgba(51,194,234,0.12), rgba(158,123,255,0.08));
box-shadow:
0 0 0 1px rgba(51,194,234,0.22),
0 0 38px -14px rgba(51,194,234,0.95),
0 18px 42px -30px rgba(158,123,255,0.80),
inset 0 1px 0 rgba(244,241,234,0.10);
transform: translateY(-1px);
animation: panelC-active-breathe 2.4s ease-in-out infinite;
}
.panelC-block[data-state="active"]::before{
content:"";
position:absolute; inset:-1px;
background:
linear-gradient(115deg, transparent 0%, transparent 33%, rgba(255,255,255,0.20) 45%, rgba(51,194,234,0.20) 50%, transparent 64%, transparent 100%);
transform: translateX(-120%);
animation: panelC-scan 2.8s ease-in-out infinite;
pointer-events:none;
}
.panelC-block[data-state="active"]::after{
content:"";
position:absolute; inset:0;
border-radius: inherit;
border: 1px solid rgba(255,255,255,0.10);
box-shadow: inset 0 0 22px rgba(51,194,234,0.12);
pointer-events:none;
}
@keyframes panelC-active-breathe{
0%,100%{ box-shadow:
0 0 0 1px rgba(51,194,234,0.20),
0 0 30px -16px rgba(51,194,234,0.80),
0 18px 42px -32px rgba(158,123,255,0.65),
inset 0 1px 0 rgba(244,241,234,0.08); }
50%{ box-shadow:
0 0 0 1px rgba(51,194,234,0.32),
0 0 46px -12px rgba(51,194,234,1),
0 20px 48px -28px rgba(158,123,255,0.88),
inset 0 1px 0 rgba(244,241,234,0.14); }
}
@keyframes panelC-scan{
0%,18%{ transform: translateX(-120%); opacity: 0; }
35%{ opacity: .95; }
62%,100%{ transform: translateX(120%); opacity: 0; }
}
.panelC-block[data-state="done"]{
border-color: rgba(244,241,234,0.10);
}
.panelC-block-key{
display: flex; align-items: center; gap: 8px;
font-family: 'Geist Mono', monospace;
font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
color: rgba(244,241,234,0.55);
}
.panelC-block[data-state="active"] .panelC-block-key{ color: #33C2EA; }
.panelC-block[data-state="done"] .panelC-block-key{ color: rgba(244,241,234,0.45); }
.panelC-block-key .ic{
width: 22px; height: 22px; border-radius: 6px;
background: rgba(244,241,234,0.08);
display: flex; align-items: center; justify-content: center;
font-size: 12px;
}
.panelC-block[data-state="active"] .ic{
background: linear-gradient(135deg, rgba(51,194,234,0.30), rgba(158,123,255,0.24));
color: #EAFBFF;
border: 1px solid rgba(51,194,234,0.45);
box-shadow: 0 0 18px -6px rgba(51,194,234,0.95);
}
.panelC-block[data-state="done"] .ic{ opacity: 0.55; }
.panelC-block-val{
display: flex;
align-items: center;
min-height: 36px;
font-size: 14px; line-height: 1.38;
color: rgba(244,241,234,0.90);
}
.panelC-block[data-state="active"] .panelC-block-val{
color: rgba(255,255,255,0.98);
text-shadow: 0 0 18px rgba(51,194,234,0.28);
}
.panelC-block-val.empty{
color: rgba(244,241,234,0.32);
font-style: italic;
}
.panelC-output-slot{
margin-top: 4px;
}
/* ═══════════════════════════════════════════════════════════════
OPTION D · Bento 2×3 mapa de capacidades
═══════════════════════════════════════════════════════════════ */
.panelD{ display: flex; flex-direction: column; gap: 12px; }
.panelD-grid{
display: grid; grid-template-columns: repeat(3, 1fr);
gap: 10px;
}
.panelD-cell{
position: relative;
padding: 12px 12px 10px;
border-radius: 10px;
border: 1px solid rgba(244,241,234,0.08);
background: rgba(244,241,234,0.02);
min-height: 92px;
display: flex; flex-direction: column; justify-content: space-between;
transition: all 320ms var(--ease);
overflow: hidden;
}
.panelD-cell[data-state="dim"]{ opacity: 0.45; }
.panelD-cell[data-state="touched"]{
border-color: rgba(51,194,234,0.30);
background: rgba(51,194,234,0.04);
}
.panelD-cell[data-state="active"]{
border-color: rgba(51,194,234,0.55);
background: linear-gradient(135deg, rgba(51,194,234,0.10), rgba(158,123,255,0.05));
box-shadow:
0 0 0 1px rgba(51,194,234,0.20),
0 6px 18px -6px rgba(51,194,234,0.35);
}
.panelD-cell[data-state="active"]::after{
content: ""; position: absolute; inset: 0;
background: radial-gradient(60% 80% at 50% 0%, rgba(51,194,234,0.10), transparent 70%);
pointer-events: none;
}
.panelD-cell-top{
display: flex; align-items: center; gap: 8px;
}
.panelD-cell-icon{
width: 28px; height: 28px; border-radius: 7px;
background: rgba(244,241,234,0.06);
border: 1px solid rgba(244,241,234,0.10);
display: flex; align-items: center; justify-content: center;
font-size: 14px;
color: rgba(244,241,234,0.65);
transition: all 280ms var(--ease);
}
.panelD-cell[data-state="touched"] .panelD-cell-icon{
background: rgba(51,194,234,0.10); color: #33C2EA; border-color: rgba(51,194,234,0.25);
}
.panelD-cell[data-state="active"] .panelD-cell-icon{
background: rgba(51,194,234,0.22); color: #33C2EA; border-color: rgba(51,194,234,0.45);
box-shadow: 0 0 0 3px rgba(51,194,234,0.10);
}
.panelD-cell-title{
font-size: 12.5px; color: #F4F1EA; font-weight: 500;
}
.panelD-cell-status{
margin-top: 8px;
font-family: 'Geist Mono', monospace;
font-size: 9.5px; letter-spacing: 0.16em; text-transform: uppercase;
color: rgba(244,241,234,0.42);
}
.panelD-cell[data-state="touched"] .panelD-cell-status,
.panelD-cell[data-state="active"] .panelD-cell-status{
color: rgba(51,194,234,0.85);
}
.panelD-cell-status .dot{
display: inline-block; width: 5px; height: 5px; border-radius: 50%;
background: rgba(244,241,234,0.30);
margin-right: 4px; vertical-align: middle;
}
.panelD-cell[data-state="touched"] .panelD-cell-status .dot{ background: #33C2EA; }
.panelD-cell[data-state="active"] .panelD-cell-status .dot{
background: #33C2EA;
box-shadow: 0 0 0 3px rgba(51,194,234,0.20);
}
@media (prefers-reduced-motion: reduce){
.cap-card, .tick-pill, .gm-shell, .wa-typing span, .email-notice, .notice-icon, .ticks-block, .resolved-card, .silent-card, .followup-card, .followup-status .dot, .cap-spotlight, .cap-spotlight-label .live-dot, .cap-history-pill,
.panelA-active, .panelA-tick, .panelB-node-text, .panelB-node[data-state="active"] .dot, .panelC-block, .panelC-block::before, .panelC-header-dot, .panelD-cell {
animation: none !important; transition: none !important;
}
}
/* ═══════════════════════════════════════════════════════════════
V3 polish ADDENDUM 32 (2026-05-19) — Mobile milestone history.
═══════════════════════════════════════════════════════════════
Componente que renderiza chips del historial de hitos LOGRADOS
debajo de la barra de controles en mobile. En desktop está oculto
(no aporta — el panelC ya muestra los done blocks intercalados).
Solo se monta cuando hay >= 1 capability done; el componente JSX
retorna null si no hay items, así no genera un wrapper vacío. */
.mobile-milestone-history{
display: none;
}
@media (max-width: 767px){
.mobile-milestone-history{
display: block;
padding: 10px 12px 11px;
border-radius: 14px;
border: 1px solid rgba(91,213,242,0.16);
background: linear-gradient(180deg, rgba(51,194,234,0.04), rgba(10,10,15,0.40));
-webkit-backdrop-filter: blur(8px) saturate(115%);
backdrop-filter: blur(8px) saturate(115%);
}
.mobile-milestone-history-label{
font-family: 'Geist Mono', monospace;
font-size: 9.5px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: rgba(91,213,242,0.65);
margin-bottom: 8px;
}
.mobile-milestone-history-list{
display: flex;
flex-wrap: wrap;
gap: 6px;
max-width: 100%;
}
.mobile-milestone-chip{
display: inline-flex;
align-items: center;
gap: 6px;
padding: 5px 10px 5px 8px;
border-radius: 999px;
border: 1px solid rgba(91,213,242,0.32);
background: linear-gradient(180deg, rgba(51,194,234,0.10), rgba(10,10,15,0.45));
box-shadow: 0 0 10px -6px rgba(51,194,234,0.45);
max-width: 100%;
animation: mobile-milestone-chip-in 320ms cubic-bezier(0.22,0.61,0.36,1) both;
}
.mobile-milestone-chip-check{
color: #5BD5F2;
font-size: 11px;
font-weight: 700;
text-shadow: 0 0 6px rgba(91,213,242,0.55);
line-height: 1;
}
.mobile-milestone-chip-label{
font-family: 'Geist Mono', monospace;
font-size: 10px;
letter-spacing: 0.10em;
color: rgba(91,213,242,0.92);
text-transform: uppercase;
white-space: nowrap;
}
@keyframes mobile-milestone-chip-in{
0% { opacity: 0; transform: translateY(4px); }
100% { opacity: 1; transform: translateY(0); }
}
}
@media (prefers-reduced-motion: reduce){
.mobile-milestone-chip{ animation: none !important; }
}
/* ═══════════════════════════════════════════════════════════════
V3 polish ADDENDUM 30 (2026-05-19) — Swipe hint reusable.
═══════════════════════════════════════════════════════════════
Pista visual animada para carruseles mobile (e.g. .case-rail).
Renderizar como pill glass dark/cyan con un "dedo" (dot luminoso)
que se desliza R→L para sugerir el gesto. Reusable: cualquier
rail mobile nuevo puede agregar el markup `.swipe-hint`. El
padre debe ser responsable de hide/show por viewport (.md:hidden
u otra clase) — el componente en sí no tiene media query para
poder reusarse libremente. */
.swipe-hint{
display: inline-flex;
align-items: center;
gap: 10px;
padding: 7px 14px 7px 8px;
border-radius: 999px;
border: 1px solid rgba(91,213,242,0.28);
background: linear-gradient(180deg, rgba(51,194,234,0.08), rgba(10,10,15,0.50));
-webkit-backdrop-filter: blur(8px) saturate(120%);
backdrop-filter: blur(8px) saturate(120%);
box-shadow: 0 8px 22px -12px rgba(51,194,234,0.45);
width: max-content;
max-width: calc(100vw - 32px);
}
.swipe-hint-track{
position: relative;
display: inline-flex;
align-items: center;
width: 44px;
height: 18px;
overflow: hidden;
border-radius: 999px;
background: rgba(244,241,234,0.04);
border: 1px solid rgba(91,213,242,0.18);
}
.swipe-hint-finger{
position: absolute;
top: 50%;
left: 0;
width: 12px;
height: 12px;
margin-top: -6px;
border-radius: 50%;
background: radial-gradient(circle at 35% 35%, #EAFBFF 0%, #5BD5F2 50%, rgba(51,194,234,0.0) 78%);
box-shadow:
0 0 0 2px rgba(51,194,234,0.18),
0 0 10px rgba(91,213,242,0.55);
animation: swipe-hint-glide 2.4s cubic-bezier(0.65,0,0.35,1) infinite;
}
.swipe-hint-label{
font-family: 'Geist Mono', monospace;
font-size: 10px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: rgba(91,213,242,0.92);
white-space: nowrap;
}
@keyframes swipe-hint-glide{
0% { transform: translateX(28px); opacity: 0; }
18% { transform: translateX(28px); opacity: 1; }
65% { transform: translateX(4px); opacity: 1; }
85% { transform: translateX(4px); opacity: 0; }
100% { transform: translateX(28px); opacity: 0; }
}
@media (prefers-reduced-motion: reduce){
.swipe-hint-finger{ animation: none !important; transform: translateX(14px); opacity: 0.9; }
}
/* ═══════════════════════════════════════════════════════════════
V3 polish ADDENDUM 36 (2026-05-19) — WhatsApp real colors mobile.
═══════════════════════════════════════════════════════════════
Reportado por Martin en celular real (Samsung OLED): el chat de
WhatsApp se veia con fondo marron/oscuro y burbujas verdes muy
oscuras, en vez de la paleta WhatsApp real. La paleta desktop
(.wa-shell #ECE5DD, .wa-bubble.out #DCF8C6, .wa-bubble.in #FFFFFF)
es correcta. La causa probable es el Auto Dark Theme de Chrome
Android: cuando el browser detecta tema oscuro del sistema o el
site declara theme-color dark, aplica una inversion automatica a
elementos con backgrounds claros, dejandolos marron-amarillento.
Fix: declarar `color-scheme: only light` en .wa-shell para que
Chrome no aplique la inversion automatica, y reforzar la paleta
real con !important en mobile para que ninguna otra regla la
pise. Aplica solo dentro del demo (.demo-stage) para no afectar
otros elementos. */
/* V3 polish ADDENDUM 40 (2026-05-19) — WhatsApp Android real, defensa
reforzada. La iteración anterior (Addendum 36) con `color-scheme:
only light` en `.wa-shell` no fue suficiente en Samsung real: Auto
Dark Theme seguía invirtiendo colores. Refuerzo con:
1. `color-scheme: only light` propagado a TODO el subtree.
2. `filter: none` y `backdrop-filter: none` para anular inversiones
si el browser inyecta un filter style en el body.
3. `mix-blend-mode: normal` para anular cualquier blend que
contamine colores.
4. `forced-color-adjust: none` para opt-out de Windows High
Contrast Mode (no aplica Android pero defensa adicional).
5. Cada nodo crítico declara `background-color` + `color` opacos
explícitos. Sin rgba(), sin transparencias.
6. `isolation: isolate` en `.wa-shell` para que cualquier
mix-blend-mode externo no afecte hacia adentro.
Scope: solo `.wa-shell` y descendientes. Sin afectar resto. */
.wa-shell, .wa-shell *{
color-scheme: only light;
forced-color-adjust: none;
}
.wa-shell{ isolation: isolate; }
@media (max-width: 767px){
.demo-stage .wa-shell{
background-color: #ECE5DD !important;
color: #111B21 !important;
color-scheme: only light !important;
filter: none !important;
-webkit-backdrop-filter: none !important;
backdrop-filter: none !important;
mix-blend-mode: normal !important;
isolation: isolate !important;
}
.demo-stage .wa-shell *{
filter: none !important;
-webkit-backdrop-filter: none !important;
backdrop-filter: none !important;
mix-blend-mode: normal !important;
}
.demo-stage .wa-header{
background: linear-gradient(180deg, #075E54 0%, #054C44 100%) !important;
background-color: #075E54 !important;
color: #FFFFFF !important;
}
.demo-stage .wa-bg{
background-color: #ECE5DD !important;
color: #111B21 !important;
}
.demo-stage .wa-bubble{ color: #111B21 !important; background-color: #FFFFFF !important; }
.demo-stage .wa-bubble.in{ background-color: #FFFFFF !important; color: #111B21 !important; }
.demo-stage .wa-bubble.out{ background-color: #DCF8C6 !important; color: #111B21 !important; }
.demo-stage .wa-bubble.in::before{ border-color: transparent #FFFFFF transparent transparent !important; }
.demo-stage .wa-bubble.out::before{ border-color: transparent transparent transparent #DCF8C6 !important; }
.demo-stage .wa-bubble.staff{ background-color: #FFF6E5 !important; color: #5C3D11 !important; }
.demo-stage .wa-bubble.staff::before{ border-color: transparent #FFF6E5 transparent transparent !important; }
.demo-stage .wa-input{ background-color: #F0F2F5 !important; }
.demo-stage .wa-input-field{ background-color: #FFFFFF !important; color: #667781 !important; }
.demo-stage .wa-input-btn{ background-color: #075E54 !important; color: #FFFFFF !important; }
}
/* V3 polish ADDENDUM 41 (2026-05-19) — Samsung/Chrome generic final.
Two real-device issues survived the previous layer:
- old CSS pseudo-icons (`::before`) still painted emoji glyphs on top
of the new SVG toolbar icons in some browsers;
- Samsung Internet Force Dark can still transform CSS background
colors. It is far less aggressive with images, so the WhatsApp
light surfaces also get tiny SVG image backgrounds with the same
WhatsApp colors. CSS colors remain as fallback. */
.v7-control-btn::before,
.v7-case-nav::before{
content: none !important;
display: none !important;
}
.v7-control-btn > svg,
.v7-case-nav > svg{
width: 20px !important;
height: 20px !important;
flex: 0 0 auto !important;
color: currentColor !important;
}
.v7-control-primary > svg{
width: 20px !important;
height: 20px !important;
}
@media (max-width: 767px){
.demo-stage .wa-shell,
.demo-stage .wa-shell *{
color-scheme: only light !important;
forced-color-adjust: none !important;
-webkit-tap-highlight-color: transparent;
}
.demo-stage .wa-bg{
background-color: #ECE5DD !important;
background-image:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Crect width='24' height='24' fill='%23ECE5DD'/%3E%3Ccircle cx='4' cy='5' r='0.8' fill='%23D8D2C8' fill-opacity='0.55'/%3E%3Ccircle cx='16' cy='9' r='0.7' fill='%23D8D2C8' fill-opacity='0.45'/%3E%3Ccircle cx='10' cy='18' r='0.65' fill='%23D8D2C8' fill-opacity='0.42'/%3E%3C/svg%3E") !important;
background-repeat: repeat !important;
background-size: 24px 24px !important;
background-blend-mode: normal !important;
}
.demo-stage .wa-bubble.in{
background-color: #FFFFFF !important;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1' height='1'%3E%3Crect width='1' height='1' fill='%23FFFFFF'/%3E%3C/svg%3E") !important;
background-size: 100% 100% !important;
background-repeat: no-repeat !important;
color: #111B21 !important;
}
.demo-stage .wa-bubble.out{
background-color: #DCF8C6 !important;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1' height='1'%3E%3Crect width='1' height='1' fill='%23DCF8C6'/%3E%3C/svg%3E") !important;
background-size: 100% 100% !important;
background-repeat: no-repeat !important;
color: #111B21 !important;
}
.demo-stage .wa-bubble.staff{
background-color: #FFF6E5 !important;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1' height='1'%3E%3Crect width='1' height='1' fill='%23FFF6E5'/%3E%3C/svg%3E") !important;
background-size: 100% 100% !important;
background-repeat: no-repeat !important;
color: #5C3D11 !important;
}
}