/* Paleta ARKANA (marca/arkana.md) + Nunito, la letra más cercana al logo. */
:root {
  --morado: #7228A2;
  --morado-oscuro: #5A1F80;
  --azul: #4195F1;
  --lavanda: #906EEE;
  --azul-claro: #71C8F9;
  --rosa: #C07FA8;
  --tinta: #1F1548;
  --tinta-suave: #5A5275;
  --blanco: #FCFCFA;
  --fondo: #F4F1FA;
  --superficie: #FFFFFF;
  --borde: #E2DCEF;
  --morado-tenue: #EFE6F6;
  --error: #B42345;
  --ok: #1D7A53;
  --radio: 16px;
  --letra: 'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;
  color-scheme: light;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--fondo);
  color: var(--tinta);
  font: 400 16px/1.5 var(--letra);
  -webkit-font-smoothing: antialiased;
  min-height: 100dvh;
}
h1, h2, h3 { font-weight: 800; letter-spacing: -0.01em; line-height: 1.15; margin: 0; }
h1 { font-size: 28px; }
h2 { font-size: 18px; }
p { margin: 0; }
a { color: var(--morado); }
code { font-size: 0.9em; background: var(--morado-tenue); padding: 1px 5px; border-radius: 6px; }
[hidden] { display: none !important; }

.suave { color: var(--tinta-suave); font-size: 14px; }
.marca { font-weight: 800; font-size: 20px; color: var(--morado); letter-spacing: -0.02em; }

.cargando { position: fixed; inset: 0; display: grid; place-items: center; color: var(--tinta-suave); }

.vista.centro { min-height: 100dvh; display: grid; place-items: center; padding: 24px 16px; }
.tarjeta {
  background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio);
  padding: 20px; display: flex; flex-direction: column; gap: 10px; max-width: 420px;
}

