* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
margin: 0;
font-family: var(--fuente);
font-size: var(--t-m);
line-height: 1.55;
color: var(--tinta);
background: var(--cal);
-webkit-font-smoothing: antialiased;
}
h1, h2, h3 { margin: 0; line-height: 1.15; letter-spacing: -0.02em; font-weight: 650; }
p { margin: 0; }
a { color: var(--azul); }
button { font: inherit; }
:focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; }
#vista:focus { outline: none; }
/* ── Estructura ───────────────────────────────────────── */
.app { display: grid; grid-template-columns: 248px minmax(0, 1fr); min-height: 100dvh; }
.lateral {
position: sticky; top: 0; height: 100dvh;
display: flex; flex-direction: column; gap: var(--e-6);
padding: var(--e-6) var(--e-5);
border-right: 1px solid var(--linea);
/* En pantallas bajitas (laptops) el menú no cabe: se desplaza solo, sin mover la página. */
overflow-y: auto; overscroll-behavior: contain;
scrollbar-width: thin; scrollbar-color: var(--linea) transparent;
}
.lateral > * { flex-shrink: 0; }
.marca { display: flex; align-items: center; gap: var(--e-3); text-decoration: none; color: var(--tinta); }
.marca__sello { width: 32px; height: 32px; flex: none; }
.marca__nombre { font-weight: 700; font-size: var(--t-s); letter-spacing: -0.01em; line-height: 1.2; }
.marca__nombre span { display: block; color: var(--tinta-3); font-weight: 500; }
.nav { display: flex; flex-direction: column; gap: var(--e-1); }
.nav a {
display: flex; align-items: center; gap: var(--e-3);
padding: var(--e-3) var(--e-3); border-radius: var(--radio-s);
color: var(--tinta-2); text-decoration: none; font-size: var(--t-s); font-weight: 500;
}
@media (hover: hover) and (pointer: fine) { .nav a:hover { background: var(--cantera); color: var(--tinta); } }
.nav a[aria-current="page"] { background: var(--superficie); color: var(--tinta); box-shadow: var(--sombra); }
.nav a[aria-current="page"] svg { color: var(--marca); }
.nav svg { width: 20px; height: 20px; flex: none; }
.nav .corto { display: none; }
.lateral__pie { margin-top: auto; font-size: var(--t-xs); color: var(--tinta-3); display: grid; gap: var(--e-4); justify-items: start; }
.enlace-pie { color: var(--tinta-2); font-weight: 600; font-size: var(--t-s); text-decoration: none; }
.enlace-pie[aria-current="page"] { color: var(--marca); }
@media (hover: hover) and (pointer: fine) { .enlace-pie:hover { color: var(--marca); } }
[data-solo-admin][hidden], #ok-cortesia[hidden] { display: none; }
/* ── Columna principal, barra móvil y aviso de ejemplo ──── */
.columna { min-width: 0; }
.barra-movil { display: none; }
.banner-demo {
display: none; align-items: center; justify-content: space-between; gap: var(--e-4); flex-wrap: wrap;
margin: var(--e-5) var(--e-7) 0; padding: var(--e-4) var(--e-5); border-radius: var(--radio);
background: var(--jacaranda-suave); color: var(--tinta); font-size: var(--t-s); max-width: calc(1120px - 2 * var(--e-7));
}
.modo-demo .banner-demo { display: flex; }
.banner-demo .boton { min-height: 40px; }
.onboarding .lateral, .onboarding .barra-movil { display: none; }
.onboarding .app { grid-template-columns: minmax(0, 1fr); }
.onboarding .contenido { margin: 0 auto; max-width: 640px; }
/* ── Conectar con Claude ───────────────────────────────── */
.pasos { counter-reset: paso; display: grid; gap: var(--e-3); margin: 0; padding: 0; list-style: none; }
.pasos li { counter-increment: paso; display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: var(--e-4); align-items: start; background: var(--superficie); border-radius: var(--radio); padding: var(--e-5); box-shadow: var(--sombra); font-size: var(--t-s); color: var(--tinta-2); }
.pasos li::before { content: counter(paso); display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--cantera); color: var(--tinta); font-weight: 650; }
.pasos strong { color: var(--tinta); }
.copiar { display: flex; flex-wrap: wrap; gap: var(--e-3); align-items: center; margin-top: var(--e-3); }
.copiar code { font-size: var(--t-s); background: var(--cantera); padding: var(--e-2) var(--e-3); border-radius: var(--radio-s); color: var(--tinta); overflow-wrap: anywhere; }
.planes { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--e-4); }
.plan { background: var(--superficie); border-radius: var(--radio); padding: var(--e-5); box-shadow: var(--sombra); display: grid; gap: var(--e-3); align-content: start; }
.plan h3 { font-size: var(--t-m); }
.plan ul { margin: 0; padding-left: 1.2em; color: var(--tinta-2); font-size: var(--t-s); display: grid; gap: var(--e-1); }
.plan--destacado { background: var(--terracota-suave); box-shadow: none; }
.cliente-chip {
display: inline-flex; align-items: center; gap: var(--e-2);
padding: var(--e-2) var(--e-3); border-radius: 999px; background: var(--cantera);
color: var(--tinta); font-size: var(--t-xs); font-weight: 600;
}
.cliente-chip::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--marca); }
.contenido { padding: var(--e-8) var(--e-7) var(--e-8); max-width: 1120px; width: 100%; }
/* ── Encabezado de sección ─────────────────────────────── */
.encabezado { display: flex; flex-direction: column; gap: var(--e-3); margin-bottom: var(--e-7); }
.eyebrow { font-size: var(--t-xs); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--tinta-3); }
.encabezado h1 { font-size: var(--t-xxl); }
.encabezado p { color: var(--tinta-2); font-size: var(--t-m); max-width: 60ch; }
.aviso-demo {
display: inline-flex; align-self: flex-start; align-items: center; gap: var(--e-2);
padding: var(--e-1) var(--e-3);
background: var(--jacaranda-suave); color: var(--jacaranda); font-size: var(--t-xs); font-weight: 600;
border-radius: var(--radio-s);
}
/* ── Plano Barragán: bloque de color plano para el dato principal ── */
.plano {
position: relative; overflow: hidden;
display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--e-5); align-items: end;
padding: var(--e-6); border-radius: var(--radio);
background: var(--terracota-suave); margin-bottom: var(--e-6);
}
.plano::after {
/* dos planos que se cruzan, como un muro de Barragán visto de frente */
content: ""; position: absolute; right: -40px; top: -40px; width: 180px; height: 180px;
background: var(--terracota); opacity: .12; border-radius: 4px; transform: rotate(8deg);
}
.plano__etiqueta { font-size: var(--t-s); color: var(--tinta-2); margin-bottom: var(--e-2); }
.plano__valor { font-size: var(--t-xxl); font-weight: 650; letter-spacing: -0.03em; line-height: 1; }
.plano__nota { font-size: var(--t-s); color: var(--tinta-2); margin-top: var(--e-3); max-width: 46ch; }
/* ── Métricas ──────────────────────────────────────────── */
.metricas { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--e-4); margin-bottom: var(--e-7); }
.metrica { background: var(--superficie); border-radius: var(--radio); padding: var(--e-5); box-shadow: var(--sombra); }
.metrica__etiqueta { font-size: var(--t-xs); color: var(--tinta-3); font-weight: 500; }
.metrica__valor { font-size: var(--t-xl); font-weight: 650; letter-spacing: -0.02em; margin-top: var(--e-2); font-variant-numeric: tabular-nums; }
.delta { font-size: var(--t-xs); font-weight: 600; margin-top: var(--e-1); }
.metrica__nota { font-size: var(--t-xs); color: var(--tinta-3); margin-top: var(--e-1); }
.delta--sube { color: var(--agave); }
.delta--baja { color: var(--chile); }
/* ── Bloques y tablas ──────────────────────────────────── */
.bloque { margin-bottom: var(--e-7); }
.bloque__titulo { font-size: var(--t-l); margin-bottom: var(--e-4); }
.tarjeta { background: var(--superficie); border-radius: var(--radio); box-shadow: var(--sombra); overflow: hidden; }
.tabla-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: var(--t-s); }
th {
text-align: left; font-weight: 500; color: var(--tinta-3); font-size: var(--t-xs);
padding: var(--e-4) var(--e-5); border-bottom: 1px solid var(--linea); white-space: nowrap;
}
td { padding: var(--e-4) var(--e-5); border-bottom: 1px solid var(--linea); font-variant-numeric: tabular-nums; }
tr:last-child td { border-bottom: 0; }
td.num, th.num { text-align: right; }
.barra { height: 6px; border-radius: 3px; background: var(--cantera); min-width: 64px; }
.barra > i { display: block; height: 100%; border-radius: 3px; background: var(--azul); }
/* ── Lista de prioridades / recomendaciones ───────────── */
.lista { display: flex; flex-direction: column; gap: var(--e-3); }
.item {
display: grid; grid-template-columns: 4px minmax(0, 1fr); gap: var(--e-4);
background: var(--superficie); border-radius: var(--radio); padding: var(--e-5); box-shadow: var(--sombra);
}
.item__acento { border-radius: 2px; background: var(--linea); }
.item[data-prioridad="alta"] .item__acento { background: var(--terracota); }
.item[data-prioridad="media"] .item__acento { background: var(--azul); }
.item h3 { font-size: var(--t-m); margin-bottom: var(--e-2); }
.item p { color: var(--tinta-2); font-size: var(--t-s); }
.etiqueta {
display: inline-block; font-size: var(--t-xs); font-weight: 600; color: var(--tinta-3);
margin-bottom: var(--e-2); text-transform: uppercase; letter-spacing: .06em;
}
/* ── Botones ───────────────────────────────────────────── */
.boton {
display: inline-flex; align-items: center; justify-content: center; gap: var(--e-2);
min-height: 48px; padding: 0 var(--e-5); border-radius: 999px; border: 0; cursor: pointer;
background: var(--terracota); color: var(--sobre-terracota); font-weight: 600; font-size: var(--t-s);
text-decoration: none; text-align: center;
}
@media (hover: hover) and (pointer: fine) { .boton:hover { filter: brightness(.95); } }
.boton:disabled { opacity: .6; cursor: progress; }
.boton--secundario { background: var(--cantera); color: var(--tinta); }
/* ── Cobro por uso ─────────────────────────────────────── */
.cobro {
display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e-4);
padding: var(--e-5); border-radius: var(--radio); background: var(--azul-suave); margin-bottom: var(--e-6);
}
.cobro__texto { font-size: var(--t-s); color: var(--tinta-2); max-width: 52ch; }
.cobro__texto strong { color: var(--tinta); }
.vacio { padding: var(--e-7) var(--e-5); text-align: center; color: var(--tinta-3); font-size: var(--t-s); }
.error { padding: var(--e-5); border-radius: var(--radio); background: var(--terracota-suave); color: var(--tinta); }
/* ── Móvil: barra inferior tipo app ────────────────────── */
/* ── Estrategia nórdica ────────────────────────────────── */
.bloque__texto { color: var(--tinta-2); font-size: var(--t-s); margin: calc(-1 * var(--e-2)) 0 var(--e-4); max-width: 62ch; }
.nota-final { margin-top: var(--e-4); }
.subtitulo { font-size: var(--t-m); margin: var(--e-6) 0 var(--e-3); }
.principios { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--e-4); }
.principio { background: var(--superficie); border-radius: var(--radio); padding: var(--e-5); box-shadow: var(--sombra); display: grid; gap: var(--e-2); align-content: start; }
.principio__num { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; background: var(--azul-suave); color: var(--azul); font-weight: 700; font-size: var(--t-xs); }
.principio h3 { font-size: var(--t-m); }
.principio p { color: var(--tinta-2); font-size: var(--t-s); }
.principio summary { font-size: var(--t-xs); color: var(--tinta-3); cursor: pointer; font-weight: 600; }
.principio details p { margin-top: var(--e-2); font-size: var(--t-xs); }
.formulario { padding: var(--e-5); display: grid; gap: var(--e-4); margin-bottom: var(--e-4); }
.formulario label { display: grid; gap: var(--e-2); font-size: var(--t-xs); font-weight: 600; color: var(--tinta-2); }
.formulario label[hidden] { display: none; }
.formulario textarea, .formulario input {
font: inherit; font-size: var(--t-s); color: var(--tinta); background: var(--cal);
border: 1px solid var(--linea); border-radius: var(--radio-s); padding: var(--e-3); width: 100%;
}
.formulario input { min-height: 48px; }
.formulario .boton { justify-self: start; }
.formulario--linea { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
.plano--compacto { margin: 0 0 var(--e-4); }
.plano__valor small { font-size: var(--t-l); color: var(--tinta-3); font-weight: 500; }
.auditoria { padding: var(--e-5); }
.auditoria__texto { font-weight: 600; margin-bottom: var(--e-3); }
.auditoria ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-3); }
.hallazgo { display: grid; gap: 2px; position: relative; padding-left: var(--e-5); font-size: var(--t-s); }
.hallazgo::before { content: ""; position: absolute; left: 2px; top: .5em; width: 8px; height: 8px; border-radius: 50%; background: var(--azul); }
.hallazgo[data-nivel="riesgo"] { border-left-color: var(--terracota); }
.hallazgo span { color: var(--tinta-2); }
.celda-nota { color: var(--tinta-3); font-size: var(--t-xs); }
.grupos { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--e-4); margin-bottom: var(--e-5); }
.grupo { border-radius: var(--radio); padding: var(--e-5); display: grid; gap: var(--e-2); }
.grupo h3 { font-size: var(--t-m); }
.grupo p { color: var(--tinta-2); font-size: var(--t-s); }
.grupo--prueba { background: var(--terracota-suave); }
.grupo--control { background: var(--cantera); }
.error + .error, .error + .tarjeta { margin-top: var(--e-3); }
/* ── Registro y cuentas ─────────────────────────────────── */
.formulario select {
font: inherit; font-size: var(--t-s); color: var(--tinta); background: var(--cal); min-height: 48px;
border: 1px solid var(--linea); border-radius: var(--radio-s); padding: 0 var(--e-3); width: 100%;
}
.opcional { color: var(--tinta-3); font-weight: 500; }
.aviso-simple { color: var(--tinta-3); font-size: var(--t-xs); line-height: 1.5; margin: 0; }
.formulario .error[hidden] { display: none; }
.siguiente-paso {
display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e-5);
padding: var(--e-6); border-radius: var(--radio); background: var(--azul-suave); margin-bottom: var(--e-7);
}
.siguiente-paso > div { max-width: 56ch; display: grid; gap: var(--e-2); }
.siguiente-paso h2 { font-size: var(--t-l); }
.siguiente-paso p:not(.eyebrow) { color: var(--tinta-2); font-size: var(--t-s); }
.aviso { padding: var(--e-4) var(--e-5); border-radius: var(--radio); margin-bottom: var(--e-5); font-size: var(--t-s); }
.aviso--bien { background: var(--agave-suave); }
.estado-plataforma, .estado-plataforma * { overflow-wrap: anywhere; min-width: 0; } /* textos largos (PUBLIC_URL=https://…) no ensanchan la tarjeta ni se cortan */
.estado-config summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; font-weight: 600; } /* zona táctil de 44 px */
.estado-barras { overflow-wrap: anywhere; line-height: 1.6; } /* la fila de cuadritos no trae espacios: sin esto se desborda en celular */
.aviso--aviso { background: var(--terracota-suave); }
.conexiones { display: grid; gap: var(--e-4); }
.conexion {
display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: var(--e-5); align-items: start;
background: var(--superficie); border-radius: var(--radio); padding: var(--e-6); box-shadow: var(--sombra);
}
.conexion__logo { width: 48px; height: 48px; border-radius: 12px; background: var(--cal); display: grid; place-items: center; }
.conexion__texto { display: grid; gap: var(--e-3); justify-items: start; }
.conexion__texto h2 { font-size: var(--t-l); }
.conexion__texto > p { color: var(--tinta-2); font-size: var(--t-s); max-width: 56ch; }
.conexion__estado { font-size: var(--t-s); font-weight: 600; color: var(--tinta-3) !important; }
.conexion__estado--ok { color: var(--agave) !important; }
.conexion__estado--ok::before { content: "● "; }
.conexion__detalle { font-size: var(--t-s); }
.conexion__sitio { display: grid; gap: var(--e-1); font-size: var(--t-xs); font-weight: 600; color: var(--tinta-2); }
.conexion__sitio select { font: inherit; min-height: 44px; border: 1px solid var(--linea); border-radius: var(--radio-s); padding: 0 var(--e-3); background: var(--cal); color: var(--tinta); }
/* Cuentas → «Mide tus clientes en Google»: los pasos de la medición, cada uno con su botón (zonas táctiles de 44 px o más). */
.camino { margin-top: var(--e-5); display: grid; gap: var(--e-4); }
.camino__titulo { font-size: var(--t-m); margin: 0; }
.camino__aviso { margin: 0; padding: var(--e-3) var(--e-4); border-radius: var(--radio-s); background: var(--cantera); color: var(--tinta); font-size: var(--t-s); }
.camino__pasos { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-3); }
.camino__paso { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: var(--e-3); align-items: start; padding: var(--e-4); border: 1px solid var(--linea); border-radius: var(--radio); background: var(--superficie); }
.camino__paso p { margin: var(--e-1) 0 0; font-size: var(--t-s); color: var(--tinta-2); overflow-wrap: anywhere; }
.camino__icono { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--cantera); color: var(--tinta); font-weight: 700; }
.camino__paso--listo .camino__icono { background: var(--agave); color: var(--cal); }
.camino__paso--falta .camino__icono, .camino__paso--elegir .camino__icono { background: var(--terracota); color: var(--cal); }
.camino__acciones { display: flex; flex-wrap: wrap; gap: var(--e-3); margin-top: var(--e-3); }
.camino__codigo { margin-top: var(--e-3); }
.camino__codigo summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; font-weight: 600; font-size: var(--t-s); }
.camino__codigo textarea { display: block; width: 100%; box-sizing: border-box; margin: var(--e-2) 0; font: 12px/1.45 ui-monospace, SFMono-Regular, Menlo, monospace; border: 1px solid var(--linea); border-radius: var(--radio-s); padding: var(--e-2); background: var(--cal); color: var(--tinta); resize: vertical; }
.camino__todo { display: grid; gap: var(--e-2); justify-items: start; }
.camino__guia { padding: var(--e-4); border-radius: var(--radio); background: var(--superficie); box-shadow: var(--sombra); }
.camino__guia:focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; }
.conexion--pronto { opacity: .75; }
.cuenta-datos { margin-top: var(--e-7); }
.cuenta-datos__caja { padding: var(--e-5); display: grid; gap: var(--e-3); font-size: var(--t-s); }
.cuenta-datos__caja span { color: var(--tinta-3); display: inline-block; min-width: 110px; }
.cuenta-datos__acciones { display: flex; flex-wrap: wrap; gap: var(--e-3); margin-top: var(--e-4); }
/* ── Avisos legales ─────────────────────────────────────── */
.casilla { display: grid !important; grid-template-columns: 20px minmax(0, 1fr); gap: var(--e-3); align-items: start; font-weight: 500 !important; color: var(--tinta-2); font-size: var(--t-s) !important; }
.casilla input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--terracota); min-height: 0 !important; padding: 0 !important; }
.aviso-legal { font-size: var(--t-xs); color: var(--tinta-3); margin-top: var(--e-4); max-width: 70ch; }
/* Transparencia de IA: lo que genera Genesis se rotula siempre igual (ver rotuloIA en format.js). Texto en --tinta sobre --cantera: alto contraste. */
.rotulo-ia { display: block; margin: var(--e-4) 0; padding: var(--e-3) var(--e-4); background: var(--cantera); color: var(--tinta); border: 1px solid color-mix(in srgb, var(--jacaranda) 40%, transparent); border-radius: var(--radio-s); font-size: var(--t-s); max-width: 70ch; }
.rotulo-ia span { color: var(--tinta-2); }
.etiqueta-ia { display: block; width: fit-content; margin: 0 0 var(--e-2); padding: var(--e-1) var(--e-3); background: var(--cantera); color: var(--tinta); border: 1px solid color-mix(in srgb, var(--jacaranda) 40%, transparent); border-radius: var(--radio-s); font-size: var(--t-xs); font-weight: 600; }
.pie-legal {
display: flex; flex-wrap: wrap; gap: var(--e-2) var(--e-4); padding: 0 var(--e-7) var(--e-6);
font-size: var(--t-xs); color: var(--tinta-3); max-width: 1120px;
}
.pie-legal a { color: var(--tinta-3); }
.banner-legal {
display: flex; align-items: center; justify-content: space-between; gap: var(--e-4); flex-wrap: wrap;
margin: var(--e-5) var(--e-7) 0; padding: var(--e-4) var(--e-5); border-radius: var(--radio);
background: var(--terracota-suave); font-size: var(--t-s); max-width: calc(1120px - 2 * var(--e-7));
}
.banner-legal[hidden] { display: none; }
.privacidad__links { font-size: var(--t-xs); color: var(--tinta-3); }
.zona-peligro { margin-top: var(--e-5); font-size: var(--t-s); color: var(--tinta-2); }
.zona-peligro summary { cursor: pointer; color: var(--chile); font-weight: 600; }
.zona-peligro p { margin: var(--e-3) 0; }
.boton--peligro { background: var(--chile); }
/* ── Planes, saldo, candados Pro y anuncios ─────────────── */
.recargas { display: flex; flex-wrap: wrap; gap: var(--e-3); }
.insignia { display: inline-block; font-size: 11px; font-weight: 600; padding: 1px 8px; border-radius: 999px; background: var(--jacaranda-suave); color: var(--jacaranda); vertical-align: middle; }
.plan__detalle { display: block; color: var(--tinta-3); font-size: var(--t-xs); }
.plan li { display: grid; gap: 2px; }
.plan li .insignia { justify-self: start; }
.candado {
display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e-5);
padding: var(--e-6); border-radius: var(--radio); background: var(--jacaranda-suave);
}
.candado > div { max-width: 56ch; display: grid; gap: var(--e-2); }
.candado h2 { font-size: var(--t-l); }
.candado h2::before { content: "🔒 "; }
.candado p:not(.eyebrow) { color: var(--tinta-2); font-size: var(--t-s); }
.anuncio { margin: var(--e-7) 0 0; padding: var(--e-4); border: 1px dashed var(--linea); border-radius: var(--radio); }
.anuncio__etiqueta { font-size: var(--t-xs); color: var(--tinta-3); margin-bottom: var(--e-2); }
/* ── Aprende mientras lo haces ──────────────────────────── */
.termino {
font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: help; text-align: inherit;
text-decoration: underline dotted; text-decoration-color: var(--azul); text-underline-offset: 3px;
}
@media (hover: hover) and (pointer: fine) { .termino:hover { color: var(--azul); } }
th .termino { font-weight: inherit; }
.que-es { background: var(--azul-suave); border-radius: var(--radio-s); padding: var(--e-4) var(--e-5); margin-bottom: var(--e-6); box-shadow: var(--sombra); }
.que-es__titulo { font-size: var(--t-xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--azul); margin-bottom: var(--e-2); }
.que-es p:last-child { color: var(--tinta-2); font-size: var(--t-s); max-width: 75ch; }
.acciones-aprende { display: flex; flex-wrap: wrap; gap: var(--e-3); margin: calc(-1 * var(--e-3)) 0 var(--e-6); }
.acciones-aprende .boton { min-height: 40px; font-size: var(--t-xs); }
.consejo { background: var(--agave-suave); border-radius: var(--radio); padding: var(--e-5) var(--e-6); margin-bottom: var(--e-7); display: grid; gap: var(--e-2); }
.consejo:empty { display: none; }
.consejo h2 { font-size: var(--t-l); }
.consejo p:not(.eyebrow) { color: var(--tinta-2); font-size: var(--t-s); max-width: 70ch; }
.explicacion { border: 0; padding: 0; border-radius: 20px; max-width: min(560px, calc(100vw - 32px)); background: var(--superficie); color: var(--tinta); box-shadow: 0 24px 64px rgba(28, 36, 64, .25); }
.explicacion::backdrop { background: rgba(20, 23, 31, .45); }
.explicacion__caja { padding: var(--e-6); display: grid; gap: var(--e-3); }
.explicacion__titulo { font-size: var(--t-l); }
.explicacion__cuerpo { display: grid; gap: var(--e-3); font-size: var(--t-s); color: var(--tinta-2); }
.explicacion__corto { font-size: var(--t-m); color: var(--tinta); font-weight: 600; }
.explicacion__ejemplo { background: var(--cantera); border-radius: var(--radio-s); padding: var(--e-3) var(--e-4); }
.explicacion__acciones { display: flex; flex-wrap: wrap; gap: var(--e-3); justify-content: flex-end; margin-top: var(--e-3); }
.guias { display: grid; gap: var(--e-3); }
.guia, .definicion { background: var(--superficie); border-radius: var(--radio); box-shadow: var(--sombra); }
.guia > summary, .definicion > summary { cursor: pointer; list-style: none; padding: var(--e-5); display: grid; gap: var(--e-1); }
.guia > summary::-webkit-details-marker, .definicion > summary::-webkit-details-marker { display: none; }
.guia__titulo { font-size: var(--t-m); font-weight: 650; }
.guia__resumen { color: var(--tinta-2); font-size: var(--t-s); }
.guia__pasos { margin: 0; padding: 0 var(--e-5) var(--e-4) calc(var(--e-5) + 1.2em); display: grid; gap: var(--e-3); color: var(--tinta-2); font-size: var(--t-s); }
.guia__terminos { padding: 0 var(--e-5) var(--e-5); font-size: var(--t-xs); color: var(--tinta-3); }
.buscador { display: grid; gap: var(--e-2); font-size: var(--t-xs); font-weight: 600; color: var(--tinta-2); margin-bottom: var(--e-4); }
.buscador input { font: inherit; font-size: var(--t-s); min-height: 48px; border: 1px solid var(--linea); border-radius: var(--radio-s); padding: 0 var(--e-4); background: var(--superficie); color: var(--tinta); }
.glosario { display: grid; gap: var(--e-3); }
.definicion > summary span { color: var(--tinta-2); font-size: var(--t-s); }
.definicion > :not(summary) { padding: 0 var(--e-5); }
.definicion > :last-child { padding-bottom: var(--e-5); }
.definicion p { font-size: var(--t-s); color: var(--tinta-2); margin-bottom: var(--e-3); }
.definicion .explicacion__corto { display: none; }
.definicion[hidden], .glosario__grupo[hidden] { display: none; }
/* ── Crear anuncio ──────────────────────────────────────── */
.formulario__fila { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-4); }
.formulario input[type="file"] { background: var(--superficie); padding: var(--e-3); }
.opciones-anuncio { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--e-5); margin-bottom: var(--e-5); }
.opcion { background: var(--superficie); border-radius: var(--radio); padding: var(--e-5); box-shadow: var(--sombra); display: grid; gap: var(--e-3); align-content: start; }
.opcion h3 { font-size: var(--t-s); margin-top: var(--e-2); }
.opcion__para, .opcion__auditoria { font-size: var(--t-xs); color: var(--tinta-3); }
.opcion__lienzo { width: 100%; height: auto; border-radius: var(--radio-s); display: block; }
.opcion__texto { font-size: var(--t-s); color: var(--tinta-2); }
.opcion__titulos, .opcion__descripciones { margin: 0; padding-left: 1.1em; font-size: var(--t-s); color: var(--tinta-2); display: grid; gap: 2px; }
.opcion__titulos li { color: var(--azul); font-weight: 600; }
.descargas { display: flex; flex-wrap: wrap; gap: var(--e-3); margin-bottom: var(--e-5); }
.tipografias, .formatos { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: var(--e-3); }
.tipografias legend, .formatos legend { font-size: var(--t-xs); font-weight: 600; color: var(--tinta-2); margin-bottom: var(--e-2); width: 100%; }
.formatos { display: grid; }
.tipografia { position: relative; }
.tipografia input { position: absolute; opacity: 0; }
.tipografia span {
display: grid; gap: 2px; min-width: 120px; padding: var(--e-3) var(--e-4); border: 1px solid var(--linea);
border-radius: var(--radio-s); background: var(--superficie); font-size: var(--t-m); font-weight: 700; color: var(--tinta); cursor: pointer;
}
.tipografia small { font-size: var(--t-xs); font-weight: 500; color: var(--tinta-3); }
.tipografia input:checked + span { border-color: var(--terracota); box-shadow: 0 0 0 2px var(--terracota-suave); }
.tipografia input:focus-visible + span { outline: 2px solid var(--azul); outline-offset: 2px; }
.fotos-ia { margin: 0 0 var(--e-6); padding: 0; }
.fotos-ia > summary { cursor: pointer; padding: var(--e-5); display: grid; gap: var(--e-1); list-style: none; }
.fotos-ia > summary::-webkit-details-marker { display: none; }
.fotos-ia > summary span { color: var(--tinta-2); font-size: var(--t-s); }
.fotos-ia[open] > summary { border-bottom: 1px solid var(--linea); }
#prompts { padding: 0 var(--e-5) var(--e-5); display: grid; gap: var(--e-4); }
.prompt { display: grid; gap: var(--e-3); padding-top: var(--e-4); border-top: 1px solid var(--linea); }
.prompt__texto { white-space: pre-wrap; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: var(--t-xs); background: var(--cal); border-radius: var(--radio-s); padding: var(--e-4); margin: 0; color: var(--tinta); }
.prompt__acciones { display: flex; flex-wrap: wrap; gap: var(--e-3); }
.prompt details summary { font-size: var(--t-xs); color: var(--tinta-3); cursor: pointer; margin-bottom: var(--e-2); }
.plan__iva { font-size: var(--t-xs); font-weight: 500; color: var(--tinta-3); }
@media (max-width: 860px) {
.app { grid-template-columns: minmax(0, 1fr); }
.lateral {
position: fixed; inset: auto 0 0 0; top: auto; height: auto; z-index: 10; overflow: visible;
flex-direction: row; padding: var(--e-2) var(--e-2) calc(var(--e-2) + env(safe-area-inset-bottom));
border-right: 0; border-top: 1px solid var(--linea); background: color-mix(in srgb, var(--cal) 92%, transparent);
backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.marca, .lateral__pie { display: none; }
.barra-movil {
display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e-3);
padding: var(--e-3) var(--e-4); border-bottom: 1px solid var(--linea);
}
.barra-movil a { font-size: var(--t-s); font-weight: 600; color: var(--tinta-2); text-decoration: none; }
.banner-demo, .banner-legal { margin: var(--e-4) var(--e-4) 0; }
.pie-legal { padding: 0 var(--e-4) calc(96px + env(safe-area-inset-bottom)); }
.nav { flex-direction: row; justify-content: space-around; width: 100%; }
.nav a { flex-direction: column; gap: 2px; padding: var(--e-2) 0; font-size: 11px; flex: 1 1 0; min-width: 0; text-align: center; }
.nav a[aria-current="page"] { background: transparent; box-shadow: none; }
.nav a span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.nav .largo { display: none; }
.nav .corto { display: inline; }
.contenido { padding: var(--e-6) var(--e-4) var(--e-6); }
.encabezado { margin-bottom: var(--e-6); }
.plano { grid-template-columns: minmax(0, 1fr); padding: var(--e-5); }
.metricas { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-3); }
.metrica { padding: var(--e-4); }
.metrica__valor { font-size: var(--t-l); }
.formulario--linea, .formulario__fila { grid-template-columns: minmax(0, 1fr); }
.conexion { grid-template-columns: minmax(0, 1fr); padding: var(--e-5); }
.siguiente-paso { padding: var(--e-5); }
th, td { padding: var(--e-3) var(--e-4); }
}
@media (prefers-reduced-motion: no-preference) {
.vista { animation: aparecer .24s var(--ease-out); }
@keyframes aparecer { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
}
/* ── Registro: tipo de cuenta y encuesta ───────────────── */
.tipos-cuenta { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--e-4); margin-bottom: var(--e-5); }
.tipo-cuenta {
display: grid; gap: var(--e-2); align-content: start; text-align: left; cursor: pointer;
background: var(--superficie); color: var(--tinta-2); border: 2px solid var(--linea); border-radius: var(--radio);
padding: var(--e-5); font-size: var(--t-s); min-height: 44px;
}
.tipo-cuenta strong { color: var(--tinta); font-size: var(--t-m); }
.tipo-cuenta__icono svg { width: 32px; height: 32px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; color: var(--tinta-2); }
@media (hover: hover) and (pointer: fine) { .tipo-cuenta:hover { border-color: var(--tinta-3); } }
.tipo-cuenta[aria-checked="true"] { border-color: var(--marca); box-shadow: var(--sombra); }
.tipo-cuenta[aria-checked="true"] .tipo-cuenta__icono svg { color: var(--marca); }
.formulario__acciones { display: flex; flex-wrap: wrap; gap: var(--e-3); align-items: center; }
.formulario__acciones .boton { justify-self: auto; }
.encuesta { gap: var(--e-5); }
.encuesta__pregunta { border: 0; margin: 0; padding: 0; display: grid; gap: var(--e-2); font-size: var(--t-s); font-weight: 600; color: var(--tinta); }
.encuesta__pregunta legend { padding: 0; margin-bottom: var(--e-2); }
.encuesta__ayuda { font-weight: 500; color: var(--tinta-3); font-size: var(--t-xs); }
.encuesta__excepcion, .encuesta__otras { display: grid; gap: var(--e-1); font-weight: 500; color: var(--tinta-2); }
.chips { display: flex; flex-wrap: wrap; gap: var(--e-2); }
.chip { position: relative; display: inline-flex !important; cursor: pointer; }
.chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chip span {
display: inline-flex; align-items: center; min-height: 40px; padding: 0 var(--e-4); border-radius: 999px;
border: 1px solid var(--linea); background: var(--superficie); color: var(--tinta-2); font-weight: 500; font-size: var(--t-s);
}
.chip input:checked + span { background: var(--terracota-suave); border-color: var(--marca); color: var(--tinta); font-weight: 600; }
.chip input:focus-visible + span { outline: 2px solid var(--azul); outline-offset: 2px; }
button.chip { background: none; border: 0; padding: 0; font: inherit; }
.chip[aria-selected="true"] span { background: var(--terracota-suave); border-color: var(--marca); color: var(--tinta); font-weight: 600; }
button.chip:focus-visible span { outline: 2px solid var(--azul); outline-offset: 2px; }
.cliente-chip--selector select {
font: inherit; font-weight: 600; color: var(--tinta); background: transparent; border: 0; max-width: 190px;
padding: 0; cursor: pointer; text-overflow: ellipsis;
}
.perfil-resumen { display: grid; gap: var(--e-2); font-size: var(--t-s); color: var(--tinta-2); }
.negocios-lista { display: grid; gap: var(--e-2); margin: 0; padding: 0; list-style: none; }
.negocios-lista li { display: flex; align-items: center; justify-content: space-between; gap: var(--e-3); padding: var(--e-3) 0; border-bottom: 1px solid var(--linea); font-size: var(--t-s); }
.negocios-lista li:last-child { border-bottom: 0; }
/* ── Reporte mensual (imprimible) ──────────────────────── */
.reporte__acciones { display: flex; flex-wrap: wrap; gap: var(--e-3); margin-bottom: var(--e-5); }
.reporte {
--marca-reporte: #243f8f;
background: #fff; color: #1c2440; border: 1px solid var(--linea); border-top: 8px solid var(--marca-reporte);
padding: var(--e-6); display: grid; gap: var(--e-5); max-width: 900px;
}
.reporte__cabeza { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--e-4); }
.reporte__marca { font-size: var(--t-l); font-weight: 700; color: var(--marca-reporte); }
.reporte__contacto, .reporte__periodo { font-size: var(--t-xs); color: #5b6177; }
.reporte__periodo { text-align: right; }
.reporte__titulo { font-size: var(--t-xl); font-weight: 300; }
.reporte__titulo span { color: #8b8fa0; }
.reporte__resumen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: #e4ddd1; border: 1px solid #e4ddd1; }
.reporte__dato { background: #fff; padding: var(--e-4); }
.reporte__etiqueta { font-size: var(--t-xs); color: #5b6177; font-weight: 600; }
.reporte__valor { font-size: 1.75rem; font-weight: 300; color: var(--marca-reporte); margin-top: var(--e-1); font-variant-numeric: tabular-nums; }
.reporte__nota { font-size: var(--t-xs); color: #8b8fa0; margin-top: var(--e-1); }
.reporte__bloque h2 { font-size: var(--t-m); margin-bottom: var(--e-3); color: var(--marca-reporte); }
.reporte__lista { margin: 0; padding-left: 1.2em; display: grid; gap: var(--e-3); font-size: var(--t-s); color: #5b6177; }
.reporte__lista strong { color: #1c2440; }
.reporte table th, .reporte table td { color: #1c2440; border-color: #e4ddd1; padding: var(--e-2) var(--e-3); }
.reporte__pie { border-top: 1px solid #e4ddd1; padding-top: var(--e-3); font-size: var(--t-xs); color: #8b8fa0; display: grid; gap: var(--e-1); }
@media (max-width: 600px) { .reporte { padding: var(--e-4); } .reporte__resumen { grid-template-columns: repeat(2, minmax(0, 1fr)); } .reporte__periodo { text-align: left; } }
@media print {
@page { margin: 12mm; }
body { background: #fff !important; }
.lateral, .barra-movil, .banner-demo, .banner-legal, .pie-legal, .no-imprimir, .anuncio { display: none !important; }
.app { display: block; }
.contenido { padding: 0; max-width: none; }
.reporte { border-left: 0; border-right: 0; border-bottom: 0; max-width: none; padding: 0 0 0 0; }
.reporte, .reporte * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.reporte__bloque { break-inside: avoid; }
}
/* Los ejemplos dentro de los campos no deben parecer respuestas ya escritas. */
.formulario ::placeholder { font-weight: 400; color: var(--tinta-3); opacity: .8; font-style: italic; }
.enlace-boton { background: none; border: 0; padding: 0; color: var(--azul); text-decoration: underline; cursor: pointer; font: inherit; }
/* ── Gen: el asistente que acompaña en todas las pantallas ── */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.gen { position: fixed; right: 20px; bottom: 20px; z-index: 30; display: grid; justify-items: end; gap: var(--e-2); }
.gen__abrir {
position: relative; width: 84px; height: 84px; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
background: var(--superficie); box-shadow: 0 8px 24px rgba(28, 36, 64, .28); outline-offset: 4px;
}
.gen__abrir .gen__svg { width: 100%; height: 100%; }
.gen--abierto .gen__abrir { display: none; }
.gen__punto { position: absolute; top: 6px; right: 6px; width: 14px; height: 14px; border-radius: 50%; background: var(--agave); border: 2px solid var(--superficie); }
.gen--nuevo .gen__punto { background: var(--terracota); }
/* La nube de pensamiento con la pregunta de la pantalla. */
.gen__nube {
position: relative; max-width: 260px; display: flex; align-items: flex-start; gap: var(--e-1);
background: var(--superficie); color: var(--tinta); border: 2px solid var(--azul); border-radius: 22px;
padding: var(--e-3) var(--e-2) var(--e-3) var(--e-4); box-shadow: 0 8px 24px rgba(28, 36, 64, .18);
margin-right: 30px; margin-bottom: 14px; animation: gen-aparece .3s var(--ease-out);
}
.gen__nube[hidden] { display: none; }
.gen__nube::before, .gen__nube::after { content: ""; position: absolute; border: 2px solid var(--azul); background: var(--superficie); border-radius: 50%; }
.gen__nube::before { width: 16px; height: 16px; right: 18px; bottom: -14px; }
.gen__nube::after { width: 9px; height: 9px; right: 8px; bottom: -26px; }
.gen__nube-texto { flex: 1; background: none; border: 0; padding: 0; text-align: left; font: inherit; font-size: var(--t-s); font-weight: 600; color: inherit; cursor: pointer; line-height: 1.35; }
@media (hover: hover) and (pointer: fine) { .gen__nube-texto:hover { color: var(--azul); } }
.gen__nube-cerrar { background: none; border: 0; color: var(--tinta-3); font-size: 20px; line-height: 1; cursor: pointer; min-width: 44px; min-height: 44px; }
/* El panel de plática. */
.gen__panel {
width: min(400px, calc(100vw - 32px)); height: min(600px, calc(100dvh - 40px)); display: flex; flex-direction: column;
background: var(--superficie); border: 1px solid var(--linea); box-shadow: 0 12px 40px rgba(28, 36, 64, .28); border-radius: 14px; overflow: hidden;
}
.gen__panel[hidden] { display: none; }
.gen__cabeza { display: flex; align-items: center; gap: var(--e-3); padding: var(--e-2) var(--e-3); background: var(--rail, #1c2440); color: #fff; }
.gen__cabeza > div { flex: 1; }
.gen__cabeza span { display: flex; align-items: center; gap: 6px; font-size: var(--t-xs); opacity: .85; }
.gen__avatar { width: 48px; height: 48px; flex: none; border-radius: 50%; background: var(--superficie); overflow: hidden; }
.gen__avatar .gen__svg { width: 100%; height: 100%; }
.gen__enlinea { width: 8px; height: 8px; border-radius: 50%; background: #5fd38d; box-shadow: 0 0 0 3px rgba(95, 211, 141, .25); }
.gen__cerrar { background: none; border: 0; color: #fff; font-size: 28px; line-height: 1; cursor: pointer; min-width: 44px; min-height: 44px; }
.gen__mensajes { flex: 1; overflow-y: auto; padding: var(--e-4); display: grid; gap: var(--e-3); align-content: start; }
.gen__msg { max-width: 88%; padding: var(--e-3); font-size: var(--t-s); line-height: 1.45; border-radius: 14px; }
.gen__msg--gen { background: var(--cantera); color: var(--tinta); justify-self: start; border-bottom-left-radius: 4px; }
.gen__msg--usuario { background: var(--azul); color: #fff; justify-self: end; border-bottom-right-radius: 4px; }
.gen__msg--usuario p { color: #fff; }
.gen__enlaces, .gen__aviso { margin-top: var(--e-2); font-size: var(--t-xs); color: var(--tinta-2); }
.gen__enlaces a { color: var(--azul); font-weight: 600; }
.gen__tarjeta { max-width: 96%; display: grid; gap: var(--e-2); border: 1px solid var(--linea); background: var(--superficie); }
.gen__campana { background: var(--cantera); padding: var(--e-3); border-radius: 10px; display: grid; gap: var(--e-1); }
.gen__botones { display: flex; flex-wrap: wrap; gap: var(--e-2); margin-top: var(--e-1); }
.gen__botones .boton { min-height: 40px; }
.gen__escribiendo { display: inline-flex; gap: 4px; padding: var(--e-3) var(--e-4); }
.gen__escribiendo span { width: 8px; height: 8px; border-radius: 50%; background: var(--tinta-3); animation: gen-punto 1s infinite ease-in-out; }
.gen__escribiendo span:nth-child(2) { animation-delay: .15s; }
.gen__escribiendo span:nth-child(3) { animation-delay: .3s; }
.gen__atajos { display: flex; flex-wrap: wrap; gap: var(--e-2); padding: 0 var(--e-4) var(--e-3); }
.gen__atajos:empty { display: none; }
.gen__atajo { background: var(--superficie); border: 1px solid var(--azul); color: var(--azul); font: inherit; font-size: var(--t-xs); font-weight: 600; padding: var(--e-2) var(--e-3); border-radius: 999px; cursor: pointer; min-height: 44px; text-align: left; }
@media (hover: hover) and (pointer: fine) { .gen__atajo:hover { background: var(--azul-suave); } }
.gen__form { display: flex; gap: var(--e-2); padding: var(--e-3); border-top: 1px solid var(--linea); }
.gen__form input { flex: 1; min-width: 0; min-height: 44px; padding: 0 var(--e-3); border: 1px solid var(--linea); background: var(--cal); color: var(--tinta); font: inherit; border-radius: 22px; }
.gen__form .boton { min-height: 44px; padding: 0 var(--e-4); border-radius: 22px; }
.gen__mic { min-width: 44px; min-height: 44px; border: 0; border-radius: 50%; background: var(--terracota-suave); font-size: 20px; cursor: pointer; }
.gen__mic[hidden] { display: none; }
.gen__mic--escuchando { background: var(--terracota); animation: gen-latido 1s ease-in-out infinite; }
.gen__dns { width: 100%; border-collapse: collapse; font-size: var(--t-xs); }
.gen__dns th, .gen__dns td { text-align: left; padding: 6px; border-bottom: 1px solid var(--linea); }
.gen__dns code { font-size: var(--t-xs); word-break: break-all; }
.gen__nota { font-size: 11px; color: var(--tinta-3); padding: 0 var(--e-3) var(--e-3); }
/* Gen está vivo: parpadea, se mueve un poco, saluda y teclea cuando piensa. */
.gen__luz, .gen__manos { transform-box: fill-box; transform-origin: center; }
.gen__ojos { transform-origin: 60px 51px; animation: gen-parpadeo 5s infinite; }
.gen__abrir .gen__svg { animation: gen-flota 4s ease-in-out infinite; }
.gen--saluda .gen__abrir .gen__svg { animation: gen-saludo .6s ease-in-out 3; }
.gen--pensando .gen__manos { animation: gen-teclea .3s steps(2) infinite; }
.gen--pensando .gen__luz { animation: gen-latido .8s ease-in-out infinite; fill: #5fd38d; }
@keyframes gen-parpadeo { 0%, 94%, 100% { transform: scaleY(1); } 97% { transform: scaleY(.1); } }
@keyframes gen-flota { 50% { transform: translateY(-3px); } }
@keyframes gen-saludo { 25% { transform: rotate(-8deg); } 75% { transform: rotate(8deg); } }
@keyframes gen-teclea { 50% { transform: translateY(-2px); } }
@keyframes gen-punto { 0%, 80%, 100% { opacity: .3; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-4px); } }
@keyframes gen-latido { 50% { transform: scale(1.12); } }
@keyframes gen-aparece { from { opacity: 0; transform: translateY(8px) scale(.96); } }
/* Gestos cada 16 s (solo en el botón flotante): sonrisa → dientes de conejo → serio de lentes → saluda. */
.gen__dientes, .gen__serio, .gen__brazo { opacity: 0; }
.gen__brazo { transform-origin: 84px 96px; transform: rotate(35deg); }
.gen__abrir .gen__boca { animation: gen-boca 16s infinite; }
.gen__abrir .gen__dientes { animation: gen-dientes 16s infinite; }
.gen__abrir .gen__serio { animation: gen-serio 16s infinite; }
.gen__abrir .gen__brazo { animation: gen-brazo 16s infinite; }
.gen__abrir .gen__mano-der { animation: gen-mano 16s infinite; }
@keyframes gen-boca { 0%, 34% { opacity: 1; } 35%, 64% { opacity: 0; } 65%, 100% { opacity: 1; } }
@keyframes gen-dientes { 0%, 34% { opacity: 0; } 35%, 48% { opacity: 1; } 49%, 100% { opacity: 0; } }
@keyframes gen-serio { 0%, 48% { opacity: 0; } 49%, 64% { opacity: 1; } 65%, 100% { opacity: 0; } }
@keyframes gen-brazo {
0%, 68% { opacity: 0; transform: rotate(35deg); }
71% { opacity: 1; transform: rotate(0); }
74% { transform: rotate(-12deg); } 77% { transform: rotate(8deg); } 80% { transform: rotate(-12deg); } 83% { transform: rotate(8deg); }
86% { opacity: 1; transform: rotate(0); }
89%, 100% { opacity: 0; transform: rotate(35deg); }
}
@keyframes gen-mano { 0%, 68% { opacity: 1; } 69%, 88% { opacity: 0; } 89%, 100% { opacity: 1; } }
/* Para no estorbar: se hace a un lado al hacer scroll y se oculta con el teclado abierto. */
.gen:not(.gen--abierto), .gen__abrir { transition: transform .35s var(--ease-out), opacity .35s var(--ease-out); }
.gen--aparte:not(.gen--abierto) .gen__abrir { transform: translateX(62%); opacity: .55; }
.gen--aparte .gen__nube { visibility: hidden; }
.gen--oculto:not(.gen--abierto) { transform: translateX(140%); opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: reduce) {
.gen *, .gen *::before, .gen *::after { animation: none !important; }
.gen { transition: none !important; }
}
@media (max-width: 860px) {
.gen { right: 8px; bottom: calc(80px + env(safe-area-inset-bottom)); }
.gen__abrir { width: 56px; height: 56px; }
.gen__punto { width: 12px; height: 12px; top: 3px; right: 3px; }
/* Espacio al final de cada pantalla para que el último botón nunca quede debajo de Gen. */
.contenido { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
.gen__nube { max-width: min(240px, calc(100vw - 110px)); }
.gen--abierto { inset: 0; right: 0; bottom: 0; }
.gen--abierto .gen__panel { width: 100vw; height: 100dvh; border-radius: 0; }
}
/* Gen con estilo "bóveda de medianoche": casi negro, líneas finas en vez de sombras, un solo acento cobre
para etiquetas y enlaces, acción principal en píldora blanca y el nombre en serif. Todo queda dentro de
.gen para no tocar el resto de la app. */
.gen {
--g-fondo: #08080a; --g-hondo: #040406; --g-panel: #121317; --g-linea: #1c1d22; --g-linea-2: #2e3038;
--g-texto: #e2e3e9; --g-suave: #9194a1; --g-cobre: #cc9166; --g-anillo: rgba(255, 255, 255, .2) 0 0 0 1px;
--g-oro: linear-gradient(103deg, rgb(174, 147, 87), rgb(255, 240, 204) 40%, rgb(174, 147, 87) 70%, rgba(189, 157, 79, 0));
}
.gen__abrir { background: var(--g-fondo); box-shadow: var(--g-anillo); }
.gen__punto { border-color: var(--g-fondo); }
.gen--nuevo .gen__punto { background: var(--g-cobre); }
.gen__nube, .gen__nube::before, .gen__nube::after { background: var(--g-panel); border: 1px solid var(--g-linea-2); box-shadow: none; }
.gen__nube { color: var(--g-texto); border-radius: 10px; }
.gen__nube-cerrar { color: var(--g-suave); }
@media (hover: hover) and (pointer: fine) { .gen__nube-texto:hover { color: var(--g-cobre); } }
.gen__panel { background: var(--g-fondo); color: var(--g-texto); border: 1px solid var(--g-linea); box-shadow: var(--g-anillo); border-radius: 10px; }
.gen__cabeza { position: relative; background: var(--g-panel); border-bottom: 1px solid var(--g-linea); }
.gen__cabeza::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--g-oro); }
.gen__cabeza strong { font-family: "Playfair Display", Georgia, serif; font-weight: 400; font-size: 1.75rem; line-height: 1; letter-spacing: .01em; color: #fff; }
.gen__cabeza span { color: var(--g-suave); opacity: 1; }
.gen__avatar { background: var(--g-hondo); box-shadow: var(--g-anillo); }
.gen__msg { border-radius: 10px; }
.gen__msg--gen { background: var(--g-panel); color: var(--g-texto); border: 1px solid var(--g-linea); }
.gen__msg--usuario { background: #fff; color: #000; }
.gen__msg--usuario p { color: #000; }
.gen__enlaces, .gen__aviso { color: var(--g-suave); }
.gen__enlaces a { color: var(--g-cobre); font-weight: 500; text-underline-offset: 3px; }
.gen__tarjeta { background: var(--g-hondo); border-color: var(--g-linea-2); }
.gen__campana { background: var(--g-panel); border: 1px solid var(--g-linea); }
.gen__escribiendo span { background: var(--g-cobre); }
.gen__atajo { background: transparent; border: 1px solid #777a88; color: #fff; font-weight: 500; border-radius: 9999px; }
@media (hover: hover) and (pointer: fine) { .gen__atajo:hover { background: transparent; border-color: var(--g-cobre); color: var(--g-cobre); } }
.gen__form { border-top-color: var(--g-linea); background: var(--g-hondo); }
.gen__form input { background: transparent; color: #fff; border: 1px solid var(--g-linea-2); border-radius: 9999px; caret-color: var(--g-cobre); }
.gen__form input::placeholder { color: var(--g-suave); }
.gen__form input:focus-visible { outline: none; border-color: #fff; }
.gen .boton { background: #fff; color: #000; border-radius: 9999px; font-weight: 500; }
.gen .boton--secundario { background: transparent; color: #fff; box-shadow: inset 0 0 0 1px #777a88; }
.gen__mic { background: transparent; border: 1px solid var(--g-linea-2); color: #fff; border-radius: 9999px; }
.gen__mic--escuchando { background: var(--g-cobre); border-color: var(--g-cobre); }
.gen__dns th, .gen__dns td { border-bottom-color: var(--g-linea); }
.gen__nota { color: var(--g-suave); }
.gen :focus-visible { outline: 2px solid var(--g-cobre); outline-offset: 2px; }
.gen ::selection { background: rgba(204, 145, 102, .35); color: #fff; }
.gen__mensajes { scrollbar-color: var(--g-linea-2) transparent; }
@media print { .gen { display: none !important; } }
/* ── Funciones Pro ─────────────────────────────────────── */
.vista-whatsapp { white-space: pre-wrap; font: inherit; font-size: var(--t-s); background: #e7f7e3; color: #1c2440; padding: var(--e-4); border-radius: 12px 12px 12px 4px; margin: 0; max-width: 46ch; }
.vista-whatsapp[hidden] { display: none; }
.resena { display: grid; gap: var(--e-2); }
.resena__respuesta { display: grid; gap: var(--e-1); font-size: var(--t-xs); font-weight: 600; color: var(--tinta-2); }
.resena__respuesta textarea { font: inherit; font-size: var(--t-s); padding: var(--e-3); border: 1px solid var(--linea); background: var(--cal); color: var(--tinta); border-radius: 2px; }
.consejos { margin: var(--e-4) 0; padding-left: 1.2em; display: grid; gap: var(--e-2); color: var(--tinta-2); font-size: var(--t-s); }
.item ol { margin: var(--e-2) 0; padding-left: 1.2em; color: var(--tinta-2); font-size: var(--t-s); }
.item details summary { cursor: pointer; font-size: var(--t-xs); font-weight: 600; color: var(--azul); margin-top: var(--e-2); }
.barra-movil__enlaces { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--e-4); } /* con el enlace Admin (solo el dueño) no cabe en 390 px: baja de renglón en vez de desbordar */
/* Cerrar sesión: un formulario (POST /salir) que se ve como los demás enlaces, con zona táctil de 44 px. */
.salir { margin: 0; }
.salir[hidden] { display: none; }
.salir button { background: none; border: 0; padding: 0; font: inherit; color: var(--tinta-2); font-weight: 600; font-size: var(--t-s); cursor: pointer; min-height: 44px; text-align: left; }
@media (hover: hover) and (pointer: fine) { .salir button:hover { color: var(--marca); } }
/* Al crear el negocio no hay menú: "Salir" va arriba a la derecha. */
.salir--alta { display: none; }
.onboarding .salir--alta:not([hidden]) { display: flex; justify-content: flex-end; padding: var(--e-3) var(--e-4) 0; }
/* El reporte nunca se sale de la pantalla (tablas con scroll propio). */
.reporte > * { min-width: 0; }
.reporte table { display: block; overflow-x: auto; }
.reporte__titulo { overflow-wrap: anywhere; }
.pagina-cliente .contenido { margin: 0 auto; }
@media (max-width: 600px) { .pagina-cliente .contenido { padding: var(--e-5) var(--e-4); } }
/* ── Inicio "un botón" ─────────────────────────────────── */
.retorno { background: var(--color-retorno, var(--mosaico-4)); color: #fff; padding: var(--e-6); margin-bottom: var(--e-5); }
.retorno__frase { font-size: clamp(1.75rem, 4.5vw, 2.75rem); font-weight: 300; line-height: 1.15; }
.retorno__detalle { margin-top: var(--e-3); opacity: .92; font-size: var(--t-s); }
.retorno__transparencia { margin-top: var(--e-4); background: rgba(0, 0, 0, .15); padding: var(--e-3) var(--e-4); font-size: var(--t-s); }
.retorno__transparencia summary { cursor: pointer; font-weight: 600; }
.retorno__transparencia p, .retorno__transparencia table { margin-top: var(--e-3); }
.retorno__transparencia th, .retorno__transparencia td, .retorno__transparencia .opcional { color: #fff; border-color: rgba(255, 255, 255, .25); }
.retorno__transparencia input { color: var(--tinta); }
.retorno__transparencia label { color: #fff; }
.control-botones { display: flex; flex-wrap: wrap; gap: var(--e-3); margin-bottom: var(--e-2); }
.boton--grande { min-height: 60px; font-size: var(--t-m); padding: 0 var(--e-6); }
.boton--voz { background: var(--azul); }
.estado-anuncios { margin-bottom: var(--e-5); }
.mosaicos-inicio { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 6px; }
.mosaico { color: #fff; text-decoration: none; padding: var(--e-4); min-height: 130px; display: flex; flex-direction: column; gap: var(--e-1); outline: 2px solid transparent; outline-offset: -2px; }
@media (hover: hover) and (pointer: fine) { .mosaico:hover { outline-color: rgba(255, 255, 255, .55); } }
.mosaico span { font-size: var(--t-s); font-weight: 600; }
.mosaico strong { font-size: 2rem; font-weight: 300; margin-top: auto; }
.mosaico small { font-size: var(--t-xs); opacity: .9; }
.mosaico--1 { background: var(--mosaico-1); } .mosaico--2 { background: var(--mosaico-2); } .mosaico--3 { background: var(--mosaico-3); }
.mosaico--4 { background: var(--mosaico-4); } .mosaico--5 { background: var(--mosaico-5); }
/* ── Agentes ───────────────────────────────────────────── */
.freno { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e-4); padding: var(--e-4) var(--e-5); border: 1px solid var(--linea); background: var(--superficie); margin-bottom: var(--e-6); }
.freno--activo { border-color: var(--chile); background: color-mix(in srgb, var(--chile) 8%, var(--superficie)); }
.agentes { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--e-4); }
.agente { background: var(--superficie); border: 1px solid var(--linea); padding: var(--e-4); display: grid; gap: var(--e-2); align-content: start; }
.agente h3 { font-size: var(--t-m); }
.agente p { color: var(--tinta-2); font-size: var(--t-s); }
.agente label { display: grid; gap: var(--e-1); font-size: var(--t-xs); font-weight: 600; color: var(--tinta-2); }
.agente select { font: inherit; min-height: 44px; padding: 0 var(--e-2); border: 1px solid var(--linea); background: var(--cal); color: var(--tinta); }
.codigo { white-space: pre-wrap; overflow-wrap: anywhere; font-family: ui-monospace, Consolas, monospace; font-size: var(--t-xs); background: var(--cal); color: var(--tinta); padding: var(--e-3); border: 1px solid var(--linea); max-height: 320px; overflow: auto; }
.plan__lema { font-weight: 700; color: var(--marca); font-size: var(--t-s); margin-top: calc(-1 * var(--e-2)); }
/* Velocidad (Core Web Vitals) */
.velocidad__metricas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e-3); margin-block: var(--e-3); }
.velocidad__metricas > * { min-width: 0; }
.velocidad__metrica[data-estado="mal"] { --estado: var(--chile); }
.velocidad__metrica[data-estado="mejorar"] { --estado: var(--terracota); }
.velocidad__metrica[data-estado="bien"] { --estado: var(--agave); }
.velocidad__metrica[data-estado] { background: color-mix(in srgb, var(--estado) 9%, var(--superficie)); border-color: color-mix(in srgb, var(--estado) 35%, var(--linea)); }
@media (max-width: 640px) { .velocidad__metricas { grid-template-columns: 1fr; } }
/* WhatsApp: simulador de chat */
.wa-chat { display: flex; flex-direction: column; gap: var(--e-2); max-height: 420px; overflow-y: auto; background: var(--cal); }
.wa-chat__msg { align-self: flex-start; max-width: min(85%, 520px); background: var(--superficie); border: 1px solid var(--linea); padding: var(--e-2) var(--e-3); overflow-wrap: anywhere; }
.wa-chat__msg p { margin: 0 0 var(--e-2); }
.wa-chat__msg .boton { margin: 0 var(--e-2) var(--e-1) 0; }
.wa-chat__msg--propio { align-self: flex-end; background: var(--agave-suave); color: var(--tinta); }
/* Conecta tu negocio en 3 pasos */
.paso-conectar { display: grid; gap: var(--e-3); margin-bottom: var(--e-4); }
.paso-conectar--listo { border-color: color-mix(in srgb, var(--agave) 45%, var(--linea)); background: color-mix(in srgb, var(--agave) 7%, var(--superficie)); }
.paso-conectar h2 { margin: 0; }
/* "Avanzado" plegado: no siempre respeta display:grid, así que se apila a mano. */
details.paso-conectar { display: block; }
details.paso-conectar > summary { cursor: pointer; min-height: 44px; padding-block: var(--e-1); }
details.paso-conectar[open] > summary { margin-bottom: var(--e-3); }
details.paso-conectar > :not(summary) + :not(summary) { margin-top: var(--e-3); }
.lista-simple { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--e-2); }
/* ── Sensación de app nativa en el celular ───────────────── */
/* Sin el destello gris al tocar y sin "jalar para recargar" que mueve toda la app. */
html { -webkit-tap-highlight-color: transparent; }
html, body { overscroll-behavior-y: none; }
.gen__mensajes { overscroll-behavior: contain; }
/* iOS hace zoom en campos con letra menor a 16 px y no regresa: se fija en 16 px con dedo. */
@media (pointer: coarse) { input, textarea, select { font-size: 16px !important; } }
/* Toque inmediato (sin la espera de doble toque) y sin seleccionar el texto de los botones al dejar el dedo. */
button, a, [role="button"], .boton, .gen__atajo, .chip, .tipo-cuenta, .mosaico, summary {
touch-action: manipulation; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
/* Respuesta al presionar (no al soltar), en dedo y en mouse. */
.boton, .gen__atajo, .gen__abrir, .gen__mic, .tipo-cuenta, .mosaico, .nav a {
transition: transform var(--dur-presion) var(--ease-out), background-color var(--dur-presion) var(--ease-out), filter var(--dur-presion) var(--ease-out);
}
.boton:active, .gen__atajo:active, .gen__mic:active, .tipo-cuenta:active { transform: scale(.97); }
.gen__abrir:active, .mosaico:active { transform: scale(.96); }
.nav a:active { filter: brightness(.94); }
@media (prefers-reduced-motion: reduce) { .boton:active, .gen__atajo:active, .gen__mic:active, .tipo-cuenta:active, .gen__abrir:active, .mosaico:active { transform: none; } }
/* Gen en pantalla completa: la cabeza no queda bajo el notch ni la caja de texto bajo la barra de inicio. */
@media (max-width: 860px) {
.gen--abierto .gen__cabeza { padding-top: calc(var(--e-2) + env(safe-area-inset-top, 0px)); }
.gen--abierto .gen__form { padding-bottom: calc(var(--e-3) + env(safe-area-inset-bottom, 0px)); }
}
/* Revisión de tu página: calificaciones como PageSpeed Insights (verde 90–100, naranja 50–89, rojo 0–49). */
.califs { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: var(--e-4); margin: var(--e-4) 0; }
.calif { display: grid; justify-items: center; gap: var(--e-2); text-align: center; }
.calif__aro { --c: var(--tinta-3); width: 76px; height: 76px; border-radius: 50%; display: grid; place-items: center;
background: radial-gradient(closest-side, var(--superficie) 80%, transparent 81%), conic-gradient(var(--c) calc(var(--p) * 1%), var(--linea) 0); }
.calif__aro b { font-size: 1.5rem; color: var(--c); font-variant-numeric: tabular-nums; }
.calif__nombre { font-size: var(--t-s); font-weight: 600; }
.calif--bien .calif__aro { --c: #0c8a4b; }
.calif--mejorar .calif__aro { --c: #c46b00; }
.calif--mal .calif__aro { --c: #c62828; }
.pestanas { display: flex; gap: var(--e-2); margin-top: var(--e-4); }
.pestana { min-height: 44px; padding: 0 var(--e-4); border: 1px solid var(--linea); border-radius: 999px; background: var(--superficie); color: var(--tinta); font: inherit; font-weight: 600; cursor: pointer; }
.pestana--activa { background: var(--azul); border-color: var(--azul); color: #fff; }
/* Vincular una cuenta de Google Ads con Genesis en un clic. */
.vincular { margin-top: var(--e-3); }
.vincular summary { cursor: pointer; font-weight: 600; color: var(--azul); min-height: 44px; display: flex; align-items: center; }
/* Indexación: etiqueta de estado de cada página. */
.indexacion__estado { display: inline-block; font-size: var(--t-s); font-weight: 600; padding: 2px var(--e-2); border-radius: 999px; margin-right: var(--e-2); color: #fff; background: var(--tinta-3); }
.indexacion__estado--bien { background: #0c8a4b; }
.indexacion__estado--mejorar { background: #a35900; }
.indexacion__estado--mal { background: #c62828; }
/* Anuncio editable de Google Ads: todo lo llena Genesis y la persona puede cambiarlo. */
.ajustes-ads details { margin: var(--e-3) 0; }
.ajustes-ads summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; gap: var(--e-2); }
.campo-ads { display: grid; gap: 2px; margin: var(--e-2) 0; }
.campo-ads input { width: 100%; font-size: 16px; }
.campo-ads__contador { justify-self: end; }
.vinculo-ads { border: 1px solid var(--linea); border-radius: 12px; padding: var(--e-3); margin: var(--e-2) 0; }
.zona-ads { display: flex; gap: var(--e-2); margin: var(--e-2) 0; }
.zona-ads input { flex: 1; font-size: 16px; min-width: 0; }
.zona-ads .boton { min-width: 44px; padding: 0 var(--e-3); }
.checks-ads { display: flex; flex-wrap: wrap; gap: var(--e-2) var(--e-4); }
.checks-ads label { display: flex; align-items: center; gap: var(--e-1); min-height: 44px; }
.ajustes-ads select { width: 100%; font-size: 16px; min-height: 44px; }
/* Mini CRM: contactos y si compraron. */
.contacto { display: grid; gap: var(--e-1); }
.contacto__cabeza { display: flex; justify-content: space-between; align-items: center; gap: var(--e-2); flex-wrap: wrap; }
.contacto--cliente { border-color: color-mix(in srgb, #0c8a4b 55%, var(--linea)); background: color-mix(in srgb, #0c8a4b 6%, var(--superficie)); }
.contacto--no { opacity: .75; }
/* Ritmo de gasto del mes. */
.ritmo { margin: var(--e-3) 0; }
.ritmo__barra { height: 10px; border-radius: 999px; background: var(--linea); overflow: hidden; }
.ritmo__barra span { display: block; height: 100%; background: var(--azul); }
/* Vista previa del anuncio en el buscador: siempre clara, como se ve la página de resultados. */
.serp { background: #fff; color: #202124; border: 1px solid #dadce0; border-radius: 12px; padding: 14px 16px; display: grid; gap: 8px; font-family: Arial, "Helvetica Neue", sans-serif; text-align: left; }
.serp p { margin: 0; color: inherit; }
.serp__cuerpo { display: flex; gap: 12px; align-items: flex-start; }
.serp__texto { flex: 1; min-width: 0; display: grid; gap: 4px; }
.serp__patrocinado { font-size: 12px; font-weight: 700; color: #202124; }
.serp__sitio { display: flex; gap: 8px; align-items: center; font-size: 13px; line-height: 1.3; }
.serp__sitio strong { font-weight: 400; color: #202124; }
.serp__icono { width: 26px; height: 26px; border-radius: 50%; background: #f1f3f4; border: 1px solid #dadce0; display: grid; place-items: center; font-size: 12px; font-weight: 700; flex: none; color: #4d5156; }
.serp__url { color: #4d5156; font-size: 12px; word-break: break-all; }
.serp__titulo { color: #1a0dab; font-size: 18px; line-height: 1.3; }
.serp__desc { color: #4d5156; font-size: 14px; line-height: 1.55; }
.serp__frases { color: #4d5156; font-size: 13px; }
.serp__imagen { flex: none; border-radius: 8px; object-fit: cover; }
.serp__imagen--cuadrada { width: 92px; height: 92px; }
.serp__imagen--horizontal { width: 132px; height: 69px; }
.serp__vinculos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 6px 16px; }
.serp__vinculos li { display: grid; font-size: 14px; }
.serp__vinculos span { color: #1a0dab; }
.serp__vinculos small { color: #4d5156; font-size: 12px; }
.serp__llamar { font-size: 14px; color: #1a0dab; }
@media (max-width: 480px) { .serp__imagen--horizontal { width: 96px; height: 50px; } .serp__titulo { font-size: 16px; } }
.vista-campana { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e-3); }
.vista-campana__acciones { display: flex; flex-wrap: wrap; gap: var(--e-2); align-items: center; }
.gen__imagen-previa { max-width: 100%; border-radius: 8px; }
.gen__campana .serp__imagen--cuadrada { width: 64px; height: 64px; } .gen__campana .serp__imagen--horizontal { width: 88px; height: 46px; }
/* Panel de la campaña: métricas, anuncios y su interruptor de un toque. */
.vista-campana__cabeza { display: grid; gap: var(--e-1); }
.vista-campana__cabeza label { display: grid; gap: 2px; }
.vista-campana__cabeza select { font-size: 16px; width: 100%; min-width: 0; text-overflow: ellipsis; }
.vista-campana__sub { font-size: 1rem; margin: var(--e-3) 0 0; }
.metricas-campana { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: var(--e-2); margin: 0; }
.metricas-campana div { background: var(--superficie); border: 1px solid var(--linea); border-radius: 10px; padding: var(--e-2) var(--e-3); }
.metricas-campana dt { font-size: .8rem; color: var(--tinta-2); }
.metricas-campana dd { margin: 0; font-size: 1.25rem; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--tinta); }
.panel-anuncios { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-2); }
.panel-anuncio { display: flex; gap: var(--e-3); align-items: center; background: var(--superficie); border: 1px solid var(--linea); border-radius: 10px; padding: var(--e-3); transition: opacity 160ms var(--ease-out); }
.panel-anuncio--pausado { opacity: .6; }
.panel-anuncio__texto { flex: 1; min-width: 0; display: grid; gap: 2px; }
.panel-anuncio__titulo { color: var(--azul); font-weight: 600; margin: 0; }
.panel-anuncio__datos { font-size: .85rem; color: var(--tinta-2); margin: 0; font-variant-numeric: tabular-nums; }
.interruptor { flex: none; width: 52px; height: 32px; border-radius: 9999px; border: 0; padding: 3px; background: var(--tinta-3); cursor: pointer; touch-action: manipulation; transition: background 160ms var(--ease-out); }
.interruptor span { display: block; width: 26px; height: 26px; border-radius: 50%; background: #fff; transition: transform 160ms var(--ease-out); }
.interruptor[aria-checked="true"] { background: var(--agave); }
.interruptor[aria-checked="true"] span { transform: translateX(20px); }
.interruptor:disabled { opacity: .5; cursor: not-allowed; }
.interruptor:active:not(:disabled) span { width: 30px; }
@media (prefers-reduced-motion: reduce) { .interruptor, .interruptor span, .panel-anuncio { transition: none; } }
/* Revisión antes de lanzar (5 puntos). */
.revision { border: 1px solid var(--linea); border-radius: 10px; padding: var(--e-3); background: var(--superficie); color: var(--tinta); display: grid; gap: var(--e-2); }
.revision ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-2); }
.revision__titulo { margin: 0; }
.revision__punto { display: flex; gap: var(--e-2); align-items: flex-start; font-size: .9rem; line-height: 1.45; }
.revision__punto em { display: block; font-style: normal; color: var(--tinta-2); }
.revision__icono { flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: .75rem; font-weight: 700; color: #fff; background: var(--agave); }
.revision__punto--aviso .revision__icono { background: #b7791f; }
.revision__punto--falla .revision__icono { background: var(--chile); }
.gen__tarjeta .revision { background: transparent; color: inherit; border-color: var(--g-linea, var(--linea)); }
.gen__tarjeta .revision__punto em { color: inherit; opacity: .75; }
/* Escudo anti-baneo: aviso debajo del texto que rompe políticas, con la sugerencia lista para usar. */
.escudo { margin: 4px 0 0; padding: var(--e-2) var(--e-3); border-radius: 8px; background: color-mix(in srgb, var(--chile) 10%, transparent); color: var(--tinta); font-size: .875rem; line-height: 1.45; }
.escudo .boton { margin-top: var(--e-1); min-height: 36px; padding: 4px 12px; }
.campo-ads--riesgo { border-color: var(--chile) !important; outline-color: var(--chile); }
/* Medidores: estado y detalle bajo cada reloj, y su leyenda. */
.calif--gris .calif__aro { --c: var(--tinta-3); }
.calif__estado { font-size: .78rem; font-weight: 600; color: var(--tinta-2); }
.calif--bien .calif__estado { color: #0c8a4b; }
.calif--mejorar .calif__estado { color: #a35a00; }
.calif--mal .calif__estado { color: #c62828; }
.calif__detalle { font-size: .75rem; color: var(--tinta-3); max-width: 18ch; line-height: 1.35; }
.leyenda-medidores { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--e-2) var(--e-4); font-size: .8rem; color: var(--tinta-2); margin: 0 0 var(--e-4); }
.leyenda-medidores span::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; vertical-align: -1px; }
.leyenda-medidores__mal::before { background: #c62828; border-radius: 0 !important; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.leyenda-medidores__mejorar::before { background: #c46b00; border-radius: 2px !important; }
.leyenda-medidores__bien::before { background: #0c8a4b; }
@media (prefers-color-scheme: dark) { .calif--bien .calif__estado { color: #4cc38a; } .calif--mejorar .calif__estado { color: #f0a54a; } .calif--mal .calif__estado { color: #ff7a72; } }
/* Gráfica tipo Search Console. */
.rendimiento-seo { display: grid; gap: var(--e-3); }
.rendimiento-seo__tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 0; border-radius: 10px; overflow: hidden; }
.rendimiento-seo__tile { padding: var(--e-3) var(--e-4); color: #fff; }
.rendimiento-seo__tile p { margin: 0; color: inherit; }
.rendimiento-seo__tile strong { font-size: 1.75rem; font-variant-numeric: tabular-nums; }
.rendimiento-seo__tile--clics { background: #4285f4; }
.rendimiento-seo__tile--impresiones { background: #5e35b1; }
.rendimiento-seo__tile--ctr, .rendimiento-seo__tile--posicion { background: var(--superficie); color: var(--tinta); border: 1px solid var(--linea); }
.grafica-seo { width: 100%; height: auto; background: var(--superficie); border: 1px solid var(--linea); border-radius: 10px; }
.grafica-seo__guia { stroke: var(--linea); stroke-width: 1; }
.grafica-seo__eje { fill: var(--tinta-3); font-size: 11px; }
.grafica-seo__clics { fill: none; stroke: #4285f4; stroke-width: 2.25; stroke-linejoin: round; }
.grafica-seo__impresiones { fill: none; stroke: #5e35b1; stroke-width: 2.25; stroke-linejoin: round; }
.calif--mini { gap: 2px; }
.calif--mini .calif__aro { width: 48px; height: 48px; }
.calif--mini .calif__aro b { font-size: 1rem; }
.calif--mini .calif__estado { font-size: .7rem; max-width: 9ch; line-height: 1.2; }
.potenciador-cabeza { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e-3); }
@media (min-width: 760px) { .potenciador-cabeza { grid-template-columns: 180px minmax(0, 1fr); align-items: start; } .potenciador-cabeza > .calif { margin-top: var(--e-4); } }
.calif__nombre { overflow-wrap: anywhere; max-width: 20ch; }
.grafica-seo__area { fill: #5e35b1; opacity: .08; }
@media (max-width: 600px) {
.panel-anuncio:has(.calif--mini) { flex-wrap: wrap; }
.panel-anuncio:has(.calif--mini) .panel-anuncio__texto { order: 3; flex-basis: 100%; }
.panel-anuncio .calif--mini { flex-direction: row; display: flex; align-items: center; gap: var(--e-2); margin-right: auto; }
}
#pixel-publicos select { font-size: 16px; min-height: 44px; max-width: 100%; }
.gen__imagenes { display: flex; gap: var(--e-2); align-items: flex-start; }
.gen__imagenes .gen__imagen-previa { flex: 1; min-width: 0; }
.gen__logo-previa { max-width: 96px; }
.gen__foto-previa { max-height: 160px; object-fit: cover; }
/* Vista de Máximo rendimiento en YouTube, Gmail y Display. */
.display-pmax { background: #fff; color: #202124; border: 1px solid #dadce0; border-radius: 12px; overflow: hidden; max-width: 420px; font-family: Arial, "Helvetica Neue", sans-serif; }
.display-pmax p { margin: 0; color: inherit; }
.display-pmax__imagen { display: block; width: 100%; aspect-ratio: 1.91 / 1; object-fit: cover; }
.display-pmax__cuerpo { padding: 12px 14px; display: grid; gap: 6px; }
.display-pmax__marca { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; }
.display-pmax__marca small { font-weight: 400; color: #5f6368; }
.display-pmax__logo { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; }
.display-pmax__titulo { font-size: 16px; font-weight: 700; line-height: 1.3; }
.display-pmax__desc { font-size: 14px; color: #4d5156; line-height: 1.45; }
.display-pmax__boton { justify-self: start; background: #1a73e8; color: #fff; border-radius: 999px; padding: 6px 16px; font-size: 14px; font-weight: 600; }
/* Agentes en vivo: semáforo con forma además de color (triángulo = urgente, cuadrado = por revisar, círculo = bien) */
.vivo { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--e-3); margin-bottom: var(--e-3); }
.vivo__agente { background: var(--superficie); border: 1px solid var(--linea); padding: var(--e-3) var(--e-4); display: grid; gap: var(--e-1); align-content: start; }
.vivo__cabeza { display: flex; align-items: center; gap: var(--e-2); }
.vivo__estado { font-size: var(--t-s); color: var(--tinta-2); }
.vivo__punto { flex: none; width: 12px; height: 12px; border-radius: 50%; background: #9aa0a6; }
.vivo__punto--bien { background: #0c8a4b; }
.vivo__punto--mejorar { background: #c46b00; border-radius: 2px; }
.vivo__punto--mal { background: #c62828; border-radius: 0; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
/* Panel de paz mental: tarjetas en palabras simples. El estado se lee por texto y por forma, no solo por color. */
.paz { display: grid; grid-template-columns: 1fr; gap: var(--e-3); margin: 0 0 var(--e-5); }
@media (min-width: 700px) { .paz { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.paz__tarjeta { display: flex; gap: var(--e-3); align-items: flex-start; padding: var(--e-4); background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio-s); color: var(--tinta); text-decoration: none; }
.paz__tarjeta:focus-visible { outline: 3px solid var(--terracota); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .paz__tarjeta:hover { border-color: var(--tinta-2); } }
.paz__tarjeta--bien { border-color: color-mix(in srgb, #0c8a4b 35%, var(--linea)); }
.paz__tarjeta--atencion { border-color: color-mix(in srgb, #c46b00 45%, var(--linea)); background: color-mix(in srgb, #c46b00 5%, var(--superficie)); }
.paz__tarjeta--urgente { border-color: color-mix(in srgb, #c62828 45%, var(--linea)); background: color-mix(in srgb, #c62828 5%, var(--superficie)); }
.paz__icono { font-size: 1.6rem; line-height: 1; }
.paz__texto { display: grid; gap: var(--e-1); min-width: 0; }
.paz__texto strong { font-size: var(--t-m); line-height: 1.25; }
.paz__estado { font-size: var(--t-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--tinta-2); display: flex; align-items: center; gap: 6px; }
.paz__marca { width: 10px; height: 10px; border-radius: 50%; background: #9aa0a6; }
.paz__tarjeta--bien .paz__marca { background: #0c8a4b; }
.paz__tarjeta--atencion .paz__marca { background: #c46b00; border-radius: 2px; }
.paz__tarjeta--urgente .paz__marca { background: #c62828; border-radius: 0; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.paz__detalle { font-size: var(--t-s); color: var(--tinta-2); }
.mejoras { margin: 0 0 var(--e-5); display: grid; gap: var(--e-3); }
.mejoras__item { background: var(--superficie); border: 1px solid var(--linea); padding: var(--e-3) var(--e-4); display: grid; gap: var(--e-1); }
.enlace { background: none; border: 0; padding: 0; font: inherit; color: var(--marca); text-decoration: underline; cursor: pointer; min-height: 0; }
/* Registro rápido de una pregunta */
.rapido__pregunta textarea { font-size: 1.15rem; line-height: 1.4; min-height: 6.5rem; width: 100%; }
.rapido__pasos { list-style: none; padding: 0; margin: 0 0 var(--e-4); display: grid; gap: var(--e-3); }
.rapido__paso { background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio-s); padding: var(--e-4); display: grid; gap: var(--e-2); justify-items: start; }
.rapido__paso--hecho { border-color: color-mix(in srgb, #0c8a4b 45%, var(--linea)); background: color-mix(in srgb, #0c8a4b 5%, var(--superficie)); }
.rapido__paso span { color: var(--tinta-2); }
/* Piloto automático */
.piloto { background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio-s); padding: var(--e-4); display: grid; gap: var(--e-3); margin-bottom: var(--e-4); justify-items: start; }
.piloto--activo { border-color: color-mix(in srgb, #0c8a4b 45%, var(--linea)); background: color-mix(in srgb, #0c8a4b 5%, var(--superficie)); }
.piloto__cabeza h2 { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2); font-size: var(--t-l); }
.piloto__listas { display: grid; gap: var(--e-3); width: 100%; }
@media (min-width: 700px) { .piloto__listas { grid-template-columns: 1fr 1fr; } }
.piloto__listas h3 { font-size: var(--t-s); text-transform: uppercase; letter-spacing: .04em; color: var(--tinta-2); margin-bottom: var(--e-1); }
.piloto__listas ul { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--e-1); font-size: var(--t-s); }
/* Motores SEO: cada reloj se toca y abre su diagnóstico con acciones. */
.calif--motor { background: none; border: 1px solid transparent; border-radius: var(--radio); padding: var(--e-3) var(--e-2); cursor: pointer; font: inherit; color: inherit; transition: border-color .15s, background-color .15s; touch-action: manipulation; }
.calif--motor[aria-expanded="true"] { border-color: var(--linea); background: var(--superficie); box-shadow: var(--sombra); }
.calif--motor:active { transform: scale(.98); }
@media (hover: hover) and (pointer: fine) { .calif--motor:hover { border-color: var(--linea); } }
.calif__abrir { font-size: .72rem; font-weight: 600; color: var(--terracota); text-decoration: underline; text-underline-offset: 3px; }
.motor { display: grid; gap: var(--e-4); background: var(--superficie); border-radius: var(--radio); box-shadow: var(--sombra); padding: var(--e-5); margin-top: var(--e-4); }
.motor h3 { margin: 0; }
.motor__diagnostico { margin: 0; color: var(--tinta-2); }
.motor__lista { display: grid; gap: var(--e-3); margin: 0; padding: 0; list-style: none; }
.motor__accion { border: 1px solid var(--linea); border-radius: var(--radio-s); padding: var(--e-4); display: grid; gap: var(--e-2); }
.motor__accion p { margin: 0; }
.motor__accion--grave { border-color: color-mix(in srgb, #c62828 45%, var(--linea)); background: color-mix(in srgb, #c62828 5%, var(--superficie)); }
.motor__accion--medio { border-color: color-mix(in srgb, #c46b00 45%, var(--linea)); background: color-mix(in srgb, #c46b00 5%, var(--superficie)); }
.motor__accion--leve { border-color: var(--linea); }
.motor__quien { font-size: .75rem; font-weight: 600; color: var(--tinta-3); text-transform: uppercase; letter-spacing: .04em; }
.motor__sugerencia { background: var(--cantera); border-radius: var(--radio-s); padding: var(--e-3); font-size: var(--t-s); overflow-wrap: anywhere; }
.motor__sugerencia strong { color: #1a0dab; }
@media (prefers-color-scheme: dark) { .motor__sugerencia strong { color: #8ab4f8; } }
.motor__texto { width: 100%; min-height: 220px; font: 13px/1.5 ui-monospace, monospace; padding: var(--e-3); border-radius: var(--radio-s); border: 1px solid var(--linea); background: var(--fondo, transparent); color: inherit; }
.motor__unclic { display: grid; gap: var(--e-2); padding: var(--e-4); border-radius: var(--radio-s); background: var(--cantera); }
.motor__unclic p { margin: 0; }
/* Tarjeta del conector: usar Genesis desde Claude o ChatGPT. */
.conector-ia { display: grid; gap: var(--e-4); margin: var(--e-5) 0; padding: var(--e-5); border-radius: var(--radio); background: var(--superficie); box-shadow: var(--sombra); border: 2px solid var(--terracota); }
.conector-ia--listo { border-width: 1px; border-color: var(--linea); }
.conector-ia h2 { margin: 0; font-size: 1.25rem; }
.conector-ia__cabeza p { margin: var(--e-2) 0 0; color: var(--tinta-2); }
.conector-ia__enlace { display: flex; flex-wrap: wrap; gap: var(--e-2); align-items: center; }
.conector-ia__enlace code { flex: 1 1 220px; min-width: 0; overflow-wrap: anywhere; user-select: all; -webkit-user-select: all; font-size: var(--t-s); background: var(--cantera); padding: var(--e-2) var(--e-3); border-radius: var(--radio-s); }
.conector-ia__botones { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--e-3); }
.conector-ia__pasos { margin: 0; }
.conector-ia__ordenes { display: grid; gap: var(--e-2); }
.conector-ia__ordenes p { margin: 0; }
.conector-ia__chips { display: flex; flex-wrap: wrap; gap: var(--e-2); }
.conector-ia__chips .chip { text-align: left; white-space: normal; }
.conector-ia__abrir-en [aria-pressed="true"] { font-weight: 700; }
/* Calidad de tu página: los caminos para arreglar (Claude, programador) */
.motor__caminos { display: flex; flex-wrap: wrap; gap: var(--e-2); align-items: center; }
.motor__claude { border: 1px solid color-mix(in srgb, #d97757 45%, var(--linea)); border-radius: var(--radio-s); padding: var(--e-4); display: grid; gap: var(--e-2); background: var(--cantera); }
.motor__claude p { margin: 0; }
/* ── Mi página: panel para editar el contenido de la página gratis (views/mi-pagina.js) ── */
.panel-pagina { display: grid; gap: var(--e-5); align-items: start; }
@media (min-width: 1180px) { .panel-pagina { grid-template-columns: minmax(0, 1fr) minmax(360px, 440px); } .panel-pagina__vista { position: sticky; top: var(--e-4); } }
.panel-pagina__editor { display: grid; gap: var(--e-4); min-width: 0; }
.panel-tabs { display: flex; gap: var(--e-2); overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.panel-tabs::-webkit-scrollbar { display: none; }
.panel-tabs button { flex: none; min-height: 44px; padding: 0 var(--e-4); border: 1px solid var(--linea); border-radius: 999px; background: var(--superficie); color: var(--tinta-2); font: inherit; font-weight: 600; cursor: pointer; touch-action: manipulation; }
.panel-tabs button[aria-selected="true"] { background: var(--terracota-suave); border-color: var(--marca); color: var(--tinta); }
.panel-tabs button:focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; }
.panel-contenido { padding: 0; overflow: visible; }
.panel-contenido .formulario, .panel-contenido .panel-lista { margin: 0; }
.panel-lista { padding: var(--e-5); display: grid; gap: var(--e-4); }
.panel-contenido textarea { resize: vertical; min-height: 48px; }
.panel-contenido select { min-height: 48px; font: inherit; padding: 0 var(--e-3); border: 1px solid var(--linea); border-radius: var(--radio-s); background: var(--superficie); color: var(--tinta); max-width: 100%; }
.panel-contenido .formulario__acciones { display: flex; flex-wrap: wrap; gap: var(--e-3); }
.panel-msg { min-height: 1.4em; margin: 0; font-size: var(--t-s); color: var(--tinta-2); }
.panel-msg[data-tipo="ok"] { color: #1d6b3f; font-weight: 600; }
.panel-msg[data-tipo="error"] { color: #a3260f; font-weight: 600; }
.panel-subtitulo { font-size: var(--t-m); margin: var(--e-3) 0 0; }
.panel-casilla { display: flex !important; grid-template-columns: none; align-items: center; gap: var(--e-3); min-height: 44px; font-size: var(--t-s) !important; font-weight: 500 !important; color: var(--tinta) !important; }
.panel-casilla input { width: 22px !important; min-height: 22px !important; height: 22px; flex: none; }
.panel-derechos { display: flex !important; align-items: flex-start; gap: var(--e-3); font-size: var(--t-s); color: var(--tinta-2); }
.panel-derechos input { width: 22px; height: 22px; flex: none; margin-top: 2px; }
.panel-grupo { border: 1px solid var(--linea); border-radius: var(--radio-s); padding: var(--e-4); margin: 0; display: grid; gap: var(--e-3); min-width: 0; }
.panel-grupo legend { font-weight: 600; font-size: var(--t-s); padding: 0 var(--e-2); }
.panel-fila-lista { display: grid; gap: var(--e-3); grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.panel-secciones { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-1); }
.panel-fotos { display: flex; flex-wrap: wrap; gap: var(--e-4); }
.panel-foto { margin: 0; display: grid; gap: var(--e-2); justify-items: start; width: 120px; }
.panel-foto img { width: 120px; height: 120px; object-fit: cover; border-radius: var(--radio-s); background: var(--cantera); }
.panel-foto figcaption { font-size: var(--t-xs); color: var(--tinta-2); }
.panel-subir { display: grid; gap: var(--e-2); font-size: var(--t-s); font-weight: 600; color: var(--tinta-2); }
.panel-subir input { font: inherit; min-height: 44px; max-width: 100%; }
.logo-bajar { align-self: end; min-height: 44px; display: inline-flex; align-items: center; }
.logo-crear { display: flex; flex-wrap: wrap; gap: var(--e-2); align-items: center; }
.logo-opciones, .director-opciones { flex-basis: 100%; display: grid; gap: var(--e-3); }
.logo-letras { display: flex; flex-wrap: wrap; gap: var(--e-2); align-items: end; }
.logo-letras label { display: grid; gap: var(--e-1); font-size: var(--t-s); font-weight: 600; color: var(--tinta-2); }
.logo-letras input { font: inherit; min-height: 44px; width: 7ch; text-transform: uppercase; text-align: center; }
.logo-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-3); grid-template-columns: repeat(auto-fill, minmax(min(130px, 100%), 1fr)); }
.logo-opcion { margin: 0; display: grid; gap: var(--e-2); align-content: start; height: 100%; padding: var(--e-3); border: 1px solid var(--linea); border-radius: var(--radio-s); background: var(--superficie); }
.logo-opcion__dibujo { aspect-ratio: 1; display: grid; place-items: center; background: color-mix(in srgb, var(--tinta) 6%, var(--superficie)); border-radius: var(--radio-s); padding: var(--e-2); }
.logo-opcion__dibujo svg { width: 100%; height: auto; max-width: 120px; }
.logo-opcion figcaption { display: grid; gap: 2px; font-size: var(--t-s); }
.logo-opcion figcaption small { color: var(--tinta-2); font-size: var(--t-xs); }
.logo-opcion .boton { align-self: end; min-height: 44px; }
.producto-fila { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: var(--e-4); padding: var(--e-4); border: 1px solid var(--linea); border-radius: var(--radio-s); }
.producto-fila__foto { width: 72px; height: 72px; border-radius: var(--radio-s); object-fit: cover; background: var(--cantera); }
.producto-fila__campos { display: grid; gap: var(--e-3); grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); min-width: 0; }
.producto-fila__ancho { grid-column: 1 / -1; }
.producto-fila label { display: grid; gap: var(--e-2); font-size: var(--t-xs); font-weight: 600; color: var(--tinta-2); }
.producto-fila input:not([type=file]) { min-height: 48px; padding: 0 var(--e-3); font: inherit; border: 1px solid var(--linea); border-radius: var(--radio-s); width: 100%; min-width: 0; }
.producto-fila .formulario__acciones { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: var(--e-3); }
.panel-pagina__vista { display: grid; gap: var(--e-3); min-width: 0; }
.vista-barra { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e-3); }
.vista-barra__titulo { font-weight: 700; }
.vista-barra__botones { display: flex; flex-wrap: wrap; gap: var(--e-2); }
.vista-barra .boton { min-height: 44px; padding: 0 var(--e-4); }
.vista-barra .boton[aria-pressed="true"] { background: var(--terracota-suave); }
.vista-marco { border: 1px solid var(--linea); border-radius: var(--radio); overflow: hidden; background: #fff; box-shadow: var(--sombra); margin-inline: auto; width: 100%; height: min(72vh, 760px); }
.vista-marco[data-ancho="movil"] { width: min(100%, 390px); }
.vista-marco iframe { width: 100%; height: 100%; border: 0; display: block; background: #fff; }
.vista-seccion { display: inline-flex; align-items: center; gap: var(--e-2); font-size: var(--t-s); font-weight: 600; color: var(--tinta-2); }
.vista-seccion select { min-height: 44px; font: inherit; padding: 0 var(--e-3); border: 1px solid var(--linea); border-radius: var(--radio-s); background: var(--superficie); color: var(--tinta); }
.panel-mas { display: grid; gap: var(--e-3); }
.panel-mas p { margin: 0; }
.panel-mas__botones { display: flex; flex-wrap: wrap; gap: var(--e-3); }
.panel-mas .boton { min-height: 44px; display: inline-flex; align-items: center; }
.panel-contenido input[type=file] { width: 100%; max-width: 100%; min-width: 0; }
.panel-lista > *, .producto-fila__campos > *, .panel-subir { min-width: 0; }
.panel-lista { min-width: 0; }
/* Palabras negativas que ya tiene una campaña: ver, quitar y volver a poner con un clic */
.negativas { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 8px; }
.negativa { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding: 8px 0; border-bottom: 1px solid var(--cantera); }
.negativa__texto { font-weight: 600; }
.negativa__razon { flex: 1 1 260px; }
.negativa .boton { min-height: 44px; margin-left: auto; }
.negativa--recomendada { background: var(--jacaranda-suave); border-radius: 8px; padding: 8px 12px; border-bottom: 0; }
#nueva-neg { min-height: 44px; flex: 1 1 220px; }
/* Marcador de calidad de página (js/calidad.js) */
.calidad { display: grid; grid-template-columns: auto 1fr; gap: var(--e-5); padding: var(--e-5); margin-block: var(--e-5); border: 1px solid var(--linea); }
.calidad[data-nivel="bien"] { border-color: color-mix(in srgb, var(--agave) 50%, var(--linea)); }
.calidad[data-nivel="regular"] { border-color: color-mix(in srgb, var(--terracota) 50%, var(--linea)); }
.calidad[data-nivel="mal"] { border-left-color: var(--chile); }
.calidad__puntaje { display: flex; align-items: baseline; gap: var(--e-1); }
.calidad__numero { font-size: var(--t-xxl); font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.calidad__de { color: var(--tinta-3); font-size: var(--t-s); }
.calidad__cuerpo h2 { margin: 0 0 var(--e-2); font-size: var(--t-l); }
.calidad__elemento { margin-top: var(--e-4); }
.calidad__elemento h3 { margin: 0 0 var(--e-2); font-size: var(--t-m); }
.calidad__pts { color: var(--tinta-2); font-weight: 500; margin-left: var(--e-2); }
.calidad__faltas, .calidad__acciones { margin: 0 0 var(--e-3); padding-left: var(--e-5); color: var(--tinta-2); font-size: var(--t-s); }
.calidad__acciones { list-style: none; padding: 0; }
.calidad__accion { padding: var(--e-3) 0; border-top: 1px solid var(--linea); }
.calidad__quien { display: inline-block; margin-left: var(--e-2); padding: 0 var(--e-2); background: var(--cantera); color: var(--tinta-2); font-size: var(--t-xs); }
.calidad__texto { width: 100%; box-sizing: border-box; font: inherit; font-size: var(--t-s); margin: var(--e-2) 0; }
.calidad__dudas { display: grid; gap: var(--e-3); margin-top: var(--e-2); }
.calidad__msg[data-tipo="error"] { color: var(--chile); }
.calidad__msg:empty { display: none; }
.calidad .boton { min-height: 44px; }
@media (max-width: 600px) { .calidad { grid-template-columns: 1fr; padding: var(--e-4); } }
/* Mi historia (js/views/historias.js) */
.historia-form { display: grid; gap: var(--e-4); padding: var(--e-5); margin-block: var(--e-5); }
.historia-form textarea, .historia-form input[type="text"], .historia-form input:not([type]) { width: 100%; box-sizing: border-box; font: inherit; }
.historia-fotos { display: flex; flex-wrap: wrap; gap: var(--e-3); margin-top: var(--e-2); }
.historia-fotos img { object-fit: cover; }
.casilla { display: flex; gap: var(--e-3); align-items: flex-start; min-height: 44px; padding-block: var(--e-2); }
.casilla input { width: 24px; height: 24px; flex: none; }
.historia-msg[data-tipo="error"] { color: var(--chile); }
.historia-msg:empty { display: none; }
.historias-lista { padding: var(--e-5); margin-block: var(--e-5); }
.historia-fila + .historia-fila { margin-top: var(--e-4); padding-top: var(--e-4); border-top: 1px solid var(--linea); }
.historia-fila h2 { margin: 0 0 var(--e-2); font-size: var(--t-m); }
/* Páginas del menú (subpáginas de la página gratis) */
.panel-subpaginas { list-style: none; margin: 0 0 var(--e-3); padding: 0; display: grid; gap: var(--e-2); }
.panel-subpaginas > li { display: grid; gap: var(--e-2); padding: var(--e-3) 0; border-top: 1px solid var(--linea); }
.panel-subpaginas p { margin: 4px 0 0; }
.panel-subpagina { margin-top: var(--e-3); }
.panel-subpagina [hidden] { display: none !important; }