/* Reset & base */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { font-family: var(--font-sans); font-size: var(--text-base); color: var(--color-text); background: var(--color-bg-muted); line-height: 1.5; }
a { color: var(--color-secondary); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { margin: 0 0 var(--space-3); font-weight: 600; line-height: 1.2; }
h1, h2 { font-family: var(--font-serif); font-weight: 400; letter-spacing: -0.01em; }
h1 { font-size: var(--text-2xl); }
h2 { font-size: var(--text-xl); }
h3 { font-size: var(--text-lg); }
p { margin: 0 0 var(--space-3); }
small { color: var(--color-text-muted); font-size: var(--text-xs); }
code { font-family: var(--font-mono); font-size: 0.92em; background: var(--color-border-soft); padding: 2px 5px; border-radius: var(--radius-sm); }
/* App shell — header full-width + content con islas flotantes */
:root { --sidebar-w: 240px; --shell-gap: 12px; }
.app-body { background: var(--color-canvas); min-height: 100vh; }
.app-shell { display: flex; flex-direction: column; min-height: 100vh; }
.app-header {
background: var(--color-canvas);
padding: 0 var(--shell-gap);
height: var(--header-h);
display: flex;
align-items: center;
gap: var(--space-5);
flex-shrink: 0;
z-index: 10;
}
.app-header__brand { display: inline-flex; align-items: center; gap: var(--space-2); font-weight: 700; color: var(--color-text); text-decoration: none; padding: 0 var(--space-2); }
.app-header__brand:hover { text-decoration: none; }
.app-header__logo { display: block; flex-shrink: 0; }
.app-header__spacer { flex: 1; }
.app-shell__content {
flex: 1;
display: grid;
grid-template-columns: var(--sidebar-w) 1fr;
gap: var(--shell-gap);
padding: 0 var(--shell-gap) var(--shell-gap);
min-height: 0;
}
.app-main {
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
padding: var(--space-6);
overflow-y: auto;
min-height: 0;
}
.app-main--no-pad { padding: 0; overflow: hidden; background: transparent; border: none; border-radius: 0; }
.app-main__inner { max-width: 1100px; margin: 0 auto; }
/* Sidebar como isla flotante */
.app-sidebar {
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
padding: var(--space-4) var(--space-3);
overflow-y: auto;
min-height: 0;
display: flex;
flex-direction: column;
}
.app-sidebar__nav { display: flex; flex-direction: column; gap: var(--space-5); flex: 1; }
.app-sidebar__footer {
display: flex;
flex-wrap: wrap;
gap: 6px;
padding: var(--space-3);
margin-top: var(--space-4);
border-top: 1px solid var(--color-border-soft);
font-size: var(--text-xs);
color: var(--color-text-soft);
}
.app-sidebar__footer a { color: var(--color-text-soft); text-decoration: none; }
.app-sidebar__footer a:hover { color: var(--color-text); text-decoration: underline; }
.app-sidebar__section { display: flex; flex-direction: column; gap: var(--space-1); }
.app-sidebar__section-label {
font-family: var(--font-sans);
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: .06em;
color: var(--color-text-soft);
padding: 0 var(--space-3);
margin: 0 0 var(--space-1);
}
.app-sidebar__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 2px; }
.app-sidebar__item {
display: flex;
align-items: center;
gap: var(--space-3);
padding: var(--space-2) var(--space-3);
border-radius: var(--radius-lg);
color: var(--color-text-muted);
font-size: var(--text-base);
text-decoration: none;
transition: background-color .15s, color .15s;
}
.app-sidebar__item:hover { background: var(--color-border-soft); color: var(--color-text); text-decoration: none; }
.app-sidebar__item--active { background: var(--color-bg-muted); color: var(--color-text); font-weight: 600; }
.app-sidebar__item--active:hover { background: var(--color-bg-muted); }
.app-sidebar__item--sub { padding-left: calc(var(--space-3) + 18px + var(--space-3)); font-size: var(--text-sm); }
.app-sidebar__item--sub .app-sidebar__icon { width: 14px; height: 14px; opacity: 0.7; }
.app-sidebar__icon { flex-shrink: 0; color: inherit; }
.app-sidebar__label { flex: 1; }
/* Icon helper */
.icon { display: inline-block; vertical-align: middle; line-height: 0; }
/* User menu (avatar dropdown) */
.user-menu { position: relative; }
.user-menu__trigger {
display: inline-flex;
align-items: center;
gap: var(--space-2);
padding: 4px var(--space-2) 4px 4px;
border: 1px solid var(--color-border);
background: var(--color-surface);
border-radius: 999px;
cursor: pointer;
color: var(--color-text-muted);
transition: background-color .15s, border-color .15s;
}
.user-menu__trigger:hover { background: var(--color-bg-muted); border-color: var(--color-text-soft); }
.user-menu__avatar {
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border-radius: 999px;
background: var(--color-primary);
color: var(--color-on-primary);
font-size: 12px;
font-weight: 700;
letter-spacing: .02em;
flex-shrink: 0;
}
.user-menu__avatar--lg { width: 40px; height: 40px; font-size: 14px; }
.user-menu__chevron { color: var(--color-text-soft); }
.user-menu__panel {
position: absolute;
top: calc(100% + 8px);
right: 0;
min-width: 280px;
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-lg);
padding: var(--space-3);
z-index: 100;
}
.user-menu__panel[hidden] { display: none; }
.user-menu__header { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-2) var(--space-4); border-bottom: 1px solid var(--color-border-soft); }
.user-menu__identity { min-width: 0; }
.user-menu__name { font-weight: 600; color: var(--color-text); }
.user-menu__email { font-size: var(--text-sm); color: var(--color-text-muted); overflow: hidden; text-overflow: ellipsis; }
.user-menu__section { padding: var(--space-3) 0; border-bottom: 1px solid var(--color-border-soft); }
.user-menu__section-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--color-text-soft); padding: 0 var(--space-2); margin-bottom: var(--space-1); }
.user-menu__link {
display: flex;
align-items: center;
gap: var(--space-2);
padding: var(--space-2);
border-radius: var(--radius);
color: var(--color-text);
text-decoration: none;
font-size: var(--text-base);
}
.user-menu__link:hover { background: var(--color-bg-muted); text-decoration: none; }
.user-menu__footer { padding-top: var(--space-3); }
.user-menu__link--danger { color: var(--color-error); }
.user-menu__link--danger:hover { background: var(--color-error-bg); color: var(--color-error); }
.public-body { background: var(--color-bg); min-height: 100vh; display: flex; flex-direction: column; }
.public-header { padding: var(--space-4) var(--space-5); display: flex; justify-content: space-between; align-items: center; }
.public-header__brand { font-weight: 700; font-size: var(--text-lg); }
.public-main { flex: 1; padding: var(--space-6) var(--space-5); }
.public-footer {
padding: var(--space-5) var(--space-5);
color: var(--color-text-muted);
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
gap: var(--space-3);
border-top: 1px solid var(--color-border-soft);
}
.public-footer__brand { color: var(--color-text-soft); }
.public-footer__legal { display: flex; flex-wrap: wrap; gap: var(--space-4); font-size: var(--text-sm); }
.public-footer__legal a { color: var(--color-text-muted); text-decoration: none; }
.public-footer__legal a:hover { color: var(--color-text); text-decoration: underline; }
.auth-body { background: var(--color-bg-muted); min-height: 100vh; display: flex; align-items: center; justify-content: center; }
.auth-main { width: 100%; max-width: 380px; padding: var(--space-5); }
.auth-brand { display: flex; justify-content: center; align-items: center; color: var(--color-text); text-decoration: none; margin-bottom: var(--space-3); }
.auth-brand:hover { text-decoration: none; }
.auth-brand__logo { display: block; width: 72px; height: 72px; }
.auth-tagline { text-align: center; color: var(--color-text-muted); font-size: var(--text-sm); margin: 0 0 var(--space-6); }
.auth-tagline strong { color: var(--color-text); font-weight: 600; }
.auth-card { background: var(--color-surface); padding: var(--space-6); border-radius: var(--radius-lg); box-shadow: var(--shadow); }
.auth-card__title { font-size: var(--text-xl); margin-bottom: var(--space-2); }
.auth-card__subtitle { color: var(--color-text-muted); font-size: var(--text-sm); margin: 0 0 var(--space-5); }
.auth-footer { text-align: center; color: var(--color-text-soft); font-size: var(--text-xs); margin-top: var(--space-5); }
.auth-footer strong { color: var(--color-text-muted); font-weight: 600; }
.auth-footer__heart { display: inline-block; transform: translateY(1px); }
/* Hero (landing) */
.hero { max-width: 720px; margin: var(--space-7) auto; text-align: center; padding: var(--space-5); }
.hero__title { font-family: var(--font-serif); font-weight: 400; font-size: var(--text-3xl); letter-spacing: -0.015em; margin-bottom: var(--space-3); }
.hero__subtitle { color: var(--color-text-muted); font-size: var(--text-md); margin-bottom: var(--space-5); }
/* Page header */
.page-header { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--space-3); margin-bottom: var(--space-5); }
.page-header h1 { margin: 0; }
.page-header__subtitle { color: var(--color-text-muted); margin: 0; flex-basis: 100%; order: 99; }
/* Buttons */
.btn { display: inline-block; padding: var(--space-3) var(--space-5); border-radius: var(--radius); font-size: var(--text-base); font-weight: 500; border: 1px solid transparent; cursor: pointer; text-decoration: none; line-height: 1.2; }
.btn:hover { text-decoration: none; }
.btn--primary { background: var(--color-primary); color: var(--color-on-primary); border-color: var(--color-primary); }
.btn--primary:hover { background: var(--color-primary-hover); border-color: var(--color-primary-hover); }
.btn--accent { background: var(--color-secondary); color: var(--color-on-accent); border-color: var(--color-secondary); }
.btn--accent:hover { background: var(--color-secondary-hover); border-color: var(--color-secondary-hover); }
.btn--ghost { background: transparent; color: var(--color-text); border-color: var(--color-border); }
.btn--ghost:hover { background: var(--color-bg-muted); }
.btn--sm { padding: var(--space-2) var(--space-3); font-size: var(--text-sm); }
.btn--lg { padding: var(--space-4) var(--space-6); font-size: var(--text-md); }
.btn--block { display: block; width: 100%; text-align: center; }
/* Forms */
.form { display: flex; flex-direction: column; gap: var(--space-4); }
.form--full { max-width: 720px; }
.form__field { display: flex; flex-direction: column; gap: var(--space-2); }
.form__field--checkbox { flex-direction: row; align-items: center; gap: var(--space-2); }
.form__label { font-size: var(--text-sm); font-weight: 500; }
.form input[type="text"], .form input[type="email"], .form input[type="password"], .form input[type="url"], .form textarea {
width: 100%; padding: var(--space-3) var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius); font-size: var(--text-base); font-family: inherit;
}
.form input:focus, .form textarea:focus { outline: none; border-color: var(--color-primary); }
.form input:hover, .form textarea:hover { border-color: var(--color-text-soft); }
.form__actions { display: flex; gap: var(--space-3); justify-content: flex-end; }
/* Cards & grid */
.card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-5); }
.card--link { display: block; text-decoration: none; color: inherit; transition: box-shadow .15s; }
.card--link:hover { box-shadow: var(--shadow); text-decoration: none; }
.card__title { font-size: var(--text-lg); margin-bottom: var(--space-2); }
.grid { display: grid; gap: var(--space-4); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
/* Tables */
.table { width: 100%; border-collapse: collapse; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden; }
.table th, .table td { padding: var(--space-3) var(--space-4); text-align: left; border-bottom: 1px solid var(--color-border-soft); }
.table th { background: var(--color-bg-muted); font-size: var(--text-sm); font-weight: 600; color: var(--color-text-muted); }
.table tr:last-child td { border-bottom: none; }
.table--compact th, .table--compact td { padding: 6px var(--space-3); font-size: var(--text-sm); }
/* Alerts */
.alert { padding: var(--space-3) var(--space-4); border-radius: var(--radius); margin-bottom: var(--space-4); font-size: var(--text-sm); }
.alert--success { background: var(--color-success-bg); color: var(--color-success); }
.alert--error { background: var(--color-error-bg); color: var(--color-error); }
.alert--warning { background: var(--color-warning-bg); color: var(--color-warning); }
.alert--info { background: var(--color-info-bg); color: var(--color-info); }
/* Badge */
.badge { display: inline-block; padding: 2px 8px; background: var(--color-bg-muted); color: var(--color-text-muted); border-radius: 999px; font-size: var(--text-xs); font-weight: 500; }
.badge--ok { background: var(--color-success-bg); color: var(--color-success); }
/* Empty state */
.empty-state { padding: var(--space-7); text-align: center; color: var(--color-text-muted); background: var(--color-surface); border: 1px dashed var(--color-border); border-radius: var(--radius-lg); }
/* Coming soon (placeholders) */
.coming-soon { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-8) var(--space-6); text-align: center; max-width: 560px; margin: var(--space-6) auto; }
.coming-soon__icon { display: inline-flex; align-items: center; justify-content: center; width: 80px; height: 80px; border-radius: var(--radius-lg); background: var(--color-bg-muted); color: var(--color-secondary); margin-bottom: var(--space-4); }
.coming-soon__title { font-family: var(--font-serif); font-weight: 400; margin-bottom: var(--space-3); }
.coming-soon__body { color: var(--color-text-muted); max-width: 420px; margin: 0 auto; }
/* Card with leading icon */
.card__icon { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--radius); background: var(--color-bg-muted); color: var(--color-secondary); margin-bottom: var(--space-3); }
/* Breadcrumb — indica "dónde estás parado" arriba del main */
.breadcrumb { display: flex; align-items: center; gap: var(--space-2); color: var(--color-text-muted); font-size: var(--text-sm); margin-bottom: var(--space-5); flex-wrap: wrap; }
.breadcrumb__link { color: var(--color-text-muted); text-decoration: none; }
.breadcrumb__link:hover { color: var(--color-text); text-decoration: underline; }
.breadcrumb__sep { color: var(--color-text-soft); }
.breadcrumb__current { color: var(--color-text); font-weight: 500; }
/* Alias retro-compat para vistas que aún usen la clase vieja */
.breadcrumbs { display: flex; gap: var(--space-2); color: var(--color-text-muted); font-size: var(--text-sm); margin-bottom: var(--space-4); }
.breadcrumbs a { color: var(--color-text-muted); text-decoration: none; }
.breadcrumbs a:hover { color: var(--color-text); text-decoration: underline; }
/* Help center */
.help-section__title { margin-top: var(--space-5); margin-bottom: var(--space-2); font-size: var(--text-md); color: var(--color-text-muted); text-transform: uppercase; letter-spacing: .04em; }
.help-list { list-style: none; padding: 0; margin: 0; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); }
.help-list li { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-border-soft); }
.help-list li:last-child { border-bottom: none; }
.help-article { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-6); max-width: 820px; }
.help-article__body { margin: var(--space-5) 0; line-height: 1.7; color: var(--color-text); }
.help-article__meta { display: block; margin-top: var(--space-5); color: var(--color-text-soft); }
/* Markdown rendered dentro del article body */
.help-article__body h2 { font-size: 1.35rem; font-weight: 700; margin: var(--space-6) 0 var(--space-3) 0; padding-bottom: var(--space-2); border-bottom: 1px solid var(--color-border-soft); scroll-margin-top: var(--space-5); }
.help-article__body h3 { font-size: 1.1rem; font-weight: 600; margin: var(--space-5) 0 var(--space-2) 0; scroll-margin-top: var(--space-5); }
.help-article__body h4 { font-size: 1rem; font-weight: 600; margin: var(--space-4) 0 var(--space-2) 0; color: var(--color-text-soft); scroll-margin-top: var(--space-5); }
.help-article__toc { margin: 0 0 var(--space-5) 0; padding: var(--space-4); background: var(--color-canvas); border: 1px solid var(--color-border-soft); border-radius: var(--radius-md); }
.help-article__toc > p:first-child { margin: 0 0 var(--space-2) 0; font-weight: 600; font-size: 0.9em; color: var(--color-text-soft); text-transform: uppercase; letter-spacing: 0.05em; }
.help-article__toc ul { margin: 0; padding-left: var(--space-4); }
.help-article__toc li { margin-bottom: var(--space-1); }
.help-article__body p { margin: 0 0 var(--space-3) 0; }
.help-article__body ul, .help-article__body ol { margin: 0 0 var(--space-3) 0; padding-left: var(--space-5); }
.help-article__body li { margin-bottom: var(--space-1); }
.help-article__body li > ul, .help-article__body li > ol { margin-top: var(--space-1); }
.help-article__body a { color: var(--color-primary); text-decoration: underline; text-underline-offset: 2px; }
.help-article__body a:hover { text-decoration-thickness: 2px; }
.help-article__body strong { font-weight: 700; }
.help-article__body em { font-style: italic; }
.help-article__body blockquote { margin: var(--space-4) 0; padding: var(--space-3) var(--space-4); border-left: 3px solid var(--color-primary); background: var(--color-canvas); color: var(--color-text-soft); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.help-article__body blockquote p:last-child { margin-bottom: 0; }
.help-article__body hr { margin: var(--space-6) 0; border: none; border-top: 1px solid var(--color-border-soft); }
.help-article__body code { font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace); font-size: 0.9em; background: var(--color-canvas); padding: 0.1em 0.35em; border-radius: var(--radius-sm); border: 1px solid var(--color-border-soft); }
.help-article__body pre { margin: var(--space-3) 0 var(--space-4) 0; padding: var(--space-4); background: var(--color-canvas); border: 1px solid var(--color-border-soft); border-radius: var(--radius-md); overflow-x: auto; line-height: 1.5; }
.help-article__body pre code { background: none; border: none; padding: 0; font-size: 0.9em; }
.help-article__body table { border-collapse: collapse; width: 100%; margin: var(--space-3) 0 var(--space-4) 0; font-size: 0.95em; }
.help-article__body th, .help-article__body td { text-align: left; padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--color-border-soft); vertical-align: top; }
.help-article__body th { font-weight: 600; background: var(--color-canvas); border-bottom: 2px solid var(--color-border); }
.help-article__body tr:last-child td { border-bottom: none; }
/* Lab */
.lab-list { list-style: none; padding: 0; }
.lab-list li { padding: var(--space-3) var(--space-4); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); margin-bottom: var(--space-2); }
.lab-frame { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-5); }
/* KPI card demo (lab) */
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--space-4); }
.kpi-card { background: var(--color-bg-muted); padding: var(--space-4); border-radius: var(--radius); display: flex; flex-direction: column; gap: var(--space-1); }
.kpi-card__label { font-size: var(--text-sm); color: var(--color-text-muted); }
.kpi-card__value { font-size: var(--text-2xl); font-weight: 600; }
.kpi-card__delta { font-size: var(--text-sm); color: var(--color-success); }
/* ──────────────────────────────────────────────────────────────────
Fase 02 — Cuentas / Wizard / Brand DNA
────────────────────────────────────────────────────────────────── */
/* Page header con actions */
.page-header__actions { display: flex; gap: var(--space-2); align-items: center; margin-left: auto; }
.table__col--actions { text-align: right; width: 1%; white-space: nowrap; }
/* Badge variants para estado de cuenta */
.badge--ok { background: var(--color-success-bg); color: var(--color-success); }
.badge--warn { background: var(--color-warning-bg); color: var(--color-warning); }
.badge--error { background: var(--color-error-bg); color: var(--color-error); }
/* Form helpers */
.form__help { font-size: var(--text-sm); color: var(--color-text-muted); margin-top: var(--space-1); }
.form__fieldset { border: none; padding: 0; margin: 0 0 var(--space-5); }
.form__legend { font-size: var(--text-sm); font-weight: 600; color: var(--color-text); margin-bottom: var(--space-3); padding: 0; }
.form textarea { font-family: inherit; resize: vertical; min-height: 80px; }
/* Wizard layout */
.wizard { max-width: 640px; margin: 0 auto; }
.wizard__head { text-align: center; margin-bottom: var(--space-5); }
.wizard__title { margin-bottom: var(--space-1); }
.wizard__subtitle { color: var(--color-text-muted); font-size: var(--text-sm); margin: 0; }
.wizard__progress { display: flex; gap: var(--space-2); margin-bottom: var(--space-6); }
.wizard__progress-bar { flex: 1; height: 4px; background: var(--color-border); border-radius: 999px; transition: background-color .2s; }
.wizard__progress-bar.is-active { background: var(--color-primary); }
.wizard__progress-bar.is-done { background: var(--color-secondary); }
.wizard__body { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-6); }
.wizard__lead { color: var(--color-text-muted); margin-bottom: var(--space-5); }
.wizard__actions { display: flex; justify-content: space-between; gap: var(--space-3); margin-top: var(--space-6); padding-top: var(--space-5); border-top: 1px solid var(--color-border-soft); }
.wizard__actions--split { justify-content: space-between; }
.wizard__validate { display: flex; flex-direction: column; gap: var(--space-3); margin-bottom: var(--space-5); }
/* Smart lock: controles ignorados cuando Modo A > estrategia = Smart */
.is-smart-locked {
opacity: .45;
pointer-events: none;
filter: grayscale(1);
transition: opacity .15s;
}
.smart-lock-notice {
display: flex;
align-items: flex-start;
gap: var(--space-2);
margin: var(--space-4) 0 0;
padding: var(--space-3) var(--space-4);
background: var(--color-bg-muted);
border: 1px dashed var(--color-border);
border-radius: var(--radius);
font-size: var(--text-sm);
color: var(--color-text-muted);
line-height: 1.5;
}
.smart-lock-notice strong { color: var(--color-text); }
/* OAuth CTA en step 1 del wizard (Fase 07a) */
.oauth-cta {
display: flex;
flex-direction: column;
gap: var(--space-4);
padding: var(--space-5);
background: var(--color-bg-muted);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
margin-bottom: var(--space-5);
}
.oauth-cta__eyebrow {
margin: 0;
font-size: var(--text-xs);
text-transform: uppercase;
letter-spacing: .08em;
color: var(--color-primary);
font-weight: 600;
}
.oauth-cta__title { margin: var(--space-1) 0 var(--space-2); font-size: var(--text-xl); }
.oauth-cta__lead { margin: 0; color: var(--color-text-muted); line-height: 1.55; }
.oauth-cta .btn--lg { align-self: flex-start; padding: var(--space-3) var(--space-5); font-size: var(--text-base); }
.wizard__fallback { margin-top: var(--space-3); }
.wizard__fallback > summary {
padding: var(--space-3) 0;
color: var(--color-text-muted);
font-size: var(--text-sm);
cursor: pointer;
border-top: 1px solid var(--color-border-soft);
}
.wizard__fallback > summary:hover { color: var(--color-text); }
.wizard__fallback[open] > summary { color: var(--color-text); font-weight: 500; }
.wizard__fallback-body { padding-top: var(--space-4); }
.oauth-badge {
display: inline-flex;
align-items: center;
gap: var(--space-2);
padding: var(--space-2) var(--space-3);
background: var(--color-success-bg);
color: var(--color-success);
border-radius: 999px;
font-size: var(--text-xs);
font-weight: 500;
margin-bottom: var(--space-4);
}
/* Token validation feedback */
.token-validate-feedback { padding: var(--space-3) var(--space-4); border-radius: var(--radius); font-size: var(--text-sm); }
.token-validate-feedback--loading { background: var(--color-bg-muted); color: var(--color-text-muted); }
.token-validate-feedback--success { background: var(--color-success-bg); color: var(--color-success); }
.token-validate-feedback--error { background: var(--color-error-bg); color: var(--color-error); }
/* Trait grid (4 selects 2x2) */
.trait-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4); }
.trait-grid .form__field { margin-bottom: 0; }
.form select {
width: 100%;
padding: var(--space-3) var(--space-7) var(--space-3) var(--space-4);
border: 1px solid var(--color-border);
border-radius: var(--radius);
font-size: var(--text-base);
font-family: inherit;
color: var(--color-text);
background-color: var(--color-surface);
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right var(--space-4) center;
background-size: 18px 18px;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
cursor: pointer;
}
.form select:hover { border-color: var(--color-text-soft); }
.form select:focus { outline: none; border-color: var(--color-primary); }
/* Prompt editor: textarea + guía 2-col (Fase 04d cierre) */
.prompt-editor { display: grid; grid-template-columns: 1fr; gap: var(--space-4); margin: var(--space-3) 0 var(--space-5); }
@media (min-width: 960px) { .prompt-editor { grid-template-columns: minmax(0, 1.4fr) minmax(300px, 1fr); align-items: start; } }
.prompt-editor__main { min-width: 0; }
.prompt-editor__main .form__field { margin-bottom: 0; }
.prompt-editor__guide { display: flex; flex-direction: column; gap: var(--space-2); font-size: var(--text-sm); }
@media (min-width: 960px) { .prompt-editor__guide { position: sticky; top: var(--space-4); max-height: calc(100vh - var(--space-7)); overflow-y: auto; padding-right: 2px; } }
.prompt-guide__title { margin: 0 0 var(--space-2); font-family: inherit; font-size: var(--text-base); font-weight: 600; color: var(--color-text); line-height: 1.4; }
.prompt-guide__card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); transition: border-color 0.15s ease, box-shadow 0.15s ease; }
.prompt-guide__card:hover { border-color: var(--color-text-soft); }
.prompt-guide__card[open] { border-color: var(--color-text-soft); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04); }
.prompt-guide__card > summary { cursor: pointer; padding: var(--space-3) var(--space-4); font-weight: 400; color: var(--color-text); user-select: none; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); border-radius: var(--radius); }
.prompt-guide__card > summary::-webkit-details-marker { display: none; }
.prompt-guide__card > summary::after { content: ''; width: 12px; height: 12px; flex-shrink: 0; background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: center; transition: transform 0.2s ease; }
.prompt-guide__card[open] > summary::after { transform: rotate(180deg); }
.prompt-guide__steps,
.prompt-guide__list { margin: 0; padding: 0 var(--space-4) var(--space-4) calc(var(--space-4) + var(--space-4)); color: var(--color-text-muted); line-height: 1.55; }
.prompt-guide__steps li { margin-bottom: var(--space-2); }
.prompt-guide__steps li:last-child { margin-bottom: 0; }
.prompt-guide__steps li strong { color: var(--color-text); }
.prompt-guide__list { list-style: none; padding-left: var(--space-4); }
.prompt-guide__list li { position: relative; padding-left: var(--space-5); margin-bottom: 8px; }
.prompt-guide__list li:last-child { margin-bottom: 0; }
.prompt-guide__list li::before { position: absolute; left: 0; top: 0; display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 18px; font-weight: 700; font-size: 12px; }
.prompt-guide__list--ok li::before { content: '✓'; color: var(--color-success); }
.prompt-guide__list--no li::before { content: '×'; color: var(--color-error); font-size: 16px; }
.prompt-guide__list--layers li { padding-left: 0; margin-bottom: var(--space-2); }
.prompt-guide__list--layers li::before { content: none; }
.prompt-guide__list li strong { color: var(--color-text); }
.prompt-guide__intro { margin: 0 var(--space-4) var(--space-3); padding-left: var(--space-4); color: var(--color-text-muted); line-height: 1.55; }
.prompt-guide__intro strong { color: var(--color-text); }
.prompt-guide__list--layers { padding-left: calc(var(--space-4) + var(--space-4)); }
.prompt-guide__example { font-family: var(--font-mono); font-size: var(--text-xs); white-space: pre-wrap; word-break: break-word; color: var(--color-text-muted); margin: 0 var(--space-4) var(--space-4); padding: var(--space-3); background: var(--color-bg-muted); border-radius: var(--radius); border: 1px solid var(--color-border-soft); line-height: 1.5; }
.prompt-guide__more-link { display: inline-flex; align-items: center; gap: 6px; margin-top: var(--space-2); padding: var(--space-2) var(--space-3); font-size: var(--text-sm); color: var(--color-primary); text-decoration: none; font-weight: 500; }
.prompt-guide__more-link:hover { text-decoration: underline; }
/* Voice sliders (Fase 04d-1) */
.voice-sliders { display: grid; grid-template-columns: 1fr; gap: var(--space-4); }
@media (min-width: 720px) { .voice-sliders { grid-template-columns: repeat(2, 1fr); } }
.voice-slider { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-3) var(--space-4); background: var(--color-surface); border: 1px solid var(--color-border-soft); border-radius: var(--radius); }
.voice-slider__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); }
.voice-slider__label { font-weight: 600; font-size: var(--text-sm); color: var(--color-text); }
.voice-slider__level { font-variant-numeric: tabular-nums; font-size: var(--text-xs); color: var(--color-text-muted); }
.voice-slider__input { width: 100%; accent-color: var(--color-primary); cursor: pointer; }
.voice-slider__ticks { display: flex; justify-content: space-between; padding: 0 4px; font-size: 10px; color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
.voice-slider__desc { margin: 0; font-size: var(--text-xs); color: var(--color-text-muted); line-height: 1.4; min-height: 2.4em; }
/* Cultural markers (Fase 04d-3) */
.cultural-category { border: 1px solid var(--color-border-soft); border-radius: var(--radius); background: var(--color-surface); margin-bottom: var(--space-3); }
.cultural-category > summary { cursor: pointer; padding: var(--space-3) var(--space-4); font-size: var(--text-sm); font-weight: 600; color: var(--color-text); user-select: none; text-transform: capitalize; }
.cultural-category > summary:hover { background: var(--color-bg-muted); }
.cultural-category__count { font-weight: 400; color: var(--color-text-muted); font-size: var(--text-xs); }
.cultural-markers { display: grid; grid-template-columns: 1fr; gap: var(--space-2); padding: 0 var(--space-4) var(--space-4); }
@media (min-width: 720px) { .cultural-markers { grid-template-columns: repeat(2, 1fr); } }
.cultural-marker { display: flex; align-items: flex-start; gap: var(--space-2); padding: var(--space-2); border-radius: var(--radius); cursor: pointer; transition: background 0.15s; }
.cultural-marker:hover { background: var(--color-bg-muted); }
.cultural-marker input[type="checkbox"] { margin-top: 3px; flex-shrink: 0; accent-color: var(--color-primary); }
.cultural-marker__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cultural-marker__name { font-size: var(--text-sm); color: var(--color-text); font-weight: 500; }
.cultural-marker__note { font-size: var(--text-xs); color: var(--color-text-muted); line-height: 1.3; }
/* Cultural curation admin (Fase 04d-3 patch) */
.pack-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--space-3); margin: 0 0 var(--space-5); }
.pack-stat { background: var(--color-surface); border: 1px solid var(--color-border-soft); border-radius: var(--radius); padding: var(--space-3) var(--space-4); display: flex; flex-direction: column; gap: 2px; }
.pack-stat__label { font-size: var(--text-xs); color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600; }
.pack-stat__value { font-size: var(--text-2xl); font-weight: 700; color: var(--color-text); font-variant-numeric: tabular-nums; line-height: 1.1; margin: 2px 0; }
.pack-stat__hint { font-size: var(--text-xs); color: var(--color-text-muted); }
.pack-stat--link { background: var(--color-info-bg); border-color: var(--color-info); text-decoration: none; transition: transform 0.15s ease, box-shadow 0.15s ease; }
.pack-stat--link:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(7, 80, 86, 0.12); }
.pack-stat--link .pack-stat__label { color: var(--color-info); }
.pack-stat--link .pack-stat__value { color: var(--color-info); }
.pack-stat--link .pack-stat__hint { color: var(--color-info); font-weight: 600; }
.cultural-curation__head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-3); margin-bottom: var(--space-3); }
.cultural-curation__head h2 { margin: 0; text-transform: capitalize; }
.cultural-curation__head h2 small { font-weight: 400; color: var(--color-text-muted); font-size: var(--text-sm); }
.cultural-curation__add summary { display: inline-flex; align-items: center; cursor: pointer; list-style: none; }
.cultural-curation__add summary::-webkit-details-marker { display: none; }
.cultural-curation__add[open] summary { background: var(--color-bg-muted); }
.cultural-add-form { margin-top: var(--space-3); padding: var(--space-4); background: var(--color-surface); border: 1px solid var(--color-border-soft); border-radius: var(--radius); }
.cultural-add-form__grid { display: grid; grid-template-columns: 1fr; gap: var(--space-3); margin-bottom: var(--space-3); }
@media (min-width: 720px) { .cultural-add-form__grid { grid-template-columns: 2fr 1fr 3fr; } }
.cultural-curation__table .col-marker { width: 22%; }
.cultural-curation__table .col-default { width: 12%; }
.cultural-curation__table .col-note { width: 42%; }
.cultural-curation__table .col-status { width: 10%; }
.cultural-curation__table .col-actions { width: 14%; }
.cultural-curation__table input[type="text"] { padding: var(--space-2) var(--space-3); font-size: var(--text-sm); width: 100%; }
.select--compact,
.cultural-curation__table select {
width: 100%;
padding: var(--space-2) 30px var(--space-2) var(--space-3);
font-size: var(--text-sm);
font-family: inherit;
color: var(--color-text);
border: 1px solid var(--color-border);
border-radius: var(--radius);
background-color: var(--color-surface);
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 8px center;
background-size: 14px 14px;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
cursor: pointer;
}
.select--compact:hover,
.cultural-curation__table select:hover { border-color: var(--color-text-soft); }
.select--compact:focus,
.cultural-curation__table select:focus { outline: none; border-color: var(--color-primary); }
.icon-actions { display: inline-flex; gap: var(--space-2); align-items: center; }
.icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-surface); color: var(--color-text-muted); cursor: pointer; transition: all 0.15s; }
.icon-btn:hover { color: var(--color-text); border-color: var(--color-text-soft); background: var(--color-bg-muted); }
.icon-btn--save:hover { color: var(--color-success); border-color: var(--color-success); background: var(--color-success-bg); }
.icon-btn--danger:hover { color: var(--color-error); border-color: var(--color-error); background: var(--color-error-bg); }
.icon-btn--restore:hover { color: var(--color-primary); border-color: var(--color-primary); }
.row--inactive { opacity: 0.55; }
.row--inactive td:first-child strong { text-decoration: line-through; }
.row--add { background: var(--color-bg-muted); }
.row--add td { padding-top: var(--space-3); padding-bottom: var(--space-3); }
.row--add .text-muted { color: var(--color-text-muted); font-size: var(--text-sm); text-transform: capitalize; }
.badge--muted { background: var(--color-bg-muted); color: var(--color-text-muted); }
.empty-state-inline { text-align: center; padding: var(--space-4); color: var(--color-text-muted); font-style: italic; font-size: var(--text-sm); }
.input--narrow { max-width: 80px; }
/* Categorías page (subpágina /admin/cultural-packs/{id}/categories) */
.categories-page-actions { display: flex; justify-content: flex-end; }
.categories-table .col-cat-code { width: 18%; }
.categories-table .col-cat-label { width: 30%; }
.categories-table .col-cat-sort { width: 10%; }
.categories-table .col-cat-markers { width: 12%; }
.categories-table .col-cat-status { width: 12%; }
.categories-table .col-cat-actions { width: 18%; }
.categories-table input[type="text"],
.categories-table input[type="number"] { padding: var(--space-2) var(--space-3); font-size: var(--text-sm); width: 100%; }
/* Char counter */
[data-char-counter-output] { font-variant-numeric: tabular-nums; font-weight: 600; }
.char-counter--over { color: var(--color-error); }
/* Chips input */
.chips-input { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; padding: var(--space-2); border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-surface); min-height: 44px; cursor: text; }
.chips-input:focus-within { border-color: var(--color-primary); }
.chips-input__chips { display: contents; }
.chips-input__chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 4px 2px 10px; background: var(--color-bg-muted); border-radius: 999px; font-size: var(--text-sm); color: var(--color-text); }
.chips-input__chip-label { line-height: 1.4; }
.chips-input__chip-remove { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border: none; background: transparent; color: var(--color-text-muted); border-radius: 999px; cursor: pointer; font-size: 14px; line-height: 1; }
.chips-input__chip-remove:hover { background: var(--color-border); color: var(--color-text); }
.chips-input__field { flex: 1; min-width: 120px; border: none; outline: none; padding: 6px 8px; font-size: var(--text-base); font-family: inherit; background: transparent; }
/* Empty state extras */
.empty-state p { margin: 0; }
.empty-state p + p { margin-top: var(--space-3); }
/* ──────────────────────────────────────────────────────────────────
Sub-fase 02b — Detalle de cuenta (header + tabs + tokens + modal)
────────────────────────────────────────────────────────────────── */
/* Account header (avatar + meta + actions) */
.account-header { display: flex; align-items: center; gap: var(--space-4); padding-bottom: var(--space-5); margin-bottom: var(--space-5); border-bottom: 1px solid var(--color-border-soft); }
.account-header__avatar { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: var(--radius-lg); background: var(--color-primary); color: var(--color-on-primary); font-size: 20px; font-weight: 700; flex-shrink: 0; }
.account-header__meta { flex: 1; min-width: 0; }
.account-header__handle { font-family: var(--font-sans); font-size: var(--text-xl); font-weight: 700; color: var(--color-text); line-height: 1.2; margin: 0; }
.account-header__brand { color: var(--color-text-muted); font-size: var(--text-base); margin: 4px 0 0; }
.account-header__badges { display: flex; gap: var(--space-2); margin-top: var(--space-2); }
.account-header__actions { display: flex; gap: var(--space-2); flex-shrink: 0; }
/* Tabs (sub-shell, Typeform-style) */
.tabs { display: flex; gap: var(--space-1); border-bottom: 1px solid var(--color-border); margin-bottom: var(--space-5); overflow-x: auto; }
.tabs__item { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-4); border: none; border-bottom: 2px solid transparent; background: transparent; color: var(--color-text-muted); font-size: var(--text-base); font-weight: 500; text-decoration: none; cursor: pointer; transition: color .15s, border-color .15s; margin-bottom: -1px; }
.tabs__item:hover { color: var(--color-text); text-decoration: none; }
.tabs__item--active { color: var(--color-text); border-bottom-color: var(--color-primary); }
/* Account detail container */
.account-detail { display: flex; flex-direction: column; gap: var(--space-5); }
/* Token display */
.token-display { display: flex; flex-direction: column; gap: var(--space-4); }
.token-display__row { display: flex; gap: var(--space-4); align-items: flex-start; padding: var(--space-4); background: var(--color-bg-muted); border-radius: var(--radius-lg); }
.token-display__icon { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--radius); background: var(--color-surface); color: var(--color-secondary); flex-shrink: 0; }
.token-display__body { flex: 1; min-width: 0; }
.token-display__label { font-size: var(--text-sm); color: var(--color-text-muted); margin: 0 0 4px; }
.token-display__value { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--color-text); margin: 0; word-break: break-all; }
.token-display__sub { font-size: var(--text-sm); color: var(--color-text-muted); margin: 4px 0 0; }
.token-display__sub--warn { color: var(--color-warning); }
.token-display__sub--error { color: var(--color-error); }
/* Switch (toggle) styled checkbox for is_active */
.switch { display: inline-flex; align-items: center; gap: var(--space-2); cursor: pointer; }
.switch__input { position: absolute; opacity: 0; pointer-events: none; }
.switch__track { position: relative; display: inline-block; width: 36px; height: 20px; background: var(--color-border); border-radius: 999px; transition: background-color .15s; }
.switch__thumb { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; background: var(--color-surface); border-radius: 999px; transition: transform .15s; box-shadow: 0 1px 2px rgba(22,35,42,.2); }
.switch__input:checked + .switch__track { background: var(--color-secondary); }
.switch__input:checked + .switch__track .switch__thumb { transform: translateX(16px); }
.switch__input:focus-visible + .switch__track { outline: 2px solid var(--color-primary); outline-offset: 2px; }
/* Danger zone (delete account block) */
.danger-zone { border: 1px solid var(--color-error); border-radius: var(--radius-lg); padding: var(--space-4); background: var(--color-error-bg); }
.danger-zone__title { color: var(--color-error); margin-bottom: var(--space-2); font-size: var(--text-md); }
.danger-zone__body { color: var(--color-text); font-size: var(--text-sm); margin: 0 0 var(--space-3); }
.btn--danger { background: var(--color-error); color: white; border-color: var(--color-error); }
.btn--danger:hover { background: #a92424; border-color: #a92424; }
/* Toast notifications (top-right) */
.toast-container { position: fixed; top: var(--space-4); right: var(--space-4); z-index: 2000; display: flex; flex-direction: column; gap: var(--space-2); pointer-events: none; max-width: 380px; width: calc(100% - var(--space-5)); }
.toast {
display: flex;
align-items: center;
gap: var(--space-3);
padding: var(--space-3) var(--space-4);
background: var(--color-surface);
border: 1px solid var(--color-border);
border-left: 3px solid var(--color-text-soft);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-lg);
color: var(--color-text);
font-size: var(--text-sm);
pointer-events: auto;
opacity: 0;
transform: translateX(20px);
transition: opacity .25s ease-out, transform .25s ease-out;
}
.toast.is-visible { opacity: 1; transform: translateX(0); }
.toast.is-leaving { opacity: 0; transform: translateX(20px); }
.toast--success { border-left-color: var(--color-secondary); }
.toast--success .toast__icon { color: var(--color-secondary); }
.toast--error { border-left-color: var(--color-error); }
.toast--error .toast__icon { color: var(--color-error); }
.toast--warning { border-left-color: var(--color-warning); }
.toast--warning .toast__icon { color: var(--color-warning); }
.toast--info { border-left-color: var(--color-secondary); }
.toast--info .toast__icon { color: var(--color-secondary); }
.toast__icon { flex-shrink: 0; line-height: 0; }
.toast__body { flex: 1; min-width: 0; line-height: 1.4; word-break: break-word; }
.toast__close { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border: none; background: transparent; color: var(--color-text-soft); border-radius: var(--radius); cursor: pointer; padding: 0; }
.toast__close:hover { background: var(--color-bg-muted); color: var(--color-text); }
/* Modal (delete confirm) */
.modal-backdrop { position: fixed; inset: 0; background: rgba(22,35,42,.5); display: none; align-items: center; justify-content: center; z-index: 1000; padding: var(--space-4); }
.modal-backdrop[data-open="true"] { display: flex; }
.modal { background: var(--color-surface); border-radius: var(--radius-lg); padding: var(--space-6); max-width: 480px; width: 100%; box-shadow: var(--shadow-lg); }
.modal__title { font-family: var(--font-serif); font-weight: 400; margin-bottom: var(--space-3); }
.modal__body { color: var(--color-text-muted); margin-bottom: var(--space-4); }
.modal__body strong { color: var(--color-text); }
.modal__actions { display: flex; gap: var(--space-3); justify-content: flex-end; margin-top: var(--space-5); }
/* ──────────────────────────────────────────────────────────────────
Fase 03 — Inbox + handover (layout 3 columnas)
────────────────────────────────────────────────────────────────── */
.inbox-layout {
display: grid;
grid-template-columns: 320px 1fr 320px;
gap: var(--shell-gap);
/* Altura explícita = viewport - header - padding inferior del shell.
Sin esto, el thread se expande con el contenido y empuja al composer abajo. */
height: calc(100vh - var(--header-h) - var(--shell-gap));
min-height: 0;
}
/* Cuando solo hay lista + empty state (sin thread abierto): 2 columnas */
.inbox-layout:has(.inbox-empty) { grid-template-columns: 320px 1fr; }
.inbox-list,
.inbox-thread,
.inbox-detail,
.inbox-empty {
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
display: flex;
flex-direction: column;
height: 100%; /* ocupa toda la fila del grid */
min-height: 0; /* permite que hijos con overflow-y:auto puedan shrink */
overflow: hidden;
}
/* ── Lista de conversaciones ── */
.inbox-list__head { display: flex; align-items: center; justify-content: space-between; padding: var(--space-4); border-bottom: 1px solid var(--color-border-soft); flex-shrink: 0; gap: var(--space-2); }
.inbox-list__title { font-family: var(--font-serif); font-weight: 400; font-size: var(--text-xl); margin: 0; }
.inbox-list__head-right { display: inline-flex; align-items: center; gap: var(--space-2); }
.inbox-list__count {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 22px;
height: 22px;
padding: 0 7px;
background: var(--color-primary);
color: var(--color-on-primary);
font-size: 11px;
font-weight: 700;
border-radius: 999px;
font-variant-numeric: tabular-nums;
}
/* Badge "Sin conexión" — aparece cuando el poller falla 3 veces consecutivas */
.inbox-list__offline {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 3px 9px 3px 7px;
background: var(--color-error-bg);
color: var(--color-error);
font-size: 11px;
font-weight: 600;
border-radius: 999px;
animation: inbox-offline-pulse 2s ease-in-out infinite;
}
.inbox-list__offline[hidden] { display: none; }
@keyframes inbox-offline-pulse {
0%, 100% { opacity: 1; }
50% { opacity: .6; }
}
/* Tabs de filtro arriba de la lista */
.inbox-tabs { display: flex; gap: 4px; padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--color-border-soft); flex-shrink: 0; overflow-x: auto; }
.inbox-tabs__tab { flex-shrink: 0; padding: 6px 12px; font-size: var(--text-sm); font-weight: 500; color: var(--color-text-muted); background: transparent; border: 1px solid transparent; border-radius: 999px; cursor: pointer; transition: background-color .12s, color .12s; }
.inbox-tabs__tab:hover { background: var(--color-border-soft); color: var(--color-text); }
.inbox-tabs__tab.is-active { background: var(--color-primary); color: var(--color-on-primary); border-color: var(--color-primary); }
.inbox-list__items { list-style: none; padding: var(--space-2); margin: 0; overflow-y: auto; flex: 1; }
.inbox-list__items > li { margin-bottom: 2px; }
.inbox-list__empty { padding: var(--space-6) var(--space-4); color: var(--color-text-muted); text-align: center; font-size: var(--text-sm); }
.inbox-list__empty p { margin: 0; }
.inbox-list__item {
display: flex;
gap: var(--space-3);
padding: var(--space-3);
border-radius: var(--radius);
text-decoration: none;
color: var(--color-text);
transition: background-color .12s;
}
.inbox-list__item:hover { background: var(--color-bg-muted); text-decoration: none; }
.inbox-list__item--active { background: var(--color-bg-muted); }
.inbox-list__item--optout { opacity: .65; }
.inbox-list__avatar {
position: relative;
flex-shrink: 0;
width: 40px; height: 40px;
border-radius: 999px;
background: var(--color-primary);
color: var(--color-on-primary);
display: inline-flex; align-items: center; justify-content: center;
font-weight: 700;
font-size: var(--text-sm);
overflow: hidden;
}
.inbox-list__avatar-initial { position: absolute; inset: 0; display: inline-flex; align-items: center; justify-content: center; }
.inbox-list__avatar-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.inbox-list__verified { color: var(--color-secondary); vertical-align: text-bottom; margin-left: 2px; flex-shrink: 0; }
/* Dot superpuesto cuando la conversación está en handover (estilo IG online) */
.inbox-list__item--handover .inbox-list__avatar::after {
content: '';
position: absolute;
bottom: -1px;
right: -1px;
width: 12px;
height: 12px;
border-radius: 999px;
background: var(--color-accent);
box-shadow: 0 0 0 2px var(--color-surface);
}
.inbox-list__item--handover.inbox-list__item--active .inbox-list__avatar::after { box-shadow: 0 0 0 2px var(--color-bg-muted); }
.inbox-list__body { flex: 1; min-width: 0; }
.inbox-list__row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2); }
.inbox-list__handle { font-weight: 600; font-size: var(--text-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inbox-list__time { font-size: var(--text-xs); color: var(--color-text-soft); flex-shrink: 0; }
.inbox-list__preview { font-size: var(--text-sm); color: var(--color-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin: 2px 0 4px; }
.inbox-list__meta { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.inbox-list__account { font-size: var(--text-xs); color: var(--color-text-soft); }
.inbox-list__meta .badge { font-size: 10px; padding: 1px 6px; }
/* ── Thread ── */
.inbox-thread__head { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4); border-bottom: 1px solid var(--color-border-soft); flex-shrink: 0; }
.inbox-thread__avatar { position: relative; width: 40px; height: 40px; border-radius: 999px; background: var(--color-primary); color: var(--color-on-primary); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; flex-shrink: 0; overflow: hidden; }
.inbox-thread__avatar-initial { position: absolute; inset: 0; display: inline-flex; align-items: center; justify-content: center; }
.inbox-thread__avatar-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.inbox-thread__meta { min-width: 0; flex: 1; }
.inbox-thread__handle { font-family: var(--font-sans); font-weight: 700; font-size: var(--text-lg); margin: 0; display: inline-flex; align-items: center; gap: 4px; }
.inbox-thread__handle a { color: inherit; text-decoration: none; }
.inbox-thread__handle a:hover { text-decoration: underline; }
.inbox-thread__verified { color: var(--color-secondary); flex-shrink: 0; }
.inbox-thread__name { font-size: var(--text-sm); color: var(--color-text-muted); margin: 0; }
.inbox-thread__sub { font-size: var(--text-sm); color: var(--color-text-muted); margin: 2px 0 0; }
.inbox-thread__sub a { color: var(--color-secondary); }
/* Contexto operativo (der del head, ~30%): cuenta atendida + estado del bot/handover/optout */
.inbox-thread__context { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; flex-shrink: 0; text-align: right; min-width: 0; }
.inbox-thread__account { font-size: var(--text-sm); color: var(--color-secondary); text-decoration: none; font-weight: 500; }
.inbox-thread__account:hover { text-decoration: underline; }
.inbox-thread__status { display: inline-flex; align-items: center; gap: 4px; font-size: var(--text-xs); font-weight: 500; }
.inbox-thread__status--bot { color: var(--color-text-muted); }
.inbox-thread__status--handover { color: var(--color-warning); }
.inbox-thread__status--optout { color: var(--color-error); }
@media (max-width: 720px) {
.inbox-thread__context { display: none; }
}
.inbox-thread__messages { flex: 1; overflow-y: auto; padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-3); background: var(--color-canvas); }
/* Fade del contenido del thread cuando la conversación está en opt-out — misma intensidad
que .inbox-list__item--optout para consistencia visual. Header (handle + avatar) y banner
del composer quedan a full opacity para que el contexto siga legible. */
.inbox-thread--optout .inbox-thread__messages > * { opacity: .65; }
.inbox-thread__empty { color: var(--color-text-soft); text-align: center; padding: var(--space-6); }
.inbox-thread__date-sep { text-align: center; font-size: var(--text-xs); color: var(--color-text-soft); text-transform: uppercase; letter-spacing: .04em; padding: var(--space-2) 0; }
/* ── Burbujas ── */
.msg { display: flex; }
.msg--user { justify-content: flex-start; }
.msg--assistant { justify-content: flex-end; }
.msg__bubble {
max-width: 70%;
padding: var(--space-3) var(--space-4);
border-radius: 18px;
background: var(--color-surface);
border: 1px solid var(--color-border);
color: var(--color-text);
line-height: 1.4;
}
.msg--user .msg__bubble {
border-bottom-left-radius: 4px;
}
.msg--assistant .msg__bubble {
background: var(--color-primary);
color: var(--color-on-primary);
border-color: var(--color-primary);
border-bottom-right-radius: 4px;
}
.msg--operator .msg__bubble {
background: var(--color-secondary);
color: var(--color-on-secondary);
border-color: var(--color-secondary);
}
.msg__content { word-wrap: break-word; white-space: pre-wrap; }
.msg__footer { display: flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 11px; opacity: .7; }
.msg--user .msg__footer { color: var(--color-text-soft); opacity: 1; }
.msg__sender { font-weight: 600; }
.msg__sep { opacity: .5; }
.msg__time { font-variant-numeric: tabular-nums; }
.msg__status { display: inline-flex; align-items: center; gap: 4px; }
.msg__status--failed { color: var(--color-error); opacity: 1; font-weight: 600; }
.msg--failed .msg__bubble { border-color: var(--color-error); background: var(--color-error-bg); color: var(--color-text); }
.msg--sending .msg__bubble { opacity: .65; }
.msg__retry { margin-left: 6px; padding: 0 6px; height: 18px; font-size: 11px; background: transparent; border: 1px solid currentColor; border-radius: 999px; color: var(--color-error); cursor: pointer; font-weight: 600; }
.msg__retry:hover { background: var(--color-error); color: white; }
/* ── Composer ── */
.inbox-thread__composer { padding: var(--space-4); border-top: 1px solid var(--color-border-soft); flex-shrink: 0; background: var(--color-surface); }
.composer { display: flex; flex-direction: column; gap: var(--space-3); }
.composer--disabled { flex-direction: row; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
.composer--disabled > .btn { flex-shrink: 0; }
.composer__input { width: 100%; min-height: 60px; max-height: 180px; resize: vertical; padding: var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius); font-family: inherit; font-size: var(--text-base); }
.composer__input:focus { outline: none; border-color: var(--color-primary); }
.composer__actions { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
.composer__hint { font-size: var(--text-xs); color: var(--color-text-soft); flex: 1; min-width: 0; }
.composer__notice { display: inline-flex; align-items: center; gap: var(--space-2); margin: 0; color: var(--color-text-muted); font-size: var(--text-sm); flex: 1; min-width: 0; }
.composer__notice > .icon { flex-shrink: 0; }
/* En anchos chicos, el botón del composer--disabled baja a línea propia full-width */
@media (max-width: 720px) {
.composer--disabled { flex-direction: column; align-items: stretch; }
.composer--disabled > .btn { width: 100%; justify-content: center; }
.composer__notice { flex: none; }
}
.btn--block { width: 100%; justify-content: center; }
/* ── Detail panel (3era columna) ── */
.inbox-detail { padding: var(--space-4); overflow-y: auto; gap: var(--space-4); }
.inbox-detail__section { display: flex; flex-direction: column; gap: var(--space-2); padding-bottom: var(--space-4); border-bottom: 1px solid var(--color-border-soft); }
.inbox-detail__section:last-child { border-bottom: none; padding-bottom: 0; }
.inbox-detail__section--profile { align-items: center; }
.inbox-detail__avatar { position: relative; width: 64px; height: 64px; border-radius: 999px; background: var(--color-primary); color: var(--color-on-primary); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: var(--text-xl); margin: 0 auto; overflow: hidden; }
.inbox-detail__avatar-initial { position: absolute; inset: 0; display: inline-flex; align-items: center; justify-content: center; }
.inbox-detail__avatar-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.inbox-detail__handle { text-align: center; font-family: var(--font-sans); font-weight: 700; font-size: var(--text-lg); margin: 0; display: inline-flex; align-items: center; justify-content: center; gap: 4px; }
.inbox-detail__handle a { color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: 4px; }
.inbox-detail__handle a:hover { text-decoration: underline; }
.inbox-detail__handle-icon { color: var(--color-text-soft); }
.inbox-detail__verified { color: var(--color-secondary); flex-shrink: 0; }
.inbox-detail__sub { text-align: center; color: var(--color-text-soft); font-size: var(--text-sm); margin: 0; }
.inbox-detail__relation { display: inline-flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
.inbox-detail__chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; background: var(--color-bg-muted, #FAFAF8); border: 1px solid var(--color-border-soft); font-size: 11px; color: var(--color-text-muted); font-weight: 500; }
.inbox-detail__row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-2); font-size: var(--text-sm); }
.inbox-detail__label { color: var(--color-text-muted); }
.inbox-detail__value { color: var(--color-text); font-weight: 500; text-align: right; }
.inbox-detail__section-label { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--color-text-soft); }
.inbox-detail__handover { font-size: var(--text-sm); color: var(--color-text); margin: 0; padding: var(--space-2) var(--space-3); background: var(--color-warning-bg); border-radius: var(--radius); }
/* Widget de estado del bot (panel derecho) */
.bot-widget { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-3) var(--space-3) var(--space-2); border-radius: var(--radius-lg); margin-bottom: var(--space-3); }
.bot-widget__icon {
flex-shrink: 0;
width: 48px; height: 48px;
border-radius: 999px;
display: inline-flex; align-items: center; justify-content: center;
color: white;
}
.bot-widget__initials { font-weight: 700; font-size: 16px; letter-spacing: .02em; }
.bot-widget__body { min-width: 0; flex: 1; }
.bot-widget__title { font-family: var(--font-sans); font-weight: 700; font-size: var(--text-base); margin: 0 0 2px; color: var(--color-text); }
.bot-widget__meta { font-size: var(--text-sm); color: var(--color-text-muted); margin: 0; line-height: 1.35; }
.bot-widget--active { background: var(--color-success-bg); }
.bot-widget--active .bot-widget__icon { background: var(--color-secondary); }
.bot-widget--handover { background: var(--color-warning-bg); }
.bot-widget--handover .bot-widget__icon { background: var(--color-accent); }
.inbox-detail__traits { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 4px; font-size: var(--text-sm); }
.inbox-detail__traits strong { color: var(--color-text-muted); font-weight: 500; }
.inbox-detail__prompt summary { cursor: pointer; font-size: var(--text-sm); color: var(--color-secondary); }
.inbox-detail__prompt pre { font-family: var(--font-mono); font-size: 11px; white-space: pre-wrap; color: var(--color-text-muted); background: var(--color-bg-muted); padding: var(--space-3); border-radius: var(--radius); margin: var(--space-2) 0 0; }
.inbox-detail__link { display: inline-block; margin-top: var(--space-2); font-size: var(--text-sm); }
/* ── Empty state (cuando no hay thread abierto) ── */
.inbox-empty { padding: var(--space-8) var(--space-6); text-align: center; align-items: center; justify-content: center; }
.inbox-empty__icon { display: inline-flex; align-items: center; justify-content: center; width: 96px; height: 96px; border-radius: var(--radius-lg); background: var(--color-bg-muted); color: var(--color-secondary); margin-bottom: var(--space-4); }
.inbox-empty__title { font-family: var(--font-serif); font-weight: 400; margin-bottom: var(--space-3); }
.inbox-empty__body { color: var(--color-text-muted); max-width: 420px; margin: 0 auto; }
.inbox-empty__hint { color: var(--color-text-soft); font-size: var(--text-sm); max-width: 480px; margin: var(--space-4) auto 0; }
/* ── Webhook log viewer (Fase 04c) ─────────────────────────────────────── */
.webhook-log__health { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-4); flex-wrap: wrap; }
.webhook-log__health-pill { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
.webhook-log__health-pill--ok { background: var(--color-success-bg); color: var(--color-success); }
.webhook-log__health-pill--error { background: var(--color-error-bg); color: var(--color-error); }
.webhook-log__health-pill--skipped { background: var(--color-bg-muted); color: var(--color-text-muted); }
.webhook-log__live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--color-success); margin-left: var(--space-2); animation: webhook-pulse 2s ease-in-out infinite; }
@keyframes webhook-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .4; transform: scale(.85); } }
.webhook-log__filters { display: flex; align-items: end; gap: var(--space-3); margin-bottom: var(--space-4); flex-wrap: wrap; padding: var(--space-3); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); }
.webhook-log__filter { display: flex; flex-direction: column; gap: 4px; font-size: var(--text-sm); min-width: 140px; }
.webhook-log__filter > span { color: var(--color-text-muted); font-weight: 500; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; }
.webhook-log__filter select { padding: 6px 8px; border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-surface); }
.webhook-log__table-wrap { overflow-x: auto; }
.webhook-log__table { font-variant-numeric: tabular-nums; }
.webhook-log__table th { white-space: nowrap; }
.webhook-log__cell-time { color: var(--color-text-muted); white-space: nowrap; font-family: ui-monospace, SF Mono, Menlo, monospace; font-size: 12px; }
.webhook-log__cell-trace { font-family: ui-monospace, SF Mono, Menlo, monospace; font-size: 11px; color: var(--color-text-soft); }
.webhook-log__cell-event { font-family: ui-monospace, SF Mono, Menlo, monospace; font-size: 12px; }
.webhook-log__cell-account { white-space: nowrap; }
.webhook-log__cell-ms { text-align: right; color: var(--color-text-muted); font-size: 12px; }
.webhook-log__cell-summary { color: var(--color-text); max-width: 480px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.webhook-log__muted { color: var(--color-text-soft); }
.webhook-log__empty { text-align: center; padding: var(--space-5) !important; color: var(--color-text-muted); }
.webhook-log__row { cursor: pointer; transition: background-color .1s; }
.webhook-log__row:hover { background: var(--color-bg-muted); }
.webhook-log__row--expanded { background: var(--color-bg-muted); }
.webhook-log__row--error td:first-child { border-left: 3px solid var(--color-error); }
.webhook-log__row--skipped td:first-child { border-left: 3px solid var(--color-text-soft); }
.webhook-log__row--ok td:first-child { border-left: 3px solid transparent; }
.webhook-log__day-separator td { background: var(--color-bg-muted); color: var(--color-text-muted); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; padding: 6px 12px; border-top: 1px dashed var(--color-border); }
.webhook-log__status { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.webhook-log__status--ok { background: var(--color-success-bg); color: var(--color-success); }
.webhook-log__status--error { background: var(--color-error-bg); color: var(--color-error); }
.webhook-log__status--skipped { background: var(--color-bg-muted); color: var(--color-text-muted); }
.webhook-log__detail-row td { padding: 0 !important; background: var(--color-bg-muted); }
.webhook-log__detail { padding: var(--space-4); background: var(--color-bg-muted); border-top: 1px solid var(--color-border-soft); display: grid; gap: var(--space-3); }
.webhook-log__detail-meta { display: grid; grid-template-columns: max-content 1fr; gap: 4px var(--space-4); margin: 0 0 var(--space-2) 0; font-size: var(--text-sm); }
.webhook-log__detail-meta dt { color: var(--color-text-muted); font-weight: 500; }
.webhook-log__detail-meta dd { margin: 0; }
.webhook-log__detail-block h4 { font-size: var(--text-sm); margin: 0 0 var(--space-2) 0; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: .04em; font-weight: 600; }
.webhook-log__pre { font-family: ui-monospace, SF Mono, Menlo, monospace; font-size: 12px; padding: var(--space-3); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); max-height: 400px; overflow: auto; margin: 0; white-space: pre-wrap; word-break: break-all; }
/* ── Probar bot (Fase 04c-2) ───────────────────────────────────────────── */
.probar-bot__result { margin-top: var(--space-3); padding: var(--space-3); background: var(--color-bg-muted); border: 1px solid var(--color-border-soft); border-radius: var(--radius); }
.probar-bot__loading { color: var(--color-text-muted); font-style: italic; margin: 0; }
.probar-bot__error { color: var(--color-error); margin: 0; font-size: var(--text-sm); }
.probar-bot__bubble { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-3) var(--space-4); margin-bottom: var(--space-3); line-height: 1.5; white-space: pre-wrap; }
.probar-bot__stats { display: grid; grid-template-columns: max-content 1fr; gap: 2px var(--space-4); margin: 0; font-size: var(--text-sm); }
.probar-bot__stats dt { color: var(--color-text-muted); font-weight: 500; }
.probar-bot__stats dd { margin: 0; font-variant-numeric: tabular-nums; }
/* ── Páginas legales (Política, Términos, Eliminación de datos) ───────── */
.legal-page {
max-width: 720px;
margin: 0 auto;
padding: var(--space-6) 0 var(--space-7);
color: var(--color-text);
font-size: var(--text-md);
line-height: 1.7;
}
.legal-page__header { margin-bottom: var(--space-6); }
.legal-page h1 {
font-family: var(--font-serif);
font-size: var(--text-3xl);
line-height: 1.15;
margin: 0 0 var(--space-2);
color: var(--color-text);
}
.legal-page__meta {
font-size: var(--text-sm);
color: var(--color-text-muted);
margin: 0;
}
.legal-page__lead {
font-size: var(--text-lg);
line-height: 1.55;
color: var(--color-text);
margin: 0 0 var(--space-6);
}
.legal-page__toc {
background: var(--color-bg-muted);
border: 1px solid var(--color-border-soft);
border-radius: var(--radius-lg);
padding: var(--space-4) var(--space-5);
margin: 0 0 var(--space-6);
font-size: var(--text-sm);
}
.legal-page__toc strong {
display: block;
font-size: 11px;
text-transform: uppercase;
letter-spacing: .06em;
color: var(--color-text-soft);
margin-bottom: var(--space-2);
font-weight: 600;
}
.legal-page__toc ol { margin: 0; padding-left: var(--space-5); display: grid; gap: 4px; }
.legal-page__toc a { color: var(--color-secondary); text-decoration: none; }
.legal-page__toc a:hover { text-decoration: underline; }
.legal-page section { margin: 0 0 var(--space-6); }
.legal-page h2 {
font-family: var(--font-serif);
font-size: var(--text-2xl);
line-height: 1.25;
margin: var(--space-6) 0 var(--space-3);
color: var(--color-text);
scroll-margin-top: var(--space-5);
}
.legal-page h3 {
font-family: var(--font-sans);
font-size: var(--text-md);
font-weight: 700;
margin: var(--space-5) 0 var(--space-2);
color: var(--color-text);
}
.legal-page p { margin: 0 0 var(--space-3); }
.legal-page ul,
.legal-page ol { margin: 0 0 var(--space-4); padding-left: var(--space-5); }
.legal-page li { margin: 0 0 6px; }
.legal-page a {
color: var(--color-secondary);
text-decoration: underline;
text-underline-offset: 2px;
}
.legal-page a:hover { color: var(--color-secondary-hover); }
.legal-page code {
font-family: var(--font-mono);
font-size: .9em;
background: var(--color-bg-muted);
padding: 1px 6px;
border-radius: var(--radius-sm);
color: var(--color-text);
}
.legal-page__contact {
background: var(--color-bg-muted);
border-left: 3px solid var(--color-secondary);
padding: var(--space-3) var(--space-4);
border-radius: 0 var(--radius) var(--radius) 0;
margin: var(--space-3) 0;
}
@media (max-width: 640px) {
.legal-page { padding: var(--space-5) 0; }
.legal-page h1 { font-size: var(--text-2xl); }
.legal-page h2 { font-size: var(--text-xl); }
}
/* ══════════════════════════════════════════════════════════════════════
Landing pública (Fase 05b)
Navbar centrado flotante pill + hero con mockup chat IG + cards +
pasos + FAQ + CTA band + footer multi-columna.
Inspiración estructural: home-6 de Lexend. Ejecución con paleta
Mirage propia + Fraunces/DM Sans, sin dependencias de JS.
══════════════════════════════════════════════════════════════════════ */
html { scroll-behavior: smooth; scroll-padding-top: 100px; }
.landing-body {
background: var(--color-bg);
min-height: 100vh;
display: flex;
flex-direction: column;
font-family: var(--font-sans);
color: var(--color-text);
}
.landing-skip {
position: absolute;
left: -9999px;
top: 0;
background: var(--color-primary);
color: var(--color-on-primary);
padding: var(--space-2) var(--space-4);
border-radius: var(--radius);
z-index: 1000;
}
.landing-skip:focus { left: var(--space-4); top: var(--space-4); }
/* ── Navbar centrado flotante pill ─────────────────────────────────── */
.landing-nav {
position: sticky;
top: var(--space-3);
z-index: 50;
padding: 0 var(--space-4);
margin-top: var(--space-3);
}
.landing-nav__inner {
max-width: 910px;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
gap: var(--space-4);
padding: 10px 14px 10px 20px;
background: rgba(255, 255, 255, 0.85);
backdrop-filter: saturate(180%) blur(12px);
-webkit-backdrop-filter: saturate(180%) blur(12px);
border: 1px solid var(--color-border-soft);
border-radius: 999px;
box-shadow: var(--shadow-sm);
}
.landing-nav__brand {
display: inline-flex;
align-items: center;
gap: var(--space-2);
color: var(--color-text);
text-decoration: none;
font-size: var(--text-md);
}
.landing-nav__brand:hover { text-decoration: none; }
.landing-nav__brand img { display: block; }
.landing-nav__brand strong { font-weight: 700; letter-spacing: -0.01em; }
.landing-nav__links {
display: flex;
list-style: none;
padding: 0;
margin: 0;
gap: var(--space-5);
justify-self: center;
font-size: var(--text-sm);
}
.landing-nav__links a {
color: var(--color-text-muted);
text-decoration: none;
font-weight: 500;
transition: color .15s;
}
.landing-nav__links a:hover { color: var(--color-text); }
.landing-nav__cta {
display: flex;
align-items: center;
gap: var(--space-3);
justify-self: end;
}
.landing-nav__link {
color: var(--color-text-muted);
text-decoration: none;
font-size: var(--text-sm);
font-weight: 500;
}
.landing-nav__link:hover { color: var(--color-text); }
@media (max-width: 960px) {
.landing-nav__inner { grid-template-columns: auto 1fr; padding: 10px 12px 10px 16px; }
.landing-nav__links { display: none; }
.landing-nav__cta { justify-self: end; }
.landing-nav__link { display: none; }
}
/* ── Main container ────────────────────────────────────────────────── */
.landing-main {
flex: 1;
width: 100%;
max-width: 1160px;
margin: 0 auto;
padding: var(--space-6) var(--space-4);
}
/* ── Hero ──────────────────────────────────────────────────────────── */
.landing-hero {
padding: var(--space-7) 0 var(--space-6);
}
.landing-hero__grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-6);
align-items: center;
text-align: center;
max-width: 1240px;
margin-left: auto;
margin-right: auto;
}
@media (min-width: 900px) {
.landing-hero__grid {
grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
gap: var(--space-6);
text-align: left;
}
}
.landing-hero__copy {
display: flex;
flex-direction: column;
align-items: center;
}
@media (min-width: 900px) {
.landing-hero__copy { align-items: flex-start; }
}
.landing-hero__badge {
display: inline-block;
font-size: 11px;
letter-spacing: 0.09em;
text-transform: uppercase;
color: var(--color-secondary);
background: var(--color-secondary-bg);
padding: 6px 14px;
border-radius: 999px;
font-weight: 600;
margin-bottom: var(--space-5);
}
.landing-hero__title {
font-family: var(--font-serif);
font-weight: 600;
font-size: clamp(36px, 5.2vw, 56px);
line-height: 1.05;
letter-spacing: -0.022em;
max-width: 560px;
margin: 0 0 var(--space-4);
color: var(--color-text);
}
.landing-hero__sub {
font-size: var(--text-lg);
line-height: 1.55;
color: var(--color-text-muted);
max-width: 520px;
margin: 0 0 var(--space-5);
}
.landing-hero__ctas {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-2);
}
@media (min-width: 900px) {
.landing-hero__ctas { align-items: flex-start; }
}
.landing-hero__ctas small { color: var(--color-text-soft); font-size: var(--text-xs); }
.landing-hero__cta-wrap {
position: relative;
display: inline-flex;
align-items: center;
}
.landing-hero__arrow {
position: absolute;
left: 100%;
top: 50%;
transform: translateY(-30%);
width: 90px;
height: 45px;
margin-left: var(--space-2);
pointer-events: none;
}
@media (max-width: 900px) { .landing-hero__arrow { display: none; } }
/* ── Hero visual: iPhone en mano con chat overlay ─────────────────── */
.landing-hero__visual {
position: relative;
width: 100%;
max-width: 680px;
margin: 0 auto;
aspect-ratio: 900 / 866;
isolation: isolate;
container-type: inline-size;
container-name: hero-visual;
}
.landing-hero__spring {
position: absolute;
top: 8%;
right: -14px;
width: 60px;
height: 130px;
z-index: 0;
pointer-events: none;
}
@media (max-width: 900px) { .landing-hero__spring { display: none; } }
.landing-hero__phone {
position: relative;
z-index: 1;
display: block;
width: 100%;
height: auto;
filter: drop-shadow(0 24px 40px rgba(22, 35, 42, 0.18));
}
.landing-hero__screen {
position: absolute;
z-index: 2;
top: 21%;
left: 24.4%;
width: 32.6%;
height: 66%;
overflow: hidden;
background: var(--color-bg);
border-radius: 6% / 4.8%;
display: flex;
flex-direction: column;
box-sizing: border-box;
/* Screen es su propio container para que el chat escale con su ancho real */
container-type: inline-size;
container-name: phone-screen;
/* Fade sutil al final para insinuar que la conversación sigue */
-webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 92%, transparent 100%);
mask-image: linear-gradient(to bottom, #000 0%, #000 92%, transparent 100%);
}
/* Chat interno del iPhone (versión compacta) — escala con container queries
respecto al screen. Screen ~222px → 8cqi ≈ 17.8px (legible). */
.landing-phone-chat {
display: flex;
flex-direction: column;
height: 100%;
font-family: var(--font-sans);
font-size: 6cqi;
line-height: 1.4;
}
.landing-phone-chat__header {
display: flex;
align-items: center;
gap: 0.55em;
padding: 1em 0.75em 0.55em;
border-bottom: 1px solid var(--color-border-soft);
background: var(--color-surface);
flex-shrink: 0;
}
.landing-phone-chat__avatar {
width: 1.85em;
height: 1.85em;
flex-shrink: 0;
border-radius: 999px;
background: var(--color-primary);
color: var(--color-on-primary);
display: inline-flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 0.9em;
text-transform: uppercase;
}
.landing-phone-chat__identity {
line-height: 1.15;
min-width: 0;
display: flex;
flex-direction: column;
}
.landing-phone-chat__identity strong {
font-size: 0.95em;
color: var(--color-text);
font-weight: 700;
letter-spacing: -0.005em;
}
.landing-phone-chat__identity small {
font-size: 0.75em;
color: var(--color-secondary);
font-weight: 500;
}
.landing-phone-chat__body {
flex: 1;
padding: 0.7em 0.65em 0.9em;
display: flex;
flex-direction: column;
gap: 0.4em;
overflow: hidden;
background: var(--color-bg);
}
.landing-phone-chat .landing-msg { display: flex; }
.landing-phone-chat .landing-msg--in { justify-content: flex-start; }
.landing-phone-chat .landing-msg--out { justify-content: flex-end; }
.landing-phone-chat .landing-msg__bubble {
max-width: 86%;
padding: 0.45em 0.7em;
border-radius: 1em;
font-size: 0.92em;
line-height: 1.4;
letter-spacing: 0;
}
.landing-phone-chat .landing-msg--in .landing-msg__bubble {
background: var(--color-bg-muted);
color: var(--color-text);
border-bottom-left-radius: 0.32em;
}
.landing-phone-chat .landing-msg--out .landing-msg__bubble {
background: var(--color-secondary);
color: var(--color-on-secondary);
border-bottom-right-radius: 0.32em;
}
/* Animación de aparición de burbujas — solo desktop.
En mobile queda estático para no distraer al hacer scroll rápido.
Cadencia asimétrica: los mensajes entrantes aparecen más rápido (usuario
tipeando), los salientes con más pausa (chatlar "pensando"). */
@media (min-width: 900px) {
.landing-phone-chat .landing-msg {
opacity: 0;
transform: translateY(6px);
animation: landing-msg-in 0.45s cubic-bezier(0.2, 0.7, 0.3, 1) forwards;
}
.landing-phone-chat .landing-msg:nth-child(1) { animation-delay: 0.35s; } /* in */
.landing-phone-chat .landing-msg:nth-child(2) { animation-delay: 1.35s; } /* out (pausa "pensando") */
.landing-phone-chat .landing-msg:nth-child(3) { animation-delay: 1.95s; } /* in */
.landing-phone-chat .landing-msg:nth-child(4) { animation-delay: 2.85s; } /* out */
.landing-phone-chat .landing-msg:nth-child(5) { animation-delay: 3.45s; } /* in */
.landing-phone-chat .landing-msg:nth-child(6) { animation-delay: 4.20s; } /* out */
.landing-phone-chat .landing-msg:nth-child(7) { animation-delay: 4.80s; } /* in */
}
@keyframes landing-msg-in {
from { opacity: 0; transform: translateY(6px); }
to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
.landing-phone-chat .landing-msg {
opacity: 1 !important;
transform: none !important;
animation: none !important;
}
}
/* ── Mockup chat IG (CSS puro) ─────────────────────────────────────── */
.landing-mockup {
max-width: 480px;
margin: 0 auto;
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: 20px;
box-shadow: var(--shadow-lg);
overflow: hidden;
text-align: left;
}
.landing-mockup__header {
display: flex;
align-items: center;
gap: var(--space-3);
padding: var(--space-3) var(--space-4);
border-bottom: 1px solid var(--color-border-soft);
background: var(--color-bg);
}
.landing-mockup__avatar {
width: 36px;
height: 36px;
flex-shrink: 0;
border-radius: 999px;
background: var(--color-primary);
color: var(--color-on-primary);
display: inline-flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: var(--text-md);
text-transform: uppercase;
}
.landing-mockup__identity { flex: 1; min-width: 0; line-height: 1.2; }
.landing-mockup__identity strong { display: block; font-size: var(--text-sm); color: var(--color-text); }
.landing-mockup__identity small { display: block; font-size: 11px; color: var(--color-text-soft); }
.landing-mockup__tag {
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
padding: 4px 10px;
border-radius: 999px;
background: var(--color-accent);
color: var(--color-on-accent);
flex-shrink: 0;
}
.landing-mockup__body {
display: flex;
flex-direction: column;
gap: var(--space-2);
padding: var(--space-4);
background: var(--color-bg);
}
.landing-msg { display: flex; }
.landing-msg--in { justify-content: flex-start; }
.landing-msg--out { justify-content: flex-end; }
.landing-msg__bubble {
max-width: 78%;
padding: 10px 14px;
border-radius: 18px;
font-size: var(--text-sm);
line-height: 1.4;
}
.landing-msg--in .landing-msg__bubble {
background: var(--color-bg-muted);
color: var(--color-text);
border-bottom-left-radius: 6px;
}
.landing-msg--out .landing-msg__bubble {
background: var(--color-secondary);
color: var(--color-on-secondary);
border-bottom-right-radius: 6px;
}
.landing-mockup__footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-3);
padding: 10px var(--space-4);
border-top: 1px solid var(--color-border-soft);
background: var(--color-surface);
}
.landing-mockup__footer small { color: var(--color-text-soft); font-size: 11px; }
.landing-mockup__typing {
display: inline-flex;
gap: 4px;
padding: 6px 12px;
background: var(--color-bg-muted);
border-radius: 999px;
}
.landing-mockup__typing span {
width: 6px;
height: 6px;
border-radius: 999px;
background: var(--color-text-soft);
animation: landing-typing 1.4s ease-in-out infinite;
}
.landing-mockup__typing span:nth-child(2) { animation-delay: 0.2s; }
.landing-mockup__typing span:nth-child(3) { animation-delay: 0.4s; }
@keyframes landing-typing {
0%, 60%, 100% { opacity: 0.3; transform: translateY(0); }
30% { opacity: 1; transform: translateY(-3px); }
}
@media (prefers-reduced-motion: reduce) {
.landing-mockup__typing span { animation: none; opacity: 0.6; }
}
/* ── Trust strip ───────────────────────────────────────────────────── */
.landing-trust {
padding: var(--space-5) 0;
border-top: 1px solid var(--color-border-soft);
border-bottom: 1px solid var(--color-border-soft);
margin: var(--space-6) 0;
}
.landing-trust__list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--space-4) var(--space-6);
font-size: var(--text-xs);
text-transform: uppercase;
letter-spacing: 0.09em;
font-weight: 600;
color: var(--color-text-soft);
}
/* ── Secciones genéricas ───────────────────────────────────────────── */
.landing-section { padding: var(--space-7) 0; }
.landing-section__head { text-align: center; max-width: 700px; margin: 0 auto var(--space-6); }
.landing-section__head h2 {
font-family: var(--font-serif);
font-weight: 600;
font-size: clamp(28px, 4vw, 36px);
line-height: 1.15;
letter-spacing: -0.015em;
margin: 0 0 var(--space-3);
color: var(--color-text);
}
.landing-section__head p {
font-size: var(--text-md);
color: var(--color-text-muted);
margin: 0;
line-height: 1.55;
}
/* ── Features grid (6 cards) ───────────────────────────────────────── */
.landing-features {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-3);
}
@media (min-width: 720px) { .landing-features { grid-template-columns: repeat(2, 1fr); gap: var(--space-4); } }
@media (min-width: 980px) { .landing-features { grid-template-columns: repeat(3, 1fr); } }
.landing-card {
display: flex;
flex-direction: column;
gap: var(--space-3);
padding: var(--space-5);
background: var(--color-bg-muted);
border: 1px solid transparent;
border-radius: var(--radius-lg);
transition: transform .2s ease, background-color .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.landing-card:hover {
transform: translateY(-2px);
background: var(--color-surface);
border-color: var(--color-border);
box-shadow: var(--shadow);
}
.landing-card__icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border-radius: 12px;
background: var(--color-surface);
color: var(--color-secondary);
box-shadow: var(--shadow-sm);
}
.landing-card:hover .landing-card__icon { background: var(--color-secondary-bg); }
.landing-card h3 {
font-family: var(--font-sans);
font-size: var(--text-lg);
font-weight: 700;
margin: 0;
color: var(--color-text);
letter-spacing: -0.005em;
}
.landing-card p {
font-size: var(--text-base);
color: var(--color-text-muted);
margin: 0;
line-height: 1.55;
}
/* ── Cómo funciona (3 pasos) ───────────────────────────────────────── */
.landing-steps {
list-style: none;
padding: 0;
margin: 0;
display: grid;
grid-template-columns: 1fr;
gap: var(--space-5);
}
@media (min-width: 860px) {
.landing-steps { grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
}
.landing-steps li {
padding: var(--space-4);
position: relative;
}
.landing-step__num {
display: block;
font-family: var(--font-serif);
font-size: 56px;
line-height: 1;
color: var(--color-text-soft);
opacity: 0.5;
letter-spacing: -0.03em;
margin-bottom: var(--space-3);
font-weight: 400;
}
.landing-steps h3 {
font-family: var(--font-sans);
font-size: var(--text-lg);
font-weight: 700;
margin: 0 0 var(--space-2);
color: var(--color-text);
letter-spacing: -0.005em;
}
.landing-steps p {
font-size: var(--text-base);
color: var(--color-text-muted);
margin: 0;
line-height: 1.55;
}
/* ── Transparencia ─────────────────────────────────────────────────── */
.landing-transparency {
margin: var(--space-6) 0;
padding: var(--space-6) var(--space-4);
background: var(--color-bg-muted);
border-radius: var(--radius-lg);
}
.landing-transparency__inner {
max-width: 700px;
margin: 0 auto;
text-align: center;
}
.landing-transparency h2 {
font-family: var(--font-serif);
font-weight: 600;
font-size: clamp(22px, 3vw, 28px);
line-height: 1.2;
margin: 0 0 var(--space-3);
color: var(--color-text);
letter-spacing: -0.015em;
}
.landing-transparency p {
font-size: var(--text-md);
line-height: 1.6;
color: var(--color-text-muted);
margin: 0 0 var(--space-3);
}
.landing-transparency__links {
display: inline-flex;
flex-wrap: wrap;
gap: var(--space-3);
justify-content: center;
font-size: var(--text-sm);
}
.landing-transparency__links a {
color: var(--color-secondary);
text-decoration: underline;
text-underline-offset: 3px;
}
.landing-transparency__links a:hover { color: var(--color-secondary-hover); }
.landing-transparency__links span { color: var(--color-text-soft); }
/* ── FAQ ───────────────────────────────────────────────────────────── */
.landing-faq {
max-width: 780px;
margin: 0 auto;
display: flex;
flex-direction: column;
gap: var(--space-2);
}
.landing-faq__item {
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius);
transition: border-color .15s ease;
}
.landing-faq__item[open] { border-color: var(--color-text-soft); }
.landing-faq__item summary {
cursor: pointer;
padding: var(--space-4) var(--space-5);
font-weight: 600;
font-size: var(--text-md);
color: var(--color-text);
list-style: none;
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-3);
}
.landing-faq__item summary::-webkit-details-marker { display: none; }
.landing-faq__item summary::after {
content: '+';
font-size: 22px;
line-height: 1;
color: var(--color-text-muted);
font-weight: 400;
flex-shrink: 0;
transition: transform .2s ease;
}
.landing-faq__item[open] summary::after { content: '−'; }
.landing-faq__body {
padding: 0 var(--space-5) var(--space-4);
color: var(--color-text-muted);
font-size: var(--text-base);
line-height: 1.6;
}
.landing-faq__body p { margin: 0; }
.landing-faq__body a { color: var(--color-secondary); }
/* ── CTA band ──────────────────────────────────────────────────────── */
.landing-cta-band {
margin: var(--space-7) 0 var(--space-6);
padding: var(--space-7) var(--space-5);
background: var(--color-primary);
color: var(--color-on-primary);
border-radius: var(--radius-lg);
text-align: center;
}
.landing-cta-band__inner { max-width: 640px; margin: 0 auto; }
.landing-cta-band h2 {
font-family: var(--font-serif);
font-weight: 600;
font-size: clamp(24px, 3.5vw, 32px);
line-height: 1.15;
margin: 0 0 var(--space-3);
color: var(--color-on-primary);
letter-spacing: -0.015em;
}
.landing-cta-band p {
font-size: var(--text-md);
color: rgba(255, 255, 255, 0.75);
margin: 0 0 var(--space-5);
line-height: 1.55;
}
/* ══════════════════════════════════════════════════════════════════════
Footer dark con wordmark gigante (v2 · inspirado en weelis.com)
Grid 4-col en fila 1 + fila 2 asimétrica (col 1 vacía) + wordmark
Fraunces al fondo + trust column con checks + bottom bar minimal.
══════════════════════════════════════════════════════════════════════ */
.landing-footer {
background: var(--color-primary);
color: rgba(255, 255, 255, 0.72);
padding: var(--space-7) var(--space-4) var(--space-4);
margin-top: var(--space-7);
overflow: hidden;
position: relative;
}
.landing-footer__container {
max-width: 1240px;
margin: 0 auto;
position: relative;
z-index: 1;
}
.landing-footer__grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-5) var(--space-6);
}
@media (min-width: 720px) {
.landing-footer__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 960px) {
.landing-footer__grid { grid-template-columns: repeat(4, 1fr); }
}
.landing-footer__col > h4 {
font-family: var(--font-sans);
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.09em;
color: #ffffff;
font-weight: 700;
margin: 0 0 var(--space-3);
}
.landing-footer__col p {
font-size: var(--text-sm);
color: rgba(255, 255, 255, 0.62);
margin: 0 0 4px;
line-height: 1.55;
}
.landing-footer__col ul {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 8px;
font-size: var(--text-sm);
}
.landing-footer__col li {
color: rgba(255, 255, 255, 0.62);
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.landing-footer__col a {
color: rgba(255, 255, 255, 0.72);
text-decoration: none;
transition: color .15s ease;
}
.landing-footer__col a:hover {
color: #ffffff;
text-decoration: none;
}
.landing-footer__col--intro p a { color: rgba(255, 255, 255, 0.9); }
/* Divider fino entre datos de contacto y bloque de agencia. Aplica solo
a la col intro para no afectar otros hr eventuales del footer. */
.landing-footer__col--intro hr {
border: 0;
height: 1px;
width: 40px;
background: rgba(255, 255, 255, 0.14);
margin: var(--space-4) 0 var(--space-3);
}
/* Bloque de la agencia operadora — más discreto que el resto.
Selector con clase en p + col--intro para ganarle al color de
.landing-footer__col--intro p a sin recurrir a !important. */
.landing-footer__col--intro p.landing-footer__agency {
font-size: 12px;
line-height: 1.5;
color: rgba(255, 255, 255, 0.5);
margin: 0;
}
.landing-footer__col--intro p.landing-footer__agency a {
color: rgba(255, 255, 255, 0.62);
border-bottom: 1px dotted rgba(255, 255, 255, 0.24);
padding-bottom: 1px;
transition: color .15s ease, border-color .15s ease;
}
.landing-footer__col--intro p.landing-footer__agency a:hover {
color: #ffffff;
border-color: rgba(255, 255, 255, 0.5);
}
/* Spacer para fila 2 columna 1 (asimetría estilo weelis) */
.landing-footer__col--spacer { display: none; }
@media (min-width: 960px) { .landing-footer__col--spacer { display: block; } }
/* Badge "Pronto" — pill Deep Sea con letra chica */
.landing-footer__badge {
display: inline-block;
padding: 2px 8px;
font-size: 9.5px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
background: var(--color-secondary);
color: #ffffff;
border-radius: 999px;
line-height: 1.4;
}
/* Redes sociales con icono */
.landing-footer__socials li a {
display: inline-flex;
align-items: center;
gap: 8px;
}
.landing-footer__social-icon { color: rgba(255, 255, 255, 0.62); flex-shrink: 0; }
.landing-footer__socials a:hover .landing-footer__social-icon { color: #ffffff; }
/* Columna de trust: checks con icono */
.landing-footer__checks li {
align-items: flex-start;
gap: 8px;
color: rgba(255, 255, 255, 0.72);
line-height: 1.45;
}
.landing-footer__check-icon {
color: var(--color-secondary-bg);
flex-shrink: 0;
margin-top: 2px;
}
/* Wordmark gigante estilo weelis — decorativo, entre grid y bottom bar */
.landing-footer__wordmark {
font-family: var(--font-serif);
font-weight: 600;
font-size: clamp(96px, 22vw, 260px);
line-height: 0.85;
letter-spacing: -0.03em;
color: rgba(255, 255, 255, 0.05);
text-align: center;
margin: var(--space-6) 0 var(--space-4);
pointer-events: none;
user-select: none;
white-space: nowrap;
overflow: hidden;
}
/* Bottom bar */
.landing-footer__bottom {
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
gap: var(--space-3);
padding-top: var(--space-4);
border-top: 1px solid rgba(255, 255, 255, 0.08);
color: rgba(255, 255, 255, 0.5);
font-size: var(--text-xs);
text-align: center;
}
@media (min-width: 720px) {
.landing-footer__bottom { flex-direction: row; text-align: left; }
}
.landing-footer__bottom-nav {
display: flex;
flex-wrap: wrap;
gap: var(--space-4);
justify-content: center;
}
.landing-footer__bottom-nav a {
color: rgba(255, 255, 255, 0.5);
text-decoration: none;
transition: color .15s ease;
}
.landing-footer__bottom-nav a:hover { color: #ffffff; }
/* ══════════════════════════════════════════════════════════════════════
Manifiesto (/manifiesto) — Fase 05c
Layout editorial largo con: progress bar de scroll con
animation-timeline (Chrome/Edge; fallback estático en el resto),
pull quotes gigantes intercalados y signature manuscrita al final.
══════════════════════════════════════════════════════════════════════ */
.manifesto__progress {
position: fixed;
top: 0;
left: 0;
height: 3px;
width: 100%;
background: var(--color-accent);
transform-origin: left;
transform: scaleX(0);
z-index: 100;
pointer-events: none;
}
@supports (animation-timeline: scroll()) {
.manifesto__progress {
animation: manifesto-progress linear;
animation-timeline: scroll(root);
}
}
@keyframes manifesto-progress {
from { transform: scaleX(0); }
to { transform: scaleX(1); }
}
.manifesto {
max-width: 720px;
margin: 0 auto;
padding: var(--space-6) 0 var(--space-8);
color: var(--color-text);
font-size: var(--text-md);
line-height: 1.75;
}
.manifesto__header { margin-bottom: var(--space-7); text-align: left; }
.manifesto__meta {
display: inline-block;
font-size: 11px;
letter-spacing: 0.09em;
text-transform: uppercase;
color: var(--color-text-soft);
font-weight: 600;
margin-bottom: var(--space-4);
}
.manifesto__title {
font-family: var(--font-serif);
font-weight: 600;
font-size: clamp(36px, 5.5vw, 60px);
line-height: 1.02;
letter-spacing: -0.025em;
margin: 0 0 var(--space-4);
color: var(--color-text);
}
.manifesto__title em {
font-style: normal;
color: var(--color-secondary);
}
.manifesto__lede {
font-size: var(--text-lg);
line-height: 1.5;
color: var(--color-text-muted);
margin: 0;
max-width: 540px;
}
.manifesto__body p {
margin: 0 0 var(--space-4);
font-size: 18px;
line-height: 1.7;
color: var(--color-text);
}
.manifesto__body em {
font-style: normal;
font-weight: 600;
color: var(--color-secondary);
}
.manifesto__pullquote {
margin: var(--space-7) 0;
padding: 0;
border: none;
text-align: center;
}
.manifesto__pullquote p {
font-family: var(--font-serif);
font-weight: 600;
font-style: italic;
font-size: clamp(24px, 3.2vw, 36px);
line-height: 1.15;
letter-spacing: -0.015em;
color: var(--color-text);
margin: 0;
max-width: 640px;
margin-left: auto;
margin-right: auto;
position: relative;
}
.manifesto__pullquote p::before,
.manifesto__pullquote p::after {
content: '';
display: block;
height: 1px;
width: 60px;
background: var(--color-border);
margin: var(--space-4) auto;
}
.manifesto__signature {
margin-top: var(--space-8);
padding-top: var(--space-6);
border-top: 1px solid var(--color-border-soft);
text-align: center;
}
.manifesto__signature-line {
font-family: var(--font-serif);
font-weight: 600;
font-size: clamp(24px, 3.5vw, 34px);
line-height: 1.1;
letter-spacing: -0.02em;
color: var(--color-text);
margin: 0 0 var(--space-6);
}
.manifesto__signature-line em {
font-style: normal;
color: var(--color-secondary);
}
.manifesto__signature-block { margin-bottom: var(--space-6); }
.manifesto__signature-mark {
display: block;
width: 180px;
height: 60px;
margin: 0 auto var(--space-2);
}
.manifesto__signature-block p {
margin: 0;
font-size: var(--text-sm);
color: var(--color-text-muted);
line-height: 1.4;
}
.manifesto__signature-block strong { color: var(--color-text); font-weight: 700; }
.manifesto__cta {
background: var(--color-bg-muted);
padding: var(--space-6) var(--space-5);
border-radius: var(--radius-lg);
margin-top: var(--space-6);
}
.manifesto__cta p {
margin: 0 0 var(--space-4);
font-family: var(--font-serif);
font-weight: 600;
font-size: var(--text-lg);
color: var(--color-text);
}
/* ══════════════════════════════════════════════════════════════════════
Sobre chatlar (/sobre) — Fase 05c
Avatars con gradient dinámico + timeline de 3 pasos + misión/visión
en 2-col + 4 principios en flip cards 3D (CSS puro sin JS) + ficha.
══════════════════════════════════════════════════════════════════════ */
.about {
max-width: 1000px;
margin: 0 auto;
padding: var(--space-6) 0 var(--space-8);
color: var(--color-text);
}
.about__header {
text-align: center;
margin-bottom: var(--space-7);
max-width: 780px;
margin-left: auto;
margin-right: auto;
}
.about__meta {
display: inline-block;
font-size: 11px;
letter-spacing: 0.09em;
text-transform: uppercase;
color: var(--color-secondary);
font-weight: 600;
background: var(--color-secondary-bg);
padding: 6px 14px;
border-radius: 999px;
margin-bottom: var(--space-4);
}
.about__title {
font-family: var(--font-serif);
font-weight: 600;
font-size: clamp(32px, 4.8vw, 52px);
line-height: 1.05;
letter-spacing: -0.022em;
margin: 0 0 var(--space-4);
color: var(--color-text);
}
.about__title em {
font-style: normal;
color: var(--color-secondary);
}
.about__lede {
font-size: var(--text-lg);
line-height: 1.55;
color: var(--color-text-muted);
margin: 0;
max-width: 620px;
margin-left: auto;
margin-right: auto;
}
.about__section-title {
font-family: var(--font-serif);
font-weight: 600;
font-size: clamp(24px, 3.2vw, 32px);
line-height: 1.15;
letter-spacing: -0.015em;
text-align: center;
margin: 0 0 var(--space-5);
color: var(--color-text);
}
/* ── Founders con avatares gradient ─────────────────────────────────── */
.about__founders {
padding: var(--space-6) 0;
margin: 0 0 var(--space-6);
}
.about__founders-grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-5);
max-width: 640px;
margin: 0 auto;
}
@media (min-width: 640px) {
.about__founders-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-6); }
}
.about__founder {
margin: 0;
text-align: center;
padding: var(--space-5);
background: var(--color-bg-muted);
border-radius: var(--radius-lg);
transition: transform .2s ease, box-shadow .2s ease;
}
.about__founder:hover {
transform: translateY(-3px);
box-shadow: var(--shadow);
}
.about__avatar {
display: block;
width: 112px;
height: 112px;
border-radius: 50%;
object-fit: cover;
object-position: center center;
background: var(--color-surface);
margin: 0 auto var(--space-3);
box-shadow:
0 8px 20px rgba(22, 35, 42, 0.15),
0 0 0 4px var(--color-surface);
transition: transform .25s ease;
}
.about__founder:hover .about__avatar { transform: scale(1.04); }
.about__founder h3 {
margin: 0 0 4px;
font-family: var(--font-sans);
font-size: var(--text-lg);
font-weight: 700;
color: var(--color-text);
}
.about__founder p {
margin: 0;
font-size: var(--text-sm);
color: var(--color-text-muted);
}
/* ── Divider "Y el equipo que lo hace pasar" ────────────────────────── */
.about__team-divider {
display: flex;
align-items: center;
gap: var(--space-4);
margin: var(--space-6) auto var(--space-5);
max-width: 640px;
color: var(--color-text-soft);
font-size: 12px;
letter-spacing: 0.06em;
text-transform: uppercase;
font-weight: 600;
}
.about__team-divider::before,
.about__team-divider::after {
content: '';
flex: 1;
height: 1px;
background: var(--color-border-soft);
}
.about__team-divider span { white-space: nowrap; }
/* ── Grid del equipo (avatares más chicos, 2 filas mobile / 4 col desk) ── */
.about__team-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--space-4);
max-width: 780px;
margin: 0 auto;
}
@media (min-width: 640px) {
.about__team-grid { grid-template-columns: repeat(4, 1fr); gap: var(--space-3); }
}
.about__team-member {
margin: 0;
text-align: center;
padding: var(--space-4) var(--space-3);
background: var(--color-bg);
border: 1px solid var(--color-border-soft);
border-radius: var(--radius-lg);
transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.about__team-member:hover {
transform: translateY(-2px);
border-color: var(--color-border);
box-shadow: var(--shadow-sm);
}
.about__team-avatar {
display: block;
width: 72px;
height: 72px;
border-radius: 50%;
object-fit: cover;
object-position: center top;
background: var(--color-bg-muted);
margin: 0 auto var(--space-3);
box-shadow:
0 4px 12px rgba(22, 35, 42, 0.08),
0 0 0 3px var(--color-surface);
transition: transform .25s ease;
}
.about__team-member:hover .about__team-avatar { transform: scale(1.05); }
.about__team-member strong {
display: block;
font-family: var(--font-sans);
font-size: var(--text-sm);
font-weight: 700;
color: var(--color-text);
line-height: 1.25;
margin-bottom: 2px;
letter-spacing: -0.005em;
}
.about__team-member span {
display: block;
font-size: 12px;
color: var(--color-text-muted);
line-height: 1.35;
}
/* ── Timeline / historia ────────────────────────────────────────────── */
.about__story {
padding: var(--space-6) 0;
}
.about__story-grid {
list-style: none;
padding: 0;
margin: 0;
display: grid;
grid-template-columns: 1fr;
gap: var(--space-5);
counter-reset: story;
}
@media (min-width: 860px) {
.about__story-grid { grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
}
.about__story-block {
background: var(--color-surface);
border: 1px solid var(--color-border-soft);
border-radius: var(--radius-lg);
padding: var(--space-5);
position: relative;
overflow: hidden;
}
.about__story-num {
display: block;
font-family: var(--font-serif);
font-size: 42px;
line-height: 1;
color: var(--color-secondary);
opacity: 0.5;
margin-bottom: var(--space-3);
font-weight: 400;
letter-spacing: -0.02em;
}
.about__story-block h3 {
margin: 0 0 var(--space-2);
font-family: var(--font-sans);
font-size: var(--text-lg);
font-weight: 700;
color: var(--color-text);
letter-spacing: -0.005em;
}
.about__story-block p {
margin: 0;
font-size: var(--text-base);
line-height: 1.6;
color: var(--color-text-muted);
}
/* ── Misión + Visión ────────────────────────────────────────────────── */
.about__pillars {
padding: var(--space-6) 0;
background: var(--color-bg-muted);
border-radius: var(--radius-lg);
padding: var(--space-6);
margin: var(--space-6) 0;
}
.about__pillars-grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-5);
}
@media (min-width: 860px) {
.about__pillars-grid { grid-template-columns: 1fr 1fr; gap: var(--space-6); }
}
.about__pillar h3 {
font-family: var(--font-serif);
font-weight: 600;
font-size: 24px;
letter-spacing: -0.015em;
margin: 0 0 var(--space-3);
color: var(--color-secondary);
}
.about__pillar-lead {
font-family: var(--font-serif);
font-weight: 600;
font-size: var(--text-lg);
line-height: 1.3;
color: var(--color-text);
margin: 0 0 var(--space-3);
font-style: italic;
letter-spacing: -0.01em;
}
.about__pillar p {
font-size: var(--text-base);
line-height: 1.6;
color: var(--color-text-muted);
margin: 0 0 var(--space-3);
}
/* ── 4 Principios como flip cards ───────────────────────────────────── */
.about__principles {
padding: var(--space-7) 0;
}
.about__principles-lead {
text-align: center;
color: var(--color-text-muted);
font-size: var(--text-md);
margin: 0 auto var(--space-6);
max-width: 520px;
}
.about__principles-grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-4);
}
@media (min-width: 640px) {
.about__principles-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 960px) {
.about__principles-grid { grid-template-columns: repeat(4, 1fr); }
}
.about__principle {
aspect-ratio: 1;
perspective: 1200px;
cursor: pointer;
outline: none;
}
.about__principle-inner {
position: relative;
width: 100%;
height: 100%;
transition: transform 0.7s cubic-bezier(0.2, 0.7, 0.3, 1);
transform-style: preserve-3d;
}
.about__principle:hover .about__principle-inner,
.about__principle:focus-visible .about__principle-inner {
transform: rotateY(180deg);
}
.about__principle:focus-visible {
outline: 3px solid var(--color-accent);
outline-offset: 4px;
border-radius: var(--radius-lg);
}
.about__principle-face {
position: absolute;
inset: 0;
padding: var(--space-4) var(--space-5);
border-radius: var(--radius-lg);
display: flex;
flex-direction: column;
justify-content: flex-end;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
overflow: hidden;
box-sizing: border-box;
}
.about__principle-face--front {
background: var(--color-bg-muted);
color: var(--color-text);
position: relative;
height: 17em;
}
.about__principle-face--back {
background: var(--color-primary);
color: var(--color-on-primary);
transform: rotateY(180deg);
justify-content: center;
}
.about__principle-roman {
position: absolute;
top: -10px;
right: -10px;
font-family: var(--font-serif);
font-size: 160px;
line-height: 1;
font-weight: 600;
color: var(--color-secondary);
opacity: 0.08;
pointer-events: none;
letter-spacing: -0.04em;
}
.about__principle-num {
display: block;
font-size: 11px;
letter-spacing: 0.09em;
text-transform: uppercase;
font-weight: 700;
color: var(--color-secondary);
margin-bottom: var(--space-2);
}
.about__principle-face--front h3 {
font-family: var(--font-serif);
font-weight: 600;
font-size: 20px;
line-height: 1.2;
letter-spacing: -0.015em;
color: var(--color-text);
margin: 0;
/* Altura mínima = 2 líneas para que las 4 cards se vean alineadas
aunque el copy varíe entre 1 y 2 líneas. El h3 sigue anclado al
bottom de la card (justify-content: flex-end del padre), y el
texto interno se apoya en la base con align-items: flex-end. */
min-height: calc(1.2em * 2);
display: flex;
align-items: flex-end;
}
.about__principle-face--back p {
margin: 0;
font-size: var(--text-sm);
line-height: 1.55;
color: rgba(255, 255, 255, 0.86);
}
@media (prefers-reduced-motion: reduce) {
.about__principle-inner { transition: none; }
.about__principle:hover .about__principle-inner,
.about__principle:focus-visible .about__principle-inner {
transform: none;
}
.about__principle-face--back {
transform: none;
position: static;
margin-top: var(--space-2);
}
}
/* ── Teaser del manifiesto (reemplazo de ficha técnica) ─────────────── */
.about__manifesto-teaser {
max-width: 780px;
margin: var(--space-7) auto 0;
padding: var(--space-6) var(--space-5);
text-align: center;
border-top: 1px solid var(--color-border-soft);
}
.about__manifesto-teaser__label {
display: inline-block;
font-size: 11px;
letter-spacing: 0.09em;
text-transform: uppercase;
color: var(--color-secondary);
font-weight: 700;
margin-bottom: var(--space-4);
}
.about__manifesto-teaser__quote {
margin: 0 0 var(--space-4);
padding: 0;
border: none;
}
.about__manifesto-teaser__quote p {
font-family: var(--font-serif);
font-weight: 600;
font-style: italic;
font-size: clamp(22px, 3vw, 32px);
line-height: 1.2;
letter-spacing: -0.018em;
color: var(--color-text);
margin: 0;
}
.about__manifesto-teaser__body {
font-size: var(--text-md);
line-height: 1.6;
color: var(--color-text-muted);
margin: 0 auto var(--space-4);
max-width: 560px;
}
.about__manifesto-teaser__link {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: var(--text-md);
font-weight: 600;
color: var(--color-secondary);
text-decoration: none;
padding: 8px 16px;
border-radius: 999px;
transition: color .15s ease, background-color .15s ease, gap .15s ease;
}
.about__manifesto-teaser__link:hover {
color: var(--color-secondary-hover);
background: var(--color-bg-muted);
gap: 12px;
text-decoration: none;
}
.about__manifesto-teaser__arrow { flex-shrink: 0; color: currentColor; }
/* ── CTA final ──────────────────────────────────────────────────────── */
.about__cta {
text-align: center;
padding: var(--space-6);
margin-top: var(--space-6);
background: var(--color-primary);
color: var(--color-on-primary);
border-radius: var(--radius-lg);
}
.about__cta p {
font-family: var(--font-serif);
font-weight: 600;
font-size: clamp(20px, 2.6vw, 28px);
line-height: 1.15;
letter-spacing: -0.015em;
margin: 0 0 var(--space-4);
color: #ffffff;
}
.about__cta-alt {
font-family: var(--font-sans) !important;
font-weight: 400 !important;
font-size: var(--text-sm) !important;
color: rgba(255, 255, 255, 0.62) !important;
margin-top: var(--space-4) !important;
margin-bottom: 0 !important;
}
.about__cta-alt a {
color: rgba(255, 255, 255, 0.92);
text-decoration: underline;
text-underline-offset: 3px;
}
.about__cta-alt a:hover { color: #ffffff; }
/* ─── Bell + notif panel (Fase 13b) ─────────────────────────────────── */
.notif-bell { position: relative; margin-right: var(--space-3); }
.notif-bell__trigger {
background: none; border: 1px solid transparent; border-radius: 999px;
width: 38px; height: 38px; display: grid; place-items: center; cursor: pointer;
color: var(--color-text-muted); position: relative;
transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.notif-bell__trigger:hover { background: var(--color-bg-muted); color: var(--color-text); }
.notif-bell__trigger[aria-expanded="true"] { background: var(--color-bg-muted); color: var(--color-text); border-color: var(--color-border-soft); }
.notif-bell__badge {
position: absolute; top: -2px; right: -2px;
min-width: 18px; height: 18px; padding: 0 5px;
background: var(--color-error, #B42318); color: white;
border-radius: 999px; border: 2px solid var(--color-surface, #ffffff);
font-size: 10px; font-weight: 700; line-height: 14px; text-align: center;
font-variant-numeric: tabular-nums;
}
.notif-bell__panel {
position: absolute; top: calc(100% + 8px); right: 0;
width: 380px; max-height: 480px; overflow: hidden;
background: var(--color-surface, #ffffff);
border: 1px solid var(--color-border, #E4EEF0);
border-radius: var(--radius, 12px);
box-shadow: 0 12px 32px rgba(22, 35, 42, 0.14), 0 2px 6px rgba(22, 35, 42, 0.06);
z-index: 1000;
flex-direction: column;
}
.notif-bell__panel[hidden] { display: none; }
.notif-bell__panel:not([hidden]) { display: flex; }
@media (max-width: 480px) {
.notif-bell__panel { width: calc(100vw - 24px); right: -8px; }
}
.notif-panel__header {
padding: var(--space-3) var(--space-4);
border-bottom: 1px solid var(--color-border-soft, #EDF1F2);
}
.notif-panel__title-row { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: var(--space-2); }
.notif-panel__title { margin: 0; font-size: var(--text-md); font-weight: 600; }
.notif-panel__count { font-size: var(--text-xs); color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
.notif-panel__tabs { display: flex; gap: 4px; }
.notif-panel__tab {
background: none; border: 1px solid transparent; border-radius: 999px;
padding: 4px var(--space-3); font-size: var(--text-xs); cursor: pointer;
color: var(--color-text-muted); font-family: inherit;
transition: background 0.15s ease, color 0.15s ease;
}
.notif-panel__tab:hover { background: var(--color-bg-muted); color: var(--color-text); }
.notif-panel__tab.is-active { background: var(--color-text, #16232A); color: var(--color-on-primary, #ffffff); }
.notif-panel__list {
list-style: none; padding: 0; margin: 0;
overflow-y: auto; flex: 1; min-height: 0;
}
.notif-item + .notif-item { border-top: 1px solid var(--color-border-soft, #EDF1F2); }
.notif-item[data-read="true"] { opacity: 0.62; }
.notif-item__link {
display: flex; gap: var(--space-3); padding: var(--space-3) var(--space-4);
text-decoration: none; color: inherit;
transition: background 0.15s ease;
}
.notif-item__link:hover { background: var(--color-bg-muted); }
.notif-item__icon {
width: 32px; height: 32px; border-radius: 8px;
display: grid; place-items: center; flex-shrink: 0;
background: var(--color-bg-muted); color: var(--color-text-muted);
}
.notif-item__icon--budget_alert { background: #FEE4E2; color: var(--color-error, #B42318); }
.notif-item__icon--token_expiring { background: #FFF7E6; color: var(--color-warning, #DC6803); }
.notif-item__icon--comment_retry_dead { background: #F3E8FF; color: #7C3AED; }
.notif-item__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.notif-item__title { font-size: var(--text-sm); font-weight: 500; line-height: 1.35; }
.notif-item__desc {
font-size: var(--text-xs); color: var(--color-text-muted); line-height: 1.4;
display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.notif-item__time { font-size: var(--text-xs); color: var(--color-text-soft, #9AA3A8); margin-top: 2px; }
.notif-panel__empty, .notif-panel__loading {
padding: var(--space-6) var(--space-4);
text-align: center; color: var(--color-text-muted); font-size: var(--text-sm);
}