/* ══════════════════════════════════════════════════════════════════════════
   LINKS FUSIONS — ADMIN · Correcciones de diseño (overhaul élite, 2026-08-05)
   ─────────────────────────────────────────────────────────────────────────
   ARCHIVO PROPIO del pase de diseño. Se carga en index.html DESPUÉS de admin.css,
   así que gana por orden de fuente ante reglas de igual especificidad.

   ⚠️ CEO / otras IAs: este archivo NO lo toca el flujo de admin.css. Poner aquí
   TODA corrección de estética/proporción del panel para no pisarnos entre deploys.

   Dirección (decisión CEO 2026-08-05): cambios MARCADOS, en MÓVIL y DESKTOP.
   Más aire, jerarquía clara, números con presencia. El móvil (que ya tenía tuneo
   de compactación) recibe más respiro SIN romper su layout ni el scroll.
   ══════════════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════════════
   EDITOR (.editor-grid) — respiro real en tarjetas, títulos y campos.
   Aplica en AMBOS anchos. Alto sobre las globales por especificidad
   (#vista .editor-grid …) → gana también sobre las reglas móviles de admin.css.
   ══════════════════════════════════════════════════════════════════════════ */
#vista .editor-grid .card.form-sec { padding: 18px 16px; margin-bottom: 15px; border-radius: 16px; }
#vista .editor-grid .card.form-sec.sec-cerrada { padding: 14px 16px; }
#vista .editor-grid .form-sec h3 { font-size: 12.5px; margin-bottom: 13px; }
#vista .editor-grid .campo { margin-bottom: 15px; }
#vista .editor-grid .campo label { margin-bottom: 6px; }
#vista .editor-grid .dos { gap: 14px; }
#vista .editor-grid .ed-port-fila2 { margin: 10px 0 20px; }
#vista .editor-grid .ed-port-fila3 { margin: 10px 0 16px; }
#vista .editor-grid .ed-port-tx,
#vista .editor-grid .ed-port-tx2 { margin-bottom: 10px; }

