/* =========================================================================
 *  Panel de métricas · ABMedia
 *  Misma estética que Sequence Builder: fondo oscuro, metal cálido y el
 *  naranja sólo como acento.
 * ========================================================================= */
:root {
  --bg: #0A0A0A;
  --bg-2: #101010;
  --panel: #111111;
  --panel-2: #151515;
  --border: rgba(255,255,255,.10);
  --text: #FFFFFF;
  --muted: #ADAAA5;
  --faint: #7C7873;
  --metal-1: #C9C3BC;
  --metal-2: #EFECE8;
  --acento: #FF5208;
  --acento-lit: #FF8A3D;
  --acento-soft: rgba(255,82,8,.14);
  --ok: #6ee79a;
  --ko: #ff8f92;
  --aviso: #f5c05e;   /* ámbar: le falta algo, pero no está roto */
  --metal: conic-gradient(from 0deg,
    #4a4a4a, #d8d3cd 8%, #7a7168 16%, #EFECE8 26%, #C9C3BC 32%,
    #8a8078 40%, #efece8 50%, #6d655d 58%, #EFECE8 70%, #b9b2aa 80%,
    #3f3f3f 90%, #4a4a4a);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  /*
   * SF Pro, la tipografía del sistema de Apple.
   *
   * No se aloja: su licencia no deja repartirla desde una web. Se le pide al
   * sistema, que es como lo hace la propia Apple. En Mac y en iPhone sale SF
   * Pro de verdad —`-apple-system` ya la resuelve, y elige Display o Text
   * según el tamaño—; en Windows y Android cae a la del sistema.
   *
   * De paso se fue la petición a Google Fonts: un origen menos que abrir y
   * nada que esperar antes de pintar.
   */
  font-family: "SF Pro Display", "SF Pro Text", -apple-system, BlinkMacSystemFont,
    "Segoe UI Variable", "Segoe UI", system-ui, "Helvetica Neue", Arial, sans-serif;
  letter-spacing: -.011em;
  background: var(--bg); color: var(--text);
  -webkit-font-smoothing: antialiased;
}
.hidden { display: none !important; }

h1, h2 {
  font-weight: 600; letter-spacing: -.042em; line-height: 1.05;
  background: linear-gradient(to bottom right, #FFFFFF 30%, rgba(255,255,255,.4));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

/* ------------------------------ Estructura ---------------------------- */
/* La barra se pliega para dejar sitio a las tablas anchas. El ancho vive en
   una variable porque lo usan la rejilla y la propia barra. */
:root { --ancho-lateral: 240px; }
body.lateral-plegada { --ancho-lateral: 72px; }
.app { display: grid; grid-template-columns: var(--ancho-lateral) minmax(0, 1fr);
       min-height: 100vh; transition: grid-template-columns .18s ease; }
.sidebar {
  background: linear-gradient(180deg, var(--bg-2), var(--bg));
  border-right: 1px solid var(--border);
  padding: 24px 18px; display: flex; flex-direction: column; gap: 18px;
  position: sticky; top: 0; height: 100vh;
}
.brand { display: flex; align-items: center; gap: 10px; }
.plegar {
  margin-left: auto; background: none; border: 0; padding: 4px; cursor: pointer;
  color: var(--faint); border-radius: 7px; flex-shrink: 0; transition: .15s;
}
.plegar svg { width: 17px; height: 17px; display: block; }
.plegar:hover { color: var(--text); background: rgba(255,255,255,.06); }

/* Plegada: sólo iconos y logo. Nada desaparece del menú, sólo su rótulo, y
   el título queda como ayuda emergente para no perder el nombre. */
body.lateral-plegada .sidebar { padding: 24px 12px; align-items: center; }
body.lateral-plegada .brand { flex-direction: column; gap: 12px; width: 100%; }
body.lateral-plegada .brand-text,
body.lateral-plegada .nav-rotulo,
body.lateral-plegada .nav-item span,
body.lateral-plegada .perfil-txt,
body.lateral-plegada .perfil-btn .chev { display: none; }
body.lateral-plegada .plegar { margin-left: 0; }
/* Plegada, cada icono es un cuadrado. Sin fijar el alto salían aplastados,
   porque el relleno lateral desaparecía pero el vertical seguía. */
body.lateral-plegada .nav-item {
  justify-content: center; padding: 0; width: 44px; height: 44px;
  margin: 0 auto; border-radius: 12px;
}
body.lateral-plegada .nav-item .ni { width: 21px; height: 21px; }
/* Plegada, el degradado del borde queda demasiado fino en 44px para ver de
   un vistazo dónde estás. Se marca con fondo del color de la casa y borde,
   que a este tamaño es lo único que se lee. */
body.lateral-plegada .nav-item.active {
  background-image: none; background: var(--acento-soft);
  border-color: rgba(255,255,255,.32);
}
body.lateral-plegada .perfil-btn {
  justify-content: center; padding: 0; width: 44px; height: 44px;
  margin: 0 auto; border-radius: 12px;
}
body.lateral-plegada .perfil-ini { width: 24px; height: 24px; }
body.lateral-plegada .nav { gap: 6px; }
body.lateral-plegada .sidebar-foot { flex-direction: column; align-items: center; }
body.lateral-plegada .lateral-fuera,
body.lateral-plegada .lateral-admin { width: 100%; }
@media (max-width: 900px) { .plegar { display: none; } }
.brand .logo { width: 32px; height: 32px; flex-shrink: 0; }
.brand .logo img { width: 100%; height: 100%; object-fit: contain; display: block; }
.brand-text strong { display: block; font-size: 14.5px; font-weight: 700; letter-spacing: -.02em; }
.brand-text small { color: var(--faint); font-size: 10.5px; }

.nav { display: flex; flex-direction: column; gap: 4px; }
.nav-item {
  display: flex; align-items: center; gap: 10px;
  font-size: 14px; color: var(--muted);
  padding: 10px 12px; border: 1px solid transparent; border-radius: 11px;
  cursor: pointer; transition: .15s;
}
.nav-item:hover { background: var(--panel); color: var(--text); }
.nav-item.active {
  color: var(--text); font-weight: 600; border-color: transparent;
  background-image:
    linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.015)),
    linear-gradient(180deg, #151515, #0E0E0E),
    conic-gradient(from 200deg,
      rgba(255,255,255,.10), rgba(255,255,255,.34) 12%,
      rgba(255,255,255,.42) 26%, rgba(255,255,255,.55) 34%,
      rgba(255,255,255,.40) 44%, rgba(255,255,255,.30) 60%,
      rgba(255,255,255,.10) 78%, rgba(255,255,255,.10));
  background-origin: border-box;
  background-clip: padding-box, padding-box, border-box;
}
.nav-item .ni { width: 19px; height: 19px; fill: var(--muted); flex-shrink: 0; transition: .15s; }
.nav-item.active .ni { fill: var(--acento); }
.sidebar-foot { margin-top: auto; display: flex; gap: 8px; }
.foot-btn {
  width: 36px; height: 36px; display: grid; place-items: center;
  border-radius: 10px; cursor: pointer; color: var(--muted);
  background: var(--panel-2); border: 1px solid var(--border); transition: .15s;
}
.foot-btn svg { width: 17px; height: 17px; }
.foot-btn:hover { color: var(--text); border-color: rgba(255,255,255,.28); }

.content { padding: 28px 32px 56px; min-width: 0; position: relative; }
.content::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 380px;
  pointer-events: none; z-index: 0;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 68px 68px;
  -webkit-mask-image: radial-gradient(ellipse 75% 80% at 30% 0%, #000 15%, transparent 75%);
  mask-image: radial-gradient(ellipse 75% 80% at 30% 0%, #000 15%, transparent 75%);
}
.content > * { position: relative; z-index: 1; }

.topbar { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 18px; }
.topbar h1 { font-size: clamp(24px, 2.6vw, 31px); }
.topbar p { color: var(--muted); font-size: 14px; margin-top: 7px; }
.topbar-tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* ------------------------------ Controles ----------------------------- */
.segmentos {
  display: inline-flex; gap: 4px; padding: 4px;
  background: var(--panel); border: 1px solid var(--border); border-radius: 999px;
}
.segmentos .seg {
  font-family: inherit; font-size: 13px; font-weight: 600; color: var(--muted);
  background: transparent; border: none; border-radius: 999px;
  padding: 7px 14px; cursor: pointer; transition: .15s; white-space: nowrap;
}
.segmentos .seg:hover { color: var(--text); }
.segmentos .seg.active {
  color: var(--text);
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.03));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18);
}
.segmentos.pequeno .seg { font-size: 12px; padding: 6px 12px; }

.selector { display: inline-flex; gap: 6px; }
.cuenta-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 14px 7px 8px; border-radius: 999px; cursor: pointer;
  background: var(--panel); border: 1px solid var(--border);
  font-size: 13px; font-weight: 600; color: var(--muted);
  font-family: inherit; transition: .15s;
}
.cuenta-chip .ico { width: 20px; height: 20px; border-radius: 6px; display: grid; place-items: center; flex-shrink: 0; }
.cuenta-chip .ico svg { width: 13px; height: 13px; }
.cuenta-chip:hover { color: var(--text); border-color: rgba(255,255,255,.26); }
.cuenta-chip.active { color: var(--text); border-color: transparent;
  background-image:
    linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.02)),
    linear-gradient(180deg, #1D1C1A, #141312), var(--metal);
  background-origin: border-box; background-clip: padding-box, padding-box, border-box; }

.buscador {
  font-family: inherit; font-size: 13.5px; color: var(--text);
  background: var(--panel); border: 1px solid var(--border);
  border-radius: 999px; padding: 9px 16px; min-width: 220px;
}
.buscador:focus { outline: none; border-color: rgba(255,255,255,.28); }

.aviso-demo {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 12.5px; color: var(--muted);
  background: var(--acento-soft); border: 1px solid var(--border);
  padding: 9px 16px; border-radius: 999px; margin-bottom: var(--hueco);
}
.aviso-demo .punto { width: 7px; height: 7px; border-radius: 999px; background: var(--acento); flex-shrink: 0; }

/* ------------------------------- Tarjetas ----------------------------- */
/* ---------------------------- Espaciado base ---------------------------- */
/* Un único hueco para todo lo que se apila. Los bloques no llevan margen
   propio: lo pone el contenedor, así no hay forma de que dos se toquen. */
:root { --hueco: 18px; }
@media (max-width: 900px) { :root { --hueco: 14px; } }
@media (max-width: 560px) { :root { --hueco: 12px; } }

.content > section {
  display: flex; flex-direction: column; gap: var(--hueco);
}

.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: var(--hueco); }
.kpi {
  background: var(--panel); border: 1px solid var(--border);
  border-radius: 16px; padding: 18px 20px 16px;
  display: flex; flex-direction: column; gap: 6px;
}
.kpi .etiqueta { font-size: 12px; color: var(--faint); font-weight: 600; letter-spacing: .02em; }
.kpi .valor { font-size: 28px; font-weight: 700; letter-spacing: -.04em; line-height: 1.1; }
.kpi .pie { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--muted); }
.delta { display: inline-flex; align-items: center; gap: 3px; font-weight: 700; }
.delta.sube { color: var(--ok); }
.delta.baja { color: var(--ko); }
.delta svg { width: 11px; height: 11px; fill: currentColor; }

.panel {
  background: var(--panel); border: 1px solid var(--border);
  border-radius: 18px; padding: 20px 22px 18px;
}
.panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.panel-head h2 { font-size: 17px; }
.panel-head p { font-size: 12.5px; color: var(--faint); margin-top: 5px; }
.dos-columnas { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: var(--hueco); }
/* Una curva necesita recorrido horizontal para leerse; un queso o una cifra
   no ganan nada por ser grandes. De ahí que no vayan a mitades iguales. */
.ancho-y-cuadro { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--hueco); }
.fila-graficos { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); gap: var(--hueco); }
@media (max-width: 1100px) {
  .ancho-y-cuadro, .fila-graficos { grid-template-columns: 1fr; }
}

/* El ritmo, en cifra: dibujarlo en barras era media pantalla para un número. */
.ritmo-cifra { display: flex; flex-direction: column; justify-content: center;
               height: 100%; min-height: 120px; }
.ritmo-cifra strong { font-size: 38px; font-weight: 700; letter-spacing: -.04em; line-height: 1; }
.ritmo-cifra span { font-size: 12.5px; color: var(--muted); margin-top: 6px; }
.ritmo-cifra small { font-size: 11px; color: var(--faint); margin-top: 10px; }

/* El selector de orden, igual en toda la web. */
.orden-sel { margin-bottom: 14px; }
.orden-sel label { display: inline-flex; align-items: center; gap: 8px;
                   font-size: 11.5px; color: var(--faint); }

/* Los filtros de lead magnets: dos desplegables que se combinan. */
.filtro-campo { display: inline-flex; align-items: center; gap: 8px;
                font-size: 11.5px; color: var(--faint); }
/* Las dos columnas deben quedar a la misma altura, no cada una la suya. */
.dos-columnas > .panel { margin: 0; height: 100%; }

/* ------------------------------- Gráficos ----------------------------- */
.gr { width: 100%; display: block; overflow: visible; }
.gr .barra { transition: .15s; }
.gr g:hover .barra { filter: brightness(1.22); }
.gr .rejilla { stroke: rgba(255,255,255,.07); stroke-width: 1; }
.gr .eje { fill: var(--faint); font-size: 11px; font-family: inherit; font-weight: 500; }
.gr .linea { fill: none; stroke: var(--metal-2); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }

