@import url('/tokens.css');
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--fondo); color: var(--tinta); font-family: var(--fuente); font-size: 15px; line-height: 1.45; }
a { color: var(--marca); }
button, input, select { font: inherit; }
h1, h2, h3 { font-family: var(--titulos); font-weight: 600; margin: 0; letter-spacing: -.01em; }
h1 { font-size: 1.6rem; } h2 { font-size: 1.25rem; } h3 { font-size: 1.05rem; }
.cargando { padding: 3rem; text-align: center; color: var(--suave); }
.oculto { display: none; }

/* ---- ingreso ---- */
.ingreso { min-height: 100vh; display: grid; place-items: center; padding: 1rem; background: linear-gradient(160deg, var(--marca-suave), var(--fondo) 60%); }
.ingreso form { background: var(--papel); padding: 2rem; border-radius: var(--radio); box-shadow: var(--sombra); width: min(100%, 380px); display: grid; gap: .8rem; }
.ingreso h1 { color: var(--marca); }
.ingreso p { margin: 0; color: var(--suave); font-size: .9rem; }

/* ---- estructura ---- */
.app { display: grid; grid-template-columns: 230px 1fr; min-height: 100vh; }
.lateral { background: var(--papel); border-right: 1px solid var(--linea); padding: 1.2rem 1rem; display: flex; flex-direction: column; gap: 1.2rem; position: sticky; top: 0; height: 100vh; }
.logo { display: flex; align-items: center; gap: .6rem; color: var(--marca); font-family: var(--titulos); font-size: 1.25rem; font-weight: 700; }
.logo img { width: 38px; height: 38px; object-fit: contain; }
.logo-ingreso { width: 150px; max-width: 60%; justify-self: center; margin-bottom: .2rem; }
.menu { display: grid; gap: .2rem; }
.menu a { display: flex; align-items: center; gap: .6rem; padding: .55rem .7rem; border-radius: 9px; color: var(--tinta); text-decoration: none; font-weight: 500; }
.menu a:hover { background: var(--fondo); }
.menu a.activo { background: var(--marca-suave); color: var(--marca-oscuro); font-weight: 600; }
.menu .icono { width: 20px; text-align: center; }
.usuario { margin-top: auto; font-size: .85rem; color: var(--suave); display: grid; gap: .3rem; }
.contenido { padding: 1.4rem clamp(1rem, 3vw, 2.2rem) 3rem; min-width: 0; }
.barra { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin-bottom: 1.2rem; }
.barra h1 { margin-right: auto; }
.demo-aviso { background: var(--acento); color: var(--tinta); padding: .4rem .8rem; border-radius: 8px; font-size: .85rem; font-weight: 600; }

/* ---- controles ---- */
.boton { border: 1px solid var(--linea); background: var(--papel); color: var(--tinta); padding: .5rem .9rem; border-radius: 9px; cursor: pointer; font-weight: 500; text-decoration: none; }
.boton:hover { border-color: var(--marca); color: var(--marca-oscuro); }
.boton.primario { background: var(--marca); border-color: var(--marca); color: var(--papel); }
.boton.primario:hover { background: var(--marca-oscuro); color: var(--papel); }
.boton:disabled { opacity: .6; cursor: wait; }
select, input[type=text], input[type=email], input[type=password] { border: 1px solid var(--linea); border-radius: 9px; padding: .5rem .7rem; background: var(--papel); color: var(--tinta); }
.segmentos { display: inline-flex; border: 1px solid var(--linea); border-radius: 9px; overflow: hidden; background: var(--papel); }
.segmentos button { border: 0; background: transparent; padding: .45rem .8rem; cursor: pointer; color: var(--suave); }
.segmentos button.activo { background: var(--marca); color: var(--papel); }

