/* =============================================================
   LØVEK PANEL — Sistema visual (rediseño 2026-10, rama design)

   Dos temas de marca, que salen del manual de LØVEK:
     · lovek        (Día)   blanco y gris niebla #EDEDED, tinta negra, acento granate #6D302E
     · lovek-noche  (Noche) negro de marca, acento rosa #E8C5C9
   Una sola familia: Neue Haas Grotesk Display, corte Roman (400), como pide el manual. La
   jerarquía la llevan el tamaño y el color, no el peso.

   Los módulos solo conocen los tokens (--bg-*, --text-*, --accent…) y los semánticos
   (--ok, --warn, --danger, --info, --neutral): ningún color de estado va escrito a mano en JS.
   ============================================================= */

/* ── Tipografía ───────────────────────────────────────────────
   Solo local(): la licencia de escritorio de Neue Haas (Commercial Type) NO permite servirla
   por @font-face ni convertirla a woff2. Se usa si está instalada en el ordenador; si no, el
   panel cae a Helvetica Neue, de la que deriva. Con licencia web, basta con añadir aquí la url(). */
@font-face {
  font-family: 'Lovek Sans';
  src: local('Neue Haas Grotesk Display Pro'), local('NeueHaasDisplay-Roman'),
       local('Neue Haas Grotesk Display Pro 55 Roman'), local('Neue Haas Display');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ── Tema Día (por defecto) ── */
:root,
[data-theme="lovek"] {
  color-scheme: light;
  --font-ui: 'Lovek Sans', 'Helvetica Neue', Helvetica, Arial, system-ui, sans-serif;

  --bg-body:         #f6f6f6;
  --bg-sidebar:      #ededed;
  --bg-surface:      #ffffff;
  --bg-card:         #ffffff;
  --bg-glass:        #ffffff;
  --bg-input:        #ffffff;
  --bg-hover:        rgba(0,0,0,0.04);
  --bg-subtle:       #fafafa;
  --border-color:    #e7e7e7;
  --border:          #e7e7e7;
  --border-input:    #d2d2d2;
  --border-card:     #e7e7e7;
  --border-card-hvr: #c9c9c9;
  --text-primary:    #000000;
  --text-muted:      #6b6b6b;
  --text-on-accent:  #ffffff;
  --accent:          #6d302e;
  --accent-strong:   #571f1d;
  --accent-soft:     #f6e9ea;
  --accent-grad:     #8e4a47;
  --rosa:            #e8c5c9;
  --nav-active-bg:   #ffffff;
  --focus-ring:      rgba(109,48,46,0.20);
  --shadow-soft:     0 1px 2px rgba(0,0,0,0.04);
  --shadow-pop:      0 18px 40px -16px rgba(0,0,0,0.22), 0 2px 8px rgba(0,0,0,0.06);

  --ok:           #2e7a4c;
  --warn:         #9a5b06;
  --danger:       #b42318;
  --danger-solid: #b42318;
  --info:         #2f5d86;
  --neutral:      #767676;
  --violet:       #6a4c8a;
  --teal:         #2b7871;

  --scrollbar-track: transparent;
  --scrollbar-thumb: #c8c8c8;
  /* Gráficos: la paleta sale de la marca y del moodboard (granate, rosa, tinta, brandy, piedra,
     arena, moca). Hex de 6 cifras: charts.js les concatena la opacidad. */
  --chart-c1: #6d302e; --chart-c2: #c48a90; --chart-c3: #1f1f1f;
  --chart-c4: #b29079; --chart-c5: #8c8a80; --chart-c6: #d8c3a5;
  --chart-c7: #5a4d41; --chart-c8: #a65a54;
  --chart-grid: #eeeeee;
}

/* ── Tema Noche ── */
[data-theme="lovek-noche"] {
  color-scheme: dark;
  --bg-body:         #000000;
  --bg-sidebar:      #0d0c0c;
  --bg-surface:      #121111;
  --bg-card:         #151414;
  --bg-glass:        #151414;
  --bg-input:        #1b1919;
  --bg-hover:        rgba(255,255,255,0.05);
  --bg-subtle:       #191717;
  --border-color:    #262323;
  --border:          #262323;
  --border-input:    #3a3636;
  --border-card:     #262323;
  --border-card-hvr: #403b3b;
  --text-primary:    #f4f2f2;
  --text-muted:      #a39d9d;
  --text-on-accent:  #3a1716;
  --accent:          #e8c5c9;
  --accent-strong:   #f3dadd;
  --accent-soft:     rgba(232,197,201,0.12);
  --accent-grad:     #d7a9ae;
  --rosa:            #e8c5c9;
  --nav-active-bg:   #1d1b1b;
  --focus-ring:      rgba(232,197,201,0.25);
  --shadow-soft:     none;
  --shadow-pop:      0 18px 44px -16px rgba(0,0,0,0.8), 0 0 0 1px #2c2828;

  --ok:           #7ccb9a;
  --warn:         #e3b061;
  --danger:       #f09a92;
  --danger-solid: #c2372c;
  --info:         #8db4d9;
  --neutral:      #9a9494;
  --violet:       #b9a0d6;
  --teal:         #7cc7be;

  --scrollbar-track: transparent;
  --scrollbar-thumb: #3a3636;
  --chart-c1: #e8c5c9; --chart-c2: #b65f5a; --chart-c3: #ededed;
  --chart-c4: #c9a58c; --chart-c5: #8c8a80; --chart-c6: #d8c3a5;
  --chart-c7: #9c8572; --chart-c8: #7e6957;
  --chart-grid: #222020;
}

/* =============================================================
   Base
   ============================================================= */

html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }

body {
  font-family: var(--font-ui);
  background-color: var(--bg-body) !important;
  color: var(--text-primary) !important;
  letter-spacing: .006em;
  font-synthesis-weight: none;
}
h1, h2, h3, h4 { letter-spacing: -.005em; text-wrap: balance; }
::selection { background: var(--rosa); color: #000; }

/* Pesos: el manual pide Roman. Lo que en el código va como semibold/bold se queda en 500
   (Medium donde exista; con Neue Haas instalada, Roman). `html` sube la especificidad por
   encima de la hoja que inyecta el CDN de Tailwind. */
html .font-medium, html .font-semibold, html .font-bold, html .font-extrabold,
html b, html strong { font-weight: 500; }
html .font-normal { font-weight: 400; }

/* Colores de Tailwind escritos en los módulos → tokens del tema */
html .text-slate-100, html .text-slate-200, html .text-slate-300 { color: var(--text-primary); }
html .text-slate-400, html .text-slate-500, html .text-slate-600 { color: var(--text-muted); }
html .text-rose-300, html .text-rose-400, html .text-rose-500, html .text-red-400, html .text-red-500 { color: var(--danger); }
html .text-emerald-300, html .text-emerald-400, html .text-emerald-500, html .text-green-400 { color: var(--ok); }
html .text-amber-300, html .text-amber-400, html .text-amber-500, html .text-yellow-400 { color: var(--warn); }
html .hover\:text-rose-400:hover { color: var(--danger); }
html .bg-amber-900\/20 { background-color: color-mix(in srgb, var(--warn) 9%, transparent); }
html .bg-emerald-500 { background-color: var(--accent); color: var(--text-on-accent); }
html .border-slate-700 { border-color: var(--border-card); }

/* Controles de formulario */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="submit"]):not([type="file"]),
select, textarea {
  background-color: var(--bg-input) !important;
  border-color: var(--border-input) !important;
  color: var(--text-primary) !important;
  transition: border-color .15s ease, box-shadow .15s ease;
}
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="submit"]):not([type="file"]):hover,
select:hover, textarea:hover { border-color: color-mix(in srgb, var(--text-primary) 28%, var(--border-input)) !important; }
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="submit"]):not([type="file"]):focus,
select:focus, textarea:focus {
  outline: none;
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px var(--focus-ring);
}
/* Borde por defecto con especificidad de elemento: el reset de Tailwind lo quita y, con el campo
   blanco sobre la tarjeta blanca, un input sin clase `border` desaparecía. Las clases de Tailwind
   (border-0, rounded-*) siguen mandando. */
input:where(:not([type="checkbox"], [type="radio"], [type="range"], [type="submit"], [type="file"], [type="hidden"], [type="color"])),
select, textarea { border-width: 1px; border-style: solid; border-radius: 8px; }
input::placeholder, textarea::placeholder { color: var(--text-muted) !important; opacity: .85; }
input[type="checkbox"], input[type="radio"], input[type="range"] { accent-color: var(--accent); }
select option { background-color: var(--bg-card); color: var(--text-primary); }
input:disabled, select:disabled, textarea:disabled, button:disabled { cursor: not-allowed; }

/* Foco visible para todo lo pulsable (teclado) */
a:focus-visible, button:focus-visible, summary:focus-visible, [role="button"]:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 6px;
}

/* ── Utilidades semánticas ── */
.u-surface  { background-color: var(--bg-surface) !important; }
.u-body     { background-color: var(--bg-body) !important; }
.u-card     { background-color: var(--bg-card) !important; }
.u-input    { background-color: var(--bg-input) !important; }
.u-text     { color: var(--text-primary) !important; }
.u-muted    { color: var(--text-muted) !important; }
.u-accent   { color: var(--accent) !important; }
.u-bg-accent      { background-color: var(--accent) !important; }
.u-bg-accent-soft { background-color: var(--accent-soft) !important; }
.u-border   { border-color: var(--border-color) !important; }
.hover\:u-accent:hover { color: var(--accent) !important; }

/* Alias heredados: «gold» era el acento de la primera versión */
.text-gold   { color: var(--accent) !important; }
.bg-gold     { background-color: var(--accent) !important; color: var(--text-on-accent) !important; }
.border-gold { border-color: var(--accent) !important; }
.focus\:border-gold:focus { border-color: var(--accent) !important; }
.bg-gold { transition: background-color .15s ease, box-shadow .15s ease; }
.bg-gold:hover { background-color: var(--accent-strong) !important; opacity: 1 !important; }
.bg-gold:active { transform: translateY(.5px); }

/* =============================================================
   Estructura: menú lateral + cabecera
   ============================================================= */

#sidebar {
  background: var(--bg-sidebar) !important;
  border-right: 1px solid var(--border-color);
}
.sb-brand {
  display: flex; align-items: center;
  height: 4rem; padding: 0 1.25rem;
  flex-shrink: 0;
}
.sb-nav { padding: .25rem .75rem 1rem; }
.sb-nav-label {
  padding: 1rem .75rem .4rem;
  font-size: .75rem;
  color: var(--text-muted);
}

/* Ítems del menú: el activo es una ficha blanca sobre el gris niebla (en Noche, un gris
   algo más claro) con el icono en el acento. */