.gr .punto { fill: var(--acento); stroke: #0A0A0A; stroke-width: 2; opacity: 0; transition: .15s; }
.gr .col:hover .punto { opacity: 1; }
.gr .col:hover .franja { fill: rgba(255,255,255,.04); }
.gr .franja { fill: transparent; }

.pista {
  position: fixed; pointer-events: none; z-index: 60;
  background: #1C1B19; border: 1px solid rgba(255,255,255,.16);
  border-radius: 10px; padding: 9px 13px; font-size: 12.5px;
  box-shadow: 0 14px 34px rgba(0,0,0,.6); white-space: nowrap;
  opacity: 0; transition: opacity .12s;
}
.pista.visible { opacity: 1; }
.pista b { display: block; font-size: 14px; margin-bottom: 2px; }
.pista span { color: var(--faint); }

/* ------------------------------ Listas -------------------------------- */
.lista-top { display: flex; flex-direction: column; gap: 8px; }
.item-top {
  display: grid; grid-template-columns: 62px 1fr auto; gap: 13px;
  align-items: center; padding: 9px; border-radius: 12px; transition: .15s;
}
.item-top:hover { background: rgba(255,255,255,.04); }
.item-top .mini {
  width: 62px; height: 40px; border-radius: 8px; object-fit: cover;
  background: linear-gradient(135deg, #2a2724, #171614);
  border: 1px solid var(--border); display: block;
}
.item-top .txt { min-width: 0; }
.item-top .tit {
  font-size: 13.5px; font-weight: 600; line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.item-top .meta { font-size: 11.5px; color: var(--faint); margin-top: 3px; }
.item-top .cifra { font-size: 15px; font-weight: 700; letter-spacing: -.02em; text-align: right; white-space: nowrap; }
.item-top .cifra small { display: block; font-size: 10.5px; color: var(--faint); font-weight: 500; letter-spacing: 0; }

/* ------------------------------- Tabla -------------------------------- */
/* Con 250 publicaciones la tabla medía 17.000 px y enterraba todo lo que
   viniera después. Ahora hace scroll dentro de su propio panel y la cabecera
   se queda pegada arriba para no perder de vista por qué columna se ordena. */
/* Las tablas anchas se desplazan DENTRO de su panel, no empujan la página.
   La barra va pintada a juego: la del sistema, gris y gorda, canta mucho
   sobre un fondo oscuro. */
.tabla-wrap { overflow: auto; max-height: 70vh; }
.tabla-wrap, .desliza {
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.16) transparent;
}
.desliza { overflow-x: auto; overscroll-behavior-x: contain; }

/* Una sombra en el borde derecho avisa de que queda tabla por ver: sin ella
   nadie adivina que eso se desliza. */
.desliza {
  background:
    linear-gradient(90deg, var(--panel) 30%, transparent) left / 24px 100% no-repeat,
    linear-gradient(90deg, transparent, var(--panel) 70%) right / 24px 100% no-repeat,
    radial-gradient(farthest-side at 0 50%, rgba(0,0,0,.4), transparent) left / 12px 100% no-repeat,
    radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,.4), transparent) right / 12px 100% no-repeat;
  background-attachment: local, local, scroll, scroll;
}
.tabla thead th { position: sticky; top: 0; z-index: 2; background: var(--panel); }
.tabla { width: 100%; border-collapse: collapse; min-width: 680px; }
.tabla th {
  text-align: left; font-size: 11px; font-weight: 700; color: var(--faint);
  text-transform: uppercase; letter-spacing: .1em;
  padding: 0 12px 11px; cursor: pointer; white-space: nowrap; user-select: none;
}
.tabla th:hover { color: var(--muted); }
.tabla th .flecha { opacity: 0; margin-left: 4px; }
.tabla th.orden .flecha { opacity: 1; }
.tabla td { padding: 11px 12px; border-top: 1px solid var(--border); font-size: 13.5px; vertical-align: middle; }
.tabla tbody tr:hover { background: rgba(255,255,255,.03); }
.tabla .col-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tabla .celda-tit { display: flex; align-items: center; gap: 11px; min-width: 0; }
.tabla .celda-tit img { width: 54px; height: 34px; border-radius: 6px; object-fit: cover; flex-shrink: 0; background: #201E1B; border: 1px solid var(--border); }
.tabla .celda-tit span {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; line-height: 1.35;
}
.etiqueta-tipo {
  font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 999px; color: var(--muted);
  background: rgba(255,255,255,.06); border: 1px solid var(--border); white-space: nowrap;
}

/* ------------------------------ Cuentas ------------------------------- */
.cuentas-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.cuenta-card {
  background: var(--panel); border: 1px solid var(--border);
  border-radius: 18px; padding: 20px; display: flex; flex-direction: column; gap: 14px;
}
.cuenta-card .cab { display: flex; align-items: center; gap: 12px; }
.cuenta-card .ico-grande {
  width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; flex-shrink: 0;
}
.cuenta-card .ico-grande svg { width: 22px; height: 22px; }
.cuenta-card .nom { font-size: 15px; font-weight: 600; }
.cuenta-card .han { font-size: 12.5px; color: var(--faint); }
.cuenta-card .cifras { display: flex; gap: 22px; }
.cuenta-card .cifras div span { display: block; font-size: 11px; color: var(--faint); }
.cuenta-card .cifras div strong { font-size: 17px; font-weight: 700; letter-spacing: -.02em; }
.estado-con { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: var(--muted); }
.estado-con .pt { width: 7px; height: 7px; border-radius: 999px; }
.estado-con .pt.si { background: var(--ok); box-shadow: 0 0 8px rgba(110,231,154,.5); }
.estado-con .pt.no { background: var(--ko); }
.estado-con .pt.parcial { background: var(--aviso); }
.btn {
  font-family: inherit; font-size: 13.5px; font-weight: 600; color: var(--text);
  border: 1px solid var(--border); background: var(--panel-2);
  border-radius: 11px; padding: 11px 16px; cursor: pointer; transition: .15s;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}
.btn:hover { border-color: rgba(255,255,255,.28); }
.btn.principal {
  border-color: transparent;
  background-image:
    linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.02)),
    linear-gradient(180deg, #1D1C1A, #141312), var(--metal);
  background-origin: border-box; background-clip: padding-box, padding-box, border-box;
}
.ico-yt { background: rgba(255,0,0,.14); color: #ff5b5b; }
.ico-ig { background: rgba(214,36,159,.14); color: #ff6ac1; }

.vacio { color: var(--faint); font-size: 13px; text-align: center; padding: 26px 0; }

/* ------------------------------ Responsive ---------------------------- */
@media (max-width: 1000px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  .sidebar { position: static; height: auto; flex-direction: row; align-items: center; flex-wrap: wrap; gap: 12px; padding: 14px 16px; }
  .sidebar .brand { flex: 1; }
  .nav { flex-direction: row; flex-wrap: wrap; }
  .sidebar-foot { margin-top: 0; }
  .content { padding: 20px 16px 44px; }
}
@media (max-width: 640px) {
  .topbar-tools { width: 100%; }
  .kpis { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
  .kpi .valor { font-size: 23px; }
  .panel { padding: 16px 15px 14px; border-radius: 15px; }
  .dos-columnas { grid-template-columns: 1fr; }
}

/* --------------------- Insights Report · añadidos ---------------------- */
.head-tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.item-top { text-decoration: none; color: inherit; }
.item-top .mini.sinfoto { display: grid; place-items: center; color: var(--faint); }
.item-top .mini.sinfoto svg { width: 17px; height: 17px; }

.cabecera-canal {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  background: var(--panel); border: 1px solid var(--border);
  border-radius: 16px; padding: 16px 20px;
}
.cabecera-canal .cc-txt { flex: 1; min-width: 0; }
.cabecera-canal .cc-nom { font-size: 15.5px; font-weight: 600; }
.cabecera-canal .cc-han { font-size: 12.5px; color: var(--faint); margin-top: 2px; }
.ico-grande { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; flex-shrink: 0; }
.ico-grande svg { width: 22px; height: 22px; }

/* Destacados */
.fila-out {
  display: grid; grid-template-columns: 74px 1fr auto auto; gap: 14px;
  align-items: center; padding: 10px; border-radius: 12px;
  text-decoration: none; color: inherit; transition: .15s;
}
.fila-out:hover { background: rgba(255,255,255,.04); }
.fila-out .mini { width: 74px; height: 44px; border-radius: 8px; object-fit: cover;
  border: 1px solid var(--border); background: #201E1B; display: block; }
.fila-out .mini.sinfoto { display: grid; place-items: center; color: var(--faint); }
.fila-out .txt { min-width: 0; }
.fila-out .tit { font-size: 13.5px; font-weight: 600; line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.fila-out .meta { font-size: 11.5px; color: var(--faint); margin-top: 3px; }
.fila-out .factor { text-align: right; font-size: 15px; font-weight: 700; letter-spacing: -.02em; white-space: nowrap; }
.fila-out .factor.alto { color: var(--ok); }
.fila-out .factor.bajo { color: var(--ko); }
.fila-out .factor small { display: block; font-size: 10px; color: var(--faint); font-weight: 500; letter-spacing: 0; }
.fila-out .cifra { text-align: right; font-size: 14px; font-weight: 600; white-space: nowrap; }
.fila-out .cifra small { display: block; font-size: 10px; color: var(--faint); font-weight: 500; }

.lecturas { list-style: none; display: flex; flex-direction: column; gap: 11px; }
.lecturas li { font-size: 13.5px; color: var(--muted); line-height: 1.5;
  padding-left: 15px; position: relative; }
.lecturas li::before { content: ""; position: absolute; left: 0; top: 8px;
  width: 5px; height: 5px; border-radius: 999px; background: var(--acento); }
.lecturas b { color: var(--text); font-weight: 600; }

/* Tabla con miniaturas */
.tabla .celda-tit a { color: inherit; text-decoration: none; }
.tabla .celda-tit a:hover { color: var(--metal-2); }
.mini-tabla { width: 54px; height: 34px; border-radius: 6px; flex-shrink: 0;
  background: #201E1B; border: 1px solid var(--border);
  display: grid; place-items: center; color: var(--faint); }
.mini-tabla svg { width: 15px; height: 15px; }
.ico-mini { width: 24px; height: 24px; border-radius: 7px; display: grid; place-items: center; }
.ico-mini svg { width: 14px; height: 14px; }

/* Miniaturas más grandes: son lo primero que se mira */
.item-top { grid-template-columns: 92px 1fr auto; }
.item-top .mini { width: 92px; height: 56px; }
.fila-out { grid-template-columns: 104px 1fr auto auto; }
.fila-out .mini { width: 104px; height: 62px; }
.tabla .celda-tit img, .mini-tabla { width: 74px; height: 44px; }
.aviso-demo b { color: var(--text); font-weight: 600; }


/* -------------------- Sección pendiente de conectar -------------------- */
.pendiente {
  display: flex; gap: 18px; align-items: flex-start;
  background: linear-gradient(180deg, rgba(255,255,255,.025), transparent);
  border: 1px dashed rgba(255,255,255,.16); border-radius: 14px; padding: 20px 22px;
}
.pendiente-ico {
  width: 42px; height: 42px; border-radius: 12px; flex-shrink: 0;
  display: grid; place-items: center;
  background: rgba(214,36,159,.14); color: #ff6ac1;
}
.pendiente-ico svg { width: 21px; height: 21px; }
.pendiente strong { font-size: 14.5px; font-weight: 600; display: block; margin-bottom: 6px; }
.pendiente p { font-size: 13px; color: var(--muted); line-height: 1.6; }
.pendiente .matiz { font-size: 12px; color: var(--faint); margin-top: 9px; }

/* El distintivo de plataforma dentro de la línea de datos */
.fila-out .meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.fila-out .meta .ico-mini { width: 18px; height: 18px; border-radius: 5px; }
.fila-out .meta .ico-mini svg { width: 11px; height: 11px; }

/* ======================= Gráficos nuevos ============================== */
.gr .franja:hover { fill: rgba(255,255,255,.045); }
.gr g:hover .franja { fill: rgba(255,255,255,.045); }
.gr .eje-tit { fill: var(--faint); font-size: 10.5px; font-family: inherit;
  font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }

/* Dispersión */
.gr .bola { fill: rgba(255,82,8,.5); stroke: #FF8A3D; stroke-width: 1.2; transition: .15s; cursor: pointer; }
.gr .bola:hover { fill: var(--acento); r: 8; }

/* Anillo */
.anillo-wrap { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; }
.anillo-wrap .gr { width: 176px; flex-shrink: 0; }
.gr .sector { transition: .15s; cursor: pointer; stroke: #0E0E0E; stroke-width: 2; }
.gr .sector:hover { filter: brightness(1.25); }
.anillo-num { fill: var(--text); font-size: 22px; font-weight: 700;
  font-family: inherit; letter-spacing: -.03em; }
.anillo-etq { fill: var(--faint); font-size: 10.5px; font-family: inherit;
  font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.leyenda { list-style: none; flex: 1; min-width: 150px; display: flex;
  flex-direction: column; gap: 9px; }
.leyenda li { display: flex; align-items: center; gap: 9px; font-size: 13px; }
.leyenda .pt { width: 9px; height: 9px; border-radius: 3px; flex-shrink: 0; }
.leyenda .ln { color: var(--muted); flex: 1; min-width: 0; }
.leyenda .lv { font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }

/* Mapa de calor */
.mapa-calor { display: flex; flex-direction: column; gap: 5px; overflow-x: auto; overflow-y: hidden; }
.mc-fila { display: flex; align-items: center; gap: 5px; }
.mc-etq { width: 62px; flex-shrink: 0; font-size: 11.5px; color: var(--faint); font-weight: 600; }
.mc-celda { flex: 1; min-width: 16px; height: 26px; border-radius: 5px;
  border: 1px solid rgba(255,255,255,.05); transition: .12s; cursor: pointer; }
.mc-celda:hover { border-color: rgba(255,255,255,.55); box-shadow: inset 0 0 0 1px rgba(255,255,255,.25); }
/* Nada de `transform: scale()` aquí: al crecer, la celda empujaba la rejilla
   y aparecían barras de desplazamiento donde no hacían falta. */
.mc-col { flex: 1; min-width: 16px; text-align: center; font-size: 10.5px;
  color: var(--faint); font-weight: 600; }
.mc-cab { margin-bottom: 2px; }

/* Embudo */
.embudo { display: flex; flex-direction: column; gap: 15px; }
.emb-cab { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
/* Cada paso del embudo: nombre, cifra y su barra. */
.emb-paso { margin-bottom: 14px; }
.emb-paso:last-child { margin-bottom: 0; }
.emb-nom { font-size: 13px; font-weight: 600; color: var(--muted); }
.emb-val { font-size: 15px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.emb-barra { height: 12px; border-radius: 999px; background: rgba(255,255,255,.05);
  border: 1px solid var(--border); overflow: hidden; }
.emb-relleno { height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, #FF5208, #FF8A3D); min-width: 3px; }
.emb-pie { font-size: 11.5px; color: var(--faint); margin-top: 5px; }

/* Demostración de reels de prueba */
.prueba-demo { margin-top: 18px; }
.prueba-tit { font-size: 11.5px; color: var(--faint); font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase; margin-bottom: 8px; }

/* Leyenda en horizontal, bajo un gráfico de líneas */
.leyenda-fila { flex-direction: row; flex-wrap: wrap; gap: 18px; margin-top: 10px; padding-left: 48px; }
.leyenda-fila li { font-size: 12.5px; }
.leyenda-fila .pt { border-radius: 999px; }
.leyenda-fila .ln { flex: none; }

/* El marcador de plataforma dentro de una miniatura vacía, a su tamaño */
.fila-out .mini.sinfoto svg { width: 20px; height: 20px; }

/* ------- La tabla de contenido necesita sitio para los títulos --------- */
.tabla { min-width: 1010px; }
.tabla th:first-child, .tabla td:first-child { width: 34%; min-width: 300px; }
.tabla .celda-tit a {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; line-height: 1.35;
}

/* En paneles a media anchura, las filas destacadas van más justas */
.dos-columnas .fila-out { grid-template-columns: 78px minmax(0, 1fr) auto auto; gap: 11px; }
.dos-columnas .fila-out .mini { width: 78px; height: 48px; }
.dos-columnas .fila-out .meta { font-size: 11px; }

/* ============================== Acceso ================================= */
.login { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.login-caja {
  width: 100%; max-width: 380px;
  background: var(--panel); border: 1px solid var(--border);
  border-radius: 20px; padding: 30px 28px 28px;
  display: flex; flex-direction: column; gap: 14px;
}
.login-caja .brand { margin-bottom: 6px; }
.login-caja h2 { font-size: 20px; letter-spacing: -.02em; }
.login-sub { font-size: 13.5px; color: var(--faint); margin-top: -8px; }
.campo { display: flex; flex-direction: column; gap: 6px; }
.campo span { font-size: 12px; color: var(--faint); font-weight: 600; }
.campo input {
  font-family: inherit; font-size: 14px; color: var(--text);
  background: var(--panel-2); border: 1px solid var(--border);
  border-radius: 11px; padding: 12px 14px; width: 100%;
}
.campo input:focus { outline: none; border-color: rgba(255,255,255,.3); }
.login-err { font-size: 13px; color: var(--ko); min-height: 18px; }
.btn.full { width: 100%; }
.btn:disabled { opacity: .55; cursor: default; }

/* El botón de refrescar gira mientras trae datos */
@keyframes gira { to { transform: rotate(360deg); } }
.foot-btn.girando svg { animation: gira .9s linear infinite; }

/* Aclaración de qué dato publica cada plataforma y cuál no */
.nota-fuente { font-size: 11.5px; color: var(--faint); line-height: 1.5;
  margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); }

/* ------------- Comparativa "top 10% frente al resto" ------------------- */
.tabla.comparativa { min-width: 0; }
.tabla.comparativa th:first-child, .tabla.comparativa td:first-child {
  width: auto; min-width: 0; color: var(--muted); font-size: 13px;
}
.tabla.comparativa td.destacado { color: var(--acento); font-weight: 700; }
.tabla.comparativa th { cursor: default; }
.tabla.comparativa th:hover { color: var(--faint); }

.percentiles { margin-top: 20px; }
.pct-fila { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 12px; }
.pct {
  background: var(--panel-2); border: 1px solid var(--border);
  border-radius: 12px; padding: 13px 14px;
  display: flex; flex-direction: column; gap: 3px;
}
.pct-num { font-size: 19px; font-weight: 700; letter-spacing: -.03em; }
.pct-etq { font-size: 11.5px; color: var(--faint); line-height: 1.4; }

/* ------------------------------ Cuentas -------------------------------- */
.av-canal {
  width: 46px; height: 46px; border-radius: 50%; object-fit: cover; flex-shrink: 0;
  background: #201E1B; border: 1px solid var(--border); display: block;
}
.av-caja { position: relative; overflow: hidden; display: block; }
.av-caja img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; border-radius: 50%;
}
.av-fondo { position: absolute; inset: 0; display: grid; place-items: center; color: var(--faint); }
.av-fondo svg { width: 45%; height: 45%; }
.cuenta-card .cab { align-items: center; }
.cuenta-card .cc-txt { min-width: 0; }
.cuenta-card .nom { font-size: 15px; font-weight: 600; line-height: 1.3; }
.cuenta-card .han {
  font-size: 12.5px; color: var(--faint); margin-top: 4px;
  display: flex; align-items: center; gap: 6px;
}
.cuenta-card .han .ico-mini { width: 18px; height: 18px; border-radius: 5px; }
.cuenta-card .han .ico-mini svg { width: 11px; height: 11px; }
.cuenta-card .acciones { display: flex; gap: 8px; flex-wrap: wrap; margin-top: auto; }
.estado-con .pt.ko { background: var(--ko); }

.btn.pequeno { font-size: 12.5px; padding: 8px 13px; border-radius: 9px; }
.btn.peligro { color: var(--ko); border-color: rgba(255,120,120,.28); }
.btn.peligro:hover { border-color: var(--ko); }

.alta-canal { display: flex; gap: 10px; flex-wrap: wrap; }
.buscador.ancho { flex: 1; min-width: 240px; }
.hallado {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  background: var(--panel-2); border: 1px solid var(--border);
  border-radius: 14px; padding: 14px 16px; margin-top: 14px;
}
.hallado .cc-txt { flex: 1; min-width: 140px; }
.hallado .nom { font-size: 14.5px; font-weight: 600; }
.hallado .han { font-size: 12.5px; color: var(--faint); margin-top: 3px; }

/* La cabecera de canal con su foto */
.cabecera-canal .av-canal { width: 44px; height: 44px; }

/* ---------------------------- Conectar cuentas -------------------------- */
.conectar-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.conectar-card {
  background: var(--panel-2); border: 1px solid var(--border); border-radius: 16px;
  padding: 20px; display: flex; flex-direction: column; gap: 13px; align-items: flex-start;
}
.conectar-card .nom { font-size: 15.5px; font-weight: 600; }
.conectar-txt { font-size: 13px; color: var(--muted); line-height: 1.55; margin-top: 6px; }
.conectar-card .btn { margin-top: auto; }

/* ------------------------------- Legal ---------------------------------- */
.legal { max-width: 720px; margin: 0 auto; padding: 48px 24px 80px; }
.legal-marca { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; color: inherit; margin-bottom: 34px; }
.legal-marca .logo { width: 34px; height: 34px; }
.legal-marca .logo img { width: 100%; height: 100%; object-fit: contain; display: block; }
.legal-marca strong { display: block; font-size: 15px; font-weight: 700; letter-spacing: -.02em; }
.legal-marca small { color: var(--faint); font-size: 11px; }
.legal h1 { font-size: clamp(26px, 4vw, 34px); letter-spacing: -.03em; }
.legal-fecha { color: var(--faint); font-size: 13px; margin-top: 8px; }
.legal h2 { font-size: 17px; margin-top: 34px; margin-bottom: 10px; }
.legal p { color: var(--muted); font-size: 14.5px; line-height: 1.7; margin-top: 12px; }
.legal ul { margin-top: 12px; padding-left: 20px; display: flex; flex-direction: column; gap: 9px; }
.legal li { color: var(--muted); font-size: 14.5px; line-height: 1.65; }
.legal strong { color: var(--text); font-weight: 600; }
.legal a { color: var(--acento); }
.legal-pie { margin-top: 44px; padding-top: 22px; border-top: 1px solid var(--border); }

/* ------------------------- Qué replicar y por qué ----------------------- */
.replicar {
  background: var(--panel-2); border: 1px solid var(--border);
  border-radius: 16px; padding: 16px;
}
.replicar + .replicar { margin-top: var(--hueco); }
.rep-cab { display: grid; grid-template-columns: 104px minmax(0, 1fr) auto; gap: 14px; align-items: center; }
.rep-cab .mini { width: 104px; height: 62px; border-radius: 9px; object-fit: cover;
  border: 1px solid var(--border); background: #201E1B; display: block; }
.rep-cab .mini.sinfoto { display: grid; place-items: center; color: var(--faint); }
.rep-cab .mini.sinfoto svg { width: 22px; height: 22px; }
.rep-cab .tit { font-size: 14.5px; font-weight: 600; line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.rep-cab .meta { font-size: 11.5px; color: var(--faint); margin-top: 5px;
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.rep-cab .meta .ico-mini { width: 18px; height: 18px; border-radius: 5px; }
.rep-cab .meta .ico-mini svg { width: 11px; height: 11px; }
.rep-cab .factor { text-align: right; font-size: 16px; font-weight: 700;
  letter-spacing: -.02em; white-space: nowrap; }
.rep-cab .factor.alto { color: var(--ok); }
.rep-cab .factor small { display: block; font-size: 10px; color: var(--faint); font-weight: 500; }

/* Las tres medidas de un outlier. Se enseñan siempre las tres, cumpla o no,
   porque saber que algo NO destaca en una de ellas es tan informativo como
   saber que sí: es lo que separa una casualidad de una señal. */
.senales { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.senal {
  font-size: 11px; font-weight: 600; padding: 4px 9px; border-radius: 999px;
  border: 1px solid var(--border); color: var(--faint); white-space: nowrap;
  cursor: help;
}
.senal b { font-weight: 700; margin-left: 3px; }
.senal.si { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 40%, transparent);
  background: color-mix(in srgb, var(--ok) 10%, transparent); }
.senal.no { opacity: .55; }
.senal.nd { opacity: .4; font-style: italic; }

/* Cuántas veces mayor es ese canal que el tuyo. Sin este dato, en la lista
   se ven igual un canal de 3.000 y uno de 90.000. */
.tamano { color: var(--muted); }
.tamano.cerca { color: var(--ok); font-weight: 600; }

.topes { margin-bottom: 12px; }

.rep-datos {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
  gap: 10px; margin-top: 16px; padding-top: 15px; border-top: 1px solid var(--border);
}
.rep-dato { display: flex; flex-direction: column; gap: 2px; }
.rep-num { font-size: 17px; font-weight: 700; letter-spacing: -.03em; }
.rep-etq { font-size: 11px; color: var(--muted); font-weight: 600; }
.rep-pista { font-size: 10.5px; color: var(--faint); line-height: 1.35; }

.rep-comentarios { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border); }
.comentario {
  display: flex; gap: 9px; align-items: baseline; flex-wrap: wrap;
  padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,.045); font-size: 13px;
}
.comentario:last-child { border-bottom: 0; }
.com-autor { color: var(--metal-2); font-weight: 600; flex-shrink: 0; }
.com-txt { color: var(--muted); line-height: 1.5; flex: 1; min-width: 160px; }
.com-likes { color: var(--faint); font-size: 11.5px; white-space: nowrap; }

@media (max-width: 640px) {
  .rep-cab { grid-template-columns: 78px minmax(0, 1fr); }
  .rep-cab .mini { width: 78px; height: 48px; }
  .rep-cab .factor { grid-column: 1 / -1; text-align: left; }
}

/* =========================== El menú ====================================
   Todo a la vista y agrupado bajo su rótulo, como en la referencia: nada de
   desplegables. El activo se marca con el color de la casa y un fondo muy
   suave, no con un relleno lleno.
   ===================================================================== */
.nav { display: flex; flex-direction: column; gap: 4px; }

.nav-grupo { display: flex; flex-direction: column; gap: 1px; }
.nav-grupo + .nav-grupo {
  margin-top: 16px; padding-top: 16px;
  border-top: 1px solid var(--border);
}

.nav-rotulo {
  font-size: 11.5px; color: var(--faint); font-weight: 500;
  padding: 0 10px 7px; letter-spacing: .01em;
}

.nav-item {
  display: flex; align-items: center; gap: 11px;
  width: 100%; text-align: left; cursor: pointer;
  background: none; border: 0; font-family: inherit;
  font-size: 13.5px; letter-spacing: .01em; color: var(--muted);
  padding: 8px 10px; border-radius: 8px; transition: .16s;
}
.nav-item .ni {
  width: 17px; height: 17px; flex-shrink: 0;
  fill: none; stroke: currentColor; stroke-width: 1.9; opacity: .75;
  transition: .16s;
}
.nav-item .nav-txt { flex: 1; min-width: 0; }
.nav-item:hover { background: rgba(255,255,255,.05); color: var(--text); }
.nav-item:hover .ni { opacity: 1; }

.nav-item.activo {
  background: rgba(255,82,8,.10); color: var(--acento-lit); font-weight: 600;
}
.nav-item.activo .ni { opacity: 1; stroke: var(--acento-lit); }

/* ========================= Botón y punto de cuentas ===================== */
.foot-btn.cuentas { position: relative; }
.pt-conectado {
  position: absolute; right: 5px; top: 5px;
  width: 7px; height: 7px; border-radius: 999px;
  border: 2px solid var(--panel);
}
/* Tres estados, no dos: verde todo bien, ámbar le falta algo, rojo hay que
   volver a conectar. Gris es que todavía no hay ninguna cuenta. */
.pt-conectado.si      { background: var(--ok); }
.pt-conectado.parcial { background: var(--aviso); }
.pt-conectado.no      { background: var(--ko); }
.pt-conectado.vacio   { background: var(--faint); }

/* ============================== Ventana ================================= */
.velo {
  position: fixed; inset: 0; z-index: 80;
  background: rgba(0,0,0,.72); backdrop-filter: blur(3px);
  display: grid; place-items: center; padding: 24px;
  overflow-y: auto;
}
.ventana {
  position: relative; width: 100%; max-width: 900px;
  background: var(--panel); border: 1px solid var(--border);
  border-radius: 20px; padding: 28px 28px 26px;
  max-height: calc(100vh - 48px); overflow-y: auto;
}
.ventana h2 { font-size: 20px; letter-spacing: -.02em; }
.ventana .sub { font-size: 13px; color: var(--faint); margin: 4px 0 16px; }
.ventana-sub { font-size: 12.5px; color: var(--faint); margin-top: 6px; }
.ventana-cuerpo { margin-top: 22px; }
.ventana-cerrar {
  position: absolute; top: 16px; right: 18px;
  background: none; border: 0; color: var(--faint);
  font-size: 26px; line-height: 1; cursor: pointer; padding: 4px 8px;
  border-radius: 8px;
}
.ventana-cerrar:hover { color: var(--text); background: rgba(255,255,255,.06); }

.cuentas-dos { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--hueco); }
.cuenta-lado {
  background: var(--panel-2); border: 1px solid var(--border);
  border-radius: 16px; padding: 20px;
  display: flex; flex-direction: column; gap: 11px; align-items: flex-start;
}
.cuenta-lado .av-canal.grande { width: 52px; height: 52px; }
.cuenta-lado .nom { font-size: 15.5px; font-weight: 600; }
.cuenta-lado .han { font-size: 12.5px; color: var(--faint); display: flex; align-items: center; gap: 6px; }
.cuenta-lado .han .ico-mini { width: 18px; height: 18px; border-radius: 5px; }
.cuenta-lado .han .ico-mini svg { width: 11px; height: 11px; }
.cuenta-lado .cifras { display: flex; gap: 20px; flex-wrap: wrap; }
.cuenta-lado .cifras span { display: block; font-size: 11px; color: var(--faint); }
.cuenta-lado .cifras strong { font-size: 17px; font-weight: 700; letter-spacing: -.02em; }
.cuenta-lado .acciones { margin-top: auto; padding-top: 6px; }

/* ==================== Temas vigilados y outliers ajenos ================= */
.temas { display: flex; flex-direction: column; gap: 10px; }
.tema {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap;
  background: var(--panel-2); border: 1px solid var(--border);
  border-radius: 12px; padding: 13px 15px;
}
.tema-txt strong { font-size: 14px; font-weight: 600; display: block; }
.tema-txt span { font-size: 11.5px; color: var(--faint); }
.outlier-desc {
  font-size: 12.5px; color: var(--faint); line-height: 1.55;
  margin-top: 13px; padding-top: 12px; border-top: 1px solid var(--border);
  /* Las descripciones de YouTube vienen llenas de enlaces largos y sin
     espacios: sin esto empujan la página entera a lo ancho. */
  overflow-wrap: anywhere; }
.replicar .acciones { margin-top: 14px; display: flex; gap: 8px; flex-wrap: wrap; }

/* ------------------------ Marcar un lead magnet ------------------------- */
.fila-out.etiquetable { grid-template-columns: 104px minmax(0,1fr) auto auto auto; }
.marca {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 11.5px; color: var(--muted); cursor: pointer;
  white-space: nowrap; user-select: none;
}
.marca input { width: 16px; height: 16px; accent-color: var(--acento); cursor: pointer; }

/* La miniatura es un enlace: con veinte reels parecidos, abrirlo es la única
   forma de salir de dudas sobre cuál es cuál. */
.mini-enlace {
  position: relative; display: block; width: 104px; height: 62px;
  border-radius: 9px; overflow: hidden; flex-shrink: 0;
  background: var(--panel-2); border: 1px solid var(--border);
}
.mini-enlace img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mini-enlace .sinfoto { width: 100%; height: 100%; display: grid; place-items: center; color: var(--faint); }
.mini-enlace .sinfoto svg { width: 20px; height: 20px; }
.mini-enlace .ver {
  position: absolute; inset: 0; display: grid; place-items: center;
  background: rgba(0,0,0,.55); color: #fff; font-size: 11px; font-weight: 700;
  opacity: 0; transition: .15s;
}
.mini-enlace:hover .ver { opacity: 1; }

/* Interruptores en vez de casillas: la casilla con borde naranja quedaba
   dura y encima no se distinguía de las de un formulario cualquiera. */
.marcas { display: flex; flex-direction: column; gap: 7px; }
.interruptor {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  font-size: 11.5px; color: var(--faint); white-space: nowrap; user-select: none;
}
.interruptor input { position: absolute; opacity: 0; width: 0; height: 0; }
.palanca {
  width: 30px; height: 17px; border-radius: 999px; flex-shrink: 0;
  background: rgba(255,255,255,.13); position: relative; transition: .16s;
}
.palanca::after {
  content: ""; position: absolute; top: 2.5px; left: 2.5px;
  width: 12px; height: 12px; border-radius: 50%; background: var(--muted); transition: .16s;
}
.interruptor input:checked + .palanca { background: var(--acento); }
.interruptor input:checked + .palanca::after { transform: translateX(13px); background: #fff; }
.interruptor input:checked ~ .rot { color: var(--text); font-weight: 600; }
.interruptor input:focus-visible + .palanca { outline: 2px solid var(--acento-lit); outline-offset: 2px; }

/* Una fila marcada como lead magnet se ve igual que las demás: ya lo dice su
   interruptor encendido. Ni fondo naranja ni barra al lado. */
.etiqueta-tipo.prueba { color: var(--muted); }

/* Buscador y filtros de la lista */
.filtros-lead { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-bottom: 16px; }
.filtro-grupo { display: flex; flex-direction: column; gap: 6px; }
.filtro-grupo .tema-etq { font-size: 10.5px; }
/* Botones que sirven para ELEGIR (ordenar, filtrar, el tope de suscriptores):
   el elegido va plano, sin el borde metálico del botón principal ni naranja.
   Ese borde está pensado para un botón de acción suelto; repetido en una fila
   de siete queda recargado y encima cuesta ver cuál está marcado. */
.chips-filtro, .orden-trial, .topes { display: flex; flex-wrap: wrap; gap: 6px; }
.orden-trial, .topes { align-items: center; }
.chips-filtro .btn.principal,
.orden-trial .btn.principal,
.topes .btn.principal {
  background-image: none; background: rgba(255,255,255,.09);
  border: 1px solid rgba(255,255,255,.24); color: var(--text); font-weight: 600;
}
.cats-cuerpo {
  flex-basis: 100%; padding: 12px; display: flex; flex-direction: column; gap: 10px;
  border: 1px solid var(--border); border-radius: 11px; background: var(--panel-2);
}
.cats-lista { display: flex; flex-wrap: wrap; gap: 6px; }
.cats-lista .chip { display: inline-flex; align-items: center; gap: 5px; }
.cats-lista .quita {
  background: none; border: 0; color: var(--faint); cursor: pointer;
  font-size: 15px; line-height: 1; padding: 0 2px; border-radius: 4px;
}
.cats-lista .quita:hover { color: var(--ko); }
.cats-alta { display: flex; gap: 8px; flex-wrap: wrap; }
.cats-alta .buscador { flex: 1; min-width: 180px; }

@media (max-width: 720px) {
  .fila-out.etiquetable { grid-template-columns: 78px minmax(0,1fr) auto; }
  .fila-out.etiquetable .marcas { grid-column: 1 / -1; flex-direction: row; gap: 14px; }
  .mini-enlace { width: 78px; height: 48px; }
}

/* Los cajones de ajustes: todo lo que decide la búsqueda en un bloque, y
   cada cosa se abre sólo cuando se va a tocar. */
.cajones { display: flex; flex-direction: column; gap: 8px; }
.cajon { border: 1px solid var(--border); border-radius: 11px; overflow: hidden;
         background: var(--panel-2); }
.cajon.abierto { border-color: rgba(255,255,255,.2); }
.cajon-cab {
  width: 100%; display: flex; align-items: center; gap: 12px;
  background: none; border: 0; padding: 12px 14px; cursor: pointer;
  font-family: inherit; text-align: left; color: var(--text); transition: .15s;
}
.cajon-cab:hover { background: rgba(255,255,255,.03); }
.cajon-rot { font-size: 13px; font-weight: 600; flex-shrink: 0; }
.cajon-res { font-size: 11.5px; color: var(--faint); flex: 1; min-width: 0;
             overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cajon-chev { font-size: 10px; color: var(--faint); }
.cajon-cuerpo { padding: 0 14px 14px; display: flex; flex-direction: column; gap: 10px; }
.ajustes-pie { display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
               margin-top: 14px; }
.ajustes-pie .matiz { flex: 1; min-width: 200px; }
.pest-n {
  display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 999px;
  background: rgba(255,255,255,.12); font-size: 10.5px; font-weight: 700;
}

/* El aviso de cuenta desconectada. */
.aviso-lista { list-style: none; padding: 0; margin: 16px 0; display: flex;
               flex-direction: column; gap: 8px; }
.aviso-lista li {
  display: flex; align-items: center; gap: 10px; font-size: 13px;
  padding: 10px 12px; border: 1px solid var(--border); border-radius: 11px;
  background: var(--panel-2);
}
.aviso-lista li .matiz { margin-left: auto; font-size: 11.5px; }
#veloAviso .acciones { display: flex; gap: 8px; margin-top: 18px; }

/* ========================= Sequence Insights ============================ */
/* Dos pestañas y ya: dashboard y calendario. Con dos apartados, un menú
   propio sobraría. */
.pestanas { display: flex; gap: 6px; margin-bottom: var(--hueco); }
.pest {
  background: var(--panel); border: 1px solid var(--border); color: var(--muted);
  font-family: inherit; font-size: 13.5px; font-weight: 600;
  padding: 9px 18px; border-radius: 11px; cursor: pointer; transition: .15s;
}
.pest:hover { color: var(--text); border-color: rgba(255,255,255,.2); }
.pest.activa { color: var(--text); background: rgba(255,255,255,.08);
               border-color: rgba(255,255,255,.22); }

.secuencia { border: 1px solid var(--border); border-radius: 13px;
             background: var(--panel-2); transition: .15s; }
.secuencia + .secuencia { margin-top: 10px; }
.secuencia.abierta { border-color: rgba(255,255,255,.2); }
.sec-cab { display: grid; grid-template-columns: minmax(0,1fr) auto auto;
           gap: 16px; align-items: center; padding: 13px; cursor: pointer; }
.sec-cab:hover { background: rgba(255,255,255,.03); }
.sec-txt .tit { font-size: 13.5px; font-weight: 600; }
.sec-txt .meta { font-size: 11.5px; color: var(--faint); margin-top: 3px; }
.sec-num { text-align: right; }
.sec-num strong { display: block; font-size: 18px; font-weight: 700; letter-spacing: -.03em; }
.sec-num strong.bien { color: var(--ok); }
.sec-num strong.flojo { color: var(--faint); }
.sec-num small { display: block; font-size: 10.5px; color: var(--faint); }

/* Las capturas de cada historia, en fila y donde antes había un gráfico de
   barras. Una barra dice que la gente se cae en la tercera; la foto dice qué
   había en la tercera, que es lo que hace falta para arreglarlo. */
.tira { display: flex; gap: 5px; align-items: flex-end; }
.tira-item {
  flex: 0 0 auto; width: 38px; background: none; border: 0; padding: 0;
  cursor: pointer; font-family: inherit; text-align: center;
}
.tira-foto {
  position: relative; display: block; width: 38px; height: 62px;
  border-radius: 7px; overflow: hidden; background: var(--panel);
  border: 1px solid var(--border); transition: .15s;
}
.tira-item:hover .tira-foto { border-color: rgba(255,255,255,.4); transform: translateY(-2px); }
.tira-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tira-foto .sinfoto {
  width: 100%; height: 100%; display: grid; place-items: center;
  color: var(--faint); opacity: .35;
}
.tira-foto .sinfoto svg { width: 15px; height: 15px; }
.tira-foto .resto {
  width: 100%; height: 100%; display: grid; place-items: center;
  font-size: 12px; font-weight: 700; color: var(--muted);
}
.tira-foto .n {
  position: absolute; top: 3px; left: 3px; min-width: 14px; height: 14px;
  border-radius: 4px; background: rgba(0,0,0,.7); color: #fff;
  font-size: 9px; font-weight: 700; display: grid; place-items: center;
}
.tira-etq { display: block; font-size: 9.5px; color: var(--faint); margin-top: 4px; }
/* Donde se cae un cuarto de la gente o más, se marca subiendo el contraste,
   no con color: en una fila de miniaturas el naranja se come la imagen. */
.tira-item.cae .tira-etq { color: var(--text); font-weight: 700; }
.tira-item.cae .tira-foto { border-color: rgba(255,255,255,.45); }

/* La historia a tamaño grande. */
body.con-visor { overflow: hidden; }
.visor {
  position: fixed; inset: 0; z-index: 200; display: grid; place-items: center;
  background: rgba(0,0,0,.82); backdrop-filter: blur(4px); padding: 24px;
}
.visor-caja {
  display: grid; grid-template-columns: auto minmax(0, 320px); gap: 22px;
  align-items: center; max-height: 100%;
}
.visor-foto {
  width: min(46vh, 340px); aspect-ratio: 9 / 16; border-radius: 14px;
  overflow: hidden; background: var(--panel); border: 1px solid var(--border);
}
.visor-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.visor-foto .sinfoto {
  width: 100%; height: 100%; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 10px; padding: 24px;
  text-align: center; color: var(--faint);
}
.visor-foto .sinfoto svg { width: 30px; height: 30px; opacity: .4; }
.visor-foto .sinfoto p { font-size: 13px; margin: 0; }
.visor-datos { color: var(--text); }
.visor-tit { font-size: 17px; font-weight: 700; letter-spacing: -.02em; }
.visor-meta { font-size: 12.5px; color: var(--faint); margin-top: 3px; }
.visor-datos .rep-datos { border-top: 0; padding-top: 6px; margin: 16px 0; overflow: visible; }
.visor-cerrar, .visor-flecha {
  position: absolute; background: rgba(255,255,255,.08); border: 1px solid var(--border);
  color: var(--text); cursor: pointer; border-radius: 50%;
  width: 40px; height: 40px; display: grid; place-items: center; font-size: 22px;
  line-height: 1; font-family: inherit; transition: .15s;
}
.visor-cerrar:hover, .visor-flecha:hover { background: rgba(255,255,255,.18); }
.visor-cerrar { top: 20px; right: 22px; }
.visor-flecha.izq { left: 22px; top: 50%; transform: translateY(-50%); }
.visor-flecha.der { right: 22px; top: 50%; transform: translateY(-50%); }
@media (max-width: 720px) {
  .visor-caja { grid-template-columns: 1fr; gap: 14px; justify-items: center; }
  .visor-foto { width: min(38vh, 220px); }
  .visor-datos { text-align: center; }
}

.sec-detalle { padding: 0 13px 14px; border-top: 1px solid var(--border); }
.sec-detalle .rep-datos { margin-top: 14px; border-top: 0; padding-top: 0; }
.sec-detalle > .matiz { margin: 14px 0; line-height: 1.55; }
.tabla td.ko { color: var(--ko); }
/* Los enlaces de dentro de una tabla, con el color de la casa: el azul del
   navegador canta sobre el fondo oscuro. */
.tabla td a { color: var(--muted); text-decoration: none; font-weight: 600; }
.tabla td a:hover { color: var(--acento-lit); text-decoration: underline; }

/* Calendario */
.cal-cab { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.cal-cab strong { font-size: 14.5px; flex: 1; }
.cal-cab .btn { min-width: 34px; }
.cal-dias { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px;
            margin-bottom: 6px; }
.cal-dias span { text-align: center; font-size: 10.5px; font-weight: 700;
                 color: var(--faint); text-transform: uppercase; letter-spacing: .06em; }
.cal-rejilla { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.cal-celda { min-height: 72px; border: 1px solid var(--border); border-radius: 10px;
             padding: 7px; display: flex; flex-direction: column; gap: 3px; }
.cal-celda.vacia { border-color: transparent; }
.cal-celda.con { cursor: pointer; background: var(--panel-2); }
.cal-celda.con:hover { border-color: rgba(255,255,255,.22); }
.cal-celda.hoy { border-color: rgba(255,255,255,.32); }
.cal-num { font-size: 11.5px; color: var(--faint); font-weight: 600; }
.cal-marca { font-size: 10.5px; font-weight: 700; color: var(--muted); }
.cal-marca.bien { color: var(--ok); }
.cal-marca.flojo { color: var(--faint); }
.cal-hist { font-size: 10px; color: var(--faint); }
.cal-detalle { margin-top: var(--hueco); }
@media (max-width: 720px) {
  .sec-cab { grid-template-columns: minmax(0,1fr) auto; }
  .tira { grid-column: 1 / -1; flex-wrap: wrap; }
  .cal-celda { min-height: 56px; padding: 5px; }
  .cal-hist { display: none; }
}

/* El aviso de cuándo se buscó por última vez, con su botón. */
.refresco { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.refresco-txt { flex: 1; min-width: 220px; font-size: 13px; }
.refresco-txt strong { display: block; }
.refresco-txt .matiz { display: block; margin-top: 3px; }

/* ============================ Uno de diez =============================== */
.puesto {
  display: inline-block; font-size: 10.5px; font-weight: 700;
  padding: 2px 7px; border-radius: 999px; white-space: nowrap;
  border: 1px solid var(--border); color: var(--muted); cursor: help;
}
.puesto.bien { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 40%, transparent);
               background: color-mix(in srgb, var(--ok) 10%, transparent); }
.puesto.flojo { color: var(--faint); }
.puesto.midiendo { font-style: italic; font-weight: 600; opacity: .7; }
.ranking + .ranking { margin-top: 18px; }
.ranking-tit { font-size: 12px; font-weight: 700; color: var(--muted);
               text-transform: uppercase; letter-spacing: .06em; margin: 0 0 8px; }
.tit-celda a { color: inherit; text-decoration: none; }
.tit-celda a:hover { color: var(--acento-lit); text-decoration: underline; }

/* El interruptor de trial reel dentro de cada tarjeta de la rejilla. */
.tarjeta-vertical { display: flex; flex-direction: column; }
.tarjeta-vertical .tv-tit { display: block; color: inherit; text-decoration: none; }
.tarjeta-vertical .tv-tit:hover { color: var(--acento-lit); }
.tarjeta-vertical .interruptor { margin-top: 8px; }
.tarjeta-vertical.es-trial { border-color: rgba(255,255,255,.2); }

/* ============================= Trial reels ============================== */
.orden-trial { margin-bottom: 14px; }
.trials { display: flex; flex-direction: column; gap: 10px; }
.trial {
  border: 1px solid var(--border); border-radius: 13px; padding: 12px;
  background: var(--panel-2); transition: .15s;
}
.trial.abierto { border-color: rgba(255,255,255,.22); background: var(--panel); }
.trial-cab { display: grid; grid-template-columns: 68px minmax(0,1fr) auto; gap: 12px; align-items: center; }
.trial-mini {
  position: relative; display: block; width: 68px; height: 92px;
  border-radius: 9px; overflow: hidden; background: var(--panel);
  border: 1px solid var(--border);
}
.trial-mini img { width: 100%; height: 100%; object-fit: cover; display: block; }
.trial-mini .sinfoto { width: 100%; height: 100%; display: grid; place-items: center; color: var(--faint); }
.trial-mini .ver {
  position: absolute; inset: 0; display: grid; place-items: center;
  background: rgba(0,0,0,.55); color: #fff; font-size: 11px; font-weight: 700;
  opacity: 0; transition: .15s;
}
.trial-mini:hover .ver { opacity: 1; }
.trial-txt .tit { font-size: 13.5px; font-weight: 600; line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.trial-txt .meta { font-size: 11.5px; color: var(--faint); margin-top: 5px;
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.trial-num { text-align: right; }
.trial-num strong { display: block; font-size: 18px; font-weight: 700; letter-spacing: -.03em; }
.trial-num small { display: block; font-size: 10.5px; color: var(--faint); }
.trial-num .sobre { display: inline-block; margin-top: 4px; font-size: 11px; font-weight: 700; }
.trial-num .sobre.bien { color: var(--ok); }
.trial-num .sobre.flojo { color: var(--faint); }
.trial-datos {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(84px, 1fr));
  gap: 8px; margin: 12px 0; padding-top: 11px; border-top: 1px solid var(--border);
}
.trial-datos .td { display: flex; flex-direction: column; gap: 1px; }
.trial-datos .tn { font-size: 15px; font-weight: 700; letter-spacing: -.02em; }
.trial-datos .te { font-size: 10.5px; color: var(--muted); font-weight: 600; }
.trial-ideas {
  margin-top: 12px; display: flex; flex-direction: column;
  border-top: 1px solid var(--border); padding-top: 4px;
}
.trial-ideas .idea {
  margin: 0; padding: 11px 0 11px 20px; position: relative;
  font-size: 12.5px; line-height: 1.55; color: var(--muted);
}
.trial-ideas .idea + .idea { border-top: 1px solid rgba(255,255,255,.05); }
/* Un punto discreto en vez de una barra de color: marca el elemento de una
   lista sin robarle la atención al texto, que es lo que hay que leer. */
.trial-ideas .idea::before {
  content: ""; position: absolute; left: 4px; top: 18px;
  width: 4px; height: 4px; border-radius: 50%; background: var(--faint);
}
@media (max-width: 640px) {
  .trial-cab { grid-template-columns: 56px minmax(0,1fr); }
  .trial-mini { width: 56px; height: 76px; }
  .trial-num { grid-column: 1 / -1; text-align: left; }
}

/* ================= Selector de perfil (sólo administrador) =============== */
/* Lo del administrador: el botón de PDF y el selector de perfil, pegados y
   empujados al fondo, justo encima de los iconos.
   Quien empuja al fondo es el bloque de fuera, que está siempre; si empujara
   el del administrador, a un cliente normal se le quedaría flotando arriba. */
.lateral-fuera { margin-top: auto; padding-top: 14px; display: flex;
                 flex-direction: column; gap: 8px; }
/* Los tres botones —Sequence Builder, Generar PDF y el perfil— son la misma
   familia: se separan por 8px entre sí, no por el hueco de 18px que la barra
   pone entre sus bloques. De ahí el margen negativo. */
.lateral-admin { display: flex; flex-direction: column; gap: 8px;
                 margin-top: -10px; }
.selector-perfil { position: relative; }
.perfil-btn {
  display: flex; align-items: center; gap: 10px; width: 100%;
  background: var(--panel-2); border: 1px solid var(--border);
  border-radius: 11px; padding: 9px 11px; cursor: pointer;
  font-family: inherit; text-align: left; transition: .15s;
}
.perfil-btn:hover { border-color: rgba(255,255,255,.2); }
.perfil-ini {
  width: 28px; height: 28px; border-radius: 7px; flex-shrink: 0;
  display: grid; place-items: center;
  font-size: 12.5px; font-weight: 700; color: #17150F;
  background-image: linear-gradient(180deg, #EFECE8, #A9A29A);
}
.perfil-txt { flex: 1; min-width: 0; }
.perfil-txt strong {
  display: block; font-size: 12.5px; font-weight: 600; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.perfil-txt small { display: block; font-size: 10.5px; color: var(--faint); margin-top: 1px; }
.perfil-btn .chev.abajo { width: 14px; height: 14px; opacity: .5; }

.perfil-lista {
  position: absolute; left: 0; right: 0; bottom: calc(100% + 6px); z-index: 30;
  background: #1C1B19; border: 1px solid rgba(255,255,255,.14);
  border-radius: 12px; padding: 5px; display: flex; flex-direction: column; gap: 2px;
  box-shadow: 0 16px 40px rgba(0,0,0,.6);
  max-height: 300px; overflow-y: auto;
}
.perfil-op {
  background: none; border: 0; text-align: left; cursor: pointer;
  font-family: inherit; font-size: 12.5px; color: var(--muted);
  padding: 8px 10px; border-radius: 8px; transition: .13s;
}
.perfil-op small { display: block; font-size: 10.5px; color: var(--faint); margin-top: 2px; }
.perfil-op:hover { background: rgba(255,255,255,.06); color: var(--text); }
.perfil-op.activo { background: rgba(255,82,8,.12); color: var(--acento); font-weight: 600; }
.perfil-op.activo small { color: var(--acento); opacity: .7; }

/* El pie deja de empujar: ahora quien empuja es el selector. */
.sidebar-foot { margin-top: 0 !important; padding-top: 12px; }
/* Si no hay nada de administrador, los iconos suben ellos solos. */
.lateral-admin:not(:has(> :not(.hidden))) { padding-top: 0; }

/* El icono del PDF no lleva inicial, lleva una flecha de descarga. */
.perfil-ini.pdf { background-image: none; background: var(--acento-soft);
                  color: var(--acento-lit); }
.perfil-ini.pdf svg { width: 16px; height: 16px; }

/* Las herramientas de fuera van en gris, no en el color de la casa: no son
   una sección del panel y no deben competir con el menú por la mirada. */
a.perfil-btn { text-decoration: none; }
.perfil-ini.fuera { background-image: none; background: rgba(255,255,255,.07);
                    color: var(--muted); }
.perfil-ini.fuera svg { width: 16px; height: 16px; }
a.perfil-btn:hover .perfil-ini.fuera { color: var(--text); }

/* El mapa de calor de día × hora necesita respirar: son 24 columnas y
   con la altura por defecto los cuadros salían casi cuadrados de 8px. */
.calor-grande .mc-celda { height: 30px; }
.calor-grande .mc-fila  { gap: 3px; }
.calor-grande .mapa-calor { gap: 3px; }

/* ---- Lead magnets: lo que marca la persona ----------------------------- */
.lead-campos { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.mini-select, .mini-input {
  background: var(--bg-2); color: var(--text); font: inherit; font-size: 12.5px;
  border: 1px solid var(--border); border-radius: 8px; padding: 5px 9px;
}
.mini-input { min-width: 130px; }
.mini-select:focus, .mini-input:focus { outline: none; border-color: rgba(255,255,255,.32); }
.fallo { outline: 2px solid var(--ko); }

/* ---- Rejilla vertical de Instagram ------------------------------------- */
/* Cinco por fila en vez de tres: son reels, se reconocen por la miniatura y
   caben más de un vistazo. */
.rejilla-vertical {
  display: grid; gap: 12px;
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
@media (max-width: 1400px) { .rejilla-vertical { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 1100px) { .rejilla-vertical { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px)  { .rejilla-vertical { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px)  { .rejilla-vertical { grid-template-columns: 1fr; } }

.tarjeta-vertical {
  display: flex; flex-direction: column; text-decoration: none; color: inherit;
  background: var(--panel-2); border: 1px solid var(--border);
  border-radius: 14px; overflow: hidden; transition: border-color .15s, transform .15s;
}
.tarjeta-vertical:hover { border-color: rgba(255,255,255,.24); transform: translateY(-2px); }

/* 9:16, que es como se ve el reel de verdad. */
.tv-foto { position: relative; aspect-ratio: 9 / 16; background: var(--bg-2); }
.tv-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tv-foto .tv-ico {
  position: absolute; top: 9px; left: 9px; width: 18px; height: 18px;
  color: #fff; opacity: .9; filter: drop-shadow(0 1px 3px rgba(0,0,0,.6));
}
.tv-foto .tv-ico svg { width: 100%; height: 100%; }
.tv-vistas {
  position: absolute; bottom: 9px; left: 9px; font-size: 12.5px; font-weight: 700;
  color: #fff; text-shadow: 0 1px 4px rgba(0,0,0,.75);
}
/* Sin foto no dejamos un hueco negro: se marca y ya. */
.tv-foto.sinfoto { background: repeating-linear-gradient(45deg,
  var(--bg-2), var(--bg-2) 8px, var(--panel) 8px, var(--panel) 16px); }

.tv-txt { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 4px; }
.tv-tit {
  font-size: 13px; font-weight: 600; line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.tv-meta { font-size: 11.5px; color: var(--faint); }
.tv-cifras {
  display: flex; gap: 12px; margin-top: 4px;
  font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums;
}
.ver-mas { display: flex; justify-content: center; margin-top: 16px; }
.ver-mas .btn span { color: var(--faint); font-weight: 400; margin-left: 6px; }

/* ---- Demografía: barras apiladas por edad ------------------------------ */
.demo { display: flex; flex-direction: column; gap: 10px; }
.demo-fila { display: flex; align-items: center; gap: 12px; }
.demo-edad { width: 58px; flex-shrink: 0; font-size: 12.5px; color: var(--faint); font-weight: 600; }
.demo-barras { flex: 1; display: flex; gap: 2px; height: 20px; align-items: stretch; min-width: 0; }
.demo-barra { border-radius: 4px; min-width: 2px; transition: filter .15s; }
.demo-barra:hover { filter: brightness(1.25); }
.demo-val { width: 46px; text-align: right; font-size: 12.5px;
            font-variant-numeric: tabular-nums; color: var(--muted); }
.leyenda { display: flex; gap: 16px; margin-top: 14px; font-size: 12px; color: var(--muted); }
.leyenda span { display: flex; align-items: center; gap: 6px; }
.leyenda i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }

/* ---- Alta de un tema de competencia ------------------------------------ */
.tema-alta { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; }
.buscador.area { min-height: 96px; resize: vertical; font-family: inherit; line-height: 1.5; }
.tema-idiomas { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; }
.tema-etq { font-size: 12.5px; color: var(--faint); font-weight: 600; margin-right: 2px; }
.tema-palabras { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 7px; }
.chip {
  font-size: 11.5px; padding: 3px 9px; border-radius: 999px;
  background: rgba(255,255,255,.06); color: var(--muted);
  border: 1px solid var(--border);
}

/* ========================== INFORME EN PDF ==============================
 *  El informe se ve primero en pantalla, en claro y con forma de folio, y
 *  desde ahí se imprime o se guarda como PDF. Los estilos son los mismos en
 *  los dos sitios: lo que ves es exactamente lo que sale.
 * ====================================================================== */
#informe { display: none; }
body.viendo-informe #informe {
  display: block; position: fixed; inset: 0; z-index: 90;
  overflow: auto; background: #4a4744; padding: 28px 0 90px;
}
body.viendo-informe .content, body.viendo-informe .sidebar { display: none; }

.informe-barra {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 91;
  display: flex; gap: 10px; justify-content: center; align-items: center;
  padding: 14px; background: var(--panel); border-top: 1px solid var(--border);
}
.informe-barra .aviso { color: var(--faint); font-size: 12.5px; margin-right: 6px; }

.rangos-informe { display: flex; flex-direction: column; gap: 8px; }
.rangos-informe .btn.ancho {
  width: 100%; justify-content: flex-start; text-align: left;
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 12px 14px;
}
.rangos-informe .btn span { font-size: 11.5px; color: var(--faint); font-weight: 400; }
.fechas-informe { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
.fechas-informe label { display: flex; flex-direction: column; gap: 5px;
  font-size: 12px; color: var(--faint); }
.fechas-informe input {
  background: var(--bg-2); color: var(--text); font: inherit; font-size: 13px;
  border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px;
  color-scheme: dark;
}
.ventana.estrecha { max-width: 460px; }
.cargando-informe { padding: 60px; text-align: center; color: #fff; }

/* ---------------- El papel: igual en pantalla y en la impresora --------- */
#informe {
  --tinta: #16150F; --suave: #6B675F; --linea: #E4E0D8;
  --naranja: #FF5208; --papel: #fff; --nota: #F7F5F1;
  color: var(--tinta);
}

.hoja {
  position: relative; box-sizing: border-box; background: var(--papel);
  width: 210mm; min-height: 297mm; padding: 18mm 16mm 20mm;
  display: flex; flex-direction: column;
  margin: 0 auto 22px; box-shadow: 0 10px 30px rgba(0,0,0,.35);
}
.hoja-pie {
  position: absolute; left: 16mm; right: 16mm; bottom: 10mm;
  font-size: 8.5pt; color: var(--suave);
  border-top: 1px solid var(--linea); padding-top: 5px;
}

/* ---- Portada ---- */
.portada { justify-content: space-between; background: var(--tinta); color: #fff; }
.portada-marca { font-size: 11pt; font-weight: 700; }
.portada-marca span { display: block; font-size: 8pt; font-weight: 400; opacity: .6; }
.portada-centro { margin: auto 0; }
.portada-fotos { display: flex; gap: 10px; margin-bottom: 18px; }
.portada h1 { font-size: 30pt; line-height: 1.1; margin: 0 0 8px; }
.portada-periodo { font-size: 13pt; color: var(--naranja); font-weight: 600; margin: 0 0 14px; }
.portada-cifra { font-size: 11pt; opacity: .75; margin: 0; }
.portada-pie { font-size: 9pt; opacity: .55; }
.portada .hoja-pie { display: none; }

/* ---- Títulos ---- */
.tit-hoja { font-size: 19pt; margin: 0 0 16px; }
.bloque-inf { margin-bottom: 14px; break-inside: avoid; }
.bloque-inf.separa { margin-top: 22px; }
.bloque-inf h3 { font-size: 11pt; margin: 0 0 7px; }
/* La red, en pequeño al lado del título: en un informe con dos plataformas
   hay que poder ver de un vistazo de cuál habla cada bloque. */
.bloque-inf h3 i {
  font-style: normal; font-size: 7.5pt; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: var(--suave); margin-left: 7px;
  border: 1px solid var(--linea); border-radius: 99px; padding: 1px 7px;
  vertical-align: 2px;
}
.nota-inf { font-size: 9pt; color: var(--suave); margin: 0 0 7px; }

/* ---- KPIs ---- */
.kpis-inf { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.kpis-inf.tres { grid-template-columns: repeat(3, 1fr); }
.kpi-inf {
  border: 1px solid var(--linea); border-radius: 8px; padding: 11px 12px;
  display: flex; flex-direction: column; gap: 2px; break-inside: avoid;
}
.kpi-inf .etq { font-size: 8pt; color: var(--suave); text-transform: uppercase;
                letter-spacing: .04em; font-weight: 600; }
.kpi-inf .val { font-size: 21pt; font-weight: 700; line-height: 1.1; margin-top: 2px; }
/* La red va en pequeño junto al título: sólo Instagram da visitas al
   perfil y clics, y sin decirlo parecería que es de todo. */
.kpi-inf .etq i { font-style: normal; opacity: .65; font-weight: 500; }
.kpi-inf .delta { font-size: 8.5pt; font-weight: 700; }
.kpi-inf .delta.sube { color: #157F4A; }
.kpi-inf .delta.baja { color: #B23A3A; }

/* ---- Piezas ---- */
.rejilla-inf { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pieza-inf {
  display: flex; gap: 10px; border: 1px solid var(--linea);
  border-radius: 8px; padding: 9px; break-inside: avoid;
}
.pieza-inf img, .pieza-inf .sinfoto {
  width: 68px; height: 68px; object-fit: cover; border-radius: 6px;
  flex-shrink: 0; background: var(--nota);
}
.pieza-txt { min-width: 0; }
.pieza-tit { font-size: 9.5pt; font-weight: 600; line-height: 1.3; }
.pieza-meta { font-size: 8pt; color: var(--suave); margin: 2px 0 4px; }
.pieza-datos { display: flex; flex-wrap: wrap; gap: 3px 10px; font-size: 8pt; color: var(--suave); }
.pieza-datos b { color: var(--tinta); }

/* ---- Tablas ---- */
.tabla-inf { width: 100%; border-collapse: collapse; font-size: 9pt; }
.tabla-inf th {
  text-align: right; font-size: 7.5pt; text-transform: uppercase; letter-spacing: .04em;
  color: var(--suave); border-bottom: 1px solid var(--linea); padding: 5px 7px;
}
.tabla-inf th:first-child, .tabla-inf td:first-child { text-align: left; }
.tabla-inf td { text-align: right; padding: 5px 7px; border-bottom: 1px solid var(--linea); }
.tabla-inf td.corta { max-width: 92mm; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---- Barras propias del informe ---- */
.barras-inf > div { margin-bottom: 7px; display: grid;
  grid-template-columns: 1fr auto; gap: 2px 8px; }
.b-nom { font-size: 9pt; }
.b-val { font-size: 9pt; font-weight: 700; text-align: right; }
.b-riel { grid-column: 1 / -1; height: 5px; background: var(--nota); border-radius: 99px; }
.b-riel div { height: 100%; background: var(--naranja); border-radius: 99px; }

.aviso-inf { background: var(--nota); border-radius: 8px; padding: 14px 16px; margin-top: 18px; }
.aviso-inf p { font-size: 9.5pt; line-height: 1.55; margin: 0 0 6px; color: var(--suave); }
.aviso-inf p:last-child { margin-bottom: 0; }

.propuesta { margin: 0; padding-left: 18px; }
.propuesta li { font-size: 10pt; line-height: 1.5; margin-bottom: 9px; }

.dos-inf { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; align-items: start; }
.dos-inf .bloque-inf { min-width: 0; }

/* Los gráficos son los mismos SVG de la web; en papel se aclaran. */
#informe .gr text, #informe .eje { fill: #6B675F; }
#informe .gr .rejilla, #informe .rejilla { stroke: #E4E0D8; }
#informe .mc-etq, #informe .mc-col { color: #6B675F; }
#informe .calor-grande .mc-celda { height: 15px; }
#informe .mc-celda { border-color: #E4E0D8; }

@media print {
  /* Nada de la aplicación entra en el papel: sólo el informe. */
  body > *:not(#informe) { display: none !important; }
  #informe { display: block !important; position: static; background: none;
             overflow: visible; padding: 0; }
  @page { size: A4; margin: 0; }
  html, body { background: #fff; }
  .hoja { margin: 0; box-shadow: none; page-break-after: always; break-after: page; }
  .hoja:last-child { page-break-after: auto; break-after: auto; }
  .informe-barra { display: none !important; }
}

/* ---- Formatos con su mejor ejemplo ------------------------------------- */
.formatos-inf { display: flex; flex-direction: column; gap: 9px; }
.formato-inf {
  display: flex; gap: 11px; border: 1px solid var(--linea);
  border-radius: 8px; padding: 9px; break-inside: avoid;
}
.formato-inf img, .formato-inf .sinfoto {
  width: 52px; height: 78px; object-fit: cover; border-radius: 6px;
  flex-shrink: 0; background: var(--nota);
}
.formato-txt { min-width: 0; flex: 1; }
.formato-cab { display: flex; align-items: center; gap: 8px; }
.formato-nom { font-size: 11pt; font-weight: 700; }
.formato-red {
  font-size: 7.5pt; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  color: var(--suave); border: 1px solid var(--linea); border-radius: 99px; padding: 1px 7px;
}
.formato-datos { display: flex; flex-wrap: wrap; gap: 2px 12px; font-size: 8.5pt;
                 color: var(--suave); margin-top: 3px; }
.formato-datos b { color: var(--tinta); }
.formato-ej {
  margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--linea);
  display: flex; align-items: baseline; gap: 8px; font-size: 8.5pt;
}
.formato-etq { color: var(--suave); flex-shrink: 0; }
.formato-tit { font-weight: 600; overflow: hidden; text-overflow: ellipsis;
               white-space: nowrap; min-width: 0; }
.formato-cifra { margin-left: auto; font-weight: 700; flex-shrink: 0; }

/* ---- Edición de un tema vigilado --------------------------------------- */
.tema.editando { border-color: rgba(255,255,255,.22); }
.tema-edicion {
  /* .tema es flex con wrap: con el ancho al 100% este bloque se lleva su
     propia línea entera, debajo del nombre y de los botones. */
  flex: 0 0 100%; display: flex; flex-direction: column; gap: 10px;
  margin-top: 4px; padding-top: 12px; border-top: 1px solid var(--border);
}
.chip.flojo { color: var(--aviso); border-color: rgba(245,192,94,.35); }

/* ============================== Captación =============================== */
.enlace, .llamada {
  display: flex; align-items: center; gap: 14px;
  padding: 13px 0; border-bottom: 1px solid var(--border);
}
.enlace:last-child, .llamada:last-child { border-bottom: none; }
.enlace .txt, .llamada .txt { flex: 1; min-width: 0; }

.enlace-url { display: flex; align-items: center; gap: 8px; margin-top: 7px; }
.enlace-url code {
  font-size: 12px; color: var(--acento-lit); background: var(--acento-soft);
  border-radius: 7px; padding: 4px 9px; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}

/* Una llamada vendida o perdida se distingue de un vistazo. */
.llamada.bien { border-left: 2px solid var(--ok); padding-left: 12px; }
.llamada.mal  { border-left: 2px solid var(--ko); padding-left: 12px; }
.llamada .mini-input.importe { width: 110px; }
.llamada .mini-input:disabled { opacity: .35; }

.alta-enlace { display: flex; flex-direction: column; gap: 12px; }
.alta-enlace label { display: flex; flex-direction: column; gap: 5px;
                     font-size: 12.5px; color: var(--faint); }
.alta-fila { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 640px) { .alta-fila { grid-template-columns: 1fr; } }
.mini-select.ancho { width: 100%; }

/* ---- El paso a paso de captación --------------------------------------- */
.pasos { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 12px; }
.pasos li { font-size: 13.5px; line-height: 1.6; color: var(--muted); }
.pasos li b { color: var(--text); font-weight: 600; }
.pasos li u { text-decoration-color: var(--acento); text-underline-offset: 3px; }

.enlace-destino { font-size: 11.5px; color: var(--faint); margin-top: 5px;
                  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.enlace .mini.sinfoto svg { width: 20px; height: 20px; }
.alta-enlace optgroup { font-style: normal; color: var(--faint); }

/* ---- Conectar la agenda ------------------------------------------------ */
.conectar-agendas { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 720px) { .conectar-agendas { grid-template-columns: 1fr; } }
.conectar-uno {
  background: var(--panel-2); border: 1px solid var(--border);
  border-radius: 12px; padding: 16px; display: flex; flex-direction: column; gap: 10px;
}
.conectar-uno .nom { font-size: 15px; font-weight: 600; }
.conectar-uno p { font-size: 12.5px; color: var(--faint); line-height: 1.5; margin: 0; flex: 1; }
.agenda-cuenta {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 0; border-bottom: 1px solid var(--border);
}
.agenda-cuenta:last-of-type { border-bottom: none; }
.agenda-cuenta .txt { flex: 1; min-width: 0; }
.aviso-rojo { color: var(--ko); }

/* ---- El calendario semanal --------------------------------------------- */
.semana-nav { display: flex; align-items: center; gap: 8px; }
.semana-mes { font-size: 12.5px; color: var(--faint); text-transform: capitalize;
              min-width: 120px; text-align: center; }

.semana { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
@media (max-width: 900px) { .semana { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) { .semana { grid-template-columns: 1fr; } }

.dia { background: var(--panel-2); border: 1px solid var(--border);
       border-radius: 11px; padding: 9px; min-height: 130px;
       display: flex; flex-direction: column; gap: 7px; }
.dia.hoy { border-color: rgba(255,255,255,.32); }
.dia-cab { display: flex; align-items: baseline; gap: 6px;
           color: var(--faint); font-size: 11.5px; }
.dia-cab b { color: var(--text); font-size: 15px; }
.dia-cuerpo { display: flex; flex-direction: column; gap: 6px; flex: 1; }

/* Cada sesión es un botón: se pulsa y se abre para marcarla. */
.sesion {
  display: flex; flex-direction: column; gap: 2px; text-align: left;
  background: var(--bg-2); border: 1px solid var(--border); border-left-width: 2px;
  border-radius: 8px; padding: 7px 9px; cursor: pointer;
  font-family: inherit; color: inherit; transition: .15s;
}
.sesion:hover { border-color: rgba(255,255,255,.24); }
.sesion.abierta { border-color: rgba(255,255,255,.32); background: var(--acento-soft); }
.sesion.bien { border-left-color: var(--ok); }
.sesion.mal  { border-left-color: var(--ko); }
.sesion-hora  { font-size: 12px; font-weight: 700; }
.sesion-quien { font-size: 12px; color: var(--muted);
                overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sesion-estado  { font-size: 10.5px; color: var(--faint); }
.sesion-importe { font-size: 11.5px; font-weight: 700; color: var(--ok); }

.hueco {
  border: 1px dashed var(--border); background: none; color: var(--faint);
  border-radius: 8px; padding: 5px; cursor: pointer; font-size: 15px;
  font-family: inherit; opacity: 0; transition: .15s; margin-top: auto;
}
.dia:hover .hueco { opacity: 1; }
.hueco:hover { border-color: rgba(255,255,255,.32); color: var(--acento-lit); }

/* ---- La sesión abierta ------------------------------------------------- */
.sesion-detalle { display: flex; flex-direction: column; gap: 16px; }
.sesion-origen { display: flex; gap: 12px; align-items: center;
                 background: var(--panel-2); border-radius: 11px; padding: 12px; }
.sesion-origen .etq { font-size: 11px; color: var(--faint); }
.sesion-marcar { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 560px) { .sesion-marcar { grid-template-columns: 1fr; } }
.sesion-marcar label { display: flex; flex-direction: column; gap: 5px;
                       font-size: 12.5px; color: var(--faint); }
.mini-input.ancho { width: 100%; }

/* ---- La ficha de rendimiento de una pieza ------------------------------ */
.ficha-rend {
  border: 1px solid var(--border); border-radius: 13px;
  padding: 14px; margin-bottom: 12px; background: var(--panel-2);
}
.ficha-rend:last-child { margin-bottom: 0; }

.fr-cab { display: flex; align-items: center; gap: 13px; }
.fr-cab img, .fr-cab .sinfoto {
  width: 92px; height: 52px; object-fit: cover; border-radius: 8px;
  flex-shrink: 0; background: var(--bg-2);
  display: grid; place-items: center; color: var(--faint);
}
.fr-cab .sinfoto svg { width: 22px; height: 22px; }
.fr-txt { flex: 1; min-width: 0; }
.fr-tit {
  display: block; font-size: 14.5px; font-weight: 600; color: var(--text);
  text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fr-tit:hover { color: var(--acento-lit); }
.fr-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 5px;
           font-size: 12px; color: var(--faint); }

.fr-enlazado, .fr-sinenlace {
  font-size: 10.5px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase;
  border-radius: 999px; padding: 4px 10px; flex-shrink: 0; white-space: nowrap;
}
.fr-enlazado { color: var(--ok); border: 1px solid rgba(110,231,154,.3); }
.fr-sinenlace { color: var(--faint); border: 1px solid var(--border); }

/* Las cifras, en tarjetas como las de arriba pero más compactas. */
.fr-kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
           gap: 8px; margin-top: 13px; }
@media (max-width: 900px) { .fr-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) { .fr-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.fr-kpi {
  background: var(--bg-2); border: 1px solid var(--border);
  border-radius: 10px; padding: 10px 12px;
  display: flex; flex-direction: column; gap: 3px;
}
.fr-kpi .etq { font-size: 10.5px; color: var(--faint); font-weight: 600;
               letter-spacing: .03em; text-transform: uppercase; }
.fr-kpi .val { font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; }
.fr-kpi.bien .val { color: var(--ok); }

/* ---- La lista de vídeos con lo que ha traído cada uno ------------------- */
.lista-rend { display: flex; flex-direction: column; }
.fila-rend {
  display: grid; align-items: center; gap: 16px;
  grid-template-columns: 104px 1fr auto auto;
  padding: 14px 0; border-bottom: 1px solid var(--border);
}
.fila-rend:last-child { border-bottom: none; }
.fila-rend.abierta { background: rgba(255,255,255,.02); }

.fr-mini { display: block; width: 104px; height: 58px; border-radius: 8px;
           overflow: hidden; background: var(--bg-2); flex-shrink: 0; }
.fr-mini img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fr-mini .sinfoto { display: grid; place-items: center; width: 100%; height: 100%;
                    color: var(--faint); }
.fr-mini .sinfoto svg { width: 22px; height: 22px; }

.fr-txt { min-width: 0; }
.fr-tit { display: block; font-size: 14px; font-weight: 600; color: var(--text);
          text-decoration: none; overflow: hidden; text-overflow: ellipsis;
          white-space: nowrap; }
.fr-tit:hover { color: var(--acento-lit); }

/* "Gestionar enlaces": el gesto principal de cada fila. */
.fr-gestionar {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 6px;
  background: none; border: none; padding: 0; cursor: pointer;
  font-family: inherit; font-size: 12.5px; color: var(--faint);
}
.fr-gestionar:hover { color: var(--acento-lit); }
.fr-gestionar svg { width: 13px; height: 13px; }

/* Las visitas son contexto, no resultado: van en gris y sin adornos. */
.fr-vistas { font-size: 15px; font-weight: 600; color: var(--muted);
             font-variant-numeric: tabular-nums; text-align: right; min-width: 66px; }

.fr-cifras { display: flex; flex-direction: column; gap: 4px; min-width: 150px; }
.fr-c { display: flex; align-items: center; gap: 7px; font-size: 13px;
        font-weight: 600; font-variant-numeric: tabular-nums; }
.fr-c svg { width: 14px; height: 14px; flex-shrink: 0; }
.fr-c.dinero  { color: var(--ok); }
.fr-c.llamada { color: #7fb3ff; }
.fr-c.correo  { color: #c39bff; }
.fr-c.clic    { color: var(--acento-lit); }

/* Los enlaces del vídeo, desplegados bajo su fila. */
.fr-enlaces {
  grid-column: 1 / -1; display: flex; flex-direction: column; gap: 9px;
  margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border);
}
.fr-enlace { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.fr-enlace code {
  font-size: 12px; color: var(--acento-lit); background: var(--acento-soft);
  border-radius: 7px; padding: 4px 9px; flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fr-enlace-clics { font-size: 12px; color: var(--faint); white-space: nowrap; }
.fr-nuevo { display: flex; gap: 9px; flex-wrap: wrap; }
.fr-nuevo .buscador { flex: 1; min-width: 200px; }

@media (max-width: 760px) {
  .fila-rend { grid-template-columns: 76px 1fr; }
  .fr-mini { width: 76px; height: 44px; }
  .fr-vistas { grid-column: 2; text-align: left; }
  .fr-cifras { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; gap: 6px 14px; }
}
.conectar-uno .nom .gratis {
  font-size: 10px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  color: var(--ok); border: 1px solid rgba(110,231,154,.3);
  border-radius: 999px; padding: 2px 8px; margin-left: 7px; vertical-align: 2px;
}
.conectar-uno .ayuda { font-size: 12.5px; color: var(--acento-lit); text-decoration: none; }
.conectar-uno .ayuda:hover { text-decoration: underline; }

/* ---- El código para pegar en la landing -------------------------------- */
.codigo {
  background: var(--bg-2); border: 1px solid var(--border); border-radius: 10px;
  padding: 14px 16px; overflow-x: auto; max-height: 340px; overflow-y: auto;
  margin: 0 0 14px;
}
.codigo code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px; line-height: 1.65; color: var(--muted); white-space: pre;
}
.matiz code { font-family: ui-monospace, Menlo, monospace; font-size: 12px;
              background: rgba(255,255,255,.06); border-radius: 5px; padding: 1px 5px; }

/* =========================================================================
 *  Portal de cliente · añadidos sobre la base del panel
 * ========================================================================= */

/* Rótulos de grupo del menú (GESTIÓN / CONTENIDO), como en el Notion */
.nav-rotulo { font-size: 10.5px; font-weight: 700; letter-spacing: .09em;
  color: var(--faint); text-transform: uppercase; padding: 12px 13px 4px; }
body.lateral-plegada .nav-rotulo { display: none; }

/* Tarjetas-enlace de la portada */
.enlaces-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.enlace-card { display: flex; align-items: center; gap: 12px; padding: 15px 16px;
  background: var(--panel); border: 1px solid var(--border); border-radius: 14px;
  cursor: pointer; transition: .15s; text-align: left; color: inherit; width: 100%; }
.enlace-card:hover { border-color: rgba(255,255,255,.28); background: var(--panel-2); }
.enlace-card .ei { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center;
  background: rgba(255,255,255,.05); border: 1px solid var(--border); flex-shrink: 0; color: var(--metal-1); }
.enlace-card .ei svg { width: 19px; height: 19px; }
.enlace-card .et strong { display: block; font-size: 13.5px; font-weight: 600; }
.enlace-card .et span { display: block; font-size: 11.5px; color: var(--faint); margin-top: 2px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* Avisos tipo llamada de atención (instrucciones, confidencial, consejo) */
.callout { display: flex; gap: 12px; align-items: flex-start;
  background: rgba(255,255,255,.035); border: 1px solid var(--border);
  border-radius: 13px; padding: 14px 16px; font-size: 13.5px; color: var(--muted); line-height: 1.55; }
.callout .ci { flex-shrink: 0; font-size: 16px; line-height: 1.4; }
.callout b, .callout strong { color: var(--text); }
.callout.acento { border-color: rgba(255,255,255,.32);
  background: var(--acento-soft); }

/* Desplegables (equivalente a los toggles del Notion) */
details.plegable { border: 1px solid var(--border); border-radius: 13px;
  background: rgba(255,255,255,.02); overflow: hidden; }
details.plegable > summary { list-style: none; cursor: pointer; padding: 13px 16px;
  font-size: 13.5px; font-weight: 600; display: flex; align-items: center; gap: 10px;
  color: var(--text); transition: .15s; user-select: none; }
details.plegable > summary::-webkit-details-marker { display: none; }
details.plegable > summary:hover { background: rgba(255,255,255,.04); }
details.plegable > summary .flechita { transition: transform .18s; flex-shrink: 0;
  width: 14px; height: 14px; color: var(--faint); }
details.plegable[open] > summary .flechita { transform: rotate(90deg); }
details.plegable > .plegable-cuerpo { padding: 4px 18px 16px; font-size: 13.5px;
  color: var(--muted); line-height: 1.6; }
details.plegable > .plegable-cuerpo p + p { margin-top: 9px; }
details.plegable > .plegable-cuerpo ul { padding-left: 18px; margin-top: 8px; }
details.plegable > .plegable-cuerpo li { margin-bottom: 6px; }
details.plegable > .plegable-cuerpo b { color: var(--text); }

/* Apilado genérico dentro de un panel */
.pila { display: flex; flex-direction: column; gap: 14px; }
.pila-suave { display: flex; flex-direction: column; gap: 10px; }

/* Campos de formulario del portal */
.campo textarea, .campo-tabla textarea, textarea.resp {
  font: inherit; color: var(--text); background: var(--bg-2);
  border: 1px solid var(--border); border-radius: 11px; padding: 11px 13px;
  font-size: 13.5px; line-height: 1.55; resize: vertical; min-height: 44px; width: 100%;
}
.campo textarea:focus, textarea.resp:focus { outline: none; border-color: rgba(255,255,255,.3); }
textarea.resp::placeholder, .campo input::placeholder { color: var(--faint); }
.campo select {
  background: var(--bg-2); border: 1px solid var(--border); border-radius: 11px;
  padding: 10px 12px; font-size: 13.5px; color: var(--text);
}
.campo select:focus { outline: none; border-color: rgba(255,255,255,.3); }

/* Pregunta del cuestionario */
.pregunta { display: flex; flex-direction: column; gap: 7px; }
.pregunta label { font-size: 13.5px; font-weight: 600; color: var(--text); line-height: 1.45; }
.pregunta label small { display: block; font-weight: 400; color: var(--faint); font-size: 12px; margin-top: 2px; }

/* Chivato de guardado */
.guardado { position: fixed; bottom: 18px; right: 20px; z-index: 60;
  background: var(--panel-2); border: 1px solid var(--border); color: var(--muted);
  border-radius: 999px; padding: 8px 15px; font-size: 12.5px; font-weight: 600;
  opacity: 0; transform: translateY(6px); transition: .25s; pointer-events: none;
  display: inline-flex; align-items: center; gap: 7px; }
.guardado.visible { opacity: 1; transform: none; }
.guardado .pt { width: 7px; height: 7px; border-radius: 999px; background: var(--ok); }
.guardado.trabajando .pt { background: var(--aviso); }

/* Lista de pasos del onboarding */
.check-lista { display: flex; flex-direction: column; gap: 8px; }
.check-item { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px;
  background: rgba(255,255,255,.02); border: 1px solid var(--border); border-radius: 12px;
  cursor: pointer; transition: .15s; }
.check-item:hover { border-color: rgba(255,255,255,.24); }
.check-item input { display: none; }
.check-item .caja { width: 20px; height: 20px; border-radius: 6px; flex-shrink: 0; margin-top: 1px;
  border: 1.5px solid rgba(255,255,255,.3); display: grid; place-items: center; transition: .15s; }
.check-item .caja svg { width: 12px; height: 12px; opacity: 0; color: #14120F; }
.check-item.hecho .caja { background: linear-gradient(180deg, var(--metal-2), var(--metal-1)); border-color: transparent; }
.check-item.hecho .caja svg { opacity: 1; }
.check-item .ct { font-size: 13.5px; line-height: 1.5; color: var(--text); }
.check-item.hecho .ct { color: var(--faint); text-decoration: line-through; }
.check-item .ct small { display: block; color: var(--faint); font-size: 12px; text-decoration: none; margin-top: 2px; }
.progreso-barra { height: 7px; border-radius: 999px; background: rgba(255,255,255,.07); overflow: hidden; }
.progreso-barra i { display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--acento), var(--acento-lit)); transition: width .3s; }

/* Tablas editables */
.tabla input, .tabla select, .tabla textarea {
  font: inherit; font-size: 13px; color: var(--text); background: transparent;
  border: 1px solid transparent; border-radius: 8px; padding: 7px 9px; width: 100%; min-width: 90px;
}
.tabla textarea { resize: vertical; min-height: 36px; }
.tabla input:hover, .tabla select:hover, .tabla textarea:hover { border-color: var(--border); }
.tabla input:focus, .tabla select:focus, .tabla textarea:focus {
  outline: none; border-color: rgba(255,255,255,.3); background: var(--bg-2); }
.tabla select option { background: var(--panel-2); }
.tabla .fila-borrar { opacity: 0; transition: .15s; }
.tabla tr:hover .fila-borrar { opacity: 1; }

/* Botón pequeño y discreto */
.btn.mini { padding: 7px 12px; font-size: 12.5px; border-radius: 9px; }
.btn.peligro:hover { border-color: color-mix(in srgb, var(--ko) 60%, transparent); color: var(--ko); }
.btn-icono { background: none; border: 0; cursor: pointer; color: var(--faint); padding: 5px;
  border-radius: 7px; transition: .15s; display: inline-grid; place-items: center; }
.btn-icono:hover { color: var(--text); background: rgba(255,255,255,.07); }
.btn-icono svg { width: 15px; height: 15px; }
.btn-icono.rojo:hover { color: var(--ko); }

/* Etiquetas de estado */
.pastilla { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px;
  border-radius: 999px; font-size: 11.5px; font-weight: 600; white-space: nowrap;
  border: 1px solid var(--border); color: var(--muted); background: rgba(255,255,255,.04); }
.pastilla .pt { width: 6px; height: 6px; border-radius: 999px; background: var(--faint); }
.pastilla.ok { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 35%, transparent); }
.pastilla.ok .pt { background: var(--ok); }
.pastilla.ko { color: var(--ko); border-color: color-mix(in srgb, var(--ko) 35%, transparent); }
.pastilla.ko .pt { background: var(--ko); }
.pastilla.aviso { color: var(--aviso); border-color: color-mix(in srgb, var(--aviso) 35%, transparent); }
.pastilla.aviso .pt { background: var(--aviso); }
.pastilla.acento { color: var(--acento-lit); border-color: rgba(255,255,255,.32); }
.pastilla.acento .pt { background: var(--acento); }

/* Avisos / actualizaciones */
.aviso-card { background: var(--panel); border: 1px solid var(--border); border-radius: 14px;
  padding: 15px 17px; }
.aviso-card.fijado { border-color: rgba(255,255,255,.32); }
.aviso-card .cab { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.aviso-card .cab strong { font-size: 14px; }
.aviso-card .cab .meta { font-size: 11.5px; color: var(--faint); margin-left: auto; white-space: nowrap; }
.aviso-card .cuerpo { font-size: 13.5px; color: var(--muted); line-height: 1.55; white-space: pre-wrap; }

/* Subida de archivos */
.zona-subida { border: 1.5px dashed rgba(255,255,255,.22); border-radius: 14px;
  padding: 26px 18px; text-align: center; cursor: pointer; transition: .15s;
  color: var(--muted); font-size: 13.5px; }
.zona-subida:hover, .zona-subida.arrastrando { border-color: rgba(255,255,255,.32); background: var(--acento-soft); }
.zona-subida svg { width: 26px; height: 26px; margin: 0 auto 8px; color: var(--faint); display: block; }
.zona-subida b { color: var(--text); }
.zona-subida small { display: block; color: var(--faint); margin-top: 4px; }
.archivo-fila { display: flex; align-items: center; gap: 12px; padding: 10px 13px;
  background: rgba(255,255,255,.02); border: 1px solid var(--border); border-radius: 11px; }
.archivo-fila .ai { width: 32px; height: 32px; border-radius: 9px; background: rgba(255,255,255,.05);
  display: grid; place-items: center; color: var(--metal-1); flex-shrink: 0; }
.archivo-fila .ai svg { width: 16px; height: 16px; }
.archivo-fila .at { min-width: 0; flex: 1; }
.archivo-fila .at strong { display: block; font-size: 13px; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.archivo-fila .at span { font-size: 11.5px; color: var(--faint); }

/* FAQ */
.faq-grupo h3 { font-size: 14.5px; font-weight: 700; margin: 22px 0 10px; color: var(--metal-2); }
.faq-grupo:first-child h3 { margin-top: 0; }

/* Tablero del planificador */
.tablero { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(230px, 1fr);
  gap: 12px; overflow-x: auto; padding-bottom: 8px; }
.tablero-col { background: rgba(255,255,255,.02); border: 1px solid var(--border);
  border-radius: 14px; padding: 12px; min-height: 120px; }
.tablero-col > header { display: flex; align-items: center; gap: 8px; margin-bottom: 10px;
  font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.tablero-col > header .num { margin-left: auto; font-size: 11px; color: var(--faint); font-weight: 600; }
.tarjeta-cont { background: var(--panel); border: 1px solid var(--border); border-radius: 11px;
  padding: 11px 12px; margin-bottom: 8px; cursor: pointer; transition: .15s; }
.tarjeta-cont:hover { border-color: rgba(255,255,255,.28); }
.tarjeta-cont .tt { font-size: 13px; font-weight: 600; line-height: 1.4; }
.tarjeta-cont .tm { display: flex; gap: 6px; margin-top: 7px; flex-wrap: wrap; }

/* Ficha lateral / formulario grande (modal sencillo) */
.velo { position: fixed; inset: 0; background: rgba(0,0,0,.6); z-index: 80;
  display: grid; place-items: center; padding: 20px; backdrop-filter: blur(3px); }
.ficha { background: var(--panel); border: 1px solid var(--border); border-radius: 18px;
  padding: 22px; width: min(640px, 100%); max-height: 88vh; overflow: auto;
  display: flex; flex-direction: column; gap: 14px; }
.ficha h3 { font-size: 16px; }
.ficha .acciones { display: flex; gap: 10px; justify-content: flex-end; margin-top: 4px; flex-wrap: wrap; }
.ficha-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ficha-grid .ancho { grid-column: 1 / -1; }
@media (max-width: 560px) { .ficha-grid { grid-template-columns: 1fr; } }

/* Rejilla de datos (facturación, fechas de contrato) */
.datos-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }

/* Enlace dentro del texto */
.enlace-inline { color: var(--metal-2); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; background: none; border: 0; font: inherit; padding: 0; }
.enlace-inline:hover { color: var(--text); }

/* Métricas mensuales: tabla ancha con primera columna fija */
.tabla-metricas th:first-child, .tabla-metricas td:first-child {
  position: sticky; left: 0; background: var(--panel); z-index: 1; min-width: 180px; }
.tabla-metricas input { min-width: 64px; text-align: right; }

/* Portada: bloque de bienvenida */
.hero-portal { background:
    radial-gradient(1200px 400px at 20% -10%, rgba(255,82,8,.09), transparent 60%),
    var(--panel);
  border: 1px solid var(--border); border-radius: 18px; padding: 26px 26px 24px; }
.hero-portal h2 { font-size: 21px; margin-bottom: 8px; }
.hero-portal p { font-size: 14px; color: var(--muted); line-height: 1.6; max-width: 720px; }

/* Aviso de acceso sin dar de alta */
.sin-acceso { max-width: 460px; margin: 0 auto; text-align: center; padding: 60px 20px;
  display: flex; flex-direction: column; gap: 14px; align-items: center; }

.login-caja .cambia-modo { font-size: 12.5px; color: var(--faint); text-align: center; }
.login-ok { font-size: 13px; color: var(--ok); min-height: 18px; }

/* =========================================================================
 *  Portal · ajustes de botones
 *  Iconos a tamaño fijo dentro de los botones (sin fijarlo, un SVG sin
 *  dimensiones crecía hasta la altura del texto), sin subrayado en los
 *  botones-enlace, y sin el borde metálico: el botón principal usa el
 *  naranja de la casa, plano y limpio.
 * ========================================================================= */
.btn { text-decoration: none !important; }
.btn svg { width: 17px !important; height: 17px !important; flex-shrink: 0; }

.btn.principal {
  border: 1px solid transparent !important;
  background: var(--acento) !important;
  background-image: none !important;
  color: #fff !important;
}
.btn.principal:hover { background: var(--acento-lit) !important; border-color: transparent !important; }

/* =========================================================================
 *  Accesos · interruptor y fila nueva
 * ========================================================================= */
.sw { position: relative; display: inline-flex; cursor: pointer; }
.sw input { position: absolute; opacity: 0; width: 0; height: 0; }
.sw-pista { width: 38px; height: 22px; border-radius: 999px; background: rgba(255,255,255,.12);
  border: 1px solid var(--border); transition: .18s; position: relative; display: block; }
.sw-pista::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px;
  border-radius: 999px; background: var(--faint); transition: .18s; }
.sw input:checked + .sw-pista { background: var(--acento-soft); border-color: rgba(255,255,255,.32); }
.sw input:checked + .sw-pista::after { transform: translateX(16px); background: var(--acento); }
.sw input:disabled + .sw-pista { opacity: .5; }
.fila-nueva { background: rgba(255,82,8,.04); }
.login-ok { font-size: 13px; color: var(--ok); min-height: 18px; text-align: center; }

/* =========================================================================
 *  Acceso · se ajusta a la pantalla
 *  Todo en `em` colgando de un tamaño base que sale del viewport: la caja
 *  crece en monitores grandes (o con el zoom del navegador reducido) y se
 *  encoge en móvil, sin salirse nunca a lo alto.
 * ========================================================================= */
[hidden] { display: none !important; }

.login {
  min-height: 100vh; min-height: 100dvh;
  padding: clamp(16px, 4vmin, 56px);
  /* Sale del ancho y del alto: en PC nunca obliga a hacer scroll */
  font-size: clamp(13px, min(1vw, 1.95vh), 21px);
}
.login-caja {
  max-width: 27em; border-radius: 1.4em;
  padding: 2em 1.9em 1.8em; gap: .95em;
}
.login-caja .brand { gap: .7em; margin-bottom: .2em; }
.login-caja .brand .logo { width: 2.2em; height: 2.2em; }
.login-caja .brand-text strong { font-size: 1em; }
.login-caja .brand-text small { font-size: .72em; }
.login-caja h2 { font-size: 1.45em; }
.login .login-sub { font-size: .92em; margin-top: -.55em; }
.login .campo { gap: .4em; }
.login .campo span { font-size: .82em; }
.login .campo input { font-size: max(14px, .96em); border-radius: .75em; padding: .72em .95em; }
.login .callout { font-size: .88em; border-radius: .9em; padding: .95em 1.1em; gap: .8em; }
.login .callout .ci { font-size: 1.1em; }
.login .login-err, .login .login-ok { font-size: .88em; min-height: 1.3em; }
.login .login-err:empty { min-height: 0; }
.login .btn { font-size: .95em; border-radius: .75em; padding: .85em 1.1em; }
.login-caja .cambia-modo { font-size: .86em; }

/* Móvil: tarjeta compacta, con aire alrededor, sin ocupar toda la pantalla */
@media (max-width: 719px) {
  .login { font-size: 13px; padding: 28px 24px; }
  .login-caja { max-width: 340px; padding: 1.5em 1.3em 1.3em; gap: .8em; border-radius: 1.2em; }
  .login .campo input { font-size: 16px; padding: .6em .85em; }
  .login .callout { font-size: .85em; padding: .8em .95em; }
  .login .btn { padding: .75em 1em; }
  .login-caja h2 { font-size: 1.35em; }
}

/* =========================================================================
 *  Reuniones · calendario mensual
 * ========================================================================= */
.reu-proxima { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  background: radial-gradient(900px 300px at 10% -40%, rgba(255,82,8,.10), transparent 60%), var(--panel);
  border: 1px solid rgba(255,255,255,.32); border-radius: 16px; padding: 18px 20px; }
.reu-proxima > div:first-child { display: flex; flex-direction: column; gap: 3px; }
.reu-etq { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--acento-lit); }
.reu-proxima strong { font-size: 16px; }
.reu-cuando { font-size: 13px; color: var(--muted); }
.reu-proxima .reu-cuando::first-letter { text-transform: uppercase; }
.reu-acciones { display: flex; gap: 8px; flex-wrap: wrap; }

.cal-cab { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.cal-cab h2 { font-size: 19px; }
.cal-nav { display: flex; gap: 6px; }
.cal-nav .btn { min-width: 36px; }
.cal-rejilla { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr));
  border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background: var(--border); gap: 1px; }
.cal-semana { background: var(--panel-2); font-size: 11.5px; font-weight: 700; color: var(--faint);
  text-transform: uppercase; letter-spacing: .05em; padding: 8px 10px; }
.cal-dia { background: var(--panel); min-height: 108px; padding: 7px 7px 8px; display: flex; flex-direction: column; gap: 4px;
  position: relative; transition: background .12s; }
.cal-dia.fuera { background: var(--bg-2); }
.cal-dia.fuera .cal-num { color: rgba(255,255,255,.22); }
.cal-num { font-size: 12.5px; font-weight: 600; color: var(--muted); width: 24px; height: 24px;
  display: grid; place-items: center; border-radius: 999px; }
.cal-dia.hoy .cal-num { background: var(--acento); color: #fff; }
.cal-dia.editable { cursor: pointer; }
.cal-dia.editable:hover { background: var(--panel-2); }
.cal-dia.editable:hover::after { content: "+"; position: absolute; top: 6px; right: 9px;
  font-size: 17px; line-height: 1; color: var(--faint); }
.cal-evento { font: inherit; font-size: 11.5px; text-align: left; color: var(--text); cursor: pointer;
  background: var(--acento-soft); border: 0; border-left: 3px solid rgba(255,255,255,.32);
  border-radius: 6px; padding: 4px 6px; line-height: 1.3;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-evento b { font-weight: 700; color: var(--acento-lit); }
.cal-evento:hover { background: color-mix(in srgb, var(--acento) 26%, transparent); }
.cal-evento.pasada { background: rgba(255,255,255,.05); border-left-color: var(--faint); color: var(--muted); }
.cal-evento.pasada b { color: var(--faint); }

.reu-bloque { margin-top: 14px; }
.reu-bloque span { display: block; font-size: 12px; font-weight: 600; color: var(--faint); margin-bottom: 4px; }
.reu-bloque p { font-size: 14px; color: var(--muted); line-height: 1.6; white-space: pre-wrap; }
.ficha .acciones .btn { text-decoration: none; }

@media (max-width: 700px) {
  .cal-dia { min-height: 64px; padding: 4px; }
  .cal-semana { padding: 6px 4px; font-size: 10px; text-align: center; }
  .cal-evento { font-size: 0; padding: 0; height: 6px; border-left: 0; background: var(--acento); }
  .cal-evento.pasada { background: var(--faint); }
}

/* =========================================================================
 *  Tareas · lista de tareas
 * ========================================================================= */
.todo-nueva { display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.todo-nueva input { font: inherit; font-size: 14px; color: var(--text); background: var(--bg-2);
  border: 1px solid var(--border); border-radius: 11px; padding: 10px 13px; }
.todo-nueva #nuevaTarea { flex: 1; min-width: 200px; }
.todo-nueva input:focus { outline: none; border-color: rgba(255,255,255,.3); }
.todo-lista { display: flex; flex-direction: column; gap: 6px; }
.todo { display: flex; align-items: center; gap: 12px; padding: 10px 12px;
  background: rgba(255,255,255,.02); border: 1px solid var(--border); border-radius: 12px; transition: .15s; }
.todo:hover { border-color: rgba(255,255,255,.2); }
.todo-caja { width: 22px; height: 22px; border-radius: 7px; flex-shrink: 0; cursor: pointer;
  border: 1.5px solid rgba(255,255,255,.32); background: none; display: grid; place-items: center; transition: .15s; }
.todo-caja svg { width: 12px; height: 12px; opacity: 0; color: #14120F; }
.todo-caja:hover { border-color: rgba(255,255,255,.32); }
.todo.hecho .todo-caja { background: linear-gradient(180deg, var(--metal-2), var(--metal-1)); border-color: transparent; }
.todo.hecho .todo-caja svg { opacity: 1; }
.todo-txt { flex: 1; min-width: 0; font: inherit; font-size: 14px; color: var(--text);
  background: none; border: 0; padding: 2px 0; }
input.todo-txt:focus { outline: none; }
.todo.hecho .todo-txt { color: var(--faint); text-decoration: line-through; }
.todo-fecha { font: inherit; font-size: 12.5px; color: var(--faint); background: none; border: 0; white-space: nowrap; }
.todo-fecha.vencida { color: var(--ko); }
input.todo-fecha { color-scheme: dark; }

/* Drive · campo de enlace solo para admin */
.enlace-admin { border-top: 1px dashed var(--border); padding-top: 12px; margin-top: 4px; }
.enlace-admin > span { display: block; font-size: 11.5px; color: var(--faint); font-weight: 600; margin-bottom: 6px; }
.enlace-admin > div { display: flex; gap: 8px; }
.enlace-admin input { flex: 1; min-width: 0; font: inherit; font-size: 13px; color: var(--text); background: var(--bg-2);
  border: 1px solid var(--border); border-radius: 10px; padding: 9px 12px; }

/* =========================================================================
 *  Planificador · calendario de publicaciones
 * ========================================================================= */
.cal-evento.pieza { --c: var(--acento); background: color-mix(in srgb, var(--c) 16%, transparent);
  border-left-color: var(--c); }
.cal-evento.pieza b { color: var(--c); }
.cal-evento.pieza:hover { background: color-mix(in srgb, var(--c) 28%, transparent); }
.cal-evento.pieza.publicada { opacity: .6; }
.leyenda-formatos { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: -4px 0 12px; font-size: 12px; color: var(--muted); }
.leyenda-formatos span { display: inline-flex; align-items: center; gap: 6px; }
.leyenda-formatos i { width: 9px; height: 9px; border-radius: 3px; display: inline-block; }
.sin-fecha { display: flex; flex-wrap: wrap; gap: 6px; }
.sin-fecha .cal-evento { max-width: 280px; }
.formatos { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 4px; }
.formato { --c: var(--acento); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer;
  color: var(--muted); background: var(--bg-2); border: 1px solid var(--border);
  border-radius: 999px; padding: 6px 12px; transition: .15s; }
.formato:hover { color: var(--text); border-color: color-mix(in srgb, var(--c) 50%, var(--border)); }
.formato.activo { color: #fff; background: color-mix(in srgb, var(--c) 30%, transparent); border-color: var(--c); }
.lista-enlaces { list-style: none; display: flex; flex-direction: column; gap: 5px; font-size: 14px; }
@media (max-width: 700px) {
  .cal-evento.pieza { background: var(--c); }
}

/* Estrategia e Identidad: bloque "esto lo rellenas tú" */
.intro-cliente { background:
    radial-gradient(1000px 320px at 15% -20%, rgba(255,82,8,.10), transparent 60%), var(--panel);
  border: 1px solid rgba(255,255,255,.32); border-radius: 18px; padding: 22px 24px; }
.intro-etq { display: inline-block; font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--acento-lit); background: var(--acento-soft); border-radius: 999px; padding: 4px 10px; margin-bottom: 10px; }
.intro-cliente h2 { font-size: 21px; margin-bottom: 8px; }
.intro-cliente p { font-size: 14px; color: var(--muted); line-height: 1.6; max-width: 760px; }
.intro-puntos { margin: 12px 0 0 18px; font-size: 13.5px; color: var(--muted); line-height: 1.7; }
.intro-puntos li::marker { color: var(--acento); }

/* Menú: accesos a las otras plataformas */
a.nav-item.externo { text-decoration: none; }
a.nav-item.externo .ext { width: 13px; height: 13px; margin-left: auto; opacity: .5; flex-shrink: 0; }
body.lateral-plegada a.nav-item.externo .ext { display: none; }
a.enlace-card { text-decoration: none; color: inherit; }

/* Bloque final «Enviar a ABMedia» (cuestionario, estrategia, identidad) */
.enviar-bloque { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  margin-top: 18px; padding: 18px 20px; border-radius: 16px;
  background: var(--acento-soft); border: 1px solid rgba(255,255,255,.32); }
.enviar-bloque strong { display: block; font-size: 15px; margin-bottom: 3px; }
.enviar-bloque span { font-size: 13px; color: var(--muted); line-height: 1.5; }
#subtituloVista:empty { display: none; }

/* =========================================================================
 *  Superficies en negro neutro (sin tonos marrones) y estilo «seleccionado»
 *  La barra lateral mantiene su degradado negro original. Cualquier elemento
 *  destacado se ve igual que el elemento activo de la barra lateral.
 * ========================================================================= */
:root { --superficie: #0E0E0E; }

.seleccionado,
.reu-proxima, .intro-cliente, .enviar-bloque, .franja-cuestionario, .callout.acento,
.cal-evento, .cal-evento.pieza, .formato.activo {
  border: 1px solid transparent;
  background-image:
    linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.015)),
    linear-gradient(180deg, #151515, #0E0E0E),
    conic-gradient(from 200deg,
      rgba(255,255,255,.10), rgba(255,255,255,.34) 12%,
      rgba(255,255,255,.42) 26%, rgba(255,255,255,.55) 34%,
      rgba(255,255,255,.40) 44%, rgba(255,255,255,.30) 60%,
      rgba(255,255,255,.10) 78%, rgba(255,255,255,.10));
  background-origin: border-box;
  background-clip: padding-box, padding-box, border-box;
  background-color: transparent;
}
.intro-etq { background: rgba(255,255,255,.06); color: var(--text); }
.reu-etq { color: var(--muted); }

/* Eventos del calendario: como un elemento de la barra lateral */
.cal-evento { border-radius: 8px; padding: 4px 7px; color: var(--text); font-weight: 600; }
.cal-evento b { color: var(--muted); font-weight: 600; }
.cal-evento:hover { filter: brightness(1.15); }
.cal-evento.pasada { opacity: .55; }
.cal-evento.pieza b { color: var(--c); }
.cal-evento.pieza::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 2px;
  background: var(--c); margin-right: 6px; vertical-align: 1px; }
.formato.activo { color: var(--text); }
@media (max-width: 700px) {
  .cal-evento, .cal-evento.pieza { font-size: 0; padding: 0; height: 6px; background: var(--muted); }
  .cal-evento.pieza { background: var(--c); }
  .cal-evento.pieza::before { display: none; }
}

/* Cerrar sesión, al pie de la barra lateral */
@media (min-width: 1001px) {
  .sidebar .nav { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
  .sidebar-foot { margin-top: auto !important; }
}

/* Onboarding: franja del cuestionario */
.franja-cuestionario { display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  border-radius: 16px; padding: 16px 18px; margin-bottom: 18px; }
.fc-ico { font-size: 22px; }
.fc-txt { flex: 1; min-width: 220px; display: flex; flex-direction: column; gap: 4px; }
.fc-txt strong { font-size: 16px; }
.fc-txt span { font-size: 13px; color: var(--muted); }
.fc-txt .progreso-barra { margin-top: 6px; max-width: 360px; }

/* Cuestionario tipo Typeform */
.tf { max-width: 700px; margin: 0 auto; min-height: calc(100vh - 170px); display: flex; flex-direction: column; }
.tf-barra { height: 3px; background: rgba(255,255,255,.08); border-radius: 999px; overflow: hidden; }
.tf-barra i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--metal-1), var(--metal-2)); transition: width .35s ease; }
.tf-cab { display: flex; justify-content: space-between; align-items: center; margin: 14px 0 0; font-size: 12.5px; color: var(--faint); }
.tf-q { display: none; margin: auto 0; padding: 48px 0 12px; }
.tf-q.activa { display: block; animation: tfEntra .3s ease; }
@keyframes tfEntra { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.tf-n { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--acento-lit); margin-bottom: 14px; }
.tf-label { display: block; font-weight: 800; font-size: clamp(22px, 2.6vw, 32px); line-height: 1.2; letter-spacing: -.02em; color: var(--text); margin-bottom: 10px; }
h2.tf-label { -webkit-text-fill-color: currentColor; background: none; }
.tf-pista { font-size: 15px; color: var(--muted); line-height: 1.55; margin-bottom: 14px; }
.tf-input { width: 100%; font: inherit; font-size: 17px; line-height: 1.5; color: var(--text);
  background: var(--superficie); border: 1px solid var(--border); border-radius: 12px;
  padding: 16px 18px; resize: vertical; margin-top: 8px; }
.tf-input:focus { outline: none; border-color: rgba(216,211,205,.55); }
.tf-ayuda { font-size: 12px; color: var(--faint); margin-top: 10px; }
.tf-nav { display: flex; justify-content: space-between; gap: 12px; padding: 20px 0 8px; }
.tf-fin .enviar-bloque { margin-top: 22px; }
.btn-icono.armado { width: auto; padding: 0 10px; font: inherit; font-size: 12px; font-weight: 700; color: #fff; background: var(--ko); border-color: var(--ko); }

/* Iconos de línea en lugar de emoticonos */
.callout .ci { display: grid; place-items: center; width: 20px; height: 20px; color: var(--metal-1); }
.callout .ci svg, .login .callout .ci svg { width: 18px; height: 18px; }
.fc-ico { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px;
  background: rgba(255,255,255,.05); border: 1px solid var(--border); color: var(--metal-1); flex-shrink: 0; }
.fc-ico svg { width: 20px; height: 20px; }
.intro-etq { display: inline-flex; align-items: center; gap: 6px; }
.intro-etq svg { width: 13px; height: 13px; }
p.punto { position: relative; padding-left: 16px; }
p.punto::before { content: ""; position: absolute; left: 2px; top: .62em; width: 6px; height: 6px; border-radius: 2px; background: var(--metal-1); }

/* Estrategia e identidad: pantalla dividida */
.pantalla-dividida { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.mitad-prog { padding-top: 10px; }
.mitad { border-radius: 20px; padding: 32px 30px; display: flex; flex-direction: column; gap: 14px; }
.mitad-ico { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center;
  background: rgba(255,255,255,.05); border: 1px solid var(--border); color: var(--metal-1); }
.mitad-ico svg { width: 22px; height: 22px; }
.mitad h2 { font-size: 24px; }
.mitad > p { font-size: 14.5px; color: var(--muted); line-height: 1.65; max-width: 520px; }
.mitad-prog { display: flex; align-items: center; gap: 12px; margin-top: auto; }
.mitad-prog .progreso-barra { flex: 1; }
.mitad-prog span { font-size: 12.5px; color: var(--faint); font-weight: 600; white-space: nowrap; }
.mitad-envio { font-size: 12.5px !important; color: var(--faint) !important; }
.mitad-acciones { display: flex; gap: 8px; flex-wrap: wrap; }
@media (max-width: 900px) { .pantalla-dividida { grid-template-columns: 1fr; min-height: 0; } }

/* Formulario: pasos de pilares y archivos */
.tf-extra { margin-top: 8px; }
.pilar-fila { display: flex; flex-direction: column; gap: 6px; padding: 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--superficie); }
.pilar-cab { display: flex; gap: 8px; align-items: center; }
.pilar-fila input, .pilar-fila textarea { font: inherit; font-size: 14px; color: var(--text); background: var(--bg-2);
  border: 1px solid var(--border); border-radius: 10px; padding: 9px 12px; width: 100%; resize: vertical; }
.pilar-fila input { font-weight: 600; }
.formatos-ayuda { width: 100%; font-size: 11.5px; color: var(--faint); margin-top: 2px; }

/* Selector de fechas propio (en lugar del calendario blanco del navegador) */
.fp-campo { display: inline-flex; align-items: center; gap: 8px; width: 100%; min-height: 42px;
  font: inherit; font-size: 14px; color: var(--text); text-align: left; cursor: pointer;
  background: var(--bg-2); border: 1px solid var(--border); border-radius: 11px; padding: 10px 13px; transition: .15s; }
.fp-campo:hover { border-color: rgba(255,255,255,.28); }
.fp-campo svg { width: 16px; height: 16px; color: var(--muted); flex-shrink: 0; }
.fp-campo.vacio span { color: var(--faint); }
.todo-nueva .fp-campo { width: auto; min-width: 160px; }
.fp-campo.fp-mini { width: auto; min-height: 0; background: none; border-color: transparent; padding: 4px 8px; font-size: 12.5px; color: var(--faint); }
.fp-campo.fp-mini:hover { border-color: var(--border); }
.fp { position: fixed; z-index: 200; width: 288px; padding: 14px; border-radius: 16px;
  background: #111111; border: 1px solid rgba(255,255,255,.14); box-shadow: 0 18px 50px rgba(0,0,0,.6); }
.fp-cab { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.fp-cab strong { font-size: 14.5px; }
.fp-nav { font: inherit; font-size: 17px; width: 30px; height: 30px; border-radius: 9px; cursor: pointer;
  color: var(--muted); background: none; border: 1px solid transparent; }
.fp-nav:hover { color: var(--text); background: rgba(255,255,255,.06); }
.fp-rejilla { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.fp-sem { font-size: 11px; font-weight: 700; color: var(--faint); text-align: center; padding: 4px 0; }
.fp-dia { font: inherit; font-size: 13px; height: 34px; border-radius: 9px; cursor: pointer;
  color: var(--text); background: none; border: 1px solid transparent; transition: .12s; }
.fp-dia:hover { background: rgba(255,255,255,.07); }
.fp-dia.hoy { color: var(--acento-lit); font-weight: 700; }
.fp-dia.activo { font-weight: 700; color: var(--text);
  background-image: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.015)), linear-gradient(180deg, #151515, #0E0E0E),
    conic-gradient(from 200deg, rgba(255,255,255,.10), rgba(255,255,255,.34) 12%, rgba(255,255,255,.42) 26%, rgba(255,255,255,.55) 34%, rgba(255,255,255,.40) 44%, rgba(255,255,255,.30) 60%, rgba(255,255,255,.10) 78%, rgba(255,255,255,.10));
  background-origin: border-box; background-clip: padding-box, padding-box, border-box; }
.fp-hora { display: flex; align-items: center; gap: 6px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); }
.fp-hora span { font-size: 12.5px; color: var(--muted); margin-right: auto; }
.fp-hora input { width: 46px; text-align: center; font: inherit; font-size: 14px; color: var(--text);
  background: var(--bg-2); border: 1px solid var(--border); border-radius: 9px; padding: 7px 0; }
.fp-pie { display: flex; align-items: center; gap: 14px; margin-top: 12px; }
.fp-pie .btn { margin-left: auto; }
.fp-link { font: inherit; font-size: 12.5px; font-weight: 600; color: var(--muted); background: none; border: 0; cursor: pointer; padding: 0; }
.fp-link:hover { color: var(--text); }

/* Logos de Drive y Frame.io con aire dentro de su recuadro */
.logo-marca svg { width: 18px !important; height: 18px !important; }
.enlace-card .ei svg[viewBox="0 0 87.3 78"], .enlace-card .ei svg[viewBox="0 0 32 32"] { width: 17px; height: 17px; }

/* Barra lateral encogida: el seleccionado se ve igual que extendida */
body.lateral-plegada .nav-item.active {
  border-color: transparent;
  background-image:
    linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.015)),
    linear-gradient(180deg, #151515, #0E0E0E),
    conic-gradient(from 200deg,
      rgba(255,255,255,.10), rgba(255,255,255,.34) 12%,
      rgba(255,255,255,.42) 26%, rgba(255,255,255,.55) 34%,
      rgba(255,255,255,.40) 44%, rgba(255,255,255,.30) 60%,
      rgba(255,255,255,.10) 78%, rgba(255,255,255,.10));
  background-origin: border-box;
  background-clip: padding-box, padding-box, border-box;
}

/* Facturas y contrato */
.fechas-contrato { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding-top: 14px; border-top: 1px solid var(--border); }
.dato-fecha { font-weight: 600; font-size: 14px; }
.rejilla-factura { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; }
.rejilla-factura .ancho { grid-column: 1 / -1; }
.rejilla-factura .pregunta, .fechas-contrato .pregunta { gap: 6px; }
.rejilla-factura .pregunta label, .fechas-contrato .pregunta label { font-size: 12px; font-weight: 600; color: var(--faint); }
@media (max-width: 700px) { .rejilla-factura, .fechas-contrato { grid-template-columns: 1fr; } }

/* Formularios: aviso y error de respuesta obligatoria */
.tf-aviso { margin-top: 16px; font-size: 13.5px; }
.tf-error { font-size: 14px; color: var(--ko); margin-top: 8px; }

/* Reuniones en el calendario: tarjeta limpia con hora, título y descripción */
.cal-evento.reu {
  display: flex; flex-direction: column; gap: 2px; align-items: stretch;
  white-space: normal; text-align: left; padding: 7px 8px; border-radius: 9px;
  background: #151515; background-image: none; border: 1px solid rgba(255,255,255,.12);
  font-weight: 400; opacity: 1;
}
.cal-evento.reu:hover { border-color: rgba(255,255,255,.3); filter: none; }
.cal-evento.reu .ev-hora { font-size: 11px; font-weight: 700; color: var(--acento-lit); letter-spacing: .02em; }
.cal-evento.reu .ev-tit { font-size: 12.5px; font-weight: 600; color: var(--text); line-height: 1.3;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-evento.reu .ev-desc { font-size: 11.5px; color: var(--muted); line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cal-evento.reu.pasada { opacity: 1; }
.cal-evento.reu.pasada .ev-hora { color: var(--faint); }
@media (max-width: 700px) {
  .cal-evento.reu { padding: 0; height: 6px; border: 0; background: var(--acento); }
  .cal-evento.reu span { display: none; }
}

/* =========================================================================
 *  Formularios a pantalla completa (tapan toda la web, como un pop-up)
 * ========================================================================= */
body.con-formulario { overflow: hidden; }
body.con-formulario .tf {
  position: fixed; inset: 0; z-index: 90; max-width: none; margin: 0; min-height: 0;
  background: var(--bg); overflow-y: auto; display: flex; flex-direction: column;
}
body.con-formulario .tf-barra { position: sticky; top: 0; z-index: 2; height: 4px; border-radius: 0; flex-shrink: 0; }
body.con-formulario .tf-cab { max-width: none; width: 100%; margin: 0; padding: 20px 32px; flex-shrink: 0; gap: 16px; }
.tf-nombre { font-size: 13px; font-weight: 700; color: var(--muted); letter-spacing: .02em; margin-right: auto; }
#tfCuenta { font-size: 13px; color: var(--faint); font-variant-numeric: tabular-nums; }
.tf-cerrar { width: 40px; height: 40px; border-radius: 999px; display: grid; place-items: center; cursor: pointer;
  color: var(--muted); background: var(--panel); border: 1px solid var(--border); transition: .15s; }
.tf-cerrar:hover { color: var(--text); border-color: rgba(255,255,255,.3); }
.tf-cerrar svg { width: 18px; height: 18px; }
.tf-cuerpo { flex: 1; width: 100%; max-width: 820px; margin: 0 auto; padding: 0 28px 40px; display: flex; flex-direction: column; }
body.con-formulario .tf-q { padding: 40px 0 12px; }
body.con-formulario .tf-label { font-size: clamp(28px, 3.4vw, 42px); }
body.con-formulario .tf-pista { font-size: 17px; }
body.con-formulario .tf-input { font-size: 19px; padding: 20px 22px; }
body.con-formulario .tf-nav { padding: 28px 0 0; }
body.con-formulario .tf-nav .btn { padding: 13px 26px; font-size: 15px; }

/* =========================================================================
 *  Planificador: mismas tarjetas que Reuniones, sin colores por formato
 * ========================================================================= */
.cal-evento.pieza::before { display: none !important; }
.cal-evento.reu.pieza .ev-hora { color: var(--muted); text-transform: uppercase; font-size: 10.5px; letter-spacing: .06em;
  display: flex; gap: 6px; align-items: baseline; flex-wrap: wrap; }
.ev-estado { font-style: normal; text-transform: none; letter-spacing: 0; font-weight: 500; color: var(--faint); }
.cal-evento.reu.pieza.publicada .ev-tit { color: var(--muted); }
.sin-fecha { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; min-height: 56px;
  border-radius: 12px; transition: .15s; }
.sin-fecha .cal-evento { max-width: none; }
.ev-formato-grande { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
@media (max-width: 700px) { .cal-evento.reu.pieza { background: var(--muted); } }

/* Selector de formatos: casillas neutras */
.formato { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); background: var(--bg-2);
  border: 1px solid var(--border); border-radius: 10px; padding: 8px 12px; }
.formato:hover { color: var(--text); border-color: rgba(255,255,255,.28); }
.formato-check { width: 16px; height: 16px; border-radius: 5px; border: 1.5px solid rgba(255,255,255,.3);
  display: grid; place-items: center; flex-shrink: 0; transition: .15s; }
.formato-check svg { width: 10px; height: 10px; opacity: 0; color: #14120F; }
.formato.activo { color: var(--text); }
.formato.activo .formato-check { background: linear-gradient(180deg, var(--metal-2), var(--metal-1)); border-color: transparent; }
.formato.activo .formato-check svg { opacity: 1; }

/* Arrastrar y soltar */
.cal-evento[draggable="true"] { cursor: grab; }
.cal-evento.arrastrando { opacity: .4; }
.cal-dia.soltar, .sin-fecha.soltar { background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px rgba(255,255,255,.35); }

/* Desplegables propios (en lugar del menú nativo del sistema) */
.ds-campo { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-height: 42px;
  font: inherit; font-size: 14px; color: var(--text); text-align: left; cursor: pointer;
  background: var(--bg-2); border: 1px solid var(--border); border-radius: 11px; padding: 10px 13px; transition: .15s; }
.ds-campo:hover, .ds-campo.abierto { border-color: rgba(255,255,255,.28); }
.ds-campo span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ds-chev { width: 16px; height: 16px; color: var(--muted); flex-shrink: 0; transition: transform .15s; }
.ds-campo.abierto .ds-chev { transform: rotate(180deg); }
.ds-campo.ds-mini { width: auto; min-height: 0; padding: 8px 11px; font-size: 13px; border-radius: 10px; background: var(--panel-2); }
.ds-lista { position: fixed; z-index: 200; max-height: 300px; overflow-y: auto; padding: 5px; border-radius: 13px;
  background: #111111; border: 1px solid rgba(255,255,255,.14); box-shadow: 0 18px 50px rgba(0,0,0,.6);
  display: flex; flex-direction: column; gap: 2px; }
.ds-op { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%;
  font: inherit; font-size: 14px; color: var(--muted); text-align: left; cursor: pointer;
  background: none; border: 1px solid transparent; border-radius: 9px; padding: 9px 11px; transition: .12s; }
.ds-op:hover { background: rgba(255,255,255,.06); color: var(--text); }
.ds-op.activo { color: var(--text); font-weight: 600; }
.ds-op svg { width: 14px; height: 14px; color: var(--metal-1); flex-shrink: 0; }

/* Accesos: interruptores apagados (red sin Content OS) */
.sw.apagado { opacity: .3; pointer-events: none; }

/* =========================================================================
 *  Bienvenida (primera vez) · calcada de la de Apex, con el naranja de la casa
 * ========================================================================= */
.public { min-height: 100vh; display: flex; justify-content: center; align-items: flex-start; padding: 48px 20px 80px; }
.public-inner { width: 100%; max-width: 620px; }
.public-inner.wel { max-width: 720px; }
.public.brand { --brand-red: #FF5208; --brand-ink: #0a0a0b; --brand-card: #141417; --brand-line: rgba(255,255,255,0.09); --brand-text: #f4f4f5; --brand-dim: #a1a1aa;
  background: var(--brand-ink); color: var(--brand-text);
  background-image: radial-gradient(760px 420px at 12% -8%, rgba(255,82,8,.16), transparent 60%), radial-gradient(560px 340px at 92% 6%, rgba(255,82,8,.07), transparent 60%);
  background-repeat: no-repeat; }
body:has(.public.brand:not(.hidden)) { background: #0a0a0b; }
.brand-lockup { display: flex; align-items: center; gap: 11px; margin-bottom: 26px; }
.brand-lockup img { width: 28px; height: 28px; object-fit: contain; border-radius: 7px; flex: none; }
.brand-lockup .name { font-size: 13px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--brand-text); }
.wel-warn { display: block; margin: 14px 0 22px; padding: 12px 15px; border-radius: 9px; border: 1px solid rgba(255,82,8,.32); background: rgba(255,82,8,.07); color: var(--brand-text); font-size: 14.5px; line-height: 1.55; }
.public.brand .pub-h1 { font-size: 33px; font-weight: 700; letter-spacing: -.03em; line-height: 1.1; margin: 22px 0 14px; color: var(--brand-text); background: none; -webkit-text-fill-color: currentColor; }
.wel-two { display: grid; gap: 20px; align-items: start; }
.wel-video { position: relative; width: 100%; aspect-ratio: 16/9; margin: 4px 0 22px; border-radius: 12px; overflow: hidden; background: #000; border: 1px solid var(--brand-line); }
.wel-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.wel-video.empty { display: grid; place-items: center; background: var(--brand-card); }
.public.brand .card { background: var(--brand-card); border: 1px solid var(--brand-line); border-radius: 16px; box-shadow: 0 24px 60px -32px rgba(0,0,0,.9); }
.wel-form { display: flex; flex-direction: column; gap: 12px; padding: 20px; text-align: left; }
.wel-form-title { font-size: 11px; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; color: var(--brand-dim); }
.wel-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.wel-row { display: flex; gap: 12px; flex-wrap: wrap; }
.wel-row > .wel-field { flex: 1 1 200px; }
.public.brand .label { color: var(--brand-text); font-size: 13px; font-weight: 600; letter-spacing: -.01em; }
.public.brand .hint-inline, .public.brand .pub-hint { color: var(--brand-dim); font-weight: 400; font-size: 13px; }
.public.brand .input { width: 100%; background: rgba(255,255,255,.035); border: 1px solid var(--brand-line); color: var(--brand-text); border-radius: 10px; padding: 11px 13px; font: inherit; font-size: 15px; outline: none; }
.public.brand .input::placeholder { color: #6b6b73; }
.public.brand .input:focus { border-color: rgba(255,82,8,.55); box-shadow: 0 0 0 3px rgba(255,82,8,.16); }
.wel-one { margin: 4px 0 0; padding: 9px 12px; border-radius: 9px; border: 1px solid var(--brand-line); background: rgba(255,255,255,.03); color: var(--brand-dim); font-size: 12.5px; line-height: 1.55; }
.public.brand .btn.primary { background: var(--brand-red); border: 1px solid var(--brand-red); color: #fff; font: inherit; font-weight: 650; padding: 13px 18px; border-radius: 11px; font-size: 15px; cursor: pointer; background-image: none; box-shadow: none; }
.public.brand .btn.primary:hover:not(:disabled) { background: #e04505; border-color: #e04505; }
.public.brand .btn.primary:disabled { opacity: .55; }
.wel-send { width: 100%; margin-top: 6px; }
.public.brand .pub-error { margin: 2px 0 0; font-size: 13px; color: #ff6b6b; }
.public.brand .foot { margin-top: 18px; text-align: center; color: #5f5f68; font-size: 12px; }
.bv-enlace { border: 0; background: none; padding: 0; font: inherit; color: var(--brand-text); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
@media (max-width: 720px) { .wel-row { flex-direction: column; gap: 12px; } .wel-row > .wel-field { flex: none; } .public { padding: 28px 16px 60px; } .public.brand .pub-h1 { font-size: 28px; } }

/* El autorrelleno del navegador no pinta los campos de azul claro */
input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, textarea:-webkit-autofill {
  -webkit-text-fill-color: #f4f4f5 !important; caret-color: #f4f4f5;
  -webkit-box-shadow: 0 0 0 1000px #151515 inset !important; box-shadow: 0 0 0 1000px #151515 inset !important;
  transition: background-color 9999s ease-out 0s; }
.public.brand input:-webkit-autofill { -webkit-box-shadow: 0 0 0 1000px #18181b inset !important; box-shadow: 0 0 0 1000px #18181b inset !important; }

/* Pendiente de aprobación: el logo a su tamaño */
.sin-acceso .logo { display: block; margin: 0 auto 6px; }
.sin-acceso .logo img { width: 100%; height: 100%; object-fit: contain; display: block; }

.brand-lockup.solo { justify-content: center; }

/* Bienvenida: negros neutros (sin el gris azulado de Apex), más compacta y centrada */
.public.brand { --brand-ink: #0A0A0A; --brand-card: #0F0F0F; --brand-line: rgba(255,255,255,.09); background-color: #0A0A0A; }
body:has(.public.brand:not(.hidden)) { background: #0A0A0A; }
.public-inner.wel { max-width: 600px; }
.public.brand .pub-h1 { text-align: center; font-size: 28px; margin: 14px 0 18px; }
.brand-lockup.solo { margin-bottom: 0; }
.wel-video { margin: 0 0 16px; border-radius: 12px; }
.wel-video.empty { background: #0F0F0F; }
.public.brand .card { border-radius: 14px; box-shadow: none; }
.wel-form { padding: 16px; gap: 10px; }
.wel-form-title { font-size: 10.5px; }
.wel-row { gap: 10px; }
.wel-field { gap: 5px; }
.public.brand .label { font-size: 12.5px; }
.public.brand .hint-inline { font-size: 12.5px; }
.public.brand .input { padding: 9px 11px; font-size: 14px; border-radius: 9px; background: #0A0A0A; }
.public.brand .input:focus { border-color: rgba(255,255,255,.32); box-shadow: 0 0 0 3px rgba(255,255,255,.06); }
.wel-one { padding: 8px 11px; font-size: 12px; background: #0A0A0A; }
.public.brand .btn.primary { padding: 10px 16px; font-size: 14px; border-radius: 9px; }
.wel-send { margin-top: 2px; }
.public.brand input:-webkit-autofill { -webkit-box-shadow: 0 0 0 1000px #0A0A0A inset !important; box-shadow: 0 0 0 1000px #0A0A0A inset !important; }

/* Bienvenida: el registro va suelto bajo el vídeo, sin recuadro */
.public.brand .card.wel-form { background: none; border: 0; border-radius: 0; box-shadow: none; padding: 0; }
.wel-form-title { display: none; }

/* Lo que se borra al eliminar un cliente */
.lista-borrar { margin: 0 0 14px 18px; display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; color: var(--muted); line-height: 1.5; }
.lista-borrar b { color: var(--text); }
.ficha .err { color: var(--ko); font-size: 13px; min-height: 0; margin: 0 0 10px; }
.ficha .err:empty { display: none; }

/* ------------------------------------------------------------------ */
/* Accesos y Cuenta (22/09/2026): campos, tabla y tarjetas pulidas     */
/* ------------------------------------------------------------------ */
.acc-campo { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.acc-campo > span { font-size: 12px; font-weight: 600; color: var(--faint); letter-spacing: .01em; }
.acc-campo input, .acc-res-fila input {
  width: 100%; height: 42px; padding: 0 13px; border-radius: 10px;
  background: #0A0A0A; border: 1px solid rgba(255,255,255,.10); color: var(--text);
  font: inherit; font-size: 14px; transition: border-color .15s, box-shadow .15s; }
.acc-campo input::placeholder { color: #5f5c58; }
.acc-campo input:focus, .acc-res-fila input:focus { outline: none; border-color: rgba(255,255,255,.32); box-shadow: 0 0 0 3px rgba(255,255,255,.06); }

/* Dar acceso: nombre · correo · botón, en una línea y alineados abajo */
.acc-form { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.2fr) auto; gap: 12px; align-items: end; }
.acc-generar { height: 42px; padding: 0 20px; white-space: nowrap; }
@media (max-width: 760px) { .acc-form { grid-template-columns: 1fr; } .acc-generar { width: 100%; } }
#enResultado:not([hidden]) { margin-top: 16px; }
.acc-resultado { border: 1px solid rgba(255,82,8,.28); background: rgba(255,82,8,.05); border-radius: 12px; padding: 14px 16px; }
.acc-res-tit { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 650; color: var(--text); }
.acc-res-tit svg { width: 16px; height: 16px; color: var(--acento); }
.acc-res-fila { display: flex; gap: 8px; margin-top: 10px; }
.acc-res-fila input { font-size: 13px; color: var(--muted); }
.acc-res-fila .btn { height: 42px; padding: 0 18px; flex-shrink: 0; }
.acc-res-nota { margin: 9px 0 0; font-size: 12px; color: var(--faint); }

/* Tabla de cuentas */
.acc-tabla { min-width: 860px; }
.acc-tabla th:first-child, .acc-tabla td:first-child { width: auto; min-width: 220px; }
.acc-tabla th { white-space: nowrap; }
.acc-tabla td { padding-top: 13px; padding-bottom: 13px; }
.acc-tabla .acc-c { text-align: center; }
.acc-tabla .acc-todo { border-right: 1px solid var(--border); }
.acc-nombre { font-weight: 600; display: flex; align-items: center; gap: 8px; }
.acc-email { font-size: 12px; color: var(--faint); margin-top: 2px; }
.acc-fecha { color: var(--faint); font-size: 12.5px; white-space: nowrap; }
.acc-acc { text-align: right; white-space: nowrap; }
.acc-acc .btn { margin-left: 6px; display: inline-flex; align-items: center; gap: 6px; }
.acc-acc .btn svg { width: 13px; height: 13px; }
.acc-cos { display: flex; align-items: center; gap: 12px; }
.acc-redes { display: flex; gap: 6px; }
.acc-red { position: relative; cursor: pointer; }
.acc-red input { position: absolute; opacity: 0; pointer-events: none; }
.acc-red span { display: inline-flex; align-items: center; height: 26px; padding: 0 11px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12); color: var(--faint); font-size: 12px; font-weight: 600; transition: .15s; }
.acc-red input:checked + span { color: var(--text); border-color: rgba(255,82,8,.55); background: rgba(255,82,8,.14); }
.acc-red input:focus-visible + span { box-shadow: 0 0 0 3px rgba(255,255,255,.08); }
.acc-red:hover span { border-color: rgba(255,255,255,.28); }
.acc-red.apagado { cursor: default; opacity: .35; }
.acc-red.apagado:hover span { border-color: rgba(255,255,255,.12); }

/* Cuenta: dos tarjetas, cada una con su botón abajo a la derecha */
.cta-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--hueco, 18px); align-items: start; max-width: 1040px; }
@media (max-width: 900px) { .cta-grid { grid-template-columns: 1fr; } }
.cta-card { background: var(--panel); border: 1px solid var(--border); border-radius: 16px; padding: 22px; display: flex; flex-direction: column; gap: 18px; }
.cta-cab { display: flex; gap: 12px; align-items: flex-start; }
.cta-cab h3 { font-size: 15.5px; font-weight: 650; margin: 1px 0 3px; }
.cta-cab p { font-size: 12.5px; color: var(--faint); line-height: 1.5; margin: 0; }
.cta-ico { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; flex-shrink: 0;
  background: rgba(255,255,255,.05); border: 1px solid var(--border); color: var(--metal-1); }
.cta-ico svg { width: 16px; height: 16px; }
.cta-campos { display: grid; gap: 14px; }
.cta-pie { display: flex; justify-content: flex-end; padding-top: 16px; border-top: 1px solid var(--border); }
.cta-pie .btn { height: 40px; padding: 0 18px; }
.cta-grid { max-width: none; align-items: stretch; }
.cta-pie { margin-top: auto; }
/* Aviso bajo «Iniciar sesión»: la pregunta arriba y una frase por línea */
.nota-enlace { display: flex; flex-direction: column; align-items: center; gap: 3px; line-height: 1.45; }
.nota-enlace span:first-child { color: var(--muted); font-weight: 600; margin-bottom: 2px; }
/* Accesos: la ✕ de eliminar, cuadrada y al lado de «Enlace» */
.acc-acc .btn.acc-x { width: 32px; padding: 0; justify-content: center; color: var(--faint); }
.acc-acc .btn.acc-x svg { width: 14px; height: 14px; }
.acc-acc .btn.acc-x:hover { color: #ff6b6b; border-color: rgba(255,107,107,.45); }
/* Botón generando: se ve que está trabajando */
.btn.cargando { opacity: .75; cursor: progress; }

/* Vídeo de bienvenida: sin nada de YouTube a la vista, solo play/pausa */
.wel-video .wv-frame { position: absolute; inset: 0; overflow: hidden; }
.wel-video .wv-frame iframe { position: absolute; left: 0; width: 100%; top: -60px; height: calc(100% + 120px); border: 0; pointer-events: none; }
.wel-video .wv-portada { position: absolute; inset: 0; background: #000 center / cover no-repeat; transition: opacity .25s; }
.wel-video.empezado .wv-portada { opacity: 0; pointer-events: none; }
.wel-video .wv-capa { position: absolute; inset: 0; border: 0; padding: 0; margin: 0; background: transparent; cursor: pointer; display: grid; place-items: center; outline: none; -webkit-tap-highlight-color: transparent; }
.wel-video .wv-boton { width: 68px; height: 68px; border-radius: 50%; display: grid; place-items: center; background: rgba(0,0,0,.55); color: #fff; border: 1px solid rgba(255,255,255,.18); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); transition: opacity .2s, transform .15s; }
.wel-video .wv-boton svg { width: 28px; height: 28px; fill: currentColor; }
.wel-video .wv-capa:hover .wv-boton { transform: scale(1.05); }
.wel-video.cargando .wv-boton { opacity: .6; }
#bienvenida .wel-form { align-items: center; }
#bienvenida .wel-send { width: auto; min-width: 200px; padding-left: 36px; padding-right: 36px; align-self: center; display: block; margin: 4px auto 0; }

/* Tras el primer play: sin botón en el centro; barra fina abajo con pausa en la esquina */
.wel-video.empezado.sonando .wv-boton { display: none; }
.wel-video.empezado .wv-boton { background: rgba(0,0,0,.72); }
.wel-video .wv-barra { position: absolute; left: 0; right: 0; bottom: 0; display: none; align-items: center; gap: 10px; padding: 18px 14px 10px; background: linear-gradient(to top, rgba(0,0,0,.45), rgba(0,0,0,0)); opacity: 0; transition: opacity .2s; }
.wel-video.empezado .wv-barra { display: flex; }
.wel-video:hover .wv-barra, .wel-video.activo .wv-barra, .wel-video.arrastrando .wv-barra, .wel-video.empezado:not(.sonando) .wv-barra { opacity: 1; }
.wel-video .wv-pp { flex: none; width: 22px; height: 22px; padding: 0; border: 0; background: none; color: #fff; cursor: pointer; display: grid; place-items: center; outline: none; -webkit-tap-highlight-color: transparent; }
.wel-video .wv-pp svg { width: 16px; height: 16px; fill: currentColor; }
.wel-video .wv-linea { flex: 1; height: 16px; display: flex; align-items: center; cursor: pointer; touch-action: none; outline: none; }
.wel-video .wv-riel { position: relative; width: 100%; height: 2px; border-radius: 2px; background: rgba(255,255,255,.28); transition: height .15s; }
.wel-video .wv-linea:hover .wv-riel, .wel-video.arrastrando .wv-riel { height: 4px; }
.wel-video .wv-lleno { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 2px; background: #fff; }
.wel-video .wv-bola { position: absolute; top: 50%; left: 0; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: #fff; opacity: 0; transition: opacity .15s; }
.wel-video .wv-linea:hover .wv-bola, .wel-video.arrastrando .wv-bola { opacity: 1; }
@media (hover: none) { .wel-video .wv-bola { opacity: 1; } .wel-video .wv-riel { height: 3px; } }
#bienvenida .public-inner.wel { max-width: max(480px, min(940px, calc((100vh - 230px) * 16 / 9))); }
/* Enlace y eliminar: dos iconos cuadrados iguales */
.acc-acc .btn.acc-ic { width: 32px; height: 32px; min-height: 32px; padding: 0; gap: 0; justify-content: center; align-items: center; border-radius: 8px; color: var(--muted); flex: none; }
.acc-acc .btn.acc-ic svg { width: 15px; height: 15px; margin: 0; }
.acc-acc .btn.acc-enl:hover { color: var(--text); }
.acc-acc .btn.acc-ic.cargando svg { animation: acc-pulso .9s ease-in-out infinite; }
@keyframes acc-pulso { 50% { opacity: .3; } }
/* Mientras el enlace abre la sesión: solo el aviso, sin el formulario */
.login-entrando { display: none; margin: 10px 0 2px; font-size: 14px; color: var(--muted); }
.login.entrando .campo, .login.entrando .btn, .login.entrando .nota-enlace, .login.entrando .login-sub { display: none; }
.login.entrando .login-entrando { display: block; }

/* Barras de scroll: sin carril blanco. El carril es transparente (se ve el
   fondo de lo que hay detrás) y el tirador, una línea gris discreta. */
* { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.16) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; background: transparent; }
*::-webkit-scrollbar-track, *::-webkit-scrollbar-corner { background: transparent; }
*::-webkit-scrollbar-thumb { background: rgba(255,255,255,.16); border-radius: 10px; border: 3px solid transparent; background-clip: padding-box; }
*::-webkit-scrollbar-thumb:hover { background-color: rgba(255,255,255,.28); }