/* Un pelín más de aire en desktop, donde sobra ancho. */
@media (min-width: 761px) {
  #vista .editor-grid .card.form-sec { padding: 20px 20px; margin-bottom: 16px; }
  #vista .editor-grid .card.form-sec.sec-cerrada { padding: 14px 20px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   LINKS (la lista) — botones del modo grande + filas del modo lista con presencia.
   Aplica en AMBOS anchos (el modo lista es el que se ve en celular).
   ══════════════════════════════════════════════════════════════════════════ */
.lk-grande-acciones { grid-template-columns: 1fr 1fr 1fr auto; }
.lk-grande-btn { padding: 7px 11px; }
/* Fila del modo lista: título más grande, más relleno, meta legible. */
.lk-fila-titulo { font-size: 14.5px; line-height: 1.4; }
.lk-fila-body { padding: 13px 14px; gap: 7px; }
.lk-fila-meta { font-size: var(--il-fs-sm); }

/* ══════════════════════════════════════════════════════════════════════════
   STATS / ANALÍTICAS — KPIs con presencia (móvil + desktop). Aprobado CEO.
   .stat-cards es COMPARTIDO → también levanta los KPIs de Inicio y Plataforma.
   ══════════════════════════════════════════════════════════════════════════ */
.stat-cards { gap: 10px; }
.stat-cards .card { padding: 15px 11px; }
.stat-cards b { font-size: 23px; margin-bottom: 5px; }
.stat-cards span { font-size: 10.5px; }
.dos-col > .card { margin-bottom: 10px; }
@media (min-width: 761px) {
  .stat-cards { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; }
  .stat-cards .card { padding: 19px 15px; }
  .stat-cards b { font-size: 27px; }
  .dos-col { column-gap: 18px; }
  .dos-col > .card { margin-bottom: 14px; }
}

/* ── Elegir cuenta: buscador + pastillas de tipo (CEO 2026-08-06) ──────────────────
   El diálogo de _lfElegir servía para 3 colecciones; con 20 cuentas hace falta buscar y
   acotar. Todo va en CLASES, no en estilos incrustados: G-estilos cuenta los inline del
   panel (693) y un estilo suelto aquí lo pondría rojo. */
.lf-dg-buscar {
  width: 100%; margin: 4px 0 10px; padding: 11px 13px;
  background: var(--il-bg-elevated, #0d1017); color: var(--il-text, #EEF2F8);
  border: 1px solid var(--il-glass-border); border-radius: 10px;
  font-size: 16px;   /* 16px o iOS hace zoom al enfocar */
  -webkit-text-fill-color: var(--il-text, #EEF2F8);
}
.lf-dg-buscar:focus { outline: none; border-color: var(--il-accent); }
.lf-dg-filtros { display: flex; flex-wrap: wrap; gap: 7px; margin: 0 0 11px; }
.lf-dg-f {
  all: unset; cursor: pointer; padding: 8px 13px; border-radius: 999px;
  font-size: var(--il-fs-sm); font-weight: 600; line-height: 1.2;
  min-height: 36px; display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--il-glass-border); color: var(--il-text-dim);
  background: rgba(255, 255, 255, 0.03);
}
.lf-dg-f:hover { color: var(--il-text, #EEF2F8); }
.lf-dg-f.on {
  border-color: var(--il-accent); background: rgba(111, 138, 176, 0.16);
  color: var(--il-text, #EEF2F8);
}
.lf-dg-n { opacity: .6; font-weight: 500; font-variant-numeric: tabular-nums; }
/* .lf-dg-op es flex EN FILA (admin.css:1716): con dos lineas hay que apilarlas, o el
   correo se pega al nombre como si fuera parte del nombre. */
.lf-dg-op:has(.lf-dg-op-s) { flex-direction: column; align-items: flex-start; gap: 0; }
.lf-dg-op-t { display: block; font-weight: 600; }
.lf-dg-op-s { display: block; margin-top: 3px; font-size: var(--il-fs-xs); opacity: .62; font-weight: 400; }
.lf-dg-vacio { margin: 14px 4px; font-size: var(--il-fs-sm); color: var(--il-text-dim); text-align: center; }

/* ── «Selecciona un tema» en celular: el boton de omitir se aplastaba (CEO 2026-08-07) ──
   La fila es espaciador(flex:1) + barra de progreso(flex:0 0 210px, NO cede) + boton(flex:1).
   MEDIDO en 390px: la fila mide 358, la barra se queda con sus 210 fijos y los dos flex:1 se
   reparten los 116 que sobran -> 58px para el boton. Resultado: pildora de 60x95 con el texto
   partido en varias lineas y saliendose de su propio fondo.
   En pantallas estrechas manda el boton: fuera el espaciador (solo dentro de esta fila, que
   .ed-u-f1 es una utilidad compartida), la barra cede ancho, y el texto no se parte. */
@media (max-width: 700px) {
  .ch-fila16 > .ed-u-f1 { display: none; }
  .ch-fila16 > .ch-caja14 { flex: 1 1 auto; min-width: 0; }
  .ch-fila16 > .st-omitir-caja { flex: 0 0 auto; }
  .st-omitir { white-space: nowrap; }
}

/* EB-42 · la segunda cifra: cuántas visitas NO se contaron.
   Va PEGADA al número que explica y en tamaño pequeño, no en una tarjeta aparte: una
   tarjeta propia le daría al ruido el mismo peso visual que a la señal, y lo que el
   cliente tiene que leer primero es cuánta gente entró de verdad. Solo aparece si hay
   algo que descartar; en un link limpio no ensucia nada. */
.kpis .card .st-descartadas,
.card .st-descartadas {
  display: block;
  margin-top: 2px;
  font-size: 11px;
  line-height: 1.3;
  color: var(--il-text-faint, #7b8698);
  letter-spacing: 0;
  text-transform: none;
  cursor: help;
}


/* ── EB-64 (2026-08-20): la tarjeta promo del pie del sidebar se montaba sobre «Ajustes»
   en pantallas de ~900px de alto (visto y confirmado con zoom en editor-guiado y
   editor-pre). Cuando no cabe, la promo se esconde: «Ajustes» es navegacion y la promo
   es decoracion — la jerarquia la gana el que hace falta. ── */
@media (max-height: 999px) {
  .sn-promo { display: none !important; }
}

/* ── EB-67 (2026-08-21): casilla «reproductor abierto» de la seccion Reproductor del
   editor. El respiro va aqui y no en un style= inline: G-estilos cuenta los inline del
   admin.js y el tope (693) no sube. ── */
#p-abierto-row { margin-top: 8px; }

/* ── Compartir historia (2026-08-29): el boton que entrega la tarjeta 9:16 al telefono.
   Va con la misma letra que sus vecinos (Copiar link / Stats / QR), pero el tamano se
   define AQUI y no en un style= inline: el tope de inline del admin.js esta en 693 y no
   sube. Un acento ice-steel lo distingue sin gritar — es una accion, no una alarma. ── */
.btn-historia {
  font-size: var(--il-fs-sm);
  border-color: color-mix(in srgb, var(--il-accent-bright, #6F8AB0) 45%, transparent);
}
.btn-historia:disabled { opacity: .6; cursor: progress; }

/* ══════════════════════════════════════════════════════════════════════════════════════
   LISTA DE LINKS — rediseño aprobado por el CEO el 2026-08-29 tras seis maquetas.
   El diagnóstico salió de MEDIR el panel real a 390px, no de mirarlo:
     · botones de 29px (el mínimo táctil es 44; el de copiar era 28x29)
     · la portada del artista, cuadrada de 1549px, en una caja 84x104 → se recortaba una
       quinta parte del arte, y con esquinas rectas dentro de una tarjeta redondeada
     · chip «ACTIVO» a 9.5px y botones a 11.5px, por debajo del piso de 12 de la casa
     · borrar con el mismo peso que «Ver», a 15px, en objetivos de 29px
     · la barra de servicio ocupaba 102px porque el texto del buscador no cabía y partía
       la caja en dos líneas
   La idea de fondo: NO hay caja. Lo que separa un link de otro es la luz de su propio arte
   (--t, el color dominante que calcula el navegador al cargar la portada) y el espacio.
   ══════════════════════════════════════════════════════════════════════════════════════ */

.lkn-buscar{display:flex;align-items:center;gap:9px;height:44px;padding:0 15px;
  background:rgba(255,255,255,.045);border:0;border-radius:15px;color:var(--il-text-faint);
  font-size:14.5px;white-space:nowrap;overflow:hidden;width:100%;margin-bottom:11px}
.lkn-buscar input{flex:1;min-width:0;background:none;border:0;outline:none;color:var(--il-text);
  font:inherit;font-size:14.5px}
.lkn-meta{display:flex;justify-content:space-between;align-items:center;gap:10px;
  margin:0 4px 18px;font-size:12.5px;color:var(--il-text-faint)}
.lkn-meta select{background:none;border:0;color:var(--il-text-dim);font:inherit;font-size:12.5px}
.lkn-vis{display:flex;gap:4px;flex:none}
.lkn-vis button{width:38px;height:38px;border:0;background:transparent;border-radius:10px;
  color:var(--il-text-faint);font-size:15px;cursor:pointer;opacity:.45;font-family:inherit}
.lkn-vis button.on{opacity:1;color:var(--il-text);background:rgba(255,255,255,.07)}

/* el halo: la luz que el arte derrama. SUTIL — un estallido se ve barato. */
.lkn-halo{position:absolute;pointer-events:none;z-index:0;filter:blur(26px);opacity:.7;
  background:radial-gradient(closest-side,
    color-mix(in srgb, var(--t, #6F8AB0) 50%, transparent) 0%, transparent 74%)}
.lkn-art{position:relative;z-index:1;display:block;overflow:hidden;
  box-shadow:0 14px 30px -10px color-mix(in srgb, var(--t, #6F8AB0) 70%, transparent),
             0 3px 10px rgba(0,0,0,.5)}
.lkn-art img{width:100%;height:100%;object-fit:cover;display:block}
.lkn-ini{width:100%;height:100%;display:grid;place-items:center;font-weight:800;color:#fff;
  background:linear-gradient(135deg,rgba(111,138,176,.55),rgba(111,138,176,.14))}

/* controles sobre la portada: la ZONA DE TOQUE mide 44 pero el vidrio visible 34, para
   tapar lo mínimo del arte. Copiar se distingue con LUZ, no con el color del disco —
   teñirlo del tono del arte lo hacía competir con la propia portada. */
.lkn-ctrl{position:absolute;right:1px;bottom:1px;display:flex;z-index:2}
.lkn-ic{width:44px;height:44px;border:0;background:transparent;padding:0;cursor:pointer;
  display:grid;place-items:center;font-family:inherit}
.lkn-ic i{width:34px;height:34px;border-radius:11px;display:grid;place-items:center;
  font-size:15px;font-style:normal;color:#f2f6fc;background:rgba(10,14,20,.5);
  -webkit-backdrop-filter:blur(14px) saturate(1.25);backdrop-filter:blur(14px) saturate(1.25);
  box-shadow:0 3px 10px rgba(0,0,0,.4), inset 0 0 0 1px rgba(255,255,255,.15)}
.lkn-ic.pri i{background:rgba(238,244,252,.9);color:#0b0f16;
  box-shadow:0 4px 14px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.5)}

.lkn-grid{display:grid}
.lkn-grid.g2{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:18px 14px}
.lkn-grid.g3{grid-template-columns:repeat(3,1fr);gap:14px 10px}
.lkn-grid.lista{grid-template-columns:1fr;gap:0}
/* min-width:0 NO es opcional: sin él la columna crece para caber el arte y el arte mide el
   100% de la columna → bucle. Medido en la maqueta: la portada llegó a 2.079.673 px. */
.lkn-tile{position:relative;min-width:0}
.lkn-tile .lkn-halo{left:-8%;top:-6%;width:116%;height:80%}
.lkn-tile .lkn-art{width:100%;aspect-ratio:1/1;border-radius:18px}
.lkn-grid.g3 .lkn-art{border-radius:14px}
.lkn-tile h4{position:relative;z-index:1;margin:11px 0 0;font-size:15px;font-weight:700;
  letter-spacing:-.015em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lkn-grid.g3 .lkn-tile h4{font-size:13px;margin-top:8px}
.lkn-tile p{position:relative;z-index:1;margin:2px 0 0;font-size:12px;
  color:var(--il-text-faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lkn-tile p b{color:var(--tx, var(--il-accent-bright));font-weight:700}

.lkn-fila{position:relative;display:grid;grid-template-columns:108px 1fr;
  column-gap:14px;row-gap:14px;align-items:start;padding:4px 2px 26px;margin-bottom:26px}
.lkn-fila .lkn-halo{left:-26px;top:-14px;width:220px;height:180px;filter:blur(34px)}
.lkn-fila .lkn-art{width:108px;height:108px;border-radius:22px}
/* el número flota arriba a la derecha: hay que RESERVARLE el sitio o un título largo se le
   mete por debajo. Medido: sin este padding, chocan. */
.lkn-info{position:relative;z-index:1;min-width:0;padding-top:4px;padding-right:72px}
.lkn-info h3{margin:0;font-size:22px;font-weight:800;letter-spacing:-.025em;line-height:1.08;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lkn-quien{margin:4px 0 0;font-size:13px;color:var(--il-text-dim);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
/* el dato como TEXTURA: cuánto se mueve este link frente al que más se mueve */
.lkn-pulso{height:3px;border-radius:2px;background:rgba(255,255,255,.07);margin:13px 0 0;
  overflow:hidden}
.lkn-pulso i{display:block;height:100%;border-radius:2px;
  background:linear-gradient(90deg,
    color-mix(in srgb, var(--tx, #6F8AB0) 30%, transparent), var(--tx, #6F8AB0))}
.lkn-url{margin:9px 0 0;font-size:12.5px;color:var(--il-text-dim);opacity:.75;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lkn-num{position:absolute;right:2px;top:2px;z-index:1;text-align:right;white-space:nowrap}
.lkn-num b{display:block;font-size:26px;font-weight:800;letter-spacing:-.03em;line-height:1;
  font-variant-numeric:tabular-nums;color:var(--tx, var(--il-accent-bright))}
.lkn-num span{display:block;font-size:12px;line-height:1.3;color:var(--il-text-faint)}
.lkn-num em{display:block;margin-top:3px;font-style:normal;font-size:12px;
  color:var(--il-text-faint);opacity:.72}
.lkn-acts{position:relative;z-index:1;grid-column:1/-1;display:flex;gap:9px;align-items:center}
.lkn-a{height:44px;padding:0 16px;border:0;border-radius:15px;cursor:pointer;
  background:rgba(255,255,255,.06);color:var(--il-text);font-size:13.5px;font-weight:600;
  font-family:inherit;display:inline-flex;align-items:center;text-decoration:none}
.lkn-a.solo{width:44px;padding:0;justify-content:center;font-size:17px;
  color:var(--il-text-dim);background:transparent;margin-left:auto}

.lkn-velo{position:fixed;inset:0;background:rgba(3,5,9,.66);-webkit-backdrop-filter:blur(7px);
  backdrop-filter:blur(7px);z-index:1200;opacity:0;pointer-events:none;transition:opacity .22s}
.lkn-velo.on{opacity:1;pointer-events:auto}
.lkn-hoja{position:fixed;left:0;right:0;bottom:0;z-index:1201;max-width:430px;margin:0 auto;
  padding:22px 20px calc(30px + env(safe-area-inset-bottom));border-radius:30px 30px 0 0;
  background:linear-gradient(180deg,
    color-mix(in srgb, var(--t, #6F8AB0) 34%, #0b0f16) 0%, #0b0f16 58%);
  box-shadow:0 -30px 70px -20px color-mix(in srgb, var(--t, #6F8AB0) 60%, transparent);
  transform:translateY(102%);transition:transform .3s cubic-bezier(.22,1,.36,1)}
.lkn-hoja.on{transform:translateY(0)}
.lkn-asa{width:44px;height:4px;border-radius:2px;background:rgba(255,255,255,.22);margin:0 auto 20px}
.lkn-ttl{margin:0 0 4px;font-size:20px;font-weight:800;letter-spacing:-.02em;text-align:center}
.lkn-sub{margin:0 0 20px;font-size:13px;color:var(--il-text-dim);text-align:center}
.lkn-prev{width:150px;margin:0 auto 22px;border-radius:16px;overflow:hidden;display:block;
  box-shadow:0 20px 44px -12px color-mix(in srgb, var(--t, #6F8AB0) 75%, transparent),
             0 4px 14px rgba(0,0,0,.55)}
.lkn-prev img{width:100%;display:block}
.lkn-op{display:flex;align-items:center;gap:13px;width:100%;height:56px;padding:0 16px;border:0;
  border-radius:17px;background:rgba(255,255,255,.06);margin-bottom:9px;font-size:15px;
  font-weight:600;color:var(--il-text);font-family:inherit;cursor:pointer;text-align:left;
  text-decoration:none}
.lkn-op i{font-style:normal;width:22px;text-align:center;font-size:17px;color:var(--il-text-dim)}
.lkn-op.pri{background:color-mix(in srgb, var(--t, #6F8AB0) 30%, transparent);
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--t, #6F8AB0) 58%, transparent)}
/* al 46% el color del arte se volvia un bloque de barro y el texto de apoyo desaparecia
   dentro: menos relleno, un filo definido, y la letra pequena se aclara para que se lea */
.lkn-op.pri i{color:#fff;opacity:.8}
.lkn-op.pri small{color:rgba(255,255,255,.78)}
.lkn-op.mal{color:#ff8a8a}
.lkn-op.mal i{color:#ff8a8a}
.lkn-op small{margin-left:auto;font-size:12px;color:var(--il-text-faint);font-weight:400}
.lkn-sep{height:1px;background:rgba(255,255,255,.07);margin:8px 8px 12px}
.lkn-ok{width:74px;height:74px;border-radius:26px;margin:6px auto 18px;display:grid;
  place-items:center;font-size:34px;
  background:color-mix(in srgb, var(--t, #6F8AB0) 40%, transparent);
  box-shadow:0 16px 40px -10px color-mix(in srgb, var(--t, #6F8AB0) 70%, transparent)}
.lkn-dato{display:flex;align-items:baseline;justify-content:center;gap:8px;margin:0 0 6px}
.lkn-dato b{font-size:34px;font-weight:800;letter-spacing:-.03em;
  color:var(--tx, var(--il-accent-bright))}
.lkn-dato span{font-size:14px;color:var(--il-text-dim)}

/* remates: el contenedor de la lista ya no lleva estilos incrustados (los aporta .lkn-grid),
   solo el ancho maximo de lectura que tenia antes */
#lista{max-width:1000px}
.lkn-buscar svg{flex:none}
.lkn-buscar input::placeholder{color:var(--il-text-faint);opacity:1}
.lkn-meta b{color:var(--il-text-dim);font-weight:600}
.lkn-meta select{cursor:pointer;padding:2px 0}
.lkn-vis button:focus-visible,.lkn-ic:focus-visible,.lkn-a:focus-visible,.lkn-op:focus-visible{
  outline:2px solid var(--il-accent-bright);outline-offset:2px}
/* en pantalla alta la hoja nunca tapa toda la vista ni se sale por abajo */
.lkn-hoja{max-height:88vh;overflow-y:auto}
@media (prefers-reduced-motion:reduce){
  .lkn-hoja,.lkn-velo{transition:none}
}
/* en computadora la lista respira mas y el titulo no necesita tamano de cartel */
@media (min-width:761px){
  .lkn-fila{grid-template-columns:132px 1fr;padding-bottom:22px;margin-bottom:22px}
  .lkn-fila .lkn-art{width:132px;height:132px}
  .lkn-info h3{font-size:20px}
  /* en celular el menu va al borde porque el pulgar llega; en una fila de 1000px quedaba
     un «...» solo, a 800px de los otros dos botones. Aqui viaja con ellos. */
  .lkn-a.solo{margin-left:0}
}
/* el menu de la vista densa: mismo boton, mas discreto (26px de vidrio sobre 108 de arte) */
.lkn-grid.g3 .lkn-ic{width:40px;height:40px}
.lkn-grid.g3 .lkn-ic i{width:26px;height:26px;border-radius:9px;font-size:13px}
/* la linea de datos: en cuadro grande cabe seguida; en la densa (108px de ancho) se cortaba
   —«61 cli…»— asi que ahi se apila. Medido, no supuesto. */
.lkn-tile p{display:flex;gap:5px}
.lkn-tile p span + span::before{content:"· ";color:var(--il-text-faint)}
.lkn-grid.g3 .lkn-tile p{flex-direction:column;gap:1px;line-height:1.35}
.lkn-grid.g3 .lkn-tile p span + span::before{content:none}