/* ---- tarjetas ---- */
.tarjetas { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem; }
.tarjeta { background: var(--papel); border-radius: var(--radio); box-shadow: var(--sombra); padding: 1rem 1.1rem; min-width: 0; }
.tarjeta header { display: flex; align-items: center; gap: .6rem; margin-bottom: .6rem; }
.tarjeta header img, .avatar { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; background: var(--fondo); }
.red { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.red.facebook { color: var(--facebook); } .red.instagram { color: var(--instagram); } .red.youtube { color: var(--youtube); } .red.tiktok { color: var(--tiktok); }
.nombre { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cifras { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem .8rem; }
.cifra small { display: block; color: var(--suave); font-size: .75rem; }
.cifra b { font-size: 1.2rem; font-weight: 600; }
.cifra .var { font-size: .75rem; font-weight: 600; margin-left: .3rem; }
.sube { color: var(--sube); } .baja { color: var(--baja); } .neutro { color: var(--suave); }
.mini { height: 56px; margin-top: .6rem; }
.kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .7rem; margin-bottom: 1rem; }
.kpi { background: var(--papel); border-radius: 10px; padding: .7rem .9rem; box-shadow: var(--sombra); cursor: pointer; border: 2px solid transparent; }
.kpi.activo { border-color: var(--marca); }
.kpi small { color: var(--suave); font-size: .75rem; display: block; }
.kpi b { font-size: 1.25rem; font-weight: 600; }
.kpi .var { display: block; font-size: .75rem; font-weight: 600; }
.panel { background: var(--papel); border-radius: var(--radio); box-shadow: var(--sombra); padding: 1.1rem; margin-bottom: 1rem; min-width: 0; }
.panel h2 { margin-bottom: .6rem; }
.panel .nota { color: var(--suave); font-size: .85rem; margin: .2rem 0 .8rem; }
.grafico { position: relative; height: 320px; }
.leyenda { display: flex; gap: 1rem; font-size: .8rem; color: var(--suave); margin-top: .4rem; }
.leyenda i { display: inline-block; width: 18px; height: 3px; background: var(--marca); vertical-align: middle; margin-right: .3rem; }
.leyenda i.previo { background: repeating-linear-gradient(90deg, var(--suave) 0 4px, transparent 4px 7px); }

/* ---- tablas ---- */
.tabla { width: 100%; border-collapse: collapse; font-size: .9rem; }
.tabla th, .tabla td { padding: .5rem .5rem; border-bottom: 1px solid var(--linea); text-align: right; white-space: nowrap; }
.tabla th:first-child, .tabla td:first-child { text-align: left; }
.tabla th { color: var(--suave); font-weight: 600; font-size: .78rem; text-transform: uppercase; letter-spacing: .03em; cursor: pointer; }
.tabla th.activo { color: var(--marca); }
.tabla .pub { display: flex; align-items: center; gap: .6rem; min-width: 260px; max-width: 420px; white-space: normal; }
.tabla .pub img, .tabla .pub .sin { width: 44px; height: 44px; border-radius: 8px; object-fit: cover; flex: none; background: var(--fondo); display: grid; place-items: center; color: var(--suave); }
.tabla .pub .titulo { font-weight: 500; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tabla .pub small { color: var(--suave); display: block; }
.etiqueta { display: inline-block; padding: .1rem .45rem; border-radius: 999px; background: var(--marca-suave); color: var(--marca-oscuro); font-size: .72rem; font-weight: 600; }
.desplazable { overflow-x: auto; }

/* ---- mapa de calor ---- */
.calor { display: grid; grid-template-columns: 44px repeat(24, 1fr); gap: 3px; font-size: .7rem; }
.calor .enc { text-align: center; color: var(--suave); }
.calor .dia { color: var(--suave); display: flex; align-items: center; }
.calor .celda { aspect-ratio: 1.3; border-radius: 4px; background: rgba(var(--calor), var(--nivel, .06)); position: relative; }
.calor .celda.vacia { background: var(--fondo); }
.calor .celda:hover::after { content: attr(data-info); position: absolute; bottom: 110%; left: 50%; transform: translateX(-50%); background: var(--tinta); color: var(--papel); padding: .3rem .5rem; border-radius: 6px; white-space: nowrap; z-index: 2; font-size: .75rem; }
.mejores { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: .6rem; margin-top: 1rem; }
.mejores div { background: var(--marca-suave); border-radius: 10px; padding: .6rem .8rem; }
.mejores b { display: block; font-size: 1.05rem; }
.mejores small { color: var(--suave); }

/* ---- cuentas ---- */
.lista { display: grid; gap: .6rem; }
.fila-cuenta { display: flex; gap: .8rem; align-items: center; background: var(--fondo); border-radius: 10px; padding: .7rem .9rem; flex-wrap: wrap; }
.fila-cuenta .info { flex: 1; min-width: 180px; }
.fila-cuenta small { color: var(--suave); display: block; }
.error { color: var(--baja); font-size: .85rem; }
.conectar { display: flex; flex-wrap: wrap; gap: .6rem; }
.aviso { padding: .7rem 1rem; border-radius: 10px; margin-bottom: 1rem; background: var(--marca-suave); color: var(--marca-oscuro); }
.aviso.malo { background: var(--baja-suave); color: var(--baja); }
.toast { position: fixed; bottom: 1rem; left: 50%; transform: translateX(-50%); background: var(--tinta); color: var(--papel); padding: .7rem 1.1rem; border-radius: 10px; box-shadow: var(--sombra); z-index: 20; max-width: 90vw; }
.formulario { display: grid; gap: .6rem; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); align-items: end; }
.formulario label { display: grid; gap: .25rem; font-size: .8rem; color: var(--suave); }
.vacio { color: var(--suave); padding: 1.5rem; text-align: center; }

@media (max-width: 900px) {
  .app { grid-template-columns: 1fr; }
  .lateral { position: static; height: auto; flex-direction: row; align-items: center; flex-wrap: wrap; gap: .6rem; padding: .7rem .8rem; border-right: 0; border-bottom: 1px solid var(--linea); }
  .menu { display: flex; flex-wrap: wrap; gap: .2rem; }
  .menu a { padding: .4rem .6rem; font-size: .9rem; }
  .menu .texto { display: none; }
  .usuario { margin-top: 0; margin-left: auto; }
  .grafico { height: 240px; }
  .calor { font-size: .55rem; gap: 2px; grid-template-columns: 30px repeat(24, 1fr); }
}