/* ==========================================================================
   Estructura de la aplicación, al modelo de Metricool.

   Cambia el reparto de la pantalla, no los colores: los tokens siguen
   viviendo en style.css y aquí solo se usan.

   Las tres decisiones que se copian de Metricool, y por qué:

   1. La navegación va en una barra SUPERIOR, no lateral. Deja el ancho
      completo para el calendario, que es la pantalla en la que de verdad se
      trabaja.
   2. El calendario es la pantalla principal, y se puede crear un post
      haciendo clic en un día — con la fecha ya puesta.
   3. El compositor es una ventana encima, no otra página: se escribe sin
      perder de vista el calendario que hay detrás.
   ========================================================================== */

.app { min-height: 100vh; display: flex; flex-direction: column; }

/* ------------------------------------------------------- barra superior */

.topnav {
  background: var(--bg-elevated);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 40;
}

.topnav-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: .55rem 1.2rem;
  max-width: 1560px;
  margin: 0 auto;
  width: 100%;
}

.topnav-row.secondary {
  padding-top: 0;
  padding-bottom: 0;
  gap: .1rem;
  overflow-x: auto;
  scrollbar-width: none;
}
.topnav-row.secondary::-webkit-scrollbar { display: none; }

.brand-lite { display: flex; align-items: center; gap: .5rem; flex-shrink: 0; }
.brand-lite .brand-mark { width: 26px; height: 26px; border-radius: 7px; font-size: 13px; }
.brand-lite .name { font-weight: 650; font-size: .92rem; }

/* Selector de proyecto: lo primero de la barra, como la marca en Metricool. */
.project-picker {
  display: flex;
  align-items: center;
  gap: .5rem;
  background: var(--surface-muted);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: .34rem .6rem;
  cursor: pointer;
  font-size: .86rem;
  font-weight: 550;
  color: var(--text);
  max-width: 250px;
  font-family: inherit;
}
.project-picker:hover { border-color: var(--accent); background: var(--surface-muted); }
.project-picker .label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.project-picker .caret { color: var(--text-faint); font-size: .65rem; }

/* Pestañas de sección */
.navtab {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  padding: .6rem .8rem;
  font-size: .87rem;
  font-weight: 550;
  color: var(--text-muted);
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: .4rem;
  font-family: inherit;
  cursor: pointer;
}
.navtab:hover { background: var(--surface-muted); color: var(--text); text-decoration: none; }
.navtab.active { color: var(--accent); border-bottom-color: var(--accent); background: none; }
.navtab .badge {
  background: var(--surface-muted); color: var(--text-muted);
  border-radius: 20px; padding: 0 .4rem; font-size: .7rem; font-weight: 650;
}
.navtab.active .badge { background: var(--accent); color: var(--accent-text); }

/* Botón principal de crear: siempre visible y siempre en el mismo sitio. */
.btn-create {
  background: var(--accent);
  color: var(--accent-text);
  font-weight: 600;
  padding: .5rem .95rem;
  border-radius: var(--radius-sm);
  white-space: nowrap;
  flex-shrink: 0;
}
.btn-create:hover { background: var(--accent-hover); }

/* Menú de la persona conectada */
.user-chip {
  display: flex; align-items: center; gap: .5rem;
  background: none; border: 1px solid var(--border);
  border-radius: 20px; padding: .24rem .55rem .24rem .28rem;
  cursor: pointer; font-size: .83rem; color: var(--text); font-family: inherit;
  flex-shrink: 0;
}
.user-chip:hover { background: var(--surface-muted); }

.avatar {
  width: 24px; height: 24px; border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), #b06ce8);
  color: #fff; display: grid; place-items: center;
  font-size: .72rem; font-weight: 700; flex-shrink: 0;
}
.avatar.lg { width: 38px; height: 38px; font-size: 1rem; }

.menu-pop {
  position: fixed; right: 1.2rem; top: 54px;
  background: var(--bg-elevated); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow-lg);
  min-width: 240px; padding: .35rem; z-index: 60;
}
.menu-pop-head { padding: .55rem .6rem; border-bottom: 1px solid var(--border); margin-bottom: .3rem; }
.menu-item {
  display: flex; align-items: center; gap: .55rem; width: 100%;
  background: none; border: none; border-radius: var(--radius-sm);
  padding: .45rem .6rem; font-size: .85rem; color: var(--text);
  text-align: left; font-family: inherit; cursor: pointer;
}
.menu-item:hover { background: var(--surface-muted); text-decoration: none; }
.menu-item .icon { width: 16px; text-align: center; color: var(--text-faint); }
.menu-sep { height: 1px; background: var(--border); margin: .3rem 0; }

/* --------------------------------------------------------- explicaciones */

