/* =====================================================================
   FansExperts · CRM
   Identidad de la agencia (misma que byscreen.github.io/fansexperts-web):
   tinta azul noche, acento índigo, neutros con un punto de índigo,
   chispa dorada solo en la marca y colores de estado del panel.
   Sin fuentes externas; claro y oscuro con variables en :root.
   ===================================================================== */

:root {
  color-scheme: light;
  /* Superficies y texto (dashboard) */
  --page: #f6f6f9; --surface-1: #fbfbfd; --card: #ffffff; --surface-2: #efeff5;
  --text-primary: #15152a; --text-secondary: #4f4f66; --muted: #808097;
  --grid: #e3e3ec; --axis: #c3c3d3; --border: rgba(21, 21, 42, .10); --border-fuerte: rgba(21, 21, 42, .18);
  /* Series de los gráficos */
  --s1: #2a78d6; --s2: #eb6834; --s3: #1baf7a; --s4: #eda100; --s5: #e87ba4; --s6: #008300; --s7: #4a3aa7; --s8: #e34948;
  /* Estados */
  --good: #0ca30c; --good-text: #006300; --warning: #fab219; --serious: #ec835a; --critical: #d03b3b; --bad-text: #b3261e;
  --warning-text: #8a5a00; --info: #2a78d6; --info-text: #1d5aa6; --violeta: #6c4fd3; --violeta-text: #4a3aa7;
  --teal: #13968c; --teal-text: #0b6b63;
  /* Mapa de calor del panel (secuencial, un solo tono) */
  --heat-0: #eef3fb; --heat-1: #c9daf3; --heat-2: #8fb5e8; --heat-3: #4f8ddc; --heat-4: #1d5aa6;
  --heat-0-text: #4f4f66; --heat-1-text: #15152a; --heat-2-text: #0b0b0b; --heat-3-text: #0b0b0b; --heat-4-text: #ffffff;
  /* Acento */
  --accent: #3b5bdb; --on-accent: #ffffff; --accent-suave: rgba(59, 91, 219, .08); --enlace: #3451c7;
  --foco: #3b5bdb;
  /* Marca (logo y favicon): igual en claro y oscuro */
  --marca-1: #1a1a2e; --marca-2: #3b5bdb; --marca-chispa: #ffc24b;
  /* Notas */
  --note-bg: #fff4d6; --note-fg: #5c4400; --note-border: #f0d58a;
  /* Forma */
  --radio: 10px; --radio-s: 8px; --radio-l: 14px;
  --sombra: 0 1px 2px rgba(21, 21, 42, .05), 0 1px 1px rgba(21, 21, 42, .03);
  --sombra-alta: 0 12px 32px rgba(21, 21, 42, .14), 0 2px 6px rgba(21, 21, 42, .06);
  --lateral: 248px; --tabbar: 62px;
  --fuente: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --page: #0e0e15; --surface-1: #14141d; --card: #191924; --surface-2: #22222f;
    --text-primary: #ededf5; --text-secondary: #b6b6c8; --muted: #8b8ba0;
    --grid: #2a2a39; --axis: #3b3b4d; --border: rgba(255, 255, 255, .09); --border-fuerte: rgba(255, 255, 255, .17);
    --s1: #3987e5; --s2: #d95926; --s3: #199e70; --s4: #c98500; --s5: #d55181; --s6: #008300; --s7: #9085e9; --s8: #e66767;
    --good-text: #3cc13c; --bad-text: #ef7b7b; --warning-text: #f2c14e; --info-text: #6aa8f0; --violeta-text: #a99cf2;
    --teal-text: #3cc7b9;
    --heat-0: #1c2330; --heat-1: #1f3a5f; --heat-2: #2b5d99; --heat-3: #3f86d6; --heat-4: #8cbcf5;
    --heat-0-text: #b6b6c8; --heat-1-text: #ededf5; --heat-2-text: #ededf5; --heat-3-text: #0e0e15; --heat-4-text: #0e0e15;
    --accent: #8ea2ff; --on-accent: #10102a; --accent-suave: rgba(142, 162, 255, .10); --enlace: #9fb0ff; --foco: #8ea2ff;
    --note-bg: #3a3014; --note-fg: #f5dc9a; --note-border: #5c4a14;
    --sombra: 0 1px 2px rgba(0, 0, 0, .35);
    --sombra-alta: 0 10px 30px rgba(0, 0, 0, .55), 0 2px 6px rgba(0, 0, 0, .4);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --page: #0e0e15; --surface-1: #14141d; --card: #191924; --surface-2: #22222f;
  --text-primary: #ededf5; --text-secondary: #b6b6c8; --muted: #8b8ba0;
  --grid: #2a2a39; --axis: #3b3b4d; --border: rgba(255, 255, 255, .09); --border-fuerte: rgba(255, 255, 255, .17);
  --s1: #3987e5; --s2: #d95926; --s3: #199e70; --s4: #c98500; --s5: #d55181; --s6: #008300; --s7: #9085e9; --s8: #e66767;
  --good-text: #3cc13c; --bad-text: #ef7b7b; --warning-text: #f2c14e; --info-text: #6aa8f0; --violeta-text: #a99cf2;
  --teal-text: #3cc7b9;
  --heat-0: #1c2330; --heat-1: #1f3a5f; --heat-2: #2b5d99; --heat-3: #3f86d6; --heat-4: #8cbcf5;
  --heat-0-text: #b6b6c8; --heat-1-text: #ededf5; --heat-2-text: #ededf5; --heat-3-text: #0e0e15; --heat-4-text: #0e0e15;
  --accent: #8ea2ff; --on-accent: #10102a; --accent-suave: rgba(142, 162, 255, .10); --enlace: #9fb0ff; --foco: #8ea2ff;
  --note-bg: #3a3014; --note-fg: #f5dc9a; --note-border: #5c4a14;
  --sombra: 0 1px 2px rgba(0, 0, 0, .35);
  --sombra-alta: 0 10px 30px rgba(0, 0, 0, .55), 0 2px 6px rgba(0, 0, 0, .4);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; background: var(--page); color: var(--text-primary);
  font: 15px/1.5 var(--fuente); -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { margin: 0; line-height: 1.25; letter-spacing: -.01em; }
p { margin: 0; }
a { color: var(--enlace); text-underline-offset: 2px; }
a:hover { text-decoration-thickness: 2px; }
code { font-family: var(--mono); font-size: .9em; background: var(--surface-2); padding: 1px 6px; border-radius: 5px; overflow-wrap: anywhere; }
b, strong { font-weight: 650; }
:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; border-radius: 4px; }
#app:focus { outline: none; }
[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.suave { color: var(--text-secondary); }
.saltar { position: absolute; left: 12px; top: -48px; z-index: 50; background: var(--accent); color: var(--on-accent); padding: 8px 12px; border-radius: var(--radio-s); }
.saltar:focus { top: 12px; }
input[type=file] { display: none; }

.ico { width: 18px; height: 18px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Marco: barra lateral, barra superior y pestañas ---------- */
.lateral {
  position: fixed; inset: 0 auto 0 0; width: var(--lateral); display: flex; flex-direction: column;
  background: var(--surface-1); border-right: 1px solid var(--border); padding: 18px 12px 14px; z-index: 20;
}
.marca { display: flex; align-items: center; gap: 10px; padding: 0 8px; }
/* Logo: cuadro con degradado azul noche → índigo, play blanco y chispa dorada (mismo dibujo que favicon.svg). */
.marca-logo {
  display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; flex: 0 0 auto;
  background: linear-gradient(135deg, var(--marca-1) 15%, var(--marca-2));
  box-shadow: 0 1px 2px rgba(21, 21, 42, .25), inset 0 0 0 1px rgba(255, 255, 255, .08);
}
.marca-logo svg { width: 100%; height: 100%; display: block; }
.marca-play { fill: #ffffff; }
.marca-chispa { fill: var(--marca-chispa); }
.marca-logo.grande { width: 56px; height: 56px; border-radius: 16px; box-shadow: 0 10px 28px color-mix(in srgb, var(--marca-2) 35%, transparent); }
.marca-texto { display: flex; flex-direction: column; line-height: 1.15; }
.marca-texto b { font-size: 15px; letter-spacing: -.01em; }
.marca-texto small { color: var(--muted); font-size: 12px; }
.nav { display: flex; flex-direction: column; gap: 2px; margin-top: 26px; flex: 1; overflow-y: auto; }
.nav-item {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 0; border-radius: var(--radio-s);
  background: transparent; color: var(--text-secondary); font: inherit; font-size: 14px; text-align: left; cursor: pointer;
}
.nav-item .ico { width: 17px; height: 17px; }
.nav-item:hover { background: var(--accent-suave); color: var(--text-primary); }
.nav-item[aria-current="page"] { background: var(--accent-suave); color: var(--text-primary); font-weight: 600; box-shadow: inset 3px 0 0 var(--accent); }
.nav-item[aria-current="page"] .ico { color: var(--accent); }
.lateral-pie { border-top: 1px solid var(--border); padding-top: 12px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.usuario { display: flex; align-items: center; gap: 10px; min-width: 0; padding-left: 4px; }
.usuario-texto { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.usuario-texto b { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.usuario-texto small { color: var(--muted); font-size: 12px; }
.avatar {
  display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; flex: 0 0 auto;
  background: var(--surface-2); color: var(--text-primary); font-weight: 650; font-size: 14px; border: 1px solid var(--border);
}
.avatar .ico { width: 16px; height: 16px; color: var(--text-secondary); }
.avatar.pequeno { width: 28px; height: 28px; font-size: 12px; }

.barra-movil { display: none; }
.tabbar, .mas-menu { display: none; }

.contenido { margin-left: var(--lateral); min-width: 0; }
.pagina-cabeza {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  max-width: 1180px; margin: 0 auto; padding: 28px 32px 18px;
}
.pagina-titulos { min-width: 0; }
.pagina-cabeza h1 { font-size: 24px; font-weight: 700; }
.pagina-cabeza p { margin-top: 4px; font-size: 14px; }
.pagina-cabeza p:empty { display: none; }
.pagina-acciones { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.pagina-acciones-seccion { display: contents; } /* caja propia de cada sección (app.js), sin cambiar el diseño */
#app { display: block; max-width: 1180px; margin: 0 auto; padding: 0 32px 48px; }
.cargando-inicial { display: flex; gap: 10px; align-items: center; justify-content: center; padding: 80px 0; }

/* Pantallas sin marco (entrar, elegir persona) */
body.sin-shell .lateral, body.sin-shell .barra-movil, body.sin-shell .tabbar,
body.sin-shell .pagina-cabeza, body.sin-shell .mas-menu { display: none !important; }
body.sin-shell .contenido { margin-left: 0; }
body.sin-shell #app { padding: 0 16px; }

@media (max-width: 899px) {
  .lateral { display: none; }
  .contenido { margin-left: 0; padding-bottom: calc(var(--tabbar) + env(safe-area-inset-bottom) + 16px); }
  .barra-movil {
    display: flex; position: sticky; top: 0; z-index: 20; align-items: center; justify-content: space-between; gap: 10px;
    padding: calc(10px + env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) 10px max(16px, env(safe-area-inset-left));
    background: color-mix(in srgb, var(--surface-1) 88%, transparent); backdrop-filter: saturate(1.4) blur(12px);
    -webkit-backdrop-filter: saturate(1.4) blur(12px); border-bottom: 1px solid var(--border);
  }
  .barra-movil .marca { padding: 0; }
  .barra-movil .marca-logo { width: 30px; height: 30px; border-radius: 9px; }
  .barra-movil-derecha { display: flex; align-items: center; gap: 8px; min-width: 0; }
  .barra-quien { font-size: 13px; max-width: 32vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .pagina-cabeza { padding: 18px 16px 12px; align-items: flex-start; flex-direction: column; gap: 12px; }
  .pagina-cabeza h1 { font-size: 21px; }
  .pagina-acciones { width: 100%; }
  .pagina-acciones .segmentado { flex: 1; overflow-x: auto; }
  #app { padding: 0 16px 24px; }

  .tabbar {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 25;
    padding: 6px max(6px, env(safe-area-inset-right)) calc(6px + env(safe-area-inset-bottom)) max(6px, env(safe-area-inset-left));
    background: color-mix(in srgb, var(--surface-1) 92%, transparent); backdrop-filter: saturate(1.4) blur(12px);
    -webkit-backdrop-filter: saturate(1.4) blur(12px); border-top: 1px solid var(--border);
  }
  .tabbar.una { display: none; }
  .tab {
    flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 2px;
    border: 0; border-radius: var(--radio-s); background: transparent; color: var(--muted); font: inherit; font-size: 11px; cursor: pointer;
  }
  .tab span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .tab .ico { width: 22px; height: 22px; }
  .tab[aria-current="page"] { color: var(--text-primary); font-weight: 600; }
  .tab[aria-current="page"] .ico { color: var(--accent); }
  .mas-menu:not([hidden]) {
    display: flex; flex-direction: column; position: fixed; z-index: 30; right: 10px;
    bottom: calc(var(--tabbar) + env(safe-area-inset-bottom) + 8px); min-width: 220px; padding: 6px;
    background: var(--card); border: 1px solid var(--border); border-radius: var(--radio-l); box-shadow: var(--sombra-alta);
  }
  .mas-item {
    display: flex; align-items: center; gap: 10px; padding: 11px 12px; border: 0; border-radius: var(--radio-s);
    background: transparent; color: var(--text-primary); font: inherit; text-align: left; cursor: pointer;
  }
  .mas-item:hover, .mas-item[aria-current="page"] { background: var(--accent-suave); }
  .mas-item[aria-current="page"] { font-weight: 600; }
}

/* ---------- Entrar y elegir persona ---------- */
.pantalla-sola { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 32px 0; gap: 18px; }
/* Fondo de las pantallas de entrada: dos halos suaves de la marca sobre el papel */
body.sin-shell { background:
  radial-gradient(60rem 30rem at 15% -10%, color-mix(in srgb, var(--marca-2) 16%, transparent), transparent 70%),
  radial-gradient(40rem 24rem at 110% 110%, color-mix(in srgb, var(--marca-chispa) 12%, transparent), transparent 70%),
  var(--page); background-attachment: fixed; }
.login { width: 100%; max-width: 400px; padding: 32px 28px 26px; border-radius: 20px; box-shadow: var(--sombra-alta);
  background: color-mix(in srgb, var(--card) 92%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.login-marca { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; margin-bottom: 22px; }
.login-nombre { font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); margin-top: 8px; }
.login-marca h1 { font-size: 22px; letter-spacing: -.02em; text-wrap: balance; }
.login-marca p { font-size: 14px; max-width: 30ch; }
.login .boton.grande { margin-top: 6px; }
.login .mensaje:empty { display: none; }
/* «¿Olvidaste tu contraseña?», primera vez y la página del enlace del correo (/clave) */
.login-olvide { text-align: center; margin: 14px 0 0; font-size: 14px; }
.login-ayuda { text-align: center; margin: 10px auto 0; font-size: 13px; max-width: 32ch; text-wrap: balance; }
.olvide-hecho { text-align: center; }
.olvide-nota, .clave-nota { text-align: center; font-size: 13px; margin: 6px 0 14px; text-wrap: balance; }
.clave-cargando { display: flex; align-items: center; justify-content: center; gap: 8px; }
.clave-correo { text-align: center; font-size: 13px; margin: -10px 0 16px; overflow-wrap: anywhere; }
.clave-ver { display: flex; align-items: center; gap: 8px; font-weight: 500; font-size: 14px; margin: 0 0 12px; cursor: pointer; }
.clave-ver input { width: 18px; height: 18px; margin: 0; flex: none; }
.texto-error { color: var(--bad-text); }
.pie-login { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
.pie-login .ico { width: 14px; height: 14px; }
@media (max-width: 440px) { .login { padding: 26px 20px 22px; border-radius: 16px; } }
.lista-personas { display: grid; gap: 8px; }
.persona {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radio);
  background: var(--card); color: var(--text-primary); font: inherit; font-weight: 600; cursor: pointer; text-align: left;
}
.persona:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); background: var(--accent-suave); }
.persona:disabled { opacity: .55; cursor: default; }
.centrado { display: flex; margin: 14px auto 0; }

/* ---------- Formularios ---------- */
label { display: block; font-weight: 600; font-size: 13px; color: var(--text-primary); margin: 0 0 6px; }
.campo { display: flex; flex-direction: column; gap: 6px; margin: 0 0 14px; font-weight: 600; font-size: 13px; }
.campo label { margin: 0; }
.req { color: var(--bad-text); }
.ayuda { color: var(--muted); font-weight: 400; }
input[type=text], input[type=password], input[type=url], input[type=search], input[type=date], select, textarea {
  width: 100%; min-height: 42px; padding: 9px 12px; font: inherit; font-size: 16px; font-weight: 400; line-height: 1.4;
  color: var(--text-primary); background: var(--card); border: 1px solid var(--border-fuerte); border-radius: var(--radio-s);
  transition: border-color .15s, box-shadow .15s;
}
@media (min-width: 900px) {
  input[type=text], input[type=password], input[type=url], input[type=search], input[type=date], select, textarea { font-size: 14px; min-height: 38px; }
}
textarea { resize: vertical; min-height: 80px; }
select { appearance: none; -webkit-appearance: none; padding-right: 34px; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 17px) 52%, calc(100% - 12px) 52%; background-size: 5px 5px; background-repeat: no-repeat; }
input::placeholder, textarea::placeholder { color: var(--muted); }
input:hover, select:hover, textarea:hover { border-color: var(--axis); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--foco); box-shadow: 0 0 0 3px color-mix(in srgb, var(--foco) 22%, transparent); }
input:disabled, select:disabled, textarea:disabled { opacity: .6; cursor: not-allowed; }
.casilla { display: flex; align-items: center; gap: 10px; font-weight: 500; font-size: 14px; cursor: pointer; margin: 4px 0 8px; }
.casilla input { width: 18px; height: 18px; accent-color: var(--accent); }

.formulario { max-width: 760px; }
.formulario-cabeza { margin-bottom: 18px; }
.formulario-cabeza h2 { font-size: 17px; margin-bottom: 4px; }
.campos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
.campos .ancho { grid-column: 1 / -1; }
@media (max-width: 640px) { .campos { grid-template-columns: 1fr; } }
.formulario-pie { display: flex; align-items: center; justify-content: flex-end; gap: 10px; flex-wrap: wrap; border-top: 1px solid var(--border); padding-top: 14px; margin-top: 4px; }
.formulario-pie .mensaje { margin: 0 auto 0 0; }

/* ---------- Botones ---------- */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 9px 16px;
  font: inherit; font-size: 14px; font-weight: 600; line-height: 1.2; text-decoration: none; white-space: nowrap;
  color: var(--on-accent); background: var(--accent); border: 1px solid var(--accent); border-radius: var(--radio-s); cursor: pointer;
  transition: background .15s, border-color .15s, box-shadow .15s, transform .05s;
}
.boton:hover { background: color-mix(in srgb, var(--accent) 88%, var(--text-primary)); border-color: color-mix(in srgb, var(--accent) 88%, var(--text-primary)); }
.boton:active { transform: translateY(1px); }
.boton:disabled { opacity: .5; cursor: default; transform: none; }
.boton .ico { width: 16px; height: 16px; }
.boton.secundario { color: var(--text-primary); background: var(--card); border-color: var(--border-fuerte); box-shadow: var(--sombra); }
.boton.secundario:hover { background: var(--surface-2); }
.boton.fantasma { color: var(--text-secondary); background: transparent; border-color: transparent; box-shadow: none; }
.boton.fantasma:hover { color: var(--text-primary); background: var(--accent-suave); }
.boton.peligro { color: #fff; background: var(--critical); border-color: var(--critical); }
.boton.peligro:hover { background: color-mix(in srgb, var(--critical) 85%, #000); }
.peligro-texto { color: var(--bad-text) !important; }
.boton.pequeno { min-height: 32px; padding: 5px 11px; font-size: 13px; }
.boton.grande { width: 100%; min-height: 46px; font-size: 15px; }
.enlace { background: none; border: 0; color: var(--enlace); font: inherit; cursor: pointer; padding: 0; }

.segmentado { display: inline-flex; gap: 2px; padding: 3px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radio); max-width: 100%; }
.segmentado button {
  flex: 1 0 auto; padding: 6px 12px; border: 0; border-radius: 7px; background: transparent; color: var(--text-secondary);
  font: inherit; font-size: 13px; font-weight: 500; cursor: pointer; white-space: nowrap;
}
.segmentado button:hover { color: var(--text-primary); }
.segmentado button[aria-pressed="true"] { background: var(--card); color: var(--text-primary); font-weight: 650; box-shadow: var(--sombra), inset 0 0 0 1px var(--border); }
.segmentado button[aria-pressed="true"] .pn-punto { box-shadow: 0 0 0 2px var(--card); }

.spinner { display: inline-block; width: 15px; height: 15px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: girar .7s linear infinite; vertical-align: -2px; opacity: .8; }
@keyframes girar { to { transform: rotate(360deg); } }

/* ---------- Tarjetas y fichas ---------- */
.tarjeta { background: var(--card); border: 1px solid var(--border); border-radius: var(--radio-l); padding: 16px 18px; box-shadow: var(--sombra); min-width: 0; }
.lista-fichas { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); align-items: start; }
.rejilla { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); align-items: start; }
.rejilla-dos { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 12px; align-items: start; }
@media (max-width: 860px) { .rejilla-dos { grid-template-columns: 1fr; } }

.grupo { margin-bottom: 26px; }
.grupo-titulo { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 650; margin: 0 0 10px; }
.contador { display: inline-grid; place-items: center; min-width: 22px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--surface-2); color: var(--text-secondary); font-size: 12px; font-weight: 600; }
.resumen-linea { margin: 0 0 12px; font-size: 14px; }

.ficha { display: flex; flex-direction: column; gap: 10px; }
.ficha-cabeza { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ficha-num { font-family: var(--mono); font-size: 12px; font-weight: 600; color: var(--text-secondary); background: var(--surface-2); padding: 2px 7px; border-radius: 6px; }
.ficha-titulo { font-size: 16px; font-weight: 650; overflow-wrap: anywhere; }
.ficha-meta { display: flex; align-items: center; gap: 6px; color: var(--text-secondary); font-size: 13px; margin-top: -6px; }
.ficha-meta .ico { width: 14px; height: 14px; }
.ficha-enlace { display: flex; align-items: center; gap: 6px; font-size: 14px; overflow-wrap: anywhere; }
.ficha-enlace .ico { width: 15px; height: 15px; color: var(--muted); }
.ficha-aviso { font-size: 13px; }
.ficha-acciones { display: flex; flex-wrap: wrap; gap: 8px; }
.ficha-acciones .boton { flex: 1 1 auto; }
.ficha-secundarias { display: flex; flex-wrap: wrap; gap: 2px; margin: -4px -8px 0; }
.ficha-form { display: grid; gap: 0 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
.ficha-form .campo { margin-bottom: 0; }
.ficha-hecha { border-color: color-mix(in srgb, var(--good) 45%, var(--border)); }
.ficha-error { border-left: 3px solid var(--critical); }
.ed-caja { display: grid; gap: 8px; padding: 12px; background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--radio-s); }
.ed-caja label { margin: 0; }
.ed-caja .boton { justify-self: end; }

.etiquetas { display: flex; flex-wrap: wrap; gap: 6px; }
.etiqueta {
  display: inline-flex; align-items: center; font-size: 12px; line-height: 1.4; padding: 2px 8px; border-radius: 6px;
  background: var(--surface-2); color: var(--text-secondary); border: 1px solid transparent; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis;
}

/* Pastillas de estado: punto de color + fondo tenue */
.pill {
  --c: var(--muted); --t: var(--text-secondary);
  display: inline-flex; align-items: center; gap: 6px; padding: 2px 9px 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 600;
  line-height: 1.45; white-space: nowrap; color: var(--t); background: color-mix(in srgb, var(--c) 13%, transparent);
  border: 1px solid color-mix(in srgb, var(--c) 28%, transparent);
}
.pill-punto { width: 7px; height: 7px; border-radius: 50%; background: var(--c); flex: 0 0 auto; }
.pill-pre { font-weight: 500; opacity: .75; }
.pill-pre::after { content: " ·"; }
.pill-neutro { --c: var(--axis); --t: var(--text-secondary); }
.pill-apagado { --c: var(--muted); --t: var(--muted); }
.pill-morado { --c: var(--violeta); --t: var(--violeta-text); }
.pill-azul { --c: var(--info); --t: var(--info-text); }
.pill-ambar { --c: var(--warning); --t: var(--warning-text); }
.pill-turquesa { --c: var(--teal); --t: var(--teal-text); }
.pill-acento { --c: var(--s7); --t: var(--violeta-text); }
.pill-verde { --c: var(--good); --t: var(--good-text); }
.pill-rojo { --c: var(--critical); --t: var(--bad-text); }

.gancho { margin: 0; padding: 10px 12px 10px 14px; border-left: 3px solid var(--accent); background: var(--surface-1); border-radius: 0 var(--radio-s) var(--radio-s) 0; font-size: 15px; overflow-wrap: anywhere; }
:root[data-theme="dark"] .gancho { border-left-color: var(--s1); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .gancho { border-left-color: var(--s1); } }
.gancho-label { display: block; font-size: 11px; font-weight: 650; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); margin-bottom: 2px; }
.notas { white-space: pre-wrap; color: var(--text-secondary); font-size: 14px; overflow-wrap: anywhere; }

/* Mensajes, alertas y avisos flotantes */
.mensaje { font-size: 14px; color: var(--text-secondary); }
.mensaje:empty { display: none; }
.mensaje.error { color: var(--bad-text); font-weight: 500; }
.mensaje.ok { color: var(--good-text); font-weight: 600; }
.alerta { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border-radius: var(--radio-s); font-size: 14px; border: 1px solid; }
.alerta .ico { margin-top: 1px; }
.alerta-error { color: var(--bad-text); background: color-mix(in srgb, var(--critical) 9%, var(--card)); border-color: color-mix(in srgb, var(--critical) 28%, transparent); }
.alerta-aviso, .alerta-nota { color: var(--note-fg); background: var(--note-bg); border-color: var(--note-border); }
.alerta-nota { margin-bottom: 12px; }

.avisos { position: fixed; z-index: 60; left: 50%; transform: translateX(-50%); bottom: 24px; display: flex; flex-direction: column; gap: 8px; align-items: center; width: max-content; max-width: calc(100vw - 32px); pointer-events: none; }
@media (max-width: 899px) { .avisos { bottom: calc(var(--tabbar) + env(safe-area-inset-bottom) + 12px); } }
.toast {
  display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: var(--radio); font-size: 14px; font-weight: 500;
  background: var(--text-primary); color: var(--page); box-shadow: var(--sombra-alta); animation: entrar .2s ease-out; pointer-events: auto;
}
.toast-ok .ico { color: var(--good); }
.toast-error .ico { color: var(--s8); }
.toast.saliendo { opacity: 0; transform: translateY(6px); transition: opacity .25s, transform .25s; }
@keyframes entrar { from { opacity: 0; transform: translateY(8px); } }

/* Barra de subida */
.barra { height: 6px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.barra > div { height: 100%; width: 0; background: var(--s1); border-radius: 999px; transition: width .2s; }
.avance { display: flex; align-items: center; gap: 10px; }
.avance .barra { flex: 1; }
.avance-pct { font-size: 13px; color: var(--text-secondary); font-variant-numeric: tabular-nums; min-width: 3.2em; text-align: right; }

/* Vacíos y cargando */
.vacio { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; padding: 56px 20px; color: var(--text-secondary); background: var(--card); border: 1px dashed var(--border-fuerte); border-radius: var(--radio-l); }
.ico-vacio { width: 40px; height: 40px; stroke-width: 1.4; color: var(--muted); padding: 8px; box-sizing: content-box; background: var(--surface-2); border-radius: 50%; }
.vacio p { max-width: 420px; font-size: 15px; }
.vacio-mini { color: var(--muted); font-size: 13px; padding: 10px 0; }
.vacio-ok { display: flex; align-items: center; gap: 8px; color: var(--good-text); }
.cargando { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); }
.esqueleto { display: flex; flex-direction: column; gap: 10px; padding: 18px; background: var(--card); border: 1px solid var(--border); border-radius: var(--radio); }
.esq { display: block; height: 11px; border-radius: 6px; background: linear-gradient(90deg, var(--surface-2) 25%, var(--grid) 37%, var(--surface-2) 63%); background-size: 400% 100%; animation: brillo 1.3s ease infinite; }
.esq-corta { width: 22%; } .esq-titulo { width: 70%; height: 15px; } .esq-media { width: 55%; }
@keyframes brillo { from { background-position: 100% 50%; } to { background-position: 0 50%; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition: none !important; } }

/* Archivos de una ficha */
.archivos { list-style: none; padding: 0; margin: 0; border: 1px solid var(--border); border-radius: var(--radio-s); overflow: hidden; }
.archivos li { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 8px 10px; font-size: 13px; word-break: break-word; }
.archivos li + li { border-top: 1px solid var(--border); }
.archivo-nombre { display: flex; align-items: center; gap: 8px; min-width: 0; }
.archivo-nombre .ico { color: var(--muted); }
.archivo-acciones { display: flex; gap: 6px; }
.archivos-cargando, .archivos-vacio { font-size: 13px; }
.archivos-carpeta { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.archivos-carpeta .ico { flex: none; }

/* ---------- Cifras (KPIs) ---------- */
.rejilla-kpis { display: grid; gap: 12px; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 12px; }
.rejilla-kpis-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); margin-bottom: 26px; }
@media (max-width: 1100px) { .rejilla-kpis-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 860px) { .rejilla-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.kpi { padding: 14px 16px; }
.kpi-etiqueta { display: flex; align-items: center; gap: 6px; font-size: 11px; text-transform: uppercase; letter-spacing: .4px; color: var(--text-secondary); font-weight: 600; }
.kpi-etiqueta .ico { width: 14px; height: 14px; color: var(--muted); }
.kpi-valor { font-size: 26px; font-weight: 700; margin: 4px 0 2px; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.kpi-delta { font-size: 12px; }
.kpi-mal .kpi-valor { color: var(--bad-text); }
.sube { color: var(--good-text); font-weight: 600; }
.baja { color: var(--bad-text); font-weight: 600; }
.plano { color: var(--muted); }

.cifras { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; margin-top: 14px; }
@media (max-width: 420px) { .cifras { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.cifra { display: flex; flex-direction: column; align-items: flex-start; padding: 8px 10px; border-radius: var(--radio-s); background: var(--surface-1); border: 1px solid var(--border); }
.cifra-valor { font-size: 20px; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.cifra-texto { font-size: 11px; color: var(--text-secondary); line-height: 1.25; margin-top: 2px; }
.cifra-mal { background: color-mix(in srgb, var(--critical) 8%, var(--card)); border-color: color-mix(in srgb, var(--critical) 25%, transparent); }
.cifra-mal .cifra-valor { color: var(--bad-text); }

.modelo-cabeza { display: flex; align-items: center; gap: 12px; }
.modelo-cabeza > div { flex: 1; min-width: 0; }
.modelo-equipo { font-size: 13px; margin-top: 2px; }
.modelo-visitas { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 13px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); }
.modelo-visitas .ico { width: 15px; height: 15px; color: var(--muted); }
.modelo-ficha { display: flex; flex-direction: column; gap: 14px; }
.datos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; margin: 0; }
.datos div { min-width: 0; }
.datos dt { font-size: 11px; text-transform: uppercase; letter-spacing: .4px; color: var(--muted); font-weight: 600; }
.datos dd { margin: 2px 0 0; font-size: 14px; overflow-wrap: anywhere; }

/* Paneles (estilo dashboard) */
.panel h2 { font-size: 14px; font-weight: 650; margin: 0 0 2px; }
.panel .desc { color: var(--muted); font-size: 12px; margin: 0 0 10px; }
.panel-sub { margin-top: 18px !important; }
.panel > .desc:last-child { margin-bottom: 0; }

/* Ranking de reels */
.ranking { list-style: none; margin: 0; padding: 0; }
.ranking li { display: flex; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--grid); }
.ranking li:last-child { border-bottom: 0; }
.ranking-pos { flex: 0 0 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; background: var(--surface-2); font-size: 12px; font-weight: 700; color: var(--text-secondary); }
.ranking li:first-child .ranking-pos { background: var(--accent); color: var(--on-accent); }
.ranking-cuerpo { min-width: 0; }
.ranking-titulo { font-weight: 600; overflow-wrap: anywhere; }
.ranking-meta, .ranking-metricas { font-size: 13px; }

/* ---------- Tablas ---------- */
/* position: relative para que los textos ocultos (.sr, absolutos) queden dentro y no ensanchen la página */
.tabla-scroll { position: relative; overflow-x: auto; }
.tabla-marco { position: relative; background: var(--card); border: 1px solid var(--border); border-radius: var(--radio); box-shadow: var(--sombra); overflow-x: auto; }
.tabla { width: 100%; border-collapse: collapse; font-size: 13px; }
.tabla th { text-align: left; color: var(--text-secondary); font-weight: 600; font-size: 12px; padding: 8px 10px; border-bottom: 1px solid var(--axis); white-space: nowrap; }
.tabla td { padding: 9px 10px; border-bottom: 1px solid var(--grid); vertical-align: top; }
.tabla tbody tr:last-child td { border-bottom: 0; }
.tabla .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tabla-compacta td, .tabla-compacta th { padding: 7px 8px; }
.tabla-marco .tabla th { background: var(--surface-1); padding: 10px 14px; }
.tabla-marco .tabla td { padding: 12px 14px; }
.tabla-contenido tbody tr.ag-ficha:hover td { background: var(--surface-1); }
.tabla-contenido tr.abierta td { background: var(--surface-1); border-bottom-color: transparent; }
.celda-ficha { min-width: 240px; max-width: 420px; }
.celda-titulo { font-weight: 600; font-size: 14px; overflow-wrap: anywhere; }
.celda-hook { color: var(--text-secondary); font-size: 13px; margin: 2px 0 6px; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pills-columna { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.enlaces-columna { display: flex; flex-direction: column; gap: 2px; white-space: nowrap; }
.celda-acciones { text-align: right; }
.celda-acciones .boton { margin: 2px 0 2px 4px; white-space: nowrap; }
.fila-editar > td { background: var(--surface-1); padding: 4px 14px 16px !important; }
.fila-editar .formulario { max-width: none; }
.fila-borrada td { background: color-mix(in srgb, var(--good) 6%, var(--card)); }

/* Tablas apiladas en el móvil: cada fila es una tarjeta */
@media (max-width: 720px) {
  .tabla-apilable thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .tabla-apilable, .tabla-apilable tbody, .tabla-apilable tr, .tabla-apilable td { display: block; width: 100%; }
  .tabla-apilable tr { padding: 10px 0; border-bottom: 1px solid var(--grid); }
  .tabla-apilable tbody tr:last-child { border-bottom: 0; }
  .tabla-apilable td { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 4px 0 !important; border: 0 !important; text-align: right; }
  .tabla-apilable td::before { content: attr(data-label); flex: 0 0 auto; color: var(--muted); font-size: 12px; font-weight: 600; text-align: left; padding-top: 1px; }
  .tabla-apilable td.num { text-align: right; }
  .tabla-marco .tabla-apilable tr { padding: 12px 14px; }
  .tabla-contenido .celda-ficha { display: block; max-width: none; text-align: left; min-width: 0; }
  .tabla-contenido .celda-ficha::before, .tabla-contenido .celda-num::before, .tabla-contenido .celda-acciones::before { display: none; }
  .tabla-contenido .celda-num { justify-content: flex-start; }
  .tabla-contenido .celda-ficha .etiquetas { justify-content: flex-start; }
  .tabla-contenido .pills-columna, .tabla-contenido .enlaces-columna { align-items: flex-end; }
  .tabla-contenido .celda-acciones { justify-content: flex-end; padding-top: 8px !important; }
  .tabla-contenido tr.fila-editar { padding: 0 14px 14px; }
  .tabla-contenido tr.fila-editar > td { display: block; text-align: left; padding: 0 !important; }
  .tabla-contenido tr.fila-editar > td::before { display: none; }
  .tabla-contenido tr.ag-ficha.abierta { border-bottom: 0; }
}

/* ---------- Filtros (Contenido) ---------- */
.filtros { display: grid; gap: 12px 14px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 180px), 1fr)); align-items: end; margin-bottom: 14px; }
.filtros label { display: flex; flex-direction: column; gap: 6px; margin: 0; font-size: 12px; color: var(--text-secondary); }
.filtro-texto { grid-column: 1 / -1; }
.buscador { position: relative; display: block; }
.buscador .ico { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--muted); width: 16px; height: 16px; pointer-events: none; }
.buscador input { padding-left: 36px; }
.filtros-botones { grid-column: 1 / -1; display: flex; gap: 8px; flex-wrap: wrap; }
.cargar-mas { display: flex; justify-content: center; margin: 16px 0; }
.cargar-mas:empty { display: none; }
.barra-filtros { margin-bottom: 16px; }
.barra-filtros .campo { max-width: 360px; margin-bottom: 8px; }
.barra-filtros p { font-size: 13px; }
.vista-previa { display: flex; flex-direction: column; gap: 8px; }
.vista-previa .pill { align-self: flex-start; }

/* Desplegable (alta de modelo) */
.desplegable { margin-bottom: 16px; }
.desplegable summary { display: flex; align-items: center; gap: 8px; cursor: pointer; font-weight: 600; list-style: none; }
.desplegable summary::-webkit-details-marker { display: none; }
.desplegable[open] summary { margin-bottom: 12px; }
.desplegable .formulario > p { margin-bottom: 14px; font-size: 14px; }
.clave { display: grid; gap: 6px; margin-top: 14px; padding: 14px; border: 1px dashed var(--border-fuerte); border-radius: var(--radio); background: var(--surface-1); }
.enlaces { overflow-wrap: anywhere; }

/* ---------- Modelo ---------- */
.mo-repetir { border-color: color-mix(in srgb, var(--critical) 50%, var(--border)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--critical) 35%, transparent); }
.mo-aviso { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: var(--radio-s); font-size: 14px; color: var(--text-primary); overflow-wrap: anywhere;
  background: color-mix(in srgb, var(--critical) 9%, var(--card)); border: 1px solid color-mix(in srgb, var(--critical) 25%, transparent); }
.mo-aviso .ico { color: var(--bad-text); margin-top: 1px; }
.mo-aviso strong { color: var(--bad-text); }
.lista-filas { list-style: none; margin: 0; padding: 0; background: var(--card); border: 1px solid var(--border); border-radius: var(--radio); box-shadow: var(--sombra); overflow: hidden; }
.fila-lista { padding: 12px 16px; }
.fila-lista + .fila-lista { border-top: 1px solid var(--border); }
.mo-fila { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.mo-fila strong { overflow-wrap: anywhere; }
.mo-detalle { font-size: 13px; margin-top: 3px; }

/* ---------- Posters ---------- */
.posters-poco { font-size: 13px; margin: -4px 0 10px; }
.posters-nota { font-size: 13px; max-height: 9em; overflow-y: auto; padding: 8px 10px; background: var(--surface-1); border-radius: var(--radio-s); }
.posters-nota div + div { margin-top: 4px; }
.posters-url { font-size: 13px; overflow-wrap: anywhere; }
.cuenta { display: flex; flex-direction: column; gap: 12px; }
.cuenta-cabeza { display: flex; align-items: center; gap: 12px; }
.cuenta-cabeza > div { flex: 1; min-width: 0; }
.cuenta-seguidores { font-size: 13px; }

/* ---------- Insights (como el dashboard) ---------- */
.serie-1 { --c: var(--s1); } .serie-2 { --c: var(--s2); } .serie-3 { --c: var(--s3); } .serie-4 { --c: var(--s4); }
.serie-5 { --c: var(--s5); } .serie-6 { --c: var(--s6); } .serie-7 { --c: var(--s7); } .serie-8 { --c: var(--s8); }
.leyenda { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--text-secondary); margin-bottom: 6px; }
.leyenda span::before, .marca-serie::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 3px; background: var(--c); margin-right: 6px; vertical-align: -1px; }
.marca-serie { white-space: nowrap; }
.grafico { position: relative; }
.grafico svg { display: block; width: 100%; height: auto; overflow: visible; touch-action: pan-y; }
.g-rejilla { stroke: var(--grid); stroke-width: 1; }
.g-eje, .g-cruz { stroke: var(--axis); stroke-width: 1; }
.g-texto { font-size: 10px; fill: var(--muted); font-family: var(--fuente); }
.g-etiqueta { font-size: 11px; fill: var(--text-secondary); }
.g-valor { font-size: 11px; fill: var(--text-primary); }
.g-linea { fill: none; stroke: var(--c); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.g-punto { fill: var(--c); stroke: var(--card); stroke-width: 2; }
.g-barra { fill: var(--c); }
.g-zona { fill: transparent; }
.g-tip { position: absolute; pointer-events: none; z-index: 2; min-width: 140px; padding: 8px 10px; font-size: 12px;
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radio-s); box-shadow: var(--sombra-alta); }
.g-tip b { display: block; margin-bottom: 4px; }
.g-tip-fila { display: flex; justify-content: space-between; gap: 12px; }
.g-tip-fila i { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 6px; background: var(--c); }
.lista-avisos { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.aviso-item { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; padding: 7px 10px; border-radius: var(--radio-s); }
.aviso-item .ico { width: 15px; height: 15px; margin-top: 2px; }
.aviso-problema { background: color-mix(in srgb, var(--critical) 8%, var(--card)); color: var(--bad-text); }
.aviso-calidad { background: var(--note-bg); color: var(--note-fg); }
.pie-insights { text-align: center; font-size: 12px; color: var(--muted); padding: 14px 0 4px; }

/* ---------- Ajustes de espaciado ---------- */
.seccion > .tarjeta, .seccion > .vacio, .seccion > .alerta { margin-bottom: 12px; }
[data-lista]:empty { display: none; }
.seccion > section.tarjeta.panel { margin-bottom: 12px; }

/* ---------- Campanita de notificaciones (todos los roles) ---------- */
.lateral-cabeza { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.campana {
  position: relative; display: inline-grid; place-items: center; width: 38px; height: 38px; flex: 0 0 auto;
  border: 1px solid transparent; border-radius: var(--radio-s); background: transparent; color: var(--text-secondary); cursor: pointer;
}
.campana .ico { width: 20px; height: 20px; }
.campana:hover, .campana[aria-expanded="true"] { background: var(--accent-suave); color: var(--text-primary); }
.campana-globo {
  position: absolute; top: 2px; right: 1px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
  display: inline-grid; place-items: center; background: var(--critical); color: #fff; font-size: 11px; font-weight: 700;
  line-height: 1; border: 2px solid var(--surface-1);
}
.noti-panel {
  position: fixed; z-index: 40; top: 14px; left: calc(var(--lateral) + 8px); width: min(380px, calc(100vw - 32px));
  max-height: min(560px, calc(100vh - 28px)); display: flex; flex-direction: column;
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radio-l); box-shadow: var(--sombra-alta);
}
.noti-cabeza { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 10px 10px 16px; border-bottom: 1px solid var(--border); }
.noti-cabeza h2 { font-size: 15px; font-weight: 650; }
.noti-lista { overflow-y: auto; padding: 6px; }
.noti-lista ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.noti-item {
  display: flex; gap: 10px; align-items: flex-start; width: 100%; padding: 10px; border: 0; border-radius: var(--radio-s);
  background: transparent; color: var(--text-secondary); font: inherit; font-size: 14px; text-align: left; cursor: pointer;
}
.noti-item:hover { background: var(--surface-2); }
.noti-item.sin-leer { background: color-mix(in srgb, var(--info) 8%, var(--card)); color: var(--text-primary); }
.noti-item.sin-leer:hover { background: color-mix(in srgb, var(--info) 14%, var(--card)); }
.noti-punto { width: 8px; height: 8px; margin-top: 7px; border-radius: 50%; flex: 0 0 auto; background: transparent; }
.noti-item.sin-leer .noti-punto { background: var(--info); }
.noti-item.sin-leer .noti-texto { font-weight: 600; }
.noti-cuerpo { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.noti-texto { overflow-wrap: anywhere; }
.noti-hora { font-size: 12px; color: var(--muted); }
.noti-vacio { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 28px 12px; font-size: 14px; text-align: center; }
.noti-vacio .ico { width: 26px; height: 26px; color: var(--muted); }
.nav-insignia {
  margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; display: inline-grid; place-items: center;
  background: var(--critical); color: #fff; font-size: 11px; font-weight: 700; line-height: 1;
}
@media (max-width: 899px) {
  .campana { width: 36px; height: 36px; }
  .campana-globo { border-color: var(--surface-1); }
  .noti-panel { top: calc(58px + env(safe-area-inset-top)); left: auto; right: 8px; width: min(380px, calc(100vw - 16px));
    max-height: calc(100vh - 58px - var(--tabbar) - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); }
  .tab { position: relative; }
  .tab .nav-insignia { position: absolute; top: 2px; left: calc(50% + 6px); margin: 0; min-width: 16px; height: 16px; padding: 0 4px; font-size: 10px; }
  .tab .nav-insignia.punto { min-width: 9px; width: 9px; height: 9px; padding: 0; }
  .mas-item .nav-insignia { margin-left: auto; }
}

/* ---------- Agencia: solicitudes y perfil de la modelo ---------- */
.ag-sol-fecha { font-size: 12px; }
.ag-sol-resueltas { margin-top: 24px; }
.ag-sol-aceptada { border-color: color-mix(in srgb, var(--good) 35%, var(--border)); }
.ag-sol-rechazada { opacity: .85; }
.ag-sol-form { display: grid; gap: 8px; }
.ag-sol-form .campo { margin-bottom: 0; }
.ag-perfil { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border); }
.ag-perfil summary { display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: 14px; font-weight: 600; list-style: none; }
.ag-perfil summary::-webkit-details-marker { display: none; }
.ag-perfil summary .ico { width: 16px; height: 16px; color: var(--muted); }
.ag-perfil[open] summary { margin-bottom: 10px; }
.ag-perfil-datos dd { white-space: pre-wrap; }
.ag-perfil-datos .ancho { grid-column: 1 / -1; }
.ag-perfil-vacio { display: flex; align-items: center; gap: 6px; margin-top: 12px; font-size: 13px; }
.ag-perfil-vacio .ico { width: 15px; height: 15px; }

/* ---------- agencia (equipo y cuentas) ---------- */
/* Botones de fila: «Ver detalle», «Repetir» */
.ag-ranking-acciones { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }

/* Atascos */
.ag-atascos-barra { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-bottom: 16px; }
.ag-plazos { font-size: 12px; margin: 0; }
.ag-atascos { display: grid; gap: 12px; }
.ag-atasco-grupo .grupo-titulo { margin-bottom: 2px; flex-wrap: wrap; }
.ag-atasco-grupo .grupo-titulo .ico { width: 16px; height: 16px; color: var(--muted); }
.ag-atasco-lista { list-style: none; margin: 0; padding: 0; }
.ag-atasco-lista li + li { border-top: 1px solid var(--grid); }
.ag-atasco {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px;
  width: 100%; padding: 10px 6px; border: 0; border-left: 3px solid transparent; background: transparent;
  color: inherit; font: inherit; text-align: left; cursor: pointer; border-radius: var(--radio-s);
}
.ag-atasco:hover { background: var(--surface-1); }
.ag-atasco:focus-visible { outline: 2px solid var(--foco); outline-offset: 1px; }
.ag-atasco-rojo { border-left-color: var(--critical); }
.ag-atasco-ambar { border-left-color: var(--warning); }
.ag-atasco-cuerpo { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ag-atasco-titulo { font-weight: 600; overflow-wrap: anywhere; }
.ag-atasco-estado { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; font-size: 12px; white-space: nowrap; }

/* Equipo */
.ag-equipo-titulo { margin-top: 26px; }
.ag-equipo-nota { font-size: 12px; margin: -4px 0 10px; }
.cifras.ag-cifras-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ag-persona-datos { margin-top: 12px; }
.ag-persona-vacio { font-size: 12px; margin: 8px 0 0; }
.ag-barra { margin-top: 8px; }
.ag-barra-bien > div { background: var(--good); }
.ag-barra-medio > div { background: var(--warning); }
.ag-barra-mal > div { background: var(--critical); }
.ag-tabla-asignar tr.fila-editar td { background: var(--surface-1); }

/* Cuentas: salud y comparar */
.ag-salud { display: inline-block; }
.ag-salud summary { list-style: none; cursor: pointer; display: inline-flex; }
.ag-salud summary::-webkit-details-marker { display: none; }
.ag-salud-motivos { margin: 6px 0 0; padding-left: 18px; font-size: 12px; color: var(--text-secondary); max-width: 260px; }
.ag-salud-aviso { display: flex; align-items: center; gap: 6px; font-size: 12px; margin: 0 0 12px; }
.ag-salud-aviso .ico { width: 14px; height: 14px; }
.ag-comparar { margin-bottom: 12px; }
.ag-comparar-cabeza { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; margin-bottom: 8px; } /* el selector de modelo, a la izquierda bajo el título (Jordi, 18 oct) */
.ag-comparar-modelo { margin: 0; min-width: 200px; }
.ag-tabla-comparar th[scope="row"] { color: var(--text-secondary); font-weight: 600; white-space: normal; min-width: 130px; }
.ag-tabla-comparar td { min-width: 120px; }
.ag-comparar-valor { font-variant-numeric: tabular-nums; }
.ag-tabla-comparar .ag-barra > div { background: var(--axis); }
.ag-tabla-comparar td.ag-mejor { background: color-mix(in srgb, var(--good) 8%, transparent); }
.ag-tabla-comparar td.ag-mejor .ag-comparar-valor { font-weight: 700; color: var(--good-text); }
.ag-tabla-comparar td.ag-mejor .ag-barra > div { background: var(--good); }

@media (max-width: 640px) {
  .ag-atasco { grid-template-columns: auto minmax(0, 1fr); }
  .ag-atasco-estado { grid-column: 2; align-items: flex-start; flex-direction: row; flex-wrap: wrap; gap: 6px; }
  .cifras.ag-cifras-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- ficha y tarjetas ---------- */
/* Tarjeta de ficha vistosa (todos los roles): banda de color por estado, avatar, chips de vertical,
   outfit y trial, hook con acento, brief y notas tintados, semáforo de plazos y botón «Ver detalle». */
.fc { --c: var(--axis); position: relative; overflow: hidden; border-top: 0; }
.fc::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--c); }
.fc-neutro { --c: var(--axis); } .fc-apagado { --c: var(--muted); } .fc-morado { --c: var(--violeta); }
.fc-azul { --c: var(--info); } .fc-ambar { --c: var(--warning); } .fc-turquesa { --c: var(--teal); }
.fc-acento { --c: var(--s7); } .fc-verde { --c: var(--good); } .fc-rojo { --c: var(--critical); }
.fc.ficha-error { border-left: 1px solid var(--border); }
.fc-titular { display: flex; align-items: center; gap: 10px; min-width: 0; }
.fc-titular > div { min-width: 0; }
.fc-sub { font-size: 13px; color: var(--text-secondary); }
.fc-pie { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.fc-detalle .ico { color: var(--enlace); }
.fc-contador { display: inline-flex; align-items: center; gap: 3px; margin-left: 4px; padding: 0 6px; border-radius: 999px;
  font-size: 11px; font-weight: 700; color: #fff; background: var(--info); }
.fc-contador .ico { width: 12px !important; height: 12px !important; color: #fff !important; }

/* Colores estables por vertical (y por modelo en el avatar) */
.vt-1 { --v: var(--s1); } .vt-2 { --v: var(--s2); } .vt-3 { --v: var(--s3); } .vt-4 { --v: var(--s4); }
.vt-5 { --v: var(--s5); } .vt-6 { --v: var(--s6); } .vt-7 { --v: var(--s7); } .vt-8 { --v: var(--s8); }
.chip-vertical, .chip-outfit, .chip-trial {
  display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; line-height: 1.4; padding: 2px 9px;
  border-radius: 999px; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; border: 1px solid transparent;
}
.chip-vertical { --v: var(--s1); color: color-mix(in srgb, var(--v) 62%, var(--text-primary)); background: color-mix(in srgb, var(--v) 14%, var(--card));
  border-color: color-mix(in srgb, var(--v) 30%, transparent); }
.chip-vertical::before { content: ""; width: 7px; height: 7px; border-radius: 2px; background: var(--v); flex: none; }
.chip-outfit { color: var(--text-primary); background: var(--surface-2); border-color: var(--border); font-weight: 500; }
.chip-trial { color: #fff; background: linear-gradient(135deg, var(--violeta), var(--s5)); letter-spacing: .3px; text-transform: uppercase; font-size: 11px; }
.fc-avatar { --v: var(--s7); display: inline-grid; place-items: center; width: 36px; height: 36px; flex: none; border-radius: 50%;
  font-weight: 700; font-size: 15px; color: #fff; background: linear-gradient(135deg, var(--v), color-mix(in srgb, var(--v) 55%, #000)); }

/* Hook, brief y notas */
.fc-gancho { position: relative; margin: 0; padding: 12px 14px 12px 18px; border-radius: var(--radio-s); overflow-wrap: anywhere;
  background: linear-gradient(100deg, color-mix(in srgb, var(--s1) 9%, var(--card)), color-mix(in srgb, var(--s7) 7%, var(--card))); }
.fc-gancho::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; border-radius: 4px 0 0 4px;
  background: linear-gradient(180deg, var(--s1), var(--s7), var(--s5)); }
.fc-gancho-texto { display: block; font-size: 16px; font-weight: 600; line-height: 1.4; }
.fc-gancho-texto::before { content: "“"; color: var(--s7); font-size: 1.3em; margin-right: 2px; }
.fc-gancho-texto::after { content: "”"; color: var(--s7); font-size: 1.3em; margin-left: 2px; }
.fc-gancho-texto.con-comillas::before, .fc-gancho-texto.con-comillas::after { content: none; } /* el hook ya trae sus comillas */
.fc-brief { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: var(--radio-s);
  background: color-mix(in srgb, var(--info) 8%, var(--card)); border: 1px solid color-mix(in srgb, var(--info) 22%, transparent); }
.fc-brief > .ico { flex: none; width: 18px; height: 18px; margin-top: 2px; color: var(--info-text); }
.fc-brief .notas { color: var(--text-primary); margin: 0; }
.fc-notas { padding: 10px 12px; border-radius: var(--radio-s); background: var(--note-bg); border: 1px solid var(--note-border); }
.fc-notas .notas { color: var(--note-fg); margin: 0; }
.fc-notas .gancho-label { color: var(--note-fg); opacity: .8; }

/* Semáforo de plazos */
.semaforo { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 650; white-space: nowrap; border: 1px solid; }
.semaforo-verde { color: var(--good-text); background: color-mix(in srgb, var(--good) 12%, transparent); border-color: color-mix(in srgb, var(--good) 30%, transparent); }
.semaforo-ambar { color: var(--warning-text); background: color-mix(in srgb, var(--warning) 18%, transparent); border-color: color-mix(in srgb, var(--warning) 40%, transparent); }
.semaforo-rojo { color: #fff; background: var(--critical); border-color: var(--critical); }
.ficha-cabeza .semaforo { margin-left: auto; }

/* Salud de las cuentas (posters y agencia) */
.salud summary { display: flex; align-items: center; gap: 8px; cursor: pointer; list-style: none; }
.salud summary::-webkit-details-marker { display: none; }
.salud-ver { font-size: 12px; text-decoration: underline; text-underline-offset: 2px; }
.salud[open] .salud-ver { display: none; }
.salud-motivos { margin: 8px 0 0; padding-left: 18px; font-size: 13px; color: var(--text-secondary); }
.salud-cifras { margin-top: 4px; font-size: 12px; }

/* Ventana de detalle de la ficha (<dialog>): centrada en escritorio, pantalla completa en el móvil */
.fd { width: min(760px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); padding: 0; color: var(--text-primary);
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radio-l); box-shadow: var(--sombra-alta); overflow: hidden; }
.fd::backdrop { background: rgba(0, 0, 0, .5); }
.fd-marco { display: flex; flex-direction: column; max-height: calc(100dvh - 32px); }
.fd-cabeza { display: flex; align-items: flex-start; gap: 10px; padding: 16px 12px 10px 20px; }
.fd-cabeza-texto { flex: 1; min-width: 0; }
.fd-cabeza h2 { font-size: 18px; overflow-wrap: anywhere; }
.fd-num { font-family: var(--mono); font-size: 12px; color: var(--text-secondary); margin-bottom: 2px; }
.fd-cerrar { flex: none; width: 40px; padding: 0; }
.fd-pestanas { display: flex; gap: 2px; padding: 0 12px; border-bottom: 1px solid var(--border); overflow-x: auto; scrollbar-width: none; }
.fd-pestanas [role="tab"] { display: inline-flex; align-items: center; gap: 6px; padding: 10px 12px; border: 0; border-bottom: 2px solid transparent;
  background: transparent; color: var(--text-secondary); font: inherit; font-size: 14px; cursor: pointer; white-space: nowrap; margin-bottom: -1px; }
.fd-pestanas [role="tab"] .ico { width: 16px; height: 16px; }
.fd-pestanas [role="tab"]:hover { color: var(--text-primary); }
.fd-pestanas [role="tab"][aria-selected="true"] { color: var(--text-primary); font-weight: 650; border-bottom-color: var(--enlace); }
.fd-cuenta:empty { display: none; }
.fd-cuenta { min-width: 18px; padding: 0 5px; border-radius: 999px; font-size: 11px; font-weight: 700; background: var(--surface-2); color: var(--text-secondary); text-align: center; }
.fd-cuerpo { flex: 1; overflow-y: auto; overscroll-behavior: contain; }
.fd-panel { display: flex; flex-direction: column; gap: 12px; padding: 16px 20px 20px; }
.fd-panel:focus-visible { outline-offset: -2px; }
.fd-cargando { display: flex; align-items: center; gap: 8px; }
.fd-intro { font-size: 13px; }
.fd-datos { display: grid; gap: 10px 16px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 180px), 1fr)); margin: 0; }
.fd-datos dt { font-size: 11px; font-weight: 650; text-transform: uppercase; letter-spacing: .4px; color: var(--muted); }
.fd-datos dd { margin: 0; overflow-wrap: anywhere; }
.fd-metricas { display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); }
.fd-metrica { display: flex; flex-direction: column; padding: 10px 12px; border-radius: var(--radio-s); background: var(--surface-1); border: 1px solid var(--border); }
.fd-metrica-valor { font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; }
.fd-metrica-nombre { font-size: 12px; color: var(--text-secondary); }
.fd-ir { display: flex; flex-wrap: wrap; gap: 8px; }
.fd-tag { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 650; padding: 1px 7px; border-radius: 6px; background: var(--surface-2); color: var(--text-secondary); }
.fd-tag .ico { width: 12px; height: 12px; }
.fd-tag-actual { color: var(--good-text); background: color-mix(in srgb, var(--good) 13%, transparent); }
.fd-tag-resuelto { color: var(--good-text); background: color-mix(in srgb, var(--good) 13%, transparent); }

/* Vídeo con marcas de comentarios */
.fd-video-zona { display: flex; flex-direction: column; gap: 8px; }
.fd-video-controles { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.fd-video-controles select { flex: 1 1 180px; min-width: 0; width: auto; }
.fd-video-marco { position: relative; display: grid; place-items: center; min-height: 120px; background: #000; border-radius: var(--radio-s); overflow: hidden; }
.fd-video, .fd-imagen { display: block; width: 100%; max-height: min(62vh, 560px); background: #000; object-fit: contain; }
.fd-video-aviso { padding: 24px 16px; color: #ddd; text-align: center; }
.fd-video-aviso a { color: #fff; text-decoration: underline; }
.fd-marcas { position: relative; height: 14px; margin: 0 6px; border-radius: 999px; background: var(--surface-2); }
.fd-marca { position: absolute; top: 50%; width: 14px; height: 14px; padding: 0; transform: translate(-50%, -50%); border-radius: 50%;
  border: 2px solid var(--card); background: var(--s2); cursor: pointer; box-shadow: var(--sombra); }
.fd-marca:hover, .fd-marca:focus-visible { transform: translate(-50%, -50%) scale(1.3); }
.fd-marca.resuelta { background: var(--good); }

/* Comentarios */
.fd-comentarios { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.fd-comentario { display: flex; gap: 10px; align-items: flex-start; }
.fd-autor-avatar { display: inline-grid; place-items: center; width: 30px; height: 30px; flex: none; border-radius: 50%;
  background: var(--surface-2); color: var(--text-primary); font-size: 13px; font-weight: 700; border: 1px solid var(--border); }
.fd-comentario.mio .fd-autor-avatar { background: var(--accent); color: var(--on-accent); }
.fd-comentario-cuerpo { flex: 1; min-width: 0; padding: 8px 12px; border-radius: 4px var(--radio) var(--radio) var(--radio); background: var(--surface-1); border: 1px solid var(--border); }
.fd-comentario.mio .fd-comentario-cuerpo { background: color-mix(in srgb, var(--info) 7%, var(--card)); }
.fd-comentario.resuelto .fd-comentario-cuerpo { opacity: .7; }
.fd-comentario-cabeza { font-size: 13px; }
.fd-comentario-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.fd-comentario-texto { margin-top: 4px; white-space: pre-wrap; overflow-wrap: anywhere; }
.fd-mencion { color: var(--enlace); font-weight: 650; }
.fd-seg { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px 1px 5px; border-radius: 999px; border: 0; cursor: pointer;
  font: inherit; font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; color: #fff; background: var(--s2); }
.fd-seg .ico { width: 14px; height: 14px; }
.fd-seg:hover { background: color-mix(in srgb, var(--s2) 85%, #000); }
.fd-resolver { margin: 4px -8px -4px; }
.fd-sin-comentarios { display: flex; align-items: center; gap: 8px; font-size: 14px; padding: 8px 0; }
.fd-form { display: grid; gap: 8px; padding-top: 12px; border-top: 1px solid var(--border); }
.fd-form label { margin: 0; }
.fd-menciones { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.fd-mencion-boton { flex: none; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--border-fuerte); background: var(--card);
  color: var(--text-secondary); font: inherit; font-size: 12px; cursor: pointer; }
.fd-mencion-boton:hover { color: var(--text-primary); background: var(--surface-2); }
.fd-form-botones { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }

/* Historial (línea de tiempo) */
.fd-linea { list-style: none; margin: 0; padding: 0 0 0 4px; }
.fd-evento { position: relative; display: flex; gap: 12px; padding-bottom: 14px; }
.fd-evento::before { content: ""; position: absolute; left: 5px; top: 14px; bottom: 0; width: 2px; background: var(--grid); }
.fd-evento:last-child::before { display: none; }
.fd-evento-punto { flex: none; width: 12px; height: 12px; margin-top: 4px; border-radius: 50%; background: var(--axis); border: 2px solid var(--card); box-shadow: 0 0 0 1px var(--axis); }
.fd-ev-bien .fd-evento-punto { background: var(--good); box-shadow: 0 0 0 1px var(--good); }
.fd-ev-aviso .fd-evento-punto { background: var(--warning); box-shadow: 0 0 0 1px var(--warning); }
.fd-ev-comentario .fd-evento-punto { background: var(--s2); box-shadow: 0 0 0 1px var(--s2); }
.fd-evento-cuerpo { min-width: 0; }
.fd-evento-meta { font-size: 13px; }
.fd-evento-extra { margin-top: 2px; font-size: 14px; color: var(--text-secondary); white-space: pre-wrap; overflow-wrap: anywhere; }

/* Versiones */
.fd-versiones { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.fd-version { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--radio-s); border: 1px solid var(--border); background: var(--surface-1); }
.fd-version.actual { border-color: color-mix(in srgb, var(--good) 40%, var(--border)); }
.fd-version-num { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; font-weight: 700;
  color: var(--on-accent); background: var(--accent); }
.fd-version.actual .fd-version-num { background: var(--good); color: #fff; }
.fd-version-cuerpo { flex: 1; min-width: 0; }

@media (max-width: 640px) {
  .fd { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; border: 0; border-radius: 0; }
  .fd-marco { height: 100dvh; max-height: 100dvh; }
  .fd-cabeza { padding: calc(12px + env(safe-area-inset-top)) 8px 8px 16px; }
  .fd-panel { padding: 14px 16px calc(20px + env(safe-area-inset-bottom)); }
  .fd-pestanas { padding: 0 6px; }
  .fd-pestanas [role="tab"] { padding: 10px 9px; }
  .fd-form-botones .boton { flex: 1 1 auto; }
}
@media (prefers-reduced-motion: reduce) { .fd-marca:hover, .fd-marca:focus-visible { transform: translate(-50%, -50%); } }

/* ---------- Enlaces para compartir (pestaña «Enlace sin usuario» y «Enlace para subir» de Modelos) ---------- */
.en { display: flex; flex-direction: column; gap: 12px; }
.en-crear { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; }
.en-dias { margin: 0; min-width: 120px; }
.en-botones { display: flex; flex-wrap: wrap; gap: 8px; }
.en-nuevo { padding: 12px; border-radius: var(--radio-s); border: 1px solid var(--border); background: var(--accent-suave); display: flex; flex-direction: column; gap: 8px; }
.en-copiar { display: flex; gap: 8px; }
.en-copiar input { flex: 1 1 auto; min-width: 0; }
.en-titulo { font-size: 14px; margin-top: 4px; }
.en-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.en-item { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--grid); }
.en-item:last-child { border-bottom: 0; }
.en-meta { font-size: 12px; margin: 2px 0 0; }
.en-inactivo { opacity: .55; }
.ag-enlaces { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--grid); }

/* ---------- Panel de la agencia (js/insights.js) ---------- */
.pn-filtros { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; padding-block: 4px 12px; margin-bottom: 14px; border-bottom: 1px solid var(--border); }
@media (min-width: 900px) { .pn-filtros { position: sticky; top: 0; z-index: 6; padding-top: 10px; background: color-mix(in srgb, var(--page) 94%, transparent); backdrop-filter: blur(8px); } }
.pn-filtro { display: flex; align-items: center; gap: 8px; min-width: 0; max-width: 100%; }
.pn-filtro > span { font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); font-weight: 650; }
.pn-filtro .segmentado { overflow-x: auto; }
.pn-punto { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--c); margin-right: 6px; }
.pn-bloque { margin-bottom: 28px; }
.pn-bloque-titulo { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.pn-bloque-titulo h2 { font-size: 13px; text-transform: uppercase; letter-spacing: .6px; color: var(--text-secondary); font-weight: 700; }
.pn-bloque-titulo span { font-size: 12px; color: var(--muted); }
.pn-bloque .tarjeta h3 { font-size: 15px; font-weight: 650; margin: 0; }
.pn-desc { font-size: 12.5px; color: var(--text-secondary); margin: 2px 0 12px; }
.pn-nota { margin: 6px 0 0; }
.pn-rejilla { display: grid; gap: 12px; }
.pn-rejilla + .pn-rejilla, .pn-separado { margin-top: 12px; }
.pn-r2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); }
.pn-r21 { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
@media (max-width: 860px) { .pn-r21 { grid-template-columns: 1fr; } }
.pn-pie { text-align: center; font-size: 12px; color: var(--muted); padding: 4px 0 8px; }

/* Cifras clave siempre en una fila (Jordi, 17 oct 2026): en pantallas estrechas se desliza de lado. */
.pn-kpis { display: grid; gap: 12px; grid-auto-flow: column; grid-auto-columns: minmax(150px, 1fr); overflow-x: auto;
  scroll-snap-type: x proximity; padding-bottom: 4px; }
.pn-kpis > * { scroll-snap-align: start; }
.pn-kpi { padding: 14px 16px 10px; display: flex; flex-direction: column; gap: 2px; }
.pn-kpi-etq { display: flex; justify-content: space-between; gap: 6px; font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--text-secondary); font-weight: 650; }
.pn-ayuda { color: var(--muted); cursor: help; font-weight: 500; }
.pn-kpi-valor { font-size: clamp(22px, 2.2vw, 28px); font-weight: 750; font-variant-numeric: tabular-nums; letter-spacing: -.02em; line-height: 1.15; }
.pn-kpi-delta { font-size: 12px; font-variant-numeric: tabular-nums; }
.pn-kpi .pn-spark { width: 100%; height: 34px; margin-top: 6px; }
.pn-spark { display: block; width: 90px; height: 24px; overflow: visible; }
.baja { color: var(--bad-text); font-weight: 600; }
.plano { color: var(--muted); }

.pn-tip { position: fixed; pointer-events: none; z-index: 60; min-width: 150px; max-width: 260px; padding: 8px 10px; font-size: 12px;
  background: var(--card); color: var(--text-primary); border: 1px solid var(--border); border-radius: var(--radio-s); box-shadow: var(--sombra-alta); }
.pn-tip b { display: block; margin-bottom: 4px; }
.pn-tip-fila { display: flex; justify-content: space-between; gap: 12px; font-variant-numeric: tabular-nums; }
.pn-tip-fila i { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 6px; background: var(--c); }
.pn-tip-total { font-weight: 650; border-top: 1px solid var(--border); margin-top: 3px; padding-top: 3px; }
.pn-tip-pie { margin-top: 4px; color: var(--text-secondary); }
.pn-barra { stroke: var(--card); stroke-width: 1; }
.pn-hover { fill: var(--text-primary); opacity: 0; }
.pn-hover.activo { opacity: .05; }
.pn-ref { stroke: var(--text-secondary); stroke-width: 1; stroke-dasharray: 3 3; }
.pn-etq { font-size: 12px; fill: var(--text-secondary); font-family: var(--fuente); }
.pn-val { font-size: 11.5px; fill: var(--text-primary); font-family: var(--fuente); font-variant-numeric: tabular-nums; }
.pn-bueno { fill: var(--s3); } .pn-malo { fill: var(--s2); }

.pn-salud { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.pn-alertas { display: grid; gap: 8px; }
.pn-alerta { display: grid; grid-template-columns: 6px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 14px 12px 0; overflow: hidden; }
.pn-alerta::before { content: ""; align-self: stretch; margin: -12px 0; background: var(--sev); }
.pn-sev-rojo { --sev: var(--critical); } .pn-sev-ambar { --sev: var(--warning); } .pn-sev-gris { --sev: var(--axis); }
.pn-alerta-tit { font-size: 14px; font-weight: 650; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pn-alerta-modelo { font-weight: 500; color: var(--text-secondary); }
.pn-alerta-txt { font-size: 13px; color: var(--text-secondary); margin-top: 2px; }
.pn-sev { font-size: 10.5px; text-transform: uppercase; letter-spacing: .5px; font-weight: 700; padding: 1px 7px; border-radius: 999px; }
.pn-sev-rojo .pn-sev { color: var(--bad-text); background: color-mix(in srgb, var(--critical) 12%, var(--card)); }
.pn-sev-ambar .pn-sev { color: var(--warning-text); background: color-mix(in srgb, var(--warning) 16%, var(--card)); }
.pn-sev-gris .pn-sev { color: var(--text-secondary); background: var(--surface-2); }
@media (max-width: 560px) { .pn-alerta { grid-template-columns: 6px minmax(0, 1fr); } .pn-alerta .boton { grid-column: 2; justify-self: start; } }
.pn-todo-bien { display: flex; align-items: center; gap: 8px; color: var(--good-text); font-weight: 600; }

.pn-ranking { display: grid; gap: 14px; }
.pn-rk { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 4px 10px; align-items: center; }
.pn-tenue { opacity: .45; }
.pn-rk-pos { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.pn-rk-nombre { font-size: 14px; font-weight: 600; min-width: 0; }
.pn-rk-num { font-size: 14px; font-weight: 650; font-variant-numeric: tabular-nums; }
.pn-rk-barra { grid-column: 2 / 4; height: 8px; background: var(--surface-2); border-radius: 4px; overflow: hidden; }
.pn-rk-barra i { display: block; width: 0; height: 100%; background: var(--c); border-radius: 4px; }
.pn-rk-pie { grid-column: 2 / 4; font-size: 12px; color: var(--text-secondary); font-variant-numeric: tabular-nums; }

.pn-tabla { width: 100%; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
.pn-tabla th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .4px; color: var(--muted); font-weight: 650; padding: 6px 8px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.pn-tabla td { padding: 9px 8px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.pn-tabla tr:last-child td { border-bottom: 0; }
.pn-tabla .num { text-align: right; }
.pn-cuenta { font-weight: 600; }
.pn-sub { font-size: 12px; color: var(--text-secondary); }

.pn-embudo { display: grid; gap: 10px; }
.pn-paso { display: grid; grid-template-columns: 104px minmax(0, 1fr) 46px; gap: 6px 10px; align-items: center; }
.pn-paso-nombre { font-size: 13px; font-weight: 600; }
.pn-paso-pista { height: 30px; background: var(--surface-2); border-radius: 6px; position: relative; overflow: hidden; }
.pn-paso-barra { position: absolute; inset: 0 auto 0 0; width: 0; min-width: 36px; background: var(--accent); border-radius: 6px; display: flex; align-items: center; padding-left: 10px;
  color: var(--on-accent); font-size: 13px; font-weight: 650; font-variant-numeric: tabular-nums; }
.pn-paso-pct { font-size: 12px; color: var(--text-secondary); text-align: right; font-variant-numeric: tabular-nums; }
.pn-paso-atasco { grid-column: 2 / 4; justify-self: start; display: inline-flex; align-items: center; gap: 5px; font: inherit; font-size: 12px; color: var(--warning-text);
  background: none; border: 0; padding: 0; cursor: pointer; text-align: left; }
.pn-paso-atasco .ico { width: 14px; height: 14px; }
.pn-paso-atasco:hover { text-decoration: underline; }
.pn-tiempos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border); }
.pn-tiempo span { font-size: 12px; color: var(--text-secondary); }
.pn-tiempo b { display: block; font-size: 20px; font-variant-numeric: tabular-nums; }
.pn-tiempo small { font-size: 11.5px; color: var(--muted); }

.pn-pestanas { margin-bottom: 10px; }
.pn-destacado { margin-top: 10px; font-size: 13px; padding: 8px 10px; border-radius: var(--radio-s); background: var(--accent-suave); }
.pn-calor { display: grid; grid-template-columns: 36px repeat(8, minmax(30px, 1fr)); gap: 3px; font-size: 11px; min-width: 300px; }
.pn-calor-h { color: var(--muted); text-align: center; font-variant-numeric: tabular-nums; }
.pn-calor-d { color: var(--text-secondary); align-self: center; font-weight: 600; text-transform: capitalize; }
.pn-celda { height: 34px; border-radius: 5px; display: grid; place-items: center; font-variant-numeric: tabular-nums; }
/* Texto de cada nivel con su propio token por tema: contraste ≥ 4,5:1 en claro y en oscuro. */
.pn-c0 { background: var(--heat-0); color: var(--heat-0-text); } .pn-c1 { background: var(--heat-1); color: var(--heat-1-text); }
.pn-c2 { background: var(--heat-2); color: var(--heat-2-text); } .pn-c3 { background: var(--heat-3); color: var(--heat-3-text); }
.pn-c4 { background: var(--heat-4); color: var(--heat-4-text); }
.pn-cv { background: var(--surface-2); color: var(--muted); }
.pn-escala { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--muted); margin-top: 10px; flex-wrap: wrap; }
.pn-escala i { width: 22px; height: 10px; border-radius: 3px; display: inline-block; }
.pn-escala-nota { margin-left: auto; }

.pn-reels { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); }
.pn-reel { display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.pn-reel-mini { aspect-ratio: 4 / 5; max-width: 100%; position: relative; display: flex; flex-direction: column; justify-content: space-between; padding: 10px; color: #fff;
  background: linear-gradient(160deg, color-mix(in srgb, var(--c) 70%, #000), color-mix(in srgb, var(--c) 25%, #000)); }
.pn-reel-pos { align-self: flex-start; font-size: 12px; font-weight: 700; background: rgba(0, 0, 0, .45); padding: 2px 8px; border-radius: 999px; }
.pn-reel-insignia { position: absolute; top: 10px; right: 10px; font-size: 11px; font-weight: 700; background: #fff; color: #0b0b0b; padding: 2px 8px; border-radius: 999px; }
.pn-reel-hook { font-size: 14px; font-weight: 650; line-height: 1.3; text-shadow: 0 1px 3px rgba(0, 0, 0, .5); overflow-wrap: anywhere; }
.pn-reel-vis { font-size: 22px; font-weight: 750; font-variant-numeric: tabular-nums; }
.pn-reel-vis small { font-size: 12px; font-weight: 500; opacity: .85; }
.pn-reel-cuerpo { padding: 10px 12px 12px; display: grid; gap: 7px; }
.pn-reel-nums { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12px; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.pn-reel-nums b { color: var(--text-primary); }
.pn-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.pn-chip { font-size: 11px; padding: 1px 8px; border-radius: 999px; background: var(--surface-2); color: var(--text-secondary); }
.pn-reel-acciones { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 13px; }

/* ---------- Panel de la modelo (js/modelo.js) ---------- */
.nm-animo { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 18px; padding: 12px 14px; border-radius: var(--radio);
  background: color-mix(in srgb, var(--good) 10%, var(--card)); border: 1px solid color-mix(in srgb, var(--good) 26%, transparent);
  color: var(--text-primary); font-size: 15px; font-weight: 600; }
.nm-animo .ico { flex: none; width: 20px; height: 20px; margin-top: 1px; color: var(--good-text); }
.nm-funciona { display: grid; gap: 10px; }
.nm-fn-fila { display: grid; grid-template-columns: minmax(90px, 34%) minmax(0, 1fr) 34px; gap: 10px; align-items: center; font-size: 13px; }
.nm-fn-nombre { color: var(--text-secondary); overflow-wrap: anywhere; }
.nm-fn-pista { position: relative; height: 14px; background: var(--surface-2); border-radius: 7px; }
.nm-fn-pista i { position: absolute; inset: 0 auto 0 0; width: 0; border-radius: 7px; }
.nm-fn-bien { background: var(--s3); }
.nm-fn-flojo { background: var(--s2); opacity: .75; }
.nm-fn-normal { position: absolute; top: -3px; bottom: -3px; left: 0; width: 0; border-right: 2px dashed var(--text-secondary); pointer-events: none; }
.nm-fn-valor { font-weight: 650; font-variant-numeric: tabular-nums; text-align: right; }
/* fin panel modelo */

/* ---------- Panel de editores (js/editores.js) ---------- */
.ed-panel .pn-kpis { grid-template-columns: repeat(auto-fill, minmax(min(100%, 170px), 1fr)); }
.ed-panel .pn-pie .boton { margin-inline: auto; }
/* fin panel editores */

/* ---------- Panel de posters (js/posters.js) ---------- */
.ps-cola-titulo { margin-top: 4px; }
.pn-sev.ps-sev-rojo { color: var(--bad-text); background: color-mix(in srgb, var(--critical) 12%, var(--card)); margin-left: auto; }
/* Reel que el sistema cree que es de esta ficha (lib/emparejar.py) */
.ps-sugerido { display: grid; gap: 8px; margin: 10px 0; padding: 10px 12px; border-radius: var(--radio-s);
  background: color-mix(in srgb, var(--info) 9%, var(--card)); border: 1px solid color-mix(in srgb, var(--info) 30%, transparent); font-size: 14px; }
.ps-sugerido-botones { display: flex; gap: 8px; flex-wrap: wrap; }
/* fin panel posters */

/* ---------- Sugerencias (todos los roles) ---------- */
.sug-boton { width: 100%; margin-top: 10px; justify-content: center; }
.campana.sug-movil { width: auto; display: inline-flex; align-items: center; gap: 4px; padding: 0 8px; font: inherit; font-size: 12px; font-weight: 600; }
.ps-sugerido-motivo { font-size: 13px; margin: 0; }
.sug-dialogo { width: min(480px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); padding: 0; color: var(--text-primary);
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radio-l); box-shadow: var(--sombra-alta); }
.sug-dialogo::backdrop { background: rgba(0, 0, 0, .45); }
.sug-cuerpo { display: flex; flex-direction: column; gap: 10px; padding: 20px; }
.sug-cuerpo h2 { font-size: 17px; }
.sug-cuerpo textarea { width: 100%; resize: vertical; }
.sug-botones { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
.sug-lista { display: grid; gap: 10px; }
.sug-item { display: grid; gap: 6px; }
.sug-cabeza { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 13px; color: var(--text-secondary); }
.sug-texto { font-size: 15px; white-space: pre-wrap; overflow-wrap: anywhere; }
.sug-acciones { display: flex; flex-wrap: wrap; gap: 6px; }
.pn-c-env { --c: var(--axis); } /* «Enviadas» en «¿Cumplen lo que enviamos?» (neutro: el color va a lo hecho) */

/* ---------- Análisis de reels (js/analisis.js) ---------- */
.an-filtros { display: grid; gap: 10px; padding-block: 4px 12px; margin-bottom: 14px; border-bottom: 1px solid var(--border); }
@media (min-width: 900px) { .an-filtros { position: sticky; top: 0; z-index: 6; padding-top: 10px; background: color-mix(in srgb, var(--page) 94%, transparent); backdrop-filter: blur(8px); } }
.an-fila { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; }
.an-selects { align-items: flex-end; }
.an-campo { display: grid; gap: 3px; min-width: 0; flex: 1 1 140px; max-width: 220px; }
.an-campo > span { font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); font-weight: 650; }
.an-campo select, .an-campo input { width: 100%; min-height: 34px; font-size: 13px; }
.an-buscar { flex: 2 1 220px; max-width: 360px; }
.an-ejemplo { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-secondary); margin-left: auto; cursor: pointer; }
.an-limpiar { align-self: flex-end; }
.an-nota { font-size: 12.5px; color: var(--text-secondary); margin: 0 0 10px; }
.an-rejilla-dims { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); }
.an-dim h3 { margin-bottom: 10px; }
.an-dim-vacia { opacity: .8; }
.an-barras { display: grid; gap: 4px; }
.an-barra-fila { display: grid; grid-template-columns: minmax(0, 9em) minmax(0, 1fr) auto; grid-template-rows: auto auto; gap: 2px 10px; align-items: center;
  width: 100%; padding: 5px 6px; border: 0; border-radius: var(--radio-s); background: transparent; color: var(--text-primary); font: inherit; text-align: left; cursor: pointer; }
.an-barra-fila:hover { background: var(--accent-suave); }
.an-barra-nombre { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.an-barra-pista { height: 10px; background: var(--surface-2); border-radius: 5px; overflow: hidden; }
.an-barra-pista i { display: block; width: 0; height: 100%; border-radius: 5px; background: var(--s1); }
.an-barra-pista i.an-mejor { background: var(--s3); }
.an-barra-pista i.an-peor { background: var(--s2); }
.an-barra-valor { font-size: 13px; font-weight: 650; font-variant-numeric: tabular-nums; text-align: right; }
.an-barra-n { grid-column: 2 / 4; font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.an-sin { margin-top: 10px; }
.an-sin summary { cursor: pointer; font-size: 13px; color: var(--text-secondary); margin-bottom: 10px; }
.an-dims-sel .segmentado { flex-wrap: nowrap; }
.an-tabla-comp .an-oportunidad td { background: color-mix(in srgb, var(--warning) 8%, var(--card)); }
.an-punto { cursor: pointer; fill-opacity: .75; }
.an-punto:hover, .an-punto:focus { fill-opacity: 1; stroke-width: 3; }
.an-ranking-cabeza { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.an-ranking th .an-orden { border: 0; background: none; color: inherit; font: inherit; text-transform: inherit; letter-spacing: inherit; cursor: pointer; padding: 0; }
.an-fila-reel { cursor: pointer; }
.an-fila-reel:hover td { background: var(--accent-suave); }
.an-pos { color: var(--muted); font-variant-numeric: tabular-nums; }
.an-reel-celda { display: flex; gap: 10px; align-items: center; min-width: 260px; }
.an-reel-texto { display: grid; gap: 3px; min-width: 0; }
.an-reel-gancho { font-size: 13px; color: var(--text-primary); max-width: 360px; overflow-wrap: anywhere; }
.an-mini { width: 44px; height: 56px; border-radius: 6px; object-fit: cover; flex: 0 0 auto; }
.an-mini-vacia { display: inline-grid; place-items: center; color: #fff; background: color-mix(in srgb, var(--c) 60%, #000); }
.an-mini-vacia .ico { width: 16px; height: 16px; }
.an-mas { display: flex; justify-content: center; margin-top: 10px; }
.an-comp-form { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: flex-end; margin-bottom: 6px; }
.an-comp-acc { white-space: nowrap; text-align: right; }
.an-dialogo { width: min(720px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); padding: 0; color: var(--text-primary);
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radio-l); box-shadow: var(--sombra-alta); }
.an-dialogo::backdrop { background: rgba(0, 0, 0, .5); }
.an-dlg { display: flex; flex-direction: column; max-height: calc(100dvh - 32px); }
.an-dlg-cabeza { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; padding: 16px 12px 8px 20px; }
.an-dlg-cabeza h2 { font-size: 18px; margin-top: 6px; overflow-wrap: anywhere; }
.an-dlg-cuerpo { overflow-y: auto; padding: 4px 20px 12px; display: grid; gap: 12px; }
.an-dlg-cuerpo h3 { font-size: 14px; }
.an-dlg-arriba { display: flex; gap: 16px; flex-wrap: wrap; align-items: flex-start; }
.an-dlg-mini { width: 120px; height: 160px; border-radius: 10px; object-fit: cover; flex: 0 0 auto; }
.an-dlg-mini.an-mini-vacia .ico { width: 28px; height: 28px; }
.an-dlg-cifras { flex: 1 1 260px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.an-dlg-cifras span { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .4px; color: var(--muted); font-weight: 650; }
.an-dlg-cifras b { font-size: 20px; font-variant-numeric: tabular-nums; }
.an-dlg-datos { display: grid; gap: 8px; margin: 0; }
.an-dlg-datos dt { font-size: 11px; text-transform: uppercase; letter-spacing: .4px; color: var(--muted); font-weight: 650; }
.an-dlg-datos dd { margin: 2px 0 0; font-size: 14px; overflow-wrap: anywhere; white-space: pre-wrap; }
.an-transcripcion summary { cursor: pointer; font-size: 13px; color: var(--text-secondary); }
.an-transcripcion p { font-size: 13px; white-space: pre-wrap; margin-top: 6px; }
.an-dlg-acciones { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: flex-end; padding: 12px 20px 16px; border-top: 1px solid var(--border); }
.an-dlg-acciones a { margin-right: auto; font-size: 14px; }
@media (max-width: 560px) { .an-dlg-cifras { grid-template-columns: repeat(2, minmax(0, 1fr)); } .an-campo { max-width: none; } }

/* ---------- Arreglos agencia (equipo 3) ---------- */
.ag-prob-rojo { border-left-color: var(--critical); }
.ag-sol-nota { font-size: 12.5px; margin-top: 6px; }
.an-chip-filtro { display: inline-flex; align-items: center; gap: 4px; font: inherit; font-size: 12px; padding: 3px 10px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--accent-suave); color: var(--text-primary); cursor: pointer; }
.an-chip-filtro:hover { background: var(--surface-2); }

/* Contenido · «Requieren atención» (modelos, editores, posters) */
.c-atencion { display: grid; gap: 12px; margin-bottom: 16px; }
.c-atencion-cabeza { display: grid; gap: 2px; }
.c-atencion-cabeza p { margin: 0; }
.c-atencion-titulo { margin: 0; font-size: 16px; font-weight: 650; text-wrap: balance; }
.c-atencion-roles { overflow-x: auto; }
.c-atencion-roles button { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.c-cuenta { font-variant-numeric: tabular-nums; font-weight: 700; }
.c-punto { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; background: var(--c); }
.c-punto-rojo { --c: var(--critical); }
.c-punto-ambar { --c: var(--warning); }
.c-punto-verde { --c: var(--good); }
.c-motivo .pill { white-space: normal; }
.c-persona { font-size: 12px; }
.c-atencion-nota { margin: 0 0 10px; font-size: 13px; }

/* Cuentas · «Añadir cuenta» */
.ag-cuenta-nueva { display: grid; gap: 12px; justify-items: start; margin-bottom: 16px; }
.ag-cuenta-nueva .formulario { justify-self: stretch; }
.ag-cuenta-titulo { margin: 0 0 4px; font-size: 16px; font-weight: 650; }
.ag-cuenta-nota { margin: 0; font-size: 13px; }

/* ---------- Menú lateral plegado (solo iconos; botón en la cabecera del menú) ---------- */
.lateral-botones { display: flex; align-items: center; gap: 2px; }
.plegar-flecha { transition: transform .2s ease; transform-origin: 14px 12px; }
@media (min-width: 900px) {
  body.lateral-plegada { --lateral: 68px; }
  body.lateral-plegada .lateral { padding-inline: 10px; align-items: center; }
  body.lateral-plegada .lateral-cabeza { flex-direction: column; gap: 10px; }
  body.lateral-plegada .lateral-botones { flex-direction: column; }
  body.lateral-plegada .marca { padding: 0; }
  body.lateral-plegada .plegar-flecha { transform: scaleX(-1); }
  /* Los textos se esconden a la vista pero siguen ahí para los lectores de pantalla. */
  body.lateral-plegada .marca-texto, body.lateral-plegada .nav-item > span:not(.nav-insignia),
  body.lateral-plegada .usuario-texto, body.lateral-plegada .lateral-pie [data-salir] > span,
  body.lateral-plegada .sug-boton > span {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }
  body.lateral-plegada .nav { width: 100%; }
  body.lateral-plegada .nav-item { justify-content: center; padding: 10px 0; position: relative; }
  body.lateral-plegada .nav-item .nav-insignia { position: absolute; top: 2px; right: 6px; margin: 0; }
  body.lateral-plegada .lateral-pie { flex-direction: column; width: 100%; }
  body.lateral-plegada .usuario { padding-left: 0; }
  body.lateral-plegada .lateral-pie [data-salir], body.lateral-plegada .sug-boton { padding-inline: 0; width: 38px; justify-content: center; }
}
@media (max-width: 899px) { .lateral-plegar { display: none; } }
.lateral-pie [data-salir] .ico { width: 16px; height: 16px; }


/* ---------- Posters: «Pendiente de confirmar», cola por modelo y cuenta, motivos de un clic (js/posters.js) ---------- */
.ps-confirmar { padding: 14px; border-radius: var(--radio-l); background: color-mix(in srgb, var(--info) 6%, var(--page));
  border: 1px solid color-mix(in srgb, var(--info) 28%, transparent); }
.ps-confirmar .resumen-linea { color: var(--text-secondary); }
.ps-conf { border-left: 3px solid var(--info); }
.ps-conf p { margin: 0; font-size: 14px; overflow-wrap: anywhere; }
.ps-conf .ficha-titulo { font-size: 15px; }
.ps-cuentas { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: -4px 0 12px; font-size: 13px; }
.ps-cuentas .etiqueta { overflow-wrap: anywhere; }
.ps-subgrupo { margin-bottom: 16px; }
.ps-subgrupo-titulo { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 8px; font-size: 13px; font-weight: 650;
  color: var(--text-secondary); overflow-wrap: anywhere; }
.ps-subgrupo-titulo .ico { width: 15px; height: 15px; color: var(--muted); }
.ps-titular > div { flex: 1 1 auto; }
.ps-bajar { flex: none; align-self: flex-start; }
.ps-sug-aviso span { overflow-wrap: anywhere; }
.ps-sug-aviso .boton { min-height: 28px; padding: 2px 8px; color: inherit; text-decoration: underline; }
.ps-quien { font-size: 13px; opacity: .85; }
.ps-motivo-titulo { margin: 0; font-size: 13px; font-weight: 600; }
.ps-motivos { display: flex; flex-wrap: wrap; gap: 8px; }
.ps-motivos .boton { flex: 1 1 auto; }
.ps-motivo-otro { display: grid; gap: 8px; }
.ps-motivo-otro textarea { width: 100%; resize: vertical; }
.ps-nota-ayuda { margin: 0; font-size: 13px; }
/* fin posters: confirmar, cola y motivos */

/* ---------- Guía de bienvenida (todos los roles; js/guia.js) ---------- */
.guia-dialogo { width: min(440px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); overflow-y: auto; padding: 0; color: var(--text-primary);
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radio-l); box-shadow: var(--sombra-alta); }
.guia-dialogo::backdrop { background: rgba(0, 0, 0, .45); }
.guia-cuerpo { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 20px 20px 18px; }
.guia-cerrar { position: absolute; top: 8px; right: 8px; width: 40px; padding: 0; }
.guia-cerrar .ico { width: 18px; height: 18px; }
.guia-paso { font-size: 12px; font-weight: 650; letter-spacing: .4px; text-transform: uppercase; color: var(--muted); }
.guia-icono { display: inline-grid; place-items: center; width: 52px; height: 52px; border-radius: 14px;
  background: var(--accent-suave); color: var(--accent); }
.guia-icono .ico { width: 26px; height: 26px; }
.guia-cuerpo h2 { font-size: 19px; line-height: 1.25; padding-right: 32px; }
.guia-texto { display: grid; gap: 8px; width: 100%; font-size: 15px; line-height: 1.5; color: var(--text-secondary); }
.guia-hola { font-weight: 600; color: var(--text-primary); }
.guia-pista { display: flex; gap: 8px; align-items: flex-start; padding: 10px 12px; border-radius: var(--radio-s);
  background: var(--surface-2); font-size: 14px; color: var(--text-primary); }
.guia-pista .ico { width: 18px; height: 18px; flex: 0 0 auto; margin-top: 1px; color: var(--accent); }
.guia-donde { font-size: 13px; color: var(--muted); }
.guia-puntos { display: flex; gap: 6px; align-self: center; }
.guia-puntos span { width: 8px; height: 8px; border-radius: 999px; background: var(--axis); }
.guia-puntos span.activo { width: 22px; background: var(--accent); }
.guia-botones { display: flex; gap: 8px; justify-content: space-between; width: 100%; }
.guia-botones .boton { flex: 1 1 0; }
@media (prefers-reduced-motion: no-preference) { .guia-puntos span { transition: width .2s ease, background .2s ease; } }
/* Botón «Ver la guía» (ordenador: debajo de «Sugerencias») y enlace dentro de la ventana de sugerencias (también móvil). */
.guia-boton { width: 100%; margin-top: 4px; justify-content: center; }
.guia-boton .ico { width: 16px; height: 16px; }
.sug-guia { padding-top: 10px; border-top: 1px solid var(--border); font-size: 13px; }
.sug-guia .enlace { min-height: 32px; text-decoration: underline; text-underline-offset: 2px; }
@media (min-width: 900px) {
  body.lateral-plegada .guia-boton > span {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }
  body.lateral-plegada .guia-boton { padding-inline: 0; width: 38px; }
}

/* ---------- Editores: cola por urgencia y versión final (js/editores.js, js/ficha.js) ---------- */
/* «Mi cola de hoy»: orden, puesto en la cola y plazo de cada vídeo (colores del semáforo) */
.ed-orden { display: flex; align-items: center; gap: 6px 10px; flex-wrap: wrap; margin-bottom: 14px; font-size: 13px; }
.ed-orden .segmentado { max-width: 100%; overflow-x: auto; }
.ed-cola-cuenta { margin: -4px 0 12px; }
.ed-pos { display: inline-grid; place-items: center; min-width: 24px; height: 24px; padding: 0 6px; flex: none; border-radius: 999px;
  font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--on-accent); background: var(--accent); }
.ed-plazo { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 13px; font-weight: 600; color: var(--text-secondary); overflow-wrap: anywhere; }
.ed-plazo .ico { width: 15px; height: 15px; flex: none; }
.ed-plazo-rojo { color: var(--bad-text); }
.ed-plazo-ambar { color: var(--warning-text); }
.ed-plazo-verde { color: var(--good-text); }
/* Subir la versión final = Terminado + aviso al poster (un solo paso) */
.ed-pista { display: flex; align-items: flex-start; gap: 6px; margin: -2px 0 0; font-size: 12.5px; }
.ed-pista .ico { width: 15px; height: 15px; flex: none; margin-top: 1px; color: var(--good-text); }
.ed-ayuda { margin: 0; font-size: 12.5px; }
/* Mi panel: los 5 más urgentes */
.ed-mini-cola { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ed-mc-fila { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 10px 14px; }
.ed-mc-texto { display: grid; gap: 2px; flex: 1 1 220px; min-width: 0; font-size: 14px; overflow-wrap: anywhere; }
.ed-mc-texto .suave { font-size: 12.5px; }
.ed-mc-pie { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-left: auto; }
.ed-mc-mas { margin: 10px 0 0; }
/* Ventana de la ficha: «Pedir a la modelo que lo repita» (editores) */
.fd-repetir { display: grid; gap: 8px; justify-items: start; }
.fd-repetir .ed-caja { justify-self: stretch; }
.fd-repetir-ayuda { margin: 0; font-size: 12.5px; }
/* fin editores: cola y versión final */

/* ---------- Enlace fijo de una ficha: botón «Compartir» y su menú (js/enlace-ficha.js; pedido de Jordi, 18 oct 2026) ---------- */
.cf-boton .ico { width: 16px; height: 16px; flex: none; }
.ig-accion.cf-boton .ico { width: 24px; height: 24px; }
/* Menú pequeño (sin menú de compartir del teléfono): WhatsApp, copiar y el enlace a la vista para copiarlo a mano */
.cf-menu { display: grid; gap: 8px; min-width: 0; padding: 12px; border-radius: var(--radio-s); border: 1px solid var(--border-fuerte);
  background: var(--surface-1); box-shadow: var(--sombra); }
.cf-menu[hidden] { display: none; }
.cf-ayuda { display: flex; align-items: flex-start; gap: 6px; margin: 0; font-size: 12.5px; color: var(--text-secondary); overflow-wrap: anywhere; }
.cf-ayuda .ico { width: 15px; height: 15px; flex: none; margin-top: 2px; }
.cf-botones { display: flex; flex-wrap: wrap; gap: 8px; }
.cf-botones .boton { flex: 1 1 170px; min-width: 0; }
.cf-wa .ico { color: var(--good-text); }
.cf-url { min-width: 0; font-family: var(--mono); color: var(--text-secondary); }
.cf-msg { margin: 0; font-size: 13px; overflow-wrap: anywhere; }
.cf-msg:empty { display: none; }
/* Dónde va: en el detalle, en la cabecera (el menú, entre la cabecera y las pestañas); en «Ya grabado», junto a
   «Ver detalle»; en «Por grabar», en la fila de botones (el menú, debajo de la fila) */
.fd-compartir-hueco { flex: none; display: flex; align-items: center; min-height: 40px; }
.fd-compartir-hueco:empty { display: none; }
.fd .cf-menu { margin: 0 12px 10px 20px; }
.ficha.ig .cf-menu { margin: 8px 14px 0; }
/* Con «Compartir» la fila de la tarjeta tiene 5 botones: menos hueco entre ellos para que «Comentar» y «Compartir»
   quepan enteros en un móvil de 360-390 px (modelo.css va después: aquí hace falta más especificidad) */
.ficha.ig .ig-acciones { gap: 2px; padding-inline: 6px; }
.ficha.ig .ig-acciones .ig-accion { padding-inline: 2px; }
.mo-video .cf-menu { margin-top: 8px; }
.cf-fila { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.fd-sin-acceso { margin: 0; font-size: 13px; }
/* Pantallas de entrada cuando se llega por el enlace de una ficha */
.aviso-ficha { display: flex; align-items: flex-start; gap: 8px; margin: -8px 0 18px; padding: 10px 12px; border-radius: var(--radio-s);
  font-size: 13.5px; color: var(--info-text); background: color-mix(in srgb, var(--info) 10%, var(--card));
  border: 1px solid color-mix(in srgb, var(--info) 30%, transparent); overflow-wrap: anywhere; }
.aviso-ficha .ico { width: 16px; height: 16px; flex: none; margin-top: 2px; }
@media (max-width: 640px) { .fd .cf-menu { margin: 0 8px 8px 16px; } }
/* Móvil muy estrecho: en la cabecera del detalle, solo el icono (el texto sigue ahí para los lectores de pantalla) */
@media (max-width: 380px) {
  .fd-compartir { width: 40px; padding: 0; }
  .fd-compartir .cf-boton-texto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
/* fin enlace fijo de una ficha */

/* ---------- Equipo: una sola lista de personas (= usuarios) y cuentas antiguas (js/agencia.js; Jordi, 18 oct 2026) ---------- */
.eq-bloque { margin-bottom: 22px; }
.eq-bloque .grupo-titulo .ico { width: 17px; height: 17px; color: var(--muted); }
.eq-tabla td { vertical-align: top; }
.eq-tabla tr.eq-baja td { color: var(--muted); }
.eq-tabla tr.fila-editar td { background: var(--surface-1); }
.eq-tabla code { overflow-wrap: anywhere; }
.eq-tabla .clave { margin-top: 0; }
.eq-nombre, .eq-correo, .eq-notas { min-width: 0; overflow-wrap: anywhere; }
.eq-notas { font-size: 12.5px; color: var(--text-secondary); }
.eq-estado { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.eq-sub { font-size: 12px; }
.eq-acciones { display: inline-flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 4px; }
.eq-acciones .boton { margin: 0; }
.eq-fila-msg { flex-basis: 100%; margin: 2px 0 0; font-size: 12px; text-align: right; }
.eq-fila-msg:empty { display: none; }
.eq-antiguas { margin-top: 16px; }
.eq-antiguas > .ag-equipo-nota { margin: 4px 0 10px; }
/* Móvil (390 px): cada persona es una tarjeta con sus datos uno debajo de otro y los botones al pie */
@media (max-width: 720px) {
  .eq-tabla td { min-width: 0; }
  .eq-tabla td > * { min-width: 0; }
  .eq-estado { align-items: flex-end; }
  .eq-tabla .eq-nombre { font-size: 15px; }
  .eq-tabla .celda-acciones::before { display: none; }
  .eq-tabla .celda-acciones { justify-content: flex-end; padding-top: 8px !important; }
  .eq-tabla tr.fila-editar { padding: 0 14px 14px; }
  .eq-tabla tr.fila-editar > td { display: block; text-align: left; padding: 0 !important; }
  .eq-tabla tr.fila-editar > td::before { display: none; }
}
/* fin equipo */

/* ---------- Atascos: tablero tipo Trello (ordenador) y filtros ----------
   En ordenador (≥ 900 px) se ve el tablero (.ag-tablero) y se oculta la lista; en móvil, al revés.
   Cada columna tiene su propio scroll; si no caben (p. ej. «Por persona»), el scroll horizontal es solo del tablero. */
/* Filtros plegados tras «Filtros» (con cuántos hay puestos) y «Quitar filtros» al lado cuando hay alguno. */
.ag-at-filtros-barra { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 12px; }
.ag-at-filtros-barra .boton[aria-expanded="true"] { background: var(--surface-2); border-color: var(--border-fuerte); }
.ag-at-filtros { margin-bottom: 12px; }
.ag-at-filtros .ag-at-ayuda { grid-column: 1 / -1; font-size: 12px; margin: -4px 0 0; }
.ag-tablero { display: none; }
/* «Por persona»: un bloque por tipo (Modelos, Editores, Posters) con su título, contador y cuántas van tarde. */
.ag-tipo-cabeza { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0 0 10px; }
.ag-tipo-titulo { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 16px; font-weight: 700; }
.ag-tipo-titulo .ico { width: 18px; height: 18px; color: var(--muted); }
.ag-tipo-personas { font-size: 12.5px; }
.ag-tipo-movil { display: grid; gap: 12px; }
.ag-tipo-movil + .ag-tipo-movil { margin-top: 10px; padding-top: 14px; border-top: 1px solid var(--grid); }
.ag-tipo-movil .ag-tipo-cabeza { margin: 0; }
@media (min-width: 900px) {
  .ag-at-filtros { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .ag-atascos { display: none; }
  .ag-tablero {
    display: grid; grid-auto-flow: column; grid-auto-columns: minmax(270px, 1fr); gap: 14px; align-items: start;
    max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; padding-bottom: 6px;
  }
  .ag-tablero-persona { grid-auto-flow: row; grid-auto-columns: auto; gap: 22px; overflow-x: visible; }
  .ag-tipo { min-width: 0; }
  .ag-tipo-cols {
    display: grid; grid-auto-flow: column; grid-auto-columns: minmax(260px, 300px); gap: 14px; align-items: start;
    max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; padding-bottom: 6px;
  }
  .ag-tipo .ag-col { max-height: max(320px, calc(100vh - 360px)); }
}
.ag-col {
  display: flex; flex-direction: column; min-width: 0; max-height: max(360px, calc(100vh - 300px));
  background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radio-l);
}
.ag-col-cabeza { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; padding: 12px 14px 8px; }
.ag-col-titulo { display: flex; align-items: center; gap: 8px; flex: 1 1 auto; min-width: 0; margin: 0; font-size: 14.5px; font-weight: 650; }
.ag-col-titulo .ico { width: 16px; height: 16px; flex: none; color: var(--muted); }
.ag-col-nombre { min-width: 0; overflow-wrap: anywhere; }
.ag-col-sub { flex-basis: 100%; margin: 0; font-size: 12px; color: var(--text-secondary); }
.ag-col-lista { list-style: none; margin: 0; padding: 4px 10px 12px; display: grid; gap: 8px; overflow-y: auto; min-height: 0; }
.ag-col-vacia { display: flex; align-items: center; gap: 6px; margin: 0; padding: 6px 14px 16px; font-size: 13px; color: var(--good-text); }
.ag-col-vacia .ico { width: 15px; height: 15px; }
.ag-tarjeta {
  display: flex; flex-direction: column; gap: 6px; width: 100%; padding: 10px 12px; text-align: left; cursor: pointer;
  color: inherit; font: inherit; font-size: 13.5px; background: var(--card); border: 1px solid var(--border);
  border-left: 4px solid var(--warning); border-radius: var(--radio-s); box-shadow: var(--sombra);
  transition: border-color .15s, box-shadow .15s, transform .05s;
}
.ag-tarjeta:hover { border-top-color: var(--border-fuerte); border-right-color: var(--border-fuerte); border-bottom-color: var(--border-fuerte); box-shadow: var(--sombra-alta); }
.ag-tarjeta:active { transform: translateY(1px); }
.ag-tarjeta:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }
.ag-tarjeta-rojo { border-left-color: var(--critical); }
.ag-tarjeta-ambar { border-left-color: var(--warning); }
.ag-tarjeta-cabeza { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ag-tarjeta-cabeza .semaforo { font-size: 11.5px; }
.ag-tarjeta-titulo { font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; }
.ag-tarjeta .etiquetas { margin: 0; }
.ag-tarjeta-pie { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; font-size: 12px; color: var(--text-secondary); }
.ag-tarjeta-pie .ico { width: 14px; height: 14px; color: var(--muted); }
.ag-tarjeta-pie .suave { margin-left: auto; }
@media (prefers-reduced-motion: reduce) { .ag-tarjeta { transition: none; } .ag-tarjeta:active { transform: none; } }
/* fin Atascos */

/* ---------- Progreso del equipo y de las modelos (js/progreso.js): Panel (tarjetas compactas que son botones) y
   tarjetas de «Equipo». Jordi, 18 oct 2026. Todo con los tokens del tema (claro y oscuro). ---------- */
.pg-intro { margin-top: -4px; }
.pg-grupo + .pg-grupo { margin-top: 18px; }
.pg-grupo-titulo { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 650; margin: 0; }
.pg-rejilla { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr)); }
/* La tarjeta entera es un botón (lleva a «Atascos» o «Equipo») */
.pg-tarjeta { display: block; width: 100%; text-align: left; font: inherit; color: inherit; cursor: pointer; padding: 14px 16px; }
.pg-tarjeta:hover { border-color: var(--border-fuerte); background: var(--surface-1); }
.pg-tarjeta:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }
.pg-tarjeta .modelo-cabeza { gap: 10px; flex-wrap: wrap; }
.pg-tarjeta .ficha-titulo { font-size: 15px; display: block; }
.pg-tarjeta .modelo-equipo { display: block; font-size: 12.5px; }
.pg-quien { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.pg-tarjeta .cifras { margin-top: 12px; }
.pg-tarjeta .cifra { padding: 6px 8px; }
.pg-tarjeta .cifra-valor { font-size: 17px; }
/* Los datos van en <span> (dentro de un botón no puede haber <dl> ni <div>): mismo aspecto que .datos dt / dd */
.ag-persona .datos > span { display: block; min-width: 0; }
.pg-dt { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .4px; color: var(--muted); font-weight: 600; }
.pg-dd { display: block; margin-top: 2px; font-size: 14px; overflow-wrap: anywhere; }
.ag-persona .barra, .ag-persona .ag-persona-vacio { display: block; }
.barra > .pg-relleno { display: block; height: 100%; width: 0; background: var(--s1); border-radius: 999px; transition: width .2s; }
.ag-barra-bien > .pg-relleno { background: var(--good); }
.ag-barra-medio > .pg-relleno { background: var(--warning); }
.ag-barra-mal > .pg-relleno { background: var(--critical); }
/* Cada modelo con su color de siempre (serie-N, el de los gráficos del Panel) */
.pg-modelo { border-top: 3px solid var(--c, var(--axis)); }
.pg-avatar-modelo { background: color-mix(in srgb, var(--c, var(--axis)) 22%, var(--card)); border-color: color-mix(in srgb, var(--c, var(--axis)) 45%, transparent); }
@media (prefers-reduced-motion: reduce) { .barra > .pg-relleno { transition: none; } }
/* fin progreso */

/* Equipo: lista ordenada (Jordi, 18 oct): nombres sin cortar, correo partido solo en la @, botones en una fila */
.eq-tabla .eq-nombre { overflow-wrap: normal; white-space: nowrap; }
.eq-tabla td:first-child { display: grid; gap: 2px; }
.eq-tabla .eq-notas { white-space: normal; overflow-wrap: anywhere; max-width: 22ch; }
.eq-tabla .eq-correo { overflow-wrap: normal; word-break: normal; }
.eq-tabla .celda-acciones { white-space: nowrap; text-align: right; }
.eq-acciones { flex-wrap: nowrap; gap: 6px; }
.eq-acciones .solo-icono { padding-inline: 8px; }
@media (max-width: 899px) {
  .eq-acciones { flex-wrap: wrap; }
  .eq-tabla td:first-child { display: flex; flex-direction: column; align-items: flex-end; }
}


/* Progreso (Panel y Equipo): la barra de «a tiempo» es fina (antes, sin estas reglas, salía un círculo enorme) */
.pg-tarjeta .barra, .ag-persona .barra, span.barra.ag-barra { display: block; width: 100%; height: 6px; max-height: 6px; min-height: 6px; border-radius: 999px; overflow: hidden; background: var(--surface-2); }
span.barra .pg-relleno { display: block; height: 100%; width: 0; border-radius: 999px; background: var(--s1); }
.ag-barra-bien .pg-relleno { background: var(--good); }
.ag-barra-medio .pg-relleno { background: var(--warning); }
.ag-barra-mal .pg-relleno { background: var(--critical); }