/* Login */
.login { width: 100%; max-width: 380px; display: flex; flex-direction: column; gap: 12px; }
.formulario { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.formulario label { font-weight: 700; font-size: 14px; margin-top: 8px; }
.formulario input {
  font: inherit; color: inherit; min-height: 48px; padding: 0 14px;
  border: 1.5px solid var(--borde); border-radius: 12px; background: var(--superficie);
}
.formulario input:focus { outline: none; border-color: var(--morado); box-shadow: 0 0 0 3px var(--morado-tenue); }
.formulario .boton { margin-top: 14px; }
.error { color: var(--error); font-size: 14px; }
.legal { font-size: 12px; color: var(--tinta-suave); text-align: center; }

/* Botones */
.boton {
  font: 700 15px var(--letra); min-height: 48px; padding: 0 18px; border-radius: 999px;
  border: 1.5px solid var(--morado); background: var(--superficie); color: var(--morado); cursor: pointer;
}
.boton.primario { background: var(--morado); color: var(--blanco); }
.boton.primario:hover { background: var(--morado-oscuro); }
.boton.chico { min-height: 44px; font-size: 13px; padding: 0 14px; min-width: 104px; white-space: nowrap; flex: none; }
.boton:disabled { opacity: 0.55; cursor: not-allowed; }
.boton:focus-visible, .enlace:focus-visible, .barra-inferior a:focus-visible { outline: 3px solid var(--azul); outline-offset: 2px; }
.enlace {
  font: 700 14px var(--letra); background: none; border: 0; color: var(--morado);
  min-height: 44px; padding: 0 4px; cursor: pointer;
}

/* App */
.app { min-height: 100dvh; display: flex; flex-direction: column; max-width: 560px; margin: 0 auto; }
.barra-superior {
  display: flex; justify-content: space-between; align-items: center;
  padding: max(10px, env(safe-area-inset-top)) 16px 6px;
}
.pantalla {
  flex: 1 1 auto; padding: 8px 16px 110px; display: flex; flex-direction: column; gap: 16px;
}
.pantalla:focus { outline: none; }
.encabezado { display: flex; flex-direction: column; gap: 6px; }

.resumen {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: var(--tinta); color: var(--blanco); border-radius: var(--radio); padding: 14px 16px;
}
.resumen small { display: block; font-size: 12px; color: #CFC8E8; }
.resumen strong { font-size: 18px; font-weight: 800; }
.etiqueta { font-size: 12px; font-weight: 800; padding: 6px 10px; border-radius: 999px; background: var(--azul-claro); color: var(--tinta); white-space: nowrap; }

.redes { display: flex; flex-direction: column; gap: 10px; }
.red {
  background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio);
  padding: 12px; display: flex; flex-direction: column; gap: 10px;
}
.red-fila { display: flex; align-items: center; gap: 12px; }
.insignia {
  width: 44px; height: 44px; border-radius: 12px; flex: none; display: grid; place-items: center;
  font-weight: 800; font-size: 13px; background: var(--morado-tenue); color: var(--morado);
}
.red.pronto .insignia { background: #EEEBF3; color: var(--tinta-suave); }
.red-texto { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.red-texto strong { font-size: 15px; }
.red-texto span { font-size: 12px; color: var(--tinta-suave); }

.conectadas { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.conectada {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px;
  background: var(--fondo); border-radius: 12px;
}
.conectada img, .conectada .sin-foto { width: 36px; height: 36px; border-radius: 50%; flex: none; object-fit: cover; background: var(--borde); }
.conectada .datos { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.conectada .datos strong { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conectada .datos span { font-size: 12px; color: var(--tinta-suave); }
.conectada .alerta { color: var(--error); font-weight: 700; }
.conectada .enlace { font-size: 13px; color: var(--tinta-suave); }

.vacio { text-align: center; padding: 28px 16px; }
.vacio p { margin-top: 6px; }

/* Barra inferior */
.barra-inferior {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 10;
  display: flex; justify-content: space-around; align-items: center;
  height: calc(74px + env(safe-area-inset-bottom)); padding: 0 6px env(safe-area-inset-bottom);
  background: var(--superficie); border-top: 1px solid var(--borde);
}
.barra-inferior a {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  min-width: 56px; min-height: 48px; font-size: 11px; color: var(--tinta-suave); text-decoration: none;
}
.barra-inferior svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.barra-inferior a[aria-current="page"] { color: var(--morado); font-weight: 800; }
.barra-inferior a.crear {
  width: 56px; height: 56px; border-radius: 50%; background: var(--morado); color: var(--blanco);
  box-shadow: 0 6px 18px rgba(114, 40, 162, 0.35);
}
.barra-inferior a.crear svg { width: 26px; height: 26px; stroke-width: 2.6; }

/* Aviso flotante */
.aviso {
  position: fixed; left: 16px; right: 16px; bottom: calc(90px + env(safe-area-inset-bottom)); z-index: 20;
  max-width: 528px; margin: 0 auto; padding: 12px 16px; border-radius: 12px;
  background: var(--tinta); color: var(--blanco); font-size: 14px; font-weight: 600;
}
.aviso.mal { background: var(--error); }

/* Páginas legales */
.legal-pagina { max-width: 720px; margin: 0 auto; padding: 32px 16px 64px; display: flex; flex-direction: column; gap: 14px; }
.legal-pagina h2 { margin-top: 14px; }
.legal-pagina ul { margin: 0; padding-left: 20px; }

/* ---------- Comunes nuevos ---------- */
.oculto { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.pequeno { font-size: 12px; }
.boton-enlace { display: inline-grid; place-items: center; text-decoration: none; }
.acciones-vacio { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 12px; }
.fila-titulo { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.insignia.mini { width: 26px; height: 26px; border-radius: 8px; font-size: 10px; }
.insignia.instagram { background: #F6E3EE; color: #8A2A5E; }
.insignia.facebook { background: #E3EEFD; color: #1F5FB0; }
:root { --verde: #1D7A53; --verde-tenue: #E2F3EA; --rojo-tenue: #FBE6EA; --gris-tenue: #EEEBF3; }

/* ---------- Crear ---------- */
.crear { display: flex; flex-direction: column; gap: 14px; }
.bloque {
  background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio);
  padding: 14px; display: flex; flex-direction: column; gap: 10px;
}
.bloque h2 { font-size: 16px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  font: 700 14px var(--letra); color: var(--tinta); display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 0 14px 0 8px; border-radius: 999px; cursor: pointer;
  border: 1.5px solid var(--borde); background: var(--superficie);
}
.chip.marcada { border-color: var(--morado); background: var(--morado-tenue); color: var(--morado-oscuro); }
.chip.marcada::after { content: '\2713'; font-weight: 800; }
.chip:focus-visible, .dia:focus-visible, .flecha:focus-visible, .quitar:focus-visible { outline: 3px solid var(--azul); outline-offset: 2px; }

.crear textarea {
  font: inherit; color: inherit; width: 100%; resize: vertical; min-height: 140px;
  padding: 12px 14px; border: 1.5px solid var(--borde); border-radius: 12px; background: var(--superficie);
}
.crear textarea:focus, .fecha-hora input:focus { outline: none; border-color: var(--morado); box-shadow: 0 0 0 3px var(--morado-tenue); }
.contador { font-size: 12px; color: var(--tinta-suave); font-variant-numeric: tabular-nums; }
.contador.pasado { color: var(--error); font-weight: 800; }

.archivos { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.archivo { position: relative; aspect-ratio: 1; border-radius: 12px; overflow: hidden; background: var(--gris-tenue); }
.archivo img, .archivo video { width: 100%; height: 100%; object-fit: cover; display: block; }
.archivo.subiendo img, .archivo.subiendo video { opacity: 0.55; }
.archivo.error { outline: 2px solid var(--error); }
.archivo-error { position: absolute; inset: auto 0 0 0; margin: 0; padding: 4px 6px; font-size: 11px; line-height: 1.3; background: var(--error); color: #fff; }
.archivo .barra { position: absolute; left: 8px; right: 8px; bottom: 8px; height: 6px; border-radius: 3px; background: rgba(255,255,255,0.7); overflow: hidden; }
.archivo .barra::after { content: ''; display: block; height: 100%; width: var(--p, 0%); background: var(--morado); transition: width 0.2s; }
.archivo .duracion { position: absolute; left: 6px; top: 6px; font-size: 11px; font-weight: 800; color: #fff; background: rgba(31,21,72,0.7); padding: 1px 6px; border-radius: 6px; }
.quitar {
  position: absolute; top: 4px; right: 4px; width: 32px; height: 32px; border-radius: 50%; border: 0;
  background: rgba(31,21,72,0.75); color: #fff; font-size: 20px; line-height: 1; cursor: pointer;
}
.agregar-archivo { display: grid; place-items: center; border-style: dashed; }

.fecha-hora { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.fecha-hora label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-weight: 700; }
.fecha-hora input {
  font: inherit; color: inherit; min-height: 48px; padding: 0 10px; width: 100%;
  border: 1.5px solid var(--borde); border-radius: 12px; background: var(--superficie);
}
.fecha-hora input:disabled { opacity: 0.5; }
.casilla { display: flex; align-items: center; gap: 10px; min-height: 44px; font-weight: 600; font-size: 14px; cursor: pointer; }
.casilla input { width: 22px; height: 22px; accent-color: var(--morado); }

.vistas { display: flex; flex-direction: column; gap: 12px; }
.vistas .vista { border: 1px solid var(--borde); border-radius: 12px; overflow: hidden; background: #fff; max-width: 380px; width: 100%; margin: 0 auto; }
.vista-cabecera { display: flex; align-items: center; gap: 8px; padding: 10px; }
.vista-cabecera img, .vista-cabecera .sin-foto { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; background: var(--borde); flex: none; }
.vista-cabecera div { display: flex; flex-direction: column; line-height: 1.2; }
.vista-cabecera strong { font-size: 13px; }
.vista-cabecera span { font-size: 11px; color: var(--tinta-suave); }
.vista-medio { position: relative; background: #000; max-height: 480px; }
.vista-medio img, .vista-medio video { width: 100%; height: 100%; object-fit: cover; display: block; }
.vacio-medio { display: grid; place-items: center; aspect-ratio: 1; color: #fff; font-size: 13px; background: var(--tinta-suave); }
.contador-medio { position: absolute; top: 8px; right: 8px; font-size: 11px; font-weight: 800; color: #fff; background: rgba(0,0,0,0.6); padding: 2px 8px; border-radius: 999px; }
.vista-texto { padding: 10px; font-size: 13px; white-space: pre-wrap; overflow-wrap: anywhere; }
.vistas .vista .pequeno { padding: 0 10px 10px; }

.problemas { margin: 0; padding: 12px 14px 12px 32px; border-radius: 12px; background: var(--rojo-tenue); color: var(--error); font-size: 14px; font-weight: 600; }
.acciones {
  position: sticky; bottom: calc(80px + env(safe-area-inset-bottom)); z-index: 5;
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: var(--radio); background: var(--superficie); border: 1px solid var(--borde);
  box-shadow: 0 6px 18px rgba(31, 21, 72, 0.08);
}
.acciones .boton { flex: 1 1 auto; max-width: 220px; }

/* ---------- Calendario ---------- */
.mes { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); padding: 10px; }
.mes-cabecera { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.mes-cabecera h2 { font-size: 17px; }
.flecha { width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--morado-tenue); color: var(--morado); font-size: 24px; font-weight: 800; cursor: pointer; }
.semana, .cuadricula { display: grid; grid-template-columns: repeat(7, 1fr); }
.semana span { text-align: center; font-size: 11px; font-weight: 700; color: var(--tinta-suave); padding: 4px 0; }
.cuadricula { gap: 2px; }
.dia {
  min-height: 46px; border: 0; border-radius: 10px; background: none; cursor: pointer; padding: 4px 0;
  display: flex; flex-direction: column; align-items: center; gap: 3px; font: 600 14px var(--letra); color: var(--tinta);
}
.dia.otro-mes { color: #B4ACC8; }
.dia.hoy .numero { color: var(--morado); font-weight: 800; text-decoration: underline; text-underline-offset: 3px; }
.dia.elegido { background: var(--morado); color: #fff; }
.dia.elegido .numero { color: #fff; }
.puntos { display: flex; gap: 3px; height: 6px; }
.puntos i { width: 6px; height: 6px; border-radius: 50%; background: var(--morado); }
.puntos i.publicada { background: var(--verde); }
.puntos i.fallida { background: var(--error); }
.puntos i.publicando { background: var(--azul); }
.dia.elegido .puntos i { box-shadow: 0 0 0 1.5px #fff; }

.dia-detalle { display: flex; flex-direction: column; gap: 10px; }
.dia-detalle h2 { font-size: 17px; }
.lista-publicaciones { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.publicacion {
  background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio);
  padding: 12px; display: flex; flex-direction: column; gap: 10px;
}
.publicacion.cancelada { opacity: 0.6; }
.publicacion-cabecera { display: flex; align-items: center; justify-content: space-between; }
.hora { font-size: 16px; }
.estado { font-size: 12px; font-weight: 800; padding: 4px 10px; border-radius: 999px; background: var(--morado-tenue); color: var(--morado-oscuro); }
.estado.publicada { background: var(--verde-tenue); color: var(--verde); }
.estado.fallida { background: var(--rojo-tenue); color: var(--error); }
.estado.publicando { background: #E3EEFD; color: #1F5FB0; }
.estado.cancelada { background: var(--gris-tenue); color: var(--tinta-suave); }
.publicacion-cuerpo { display: flex; gap: 10px; align-items: flex-start; }
.miniatura { width: 56px; height: 56px; border-radius: 10px; object-fit: cover; flex: none; background: var(--gris-tenue); }
.miniatura.video { display: grid; place-items: center; color: var(--tinta-suave); }
.extracto { font-size: 14px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; white-space: pre-wrap; overflow-wrap: anywhere; }
.destinos { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.destino { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 10px; background: var(--fondo); }
.destino div { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.destino strong { font-size: 13px; }
.destino span { font-size: 12px; color: var(--tinta-suave); }
.destino span.error { color: var(--error); }
.destino.publicada span { color: var(--verde); font-weight: 700; }
.destino a { font-size: 13px; font-weight: 800; padding: 10px 6px; }
.cancelar { align-self: flex-start; color: var(--error); }
.publicacion-acciones { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.publicacion-acciones .cancelar { align-self: center; }

/* ---------- Asistente IA ---------- */
.asistente { display: flex; flex-direction: column; gap: 10px; }
.boton-ia {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px;
  border-radius: 999px; border: 0; cursor: pointer; font: 800 14px var(--letra);
  background: var(--tinta); color: var(--blanco);
}
.boton-ia svg { width: 18px; height: 18px; fill: var(--azul-claro); }
.boton-ia[aria-expanded="true"] { background: var(--morado); }
.boton-ia:focus-visible, .ia-accion:focus-visible { outline: 3px solid var(--azul); outline-offset: 2px; }
.asistente-panel { display: flex; flex-direction: column; gap: 12px; padding: 12px; border-radius: 14px; background: var(--fondo); }
.ia-acciones { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ia-accion {
  display: flex; flex-direction: column; align-items: flex-start; gap: 1px; min-height: 56px; padding: 10px 12px;
  border: 1.5px solid var(--borde); border-radius: 12px; background: var(--superficie); color: var(--tinta);
  font: 400 12px var(--letra); cursor: pointer; text-align: left;
}
.ia-accion strong { font-size: 15px; font-weight: 800; }
.ia-accion small { color: var(--tinta-suave); font-size: 12px; }
.ia-accion.principal { background: var(--morado); border-color: var(--morado); color: var(--blanco); }
.ia-accion.principal small { color: #E7D6F3; }
.ia-accion:disabled { opacity: 0.55; cursor: wait; }
.ia-grupo { display: flex; flex-direction: column; gap: 6px; }
.ia-etiqueta { font-size: 13px; font-weight: 800; }
.chip.chico { min-height: 40px; padding: 0 12px; font-size: 13px; }
.ia-casillas { display: flex; flex-direction: column; }
.ia-casillas .casilla { min-height: 40px; font-size: 13px; }
.asistente-salida:empty { display: none; }
.asistente-salida { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.ia-estado { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px; border-radius: 12px; border: 1.5px dashed var(--borde); font-size: 14px; color: var(--tinta-suave); }
.ia-estado.error { border-color: var(--error); color: var(--error); background: var(--rojo-tenue); }
.puntos-animados::after { content: ''; animation: puntos 1.2s steps(4) infinite; }
@keyframes puntos { 0% { content: ''; } 25% { content: '.'; } 50% { content: '..'; } 75% { content: '...'; } }
@media (prefers-reduced-motion: reduce) { .puntos-animados::after { animation: none; content: '...'; } }
.ia-nota { font-size: 13px; color: var(--tinta-suave); }
.ia-variante { width: 100%; background: var(--superficie); border: 1px solid var(--borde); border-radius: 12px; padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.ia-variante h3 { font-size: 14px; color: var(--morado); }
.ia-variante p { font-size: 14px; white-space: pre-wrap; overflow-wrap: anywhere; }
.ia-variante-pie { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; border-top: 1px dashed var(--borde); padding-top: 8px; }
.ia-variante-pie .contador { margin-right: auto; }
.ia-variante-pie .boton.chico { min-width: 0; }

/* ---------- Idioma ---------- */
.acciones-barra { display: flex; align-items: center; gap: 8px; }
.selector-idioma {
  font: 700 13px var(--letra); color: var(--morado); background: var(--superficie);
  border: 1.5px solid var(--borde); border-radius: 999px; min-height: 36px; padding: 0 10px; cursor: pointer;
}
.selector-idioma:focus-visible { outline: 3px solid var(--azul); outline-offset: 2px; }
.idiomas-legal { display: flex; gap: 4px; flex-wrap: wrap; }
.idiomas-legal [aria-pressed="true"] { text-decoration: underline; text-underline-offset: 4px; }
.legal-idioma { display: flex; flex-direction: column; gap: 14px; }
.legal-idioma[hidden] { display: none; }

/* ---------- Inicio ---------- */
.inicio { display: flex; flex-direction: column; gap: 14px; transition: opacity 0.2s; }
.inicio.cargando-datos { opacity: 0.5; pointer-events: none; }
.segmentado { display: inline-flex; background: var(--superficie); border: 1px solid var(--borde); border-radius: 999px; padding: 3px; flex: none; }
.segmentado button {
  font: 700 13px var(--letra); color: var(--tinta-suave); background: none; border: 0;
  min-height: 36px; padding: 0 10px; border-radius: 999px; cursor: pointer; white-space: nowrap;
}
.segmentado button[aria-pressed="true"] { background: var(--morado); color: var(--blanco); }
.segmentado button:focus-visible, .punto:focus-visible { outline: 3px solid var(--azul); outline-offset: 2px; }
.aviso-suave { padding: 12px 14px; border-radius: 12px; background: var(--morado-tenue); color: var(--morado-oscuro); font-size: 14px; font-weight: 600; }

.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tile { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); padding: 12px 14px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tile-etiqueta { font-size: 13px; font-weight: 700; color: var(--tinta-suave); }
.tile-valor { font-size: 28px; font-weight: 800; line-height: 1.15; }
.delta { font-size: 12px; font-weight: 700; color: var(--tinta-suave); }
.delta.sube { color: var(--verde); }
.delta.baja { color: var(--error); }

.grafico-marco { position: relative; }
.barras { width: 100%; height: auto; display: block; overflow: visible; }
.barras .barra { fill: var(--morado); }
.barras .zona { fill: transparent; }
.barras .punto:hover .barra, .barras .punto:focus .barra { fill: var(--lavanda); }
.barras .punto:focus { outline: none; }
.barras .punto:focus .zona { fill: var(--morado-tenue); }
.barras .grilla { stroke: var(--borde); stroke-width: 1; }
.barras .eje { stroke: #C9C1DD; stroke-width: 1; }
.barras .marca { font: 600 10px var(--letra); fill: var(--tinta-suave); font-variant-numeric: tabular-nums; }
.globo {
  position: absolute; top: -6px; transform: translate(-50%, -100%); pointer-events: none; z-index: 2;
  background: var(--tinta); color: var(--blanco); border-radius: 10px; padding: 6px 10px;
  display: flex; flex-direction: column; align-items: center; white-space: nowrap; font-size: 12px;
}
.globo strong { font-size: 15px; }
.tabla-datos summary { cursor: pointer; font-size: 13px; font-weight: 700; color: var(--morado); min-height: 32px; display: flex; align-items: center; }
.tabla-datos table { width: 100%; border-collapse: collapse; font-size: 13px; margin-top: 6px; }
.tabla-datos th, .tabla-datos td { text-align: left; padding: 4px 0; border-bottom: 1px solid var(--borde); }
.tabla-datos td:last-child, .tabla-datos th:last-child { text-align: right; font-variant-numeric: tabular-nums; }

.por-cuenta { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.por-cuenta li { display: grid; grid-template-columns: auto 1fr; column-gap: 8px; align-items: center; font-size: 13px; }
.por-cuenta li strong { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.por-cuenta li span:not(.insignia) { grid-column: 2; color: var(--tinta-suave); }
.atencion ul { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }
.atencion a { color: var(--error); font-weight: 700; }
.proximas { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.proximas a { display: flex; flex-direction: column; gap: 2px; padding: 10px; border-radius: 12px; background: var(--fondo); color: inherit; text-decoration: none; }
.proximas .cuando { font-size: 13px; font-weight: 800; color: var(--morado); }
.proximas .redes-mini { display: flex; gap: 4px; margin-top: 4px; }

/* ---------- Publicaciones (Inicio y Analítica) ---------- */
.volver { align-self: flex-start; padding: 0; min-height: 36px; }
.lista-posts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.post { display: grid; grid-template-columns: 64px 1fr; gap: 10px; padding: 10px; border-radius: 12px; background: var(--fondo); }
.post-mini { width: 64px; height: 64px; border-radius: 10px; object-fit: cover; background: var(--gris-tenue); }
.post-mini.vacia { display: block; }
.post-cuerpo { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.post-cabecera { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--tinta-suave); }
.post-metricas { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 2px 0 0; }
.post-metricas div { display: flex; flex-direction: column; }
.post-metricas dt { font-size: 11px; color: var(--tinta-suave); }
.post-metricas dd { margin: 0; font-size: 14px; font-weight: 800; font-variant-numeric: tabular-nums; }
.post-metricas .destacada dd { color: var(--morado); }
.enlace-post { font-size: 13px; font-weight: 700; align-self: flex-start; padding: 6px 0; }
.selector { font: 700 13px var(--letra); color: var(--tinta); background: var(--superficie); border: 1.5px solid var(--borde); border-radius: 999px; min-height: 36px; padding: 0 10px; }
.orden { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--tinta-suave); }

/* Barras horizontales (formatos y engagement comparado) */
.barras-h { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.barras-h li { display: grid; grid-template-columns: minmax(0, 7.5em) 1fr auto; align-items: center; gap: 10px; }
.barra-etiqueta { display: flex; flex-direction: column; font-size: 13px; font-weight: 700; min-width: 0; overflow-wrap: anywhere; }
.barra-etiqueta small { font-weight: 400; font-size: 11px; color: var(--tinta-suave); }
.barra-pista { height: 14px; border-radius: 4px; background: var(--gris-tenue); overflow: hidden; }
.barra-relleno { display: block; height: 100%; background: #B9A6D6; border-radius: 0 4px 4px 0; }
.barras-h li:first-child .barra-relleno, .barras-h li.propia .barra-relleno { background: var(--morado); }
.barra-valor { font-size: 13px; font-variant-numeric: tabular-nums; }
.momentos { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 8px; }
.momentos li span { display: block; font-size: 12px; color: var(--tinta-suave); }

/* ---------- Competencia ---------- */
.fila-entrada { display: flex; gap: 8px; }
.fila-entrada input {
  flex: 1 1 auto; min-width: 0; font: inherit; color: inherit; min-height: 48px; padding: 0 14px;
  border: 1.5px solid var(--borde); border-radius: 12px; background: var(--superficie);
}
.fila-entrada input:focus { outline: none; border-color: var(--morado); box-shadow: 0 0 0 3px var(--morado-tenue); }
.competidor { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); padding: 14px; display: flex; flex-direction: column; gap: 12px; }
.competidor.propia { border: 2px solid var(--morado); }
.competidor header { display: flex; align-items: center; gap: 10px; }
.competidor header img, .competidor header .sin-foto { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; background: var(--borde); flex: none; }
.competidor header div { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.competidor header strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.competidor header span { font-size: 12px; color: var(--tinta-suave); }
.competidor .datos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 0; }
.competidor .dato dt { font-size: 11px; font-weight: 700; color: var(--tinta-suave); }
.competidor .dato dd { margin: 0; font-size: 20px; font-weight: 800; }
.competidor .dato dd.pie { font-size: 11px; font-weight: 700; color: var(--verde); }
.competidor .top h3 { font-size: 13px; margin-bottom: 6px; }
.competidor .top ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.competidor .top a { display: flex; flex-direction: column; gap: 4px; text-decoration: none; color: inherit; }
.competidor .top img, .competidor .top .mini-vacia { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 8px; background: var(--gris-tenue); display: block; }
.competidor .top .likes { font-size: 11px; font-weight: 700; color: var(--tinta-suave); }

/* ---------- Bandeja ---------- */
.bandeja { display: flex; flex-direction: column; gap: 12px; }
.chips.filtros { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -2px; padding: 2px; }
.chips.filtros .chip { flex: none; padding: 0 14px; }
.chip.sin-marca::after { content: none; }
.contador-chip {
  display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px;
  background: var(--morado); color: #fff; font-size: 12px; font-weight: 800;
}
.aviso-cuenta { margin: 0; padding: 10px 12px; border-radius: 12px; background: #FFF4E0; color: #6B4A00; font-size: 14px; }
.hilos { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.hilo a {
  display: grid; grid-template-columns: 48px 1fr auto; gap: 12px; align-items: center; padding: 12px;
  background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); color: inherit; text-decoration: none;
}
.hilo a:focus-visible { outline: 3px solid var(--azul); outline-offset: 2px; }
.hilo.no-leido a { border-color: var(--lavanda); box-shadow: inset 4px 0 0 var(--morado); }
.hilo-cuerpo { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.hilo-fila { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.hilo-fila strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hilo-fila time { font-size: 12px; color: var(--tinta-suave); flex: none; }
.hilo.no-leido .hilo-fila strong, .hilo.no-leido .hilo-extracto { font-weight: 800; }
.hilo-extracto { margin: 0; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--tinta); }
.hilo-post { width: 44px; height: 44px; border-radius: 8px; object-fit: cover; background: var(--gris-tenue); }
.respondido { color: var(--verde); font-weight: 700; }
.avatar {
  position: relative; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  background: hsl(var(--tono) 55% 90%); color: hsl(var(--tono) 45% 28%); font-weight: 800; font-size: 18px;
}
.avatar .insignia.mini { position: absolute; right: -6px; bottom: -4px; width: 20px; height: 20px; border-radius: 6px; font-size: 8px; border: 2px solid var(--superficie); }
.hilo-cabecera { display: flex; align-items: center; gap: 12px; margin: 4px 0 12px; }
.hilo-cabecera h1 { font-size: 22px; margin: 0; overflow-wrap: anywhere; }
.hilo-cabecera p { margin: 0; }
.post-hilo { display: grid; grid-template-columns: 64px 1fr; gap: 12px; align-items: start; margin-bottom: 12px; }
.post-hilo img { width: 64px; height: 64px; border-radius: 10px; object-fit: cover; }
.post-hilo p { margin: 2px 0 4px; }
.post-hilo a { font-weight: 800; font-size: 14px; }
.burbujas { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.burbuja {
  max-width: 85%; align-self: flex-start; padding: 10px 12px; border-radius: 16px 16px 16px 4px;
  background: var(--superficie); border: 1px solid var(--borde);
}
.burbuja.propia { align-self: flex-end; background: var(--morado); border-color: var(--morado); color: #fff; border-radius: 16px 16px 4px 16px; }
.burbuja strong { display: block; font-size: 13px; }
.burbuja p { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.burbuja time { display: block; margin-top: 4px; font-size: 11px; opacity: 0.75; }
.responder {
  position: sticky; bottom: 92px; display: flex; flex-direction: column; gap: 8px; padding: 12px;
  background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); box-shadow: 0 6px 24px rgb(31 21 72 / 0.08);
}
.responder textarea {
  font: inherit; color: inherit; width: 100%; resize: vertical; min-height: 72px;
  padding: 10px 12px; border: 1.5px solid var(--borde); border-radius: 12px; background: var(--superficie);
}
.responder textarea:focus { outline: none; border-color: var(--morado); box-shadow: 0 0 0 3px var(--morado-tenue); }
.responder .boton { flex: none; }
#ir-cuentas[aria-current="page"] { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 2px; }
.acciones-barra a.enlace { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; }
.chips.filtros .chip { min-height: 40px; padding: 0 12px; font-size: 14px; gap: 6px; }
.chips.filtros .chip .insignia.mini { width: 22px; height: 22px; font-size: 9px; }
.hilo-fila > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.post-hilo .pequeno { display: block; }

/* ---------- Informe ---------- */
.informe-enlace { width: 100%; }
.controles-informe { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
.fila-controles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.fila-controles label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-weight: 700; min-width: 0; }
.fila-controles select {
  font: 600 15px var(--letra); color: var(--tinta); min-height: 44px; padding: 0 10px; width: 100%;
  border: 1.5px solid var(--borde); border-radius: 12px; background: var(--superficie);
}
.informe { display: flex; flex-direction: column; gap: 14px; }
.informe-portada { display: flex; flex-direction: column; gap: 6px; padding: 18px; border-radius: var(--radio); background: var(--tinta); color: #fff; }
.informe-portada h1 { font-size: 26px; margin: 0; }
.informe-portada .suave { color: #D9D2EE; margin: 0; }
.informe-portada .aviso-suave { color: var(--tinta); }
.informe-marca { font-weight: 800; color: var(--azul-claro); letter-spacing: 0.02em; }
.informe-cuentas { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.informe-cuentas li { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; }
.informe-resumen ul { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 4px; }
.informe-pie { text-align: center; }
.tabla-scroll { overflow-x: auto; }
.tabla-informe { width: 100%; border-collapse: collapse; font-size: 14px; }
.tabla-informe th, .tabla-informe td { padding: 8px 6px; text-align: right; border-bottom: 1px solid var(--borde); white-space: nowrap; }
.tabla-informe th:first-child { text-align: left; }
.tabla-informe thead th { font-size: 12px; color: var(--tinta-suave); }
.tabla-informe tbody th { display: flex; align-items: center; gap: 6px; font-weight: 700; }

@media print {
  @page { size: A4; margin: 12mm; }
  body { background: #fff; }
  .barra-superior, .barra-inferior, .franja-demo, #aviso, .no-imprimir, .tabla-datos, .enlace-post { display: none !important; }
  .app, .pantalla { padding: 0 !important; max-width: none !important; border: 0 !important; }
  .tiles { grid-template-columns: repeat(4, 1fr); }
  .informe .lista-posts { display: grid; grid-template-columns: 1fr 1fr; }
  .tabla-scroll { overflow: visible; }
  .informe .barras { max-height: 62mm; }
  .bloque, .tile, .post, .informe-portada { break-inside: avoid; }
  .informe-portada { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .barra-relleno, .barra, .insignia { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* ---------- Link en la bio ---------- */
.tarjeta-enlace {
  display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; column-gap: 12px; align-items: center;
  padding: 14px 16px; border-radius: var(--radio); background: var(--superficie); border: 1px solid var(--borde);
  color: inherit; text-decoration: none; margin-bottom: 14px;
}
.tarjeta-enlace strong { color: var(--morado); }
.tarjeta-enlace .suave { font-size: 14px; }
.flecha-enlace { grid-row: 1 / 3; grid-column: 2; font-size: 28px; color: var(--morado); }
.smartlink-form { display: flex; flex-direction: column; gap: 14px; margin-top: 14px; }
.campo { display: flex; flex-direction: column; gap: 6px; font-weight: 700; font-size: 14px; }
.campo small { font-weight: 400; }
.campo input, .campo textarea, .smartlink-boton input {
  font: 400 16px var(--letra); color: var(--tinta); width: 100%; min-height: 44px; padding: 8px 12px;
  border: 1.5px solid var(--borde); border-radius: 12px; background: var(--superficie);
}
.campo input:focus, .campo textarea:focus, .smartlink-boton input:focus { outline: none; border-color: var(--morado); box-shadow: 0 0 0 3px var(--morado-tenue); }
.con-prefijo { display: flex; align-items: stretch; border: 1.5px solid var(--borde); border-radius: 12px; overflow: hidden; background: var(--fondo); }
.con-prefijo span { display: grid; place-items: center; padding: 0 4px 0 12px; font-weight: 400; color: var(--tinta-suave); font-size: 14px; white-space: nowrap; max-width: 55%; overflow: hidden; text-overflow: ellipsis; }
.con-prefijo input { border: 0; border-radius: 0; min-width: 0; padding-left: 2px; }
.colores { display: flex; gap: 10px; flex-wrap: wrap; }
.color { width: 40px; height: 40px; border-radius: 50%; background: var(--c); border: 3px solid var(--superficie); box-shadow: 0 0 0 1.5px var(--borde); cursor: pointer; }
.color.elegido { box-shadow: 0 0 0 3px var(--tinta); }
.color:focus-visible { outline: 3px solid var(--azul); outline-offset: 3px; }
.smartlink-botones { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.smartlink-boton { display: grid; grid-template-columns: 1fr auto; gap: 8px; padding: 10px; border-radius: 12px; background: var(--fondo); }
.smartlink-boton-campos { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.smartlink-boton-acciones { display: flex; flex-direction: column; gap: 4px; }
.icono { width: 36px; height: 30px; border-radius: 8px; border: 1px solid var(--borde); background: var(--superficie); color: var(--tinta); font: 800 15px var(--letra); cursor: pointer; }
.icono:disabled { opacity: 0.35; cursor: default; }
.quitar-boton { color: var(--error); }
.smartlink-vista {
  display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 24px 16px; border-radius: 16px; text-align: center;
  background: linear-gradient(180deg, color-mix(in srgb, var(--c) 18%, #fff), #fff 70%); border: 1px solid var(--borde);
}
.sv-avatar { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: var(--c); color: #fff; font-size: 28px; font-weight: 800; }
.sv-titulo { font-size: 19px; overflow-wrap: anywhere; }
.sv-bio { margin: 0; color: var(--tinta-suave); font-size: 14px; white-space: pre-line; overflow-wrap: anywhere; }
.sv-boton { width: 100%; padding: 13px; border-radius: 14px; background: var(--c); color: #fff; font-weight: 700; overflow-wrap: anywhere; }
.sv-pie { margin-top: 8px; color: var(--tinta-suave); }
.tu-link .link-publico { margin: 0; font-weight: 800; font-size: 17px; overflow-wrap: anywhere; color: var(--morado); }
.acciones-link { display: flex; gap: 10px; }
.tiles.tres { grid-template-columns: repeat(3, 1fr); }
.tiles.tres .tile-valor { font-size: 22px; }

/* ---------- Planes ---------- */
.enlace-plan { text-decoration: none; }
.uso { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.uso .fila-titulo span { font-size: 14px; }
.uso .barra-pista { display: block; height: 10px; }
.barra-relleno.casi { background: #D9480F; }
.barra-relleno.tope { background: var(--error); }
.planes { display: flex; flex-direction: column; gap: 12px; margin: 14px 0; }
.plan {
  position: relative; display: flex; flex-direction: column; gap: 8px; padding: 18px;
  border-radius: var(--radio); background: var(--superficie); border: 1.5px solid var(--borde);
}
.plan.destacado { border-color: var(--morado); }
.plan.actual { background: var(--morado-tenue); }
.plan h2 { margin: 0; font-size: 20px; }
.plan .etiqueta { position: absolute; top: 14px; right: 14px; }
.plan .precio { margin: 0; }
.plan .precio strong { font-size: 30px; font-weight: 800; }
.plan .precio span { color: var(--tinta-suave); margin-left: 2px; }
.plan ul { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 4px; }
.barra-inferior a { position: relative; }
.globo-no-leidos {
  position: absolute; top: 2px; left: calc(50% + 6px); min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
  background: var(--error); color: #fff; font-size: 11px; font-weight: 800; line-height: 18px; text-align: center;
  border: 2px solid var(--superficie); box-sizing: content-box;
}
.sv-avatar { object-fit: cover; }
.sv-avatar.chico { width: 56px; height: 56px; font-size: 24px; flex: none; }
.fila-foto { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.fila-foto .smartlink-vista, .fila-foto .sv-avatar { background: var(--c, var(--morado)); }
.boton.deshabilitado { opacity: 0.5; pointer-events: none; }

/* ---------- Entrar con Google ---------- */
.boton-google { display: flex; align-items: center; justify-content: center; gap: 10px; background: var(--superficie); color: var(--tinta); border: 1.5px solid var(--borde); }
.boton-google svg { width: 20px; height: 20px; flex: none; }
.separador { display: flex; align-items: center; gap: 10px; margin: 0; color: var(--tinta-suave); font-size: 13px; }
.separador::before, .separador::after { content: ''; flex: 1; height: 1px; background: var(--borde); }