.nav-item {
  position: relative;
  display: flex; align-items: center; gap: .7rem;
  min-height: 2.25rem; padding: .4rem .75rem;
  border-radius: 8px;
  font-size: .875rem; line-height: 1.2;
  color: var(--text-primary);
  transition: background-color .15s ease, color .15s ease;
}
.nav-item i { width: 1.1rem; text-align: center; font-size: .85rem; color: var(--text-muted); flex-shrink: 0; transition: color .15s ease; }
.nav-item.nav-inactive { color: var(--text-primary); }
.nav-item.nav-inactive:hover { background-color: color-mix(in srgb, var(--text-primary) 6%, transparent) !important; color: var(--text-primary) !important; }
.nav-item.active-nav {
  background-color: var(--nav-active-bg) !important;
  color: var(--text-primary) !important;
  box-shadow: var(--shadow-soft), 0 0 0 1px color-mix(in srgb, var(--text-primary) 6%, transparent);
}
.nav-item.active-nav i { color: var(--accent); }

/* Compatibilidad: botones de los módulos que reutilizan .nav-inactive como «botón fantasma» */
.nav-inactive { color: var(--text-muted); }
.nav-inactive:hover { background-color: var(--bg-hover) !important; color: var(--text-primary) !important; }

.sb-foot { padding: .75rem; border-top: 1px solid var(--border-color); flex-shrink: 0; }
.sb-user { display: flex; align-items: center; gap: .65rem; padding: .5rem .5rem .6rem; }
.sb-avatar {
  width: 2rem; height: 2rem; border-radius: 999px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--rosa); color: #3a1716; font-size: .85rem;
}
[data-theme="lovek-noche"] .sb-avatar { background: #3a2a2b; color: var(--rosa); }
.sb-link {
  display: flex; align-items: center; gap: .7rem; width: 100%;
  padding: .4rem .5rem; border-radius: 8px;
  font-size: .85rem; color: var(--text-muted); text-align: left;
  transition: background-color .15s ease, color .15s ease;
}
.sb-link i { width: 1.1rem; text-align: center; font-size: .8rem; }
.sb-link:hover { background: color-mix(in srgb, var(--text-primary) 6%, transparent); color: var(--text-primary); }
.sb-link.sb-salir:hover { color: var(--danger); }

/* ── Menú plegado (solo iconos) ──
   Solo en escritorio: en móvil el menú es un cajón que se abre entero. La preferencia la guarda
   layout.js en localStorage (lovek_sidebar) y la pone como clase .sb-mini en <html>. */
.brand-mini {
  display: none;
  width: 22px; aspect-ratio: 286 / 281;
  background-color: currentColor;
  -webkit-mask: url('/img/lovek-o.svg') center / contain no-repeat;
          mask: url('/img/lovek-o.svg') center / contain no-repeat;
  color: var(--text-primary);
}
.sb-brand { justify-content: space-between; gap: .5rem; padding-right: .75rem; position: relative; }
.sb-home { display: inline-flex; align-items: center; }
/* Botón de plegar: el icono del panel lateral, junto al logo */
.sb-toggle {
  display: flex; align-items: center; justify-content: center;
  width: 2rem; height: 2rem; border-radius: 8px; flex-shrink: 0;
  color: var(--text-muted);
  transition: background-color .15s ease, color .15s ease, opacity .15s ease;
}
.sb-toggle:hover { background: color-mix(in srgb, var(--text-primary) 7%, transparent); color: var(--text-primary); }
@media (max-width: 767px) { .sb-toggle { display: none; } }

@media (min-width: 768px) {
  #sidebar { transition: transform .3s ease, width .2s cubic-bezier(.22,1,.36,1); }
  main { transition: margin-left .2s cubic-bezier(.22,1,.36,1); }

  html.sb-mini #sidebar { width: 4.25rem; }
  html.sb-mini main { margin-left: 4.25rem; }
  html.sb-mini .sb-txt { display: none; }
  /* Plegado: la Ø y el botón ocupan el mismo sitio. Con ratón se ve la Ø y al pasar por encima
     aparece el botón (opacidad, no display: el foco de teclado no se pierde); en pantallas
     táctiles, directamente el botón. */
  html.sb-mini .sb-brand { justify-content: center; padding: 0; }
  html.sb-mini .sb-brand .brand-logo { display: none; }
  html.sb-mini .brand-mini { display: block; }
  html.sb-mini .sb-toggle { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
  html.sb-mini .sb-home { transition: opacity .15s ease; }
  html.sb-mini .sb-brand:hover .sb-home,
  html.sb-mini .sb-brand:has(.sb-toggle:focus-visible) .sb-home { opacity: 0; }
  html.sb-mini .sb-brand:not(:hover) .sb-toggle:not(:focus-visible) { opacity: 0; }
  html.sb-mini .sb-nav { padding-left: .6rem; padding-right: .6rem; }
  html.sb-mini .nav-item { justify-content: center; padding-left: 0; padding-right: 0; min-height: 2.5rem; }
  html.sb-mini .nav-item i { font-size: .95rem; }
  /* Contador de pendientes: en plegado, una pastilla pequeña sobre el icono */
  html.sb-mini .nav-item .task-badge,
  html.sb-mini .nav-item .seg-badge {
    position: absolute; top: 2px; right: 4px;
    min-width: 1rem !important; height: 1rem !important; padding: 0 .25rem !important;
    font-size: .6rem !important;
  }
  html.sb-mini .sb-foot { padding-left: .6rem; padding-right: .6rem; }
  html.sb-mini .sb-user { justify-content: center; padding-left: 0; padding-right: 0; }
  html.sb-mini .sb-link { justify-content: center; padding-left: 0; padding-right: 0; min-height: 2.25rem; }
}
@media (min-width: 768px) and (hover: none) {
  html.sb-mini .sb-home { opacity: 0; pointer-events: none; }
  html.sb-mini .sb-brand .sb-toggle { opacity: 1 !important; }
}

/* Cabecera: el fondo de la página, translúcido para que el contenido pase por debajo al hacer
   scroll (es lo único con desenfoque del panel). */
header.u-surface {
  background: color-mix(in srgb, var(--bg-body) 86%, transparent) !important;
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-color: var(--border-color) !important;
}
.hd-title {
  font-size: 1.375rem; line-height: 1.2; font-weight: 400 !important;
  letter-spacing: -.012em;
}
@media (max-width: 767px) { .hd-title { font-size: 1.125rem; } }

/* Contenido: aire a los lados y ancho máximo cómodo en monitores grandes */
#content { max-width: 1600px; }
@media (min-width: 768px) { #content { padding: 1.75rem 2rem 3rem !important; } }

/* Filtros de la cabecera (año/mes/manager) */
#filters select { border-radius: 8px; padding-top: .35rem; padding-bottom: .35rem; }

/* =============================================================
   Componentes
   ============================================================= */

/* Tarjeta: superficie plana con filete. Sin elevación al pasar el ratón: casi nunca es
   pulsable, y lo que lo es lleva su propio estado. */
.card {
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: 14px;
  box-shadow: var(--shadow-soft);
}
.card h2 { font-size: 1rem; letter-spacing: -.003em; }
.glass { background: var(--bg-card); border: 1px solid var(--border-card); }

/* Chip de icono de los KPI: tinta suave del acento */
.card .u-bg-accent-soft {
  background: var(--accent-soft) !important;
  color: var(--accent) !important;
}

/* Animación: una sola, breve, al cambiar de página/sección */
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.fade-up { animation: fadeIn .18s ease-out both; }

/* Barra de progreso */
.progress-track { background: color-mix(in srgb, var(--text-primary) 8%, transparent); border-radius: 9999px; overflow: hidden; }
.progress-fill  { background: var(--accent); height: 100%; transition: width .5s cubic-bezier(.22,1,.36,1); }

/* Barras de scroll: las del sistema, con el color del tema (color-scheme). Solo se afinan. */
* { scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track); }

/* Píldora de rol / botón pequeño */
.role-chip {
  display: inline-flex; align-items: center; gap: .3rem;
  font-size: .72rem; line-height: 1.3;
  padding: .12rem .55rem;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  border: 1px solid color-mix(in srgb, var(--accent) 18%, transparent);
}
button.role-chip { transition: background-color .15s ease, border-color .15s ease, color .15s ease; }
button.role-chip:hover { border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.sb-user .role-chip { border: none; padding: 0; background: none; color: var(--text-muted); font-size: .75rem; }

/* ── Tablas ──
   Cabecera en el gris claro, rótulos en minúscula de frase (sin mayúsculas espaciadas),
   filas con filete fino y fondo de acento muy suave al pasar el ratón. */
table.lovek-table { width: 100%; border-collapse: separate; border-spacing: 0; }
table.lovek-table th {
  text-align: left;
  font-size: .78rem; font-weight: 400;
  text-transform: none; letter-spacing: .01em;
  color: var(--text-muted);
  background: var(--bg-subtle);
  padding: .65rem .9rem;
  border-bottom: 1px solid var(--border-card);
  position: sticky; top: 0;
}
table.lovek-table td {
  padding: .7rem .9rem;
  border-bottom: 1px solid var(--border-color);
  font-size: .875rem;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}
table.lovek-table tbody tr { transition: background-color .12s ease; }
table.lovek-table tbody tr:hover { background: color-mix(in srgb, var(--accent) 4%, transparent); }
table.lovek-table tbody tr:last-child td { border-bottom: none; }

/* Cabecera fija en TODAS las tablas al bajar (Max, 2026-10-20: como en UNIKO). El `sticky` de la
   cabecera se pega a la caja con scroll más cercana, no a la página: dentro de una caja con scroll
   horizontal y sin tope de alto, esa caja nunca scrollea y la cabecera se va con la página. Por eso
   toda caja de tabla tiene un alto máximo y su propio scroll vertical; las que fijan el suyo en
   línea (Facturación, «Ver todo» de layout.js) mandan sobre este. */
.ct-scroll,
.overflow-x-auto:has(> table.lovek-table),
.overflow-auto:has(> table.lovek-table) { max-height: 72vh; overflow-y: auto; }
.overflow-x-auto:has(> table.lovek-table) > table.lovek-table thead th,
.overflow-auto:has(> table.lovek-table) > table.lovek-table thead th { z-index: 1; }
.ct-scroll table.lovek-table thead th { position: sticky; top: 0; background: var(--bg-subtle); z-index: 1; }
/* El pie de totales se queda pegado: la suma tiene que verse sin llegar al final del scroll. */
.ct-scroll table.lovek-table tfoot td,
.ct-scroll table.lovek-table tfoot th { position: sticky; bottom: 0; z-index: 1; }

/* Esquinas: la caja con scroll hereda el radio de la tarjeta (si va pegada a sus bordes) o
   lleva el suyo, para que la banda de la cabecera no asome en pico. */
.card.p-0 > .ct-scroll,
.card.p-0 > .overflow-x-auto,
.card.p-0 > .overflow-auto { border-radius: inherit; }
.card:not(.p-0) .ct-scroll,
.card:not(.p-0) .overflow-x-auto:has(> table.lovek-table) {
  border-radius: 10px;
  border: 1px solid var(--border-color);
}

/* Cabeceras ordenables (js/table-sort.js) */
th.ts-th { cursor: pointer; user-select: none; white-space: nowrap; transition: color .15s ease; }
th.ts-th:hover, th.ts-th:focus-visible { color: var(--text-primary); }
th.ts-th:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
th.ts-th.ts-activa { color: var(--text-primary); }
th.ts-th .ts-ico { margin-left: .35rem; font-size: .7em; opacity: .35; transition: opacity .15s ease; }
th.ts-th:hover .ts-ico { opacity: .7; }
th.ts-th.ts-activa .ts-ico { opacity: 1; color: var(--accent); }

/* Importes SIEMPRE a la izquierda (decisión de Max, 2026-08-18): con la cifra a la derecha y el
   rótulo a la izquierda, en un monitor ancho hay que cruzar la vista para leer la fila. Las cifras
   van en tabular-nums y siguen cuadrando. Las celdas con colspan quedan fuera. */
table th.text-right:not([colspan]),
table td.text-right:not([colspan]),
table th.col-num,
table td.col-num { text-align: left; font-variant-numeric: tabular-nums; }

/* Columnas que miden lo que su contenido; el sobrante se lo quedan las de texto. */
table th.col-ajustada, table td.col-ajustada { width: 1%; white-space: nowrap; }

/* Tablas con muchas columnas de cifras: menos relleno lateral */
table.lovek-table.tabla-densa th,
table.lovek-table.tabla-densa td { padding-left: .55rem; padding-right: .55rem; }

/* Pie de totales: se distingue sin leerlo (filete de acento y fondo propio). table-sort.js solo
   ordena el <tbody>: el pie no se mueve. */
table tfoot td,
table tfoot th {
  border-top: 1.5px solid var(--accent);
  border-bottom: none;
  font-weight: 500;
  color: var(--text-primary);
  background: color-mix(in srgb, var(--accent) 5%, var(--bg-card));
  padding-top: .8rem;
  padding-bottom: .8rem;
}
table tfoot tr:hover { background: transparent; }

/* ── KPI ── */
.kpi-trend {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: .72rem; padding: 2px 8px; border-radius: 999px;
  white-space: nowrap; font-variant-numeric: tabular-nums;
}
.kpi-trend.up   { color: var(--ok);     background: color-mix(in srgb, var(--ok) 12%, transparent); }
.kpi-trend.down { color: var(--danger); background: color-mix(in srgb, var(--danger) 12%, transparent); }
.kpi-spark { flex-shrink: 0; }
.kpi-label { font-size: .8125rem; color: var(--text-muted); }
.kpi-value {
  font-size: 1.875rem; line-height: 1.1; font-weight: 400;
  letter-spacing: -.02em; font-variant-numeric: tabular-nums;
  margin-top: .65rem;
}
@media (max-width: 767px) { .kpi-value { font-size: 1.5rem; } }
.kpi-ico { width: 2rem; height: 2rem; border-radius: 999px; display: flex; align-items: center; justify-content: center; font-size: .8rem; flex-shrink: 0; }

.kpi-details > summary {
  list-style: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: .35rem;
  margin-top: .6rem; font-size: .75rem; color: var(--text-muted);
  user-select: none;
}
.kpi-details > summary::-webkit-details-marker { display: none; }
.kpi-details > summary:hover { color: var(--accent); }
.kpi-details > summary i { font-size: .62rem; transition: transform .15s ease; }
.kpi-details[open] > summary i { transform: rotate(180deg); }
.kpi-breakdown { margin-top: .5rem; padding-top: .5rem; border-top: 1px solid var(--border-card); }
.kpi-bd-row { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; padding: 1.5px 0; font-size: .75rem; line-height: 1.35; }
.kpi-bd-name { color: var(--text-muted); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kpi-bd-pct  { margin-left: .3rem; opacity: .7; font-variant-numeric: tabular-nums; }
.kpi-bd-val  { flex-shrink: 0; font-variant-numeric: tabular-nums; }
.kpi-bd-note { margin-top: .45rem; font-size: .7rem; line-height: 1.35; color: var(--text-muted); }

/* ── Selector de tema (Ajustes) ── */
.theme-card {
  border: 1px solid var(--border-card);
  border-radius: 12px;
  padding: 1rem;
  cursor: pointer;
  background: var(--bg-card);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.theme-card:hover { border-color: var(--border-card-hvr); }
.theme-card.active { border-color: var(--accent) !important; box-shadow: 0 0 0 3px var(--focus-ring); }
.theme-swatches { display: flex; gap: 5px; margin-bottom: .6rem; }
.theme-swatch { width: 22px; height: 22px; border-radius: 50%; border: 1px solid rgba(0,0,0,.12); }

/* Botón claro/oscuro de la cabecera */
.theme-toggle-btn {
  display: flex; align-items: center; justify-content: center;
  width: 2.25rem; height: 2.25rem;
  border-radius: 999px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}
.theme-toggle-btn:hover { background: color-mix(in srgb, var(--text-primary) 6%, transparent); color: var(--text-primary); }

/* Menú en móvil */
#sidebarOverlay { transition: opacity .25s ease; }
@media (max-width: 767px) { body.sidebar-open { overflow: hidden; } }

@media (max-width: 639px) {
  table.lovek-table th,
  table.lovek-table td { font-size: .78rem; padding: .5rem .6rem; white-space: nowrap; }
  pre.whitespace-pre-wrap { font-size: .75rem; }
}
canvas { max-width: 100%; }

/* Campos de fecha (2026-10-26): icono de calendario visible en todos (toma el color del tema por
   color-scheme) y el campo entero abre el mini calendario (layout.js, showPicker). */
input[type="date"], input[type="datetime-local"], input[type="month"] { cursor: pointer; }
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator,
input[type="month"]::-webkit-calendar-picker-indicator { cursor: pointer; opacity: .6; margin-left: .25rem; }
input[type="date"]:hover::-webkit-calendar-picker-indicator,
input[type="datetime-local"]:hover::-webkit-calendar-picker-indicator,
input[type="month"]:hover::-webkit-calendar-picker-indicator { opacity: 1; }
input[type="date"]:disabled, input[type="datetime-local"]:disabled { cursor: not-allowed; }

/* Bloque de gastos colapsable (Órdenes) */
.mdl-gastos-block { border-radius: 8px; overflow: hidden; }
.mdl-gastos-summary {
  display: flex; align-items: center; justify-content: space-between;
  list-style: none; cursor: pointer;
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px dashed color-mix(in srgb, var(--accent) 55%, transparent);
  background: var(--accent-soft);
  color: var(--accent);
  font-size: .75rem;
  user-select: none;
  transition: background-color .15s ease;
}
.mdl-gastos-summary::-webkit-details-marker { display: none; }
.mdl-gastos-summary:hover { background: color-mix(in srgb, var(--accent) 14%, transparent); }
.mdl-gastos-hint { font-size: .7rem; opacity: .8; display: flex; align-items: center; gap: 4px; }
.mdl-gastos-chevron { transition: transform .2s ease; }
.mdl-gastos-block[open] .mdl-gastos-chevron { transform: rotate(180deg); }
.mdl-gastos-block[open] .mdl-gastos-hint { display: none; }

/* =============================================================
   Marca
   ============================================================= */

/* El logotipo es una máscara: toma el color del texto (currentColor), así un solo archivo sirve
   para Día, Noche y la portada granate. */
.brand-logo {
  display: inline-block;
  aspect-ratio: 1145 / 277;
  background-color: currentColor;
  -webkit-mask: url('/img/lovek-logo.png') center / contain no-repeat;
          mask: url('/img/lovek-logo.png') center / contain no-repeat;
  color: var(--text-primary);
}
.brand-logo--sidebar { height: 17px; }
.brand-logo--login   { height: 34px; }
.brand-logo--chip    { height: 12px; }

/* Empresa siempre a la vista (spec «Acceso de socios y contabilidad de UNIKO», 2026-10-15): socios y
   contables trabajan también en el panel de UNIKO, y grabar algo en la empresa equivocada sale
   caro. Etiqueta fija en la cabecera, con tokens: se lee igual en Día y en Noche. */
.empresa-chip {
  display: inline-flex; align-items: center; gap: .4rem; flex-shrink: 0;
  padding: .3rem .7rem; border-radius: 999px; white-space: nowrap;
  background: var(--accent-soft); color: var(--accent); border: 1px solid var(--accent);
  font-size: .68rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
}
.empresa-chip .brand-logo { color: var(--accent); }
.otro-panel-btn {
  display: inline-flex; align-items: center; gap: .4rem; flex-shrink: 0;
  padding: .3rem .65rem; border-radius: .5rem; white-space: nowrap; font-size: .78rem;
  color: var(--text-muted); border: 1px solid var(--border-color);
}
.otro-panel-btn:hover { background: var(--bg-hover); color: var(--text-primary); }
@media (max-width: 639px) {
  .empresa-chip-txt, .otro-panel-btn span { display: none; }
}

/* Confirmación de una acción que escribe fuera del panel o no se deshace (ui.confirmarEmpresa). */
.conf-fondo {
  position: fixed; inset: 0; z-index: 100; padding: 1rem;
  display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.45);
}
.conf-caja { max-width: 32rem; width: 100%; padding: 1.25rem; }
.conf-empresa { margin-bottom: .85rem; }
.conf-titulo { font-weight: 700; font-size: 1.05rem; margin-bottom: .4rem; color: var(--text-primary); }
.conf-texto { font-size: .875rem; color: var(--text-muted); margin-bottom: 1.1rem; white-space: pre-line; }
.conf-botones { display: flex; gap: .5rem; justify-content: flex-end; flex-wrap: wrap; }
.conf-no {
  padding: .4rem .85rem; border-radius: .5rem; font-size: .875rem;
  border: 1px solid var(--border-color); color: var(--text-primary);
}
.conf-si {
  padding: .4rem .85rem; border-radius: .5rem; font-size: .875rem; font-weight: 600;
  background: var(--accent); color: var(--text-on-accent);
}
.conf-si.conf-peligro { background: var(--danger-solid); color: #fff; }

/* =============================================================
   Acceso (index.html): pantalla dividida
   Izquierda, la marca en granate con la Ø del logotipo a gran tamaño; derecha, el formulario.
   ============================================================= */
.login-split { min-height: 100vh; min-height: 100dvh; display: grid; grid-template-columns: 1fr; grid-template-rows: auto 1fr; background: var(--bg-card); }
@media (min-width: 1024px) { .login-split { grid-template-rows: 1fr; } }
@media (min-width: 1024px) { .login-split { grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); } }

.login-brand {
  position: relative; overflow: hidden;
  background: #6d302e;
  color: #e8c5c9;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 1.5rem 1.5rem 1.25rem;
  min-height: 9.5rem;
}
@media (min-width: 1024px) { .login-brand { padding: 3rem 3.25rem; min-height: 100vh; min-height: 100dvh; } }
.login-brand .brand-logo { color: #e8c5c9; height: 22px; position: relative; z-index: 1; }
@media (min-width: 1024px) { .login-brand .brand-logo { height: 30px; } }

/* La Ø: el signo del logotipo, recortado por el borde. Es el único gesto grande del panel. */
.login-o {
  position: absolute;
  right: -14%; bottom: -22%;
  width: 92%; aspect-ratio: 286 / 281;
  background-color: #e8c5c9;
  opacity: .13;
  -webkit-mask: url('/img/lovek-o.svg') center / contain no-repeat;
          mask: url('/img/lovek-o.svg') center / contain no-repeat;
  pointer-events: none;
  animation: loginO 1.4s cubic-bezier(.16,1,.3,1) both;
}
@media (max-width: 1023px) { .login-o { width: 15rem; right: -3rem; bottom: -6.5rem; } }
@keyframes loginO {
  from { opacity: 0; transform: rotate(-8deg) scale(1.04); }
  to   { opacity: .13; transform: none; }
}
.login-brand-foot {
  position: relative; z-index: 1;
  display: none;
  justify-content: space-between; align-items: flex-end; gap: 1rem;
  font-size: .8125rem; line-height: 1.5;
  color: color-mix(in srgb, #e8c5c9 78%, transparent);
}
@media (min-width: 1024px) { .login-brand-foot { display: flex; } }
.login-brand-claim {
  position: relative; z-index: 1;
  display: none;
  max-width: 22ch;
  font-size: 2.25rem; line-height: 1.12; letter-spacing: -.015em;
  color: #f4e4e6;
  text-wrap: balance;
}
@media (min-width: 1024px) { .login-brand-claim { display: block; } }
@media (min-width: 1440px) { .login-brand-claim { font-size: 2.75rem; } }

.login-panel {
  display: flex; flex-direction: column;
  padding: 2rem 1.5rem;
  background: var(--bg-card);
}
@media (min-width: 1024px) { .login-panel { padding: 3rem 3.5rem; } }
.login-form-wrap { width: 100%; max-width: 23rem; margin: auto; }
.login-title { font-size: 1.75rem; line-height: 1.15; letter-spacing: -.015em; }
.login-sub { margin-top: .4rem; font-size: .9375rem; color: var(--text-muted); }
.login-label { display: block; font-size: .8125rem; color: var(--text-muted); margin-bottom: .4rem; }
.login-input {
  width: 100%; height: 2.875rem;
  border: 1px solid; border-radius: 10px;
  padding: 0 .9rem; font-size: .9375rem;
}
.login-btn {
  width: 100%; height: 2.875rem;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center; gap: .5rem;
  font-size: .9375rem; letter-spacing: .01em;
}
.login-foot { width: 100%; max-width: 23rem; margin: 2rem auto 0; font-size: .75rem; color: var(--text-muted); }

/* Movimiento reducido: sin animaciones de entrada ni transiciones largas */
@media (prefers-reduced-motion: reduce) {
  .fade-up, .login-o { animation: none !important; }
  #sidebar, main { transition: none !important; }
  .login-o { opacity: .13; }
  *, *::before, *::after { transition-duration: .01ms !important; }
}

/* ── Fichas de CRM (Marcas, Talentos, Servicios): botones, chips, filtros, panel lateral ── */
.mc-btn{display:inline-flex;align-items:center;gap:.35rem;font-size:.8125rem;padding:.4rem .8rem;border-radius:8px;border:1px solid var(--border-input);color:var(--text-primary);background:var(--bg-card);white-space:nowrap;cursor:pointer;transition:border-color .15s ease,background-color .15s ease,color .15s ease}
.mc-btn:hover{border-color:color-mix(in srgb,var(--text-primary) 35%,var(--border-input));background:var(--bg-subtle)}
.mc-btn.mc-pri{background:var(--accent);color:var(--text-on-accent);border-color:var(--accent)}
.mc-btn.mc-pri:hover{background:var(--accent-strong);border-color:var(--accent-strong);color:var(--text-on-accent)}
.mc-btn.mc-peligro:hover{border-color:var(--danger);color:var(--danger)}
.mc-btn[disabled]{opacity:.5;cursor:default}
.mc-chip{display:inline-flex;align-items:center;gap:.35rem;font-size:.75rem;padding:.15rem .55rem;border-radius:9999px;background:var(--accent-soft);color:var(--accent);white-space:nowrap}
.mc-filtro{font-size:.8125rem;padding:.3rem .75rem;border-radius:9999px;border:1px solid var(--border-input);color:var(--text-primary);background:var(--bg-card);cursor:pointer;white-space:nowrap;transition:border-color .15s ease,background-color .15s ease}
.mc-filtro:hover{border-color:color-mix(in srgb,var(--text-primary) 35%,var(--border-input))}
.mc-filtro.on{background:var(--text-primary);border-color:var(--text-primary);color:var(--bg-card)}
.mc-filtro .n{opacity:.6;margin-left:.3rem;font-variant-numeric:tabular-nums}
.mc-tab{position:relative;padding:.5rem .15rem;margin-right:1.1rem;font-size:.9375rem;color:var(--text-muted);cursor:pointer;transition:color .15s ease}
.mc-tab:hover{color:var(--text-primary)}
.mc-tab.on{color:var(--text-primary)}
.mc-tab.on::after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:2px;border-radius:2px;background:var(--accent)}
.mc-input,.mc-sel,.mc-area{width:100%;font-size:.875rem;padding:.45rem .65rem;border-radius:8px;border:1px solid var(--border-input);background:var(--bg-input);color:var(--text-primary)}
.mc-area{min-height:6rem;font-family:inherit}
.mc-link{color:var(--accent);cursor:pointer;text-decoration:none}
.mc-link:hover{text-decoration:underline;text-underline-offset:2px}
.mc-num{font-variant-numeric:tabular-nums;white-space:nowrap}
#mcDrawer .mc-panel{position:fixed;top:0;right:0;height:100%;width:min(720px,100%);z-index:60;overflow-y:auto;background:var(--bg-card);border-left:1px solid var(--border-card);box-shadow:var(--shadow-pop);padding-bottom:env(safe-area-inset-bottom,0px);animation:mcEntra .22s cubic-bezier(.22,1,.36,1)}
@keyframes mcEntra{from{transform:translateX(24px);opacity:0}to{transform:none;opacity:1}}
@media (prefers-reduced-motion: reduce){#mcDrawer .mc-panel{animation:none}}
#mcDrawer .mc-fondo{position:fixed;inset:0;z-index:55;background:rgba(0,0,0,.32)}
/* Ficha del contacto (js/marcas.js): encima de la ficha de marca/agencia, por debajo de los avisos y confirmaciones */
#mcCtDrawer .mc-panel{position:fixed;top:0;right:0;height:100%;width:min(600px,100%);z-index:72;overflow-y:auto;background:var(--bg-card);border-left:1px solid var(--border-card);box-shadow:var(--shadow-pop);padding-bottom:env(safe-area-inset-bottom,0px);animation:mcEntra .22s cubic-bezier(.22,1,.36,1)}
@media (prefers-reduced-motion: reduce){#mcCtDrawer .mc-panel{animation:none}}
#mcCtDrawer .mc-fondo{position:fixed;inset:0;z-index:71;background:rgba(0,0,0,.32)}
.mc-sec{border-top:1px solid var(--border-color);padding:1.1rem 1.5rem}
.mc-sec h3{font-size:.875rem;color:var(--text-primary);margin-bottom:.7rem;display:flex;align-items:center;gap:.5rem}
.mc-obsoleto{border:1px solid color-mix(in srgb, var(--warn) 30%, transparent);background:color-mix(in srgb, var(--warn) 8%, transparent)}
.mc-ambar{color:var(--warn)}
.mc-contacto{border-radius:10px;padding:.7rem .85rem;border:1px solid var(--border-color);background:var(--bg-card)}
.mc-res{max-height:14rem;overflow-y:auto;border:1px solid var(--border-card);border-radius:8px;margin-top:.35rem;background:var(--bg-card);box-shadow:var(--shadow-soft)}
.mc-res button{display:block;width:100%;text-align:left;padding:.45rem .65rem;font-size:.875rem;color:var(--text-primary)}
.mc-res button:hover{background:var(--accent-soft)}
.mc-grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(14rem,1fr));gap:.75rem 1rem}
.mc-dato dt{font-size:.75rem;color:var(--text-muted)}
.mc-dato dd{font-size:.875rem;color:var(--text-primary);word-break:break-word;white-space:pre-wrap;margin-top:.1rem}
/* Trello (js/trello.js): modal «Nueva tarjeta» y arrastrar tarjetas entre listas en la vista Tablero */
.tr-modal{position:fixed;inset:0;z-index:70;display:flex;align-items:center;justify-content:center;padding:1rem;background:rgba(0,0,0,.4)}
.tr-dragging{opacity:.45}
[draggable="true"]{cursor:grab}
/* Trello: el frente de las tarjetas como lo pinta Trello (etiquetas, portada de color, círculo de
   completada, iconos) y los separadores. Los colores de Trello vienen en línea desde js/trello.js. */
.tr-etiqueta{display:inline-flex;align-items:center;min-width:2.5rem;max-width:100%;height:1.15rem;padding:0 .5rem;border-radius:4px;font-size:.72rem;font-weight:600;line-height:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tr-etiqueta-vacia{height:.5rem;padding:0;min-width:2.5rem}
.tr-check{flex:none;display:inline-flex;align-items:center;justify-content:center;width:1rem;height:1rem;margin-top:.15rem;border-radius:9999px;border:1.5px solid #8590A2;font-size:.6rem;color:#fff;background:transparent}
.tr-check.hecho{background:#22A06B;border-color:#22A06B}
.tr-check.activo{cursor:pointer}
.tr-check.activo:hover,.tr-check.activo:focus-visible{border-color:#22A06B;outline:none}
.tr-check.activo:not(.hecho):hover::after{content:'\2713';color:#22A06B;font-size:.6rem;line-height:1}
.tr-muestra{flex:none;width:.75rem;height:.75rem;margin-top:.2rem;border-radius:3px}
.tr-tarjeta{display:block;width:100%;text-align:left;border-radius:8px;overflow:hidden;cursor:pointer}
.tr-tarjeta .tr-cuerpo{padding:.55rem .7rem}
.tr-tarjeta .tr-franja{height:2rem}
.tr-tarjeta.tr-entera{padding:.75rem .75rem;border:0;box-shadow:0 1px 1px rgba(9,30,66,.25)}
.tr-tarjeta.tr-entera .tr-check{border-color:currentColor}
.tr-badges{display:flex;flex-wrap:wrap;align-items:center;gap:.35rem .65rem;margin-top:.45rem;font-size:.75rem;color:var(--text-muted)}
.tr-separador{height:1.25rem;display:flex;align-items:center}
.tr-separador::before{content:'';flex:1;border-top:2px solid var(--border-color);margin:0 .4rem}
/* Trello · arrastrar: dónde caerá la tarjeta (hueco) o la lista (raya a la izquierda / derecha) */
.tr-hueco{height:2.25rem;border:2px dashed var(--accent);border-radius:8px;background:var(--accent-soft)}
.tr-col.tr-lista-antes{box-shadow:-6px 0 0 -2px var(--accent)}
.tr-col.tr-lista-final{box-shadow:6px 0 0 -2px var(--accent)}
.tr-cab-lista[draggable="true"]{cursor:grab}
/* Trello · ficha: muestras de color (portada y etiquetas), casilla de etiqueta, pie de lista */
.tr-color{width:2rem;height:1.6rem;border-radius:4px;border:2px solid transparent;cursor:pointer}
.tr-color.on{border-color:var(--text-primary);box-shadow:0 0 0 2px var(--bg-card) inset}
.tr-casilla{flex:none;display:inline-flex;align-items:center;justify-content:center;width:1rem;height:1rem;border-radius:3px;border:1.5px solid var(--border-input);font-size:.6rem;color:#fff}
.tr-casilla.on{background:var(--accent);border-color:var(--accent)}
.tr-anadir{display:flex;align-items:center;width:100%;margin-top:.5rem;padding:.4rem .5rem;border-radius:8px;font-size:.8125rem;color:var(--text-muted);text-align:left}
.tr-anadir:hover{background:var(--bg-hover);color:var(--text-primary)}
.tr-archivar-lista:hover{color:var(--danger)}
.tr-campana{display:block;margin:0 .25rem .5rem;padding:.2rem .5rem;border-radius:6px;font-size:.72rem;color:var(--accent);background:var(--accent-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tr-campana:hover{text-decoration:underline}

/* ── Portal del Talento («Mi LØVEK», js/portal.js) ─────────────────────────────────────────
   Primero el móvil: la mayoría de talentos entra desde el teléfono. El talento no tiene menú
   lateral (.pt-app); el equipo lo ve dentro del panel con el selector y la banda (.pt-banda). */
.pt-app{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}
.pt-top{position:sticky;top:0;z-index:10;display:flex;align-items:center;gap:.6rem;padding:.6rem 1rem;padding-top:max(.6rem,env(safe-area-inset-top));background:var(--bg-card);border-bottom:1px solid var(--border-card)}
.pt-marca{display:inline-flex;align-items:center;color:var(--text-primary)}
.pt-titulo{flex:1;min-width:0;font-size:.9375rem;color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pt-main{flex:1;width:100%;max-width:56rem;margin:0 auto;padding:1rem;display:flex;flex-direction:column;gap:1rem}
.pt-pie{text-align:center;font-size:.75rem;color:var(--text-muted);padding:1.25rem 1rem;padding-bottom:max(1.25rem,env(safe-area-inset-bottom))}
@media (max-width:420px){.pt-salir-txt{display:none}}
@media (min-width:1024px){.pt-main{max-width:74rem}}
.pt-tabs{display:flex;gap:.35rem;overflow-x:auto;scrollbar-width:none;margin:0 -1rem;padding:0 1rem .25rem;-webkit-overflow-scrolling:touch}
.pt-tabs::-webkit-scrollbar{display:none}
.pt-tab{display:inline-flex;align-items:center;gap:.45rem;flex-shrink:0;font-size:.875rem;padding:.5rem .9rem;border-radius:9999px;border:1px solid var(--border-input);color:var(--text-muted);background:var(--bg-card);text-decoration:none;transition:border-color .15s ease,color .15s ease,background-color .15s ease}
.pt-tab i{font-size:.8125rem}
.pt-tab:hover{color:var(--text-primary);border-color:color-mix(in srgb,var(--text-primary) 35%,var(--border-input))}
.pt-tab.on{background:var(--accent);border-color:var(--accent);color:var(--text-on-accent)}
.pt-seccion{display:flex;flex-direction:column;gap:1rem;margin-top:.75rem}
.pt-hola{padding:.25rem .1rem}
.pt-hola-sal{font-size:1.5rem;line-height:1.2;color:var(--text-primary);margin-bottom:.15rem}
.pt-vacio{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.4rem;padding:2.25rem 1.25rem}
.pt-vacio p{max-width:32rem}
.pt-vacio-ico{font-size:1.5rem;color:var(--accent);margin-bottom:.35rem}
.pt-lista{display:grid;grid-template-columns:repeat(auto-fill,minmax(15rem,1fr));gap:.5rem}
.pt-item{display:flex;flex-direction:column;align-items:flex-start;gap:.3rem;text-align:left;padding:.65rem .8rem;border-radius:10px;border:1px solid var(--border-input);background:var(--bg-card);cursor:pointer;transition:border-color .15s ease,background-color .15s ease}
.pt-item:hover{border-color:color-mix(in srgb,var(--text-primary) 35%,var(--border-input))}
.pt-item.on{border-color:var(--accent);background:var(--accent-soft)}
.pt-item-nom{font-size:.9375rem;color:var(--text-primary)}
.pt-item-est{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem}
.pt-banda{position:sticky;top:4rem;z-index:9;display:flex;align-items:flex-start;gap:.6rem;padding:.7rem 1rem;border-radius:10px;font-size:.875rem;background:var(--accent);color:var(--text-on-accent);box-shadow:0 6px 18px rgba(0,0,0,.12)}
.pt-banda i{margin-top:.2rem}
.pt-banda strong{font-weight:600}
/* Pantalla de acceso: separador y botón de Google para los talentos (index.html). */
.login-sep{display:flex;align-items:center;gap:.75rem;margin:2rem 0 1rem;font-size:.8125rem;color:var(--text-muted)}
.login-sep::before,.login-sep::after{content:'';flex:1;height:1px;background:var(--border-input)}
.google-btn{display:flex;justify-content:center;min-height:44px;color-scheme:light}
/* Portal del Talento · Fase 2: Inicio (tarjetas, aviso, gráfica) y Facturación. Importes a la
   izquierda y con miles siempre; ninguna cifra de comisión. */
.pt-aviso{display:flex;align-items:center;gap:.6rem;padding:.8rem 1rem;border-radius:12px;font-size:.9rem;text-decoration:none;color:var(--text-primary);background:color-mix(in srgb,var(--warn) 12%,var(--bg-card));border:1px solid color-mix(in srgb,var(--warn) 40%,transparent)}
.pt-aviso>i:first-child{color:var(--warn)}
.pt-aviso strong{font-weight:600}
.pt-aviso-fin{margin-left:auto;font-size:.75rem;color:var(--text-muted)}
.pt-kpis{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem}
.pt-kpi{padding:.9rem 1rem;display:flex;flex-direction:column;gap:.15rem;min-width:0}
.pt-kpi-hero{grid-column:1/-1;padding:1.15rem 1.2rem;background:var(--accent);border-color:var(--accent)}
.pt-kpi-hero .pt-kpi-lab,.pt-kpi-hero .pt-kpi-nota{color:color-mix(in srgb,var(--text-on-accent) 78%,transparent)}
.pt-kpi-hero .pt-kpi-val{color:var(--text-on-accent);font-size:2rem}
.pt-kpi-lab{font-size:.8125rem;color:var(--text-muted)}
.pt-kpi-val{font-size:1.2rem;color:var(--text-primary);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.pt-kpi-nota{font-size:.75rem;color:var(--text-muted)}
@media (min-width:768px){.pt-kpis{grid-template-columns:repeat(4,minmax(0,1fr))}}
.pt-datos{display:flex;align-items:center;gap:.45rem;font-size:.75rem;color:var(--text-muted)}
.pt-datos-aviso{color:var(--warn)}
.pt-graf{width:100%;height:auto;max-height:200px;display:block;margin:0 auto;overflow:visible}
.pt-graf-valor{min-height:1.25rem;font-variant-numeric:tabular-nums}
.pt-base{stroke:var(--border-input);stroke-width:1}
.pt-eje{font-size:9px;fill:var(--text-muted)}
.pt-barra{cursor:pointer;outline:none}
.pt-barra path{transition:opacity .15s ease}
.pt-graf:hover .pt-barra path{opacity:.55}
.pt-graf .pt-barra.on path,.pt-graf:hover .pt-barra:hover path{opacity:1}
.pt-barra.on .pt-eje{fill:var(--text-primary)}
.pt-filtros{display:flex;flex-wrap:wrap;gap:.4rem}
.pt-totales{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem}
.pt-totales>div{display:flex;flex-direction:column;gap:.1rem;padding:.65rem .8rem;border-radius:10px;background:var(--bg-card);border:1px solid var(--border-card);min-width:0}
.pt-totales span{font-size:.75rem;color:var(--text-muted)}
.pt-totales strong{font-size:1rem;font-weight:500;color:var(--text-primary);font-variant-numeric:tabular-nums}
.pt-totales .pt-tot-neto{border-color:var(--accent)}
@media (min-width:768px){.pt-totales{grid-template-columns:repeat(6,minmax(0,1fr))}}
.pt-lineas{display:flex;flex-direction:column;gap:.6rem}
.pt-linea{padding:.85rem 1rem;display:flex;flex-direction:column;gap:.35rem}
.pt-linea-cab{display:flex;align-items:center;justify-content:space-between;gap:.5rem}
.pt-linea-marca{font-size:.9375rem;color:var(--text-primary)}
.pt-linea-imp{display:flex;flex-wrap:wrap;gap:.35rem 1.1rem;margin-top:.15rem}
.pt-linea-imp>div{display:flex;flex-direction:column}
.pt-linea-imp span:first-child{font-size:.7rem;color:var(--text-muted)}
.pt-linea-imp strong{font-weight:600;font-variant-numeric:tabular-nums;color:var(--text-primary)}
.pt-linea-imp span+span{font-variant-numeric:tabular-nums;font-size:.875rem}
.pt-linea-pie{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem .6rem;padding-top:.4rem;border-top:1px solid var(--border-card)}
.pt-linea-pie strong{font-weight:600}
.pt-tabla{width:100%;font-size:.8125rem;border-collapse:collapse}
.pt-tabla th{text-align:left;font-weight:400;color:var(--text-muted);padding:.6rem .75rem;border-bottom:1px solid var(--border-card);white-space:nowrap}
.pt-tabla td{text-align:left;padding:.55rem .75rem;border-bottom:1px solid var(--border-card);vertical-align:top;font-variant-numeric:tabular-nums}
.pt-tabla tfoot td{font-weight:600;color:var(--text-primary);border-bottom:0;background:var(--bg-subtle)}
/* Portal del Talento · Fase 3: campañas, evolución y perfil. La serie del año anterior va en gris
   (contexto, no competidora): validada contra el acento con la guía de dataviz (separación con
   daltonismo ΔE ≥ 23 y contraste ≥ 3:1 en Día y Noche). */
:root,[data-theme="lovek"]{--pt-serie-b:#8e8883}
[data-theme="lovek-noche"]{--pt-serie-b:#6e6966}
.pt-camps{list-style:none;margin:0;padding:0}
.pt-camp{display:flex;align-items:flex-start;justify-content:space-between;gap:.75rem;padding:.7rem .5rem;border-top:1px solid var(--border-card)}
.pt-camps .pt-camp:first-child{border-top:0}
.pt-camp-nom{color:var(--text-primary);font-size:.9375rem}
.pt-camp-fecha{flex-shrink:0;font-size:.8125rem;color:var(--text-muted);white-space:nowrap}
.pt-cuenta{display:inline-block;min-width:1.25rem;margin-left:.2rem;padding:0 .35rem;border-radius:9999px;font-size:.7rem;background:var(--bg-subtle);color:var(--text-muted)}
.mc-filtro.on .pt-cuenta{background:color-mix(in srgb,var(--bg-card) 25%,transparent);color:inherit}
.pt-seg{display:inline-flex;border:1px solid var(--border-input);border-radius:9999px;padding:2px}
.pt-seg button{font-size:.8125rem;padding:.3rem .8rem;border-radius:9999px;color:var(--text-muted)}
.pt-seg button.on{background:var(--text-primary);color:var(--bg-card)}
.pt-leyenda{display:flex;gap:1rem;font-size:.75rem;color:var(--text-muted)}
.pt-leyenda span{display:inline-flex;align-items:center;gap:.35rem}
.pt-leyenda i{width:.7rem;height:.7rem;border-radius:3px;display:inline-block}
.pt-rank{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.55rem}
.pt-rank li{display:grid;grid-template-columns:minmax(6rem,10rem) 1fr auto;align-items:center;gap:.6rem;font-size:.875rem}
.pt-rank-nom{color:var(--text-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pt-rank-barra{height:.5rem;border-radius:9999px;background:var(--bg-subtle);overflow:hidden}
.pt-rank-barra span{display:block;height:100%;border-radius:9999px;background:var(--accent)}
.pt-rank-val{font-variant-numeric:tabular-nums;color:var(--text-primary)}
.pt-datos-ficha{display:grid;grid-template-columns:repeat(auto-fill,minmax(10rem,1fr));gap:.75rem}
.pt-datos-ficha>div{display:flex;flex-direction:column;gap:.1rem;min-width:0}
.pt-datos-ficha span{font-size:.75rem;color:var(--text-muted)}
.pt-datos-ficha strong{font-weight:500;color:var(--text-primary);overflow-wrap:anywhere}
/* Portal del Talento · Fase 4: Trello en solo lectura. Columnas como en Trello (desplazamiento
   lateral con imán en el móvil); el frente de las tarjetas reutiliza .tr-* del módulo Trello. */
.pt-tr-cols{display:flex;align-items:flex-start;gap:.75rem;overflow-x:auto;padding-bottom:.5rem;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
/* Las listas crecen con sus tarjetas, como en el módulo Trello y en Trello: con altura máxima y scroll
   propio, las tarjetas (flex, overflow:hidden) se encogían y salían aplastadas y cortadas. */
.pt-tr-col{flex:0 0 17rem;max-width:85vw;scroll-snap-align:start;display:flex;flex-direction:column;gap:.5rem;padding:.6rem;border-radius:12px;background:var(--bg-subtle);border:1px solid var(--border-card)}
.pt-tr-cab{display:flex;align-items:flex-start;justify-content:space-between;gap:.5rem;padding:0 .2rem}
.pt-tr-lista{font-size:.875rem;font-weight:600;color:var(--text-primary);overflow-wrap:anywhere}
.pt-tr-tarjetas{display:flex;flex-direction:column;gap:.5rem}
.pt-tr-tarjetas>*{flex-shrink:0}
.pt-tr-tarjetas .tr-tarjeta:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.pt-modal{position:fixed;inset:0;z-index:60;display:flex;align-items:flex-start;justify-content:center;padding:4vh 1rem;background:rgba(0,0,0,.45);overflow-y:auto}
.pt-modal-caja{width:100%;max-width:36rem;padding:1.1rem 1.2rem;display:flex;flex-direction:column;gap:.9rem}
.pt-modal-tit{font-size:1.1rem;color:var(--text-primary);margin-top:.15rem;overflow-wrap:anywhere}

/* =============================================================
   Calculadora de tarifas (js/calculadora.js, js/estadisticas-talento.js)
   El único color de estado es el verde de «En rango» (token --ok); fuera de rango no lleva color.
   ============================================================= */
.est-aviso { font-size: .8rem; color: var(--warn); margin-top: .5rem; }
.est-aviso-ejemplo {
  color: var(--text-primary); font-weight: 600; padding: .45rem .7rem; border-radius: .5rem;
  border: 1px dashed var(--border-card); background: color-mix(in srgb, var(--warn) 10%, transparent);
}
.est-modal { max-width: 44rem; max-height: 92vh; overflow-y: auto; }
.est-diff { width: 100%; font-size: .85rem; border-collapse: collapse; margin-top: .25rem; }
.est-diff th, .est-diff td { text-align: left; padding: .3rem .4rem; border-bottom: 1px solid var(--border-card); color: var(--text-primary); }
.est-diff th { color: var(--text-muted); font-weight: 600; }
.calc-ok {
  display: inline-block; margin-top: .2rem; padding: .05rem .5rem; border-radius: 999px; font-size: .75rem; font-weight: 600;
  color: var(--ok); background: color-mix(in srgb, var(--ok) 15%, transparent);
}
.calc-fuera { display: inline-block; margin-top: .2rem; font-size: .75rem; color: var(--text-primary); }
.calc-tabla td { vertical-align: top; }
.calc-in { min-width: 6.5rem; text-align: left; }
.calc-in-corto { min-width: 4rem; width: 4.5rem; }
.calc-resumen { display: grid; gap: .5rem; }
.calc-res-fila {
  display: grid; grid-template-columns: 6rem 1fr auto; align-items: baseline; gap: .75rem;
  padding: .55rem .75rem; border-radius: .6rem; border: 1px solid var(--border-card);
}
.calc-res-fee { color: var(--text-muted); font-size: .875rem; }
.calc-res-fee b { color: var(--text-primary); font-size: 1.05rem; margin-left: .35rem; }
@media (max-width: 520px) {
  .calc-res-fila { grid-template-columns: 1fr; gap: .15rem; }
}
.calc-fichas { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); }
.calc-ficha {
  display: flex; flex-direction: column; align-items: flex-start; gap: .2rem; text-align: left; width: 100%;
  padding: .85rem 1rem; border-radius: .75rem; border: 1px solid var(--border-card); background: var(--bg-card);
  box-shadow: var(--shadow-soft); cursor: pointer; transition: border-color .15s, box-shadow .15s;
}
.calc-ficha:hover { border-color: var(--border-card-hvr); }
.calc-ficha:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--focus-ring); }
.calc-ficha[aria-pressed="true"] { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.calc-ficha-tarifas { display: flex; flex-wrap: wrap; gap: .15rem .75rem; font-size: .8rem; color: var(--text-primary); margin-top: .2rem; }
.calc-ayuda summary { list-style: none; }
.calc-ayuda summary::-webkit-details-marker { display: none; }

/* =============================================================
   Stats (js/stats.js, js/stats-vista.js; spec 2026-10-20). Las fichas de arriba reutilizan
   .calc-fichas / .calc-ficha de la calculadora.
   ============================================================= */
.st-kpis { display: grid; gap: .6rem; grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr)); }
.st-kpi { padding: .65rem .8rem; border-radius: .6rem; border: 1px solid var(--border-card); background: var(--bg-subtle); }
.st-kpi-t { font-size: .72rem; color: var(--text-muted); }
.st-kpi-v { font-size: 1.15rem; font-weight: 700; color: var(--text-primary); font-variant-numeric: tabular-nums; margin-top: .1rem; }
.st-kpi-n { font-size: .7rem; color: var(--text-muted); margin-top: .1rem; }
.st-grafs { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
.st-graf { position: relative; height: 170px; }
.st-fila-on td { background: var(--accent-soft); }
.pt-aviso .mc-btn { margin-left: auto; }
.st-cols { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); }
.st-h4 { font-size: .8rem; font-weight: 600; color: var(--text-primary); margin-bottom: .4rem; }
.st-chips { display: flex; flex-wrap: wrap; gap: .35rem; }
.st-chip { display: inline-block; padding: .1rem .5rem; border-radius: 999px; font-size: .75rem; color: var(--text-primary);
  border: 1px solid var(--border-card); background: var(--bg-subtle); }
.st-chip-p { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }
.st-top { list-style: decimal; padding-left: 1.2rem; font-size: .85rem; color: var(--text-primary); }
.st-top li { margin-bottom: .25rem; }
.st-top li .u-muted { margin-left: .35rem; }
.st-link { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.st-ver { font-size: .72rem; color: var(--accent); text-decoration: underline; background: none; border: 0; padding: 0; cursor: pointer; }
.st-barras { display: grid; gap: .3rem; }
.st-barra { display: grid; grid-template-columns: minmax(5rem, 9rem) 1fr 3.5rem; align-items: center; gap: .5rem; font-size: .8rem; color: var(--text-primary); }
.st-barra-t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-barra-b { height: .5rem; border-radius: 999px; background: var(--bg-hover); overflow: hidden; }
.st-barra-b > span { display: block; height: 100%; background: var(--accent); border-radius: 999px; }
.st-barra-v { font-variant-numeric: tabular-nums; color: var(--text-muted); }
.st-revisar { border: 1px dashed var(--border-card); border-radius: .6rem; padding: .75rem; margin-bottom: .75rem; }
.st-json { width: 100%; font-family: ui-monospace, Menlo, monospace; font-size: .75rem; margin-top: .5rem; }
.st-captura-modal { max-width: min(30rem, 94vw); max-height: 94vh; overflow: auto; }
.st-captura-img { display: block; width: 100%; height: auto; border-radius: .5rem; }
.st-subir { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .3rem; width: 100%; min-height: 10rem;
  border: 2px dashed var(--border-input); border-radius: .75rem; padding: 1.5rem 1rem; text-align: center; color: var(--text-muted);
  cursor: pointer; transition: border-color .15s, background-color .15s; }
.st-subir:hover, .st-subir:focus-within { border-color: var(--accent); }
.st-subir.on, .st-subir.lleno { border-color: var(--accent); background: var(--accent-soft); }
.st-subir.on { border-style: solid; }
.st-subir > * { pointer-events: none; }
.st-subir-icono { font-size: 2rem; color: var(--accent); margin-bottom: .25rem; }
.st-subir-titulo { font-weight: 600; color: var(--text-primary); }
.st-subir-elegidas { display: block; margin-top: .5rem; font-size: .85rem; color: var(--text-primary); }
.st-subir-nombres { display: flex; flex-wrap: wrap; justify-content: center; gap: .3rem; margin-top: .4rem; }
.st-subir-nombres span { font-size: .75rem; padding: .1rem .5rem; border-radius: 999px; background: var(--bg-card, transparent); border: 1px solid var(--border-card);
  max-width: 14rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-pide { display: grid; gap: .4rem; }
.st-pide li { font-size: .85rem; color: var(--text-primary); }
.pt-fra-pdf{color:var(--accent);background:none;border:0;padding:0;cursor:pointer}

/* ── Negociaciones (js/negociaciones.js): formulario en ventana, lo abren Seguimiento y Campañas ── */
.ng-fondo{position:fixed;inset:0;z-index:80;display:flex;align-items:flex-start;justify-content:center;padding:4vh 1rem;overflow-y:auto;background:rgba(0,0,0,.36)}
.ng-caja{width:min(40rem,100%);padding:1.25rem 1.35rem;box-shadow:var(--shadow-pop)}
.ng-field label{display:block;font-size:.75rem;color:var(--text-muted);margin-bottom:.25rem}
.ng-field label.mc-filtro{display:inline-flex;margin:0;font-size:.8125rem;color:var(--text-primary)}
.ng-field label.mc-filtro.on{color:var(--bg-card)}
.ng-estado:focus-within{outline:2px solid var(--accent);outline-offset:2px}
.ng-dd{position:absolute;left:0;right:0;top:100%;z-index:90;margin-top:.2rem;max-height:14rem;overflow-y:auto;border-radius:10px;border:1px solid var(--border-card);background:var(--bg-card);box-shadow:var(--shadow-pop)}
.ng-dd button{display:block;width:100%;text-align:left;padding:.45rem .7rem;font-size:.85rem;color:var(--text-primary)}
.ng-dd button:hover,.ng-dd button:focus-visible{background:var(--accent-soft);outline:none}
.ng-dd .ng-crear{color:var(--accent);border-top:1px solid var(--border-color)}
.ng-correo{display:flex;align-items:flex-start;gap:.6rem;font-size:.85rem;padding:.6rem .75rem;margin-bottom:.9rem;border-radius:10px;background:var(--bg-hover)}
.ng-aviso{font-size:.75rem;color:var(--warn);margin-top:.3rem;display:flex;gap:.35rem;align-items:baseline}
.ng-toast{position:fixed;right:1.25rem;bottom:calc(1.25rem + env(safe-area-inset-bottom,0px));z-index:95;max-width:24rem}
.ng-comentario{max-width:26rem;min-width:12rem;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;white-space:pre-line;font-size:.8125rem}
.ng-corto{max-width:16rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mc-cats{position:relative}
.mc-cats-caja{display:flex;flex-wrap:wrap;align-items:center;gap:.3rem;margin-top:.25rem;min-height:2.35rem;padding:.3rem .45rem;border-radius:8px;border:1px solid var(--border-input);background:var(--bg-input,var(--bg-card));cursor:text}
.mc-cats-caja:focus-within{border-color:var(--accent);box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 22%,transparent)}
.mc-cat{display:inline-flex;align-items:center;gap:.3rem;padding:.15rem .25rem .15rem .55rem;border-radius:999px;font-size:.78rem;background:var(--accent-soft);color:var(--accent)}
.mc-cat button{display:inline-flex;align-items:center;justify-content:center;width:1.1rem;height:1.1rem;border-radius:999px;font-size:.65rem;color:inherit}
.mc-cat button:hover,.mc-cat button:focus-visible{background:color-mix(in srgb,var(--accent) 20%,transparent);outline:none}
.mc-cats .mc-cats-q{flex:1;min-width:8rem;border:0!important;outline:0!important;box-shadow:none!important;background:transparent!important;font-size:.875rem;color:var(--text-primary);padding:.15rem .2rem}
.mc-cats .ng-dd button{display:flex;justify-content:space-between;gap:.75rem}
.mc-cats .ng-dd button.on{background:var(--accent-soft)}
.mc-cats .ng-dd .mc-cat-crear{color:var(--accent);border-top:1px solid var(--border-color)}
.mc-cat-nueva{background:transparent;border:1px dashed var(--accent)}
.mc-cat small{font-size:.65rem;opacity:.75}
.ng-resaltada td{background:color-mix(in srgb, var(--warn) 12%, transparent)}
.ng-check{display:flex!important;align-items:center;gap:.4rem;margin:.4rem 0 0!important;font-size:.8125rem!important;color:var(--text-primary)!important;cursor:pointer}

/* ── Portal · Tareas: globo de la pestaña y casilla de hecha ── */
.pt-globo{display:inline-flex;align-items:center;justify-content:center;min-width:1.15rem;height:1.15rem;padding:0 .3rem;border-radius:9999px;font-size:.6875rem;font-weight:700;font-variant-numeric:tabular-nums;background:var(--danger);color:#fff}
.pt-tab.on .pt-globo{background:var(--bg-card);color:var(--accent)}
.pt-tarea{align-items:flex-start}
.pt-check{flex-shrink:0;font-size:1.25rem;line-height:1;color:var(--text-muted);padding:.1rem;border-radius:9999px;transition:color .15s ease}
.pt-check:hover{color:var(--ok)}
.pt-check:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.pt-tarea.hecha .pt-check{color:var(--ok)}
.pt-tarea.hecha .pt-camp-nom{text-decoration:line-through;opacity:.6}

/* ── Alertas que saltan (js/layout.js): aviso flotante en cualquier pantalla ── */
.al-flota{position:fixed;right:1.25rem;bottom:calc(1.25rem + env(safe-area-inset-bottom,0px));z-index:85;width:min(23rem,calc(100vw - 2rem));padding:.9rem 1rem;box-shadow:var(--shadow-pop);border-color:color-mix(in srgb,var(--warn) 45%,var(--border-card))}
.al-flota h4{display:flex;align-items:center;gap:.5rem;font-size:.875rem;font-weight:600;color:var(--text-primary);margin-bottom:.5rem}
.al-flota ul{display:flex;flex-direction:column;gap:.55rem;max-height:16rem;overflow-y:auto}
.al-flota li{border-top:1px solid var(--border-color);padding-top:.5rem}
.al-flota li:first-child{border-top:0;padding-top:0}
.al-acc{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:.35rem}
@media (prefers-reduced-motion: no-preference){.al-flota{animation:mcEntra .22s cubic-bezier(.22,1,.36,1)}}

/* Radar de influencers (spec 2026-10-21): miniatura (o inicial), chips que se quitan. */
.rd-foto { width: 2.25rem; height: 2.25rem; border-radius: 9999px; object-fit: cover; display: inline-block; flex-shrink: 0; background: var(--bg-subtle); }
.rd-inicial { display: inline-flex; align-items: center; justify-content: center; font-size: .8125rem; font-weight: 600; color: var(--accent); background: var(--accent-soft); }
.rd-chip { display: inline-flex; align-items: center; gap: .25rem; }
.rd-quitar { line-height: 1; font-size: .9rem; padding: 0 .1rem; color: inherit; opacity: .7; cursor: pointer; }
.rd-quitar:hover { opacity: 1; }
.rd-tabla td { vertical-align: middle; }
.rd-foto-g { display: inline-flex; }
.rd-tabla .mc-btn { font-size: .75rem; padding: .2rem .55rem; }
.rd-foto-g .rd-foto { width: 4.5rem; height: 4.5rem; font-size: 1.5rem; }
/* Etiqueta de contacto pulsable (Radar · Contactos, 2026-10-22) */
.rd-contacto { display: inline-flex; align-items: center; gap: .25rem; padding: 0; background: none; border: 0; cursor: pointer; border-radius: 9999px; }
.rd-contacto:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Adjuntos de Tareas (2026-10-22, js/adjuntos.js): miniaturas de imagen y fichas de documento */
.adj-lista { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .45rem; }
.adj-item { position: relative; display: inline-flex; }
.adj-mini { width: 3.5rem; height: 3.5rem; border-radius: 8px; overflow: hidden; border: 1px solid var(--border-color); background: var(--bg-hover); display: inline-flex; align-items: center; justify-content: center; color: var(--text-muted); cursor: zoom-in; }
.adj-mini img { width: 100%; height: 100%; object-fit: cover; display: block; }
.adj-doc { display: inline-flex; align-items: center; gap: .35rem; max-width: 15rem; padding: .3rem .55rem; border-radius: 8px; border: 1px solid var(--border-color); background: var(--bg-card); font-size: .75rem; color: var(--text-primary); cursor: pointer; }
.adj-doc i { color: var(--accent); }
.adj-doc:hover, .adj-mini:hover { border-color: var(--accent); }
.adj-nombre { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adj-quitar { position: absolute; top: -.4rem; right: -.4rem; width: 1.15rem; height: 1.15rem; border-radius: 9999px; display: inline-flex; align-items: center; justify-content: center; font-size: .6rem; background: var(--bg-card); color: var(--text-muted); border: 1px solid var(--border-color); cursor: pointer; }
.adj-quitar:hover { color: var(--danger); border-color: var(--danger); }
.adj-mini:focus-visible, .adj-doc:focus-visible, .adj-quitar:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Prospección (copia del módulo de UNIKO, 2026-10-23): buscador de marca/agencia de «Guardar» y el
   markdown de las respuestas del asistente (Tailwind quita los estilos de listas y párrafos). */
.pf-dd{position:absolute;left:0;right:0;top:100%;z-index:90;margin-top:.2rem;max-height:14rem;overflow-y:auto;border-radius:10px;border:1px solid var(--border-card);background:var(--bg-card);box-shadow:var(--shadow-pop)}
.pf-dd button{display:block;width:100%;text-align:left;padding:.45rem .7rem;font-size:.85rem;color:var(--text-primary)}
.pf-dd button:hover,.pf-dd button:focus-visible{background:var(--accent-soft);outline:none}
.pf-dd .pf-crear{color:var(--accent);border-top:1px solid var(--border-color)}
.prose-content p{margin:.35rem 0}
.prose-content ol{list-style:decimal;padding-left:1.4rem;margin:.35rem 0}
.prose-content ul{list-style:disc;padding-left:1.4rem;margin:.35rem 0}
.prose-content li{margin:.15rem 0}
.prose-content strong{font-weight:600}
.prose-content code{font-size:.85em;padding:.05rem .3rem;border-radius:4px;background:var(--bg-hover)}

/* ── Calendario (2026-10-26) ─────────────────────────────────────────────
   Cada tipo toma su color de un token del tema: Trello = --info, Tarea = --warn (Evento, Fase 2 = --accent). */
.cal-trello{--cal-c:var(--info)}
.cal-tarea{--cal-c:var(--warn)}
.cal-evento{--cal-c:var(--accent)}
.cal-c-trello{color:var(--info)}
.cal-c-tarea{color:var(--warn)}
.cal-c-evento{color:var(--accent)}
.cal-barra{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.6rem}
.cal-barra2{margin:.75rem 0 .6rem}
.cal-grupo{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem}
.cal-talento{width:auto;min-width:12rem}
.cal-ir{width:auto}
.cal-titulo{font-size:1.15rem;font-weight:700;color:var(--text-primary)}
.cal-seg{display:inline-flex;border:1px solid var(--border-input);border-radius:8px;overflow:hidden}
.cal-seg button{font-size:.8125rem;padding:.4rem .75rem;color:var(--text-muted);background:var(--bg-card);border-left:1px solid var(--border-input);cursor:pointer}
.cal-seg button:first-child{border-left:0}
.cal-seg button.on{background:var(--accent);color:var(--text-on-accent)}
.cal-filtro{display:inline-flex;align-items:center;gap:.35rem;font-size:.78rem;padding:.25rem .65rem;border-radius:9999px;border:1px solid var(--border-input);color:var(--text-muted);background:transparent;cursor:pointer}
.cal-filtro.on{border-color:var(--cal-c);color:var(--cal-c);background:color-mix(in srgb,var(--cal-c) 12%,transparent)}
.cal-check{display:inline-flex;align-items:center;gap:.35rem;font-size:.8rem;color:var(--text-muted);margin-left:.35rem;cursor:pointer}
.cal-aviso{font-size:.8rem;color:var(--text-muted);background:var(--bg-subtle);border:1px solid var(--border-card);border-radius:8px;padding:.45rem .7rem;margin-bottom:.5rem}

.cal-it{display:flex;align-items:flex-start;gap:.35rem;width:100%;text-align:left;font-size:.75rem;line-height:1.25;padding:.2rem .4rem;border-radius:6px;
  border-left:3px solid var(--cal-c);background:color-mix(in srgb,var(--cal-c) 13%,transparent);color:var(--text-primary);cursor:pointer}
.cal-it:hover{background:color-mix(in srgb,var(--cal-c) 22%,transparent)}
.cal-it .cal-ico{color:var(--cal-c);font-size:.7rem;margin-top:.15rem;flex-shrink:0}
.cal-txt{min-width:0;display:flex;flex-direction:column}
.cal-tit{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cal-quien{font-size:.68rem;font-weight:600;color:var(--text-muted)}
.cal-sub{font-size:.72rem;color:var(--text-muted);overflow-wrap:anywhere}
.cal-it.grande{font-size:.875rem;padding:.5rem .65rem}
.cal-it.grande .cal-tit{white-space:normal}
.cal-it.hecha{opacity:.55}
.cal-it.hecha .cal-tit,.cal-tachado{text-decoration:line-through}
.cal-lista{display:flex;flex-direction:column;gap:.2rem;min-width:0}

.cal-mes{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));border-top:1px solid var(--border-card);border-left:1px solid var(--border-card)}
.cal-cab{font-size:.72rem;text-transform:uppercase;letter-spacing:.04em;color:var(--text-muted);padding:.35rem .4rem;border-right:1px solid var(--border-card);border-bottom:1px solid var(--border-card)}
.cal-celda{min-height:6.5rem;padding:.25rem;border-right:1px solid var(--border-card);border-bottom:1px solid var(--border-card);display:flex;flex-direction:column;gap:.2rem;min-width:0}
.cal-celda.fuera{background:var(--bg-subtle)}
.cal-celda.fuera .cal-num{color:var(--text-muted)}
.cal-num{align-self:flex-start;font-size:.78rem;font-weight:600;color:var(--text-primary);min-width:1.6rem;height:1.6rem;border-radius:9999px;cursor:pointer}
.cal-num:hover{background:var(--bg-subtle)}
.cal-celda.hoy .cal-num{background:var(--accent);color:var(--text-on-accent)}
.cal-mas{font-size:.72rem;color:var(--text-muted);text-align:left;padding:0 .4rem;cursor:pointer}
.cal-mas:hover{color:var(--text-primary);text-decoration:underline}

.cal-semana{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:.4rem}
.cal-col{border:1px solid var(--border-card);border-radius:10px;padding:.35rem;min-height:14rem;min-width:0}
.cal-col.hoy{border-color:var(--accent)}
.cal-col-cab{display:flex;align-items:baseline;gap:.35rem;width:100%;padding:.1rem .2rem .4rem;color:var(--text-muted);font-size:.75rem;text-transform:uppercase;cursor:pointer}
.cal-col-cab strong{font-size:1.05rem;color:var(--text-primary)}
.cal-col.hoy .cal-col-cab strong{color:var(--accent)}

.cal-dia{display:flex;flex-direction:column;gap:.4rem;max-width:44rem}
.cal-agenda{display:flex;flex-direction:column;gap:1rem;max-width:44rem}
.cal-ag-dia h3{font-size:.85rem;font-weight:600;margin-bottom:.35rem;color:var(--text-primary)}
.cal-ag-dia.hoy h3{color:var(--accent)}
.cal-num-txt{cursor:pointer;text-align:left}
.cal-num-txt:hover{text-decoration:underline}

@media (max-width: 767px){
  .cal-talento{min-width:0;flex:1}
  .cal-celda{min-height:4.2rem;padding:.15rem}
  .cal-mes .cal-it{padding:.1rem .2rem;font-size:.65rem}
  .cal-mes .cal-it .cal-ico,.cal-mes .cal-quien{display:none}
  .cal-semana{grid-template-columns:1fr}
  .cal-col{min-height:0}
}

/* Calendario · Fase 2: eventos, rejilla de horas, formulario y «Por cerrar» */
.cal-it.pendiente{border-left-style:dashed}
.cal-hora{font-variant-numeric:tabular-nums;font-weight:600;color:var(--cal-c)}
.cal-globo{display:inline-flex;align-items:center;justify-content:center;min-width:1.25rem;height:1.25rem;padding:0 .35rem;border-radius:9999px;background:var(--accent);color:var(--text-on-accent);font-size:.7rem;font-weight:700}

.cal-tg{--cal-gut:3.4rem;border:1px solid var(--border-card);border-radius:10px;overflow:hidden}
.cal-tg-fila{display:grid;grid-template-columns:var(--cal-gut) repeat(var(--cal-cols),minmax(0,1fr));border-bottom:1px solid var(--border-card);overflow-y:hidden;scrollbar-gutter:stable}
.cal-tg-gut{font-size:.65rem;color:var(--text-muted);padding:.3rem .35rem;text-align:right}
.cal-tg-todo .cal-tg-gut{align-self:center}
.cal-tg-dcab{display:flex;align-items:baseline;justify-content:center;gap:.35rem;padding:.4rem;font-size:.75rem;text-transform:uppercase;color:var(--text-muted);border-left:1px solid var(--border-card);cursor:pointer}
.cal-tg-dcab strong{font-size:1.05rem;color:var(--text-primary)}
.cal-tg-dcab.hoy strong{color:var(--accent)}
.cal-tg-todo-dia{border-left:1px solid var(--border-card);padding:.25rem;min-height:2rem;min-width:0;max-height:8.5rem;overflow-y:auto}
.cal-tg-scroll{height:min(62vh,640px);overflow-y:auto;scrollbar-gutter:stable}
.cal-tg-cuerpo{display:grid;grid-template-columns:var(--cal-gut) repeat(var(--cal-cols),minmax(0,1fr));position:relative}
.cal-tg-horas{position:relative;padding:0}
.cal-tg-h{position:absolute;right:.35rem;transform:translateY(-50%);font-size:.65rem;color:var(--text-muted);font-variant-numeric:tabular-nums}
.cal-tg-dia{position:relative;border-left:1px solid var(--border-card);
  background-image:repeating-linear-gradient(to bottom,var(--border-card) 0,var(--border-card) 1px,transparent 1px,transparent 44px)}
.cal-tg-dia.hoy{background-color:color-mix(in srgb,var(--accent) 4%,transparent)}
.cal-ahora{position:absolute;left:0;right:0;height:2px;background:var(--danger);z-index:2;pointer-events:none}
.cal-ahora::before{content:'';position:absolute;left:-4px;top:-3px;width:8px;height:8px;border-radius:9999px;background:var(--danger)}
.cal-ev{position:absolute;z-index:1;display:flex;flex-direction:column;align-items:flex-start;text-align:left;overflow:hidden;padding:.2rem .35rem;border-radius:6px;
  border-left:3px solid var(--cal-c);background:color-mix(in srgb,var(--cal-c) 18%,var(--bg-card));color:var(--text-primary);font-size:.72rem;line-height:1.2;cursor:pointer}
.cal-ev:hover{background:color-mix(in srgb,var(--cal-c) 28%,var(--bg-card))}
.cal-ev.pendiente{border-left-style:dashed}
.cal-ev.hecha{opacity:.55}
.cal-ev.hecha .cal-ev-tit{text-decoration:line-through}
.cal-ev-tit{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.cal-ev-meta{font-size:.66rem;color:var(--text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}

.cal-pill{display:inline-flex;align-items:center;gap:.35rem;font-size:.8rem;padding:.25rem .65rem;border-radius:9999px;border:1px solid var(--border-input);color:var(--text-primary);cursor:pointer}
.cal-pill input{accent-color:var(--accent)}
.cal-pill.on{border-color:var(--accent);background:var(--accent-soft)}
.cal-asis{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem}
.cal-asis .mc-sel{width:auto}
.cal-solape{margin-top:.75rem;border-radius:10px;padding:.6rem .8rem;font-size:.85rem;color:var(--text-primary);
  border:1px solid color-mix(in srgb,var(--warn) 45%,transparent);background:color-mix(in srgb,var(--warn) 10%,transparent)}
.cal-solape .fa-triangle-exclamation{color:var(--warn)}
.cal-solape ul{margin-top:.3rem;padding-left:1rem;list-style:disc}
.cal-cerrar{border:1px solid var(--border-card);border-radius:10px;padding:.7rem .85rem}
.mc-chip button{margin-left:.15rem;opacity:.7;cursor:pointer}
.mc-chip button:hover{opacity:1}

/* Calendario · Fase 4: arrastrar, avisos y confirmación de Trello */
.cal-it[draggable="true"],.cal-ev[draggable="true"]{cursor:grab}
.cal-it.arrastrando,.cal-ev.arrastrando{opacity:.4}
.cal-sobre{outline:2px dashed var(--accent);outline-offset:-2px;background-color:color-mix(in srgb,var(--accent) 8%,transparent)}
[data-hueco]{cursor:cell}
[data-hueco] .cal-it,[data-hueco] .cal-ev,[data-hueco] button{cursor:pointer}
.cal-toast{position:fixed;bottom:1.5rem;left:50%;transform:translateX(-50%);z-index:90;display:flex;align-items:center;gap:.9rem;
  background:var(--bg-card);border:1px solid var(--border-card);color:var(--text-primary);padding:.65rem 1rem;border-radius:.6rem;
  font-size:.85rem;font-weight:600;box-shadow:var(--shadow-pop);max-width:92vw}
.cal-toast-ok{border-color:var(--ok)}
.cal-toast-error{border-color:var(--danger);color:var(--danger)}
.cal-toast-btn{color:var(--accent);font-weight:700;text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.cal-modal{position:fixed;inset:0;z-index:95;display:flex;align-items:center;justify-content:center;padding:1rem}
.cal-modal-fondo{position:absolute;inset:0;background:rgba(0,0,0,.35)}
.cal-modal-caja{position:relative;width:min(30rem,100%);background:var(--bg-card);border:1px solid var(--border-card);border-radius:12px;padding:1.1rem 1.2rem;box-shadow:var(--shadow-pop)}

/* Portal · Calendario (2026-10-26) */
.cal-leyenda{display:flex;flex-wrap:wrap;gap:.9rem;font-size:.75rem;margin:.6rem 0}
.pc-evento{border:1px solid var(--border-card);border-left:3px solid var(--cal-c);border-radius:10px;padding:.65rem .8rem;background:color-mix(in srgb,var(--cal-c) 6%,var(--bg-card))}
.pc-evento.pendiente{border-left-style:dashed}
.pc-datos{display:flex;flex-wrap:wrap;gap:.35rem .9rem;font-size:.8rem;color:var(--text-muted);margin-top:.3rem}
.pc-datos i{margin-right:.2rem}
.pc-pasos{list-style:decimal;padding-left:1.2rem;font-size:.85rem;color:var(--text-primary)}
.pc-pasos li{margin:.15rem 0}