/* Cada sección abre diciendo para qué sirve, en una frase. */
.section-intro {
  display: flex;
  gap: .7rem;
  align-items: flex-start;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-sm);
  padding: .8rem .95rem;
  margin-bottom: 1.2rem;
}
.section-intro .ico { font-size: 1.05rem; line-height: 1.3; flex-shrink: 0; }
.section-intro .what { font-size: .88rem; line-height: 1.55; }
.section-intro .what strong { font-weight: 600; }
.section-intro .what p { margin-top: .25rem; color: var(--text-muted); }

/* Interrogación que despliega la explicación al pasar por encima. */
.help {
  display: inline-grid; place-items: center;
  width: 15px; height: 15px; border-radius: 50%;
  background: var(--surface-muted); color: var(--text-faint);
  font-size: .64rem; font-weight: 700; cursor: help;
  border: 1px solid var(--border); vertical-align: middle;
  margin-left: .28rem; position: relative;
}
.help:hover, .help:focus { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); }
.help::after {
  content: attr(data-help);
  position: absolute; bottom: 145%; left: 50%; transform: translateX(-50%);
  background: var(--bg-elevated); color: var(--text);
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  box-shadow: var(--shadow); padding: .5rem .65rem;
  width: max-content;
  /* En un teléfono, 260px no caben: el globo se salía por el borde. */
  max-width: min(260px, 76vw);
  font-size: .78rem; font-weight: 400; line-height: 1.5; text-align: left;
  pointer-events: none;
  z-index: 70; white-space: normal;
  /* `display: none` y no `opacity: 0`: un globo invisible pero presente sigue
     contando para el ancho de la página, y como sobresale por la derecha,
     hacía que TODA la app se pudiera desplazar de lado en el móvil. Se veía
     como una web rota sin que nada estuviera roto. */
  display: none;
}
/* `:focus` en vez de `:focus-visible`: al tocar con el dedo no hay hover, y
   con `:focus-visible` los globos de ayuda eran inalcanzables en el móvil.
   Los iconos ya llevan tabindex="0", así que un toque los enfoca. */
.help:hover::after, .help:focus::after { display: block; }

/* ------------------------------------------------ compositor en ventana */

.composer-backdrop {
  position: fixed; inset: 0; background: rgba(8, 9, 12, .55);
  z-index: 80; display: flex; align-items: flex-start; justify-content: center;
  padding: 2vh 1rem; overflow-y: auto;
}

.composer {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  width: 100%; max-width: 1080px;
  display: flex; flex-direction: column;
  max-height: 96vh;
}

.composer-head {
  display: flex; align-items: center; gap: .7rem;
  padding: .9rem 1.2rem;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.composer-head h2 { flex: 1; font-size: 1rem; }
.composer-close {
  background: none; border: none; color: var(--text-muted);
  font-size: 1.3rem; padding: 0 .35rem; line-height: 1;
}
.composer-close:hover { background: none; color: var(--text); }

.composer-body {
  display: grid; grid-template-columns: 1fr 370px;
  overflow: hidden; flex: 1; min-height: 0;
}
.composer-main { padding: 1.1rem 1.2rem; overflow-y: auto; }
.composer-side {
  border-left: 1px solid var(--border);
  background: var(--surface-muted);
  padding: 1rem; overflow-y: auto;
}
.composer-side h3 { font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); margin-bottom: .6rem; }

.composer-foot {
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  padding: .85rem 1.2rem;
  border-top: 1px solid var(--border);
  background: var(--surface-muted);
  flex-shrink: 0;
}
.composer-foot .spacer { flex: 1; }

/* Un paso numerado por bloque, en el orden en que se rellena. */
.step { margin-bottom: 1.35rem; }
.step:last-child { margin-bottom: 0; }
.step-head { display: flex; align-items: center; gap: .5rem; margin-bottom: .45rem; }
.step-num-sm {
  width: 19px; height: 19px; border-radius: 50%;
  background: var(--accent-soft); color: var(--accent);
  display: grid; place-items: center;
  font-size: .67rem; font-weight: 700; flex-shrink: 0;
}
.step-label { font-size: .88rem; font-weight: 600; }
.step-hint { font-size: .78rem; color: var(--text-faint); margin: -.15rem 0 .5rem 1.7rem; line-height: 1.5; }
.step-body { margin-left: 1.7rem; }

/* Bloque plegable, para lo opcional: no abruma a quien empieza. */
.fold > summary {
  cursor: pointer; font-size: .85rem; font-weight: 550; color: var(--accent);
  padding: .4rem 0; list-style: none; display: flex; align-items: center; gap: .4rem;
}
.fold > summary::-webkit-details-marker { display: none; }
.fold > summary::before { content: "▸"; font-size: .7rem; transition: transform .12s; }
.fold[open] > summary::before { transform: rotate(90deg); }
.fold > summary:hover { text-decoration: underline; }
.fold-body { padding: .6rem 0 .2rem 1rem; border-left: 2px solid var(--border); margin-left: .3rem; }

/* ------------------------------- selección de redes con iconos de marca */

.net-picker { display: flex; flex-wrap: wrap; gap: .45rem; }

.net-btn {
  display: flex; align-items: center; gap: .42rem;
  background: var(--surface); border: 1.5px solid var(--border);
  border-radius: 20px; padding: .32rem .72rem .32rem .45rem;
  font-size: .83rem; font-weight: 550; color: var(--text-faint);
  cursor: pointer; transition: border-color .12s, color .12s;
  font-family: inherit;
}
.net-btn .net-icon {
  width: 19px; height: 19px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: .6rem; font-weight: 800; color: #fff;
  background: var(--border-strong); flex-shrink: 0;
  transition: background .12s;
}
.net-btn:hover { border-color: var(--border-strong); color: var(--text); background: var(--surface); }
/* Activo = color de la red. Apagado = gris. Es el mecanismo de selección,
   sin casillas ni etiquetas repetidas. */
.net-btn.on { color: var(--text); border-color: var(--net-color); background: var(--surface); }
.net-btn.on .net-icon { background: var(--net-color); }
.net-btn.unavailable { opacity: .4; cursor: not-allowed; }
.net-btn.unavailable:hover { border-color: var(--border); }

/* -------------------------------------------- calendario como pantalla 1 */

.cal-head { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-bottom: .9rem; }
.cal-nav { display: flex; align-items: center; gap: .2rem; }
.cal-month { font-weight: 650; font-size: 1.05rem; min-width: 168px; text-transform: capitalize; }

.filter-count {
  background: var(--accent); color: var(--accent-text);
  border-radius: 20px; padding: 0 .34rem; font-size: .7rem; font-weight: 700;
  margin-left: .3rem;
}

/* La recomendación de hora va en la propia celda, como en Metricool, en vez
   de en un informe aparte. */
.cal-day.good-time { background: var(--accent-soft); }
.cal-day { cursor: pointer; position: relative; }
.cal-day:hover { background: var(--surface-muted); }
.cal-day.other-month:hover { background: var(--surface-muted); }
.cal-day .add-hint {
  position: absolute; left: 0; right: 0; bottom: .22rem; text-align: center;
  font-size: .67rem; color: var(--accent); opacity: 0;
  transition: opacity .12s; pointer-events: none;
}
.cal-day:hover .add-hint { opacity: 1; }

/* -------------------------------------------------------------- equipo */

.team-row {
  display: flex; align-items: center; gap: .7rem;
  padding: .7rem .85rem;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  margin-bottom: .45rem; background: var(--surface);
}
.team-row .who { flex: 1; min-width: 0; }
.team-row .name { font-weight: 600; font-size: .9rem; }
.team-row .meta { font-size: .76rem; color: var(--text-faint); }
.team-row.inactive { opacity: .55; }

.log-row {
  display: grid; grid-template-columns: minmax(90px, auto) 1fr auto; gap: .7rem;
  padding: .5rem 0; border-bottom: 1px solid var(--border);
  font-size: .85rem; align-items: baseline;
}
.log-row:last-child { border-bottom: none; }
.log-who { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.log-when { font-size: .76rem; color: var(--text-faint); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* El calendario se desplaza dentro de su caja, no arrastra la página entera:
   siete columnas no caben en un móvil y se cortaban los últimos días. */
.cal-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.cal-scroll .cal-grid { min-width: 620px; }
.cal-swipe-hint { display: none; margin-top: .5rem; }

/* -------------------------------------------------------------- móviles */

@media (max-width: 1040px) {
  .composer-body { grid-template-columns: 1fr; }
  .composer-side { border-left: none; border-top: 1px solid var(--border); }
}

/* Ventana BAJA (un portátil pequeño, un móvil tumbado, o la ventana sin
   maximizar). El compositor mide como mucho 96vh y reparte lo que queda entre
   dos paneles con su propio scroll; con 350 px de alto, descontados la
   cabecera y los botones, cada panel se queda en 90 px y no se puede
   trabajar. Aquí se suelta el límite y hace scroll la ventana entera, que ya
   lo permite el fondo. */
@media (max-height: 640px) {
  .composer { max-height: none; }
  .composer-body { overflow: visible; }
  .composer-main, .composer-side { overflow-y: visible; }
}

@media (max-width: 700px) {
  .topnav-row { padding: .5rem .8rem; gap: .55rem; }
  .project-picker { max-width: 132px; }
  .brand-lite .name { display: none; }
  .btn-create .long { display: none; }
  .composer-backdrop { padding: 0; }
  .composer { max-width: none; border-radius: 0; min-height: 100vh; max-height: none; }
  .step-hint, .step-body { margin-left: 0; }
  /* La pista de deslizar solo se enseña donde de verdad hay que deslizar. */
  .cal-swipe-hint { display: block; }

  /* En el móvil la cabecera del calendario no cabía en una línea: el ancho
     mínimo del mes empujaba la fila 20px más allá del borde y la página
     entera se movía de lado. Al envolverse, un hueco flexible no pinta
     nada. */
  .cal-month { min-width: 0; }
  .cal-head .topbar-spacer { display: none; }
}

/* ------------------------------------------------- vista de lista
   Lo mismo que la parrilla del mes pero en vertical y con el texto entero.
   En el móvil es la única que se lee: la parrilla solo enseña cuatro de los
   siete días. Es la «list view» que tienen Later y Buffer. */
.cal-view-toggle { display: flex; gap: .2rem; }
.cal-view-toggle .btn-sm.active {
  background: var(--accent-soft); color: var(--accent); border-color: var(--accent);
}

.agenda-day {
  display: flex; align-items: baseline; gap: .5rem;
  padding: .9rem .1rem .35rem; border-bottom: 1px solid var(--border);
  margin-bottom: .4rem; font-size: .92rem;
}
.agenda-day .hint { margin: 0; }

.agenda-row {
  display: flex; gap: .7rem; align-items: flex-start;
  padding: .55rem .6rem; margin-bottom: .35rem; cursor: pointer;
  border: 1px solid var(--border); border-left: 3px solid var(--border);
  border-radius: var(--radius-sm); background: var(--surface);
}
.agenda-row:hover { border-color: var(--accent); background: var(--bg-elevated); }
.agenda-hora {
  flex: 0 0 3.1rem; font-variant-numeric: tabular-nums;
  font-weight: 600; font-size: .82rem; color: var(--text-muted); padding-top: .1rem;
}
.agenda-cuerpo { flex: 1; min-width: 0; }
.agenda-texto { font-size: .86rem; line-height: 1.45; overflow-wrap: anywhere; }
.agenda-meta {
  display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; margin-top: .35rem;
}
.agenda-cliente { font-size: .76rem; font-weight: 600; }
.agenda-red {
  display: inline-grid; place-items: center; width: 17px; height: 17px;
  border-radius: 4px; color: #fff; font-size: .58rem; font-weight: 700;
}

/* La leyenda de colores por cliente. */
.cal-leyenda {
  display: flex; flex-wrap: wrap; gap: .5rem 1rem;
  margin-top: .7rem; font-size: .78rem; color: var(--text-muted);
}
.cal-leyenda-item { display: inline-flex; align-items: center; gap: .35rem; }

/* --------------------------------------------- la fila de clientes
   Con varios clientes, el desplegable obliga a abrirlo para saber en cuál
   estás. Esta fila lo dice de un vistazo. Se desliza a lo ancho en vez de
   envolverse: así la barra superior no crece y empuja el contenido. */
.project-row {
  display: flex; gap: .4rem; overflow-x: auto; padding: .45rem .8rem;
  border-top: 1px solid var(--border); background: var(--surface);
  scrollbar-width: thin;
}
.project-chip {
  flex: 0 0 auto; padding: .28rem .7rem; border-radius: 20px;
  border: 1px solid var(--border); background: var(--bg);
  color: var(--text-muted); font-size: .8rem; font-weight: 550; cursor: pointer;
  white-space: nowrap;
}
.project-chip:hover { border-color: var(--accent); color: var(--accent); }
.project-chip.active {
  background: var(--accent); border-color: var(--accent); color: var(--accent-text);
}

/* Con el dedo no se acierta en lo que se acierta con el ratón. Se agrandan
   las zonas de toque en pantallas pequeñas, sin cambiar el aspecto en el
   ordenador: la cruz de cerrar medía 26x21 px. */
@media (max-width: 700px) {
  .composer-close { width: 38px; height: 38px; font-size: 1.35rem; }
  .checkbox input[type="checkbox"] { width: 18px; height: 18px; }
  .checkbox { padding: .2rem 0; }
  .help { width: 20px; height: 20px; font-size: .72rem; }
}

/* --------------------------------------------------------------- móvil
   Filas de datos que en el ordenador caben en una línea y en el teléfono
   no. Sin esto la página se desplaza a los lados, que es lo que hace que
   una web se sienta rota en el móvil aunque todo funcione. */
@media (max-width: 560px) {
  .upcoming-row { flex-wrap: wrap; }
  .upcoming-row > span,
  .upcoming-row > strong { min-width: 0; }

  /* Los identificadores de canal (-1001368084419) son una sola palabra sin
     espacios: sin permitir el corte, no hay ancho de pantalla que valga. */
  .platform-group span,
  .upcoming-row span { overflow-wrap: anywhere; }
}