.fp-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@font-face {
  font-family: "Samsung Sharp Sans";
  src: url("../fonts/samsungsharpsans.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Samsung Sharp Sans";
  src: url("../fonts/samsungsharpsans-medium.otf") format("opentype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Samsung Sharp Sans";
  src: url("../fonts/samsungsharpsans-bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Marca: violeta como acento único */
  --fp-violet: #6d28d9;
  --fp-violet-dark: #4c1d95;
  --fp-violet-rgb: 109, 40, 217;
  --fp-gradient-cta: linear-gradient(100deg, var(--fp-violet), var(--fp-violet-dark));

  --fp-bg: #f5f6f8;
  --fp-surface: #ffffff;
  --fp-surface-2: #fafbfc;
  --fp-border: #e4e7ec;
  --fp-text: #14161c;
  --fp-text-muted: #666b78;
  --fp-header-bg: rgba(255, 255, 255, 0.75);
  --fp-shadow: 0 1px 2px rgba(20, 22, 28, 0.04), 0 1px 12px rgba(20, 22, 28, 0.03);
  --fp-glow: 0 0 0 1px rgba(109, 40, 217, 0.14), 0 0 20px -6px rgba(109, 40, 217, 0.35);

  /* Estados semánticos (únicos colores fuera del violeta) */
  --fp-info: #2563eb;
  --fp-info-rgb: 37, 99, 235;
  --fp-danger: #c22b3f;
  --fp-danger-bg: rgba(194, 43, 63, 0.08);
  --fp-success: #12a878;
  --fp-success-bg: rgba(18, 168, 120, 0.08);
  --fp-mustard: #a6790a;
  --fp-teal: #0891b2;
  --fp-neon: #4d8c00;
  --fp-client-gray: #8f939e;

  --fp-radius-sm: 8px;
  --fp-radius-md: 12px;
  --fp-radius-lg: 18px;

  /* Escala tipográfica */
  --fp-text-xs: 11px;
  --fp-text-sm: 12.5px;
  --fp-text-base: 14px;
  --fp-text-md: 16px;
  --fp-text-lg: 20px;
  --fp-text-xl: 26px;
  --fp-text-2xl: 32px;

  /* Escala de espaciado (múltiplos de 4px) */
  --fp-space-1: 4px;
  --fp-space-2: 8px;
  --fp-space-3: 12px;
  --fp-space-4: 16px;
  --fp-space-5: 20px;
  --fp-space-6: 24px;
  --fp-space-8: 32px;
  --fp-space-10: 40px;
}

:root[data-theme="dark"] {
  --fp-bg: #09090f;
  --fp-surface: #131320;
  --fp-surface-2: #181829;
  --fp-border: #242438;
  --fp-text: #eeecf7;
  --fp-text-muted: #918fa8;
  --fp-header-bg: rgba(9, 9, 15, 0.72);
  --fp-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 28px -6px rgba(0, 0, 0, 0.45);
  --fp-glow: 0 0 0 1px rgba(167, 139, 250, 0.22), 0 0 26px -4px rgba(124, 58, 237, 0.45);
  --fp-violet: #a78bfa;
  --fp-violet-dark: #7c3aed;
  --fp-violet-rgb: 167, 139, 250;
  --fp-info: #60a5fa;
  --fp-info-rgb: 96, 165, 250;

  --fp-danger: #ff6b7f;
  --fp-danger-bg: rgba(255, 107, 127, 0.12);
  --fp-success: #2fe0a8;
  --fp-success-bg: rgba(47, 224, 168, 0.12);
  --fp-mustard: #e0b12f;
  --fp-teal: #22d3ee;
  --fp-neon: #9fef00;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fp-bg: #09090f;
    --fp-surface: #131320;
    --fp-surface-2: #181829;
    --fp-border: #242438;
    --fp-text: #eeecf7;
    --fp-text-muted: #918fa8;
    --fp-header-bg: rgba(9, 9, 15, 0.72);
    --fp-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 28px -6px rgba(0, 0, 0, 0.45);
    --fp-glow: 0 0 0 1px rgba(167, 139, 250, 0.22), 0 0 26px -4px rgba(124, 58, 237, 0.45);
    --fp-violet: #a78bfa;
    --fp-violet-dark: #7c3aed;
    --fp-violet-rgb: 167, 139, 250;
    --fp-info: #60a5fa;
    --fp-info-rgb: 96, 165, 250;
    --fp-danger: #ff6b7f;
    --fp-danger-bg: rgba(255, 107, 127, 0.12);
    --fp-success: #2fe0a8;
    --fp-success-bg: rgba(47, 224, 168, 0.12);
    --fp-mustard: #e0b12f;
    --fp-teal: #22d3ee;
    --fp-neon: #9fef00;
  }
}

* { box-sizing: border-box; }

/* Los navegadores NO heredan font-family en <button> por defecto (usan la fuente del sistema,
   ej. Arial) — sin esto, cualquier botón que no declare su propio font-family explícito se ve con
   una tipografía distinta al resto de la interfaz. Esto ya estaba pasando en varios botones. */
button { font-family: inherit; }

html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
}

body {
  background: var(--fp-bg);
  color: var(--fp-text);
  font-family: "Samsung Sharp Sans", "Segoe UI", system-ui, -apple-system, "Inter", Roboto, Arial, sans-serif;
  font-size: var(--fp-text-base);
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  transition: background-color 0.2s ease, color 0.2s ease;
}

/* En oscuro, un resplandor sutil de marca en vez de negro plano (referencia MappaProp) */
:root[data-theme="dark"] body {
  background:
    radial-gradient(1100px 520px at 12% -8%, rgba(var(--fp-violet-rgb), 0.14), transparent 60%),
    radial-gradient(900px 480px at 100% 0%, rgba(var(--fp-violet-rgb), 0.08), transparent 55%),
    var(--fp-bg);
  background-attachment: fixed;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) body {
    background:
      radial-gradient(1100px 520px at 12% -8%, rgba(var(--fp-violet-rgb), 0.14), transparent 60%),
      radial-gradient(900px 480px at 100% 0%, rgba(var(--fp-violet-rgb), 0.08), transparent 55%),
      var(--fp-bg);
    background-attachment: fixed;
  }
}

a { color: inherit; text-decoration: none; }

/* ---------- Scrollbar oscuro, sin flechas (todo el sistema) ---------- */

* {
  scrollbar-width: thin;
  scrollbar-color: var(--fp-border) transparent;
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--fp-border);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background: var(--fp-text-muted); background-clip: padding-box; }
::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
::-webkit-scrollbar-corner { background: transparent; }

/* ---------- Inputs numéricos sin flechas de incremento/decremento ---------- */

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}

/* ---------- Íconos de calendario/reloj siempre blancos (fondo oscuro en toda la plataforma) ---------- */
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator {
  filter: invert(1);
  cursor: pointer;
}

/* ---------- Logo dual (claro/oscuro) sin parpadeo ---------- */

.fp-logo-dual { display: inline-flex; align-items: center; }
.fp-logo-dual img { height: 22px; width: auto; display: none; }
.fp-logo-dual img.fp-logo--dark { display: block; }
:root[data-theme="dark"] .fp-logo-dual img.fp-logo--dark { display: none; }
:root[data-theme="dark"] .fp-logo-dual img.fp-logo--light { display: block; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .fp-logo-dual img.fp-logo--dark { display: none; }
  :root:not([data-theme="light"]) .fp-logo-dual img.fp-logo--light { display: block; }
}

/* ---------- Header ---------- */

.fp-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--fp-header-bg);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  border-bottom: 1px solid var(--fp-border);
}

:root[data-theme="dark"] .fp-header { box-shadow: 0 1px 0 rgba(var(--fp-violet-rgb), 0.16); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .fp-header { box-shadow: 0 1px 0 rgba(var(--fp-violet-rgb), 0.16); }
}

.fp-header__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
  height: 64px;
  display: flex;
  align-items: center;
  gap: 32px;
}

.fp-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}


.fp-nav {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 1;
}

.fp-nav__link {
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--fp-text-muted);
  transition: color 0.15s ease, background-color 0.15s ease;
}

.fp-nav__link:hover {
  color: var(--fp-text);
  background: var(--fp-surface-2);
}

.fp-nav__link--active {
  color: var(--fp-text);
  background: var(--fp-surface-2);
  box-shadow: inset 0 -2px 0 var(--fp-violet);
}

.fp-nav__link--bug {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.fp-nav__link-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--fp-danger);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
}

/* ---------- Submenús del nav principal ("Control", "Administración") — reusa .fp-dropdown ---------- */
.fp-nav-dropdown { position: relative; }
.fp-nav-dropdown__toggle {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: none;
  background: none;
  font-family: inherit;
  cursor: pointer;
}
.fp-nav-dropdown__caret { width: 12px; height: 12px; flex-shrink: 0; transition: transform 0.15s ease; }
.fp-header-menu--open .fp-nav-dropdown__caret { transform: rotate(180deg); }
.fp-nav-dropdown__menu { left: 0; right: auto; min-width: 180px; }

.fp-header__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  /* Ancla independiente de que .fp-nav tenga flex:1 — en mobile .fp-nav pasa a
     position:absolute (ver breakpoint 860px) y sale del flujo flex, así que sin este
     margin-left:auto la campana/avatar quedaban pegados al botón de hamburguesa en vez de
     fijos a la derecha. */
  margin-left: auto;
}

.fp-icon { width: 17px; height: 17px; }

/* ---------- Campanita de notificaciones (libre, sin contenedor) ---------- */

.fp-notif-bell { position: relative; }

.fp-notif-bell__btn {
  position: relative;
  width: 36px;
  height: 36px;
  border: none;
  background: none;
  color: var(--fp-text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: 50%;
  transition: color 0.15s ease, background-color 0.15s ease;
}
.fp-notif-bell__btn:hover { color: var(--fp-text); background: rgba(255, 255, 255, 0.06); }

.fp-notif-bell__badge {
  position: absolute;
  top: 5px;
  right: 5px;
  background: var(--fp-danger);
  color: #fff;
  border-radius: 999px;
  font-size: 9.5px;
  font-weight: 700;
  min-width: 15px;
  height: 15px;
  align-items: center;
  justify-content: center;
  padding: 0 3px;
  box-shadow: 0 0 0 2px var(--fp-header-bg);
}

/* ---------- Avatar / menú de usuario ---------- */

.fp-user-menu { position: relative; }

.fp-user-menu__avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--fp-border);
  background: var(--fp-surface-2);
  color: var(--fp-text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  overflow: hidden;
  padding: 0;
  transition: border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.fp-user-menu__avatar svg { width: 18px; height: 18px; }
.fp-user-menu__avatar-img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }
.fp-user-menu__avatar:hover { border-color: var(--fp-violet); color: var(--fp-text); box-shadow: var(--fp-glow); }

/* ---------- Distinción visual del Administrador General (único rol "premium") ---------- */
.fp-user-menu__avatar--admin {
  border: 1px solid transparent;
  background:
    linear-gradient(var(--fp-surface-2), var(--fp-surface-2)) padding-box,
    linear-gradient(135deg, #f5c94a, var(--fp-violet) 55%, #f5c94a) border-box;
  color: #f5c94a;
  animation: fpAdminGlow 3s ease-in-out infinite;
}
.fp-user-menu__avatar--admin:hover { box-shadow: 0 0 16px 2px rgba(245, 201, 74, 0.55); }

@keyframes fpAdminGlow {
  0%, 100% { box-shadow: 0 0 6px 0 rgba(245, 201, 74, 0.35); }
  50% { box-shadow: 0 0 14px 2px rgba(245, 201, 74, 0.6); }
}

.fp-dropdown--admin .fp-dropdown__header {
  background: linear-gradient(135deg, rgba(245, 201, 74, 0.14), rgba(139, 92, 246, 0.1));
}

.fp-admin-crown {
  color: #f5c94a;
  margin-left: 4px;
  font-size: 11px;
  text-shadow: 0 0 6px rgba(245, 201, 74, 0.7);
}

@media (prefers-reduced-motion: reduce) {
  .fp-user-menu__avatar--admin { animation: none; }
}

/* ---------- Menú flotante premium (compartido) ---------- */

.fp-dropdown {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 300;
  min-width: 220px;
  background: var(--fp-surface);
  border: 1px solid var(--fp-border);
  border-radius: var(--fp-radius-md);
  box-shadow: var(--fp-shadow), var(--fp-glow);
  padding: 6px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
}

.fp-header-menu--open .fp-dropdown { opacity: 1; visibility: visible; transform: translateY(0); }

.fp-dropdown--notif { min-width: 280px; max-height: 380px; overflow-y: auto; }

.fp-dropdown__header {
  padding: 10px 12px;
  border-bottom: 1px solid var(--fp-border);
  margin-bottom: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.fp-dropdown__header strong { font-size: 13.5px; color: var(--fp-text); }
.fp-dropdown__header span { font-size: 11.5px; color: var(--fp-text-muted); }

/* Botón "marcar todas como leídas" (ícono de sobre abierto, sin relleno) en la campanita. */
.fp-mark-all-read-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border: none;
  background: transparent;
  color: #4f8ef7;
  border-radius: 6px;
  cursor: pointer;
  flex-shrink: 0;
  transition: background-color 0.15s ease;
}
.fp-mark-all-read-btn:hover { background: rgba(79, 142, 247, 0.14); }
.fp-mark-all-read-btn:disabled { opacity: 0.5; cursor: default; }

.fp-dropdown__item {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 9px 12px;
  border: none;
  background: none;
  color: var(--fp-text);
  font-size: 13px;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  border-radius: var(--fp-radius-sm);
  transition: background-color 0.12s ease;
}
.fp-dropdown__item:hover { background: var(--fp-surface-2); }
.fp-dropdown__item--danger { color: var(--fp-danger); }

.fp-dropdown__empty { font-size: 12.5px; color: var(--fp-text-muted); padding: 12px; margin: 0; }

.fp-dropdown__notif {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 9px 12px;
  border-radius: var(--fp-radius-sm);
  text-decoration: none;
}
.fp-dropdown__notif:hover { background: var(--fp-surface-2); }
.fp-dropdown__notif--unread { background: rgba(var(--fp-violet-rgb), 0.06); }
.fp-dropdown__notif-title { font-size: 12.5px; color: var(--fp-text); font-weight: 500; }
.fp-dropdown__notif--unread .fp-dropdown__notif-title { font-weight: 700; }
.fp-dropdown__notif-time { font-size: 11px; color: var(--fp-text-muted); }

.fp-dropdown__footer-link {
  display: block;
  padding: 9px 12px;
  font-size: 12px;
  font-weight: 600;
  color: var(--fp-violet);
}

/* Fila del pie del desplegable de notificaciones: "Ver todas" + botón de marcar todas leídas
   comparten el mismo renglón — antes el botón vivía en el header, se movió acá (pedido de
   Marcos) para que quede junto a la otra acción de la lista, no al lado del título. */
.fp-dropdown__footer {
  margin-top: 4px;
  border-top: 1px solid var(--fp-border);
  padding-right: 8px;
}

/* ---------- Main ---------- */

.fp-main { flex: 1; padding: var(--fp-space-10) var(--fp-space-6) var(--fp-space-10); }
.fp-main__inner { max-width: 1280px; margin: 0 auto; }

/* ---------- Listado compacto label:valor (reemplaza grillas de tarjetas
   grandes cuando el contenido es corto o vacío, para aprovechar el espacio) ---------- */

.fp-kv-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 4px 12px;
  background: var(--fp-surface);
  border: 1px solid var(--fp-border);
  border-radius: var(--fp-radius-md);
  padding: 14px 20px;
  box-shadow: var(--fp-shadow);
}

.fp-kv-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 5px;
  padding: 8px 6px;
  min-width: 0;
}

.fp-kv-item__label {
  font-size: 12.5px;
  color: var(--fp-text-muted);
}

.fp-kv-item__value {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--fp-text);
  text-align: center;
  overflow-wrap: break-word;
  min-width: 0;
}

/* Distancia fija de este encabezado hacia lo que sigue debajo (calendario, tabla, grilla, etc.) —
   la misma en toda la plataforma, sin excepciones, tenga o no subtítulo. */
.fp-page-title { margin-bottom: 28px; }
.fp-page-title h1 { font-size: var(--fp-text-xl); font-weight: 700; margin: 0 0 var(--fp-space-1); }
.fp-page-title p { font-size: 14px; color: var(--fp-text-muted); margin: 0; }

.fp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin-bottom: 32px;
}

.fp-card {
  background: var(--fp-surface);
  border: 1px solid var(--fp-border);
  border-radius: var(--fp-radius-md);
  padding: 20px;
  box-shadow: var(--fp-shadow);
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

a.fp-card:hover {
  border-color: rgba(var(--fp-violet-rgb), 0.4);
  box-shadow: var(--fp-shadow), var(--fp-glow);
  transform: translateY(-1px);
}

.fp-card__label { font-size: 12.5px; color: var(--fp-text-muted); font-weight: 500; }
.fp-card__value { font-size: var(--fp-text-xl); font-weight: 700; overflow-wrap: break-word; word-break: break-word; }

/* ---------- Fila de estadísticas con pill-label (ficha de cliente: cliente desde /
   última actualización / próxima publicación) — todo centrado en X e Y. ---------- */
.fp-stat-row { display: flex; width: 100%; justify-content: space-around; align-items: center; gap: 20px; flex-wrap: wrap; }
.fp-stat-block { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; min-width: 0; }
.fp-stat-block__pill {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid var(--fp-border);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--fp-text-muted);
}
.fp-stat-block__value { font-size: 15px; font-weight: 700; color: var(--fp-text); }
.fp-stat-block__caption { font-size: 11.5px; color: var(--fp-text-muted); }

/* Punto de actividad debajo de cada dato — color fijo (verde) o dinámico (fp_urgency_color). */
.fp-stat-block__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-top: 2px;
  background: rgb(var(--dot-color));
  box-shadow: 0 0 7px 1px rgba(var(--dot-color), 0.55);
}

/* Tarjeta que centra todo su contenido, en X e Y (servicios contratados, plan, stat-row). */
.fp-card--centered { align-items: center; justify-content: center; text-align: center; }

/* ---------- Características incluidas en el plan (chips + "+N" de sobrante) ---------- */
.fp-plan-features { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 8px; }
.fp-plan-features__more {
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--fp-text-muted);
  border: 1px solid var(--fp-border);
  background: rgba(127, 127, 127, 0.08);
}

/* ---------- Tarjeta "Próxima publicación" (portal cliente) ---------- */
.fp-next-pub__title {
  font-size: 16px;
  font-weight: 700;
  color: var(--fp-text);
  overflow-wrap: break-word;
  word-break: break-word;
}
.fp-next-pub__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  row-gap: 6px;
  column-gap: 8px;
  margin-top: 2px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--fp-text-muted);
}
.fp-next-pub__meta-item { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.fp-next-pub__dot { color: var(--fp-border); font-weight: 400; }
@media (max-width: 480px) {
  .fp-next-pub__dot { display: none; }
  .fp-next-pub__meta { row-gap: 8px; }
}

.fp-empty {
  border: 1px dashed var(--fp-border);
  border-radius: 12px;
  padding: 40px;
  text-align: center;
  color: var(--fp-text-muted);
  font-size: 13.5px;
}

/* ---------- Footer ---------- */

.fp-footer {
  border-top: 1px solid var(--fp-border);
  background: var(--fp-header-bg);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
}

:root[data-theme="dark"] .fp-footer { box-shadow: 0 -1px 0 rgba(var(--fp-violet-rgb), 0.16); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .fp-footer { box-shadow: 0 -1px 0 rgba(var(--fp-violet-rgb), 0.16); }
}

.fp-footer__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 20px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.fp-footer__brand { display: flex; align-items: center; gap: 10px; }
.fp-footer__brand .fp-logo-dual img { height: 18px; opacity: 0.85; }

.fp-footer__text { display: flex; flex-direction: column; line-height: 1.3; }
.fp-footer__line1 { font-size: 12.5px; font-weight: 600; color: var(--fp-text); }
.fp-footer__line2 { font-size: 11px; color: var(--fp-text-muted); }
.fp-footer__meta { font-size: 11.5px; color: var(--fp-text-muted); }

/* ---------- Auth (login / recuperar / restablecer) ---------- */

.fp-auth {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: var(--fp-bg);
  overflow: hidden;
}

.fp-auth::before {
  content: '';
  position: absolute;
  inset: -25%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(38% 38% at 28% 32%, rgba(var(--fp-violet-rgb), 0.30), transparent 68%),
    radial-gradient(34% 34% at 74% 68%, rgba(var(--fp-violet-rgb), 0.20), transparent 65%);
  filter: blur(70px);
  animation: fpAuthBgDrift 26s ease-in-out infinite;
}

@keyframes fpAuthBgDrift {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  50% { transform: translate(6%, -5%) rotate(6deg); }
}

@media (prefers-reduced-motion: reduce) {
  .fp-auth::before { animation: none; }
}

.fp-auth__card {
  position: relative;
  z-index: 1;
  isolation: isolate;
  width: 100%;
  max-width: 380px;
  background: var(--fp-surface);
  border: 1px solid var(--fp-border);
  border-radius: 16px;
  padding: 36px 32px;
  box-shadow: var(--fp-shadow);
}

.fp-auth__card::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: -1.8px;
  border-radius: 18px;
  padding: 1.8px;
  background: linear-gradient(90deg, var(--fp-violet-dark), var(--fp-violet), #d9c9ff, var(--fp-violet), var(--fp-violet-dark));
  background-size: 300% 100%;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  filter: blur(1.8px);
  opacity: 0.9;
  animation: fpAuthBorderTrace 4s linear infinite;
  pointer-events: none;
}

@keyframes fpAuthBorderTrace {
  0% { background-position: 0% 0%; }
  100% { background-position: 200% 0%; }
}

@media (prefers-reduced-motion: reduce) {
  .fp-auth__card::before { animation: none; }
}

.fp-auth__logo { display: flex; justify-content: center; margin-bottom: 8px; }
.fp-auth__logo .fp-logo-dual img { height: 30px; }

.fp-auth__title { font-size: 13px; text-align: center; color: var(--fp-text-muted); margin: 0 0 28px; }

/* Pantalla de "Estamos en mantenimiento" — misma estética que el login (fondo con glow a la
   deriva, tarjeta con borde degradado animado, ver .fp-auth arriba), solo cambia el contenido. */
.fp-maintenance__title {
  font-size: 19px;
  font-weight: 700;
  text-align: center;
  margin: 4px 0 14px;
  color: var(--fp-text);
  text-shadow: 0 0 18px rgba(var(--fp-violet-rgb), 0.55);
}

.fp-maintenance__text {
  font-size: 13.5px;
  line-height: 1.6;
  text-align: center;
  color: var(--fp-text-muted);
  margin: 0 0 10px;
}

.fp-field { margin-bottom: 16px; }
.fp-field label {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  margin-bottom: 6px;
  color: var(--fp-text);
}

.fp-field input, .fp-field textarea, .fp-field select {
  width: 100%;
  padding: 10px 12px;
  border-radius: var(--fp-radius-sm);
  border: 1px solid var(--fp-border);
  background: var(--fp-surface-2);
  color: var(--fp-text);
  font-size: var(--fp-text-base);
  font-family: inherit;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.fp-field textarea { resize: vertical; }

.fp-password-wrap { position: relative; }
.fp-password-wrap input { padding-right: 40px; }
.fp-password-toggle {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  color: #5c5972;
  cursor: pointer;
  border-radius: var(--fp-radius-sm);
  transition: color 0.15s ease;
}
.fp-password-toggle:hover { color: var(--fp-text); }
.fp-password-toggle svg { width: 18px; height: 18px; }
.fp-icon-eye-off[hidden] { display: none; }

/* Sistema de formularios: todo campo de la app comparte el mismo glow al enfocar. */
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="tel"]:focus,
input[type="date"]:focus,
input[type="number"]:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--fp-violet);
  box-shadow: 0 0 0 3px rgba(var(--fp-violet-rgb), 0.16);
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="date"],
input[type="number"],
select,
textarea {
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.fp-btn {
  width: 100%;
  padding: 11px 16px;
  border-radius: var(--fp-radius-sm);
  border: none;
  background: var(--fp-gradient-cta);
  color: #ffffff;
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: opacity 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
  box-shadow: 0 1px 2px rgba(0,0,0,0.08);
}

.fp-btn:hover { opacity: 0.94; box-shadow: 0 6px 24px -6px rgba(var(--fp-violet-rgb), 0.5); }
.fp-btn:active { transform: translateY(1px); }
.fp-btn:focus-visible { outline: 2px solid var(--fp-violet); outline-offset: 2px; }

.fp-btn--dark { background: linear-gradient(100deg, var(--fp-violet-dark), #3b0764); }
.fp-btn--dark:hover { box-shadow: 0 6px 24px -6px rgba(59, 7, 100, 0.6); }
.fp-btn--dark:focus-visible { outline-color: var(--fp-violet-dark); }

.fp-auth__links {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-top: 20px;
  font-size: 12.5px;
}

.fp-auth__links a { color: var(--fp-text-muted); }
.fp-auth__links a:hover { color: var(--fp-violet); }

.fp-auth__cta {
  font-weight: 800;
  font-size: 13.5px;
  color: var(--fp-violet) !important;
  letter-spacing: 0.1px;
}
.fp-auth__cta:hover { color: var(--fp-violet-dark) !important; }

.fp-alert {
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 13px;
  margin-bottom: 18px;
  opacity: 1;
  max-height: 200px;
  overflow: hidden;
  transition: opacity 0.6s ease, max-height 0.6s ease, margin-bottom 0.6s ease, padding 0.6s ease;
}

.fp-alert--fading {
  opacity: 0;
  max-height: 0;
  margin-bottom: 0;
  padding-top: 0;
  padding-bottom: 0;
}

.fp-alert--error { background: var(--fp-danger-bg); color: var(--fp-danger); }
.fp-alert--success { background: var(--fp-success-bg); color: var(--fp-success); }

/* Contraseña generada al restablecer un acceso de cliente: se muestra una única vez, nunca se
   autodescarta (a diferencia de .fp-alert--success) porque el admin necesita tiempo para copiarla. */
.fp-alert--credential {
  position: relative;
  background: rgba(224, 177, 47, 0.14);
  border: 1px solid var(--fp-mustard);
  color: var(--fp-text);
  padding-right: 40px;
}
.fp-alert--credential__value {
  display: inline-block;
  margin: 6px 0;
  padding: 6px 10px;
  border-radius: 6px;
  background: var(--fp-surface-2);
  font-size: 14px;
  letter-spacing: 0.03em;
  user-select: all;
}
.fp-alert--credential p { margin: 4px 0 0; font-size: 12px; color: var(--fp-text-muted); }
.fp-alert--credential__close {
  position: absolute;
  top: 8px;
  right: 10px;
  background: transparent;
  border: none;
  color: var(--fp-text-muted);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}
.fp-alert--credential__close:hover { color: var(--fp-text); }

/* ---------- Estados (referencia visual, se usan desde Fase 3) ---------- */

.fp-status--idea { color: #8b8fa0; }
.fp-status--produccion { color: #1420e6; }
.fp-status--revision_interna { color: #7b3fe4; }
.fp-status--enviado_cliente { color: #14b8e6; }
.fp-status--observado { color: var(--fp-mustard); }
.fp-status--cambios_solicitados { color: #e6791a; }
.fp-status--corregido { color: #0e9488; }
.fp-status--confirmado { color: var(--fp-success); }
.fp-status--programado { color: #14a3a0; }
.fp-status--publicado { color: #0f6b3a; }
.fp-status--atrasado { color: var(--fp-danger); }

:root[data-theme="dark"] .fp-status--corregido { color: #2dd4c4; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .fp-status--corregido { color: #2dd4c4; }
}

/* ---------- Tarjetas de cliente ---------- */

.fp-client-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-decoration: none;
}

.fp-client-card__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.fp-client-avatar {
  width: 40.7px;
  height: 40.7px;
  border-radius: var(--fp-radius-sm);
  object-fit: contain;
  padding: 4px;
  background: var(--fp-surface-2);
  border: 1px solid var(--fp-border);
  flex-shrink: 0;
}

.fp-client-avatar--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.01em;
  background: linear-gradient(135deg, rgba(var(--fp-violet-rgb), 0.18), rgba(var(--fp-violet-rgb), 0.06));
  color: var(--fp-violet);
  border-color: rgba(var(--fp-violet-rgb), 0.25);
}

.fp-status-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 4px;
}

/* Solo el indicador de CONEXIÓN (tarjetas de /clientes) pulsa; el resto de usos de
   fp-status-dot (estado de cuenta, plan contratado) representan un valor estático y
   no deben animarse. */
.fp-status-dot--live {
  animation: fpConnectionPulse 2.2s ease-in-out infinite;
}

.fp-status-dot--active {
  background: var(--fp-success);
  box-shadow: 0 0 0 4px var(--fp-success-bg), 0 0 16px 3px var(--fp-success-bg);
}

.fp-status-dot--inactive {
  background: var(--fp-danger);
  box-shadow: 0 0 0 4px var(--fp-danger-bg), 0 0 16px 3px var(--fp-danger-bg);
}

/* Semáforo de conexión de 3 niveles (Panel de clientes + señal de "ventana tranquila" en Bug). */
.fp-status-dot--activo {
  background: var(--fp-success);
  box-shadow: 0 0 0 4px var(--fp-success-bg), 0 0 16px 3px var(--fp-success-bg);
}

.fp-status-dot--gracia {
  background: var(--fp-mustard);
  box-shadow: 0 0 0 4px rgba(217, 164, 65, 0.22), 0 0 16px 3px rgba(217, 164, 65, 0.22);
}

.fp-status-dot--offline {
  background: var(--fp-danger);
  box-shadow: 0 0 0 4px var(--fp-danger-bg), 0 0 16px 3px var(--fp-danger-bg);
  animation: none;
}

@keyframes fpConnectionPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.55; transform: scale(0.82); }
}

/* Contenedor "Activo/Inactivo": estado comercial del cliente, independiente de la
   conexión (fp-status-dot). Mismo lenguaje visual que los campos del Perfil (pill
   redondeada, borde sutil, fondo de superficie), sin lápiz porque no es editable acá. */
.fp-commercial-badge {
  flex-shrink: 0;
  align-self: flex-start;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--fp-border);
  background: var(--fp-surface-2);
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  white-space: nowrap;
}

.fp-commercial-badge--active { color: var(--fp-success); }
.fp-commercial-badge--inactive { color: var(--fp-text-muted); }

.fp-client-card__name { font-size: 15px; font-weight: 700; color: var(--fp-text); line-height: 1.3; }
.fp-client-card__legal { font-size: 12px; color: var(--fp-text-muted); margin-top: 2px; }

/* Genérico: cualquier bloque de contenido "achicable" con Ver más/Ver menos (servicios
   contratados, clasificación para efemérides, y lo que se agregue después). El botón toggle
   es siempre el hermano inmediato del box — sin IDs, funcionan tantas instancias como haga falta. */
.fp-overflow { max-height: 68px; overflow: hidden; }
.fp-overflow--expanded { max-height: none; }
.fp-overflow-toggle {
  margin-top: 8px;
  background: none;
  border: none;
  color: var(--fp-violet);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
  font-family: inherit;
}
.fp-overflow-toggle:hover { text-decoration: underline; }

.fp-classification-card { text-align: center; }
.fp-classification-card .fp-card__label { display: block; }

/* ---------- Filtros de calendario ---------- */

.fp-filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  padding: 12px;
  background: var(--fp-surface);
  border: 1px solid var(--fp-border);
  border-radius: var(--fp-radius-md);
}

.fp-filter-bar input[type="text"],
.fp-filter-bar input[type="number"],
.fp-filter-bar select {
  padding: 7px 9px;
  border-radius: var(--fp-radius-sm);
  border: 1px solid var(--fp-border);
  background: var(--fp-surface-2);
  color: var(--fp-text);
  font-size: 12.5px;
  font-family: inherit;
}

/* Campo de texto/número suelto, fuera de .fp-field o .fp-filter-bar (mismo estilo base). */
.fp-input {
  padding: 9px 12px;
  border-radius: var(--fp-radius-sm);
  border: 1px solid var(--fp-border);
  background: var(--fp-surface-2);
  color: var(--fp-text);
  font-size: var(--fp-text-base);
  font-family: inherit;
}

/* Fila de filtros de "Gestión de propiedades/contenidos" (spec de Marcos, 2026-08-29): nunca debe
   apilar un control arriba de otro — todos van uno al lado del otro en una sola fila. En vez de
   achicarlos o dejar que un flex-wrap los mande a una segunda línea, la fila scrollea horizontal
   si no entran todos (scrollbar fina, discreta, misma superficie que el resto del portal). */
.fp-prop-filter-row {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: thin;
  min-width: 0; /* si no, un flex item con hijos flex-shrink:0 nunca se achica por debajo de su
                   contenido y termina agrandando el <form>/la página entera en vez de scrollear
                   acá adentro (bug clásico de flexbox: min-width por defecto es "auto"). */
  width: 100%;
}
.fp-prop-filter-row > * { flex-shrink: 0; }
.fp-prop-filter-row::-webkit-scrollbar { height: 6px; }
.fp-prop-filter-row::-webkit-scrollbar-thumb { background: var(--fp-border); border-radius: 3px; }

.fp-filter-bar__checkbox {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12.5px;
  color: var(--fp-text-muted);
  font-weight: 400;
}

/* ---------- Desplegable propio con ícono por opción (reemplaza <select> nativo) ---------- */

.fp-icon-select__wrap { position: relative; display: inline-flex; }
/* Dentro de un .fp-field (formularios normales) el desplegable llena el ancho
   disponible, igual que haría un <select>/<input> nativo; en la barra de
   filtros del calendario (fuera de .fp-field) sigue compacto por contenido. */
.fp-field .fp-icon-select__wrap { display: flex; width: 100%; }
.fp-field .fp-icon-select__btn { width: 100%; }

select.fp-icon-select--native-hidden {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  width: 1px;
  height: 1px;
}

.fp-icon-select__btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  height: 40px;
  padding: 0 10px;
  border-radius: var(--fp-radius-sm);
  border: 1px solid var(--fp-border);
  background: var(--fp-surface-2);
  color: var(--fp-text);
  font-size: 12.5px;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  box-sizing: border-box;
}

.fp-icon-select__btn:hover { border-color: var(--fp-violet); }
.fp-icon-select__label {
  display: flex;
  align-items: center;
  gap: 6px;
  overflow: hidden;
  min-width: 0;
}
.fp-icon-select__label > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fp-icon-select__chevron { opacity: 0.6; flex-shrink: 0; }

.fp-icon-select__list {
  display: none;
  /* position:fixed (no absolute) a propósito — top/left los calcula iconSelect.js desde
     getBoundingClientRect() del botón, así el desplegable nunca queda recortado por un
     contenedor ancestro con overflow (ver .fp-prop-filter-row). Se monta directo en <body>
     (ver iconSelect.js) para no heredar el transform de .fp-modal (rompía la posición dentro de
     cualquier formulario en modal — bug real, Marcos 2026-09-02: "despliega en un costado").
     z-index 3000 a propósito (> .fp-modal-backdrop, que es 500): al vivir en <body> como
     hermano del modal en vez de descendiente, necesita ganarle en apilamiento explícitamente
     para no quedar tapado — mismo valor ya usado en ERP, que tiene este mismo componente. */
  position: fixed;
  min-width: 200px;
  max-height: 280px;
  overflow-y: auto;
  background: var(--fp-surface);
  border: 1px solid var(--fp-border);
  border-radius: var(--fp-radius-sm);
  box-shadow: var(--fp-shadow);
  padding: 6px;
  z-index: 3000;
}

.fp-icon-select__list--open { display: block; }

.fp-icon-select__item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  text-align: left;
  padding: 7px 10px;
  border-radius: 6px;
  border: none;
  background: none;
  color: var(--fp-text);
  font-size: 12.5px;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
}

.fp-icon-select__item:hover { background: var(--fp-surface-2); }
.fp-icon-select__item--active { color: var(--fp-violet); font-weight: 600; }

.fp-icon-select__dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
  display: inline-block;
}

.fp-icon-select__initials {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--fp-surface-2);
  border: 1px solid var(--fp-border);
  color: var(--fp-violet);
  font-size: 9.5px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* ---------- Calendario ---------- */

.fp-cal-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.fp-cal-action {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 16px;
  border-radius: var(--fp-radius-sm);
  border: 1px solid var(--fp-border);
  background: var(--fp-surface);
  color: var(--fp-text);
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.fp-cal-action svg { flex-shrink: 0; }

.fp-cal-action:hover {
  border-color: var(--fp-violet);
  color: var(--fp-violet);
  box-shadow: 0 4px 16px -6px rgba(var(--fp-violet-rgb), 0.35);
}

.fp-cal-nav {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 38px;
  padding: 0 10px;
  border-radius: var(--fp-radius-sm);
  border: 1px solid var(--fp-border);
  background: var(--fp-surface);
}

.fp-cal-nav__btn {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  border: none;
  background: none;
  color: var(--fp-text);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  transition: color 0.15s ease, background-color 0.15s ease;
}

.fp-cal-nav__btn:hover { color: var(--fp-violet); background: var(--fp-surface-2); }

.fp-cal-nav__label {
  font-size: 13px;
  font-weight: 600;
  min-width: 120px;
  text-align: center;
}

.fp-calendar, .fp-portal-calendar {
  background: var(--fp-surface);
  border: 1px solid var(--fp-border);
  border-radius: 12px;
  margin-bottom: 16px;
}

/* Sin overflow:hidden en el contenedor (cortaría el popup flotante de cada
   tarjeta) — el redondeo de esquinas se logra puntualmente en las celdas
   de los bordes en su lugar. */
.fp-calendar__weekdays span:first-child { border-top-left-radius: 12px; }
.fp-calendar__weekdays span:last-child { border-top-right-radius: 12px; }
.fp-calendar__week:last-child .fp-day:first-child { border-bottom-left-radius: 12px; }
.fp-calendar__week:last-child .fp-day:last-child { border-bottom-right-radius: 12px; }

.fp-calendar__weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  border-bottom: 1px solid var(--fp-border);
  background: var(--fp-surface-2);
}

.fp-calendar__weekdays span {
  padding: 8px 10px;
  font-size: 11px;
  font-weight: 600;
  color: var(--fp-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.fp-calendar__week {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}

.fp-day {
  min-height: 108px;
  min-width: 0;
  border-right: 1px solid var(--fp-border);
  border-bottom: 1px solid var(--fp-border);
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: background-color 0.12s ease;
}

.fp-calendar__week .fp-day:last-child { border-right: none; }

.fp-day--muted { background: var(--fp-surface-2); opacity: 0.55; }
.fp-day--today { background: rgba(var(--fp-violet-rgb), 0.07); box-shadow: inset 2px 0 0 var(--fp-violet); }
.fp-day--drop-target { background: rgba(var(--fp-violet-rgb), 0.16); outline: 2px dashed var(--fp-violet); outline-offset: -2px; box-shadow: var(--fp-glow); }

.fp-day__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.fp-day__num { font-size: 12px; font-weight: 600; color: var(--fp-text-muted); }
.fp-day--today .fp-day__num { color: var(--fp-violet); font-weight: 700; }

.fp-day__add-btn {
  cursor: pointer;
  width: 18px;
  height: 18px;
  border-radius: var(--fp-radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  color: var(--fp-text-muted);
  background: none;
  border: 1px solid var(--fp-border);
  transition: color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.fp-day__add-btn:hover { color: var(--fp-violet); border-color: var(--fp-violet); box-shadow: 0 0 0 3px rgba(var(--fp-violet-rgb), 0.16); }

/* ---------- Modal "Cargar nuevo ítem" ---------- */

.fp-new-item-form .fp-field { margin-bottom: 14px; }
.fp-new-item-form .fp-field label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--fp-text-muted);
  margin-bottom: 5px;
}
.fp-new-item-form input[type="text"] {
  width: 100%;
  padding: 8px 10px;
  border-radius: var(--fp-radius-sm);
  border: 1px solid var(--fp-border);
  background: var(--fp-surface-2);
  color: var(--fp-text);
  font-size: 13.5px;
  font-family: inherit;
  box-sizing: border-box;
}

.fp-new-item-form input[type="date"] {
  width: 100%;
  height: 40px;
  padding: 0 10px;
  border-radius: var(--fp-radius-sm);
  border: 1px solid var(--fp-border);
  background: var(--fp-surface-2);
  color: var(--fp-text);
  font-size: 13px;
  font-family: inherit;
  box-sizing: border-box;
}

/* El navegador dibuja el ícono del selector de fecha en oscuro por defecto —
   se invierte para que se vea blanco sobre el fondo oscuro de la app. */
.fp-new-item-form input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(1);
  cursor: pointer;
}

.fp-new-item-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px 14px;
  align-items: stretch;
  margin-bottom: 16px;
}
.fp-new-item-grid .fp-field { display: flex; flex-direction: column; margin-bottom: 0; }
.fp-new-item-grid .fp-field[hidden] { display: none; }
.fp-new-item-grid .fp-icon-select__wrap { width: 100%; }
.fp-new-item-grid .fp-icon-select__btn { width: 100%; }
.fp-new-item-grid .fp-multi-select { width: 100%; }

.fp-new-item-coverage { margin-bottom: 16px; }
.fp-new-item-coverage__toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--fp-text);
  cursor: pointer;
}
.fp-new-item-coverage__toggle input[type="checkbox"] { width: auto; }
.fp-new-item-coverage .fp-new-item-grid[hidden] { display: none; }
.fp-new-item-coverage .fp-new-item-grid { margin-top: 12px; margin-bottom: 0; }
.fp-new-item-grid .fp-multi-select .fp-icon-select__btn { width: 100%; }

.fp-field-inline { display: flex; gap: 8px; }
.fp-field-inline input[type="date"] { flex: 1.4; }
.fp-field-inline input[type="time"] { flex: 1; }

/* Equipamiento / Responsable(s) — mismo contenedor que fp-icon-select (ver iconSelect.js), pero
   multi-selección: clickear una opción no cierra el panel y no muestra checkbox, solo resalta. */
.fp-multi-select { position: relative; display: flex; }
.fp-multi-select .fp-icon-select__item--active { color: var(--fp-violet); font-weight: 600; }

.fp-file-picker { display: flex; flex-direction: column; gap: 10px; align-items: stretch; }

.fp-file-preview-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.fp-file-picker__count {
  font-size: 11px;
  font-weight: 600;
  color: var(--fp-text-muted);
  text-transform: none;
  letter-spacing: normal;
  margin-left: 6px;
}
.fp-file-picker__count--full { color: var(--fp-mustard); }

.fp-file-preview-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 74px;
}

.fp-file-preview-item__generic {
  width: 74px;
  height: 74px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--fp-radius-sm);
  border: 1px solid var(--fp-border);
  background: var(--fp-surface-2);
  color: var(--fp-text-muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.fp-file-preview-item__remove {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1px solid var(--fp-border);
  background: var(--fp-danger);
  color: #fff;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.fp-file-preview-item__remove:hover { filter: brightness(1.1); }

.fp-file-preview-item img,
.fp-file-preview-item video {
  width: 74px;
  height: 74px;
  object-fit: cover;
  border-radius: var(--fp-radius-sm);
  border: 1px solid var(--fp-border);
  background: var(--fp-surface-2);
  cursor: pointer;
}
.fp-file-preview-item img:hover,
.fp-file-preview-item video:hover { border-color: var(--fp-violet); }

.fp-file-preview-item__name {
  font-size: 10px;
  color: var(--fp-text-muted);
  max-width: 74px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ===== Barra de progreso de subida (modal "Cargar nuevo ítem" y "Material cargado") ===== */
.fp-upload-progress { margin-top: 14px; }
.fp-upload-progress__bar {
  height: 6px;
  border-radius: 999px;
  background: var(--fp-surface-2);
  border: 1px solid var(--fp-border);
  overflow: hidden;
}
.fp-upload-progress__fill {
  height: 100%;
  width: 0%;
  background: var(--fp-violet);
  transition: width 0.15s ease;
}
.fp-upload-progress__label {
  display: block;
  margin-top: 5px;
  font-size: 11.5px;
  color: var(--fp-text-muted);
}

.fp-modal__actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--fp-border);
}

.fp-day__tasks {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

/* Tarjeta de cobertura en exteriores (ver TaskCoverage) — mismo lenguaje visual que .fp-task
   (punto + ícono + título en una línea, spec de Marcos: "necesito ver el item como los que te
   señalo" comparando contra tarjetas de tareas reales) pero SIN drag-and-drop ni popup de
   estado/Metricool: no es una pieza de contenido en sí, es un recordatorio de una tarea que YA
   tiene su propia tarjeta (con sus propios estado/Metricool/etc.) en otro día — por eso usa una
   clase propia en vez de .fp-task, para no engancharse sin querer con esa lógica. */
.fp-day__coverages {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  margin-top: 6px;
}
.fp-cal-coverage-card {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  background: var(--fp-surface-2);
  border: 1px solid var(--fp-border);
  border-radius: var(--fp-radius-sm);
  box-shadow: 0 1px 3px rgba(20, 22, 28, 0.06);
  padding: 4px 6px;
  font-size: 11px;
  line-height: 1.3;
  color: var(--fp-text);
  text-decoration: none;
}
.fp-cal-coverage-card__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}
.fp-cal-coverage-card svg { flex-shrink: 0; }
.fp-cal-coverage-card__title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.fp-task {
  position: relative;
  min-width: 0;
  background: var(--fp-surface-2);
  border: 1px solid var(--fp-border);
  border-radius: var(--fp-radius-sm);
  box-shadow: 0 1px 3px rgba(20, 22, 28, 0.06);
  padding: 4px 6px;
  cursor: grab;
  font-size: 11px;
  line-height: 1.3;
  touch-action: none;
  text-decoration: none;
  display: block;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
}

.fp-task:hover { border-color: var(--fp-violet); box-shadow: var(--fp-glow); }
.fp-task:active { cursor: grabbing; }
/* Al mostrarse el popup, la tarjeta sube de capa para no quedar debajo de las
   celdas de días siguientes (misma fila de stacking por defecto). */
.fp-task:hover, .fp-task:focus-within { z-index: 60; }
.fp-task--grabbed { outline: 2px solid var(--fp-violet); outline-offset: 1px; box-shadow: var(--fp-glow); }
.fp-task--dragging { opacity: 0.4; }

.fp-task__row {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  padding-right: 14px;
}

.fp-task__dot {
  width: 6px;
  height: 6px;
  min-width: 6px;
  border-radius: 50%;
}

/* Ítems cargados por el cliente desde su propio calendario: toda la tarjeta en
   gris sólido, para que se distinga de un vistazo de los colores por tipo/estado
   que usa el equipo interno (visible tanto del lado admin como del portal). */
/* Sin !important en background/border-color (se sacó al agregar .fp-task--published/--publishing
   más abajo): así una tarjeta de origen cliente que ya se publicó de verdad se pinta verde/naranja
   igual, en vez de quedar tapada por el gris. Misma especificidad (una sola clase) + declarada
   antes en el archivo = las reglas de estado, definidas después, ganan cuando corresponde. */
.fp-task--client-origin {
  background: var(--fp-client-gray);
  border-color: var(--fp-client-gray);
}
/* Sin !important: así el color inline del punto (estado real / publicando-naranja / publicado-verde,
   ver calendar/index.php y portal/calendar.php) sigue ganando incluso en tarjetas de origen cliente —
   antes quedaba siempre blanco acá, tapando el estado real. Este valor es solo el fallback. */
.fp-task--client-origin .fp-task__dot { background: rgba(255, 255, 255, 0.65); }
.fp-task--client-origin .fp-task__row > span:nth-child(2) { color: rgba(255, 255, 255, 0.9) !important; }
.fp-task--client-origin .fp-task__title { color: #fff !important; }

/* Tarjeta COMPLETA en verde (publicado) o naranja (publicando) — no solo el punto, pedido
   explícito de Marcos con captura de referencia (mismo glow que el badge "PUBLICADO" de la
   ficha de tarea, fp-badge--published). Declaradas DESPUÉS de .fp-task--client-origin y con la
   misma especificidad (una sola clase) para poder ganarle incluso en tarjetas de origen
   cliente — un ítem que cargó el cliente y ya se publicó de verdad tiene que verse publicado,
   no gris. El punto y el título fuerzan su color con !important porque ambos vienen con un
   color inline propio desde PHP (dotColor / content_type_color) que si no, tapa el nuevo fondo. */
.fp-task--published {
  background: #16a34a;
  border-color: #16a34a;
  animation: fpPublishedGlow 2.6s ease-in-out infinite;
}
.fp-task--published .fp-task__dot { background: #fff !important; }
.fp-task--published .fp-task__title { color: #fff !important; }

.fp-task--publishing {
  background: #f5a623;
  border-color: #f5a623;
  animation: fpPublishingGlow 2.6s ease-in-out infinite;
}
.fp-task--publishing .fp-task__dot { background: #1a1300 !important; }
.fp-task--publishing .fp-task__title { color: #1a1300 !important; }

@keyframes fpPublishingGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(245, 166, 35, 0.45); }
  50% { box-shadow: 0 0 12px 2px rgba(245, 166, 35, 0.6); }
}

/* Programada (PENDING con post_id ya creado en Metricool, esperando su horario) — mismo violeta
   que ya usa el badge "PROGRAMADA" de la ficha de tarea (fp_metricool_sync_color('PENDING')). */
.fp-task--scheduled {
  background: #8b5cf6;
  border-color: #8b5cf6;
  animation: fpScheduledGlow 2.6s ease-in-out infinite;
}
.fp-task--scheduled .fp-task__dot { background: #fff !important; }
.fp-task--scheduled .fp-task__title { color: #fff !important; }

@keyframes fpScheduledGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(139, 92, 246, 0.45); }
  50% { box-shadow: 0 0 12px 2px rgba(139, 92, 246, 0.6); }
}

.fp-task__title {
  color: var(--fp-text);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  flex: 1;
}

.fp-task__detail-btn {
  position: absolute;
  top: 3px;
  right: 3px;
  width: 15px;
  height: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  color: var(--fp-text-muted);
  opacity: 0.5;
  text-decoration: none;
}
.fp-task__detail-btn:hover { opacity: 1; color: var(--fp-violet); background: var(--fp-surface); }

/* Popup de vista previa (escritorio, al pasar el mouse) */
.fp-task__popup {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 60;
  width: 220px;
  background: var(--fp-surface);
  border: 1px solid var(--fp-border);
  border-radius: var(--fp-radius-md);
  box-shadow: var(--fp-shadow), var(--fp-glow);
  padding: 12px 14px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-2px);
  transition: opacity 0.12s ease, transform 0.12s ease, visibility 0.12s;
  pointer-events: none;
  cursor: default;
  font-size: 12px;
}

.fp-task:hover .fp-task__popup,
.fp-task:focus-within .fp-task__popup {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

.fp-task__popup-title {
  font-weight: 700;
  font-size: 13px;
  color: var(--fp-text);
  margin-bottom: 8px;
  white-space: normal;
}

.fp-task__popup-row {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--fp-text-muted);
  margin-bottom: 6px;
}

.fp-task__popup-muted { font-size: 11px; }

.fp-task__popup-link {
  display: block;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--fp-border);
  color: var(--fp-violet);
  font-weight: 600;
  font-size: 11.5px;
}

.fp-task-ghost {
  position: fixed;
  pointer-events: none;
  z-index: 999;
  opacity: 0.9;
  transform: translate(-50%, -50%) rotate(-2deg);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
}

.fp-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--fp-surface);
  border: 1px solid var(--fp-border);
  box-shadow: var(--fp-shadow);
  border-radius: 10px;
  padding: 10px 14px;
  align-items: center;
  gap: 14px;
  font-size: 13px;
  z-index: 200;
  display: flex;
}

.fp-toast[hidden] { display: none; }

.fp-toast button {
  border: none;
  background: none;
  color: var(--fp-violet);
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
}

/* ---------- Ficha de tarea ---------- */

.fp-task-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}

.fp-breadcrumb { font-size: 12.5px; color: var(--fp-text-muted); margin-bottom: 8px; }
.fp-breadcrumb a:hover { color: var(--fp-violet); }

.fp-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  background: var(--fp-surface-2);
  border: 1px solid var(--fp-border);
  box-shadow: 0 0 0 1px transparent;
}

:root[data-theme="dark"] .fp-badge[style*="border-color"] {
  box-shadow: 0 0 10px -2px currentColor;
  opacity: 0.95;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .fp-badge[style*="border-color"] {
    box-shadow: 0 0 10px -2px currentColor;
    opacity: 0.95;
  }
}

.fp-badge--priority-alta { color: var(--fp-danger); border-color: var(--fp-danger); }
.fp-badge--priority-media { color: var(--fp-mustard); border-color: var(--fp-mustard); }
.fp-badge--priority-baja { color: var(--fp-text-muted); }

.fp-section {
  background: var(--fp-surface);
  border: 1px solid var(--fp-border);
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 20px;
}

.fp-section__title {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--fp-text-muted);
  margin: 0 0 16px;
}

.fp-form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
}

.fp-form-grid select,
.fp-form-grid textarea {
  width: 100%;
  padding: 9px 10px;
  border-radius: var(--fp-radius-sm);
  border: 1px solid var(--fp-border);
  background: var(--fp-surface-2);
  color: var(--fp-text);
  font-size: 13.5px;
  font-family: inherit;
}


.fp-file-card {
  border: 1px solid var(--fp-border);
  border-radius: 10px;
  padding: 12px;
  margin-bottom: 10px;
  background: var(--fp-surface-2);
}

.fp-file-card__head { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 12.5px; }
.fp-file-card__name { font-weight: 600; }
.fp-file-card__meta { color: var(--fp-text-muted); font-size: 11.5px; }
.fp-file-card video, .fp-file-card img { max-width: 100%; max-height: 320px; border-radius: 8px; display: block; }
.fp-file-card__actions { display: flex; gap: 10px; margin-top: 8px; font-size: 12px; }
.fp-file-card__actions a, .fp-file-card__actions summary { color: var(--fp-violet); cursor: pointer; }

.fp-client-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }

.fp-btn-action {
  padding: 8px 16px;
  border-radius: 8px;
  border: 1px solid var(--fp-border);
  background: var(--fp-surface);
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
}

.fp-btn-action--observacion { color: var(--fp-mustard); border-color: var(--fp-mustard); }
.fp-btn-action--comentar { color: var(--fp-text); }
.fp-btn-action--confirmar { color: var(--fp-success); border-color: var(--fp-success); }

.fp-comment {
  border-radius: var(--fp-radius-md);
  padding: 12px 14px;
  margin-bottom: 10px;
  font-size: 13px;
  border-left: 3px solid var(--fp-border);
}

.fp-comment--interno { background: var(--fp-surface-2); border: 1px dashed var(--fp-border); border-left: 3px dashed var(--fp-text-muted); }
.fp-comment--cliente { background: rgba(var(--fp-violet-rgb), 0.06); border: 1px solid var(--fp-border); border-left: 3px solid var(--fp-violet); }
.fp-comment__meta { display: flex; justify-content: space-between; font-size: 11px; color: var(--fp-text-muted); margin-bottom: 6px; }
.fp-comment__tag { font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; font-size: 10px; }

.fp-timeline { position: relative; padding-left: 18px; }
.fp-timeline::before { content: ''; position: absolute; left: 4px; top: 4px; bottom: 4px; width: 1px; background: var(--fp-border); }
.fp-timeline-item { position: relative; padding-bottom: 14px; font-size: 12.5px; }
.fp-timeline-item::before { content: ''; position: absolute; left: -18px; top: 4px; width: 8px; height: 8px; border-radius: 50%; background: var(--fp-violet); }
.fp-timeline-item__meta { color: var(--fp-text-muted); font-size: 11px; }
/* Indicador visual por categoría (Tanda 26): violeta = email automático, mustaza = bug. */
.fp-timeline-item--bug::before { background: var(--fp-mustard); }

/* Bandeja "Actividad reciente" completa (/actividad): borde izquierdo de color por categoría. */
.fp-activity-row--email { border-left: 3px solid var(--fp-violet); }
.fp-activity-row--bug { border-left: 3px solid var(--fp-mustard); }

/* ---------- Consultas de clientes ("Contactar a un asesor") en el Panel ---------- */

.fp-advisor-contacts { display: flex; flex-direction: column; gap: 10px; }
.fp-advisor-contact {
  border: 1px solid var(--fp-border);
  border-left: 3px solid var(--fp-border);
  border-radius: var(--fp-radius-md);
  background: var(--fp-surface);
  padding: 4px 14px;
}
.fp-advisor-contact--pending { border-left-color: var(--fp-mustard); }
.fp-advisor-contact__summary {
  cursor: pointer;
  padding: 10px 0;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 13px;
  list-style: none;
}
.fp-advisor-contact__summary::-webkit-details-marker { display: none; }
.fp-advisor-contact__badge {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--fp-text-muted);
  border: 1px solid var(--fp-border);
  border-radius: 999px;
  padding: 2px 8px;
}
.fp-advisor-contact--pending .fp-advisor-contact__badge { color: var(--fp-mustard); border-color: var(--fp-mustard); }
.fp-advisor-contact__ot { font-size: 11px; font-weight: 700; color: var(--fp-violet); font-family: monospace; }
.fp-advisor-contact__date { margin-left: auto; font-size: 11px; color: var(--fp-text-muted); }
.fp-advisor-contact__body { padding: 0 0 14px; border-top: 1px dashed var(--fp-border); margin-top: 2px; padding-top: 12px; }
.fp-advisor-contact__reply {
  background: var(--fp-surface-2);
  border-left: 3px solid var(--fp-success);
  border-radius: var(--fp-radius-sm);
  padding: 10px 12px;
  font-size: 13px;
}

/* ---------- Splash de carga premium (Stripe/Linear/Arc) ---------- */

.fp-splash {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #08060f;
  opacity: 1;
  transition: opacity 0.5s ease;
  overflow: hidden;
}

.fp-splash[hidden] { display: none; }
.fp-splash--out { opacity: 0; pointer-events: none; }

.fp-splash::before,
.fp-splash::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  animation: fpSplashDrift 6s ease-in-out infinite alternate;
}
.fp-splash::before {
  width: 480px;
  height: 480px;
  left: 8%;
  top: 12%;
  background: rgba(var(--fp-violet-rgb), 0.35);
}
.fp-splash::after {
  width: 380px;
  height: 380px;
  right: 10%;
  bottom: 10%;
  background: rgba(var(--fp-violet-rgb), 0.22);
  animation-delay: -3s;
}

@keyframes fpSplashDrift {
  from { transform: translate(0, 0) scale(1); }
  to { transform: translate(30px, -20px) scale(1.08); }
}

.fp-splash__card {
  position: relative;
  z-index: 1;
  width: 300px;
  text-align: center;
}

.fp-splash__mark-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 28px;
}

.fp-splash__glow-ring {
  position: absolute;
  inset: -28px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--fp-violet-rgb), 0.45), transparent 70%);
  filter: blur(10px);
  animation: fpSplashPulse 2.2s ease-in-out infinite;
}

@keyframes fpSplashPulse {
  0%, 100% { transform: scale(0.92); opacity: 0.7; }
  50% { transform: scale(1.08); opacity: 1; }
}

.fp-splash__mark { position: relative; width: 168px; height: auto; }

.fp-splash__title {
  font-size: 13.5px;
  font-weight: 500;
  color: rgba(238, 236, 247, 0.85);
  margin-bottom: 22px;
  min-height: 17px;
  transition: opacity 0.25s ease;
}
.fp-splash__title--fade { opacity: 0; }

.fp-splash__bar {
  width: 100%;
  height: 3px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  overflow: hidden;
}

.fp-splash__bar-fill {
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: linear-gradient(90deg, #a78bfa, #7c3aed);
  box-shadow: 0 0 12px rgba(var(--fp-violet-rgb), 0.6);
  transition: width 5s linear;
}

@media (prefers-reduced-motion: reduce) {
  .fp-splash { display: none; }
}

/* ---------- Tarjeta de progreso: planificación mensual con IA (spec 23-29) ---------- */

.fp-plan-progress {
  --plan-progress-glow: var(--fp-violet-rgb);
  position: fixed;
  left: 20px;
  bottom: 20px;
  z-index: 700;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  width: 320px;
  max-width: calc(100vw - 40px);
  background: var(--fp-surface);
  border: 1px solid var(--fp-border);
  border-radius: var(--fp-radius-md);
  padding: 16px 18px;
  box-shadow: var(--fp-shadow), 0 0 0 1px rgba(var(--plan-progress-glow), 0.2), 0 20px 50px -20px rgba(var(--plan-progress-glow), 0.5);
  animation: fpPlanProgressIn 0.3s ease;
}

.fp-plan-progress--success { --plan-progress-glow: 16, 185, 129; }
.fp-plan-progress--error { --plan-progress-glow: 220, 38, 38; }

@keyframes fpPlanProgressIn {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

.fp-plan-progress__close {
  position: absolute;
  top: 8px;
  right: 10px;
  border: none;
  background: none;
  color: var(--fp-text-muted);
  cursor: pointer;
  font-size: 12px;
  line-height: 1;
  padding: 4px;
}
.fp-plan-progress__close:hover { color: var(--fp-text); }

.fp-plan-progress__icon { font-size: 22px; line-height: 1; margin-top: 2px; }

.fp-plan-progress__body { flex: 1; min-width: 0; }

.fp-plan-progress__title { font-size: 13.5px; font-weight: 700; margin-bottom: 2px; padding-right: 16px; }
.fp-plan-progress__stage { font-size: 12px; color: var(--fp-text-muted); margin-bottom: 8px; }

.fp-plan-progress__bar {
  height: 5px;
  border-radius: 999px;
  background: var(--fp-surface-2);
  overflow: hidden;
  margin-bottom: 6px;
}
.fp-plan-progress__bar-fill {
  height: 100%;
  border-radius: inherit;
  background: rgb(var(--plan-progress-glow));
  transition: width 0.4s ease;
}

.fp-plan-progress__meta { font-size: 11px; color: var(--fp-text-muted); }

.fp-plan-progress__cancel {
  display: block;
  margin-top: 8px;
  font-size: 11px;
  color: var(--fp-text-muted);
  background: none;
  border: none;
  padding: 0;
  text-decoration: underline;
  cursor: pointer;
}
.fp-plan-progress__cancel:hover { color: var(--fp-danger); }
.fp-plan-progress__cancel:disabled { cursor: wait; opacity: 0.6; text-decoration: none; }

.fp-plan-progress__actions { margin-top: 10px; }
.fp-plan-progress__btn {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  background: rgb(var(--plan-progress-glow));
  padding: 6px 14px;
  border-radius: 999px;
  text-decoration: none;
}

.fp-plan-progress--success .fp-plan-progress__icon,
.fp-plan-progress--success .fp-plan-progress__bar-fill {
  animation: fpPlanProgressPulseSubtle 2s ease-in-out 0s 1, fpPlanProgressPulseStrong 1.1s ease-in-out 2s 6;
}

@keyframes fpPlanProgressPulseSubtle {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.15); }
}
@keyframes fpPlanProgressPulseStrong {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.35); }
}

@media (prefers-reduced-motion: reduce) {
  .fp-plan-progress { animation: none; }
  .fp-plan-progress--success .fp-plan-progress__icon,
  .fp-plan-progress--success .fp-plan-progress__bar-fill { animation: none; }
}

@media (max-width: 480px) {
  .fp-plan-progress { left: 12px; right: 12px; bottom: 12px; width: auto; }
}

/* ---------- Decoración de aniversario institucional (sutil, no bloqueante) ---------- */

.fp-anniversary-fx {
  position: fixed;
  inset: 0;
  z-index: 500;
  pointer-events: none;
  overflow: hidden;
  opacity: 1;
  animation: fpAnniversaryFadeOut 6s ease forwards;
}

.fp-anniversary-fx__badge {
  position: fixed;
  top: 74px;
  right: 24px;
  font-size: 26px;
  line-height: 1;
  filter: drop-shadow(0 2px 10px rgba(var(--fp-violet-rgb), 0.5));
  animation: fpAnniversaryBounce 1.8s ease-in-out infinite;
}

.fp-anniversary-fx__confetti {
  position: absolute;
  top: -24px;
  left: calc(var(--i) * 5.5%);
  width: 8px;
  height: 14px;
  border-radius: 2px;
  opacity: 0.9;
  background: var(--fp-violet);
  animation: fpAnniversaryFall 3.2s linear infinite;
  animation-delay: calc(var(--i) * -0.18s);
}

.fp-anniversary-fx__confetti:nth-child(3n+1) { background: var(--fp-mustard); }
.fp-anniversary-fx__confetti:nth-child(3n+2) { background: #ffffff; }
.fp-anniversary-fx__confetti:nth-child(5n) { width: 6px; height: 6px; border-radius: 50%; }
.fp-anniversary-fx__confetti:nth-child(odd) { animation-duration: 3.8s; }
.fp-anniversary-fx__confetti:nth-child(4n) { animation-duration: 2.6s; }

@keyframes fpAnniversaryFall {
  0% { transform: translateY(-24px) rotate(0deg); opacity: 0.95; }
  85% { opacity: 0.9; }
  100% { transform: translateY(100vh) rotate(340deg); opacity: 0; }
}

@keyframes fpAnniversaryBounce {
  0%, 100% { transform: translateY(0) rotate(-4deg); }
  50% { transform: translateY(-6px) rotate(4deg); }
}

@keyframes fpAnniversaryFadeOut {
  0%, 70% { opacity: 1; }
  100% { opacity: 0; visibility: hidden; }
}

@media (prefers-reduced-motion: reduce) {
  .fp-anniversary-fx__confetti { display: none; }
  .fp-anniversary-fx__badge { animation: none; }
  .fp-anniversary-fx { animation: fpAnniversaryFadeOut 3s ease forwards; }
}

/* ---------- Celebración "ganador de la semana" (Tanda 34) — solo una vez, al iniciar sesión ---------- */

.fp-weekly-winner {
  position: fixed;
  inset: 0;
  z-index: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(60% 60% at 50% 40%, rgba(109, 40, 217, 0.35), rgba(9, 9, 15, 0.92));
  overflow: hidden;
  animation: fpWeeklyWinnerIn 0.4s ease;
}

.fp-weekly-winner--out { animation: fpWeeklyWinnerOut 0.35s ease forwards; }

.fp-weekly-winner__card {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 420px;
  margin: 24px;
  padding: 36px 30px 30px;
  border-radius: 20px;
  text-align: center;
  background: linear-gradient(165deg, #1b1830, #100e1c);
  border: 1px solid rgba(245, 201, 74, 0.35);
  box-shadow: 0 0 0 1px rgba(245, 201, 74, 0.15), 0 30px 80px -20px rgba(0, 0, 0, 0.8), 0 0 60px -10px rgba(245, 201, 74, 0.25);
}

.fp-weekly-winner__stars {
  font-size: 30px;
  letter-spacing: 8px;
  color: #f5c94a;
  text-shadow: 0 0 16px rgba(245, 201, 74, 0.7);
  margin-bottom: 6px;
}
.fp-weekly-winner__stars span { display: inline-block; animation: fpWeeklyWinnerTwinkle 1.6s ease-in-out infinite; }
.fp-weekly-winner__stars span:nth-child(2) { animation-delay: 0.2s; }
.fp-weekly-winner__stars span:nth-child(3) { animation-delay: 0.4s; }

.fp-weekly-winner__title {
  font-size: 22px;
  font-weight: 800;
  margin: 4px 0 10px;
  background: linear-gradient(100deg, #f5c94a, #fff3c4, #f5c94a);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 0 30px rgba(245, 201, 74, 0.4);
}

.fp-weekly-winner__subtitle {
  font-size: 13px;
  color: #cfc9e0;
  line-height: 1.5;
  margin: 0 0 22px;
}

.fp-weekly-winner__stats {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin-bottom: 26px;
  flex-wrap: wrap;
}

.fp-weekly-winner__stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  color: #f5c94a;
  min-width: 88px;
}

.fp-weekly-winner__stat-value { font-size: 18px; font-weight: 700; color: #fff; }
.fp-weekly-winner__stat-label { font-size: 10px; color: #a29bc2; text-align: center; }

.fp-weekly-winner__btn {
  width: 100%;
  padding: 13px 16px;
  border: none;
  border-radius: 999px;
  background: linear-gradient(100deg, #16a34a, #22c55e);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 10px 24px -10px rgba(34, 197, 94, 0.7);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.fp-weekly-winner__btn:hover { transform: translateY(-1px); box-shadow: 0 14px 30px -10px rgba(34, 197, 94, 0.85); }

@keyframes fpWeeklyWinnerTwinkle {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.55; transform: scale(0.85); }
}

@keyframes fpWeeklyWinnerIn {
  from { opacity: 0; } to { opacity: 1; }
}

@keyframes fpWeeklyWinnerOut {
  from { opacity: 1; } to { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .fp-weekly-winner__stars span { animation: none; }
  .fp-weekly-winner { animation: none; }
}

/* ---------- Accesibilidad ---------- */

a:focus-visible, button:focus-visible, input:focus-visible {
  outline: 2px solid var(--fp-violet);
  outline-offset: 2px;
}

/* Botón hamburguesa del menú de navegación — oculto en desktop, donde .fp-nav ya se ve entera. */
.fp-nav-menu { position: relative; }
.fp-nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: var(--fp-radius-sm);
  border: 1px solid var(--fp-border);
  background: var(--fp-surface-2);
  color: var(--fp-text);
  cursor: pointer;
}
.fp-nav-toggle svg { width: 20px; height: 20px; }

@media (max-width: 860px) {
  /* Pedido explícito de Marcos: la navegación principal (Panel, Clientes, Efemérides, etc.) NO
     debe desaparecer sin alternativa en mobile vertical — antes se ocultaba con display:none y
     sin ningún reemplazo, así que solo volvía a verse si se rotaba el teléfono a horizontal
     (más ancho disponible). Ahora se colapsa en un menú desplegable real, mismo patrón visual
     que los otros desplegables del header (notificaciones/usuario). */
  .fp-header__inner { gap: 12px; }
  .fp-nav-toggle { display: flex; }
  .fp-nav {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 240px;
    max-width: calc(100vw - 32px);
    background: var(--fp-surface);
    border: 1px solid var(--fp-border);
    border-radius: var(--fp-radius-md);
    box-shadow: var(--fp-shadow), var(--fp-glow);
    padding: 6px;
    z-index: 300;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
  }
  .fp-header-menu--open .fp-nav { opacity: 1; visibility: visible; transform: translateY(0); }
  .fp-nav__link { padding: 10px 12px; border-radius: var(--fp-radius-sm); }
}

@media (max-width: 480px) {
  /* Pantallas de celular chicas: menos aire entre campana/avatar y menos padding lateral del
     header para que ningún elemento quede recortado ni empuje scroll horizontal. */
  .fp-header__inner { padding: 0 14px; gap: 8px; }
  .fp-header__actions { gap: 4px; }
}

/* Red de seguridad general: filas de botones/acciones armadas con estilos inline
   "display:flex;gap:Npx" (patrón usado en decenas de vistas — Programar/Publicar ahora,
   toolbars de Efemérides, filtros, etc.) que en desktop entran cómodas en una sola línea pero
   en mobile vertical se salían del viewport y generaban scroll horizontal de toda la página,
   o dejaban botones inalcanzables sin rotar el teléfono. flex-wrap:wrap es inocuo para las
   filas que YA entran bien (nada cambia si no hace falta wrappear) y arregla las que no.
   Sin scope a .fp-main a propósito: los modales (fp-modal-backdrop, confirmación de
   colaborador) se insertan como hijos directos de <body>, fuera de .fp-main, y también
   usan este mismo patrón inline para sus filas de botones Cancelar/Confirmar. */
@media (max-width: 640px) {
  body [style*="display:flex"],
  body [style*="display: flex"] {
    flex-wrap: wrap;
  }
}

/* ---------- Sistema de modales ---------- */

.fp-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 500;
  background: rgba(6, 6, 12, 0.55);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.18s ease, visibility 0.18s;
}

.fp-modal-backdrop--open { opacity: 1; visibility: visible; }

/* Segunda capa de modal (ej. "+ Cargar tarea" dentro de la Planilla diaria) — encima del modal
   normal, sin destruirlo. Ver openStackedModal()/closeStackedModal() en modal.js. */
.fp-modal-backdrop--stacked { z-index: 600; }

/* Planilla de trabajos para el día siguiente — ver DailyWorksheetController + dailyWorksheetAlert.js. */
.fp-worksheet__header {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  flex-wrap: wrap; margin-bottom: 20px; padding-bottom: 18px; border-bottom: 1px solid var(--fp-border);
}

/* Encabezado, pie y grilla de columnas exclusivos de la hoja impresa — invisibles en pantalla.
   Ver @media print más abajo. */
.fp-worksheet__print-header, .fp-worksheet__print-footer, .fp-worksheet__print-gridlines { display: none; }

.fp-worksheet__header .fp-modal__title { margin: 0 0 4px; }
.fp-worksheet__subtitle { margin: 0; font-size: 12.5px; color: var(--fp-text-muted); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.fp-worksheet__header .fp-btn { width: auto; padding: 10px 18px; flex-shrink: 0; }
.fp-worksheet__header-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-right: 26px; }

/* Filtro Todo/Contenidos/Coberturas de la Planilla — reusa .fp-nav-dropdown/.fp-dropdown (mismo
   mecanismo visual que los submenús "Control"/"Administración" del nav), con su propio wiring en
   dailyWorksheetAlert.js porque este contenido se inyecta por AJAX después de que
   initHeaderMenus() ya escaneó el DOM una sola vez al cargar la página. */
.fp-worksheet__filter-item--active { color: var(--fp-violet); font-weight: 600; }
.fp-worksheet__filter-item--active::after {
  content: '✓'; margin-left: auto; padding-left: 10px;
}
.fp-worksheet__date-jump {
  padding: 9px 10px; border-radius: var(--fp-radius-sm); border: 1px solid var(--fp-border);
  background: var(--fp-surface-2); color: var(--fp-text); font-size: 12.5px; font-family: inherit;
}
.fp-worksheet__reset-date {
  border: none; background: none; padding: 0; color: var(--fp-violet); font-size: 12.5px;
  font-family: inherit; cursor: pointer; text-decoration: underline;
}

.fp-worksheet__table-wrap { overflow-x: auto; border: 1px solid var(--fp-border); border-radius: 12px; margin-bottom: 18px; }

/* table-layout:fixed + <colgroup> (ver la vista) — spec: "ningún título podrá expandir, deformar
   o desalinear la estructura de la planilla". Sin ancho fijo por columna, text-overflow:ellipsis
   no tiene límite del cual recortar y las filas terminan con alturas distintas según el texto. */
.fp-worksheet__table { width: 100%; border-collapse: collapse; font-size: 13px; table-layout: fixed; }
.fp-worksheet__table th {
  background: var(--fp-surface-2); text-align: left; padding: 10px 14px; white-space: nowrap;
  font-size: 11px; text-transform: uppercase; letter-spacing: .03em; color: var(--fp-text-muted); font-weight: 600;
  overflow: hidden; text-overflow: ellipsis;
}
.fp-worksheet__table td { padding: 9px 14px; border-top: 1px solid var(--fp-border); vertical-align: middle; height: 40px; }
.fp-worksheet__table tbody tr:hover { background: var(--fp-surface-2); }

.fp-worksheet__date { white-space: nowrap; font-variant-numeric: tabular-nums; }
.fp-worksheet__upcoming-badge {
  display: block;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--fp-violet);
  white-space: nowrap;
}
@media print { .fp-worksheet__upcoming-badge { color: #000; } }
.fp-worksheet__time { white-space: nowrap; color: var(--fp-text-muted); font-variant-numeric: tabular-nums; }
.fp-worksheet__ellipsis { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Celda "Tarea" — spec: dos niveles fijos, "TIPO | LUGAR" arriba y el título abajo, cada uno en
   una sola línea que se recorta con puntos suspensivos en vez de estirar la fila. */
.fp-worksheet__task-cell { overflow: hidden; }
.fp-worksheet__task-line1 {
  display: flex; align-items: center; gap: 5px; white-space: nowrap; overflow: hidden;
  font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--fp-text-muted);
}
.fp-worksheet__type-icon { display: inline-flex; flex-shrink: 0; }
.fp-worksheet__task-sep { flex-shrink: 0; opacity: .6; }
.fp-worksheet__task-location { overflow: hidden; text-overflow: ellipsis; text-transform: none; letter-spacing: 0; font-weight: 600; }
.fp-worksheet__task-line2 {
  margin-top: 2px; font-size: 13px; color: var(--fp-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.fp-worksheet__row-actions { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.fp-worksheet__row-btn {
  display: flex; align-items: center; justify-content: center; width: 28px; height: 28px;
  border-radius: 8px; border: 1px solid var(--fp-border); background: var(--fp-surface-2);
  color: var(--fp-text-muted); cursor: pointer; transition: color .15s ease, border-color .15s ease;
}
.fp-worksheet__row-btn:hover { color: var(--fp-violet); border-color: rgba(var(--fp-violet-rgb),0.4); }
.fp-worksheet__row-btn--danger:hover { color: var(--fp-danger); border-color: var(--fp-danger); }
.fp-worksheet__remove-form { display: contents; }

.fp-worksheet__footer {
  display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  padding-top: 4px;
}
.fp-worksheet__count { font-size: 12.5px; color: var(--fp-text-muted); }
.fp-worksheet__footer-actions { display: flex; align-items: center; gap: 10px; }

/* Impresión de la Planilla — se dispara solo (window.print(), ver dailyWorksheetAlert.js) al
   confirmar la planificación del día siguiente, para guardarla como PDF o imprimirla en papel.
   Oculta TODO menos la tabla de la planilla (nav, botones de acción, fondo oscuro del modal). */
/* Márgenes personalizados a pedido de Marcos (mockup editado a mano): 10px arriba/izquierda/
   derecha, abajo sin tocar (queda en 12mm, el valor de siempre). */
@page { size: A4 portrait; margin-top: 10px; margin-right: 10px; margin-bottom: 12mm; margin-left: 10px; }

@media print {
  /* El tema oscuro pinta <body> (degradé violeta sobre casi negro) — sin esto la hoja entera
     sale con un fondo negro pintado detrás de la tabla ("toda la tinta negra"). !important le
     gana a la regla de :root[data-theme="dark"] body sin necesidad de iguales o más selectores. */
  /* :has() (no un simple "html, body") a propósito: existe OTRA regla @media print, más abajo
     en este archivo, para el reporte de estadísticas — esa SÍ necesita preservar el fondo
     oscuro de marca al exportar, y usa el mismo selector "html, body" con !important. Con igual
     especificidad e !important en ambos lados, gana la que aparece después en el archivo — acá
     "empatábamos" y perdíamos. :has() sube la especificidad así esta gana siempre, sin depender
     del orden ni arriesgar romper esa otra regla si el archivo se reordena. */
  html:has(.fp-worksheet), body:has(.fp-worksheet) { background: #fff !important; min-height: 0 !important; }

  /* display:none (no visibility:hidden) a propósito: visibility:hidden mantiene el espacio en el
     flujo del documento aunque no se vea, así que el resto del Panel (nav, tarjetas, todo) seguía
     paginándose en blanco antes de llegar a la planilla — por eso aparecía recién en la hoja 7.
     display:none saca todo eso del flujo de verdad. :not(:has(...)) deja visible solo al hermano
     de <body> que SÍ contiene la planilla (el backdrop del modal), ocultando el resto. */
  body > *:not(:has(.fp-worksheet)) { display: none !important; }

  /* Básico en blanco y negro: nada de fondos ni colores de marca, solo texto negro sobre blanco.
     Los bordes se redeclaran después (más específicos), así quedan gris claro, no negro puro. */
  .fp-worksheet, .fp-worksheet * {
    background: #fff !important;
    color: #000 !important;
    box-shadow: none !important;
  }

  .fp-modal-backdrop { position: static; display: block; padding: 0; inset: auto; }
  .fp-modal-backdrop .fp-modal {
    position: static; display: block; max-width: 100%; max-height: none; overflow: visible;
    border: none; padding: 0; margin: 0; transform: none; box-shadow: none !important;
  }
  .fp-worksheet { position: static; width: 100%; }

  /* Se ocultan los controles interactivos y el título de pantalla — lo reemplaza el encabezado
     de impresión (logo + "Planificación diaria" + fecha), ver .fp-worksheet__print-header. */
  .fp-worksheet__header,
  .fp-worksheet__row-actions,
  .fp-worksheet__footer,
  .fp-modal__close,
  .fp-new-item-tpl {
    display: none !important;
  }

  /* Compacto a propósito: spec — que entre en una sola hoja aunque haya más ítems para el día
     siguiente. Encabezado y filas más chicos que en pantalla; sigue siendo perfectamente legible
     impreso (tamaños pensados para una hoja A4, no para mirar de cerca en el monitor).
     position:fixed (relativo a la hoja, no al documento) hace que tanto el encabezado como el pie
     se repitan solos en CADA página si la planificación no entra en una sola hoja — comportamiento
     nativo de Chrome al imprimir, sin JS ni @page margin-boxes. */
  .fp-worksheet__print-header {
    display: flex !important;
    position: fixed;
    top: 0; left: 0; right: 0;
    justify-content: space-between;
    align-items: flex-start;
    padding-bottom: 8px;
    border-bottom: 2px solid #000;
  }
  .fp-worksheet__print-logo { height: 24px; width: auto; }
  .fp-worksheet__print-title { text-align: right; }
  .fp-worksheet__print-title strong { display: block; font-size: 13px; }
  .fp-worksheet__print-title span { display: block; font-size: 11px; margin-top: 1px; }

  /* Pie de página — franja gris con usuario (izquierda) y fecha/hora real de impresión (derecha),
     spec: "mover la franja gris... y ubicarla como pie de página". */
  .fp-worksheet__print-footer {
    display: flex !important;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    justify-content: space-between;
    align-items: center;
    background: #e5e5e5 !important;
    padding: 6px 10px;
    font-size: 10px;
  }

  /* Deja lugar arriba/abajo para que el contenido que fluye normalmente (la tabla) no quede tapado
     por el encabezado/pie fijos — mismo alto aproximado que esos dos bloques ocupan. En milímetros
     (no vh/px) a propósito: "el formato de impresión debe ajustarse al tamaño de una hoja A4" —
     vh se calcula sobre el viewport de PANTALLA, no sobre la hoja física, así que en la práctica
     terminaba dándole al contenido una altura que no correspondía a un A4 real. mm es una unidad
     física, mapea 1:1 a la hoja sin importar la resolución de pantalla desde la que se imprime.
     calc() mezcla mm/px sin problema — así el alto total sigue siendo exacto aunque los márgenes
     de @page (justo arriba) no sean todos la misma unidad. */
  .fp-worksheet {
    padding-top: 15mm;
    padding-bottom: 10mm;
    min-height: calc(297mm - 10px - 12mm); /* alto de A4 menos el margen superior (10px) e inferior (12mm) de @page */
    box-sizing: border-box;
  }

  .fp-worksheet__table { font-size: 10.5px; }
  .fp-worksheet__table th { padding: 4px 6px !important; }
  .fp-worksheet__table td { padding: 4px 6px !important; height: 30px !important; }
  .fp-worksheet__task-line1 { font-size: 9px; }
  .fp-worksheet__task-line2 { font-size: 10.5px; }

  /* Spec: "quites todo el contenedor trazado... tipo Excel, separaciones por líneas verticales en
     las columnas, pero no líneas horizontales" — se saca el recuadro exterior y las líneas entre
     filas, y se agregan solo verticales entre columnas. Fuente de marca respetada explícitamente
     (nada de reset a una fuente genérica de impresión). */
  .fp-worksheet, .fp-worksheet * { font-family: "Samsung Sharp Sans", "Segoe UI", system-ui, -apple-system, "Inter", Roboto, Arial, sans-serif !important; }
  .fp-worksheet__table th,
  .fp-worksheet__table td {
    border-top: none;
    border-bottom: none;
    border-right: 1px solid #ccc;
  }
  .fp-worksheet__table th:last-child,
  .fp-worksheet__table td:last-child {
    border-right: none;
  }

  .fp-worksheet__table-wrap {
    border: none !important; border-radius: 0;
    min-height: calc(297mm - 10px - 12mm - 15mm - 10mm); /* mismo cálculo físico que el padding de .fp-worksheet arriba */
    position: relative;
  }

  /* Spec: "extender las líneas divisorias verticales... hasta la zona inferior de la página, aunque
     no existan tareas suficientes para completar ese espacio". 5 divs reales (NO un gradiente de
     fondo con cortes duros — en pruebas reales de exportación a PDF, ese gradiente rasterizaba mal
     y aparecía como una franja negra sólida en vez de una línea fina; los divs con background
     sólido son un patrón mucho más simple y confiable en el motor de impresión de Chrome),
     posicionados en los MISMOS porcentajes que el <colgroup> de la tabla (9/16/54/77/94, sumados),
     estirados a lo alto del wrap entero (que ya se estira para llenar el resto de la hoja, ver
     arriba). z-index 0 los deja DETRÁS de la tabla — dentro de filas reales, el fondo opaco de las
     celdas los tapa (se ve el border-right de esas celdas, sin duplicar), y en el espacio vacío
     debajo de la última fila quedan a la vista, continuando la grilla. */
  .fp-worksheet__print-gridlines { display: block !important; position: absolute; inset: 0; z-index: 0; }
  .fp-worksheet__print-gridlines span { position: absolute; top: 0; bottom: 0; width: 1px; background: #ccc !important; }
  .fp-worksheet__print-gridlines span:nth-child(1) { left: 9%; }
  .fp-worksheet__print-gridlines span:nth-child(2) { left: 16%; }
  .fp-worksheet__print-gridlines span:nth-child(3) { left: 54%; }
  .fp-worksheet__print-gridlines span:nth-child(4) { left: 77%; }
  .fp-worksheet__print-gridlines span:nth-child(5) { left: 94%; }
  .fp-worksheet__table { position: relative; z-index: 1; }
}

/* Base compartida de "avisos emergentes con ícono" (popup de las 14:00 de la Planilla, popup
   prioritario de eventos de Exteriores) — mismo lenguaje visual en los dos: ícono circular,
   titular, bajada, y (opcional) una grilla de datos. Reusa el backdrop apilado (misma capa que
   "+ Cargar tarea") para no competir con ningún otro modal ya abierto en pantalla. */
.fp-alert-popup { text-align: center; }
.fp-alert-popup__icon {
  width: 56px; height: 56px; margin: 0 auto 14px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, currentColor 14%, var(--fp-surface-2));
  border: 1px solid color-mix(in srgb, currentColor 30%, var(--fp-border));
}
.fp-alert-popup__headline { font-size: 17px; font-weight: 700; margin: 0 0 4px; }
.fp-alert-popup__sub { font-size: 13px; color: var(--fp-text-muted); margin: 0 0 20px; }

.fp-worksheet-nudge { max-width: 380px; margin: 0 auto; }

/* El botón secundario ("Ahora no", "Omitir") usa .fp-btn-subtle en todo el sistema — pero esa
   clase se pensó para acciones menores al pie de un formulario largo (ej. "Cancelar"), no para
   pararse al lado del CTA principal en un popup chico, donde su tamaño mínimo se ve como puesto
   de casualidad. Acá, dentro de estos avisos, lo llevamos al mismo tamaño/padding que .fp-btn
   (solo sin relleno) para que ambos botones tengan un peso visual parejo. */
.fp-alert-popup .fp-modal__actions .fp-btn-subtle {
  border: 1px solid var(--fp-border);
  border-radius: var(--fp-radius-sm);
  padding: 11px 18px;
  font-size: 13.5px;
  font-weight: 600;
}
.fp-alert-popup .fp-modal__actions .fp-btn-subtle:hover { border-color: var(--fp-violet); }

.fp-exterior-alert__grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px 16px;
  text-align: left; background: var(--fp-surface-2); border: 1px solid var(--fp-border);
  border-radius: var(--fp-radius-md); padding: 16px; margin-bottom: 20px;
}
.fp-exterior-alert__field { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.fp-exterior-alert__label { font-size: 11px; text-transform: uppercase; letter-spacing: .03em; color: var(--fp-text-muted); }
.fp-exterior-alert__field strong { font-size: 13.5px; font-weight: 600; overflow-wrap: break-word; }
.fp-exterior-alert__btn { display: inline-flex; align-items: center; gap: 6px; }

/* Checkboxes tipo "chip" — equipamiento y responsables múltiples de tareas Exteriores. */
.fp-new-item-assignee-list { display: flex; flex-wrap: wrap; gap: 8px; }

.fp-new-item-assignee-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: 999px; border: 1px solid var(--fp-border);
  background: var(--fp-surface-2); font-size: 12.5px; cursor: pointer;
  transition: border-color .15s ease, color .15s ease;
}

.fp-new-item-assignee-chip:has(input:checked) { border-color: var(--fp-violet); color: var(--fp-violet); }
.fp-new-item-assignee-chip input { accent-color: var(--fp-violet); }

.fp-modal {
  position: relative;
  width: 100%;
  max-width: 560px;
  max-height: min(88vh, 720px);
  overflow: auto;
  background: var(--fp-surface);
  border: 1px solid var(--fp-border);
  border-radius: var(--fp-radius-lg);
  box-shadow: var(--fp-shadow), var(--fp-glow);
  padding: 24px;
  transform: translateY(10px) scale(0.98);
  transition: transform 0.18s ease;
}

.fp-modal-backdrop--open .fp-modal { transform: translateY(0) scale(1); }
.fp-modal--wide { max-width: 880px; }
.fp-modal--media { max-width: 920px; padding: 16px; background: #000; }
.fp-modal--worksheet { max-width: min(1180px, calc(100vw - 40px)); }

.fp-modal__close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid var(--fp-border);
  background: var(--fp-surface-2);
  color: var(--fp-text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.fp-modal__close:hover { color: var(--fp-violet); border-color: var(--fp-violet); }
.fp-modal--no-close .fp-modal__close { display: none; }
.fp-modal--media .fp-modal__close { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.2); color: #fff; }

.fp-modal__title { font-size: 16px; font-weight: 700; margin: 0 0 16px; padding-right: 24px; }

@media (prefers-reduced-motion: reduce) {
  .fp-modal-backdrop, .fp-modal { transition: none; }
}

/* ---------- Previsualización de material (premium) ---------- */

.fp-media-viewer { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.fp-media-viewer img {
  max-width: 100%;
  max-height: 74vh;
  border-radius: 6px;
  cursor: zoom-in;
  transition: transform 0.2s ease;
}
.fp-media-viewer img.fp-media-viewer__zoomed { cursor: zoom-out; transform: scale(1.6); }
.fp-media-viewer video { max-width: 100%; max-height: 74vh; border-radius: 6px; }
.fp-media-viewer__bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  color: rgba(255,255,255,0.72);
  font-size: 12px;
}
.fp-media-viewer__bar a { color: #fff; font-weight: 600; }

/* ---------- Tarjetas de material (miniaturas) ---------- */

.fp-file-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}

.fp-file-thumb-cell { position: relative; }

.fp-file-thumb__select {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 5;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  background: rgba(10, 10, 14, 0.65);
  backdrop-filter: blur(2px);
  cursor: pointer;
}
.fp-file-thumb__select input { width: 15px; height: 15px; margin: 0; cursor: pointer; accent-color: var(--fp-violet); }

.fp-file-thumb__delete-form {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 5;
}
.fp-file-thumb__delete {
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  border: none;
  background: rgba(10, 10, 14, 0.65);
  backdrop-filter: blur(2px);
  color: #fff;
  cursor: pointer;
}
.fp-file-thumb__delete:hover { background: var(--fp-danger); }

/* Orden manual del carrusel (drag & drop) — el grip queda centrado abajo para no chocar con
   el checkbox de selección (arriba-izq.) ni el botón de borrar (arriba-der.). */
.fp-file-thumb__drag-handle {
  position: absolute;
  bottom: 6px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  width: 26px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  background: rgba(10, 10, 14, 0.65);
  backdrop-filter: blur(2px);
  color: #fff;
  font-size: 13px;
  line-height: 1;
  cursor: grab;
  user-select: none;
}
.fp-file-thumb__drag-handle:active { cursor: grabbing; }

.fp-file-thumb-cell--dragging { opacity: 0.35; }
.fp-file-thumb-cell[data-file-id] { transition: transform 0.15s ease; }

.fp-file-thumb {
  position: relative;
  border: 1px solid var(--fp-border);
  border-radius: var(--fp-radius-md);
  overflow: hidden;
  background: var(--fp-surface-2);
  cursor: pointer;
  text-align: left;
  padding: 0;
  display: block;
  width: 100%;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.12s ease;
}

.fp-file-thumb:hover { border-color: var(--fp-violet); box-shadow: var(--fp-glow); transform: translateY(-2px); }

.fp-file-thumb__preview {
  height: 96px;
  background: var(--fp-surface-2);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
}
.fp-file-thumb__preview img, .fp-file-thumb__preview video { width: 100%; height: 100%; object-fit: cover; }
.fp-file-thumb__kind-icon { color: var(--fp-text-muted); }

.fp-file-thumb__play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.15);
  color: #fff;
}

.fp-file-thumb__meta { padding: 8px 10px; }
.fp-file-thumb__name {
  font-size: 12px;
  font-weight: 600;
  color: var(--fp-text);
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.fp-file-thumb__sub { font-size: 10.5px; color: var(--fp-text-muted); }

/* ---------- Vista previa de archivos de referencia ANTES de guardar (Propiedad/Contenido) ----------
   Grilla fija de 10 columnas — spec de Marcos (2026-08-28): "dos filas de 10 cada una" (coincide
   justo con el tope de 20 archivos). Miniaturas chicas a propósito, sin texto de nombre/peso
   visible permanente (va en el title="" como tooltip) para que entren 10 por fila sin apretarse.
   En mobile baja a 5 columnas — 10 fijas ahí harían las miniaturas ilegibles. */
.fp-stage-grid {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 6px;
  margin-top: 10px;
}
@media (max-width: 640px) {
  .fp-stage-grid { grid-template-columns: repeat(5, 1fr); }
}
.fp-stage-thumb {
  position: relative;
  aspect-ratio: 1;
  border: 1px solid var(--fp-border);
  border-radius: var(--fp-radius-sm);
  overflow: hidden;
  background: var(--fp-surface-2);
}
.fp-stage-thumb img, .fp-stage-thumb video { width: 100%; height: 100%; object-fit: cover; display: block; }
.fp-stage-thumb__icon { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: var(--fp-text-muted); }
.fp-stage-thumb__delete {
  position: absolute; top: 2px; right: 2px; z-index: 3;
  width: 16px; height: 16px; display: flex; align-items: center; justify-content: center;
  border-radius: 4px; border: none; background: rgba(10,10,14,0.7); color: #fff; cursor: pointer; padding: 0;
}
.fp-stage-thumb__delete:hover { background: var(--fp-danger); }
/* Progreso de subida — franja fina abajo del todo, mismo lenguaje que el resto del portal
   (violeta en curso, verde al terminar, rojo si falla) — nunca tapa la miniatura en sí. */
.fp-stage-thumb__progress {
  position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: rgba(10,10,14,0.35); z-index: 2;
}
.fp-stage-thumb__progress-fill { height: 100%; width: 0%; background: var(--fp-violet); transition: width 0.2s ease; }
.fp-stage-thumb--done .fp-stage-thumb__progress-fill { background: var(--fp-success); width: 100% !important; }
.fp-stage-thumb--error .fp-stage-thumb__progress-fill { background: var(--fp-danger); width: 100% !important; }
.fp-stage-thumb__retry {
  position: absolute; inset: 0; z-index: 4; display: flex; align-items: center; justify-content: center;
  background: rgba(10,10,14,0.55); border: none; color: #fff; cursor: pointer;
}
.fp-stage-thumb__check {
  position: absolute; bottom: 3px; left: 3px; z-index: 3; color: var(--fp-success);
  filter: drop-shadow(0 0 2px rgba(0,0,0,0.6));
}
.fp-file-staging__counter--over { color: var(--fp-danger); }

/* ---------- Miniaturas de lo que YA está guardado en Drive (spec de Marcos, 2026-08-29) ----------
   Reusa .fp-stage-grid/.fp-stage-thumb de arriba, pero acá cada celda es un <button> real (click
   para ver mejor/descargar) — reseteo de estilos nativos de botón + glow al pasar el mouse, sin
   barra de progreso ni botón de borrar (eso es solo para "por subir"). */
.fp-stage-thumb--saved {
  padding: 0;
  font: inherit;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.fp-stage-thumb--saved:hover { border-color: var(--fp-violet); box-shadow: 0 0 0 1px var(--fp-violet); }
.fp-drive-gallery__empty { font-size: 12.5px; color: var(--fp-text-muted); margin: 8px 0 0; grid-column: 1 / -1; }

/* ---------- Resaltado momentáneo al llegar desde una notificación (spec de Marcos, 2026-08-28):
   "destacar visualmente la tarjeta durante unos segundos" — mismo glow violeta que ya usa el resto
   del portal para llamar la atención, sin cambiar el layout (outline en vez de box-shadow interno
   para que se vea igual en fila de tabla, tarjeta o grilla). ---------- */
@keyframes fpPedidoHighlightPulse {
  0%, 100% { box-shadow: 0 0 0 2px var(--fp-violet), 0 0 22px 2px rgba(var(--fp-violet-rgb), 0.55); }
  50% { box-shadow: 0 0 0 2px var(--fp-violet), 0 0 34px 6px rgba(var(--fp-violet-rgb), 0.75); }
}
.fp-pedido-highlight { animation: fpPedidoHighlightPulse 1.1s ease-in-out 3; border-radius: 10px; }

/* ---------- Selector "Nuevo pedido" (Propiedad / Contenido) ---------- */
.fp-pedido-chooser-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
}
.fp-pedido-chooser-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
  padding: 26px 18px;
  border: 1.5px solid var(--fp-border);
  border-radius: var(--fp-radius-lg);
  background: var(--fp-surface-2);
  color: var(--fp-text);
  cursor: pointer;
  font-family: inherit;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.12s ease;
}
.fp-pedido-chooser-card:hover { border-color: var(--fp-violet); box-shadow: var(--fp-glow); transform: translateY(-2px); }
.fp-pedido-chooser-card__icon { color: var(--fp-violet); }
.fp-pedido-chooser-card__label { font-size: 15px; font-weight: 700; }
.fp-pedido-chooser-card__sub { font-size: 12px; color: var(--fp-text-muted); }

.fp-upload-drop {
  border: 1.5px dashed var(--fp-border);
  border-radius: var(--fp-radius-md);
  padding: 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease;
  background: var(--fp-surface-2);
}
.fp-upload-drop:hover, .fp-upload-drop--drag { border-color: var(--fp-violet); background: rgba(var(--fp-violet-rgb), 0.05); }
.fp-upload-drop--chosen { border-style: solid; border-color: var(--fp-success); background: var(--fp-success-bg); }
.fp-upload-drop--chosen .fp-upload-drop__icon { color: var(--fp-success); }
.fp-upload-drop__icon { color: var(--fp-violet); flex-shrink: 0; }
.fp-upload-drop__text { min-width: 0; flex: 1; }
.fp-upload-drop__title { font-size: 13px; font-weight: 600; color: var(--fp-text); }
.fp-upload-drop__sub { font-size: 11px; color: var(--fp-text-muted); overflow-wrap: anywhere; }
.fp-upload-drop input[type="file"] { display: none; }

/* ---------- Ficha de tarea: estado semáforo ---------- */

.fp-status-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-bottom: 4px;
}

@media (max-width: 720px) {
  .fp-status-row { grid-template-columns: 1fr; }
}

.fp-status-col__label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--fp-text-muted);
  margin-bottom: 8px;
  display: block;
}

.fp-semaphore { display: flex; align-items: center; gap: 10px; }

.fp-semaphore__dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 8px -1px currentColor;
}

.fp-semaphore--gris .fp-semaphore__dot { background: var(--fp-text-muted); }
.fp-semaphore--azul .fp-semaphore__dot { background: var(--fp-info); color: var(--fp-info); }
.fp-semaphore--amarillo .fp-semaphore__dot { background: var(--fp-mustard); color: var(--fp-mustard); }
.fp-semaphore--verde .fp-semaphore__dot { background: var(--fp-success); color: var(--fp-success); }
.fp-semaphore--rojo .fp-semaphore__dot { background: var(--fp-danger); color: var(--fp-danger); }

.fp-semaphore select {
  border: none;
  background: none;
  color: var(--fp-text);
  font-size: 13.5px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  padding: 4px 4px 4px 0;
}

.fp-operador-list { display: flex; flex-direction: column; gap: 6px; }
.fp-operador-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12.5px;
  padding: 4px 0;
}
.fp-operador-item__remove { background: none; border: none; color: var(--fp-text-muted); cursor: pointer; font-size: 15px; line-height: 1; padding: 2px; }
.fp-operador-item__remove:hover { color: var(--fp-danger); }

.fp-btn-icon-danger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border-radius: var(--fp-radius-sm);
  border: 1px solid var(--fp-danger);
  background: transparent;
  color: var(--fp-danger);
  cursor: pointer;
  transition: background 0.15s ease;
}
.fp-btn-icon-danger:hover { background: var(--fp-danger-bg); }
.fp-btn-icon-danger--disabled {
  border-color: var(--fp-border);
  color: var(--fp-text-muted);
  cursor: not-allowed;
}
.fp-btn-icon-danger--disabled:hover { background: transparent; }

/* ---------- Ficha de tarea: cabecera minimalista ---------- */

.fp-task-header--minimal { display: flex; flex-direction: column; gap: 6px; margin-bottom: 20px; }
.fp-task-header--minimal h1 { margin: 0; font-size: var(--fp-text-2xl); }

.fp-task-meta-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.fp-task-meta-row__sep { color: var(--fp-border); }

.fp-platform-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid var(--fp-border);
  color: var(--fp-text-muted);
  background: var(--fp-surface-2);
}

/* ---------- Comentarios: composer compacto ---------- */

.fp-comment-composer { margin-bottom: 16px; }
.fp-comment-composer__quick { display: flex; gap: 6px; margin-bottom: 8px; }

.fp-comment-composer__btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--fp-border);
  background: var(--fp-surface-2);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.fp-comment-composer__btn:hover { box-shadow: var(--fp-glow); }
.fp-comment-composer__btn--observacion { color: var(--fp-mustard); }
.fp-comment-composer__btn--comentar { color: var(--fp-text); }
.fp-comment-composer__btn--confirmar { color: var(--fp-success); }
.fp-comment-composer__btn--active { border-color: currentColor; }

.fp-comment-composer__form { display: none; gap: 8px; flex-direction: column; }
.fp-comment-composer__form--open { display: flex; }

.fp-btn-subtle {
  width: auto;
  padding: 5px 12px;
  font-size: 11.5px;
  border: none;
  background: none;
  color: var(--fp-text-muted);
  cursor: pointer;
  border-radius: 6px;
  transition: color 0.15s ease, background-color 0.15s ease;
}
.fp-btn-subtle:hover { color: var(--fp-violet); background: var(--fp-surface-2); }

/* ---------- Selector de plataformas (desplegable + chips) ---------- */

.fp-platform-picker__wrap { position: relative; }
.fp-field .fp-platform-picker__btn { width: 100%; }

.fp-platform-picker__list {
  width: 100%;
  min-width: 260px;
  padding: 10px;
}
.fp-platform-picker__list.fp-platform-picker__list--open { display: block; }
.fp-platform-picker__list .fp-service-picker__search { margin-bottom: 8px; }
.fp-platform-picker__list .fp-service-picker__dropdown {
  margin-top: 0;
  max-height: 220px;
  border: none;
}

.fp-platform-picker__chips { margin-top: 8px; }

/* ---------- Selector de servicios contratados ---------- */

.fp-service-picker { position: relative; }

.fp-service-picker__chips[hidden] { display: none; }
.fp-service-picker__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-height: 34px;
  padding: 6px;
  border: 1px solid var(--fp-border);
  border-radius: var(--fp-radius-sm);
  background: var(--fp-surface-2);
  margin-bottom: 8px;
}

.fp-service-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 8px 4px 6px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
  border: 1px solid currentColor;
  background: rgba(127, 127, 127, 0.08);
}

.fp-service-chip__remove {
  background: none;
  border: none;
  color: inherit;
  cursor: pointer;
  font-size: 13px;
  line-height: 1;
  padding: 0;
  opacity: 0.7;
}
.fp-service-chip__remove:hover { opacity: 1; }

.fp-service-picker__empty { font-size: 11.5px; color: var(--fp-text-muted); padding: 4px 2px; }

.fp-service-picker__search {
  width: 100%;
  padding: 8px 10px;
  border-radius: var(--fp-radius-sm);
  border: 1px solid var(--fp-border);
  background: var(--fp-surface);
  color: var(--fp-text);
  font-size: 13px;
  font-family: inherit;
}

.fp-service-picker__dropdown {
  margin-top: 6px;
  max-height: 260px;
  overflow-y: auto;
  border: 1px solid var(--fp-border);
  border-radius: var(--fp-radius-sm);
  background: var(--fp-surface);
}

.fp-service-picker__group-label {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--fp-text-muted);
  padding: 8px 10px 4px;
}

.fp-service-picker__option {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 7px 10px;
  border: none;
  background: none;
  text-align: left;
  font-size: 12.5px;
  color: var(--fp-text);
  cursor: pointer;
  font-family: inherit;
}
.fp-service-picker__option:hover { background: var(--fp-surface-2); }
.fp-service-picker__option--selected { opacity: 0.4; cursor: default; }
.fp-service-picker__option--selected:hover { background: none; }

.fp-service-picker__no-results { font-size: 12px; color: var(--fp-text-muted); padding: 10px; }

/* ---------- Marca de agua institucional del cliente ---------- */

.fp-watermark {
  position: fixed;
  inset: 0;
  z-index: 0;
  background-size: cover;
  background-position: center;
  opacity: 0.04;
  pointer-events: none;
  filter: grayscale(0.3);
}

:root[data-theme="dark"] .fp-watermark { opacity: 0.04; filter: grayscale(0.5) brightness(1.4); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .fp-watermark { opacity: 0.04; filter: grayscale(0.5) brightness(1.4); }
}

/* ==========================================================================
   "Quiero ser cliente" — funnel público de adquisición.
   Mundo visual propio y deliberado (siempre oscuro, como el splash),
   separado del shell de la app interna.
   ========================================================================== */

.fp-signup {
  min-height: 100vh;
  background: #08060f;
  color: #eeecf7;
  font-family: "Samsung Sharp Sans", "Segoe UI", system-ui, -apple-system, "Inter", Roboto, Arial, sans-serif;
  position: relative;
  overflow-x: hidden;
}

.fp-signup::before,
.fp-signup::after {
  content: '';
  position: fixed;
  z-index: 0;
  pointer-events: none;
  border-radius: 50%;
  filter: blur(70px);
  will-change: transform;
}

.fp-signup::before {
  width: 900px;
  height: 900px;
  top: -420px;
  left: -280px;
  background: radial-gradient(circle, rgba(var(--fp-violet-rgb), 0.26), transparent 62%);
  animation: fpSignupDrift1 68s ease-in-out infinite;
}

.fp-signup::after {
  width: 760px;
  height: 760px;
  top: 8%;
  right: -320px;
  background: radial-gradient(circle, rgba(var(--fp-violet-rgb), 0.18), transparent 58%);
  animation: fpSignupDrift2 84s ease-in-out infinite;
}

@keyframes fpSignupDrift1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(90px, 70px) scale(1.1); }
}

@keyframes fpSignupDrift2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-70px, 50px) scale(1.06); }
}

@media (prefers-reduced-motion: reduce) {
  .fp-signup::before, .fp-signup::after { animation: none; }
}

.fp-signup__nav {
  position: relative;
  z-index: 1;
  max-width: 1100px;
  margin: 0 auto;
  padding: 24px 24px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.fp-signup__nav img { height: 26px; }
.fp-signup__nav a {
  font-size: 13px;
  color: rgba(238, 236, 247, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.14);
  padding: 8px 16px;
  border-radius: 999px;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.fp-signup__nav a:hover { color: #fff; border-color: var(--fp-violet); }

.fp-signup__inner {
  position: relative;
  z-index: 1;
  max-width: 880px;
  margin: 0 auto;
  padding: 56px 24px 100px;
}

.fp-signup__inner--wide { max-width: 1100px; }

.fp-signup__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #a78bfa;
  margin-bottom: 18px;
}

.fp-signup__hero h1 {
  font-size: clamp(32px, 5vw, 52px);
  line-height: 1.1;
  font-weight: 700;
  margin: 0 0 20px;
  max-width: 14ch;
}

.fp-signup__hero p {
  font-size: 17px;
  line-height: 1.6;
  color: rgba(238, 236, 247, 0.72);
  max-width: 56ch;
  margin: 0 0 32px;
}

.fp-signup .fp-btn {
  width: auto;
  padding: 14px 30px;
  font-size: 15px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.fp-signup__section { margin-top: 72px; }
.fp-signup__section h2 {
  font-size: 26px;
  font-weight: 700;
  margin: 0 0 8px;
}
.fp-signup__section > p.fp-signup__section-sub {
  color: rgba(238, 236, 247, 0.65);
  font-size: 14.5px;
  margin: 0 0 28px;
  max-width: 60ch;
}

.fp-signup__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
}

.fp-signup__card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--fp-radius-md);
  padding: 20px;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.fp-signup__card:hover { border-color: rgba(var(--fp-violet-rgb), 0.4); transform: translateY(-2px); }
.fp-signup__card-icon { color: #a78bfa; margin-bottom: 12px; }
.fp-signup__card h3 { font-size: 14.5px; font-weight: 700; margin: 0 0 6px; }
.fp-signup__card p { font-size: 13px; color: rgba(238, 236, 247, 0.6); margin: 0; line-height: 1.5; }

.fp-signup__rules { display: flex; flex-direction: column; gap: 14px; }
.fp-signup__rule {
  display: flex;
  gap: 14px;
  padding: 16px 18px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--fp-radius-md);
}
.fp-signup__rule-num {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(var(--fp-violet-rgb), 0.15);
  color: #a78bfa;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 12px;
}
.fp-signup__rule p { margin: 0; font-size: 13.5px; color: rgba(238, 236, 247, 0.75); line-height: 1.5; }
.fp-signup__rule strong { color: #fff; }

.fp-signup__cta-bar {
  margin-top: 60px;
  text-align: center;
  padding: 44px 24px;
  border-radius: var(--fp-radius-lg);
  background: linear-gradient(135deg, rgba(var(--fp-violet-rgb), 0.16), rgba(var(--fp-violet-rgb), 0.05));
  border: 1px solid rgba(var(--fp-violet-rgb), 0.25);
}
.fp-signup__cta-bar h2 { font-size: 24px; margin: 0 0 8px; }
.fp-signup__cta-bar p { color: rgba(238, 236, 247, 0.65); margin: 0 0 24px; font-size: 14px; }

/* ---------- Progreso del funnel ---------- */

.fp-signup__progress {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 40px;
  flex-wrap: wrap;
}
.fp-signup__progress-step {
  font-size: 11.5px;
  font-weight: 600;
  color: rgba(238, 236, 247, 0.4);
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.fp-signup__progress-step--active { color: #fff; border-color: var(--fp-violet); background: rgba(var(--fp-violet-rgb), 0.12); }
.fp-signup__progress-step--done { color: #a78bfa; }
.fp-signup__progress-sep { color: rgba(255, 255, 255, 0.15); font-size: 11px; }

/* ---------- Planes ---------- */

.fp-signup__plan-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
}

.fp-signup__plan-card {
  position: relative;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--fp-radius-lg);
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
}
.fp-signup__plan-card--featured {
  --plan-glow: 230, 31, 201;
  position: relative;
  border-color: rgba(var(--plan-glow), 0.55);
  background: linear-gradient(160deg, rgba(var(--plan-glow), 0.14), rgba(255, 255, 255, 0.02));
  box-shadow: 0 0 0 1px rgba(var(--plan-glow), 0.25), 0 24px 70px -20px rgba(var(--plan-glow), 0.5);
  transform: translateY(-4px);
  animation: fpPlanFeaturedPulse 3.5s ease-in-out infinite;
}

.fp-signup__plan-card--featured::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.8px;
  background: conic-gradient(from 0deg, rgba(var(--plan-glow), 0) 0%, rgba(var(--plan-glow), 1) 18%, rgba(var(--plan-glow), 0) 36%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  animation: fpPlanBorderSpin 4s linear infinite;
}

@keyframes fpPlanBorderSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .fp-signup__plan-card--featured { animation: none; }
  .fp-signup__plan-card--featured::before { animation: none; }
}
.fp-signup__plan-badge {
  position: absolute;
  top: -12px;
  left: 24px;
  background: var(--fp-gradient-cta);
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 4px 12px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.fp-signup__plan-card--featured .fp-signup__plan-badge {
  background: linear-gradient(135deg, rgb(var(--plan-glow)), var(--fp-violet));
  box-shadow: 0 2px 14px -2px rgba(var(--plan-glow), 0.7);
}

.fp-signup__plan-badge__icon {
  display: inline-block;
  animation: fpPlanBadgeBounce 2.2s ease-in-out infinite;
}

@keyframes fpPlanBadgeBounce {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-2px) rotate(-8deg); }
}

@media (prefers-reduced-motion: reduce) {
  .fp-signup__plan-badge__icon { animation: none; }
}
.fp-signup__plan-name { font-size: 19px; font-weight: 700; margin: 4px 0 6px; }
.fp-signup__plan-tagline { font-size: 12.5px; color: rgba(238, 236, 247, 0.55); margin: 0 0 20px; min-height: 32px; }
.fp-signup__plan-price { font-size: 30px; font-weight: 700; margin-bottom: 4px; }
.fp-signup__plan-price span { font-size: 13px; font-weight: 500; color: rgba(238, 236, 247, 0.5); }
.fp-signup__plan-price--consultar { font-size: 16px; color: rgba(238, 236, 247, 0.6); }
.fp-signup__plan-features { list-style: none; margin: 20px 0 28px; padding: 0; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.fp-signup__plan-features li { font-size: 13px; color: rgba(238, 236, 247, 0.75); display: flex; gap: 8px; align-items: flex-start; }
.fp-signup__plan-features li svg { flex-shrink: 0; color: #4ade80; margin-top: 2px; }

/* ---------- Formularios del funnel ---------- */

.fp-signup__form-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--fp-radius-lg);
  padding: 32px;
  max-width: 460px;
}

.fp-signup .fp-field label { color: rgba(238, 236, 247, 0.8); }
.fp-signup .fp-field input, .fp-signup .fp-field select {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.14);
  color: #fff;
}

/* ---------- Confianza (logos) ---------- */

.fp-signup__trust-logos {
  overflow: hidden;
  padding: 36px 0;
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.fp-signup__trust-logos__track {
  display: flex;
  align-items: center;
  gap: 56px;
  width: max-content;
  animation: fpTrustLogosMarquee 32s linear infinite;
}
.fp-signup__trust-logos img { height: 96px; width: auto; flex-shrink: 0; }

@keyframes fpTrustLogosMarquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .fp-signup__trust-logos__track { animation: none; }
}

/* ---------- Estado / confirmación ---------- */

.fp-signup__status-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
}
.fp-signup__status-icon--success { background: rgba(74, 222, 128, 0.15); color: #4ade80; }
.fp-signup__status-icon--pending { background: rgba(224, 177, 47, 0.15); color: #e0b12f; }
.fp-signup__status-icon--error { background: rgba(255, 107, 127, 0.15); color: #ff6b7f; }

@media (max-width: 640px) {
  .fp-signup__inner { padding: 32px 18px 80px; }
}

.fp-main, .fp-footer { position: relative; z-index: 1; }

/* ---------- Tarjetas de plan (módulo Planes) ---------- */

.fp-plan-card { position: relative; }
.fp-plan-card--inactive { opacity: 0.55; }

.fp-plan-card--featured {
  border-color: rgba(var(--fp-violet-rgb), 0.5);
  background: linear-gradient(160deg, rgba(var(--fp-violet-rgb), 0.08), var(--fp-surface));
  box-shadow: var(--fp-shadow), 0 0 0 1px rgba(var(--fp-violet-rgb), 0.25), 0 16px 40px -18px rgba(var(--fp-violet-rgb), 0.55);
  animation: fpPlanFeaturedPulse 3.5s ease-in-out infinite;
}

@keyframes fpPlanFeaturedPulse {
  0%, 100% { box-shadow: var(--fp-shadow), 0 0 0 1px rgba(var(--fp-violet-rgb), 0.25), 0 16px 40px -18px rgba(var(--fp-violet-rgb), 0.55); }
  50% { box-shadow: var(--fp-shadow), 0 0 0 1px rgba(var(--fp-violet-rgb), 0.4), 0 20px 48px -16px rgba(var(--fp-violet-rgb), 0.7); }
}

.fp-plan-card__star {
  position: absolute;
  top: -11px;
  left: 18px;
  background: var(--fp-gradient-cta);
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 999px;
  box-shadow: 0 2px 8px -2px rgba(var(--fp-violet-rgb), 0.6);
}

@media (prefers-reduced-motion: reduce) {
  .fp-plan-card--featured { animation: none; }
}

/* ---------- Perfil: sidebar + reputación ---------- */

.fp-profile-layout {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 20px;
  align-items: stretch;
  margin-bottom: 32px;
}

@media (max-width: 860px) {
  .fp-profile-layout { grid-template-columns: 1fr; }
}

.fp-profile-below .fp-section:last-child { margin-bottom: 0; }

/* Widget del rol "piloto" (súper restringido) — contenedor ancho y bajo con un mini-calendario
   como primera impresión + próximos/vencidos, ver ProfileController::buildPilotCalendarDays(). */
.fp-pilot-widget {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  background: var(--fp-surface);
  border: 1px solid var(--fp-border);
  border-radius: var(--fp-radius-md);
  padding: 16px;
}

.fp-pilot-widget__calendar { flex: 0 0 260px; }

.fp-pilot-cal__header { font-size: 13px; font-weight: 700; margin-bottom: 8px; text-transform: capitalize; }

.fp-pilot-cal__weekdays,
.fp-pilot-cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }

.fp-pilot-cal__weekdays span {
  font-size: 10px; color: var(--fp-text-muted); text-align: center; font-weight: 700;
}

.fp-pilot-cal__day {
  position: relative;
  aspect-ratio: 1 / 1;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px;
  border-radius: 6px;
  background: var(--fp-surface-2);
  color: var(--fp-text);
}

.fp-pilot-cal__day--muted { color: var(--fp-text-muted); opacity: .45; }
.fp-pilot-cal__day--today { outline: 1.5px solid var(--fp-violet); font-weight: 700; }
.fp-pilot-cal__day--has-items { background: color-mix(in srgb, var(--fp-violet) 18%, var(--fp-surface-2)); font-weight: 700; }

.fp-pilot-cal__dot {
  position: absolute; bottom: 3px; width: 4px; height: 4px; border-radius: 50%;
  background: var(--fp-violet); display: block;
}

.fp-pilot-widget__lists {
  flex: 1 1 320px;
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

.fp-pilot-list { flex: 1 1 220px; max-height: 210px; overflow-y: auto; }

.fp-pilot-list h4 { margin: 0 0 8px; font-size: 12.5px; color: var(--fp-text-muted); text-transform: uppercase; letter-spacing: .03em; }
.fp-pilot-list--overdue h4 { color: var(--fp-danger); }

.fp-pilot-list ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }

.fp-pilot-list li a {
  display: flex; flex-direction: column; gap: 2px;
  padding: 7px 9px;
  border-radius: 8px;
  background: var(--fp-surface-2);
  text-decoration: none;
  color: var(--fp-text);
  font-size: 12.5px;
}

.fp-pilot-list li a span { font-size: 11px; color: var(--fp-text-muted); }
.fp-pilot-list--overdue li a { border-left: 2px solid var(--fp-danger); }

.fp-pilot-list__empty { font-size: 12.5px; color: var(--fp-text-muted); margin: 0; }

/* Panel del piloto — equipo a cargo (RR.HH.) y flota de drones, ver PilotDashboardController. */
.fp-pilot-team-grid,
.fp-pilot-drone-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 16px;
}

.fp-pilot-team-card, .fp-pilot-drone-card { display: flex; flex-direction: column; }

.fp-pilot-notes { display: flex; flex-direction: column; gap: 6px; max-height: 140px; overflow-y: auto; }

.fp-pilot-note {
  padding: 7px 9px;
  border-radius: 8px;
  background: var(--fp-surface-2);
  font-size: 12.5px;
}

.fp-pilot-note span { display: block; margin-top: 3px; font-size: 10.5px; color: var(--fp-text-muted); }

.fp-pilot-drone-photo {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: var(--fp-surface-2);
  border: 1px solid var(--fp-border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--fp-text-muted);
  cursor: pointer;
  overflow: hidden;
  transition: border-color .15s ease;
}

.fp-pilot-drone-photo:hover { border-color: var(--fp-violet); }
.fp-pilot-drone-photo img { width: 100%; height: 100%; object-fit: cover; }

.fp-pilot-drone-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 12px;
}

.fp-pilot-drone-stats div {
  text-align: center;
  padding: 8px 4px;
  border-radius: 8px;
  background: var(--fp-surface-2);
}

.fp-pilot-drone-stats strong { display: block; font-size: 16px; }
.fp-pilot-drone-stats span { display: block; font-size: 10px; color: var(--fp-text-muted); text-transform: uppercase; letter-spacing: .02em; }

.fp-pilot-flight-list { display: flex; flex-direction: column; gap: 4px; }

.fp-pilot-flight-item {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 11.5px;
  color: var(--fp-text-muted);
  padding: 4px 0;
  border-top: 1px solid var(--fp-border);
}

.fp-profile-sidebar {
  background: var(--fp-surface);
  border: 1px solid var(--fp-border);
  border-radius: var(--fp-radius-md);
  padding: 26px 22px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.fp-profile-avatar {
  width: 92px;
  height: 92px;
  border-radius: 50%;
  background: var(--fp-surface-2);
  border: 2px solid var(--fp-border);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}
.fp-profile-avatar img { width: 100%; height: 100%; object-fit: cover; }
.fp-profile-avatar svg { width: 42px; height: 42px; color: var(--fp-text-muted); }

/* Círculo de foto de usuario reutilizable (listados como Equipo) — misma lógica de fp_user_avatar_url(): foto real con object-fit:cover, o iniciales de fallback. */
.fp-user-avatar-sm {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(var(--fp-violet-rgb), 0.18), rgba(var(--fp-violet-rgb), 0.06));
  border: 1px solid rgba(var(--fp-violet-rgb), 0.25);
  color: var(--fp-violet);
  font-weight: 700;
  font-size: 14px;
}
.fp-user-avatar-sm img { width: 100%; height: 100%; object-fit: cover; }

.fp-profile-upload-btn {
  cursor: pointer;
  font-size: 12px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.fp-profile-name { font-size: 16px; font-weight: 700; text-align: center; margin-top: 2px; }
.fp-profile-role { font-size: 12.5px; color: var(--fp-text-muted); text-align: center; margin-top: -8px; }

.fp-profile-editable-fields {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 6px;
  padding-top: 14px;
  border-top: 1px dashed var(--fp-border);
}

.fp-profile-editable-fields label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  color: var(--fp-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 5px;
}

.fp-profile-edit-row { position: relative; display: flex; align-items: center; }
.fp-profile-edit-row input,
.fp-profile-edit-row select {
  width: 100%;
  padding: 9px 58px 9px 12px;
  border-radius: 999px;
  border: 1px solid var(--fp-border);
  background: var(--fp-surface-2);
  color: var(--fp-text);
  font-size: 13px;
  font-family: inherit;
  box-sizing: border-box;
}
.fp-profile-edit-row select { appearance: none; cursor: pointer; }
.fp-profile-edit-row input:disabled,
.fp-profile-edit-row select:disabled { background: transparent; color: var(--fp-text-muted); cursor: default; }

.fp-business-hours-block {
  padding: 12px 0;
  border-top: 1px dashed var(--fp-border);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.fp-business-hours-block:first-child { border-top: none; padding-top: 0; }
.fp-business-hours-block__label { font-size: 11px; font-weight: 700; color: var(--fp-text-muted); text-transform: uppercase; letter-spacing: 0.03em; }
.fp-business-hours-block__sublabel { font-size: 11px; color: var(--fp-text-muted); margin-top: 4px; }

.fp-business-hours-selects {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  width: 100%;
  padding-right: 58px;
  box-sizing: border-box;
}
.fp-business-hours-selects select,
.fp-business-hours-selects input[type="time"] {
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid var(--fp-border);
  background: var(--fp-surface-2);
  color: var(--fp-text);
  font-size: 12.5px;
  font-family: inherit;
}
.fp-business-hours-selects select:disabled,
.fp-business-hours-selects input[type="time"]:disabled { background: transparent; color: var(--fp-text-muted); }
.fp-business-hours-selects span { font-size: 12px; color: var(--fp-text-muted); }

.fp-business-hours-toggle { margin-top: 8px; }
.fp-business-hours-toggle > summary {
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  color: var(--fp-violet);
  list-style: none;
}
.fp-business-hours-toggle > summary::-webkit-details-marker { display: none; }
.fp-business-hours-toggle > summary::before { content: '+ '; }
.fp-business-hours-toggle[open] > summary::before { content: '– '; }
.fp-business-hours-toggle > .fp-business-hours-block { padding-top: 10px; }

.fp-profile-edit-actions { position: absolute; right: 8px; display: flex; gap: 2px; }
.fp-profile-edit-btn {
  background: transparent;
  border: none;
  color: var(--fp-text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5px;
  border-radius: 6px;
}
.fp-profile-edit-btn:hover { color: var(--fp-violet); background: rgba(var(--fp-violet-rgb), 0.1); }
.fp-profile-edit-btn--confirm { display: none; color: var(--fp-success); }
.fp-profile-edit-btn--confirm:hover { color: var(--fp-success); background: var(--fp-success-bg); }
.fp-profile-edit-btn--cancel { display: none; color: var(--fp-danger); }
.fp-profile-edit-btn--cancel:hover { color: var(--fp-danger); background: rgba(214, 58, 58, 0.12); }

.fp-profile-main { display: flex; flex-direction: column; min-width: 0; }
/* En un flex-column, align-items no controla el alto — hay que estirar la
   tarjeta explícitamente para que su borde visible llegue a la misma altura
   que el del sidebar (ambos ya miden lo mismo a nivel contenedor). */
.fp-profile-main > .fp-section { flex: 1; margin-bottom: 0; display: flex; flex-direction: column; }

.fp-reputation-intro { font-size: 12.5px; color: var(--fp-text-muted); line-height: 1.5; max-width: 680px; margin: 4px 0 18px; }

/* Pill de créditos, esquina superior derecha de la tarjeta de Reputación (Tanda 34). */
.fp-credit-pill {
  --tier-color: var(--fp-mustard);
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--tier-color);
  background: color-mix(in srgb, var(--tier-color) 12%, transparent);
  color: var(--tier-color);
  flex-shrink: 0;
}
.fp-credit-pill__text { display: flex; flex-direction: column; line-height: 1.15; }
.fp-credit-pill__value { font-size: 14px; font-weight: 700; color: var(--fp-text); }
.fp-credit-pill__tier { font-size: 10.5px; color: var(--tier-color); font-weight: 600; }

.fp-reputation-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
}
@media (max-width: 760px) { .fp-reputation-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .fp-reputation-grid { grid-template-columns: 1fr; } }

.fp-rep-card {
  --rep-glow: 109, 40, 217;
  background: var(--fp-surface-2);
  border: 1px solid var(--fp-border);
  border-radius: var(--fp-radius-md);
  padding: 16px 18px;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  box-shadow: none;
  transition: box-shadow 0.25s ease, border-color 0.25s ease;
}

.fp-rep-card:hover {
  border-color: rgba(var(--rep-glow), 0.5);
  box-shadow: 0 0 14px rgba(var(--rep-glow), 0.35);
}

.fp-rep-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.5px;
  background: linear-gradient(90deg, rgba(var(--rep-glow), 1) 0%, transparent 40%, transparent 60%, rgba(var(--rep-glow), 1) 100%);
  background-size: 200% 100%;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.25s ease;
  animation: fpRepBorderTrace 3.5s linear infinite;
}

.fp-rep-card:hover::before { opacity: 1; }

@keyframes fpRepBorderTrace {
  0% { background-position: 0% 0%; }
  100% { background-position: 200% 0%; }
}

@media (prefers-reduced-motion: reduce) {
  .fp-rep-card::before { animation: none; }
}

.fp-rep-card h5 {
  font-size: 11px;
  font-weight: 700;
  color: var(--fp-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  display: flex;
  justify-content: space-between;
  margin: 0;
}
.fp-rep-card h5 span { color: var(--fp-text-muted); opacity: 0.5; font-family: monospace; }

.fp-rep-num { font-size: 22px; font-weight: 700; color: var(--fp-text); line-height: 1.2; transition: color 0.25s ease; }
.fp-rep-num span { font-size: 11px; color: var(--fp-text-muted); font-weight: 500; margin-left: 3px; }
.fp-rep-card:hover .fp-rep-num { color: rgb(var(--rep-glow)); }

.fp-rep-bar-track {
  width: 100%;
  height: 6px;
  background: var(--fp-border);
  border-radius: 99px;
  overflow: hidden;
  margin-top: auto;
}
.fp-rep-bar-fill { height: 100%; border-radius: 99px; background: var(--fp-text-muted); transition: width 0.5s ease, background-color 0.25s ease; }
.fp-rep-card:hover .fp-rep-bar-fill { background: rgb(var(--rep-glow)); }

.fp-rep-detail { font-size: 11px; color: var(--fp-text-muted); margin: 0; line-height: 1.4; }

/* ==================== Estadísticas (Metricool) ==================== */

.fp-days-toggle {
  display: inline-flex;
  border: 1px solid var(--fp-border);
  border-radius: var(--fp-radius-sm);
  overflow: hidden;
}
.fp-days-toggle__item {
  padding: 8px 14px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--fp-text-muted);
  border-right: 1px solid var(--fp-border);
}
.fp-days-toggle__item:last-child { border-right: none; }
.fp-days-toggle__item:hover { color: var(--fp-text); }
.fp-days-toggle__item--active { background: rgba(var(--fp-violet-rgb), 0.15); color: var(--fp-violet); }

.fp-kpi-delta {
  font-size: 12px;
  font-weight: 600;
  width: fit-content;
}
.fp-kpi-delta--up { color: var(--fp-success); }
.fp-kpi-delta--down { color: var(--fp-danger); }

.fp-sparkline-wrap { margin-bottom: 24px; }
.fp-sparkline-wrap .fp-card__label { display: block; margin-bottom: 10px; }
.fp-sparkline { display: block; }
.fp-sparkline-empty { font-size: 13px; color: var(--fp-text-muted); }

.fp-table-wrap .fp-card__label { display: block; margin-bottom: 10px; }
.fp-table-wrap { overflow-x: auto; }
.fp-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
  background: var(--fp-surface);
}
.fp-table th, .fp-table td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--fp-border);
  text-align: left;
  white-space: nowrap;
  background: var(--fp-surface);
}
.fp-table th { color: var(--fp-text-muted); font-weight: 600; font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.02em; }
.fp-table__truncate { white-space: normal; max-width: 320px; }

/* ---- Mejores contenidos del período ---- */
.fp-content-cards-wrap { margin-top: 24px; }
.fp-content-cards-wrap .fp-card__label { display: block; margin-bottom: 10px; }
.fp-content-cards {
  /* Flex (no grid) para que las tarjetas queden siempre una al lado de la otra en una sola
     fila, achicándose proporcionalmente (flex: 1 1 0) hasta ocupar exactamente el ancho del
     contenedor, sin importar si son 1, 2, 3 o 4. Por debajo de 720px se pasa a grid con wrap
     (ver media query) porque a ese ancho encogerlas todas en una fila las deja ilegibles. */
  display: flex;
  gap: 14px;
}
.fp-content-cards .fp-content-card {
  flex: 1 1 0;
  min-width: 0;
}

@media (max-width: 720px) {
  .fp-content-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  }
  .fp-content-cards .fp-content-card {
    flex: unset;
    min-width: unset;
  }
}
.fp-content-card {
  background: var(--fp-surface);
  border: 1px solid var(--fp-border);
  border-radius: var(--fp-radius-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.fp-content-card__preview {
  width: 100%;
  height: 140px;
  object-fit: cover;
  display: block;
  background: var(--fp-surface-2);
}
.fp-content-card__preview--placeholder {
  background: linear-gradient(135deg, var(--fp-surface-2), var(--fp-surface));
}
.fp-content-card__body { padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.fp-content-card__meta { font-size: 11px; color: var(--fp-text-muted); display: flex; gap: 6px; flex-wrap: wrap; }
.fp-content-card__link { color: var(--fp-violet); text-decoration: none; }
.fp-content-card__link:hover { text-decoration: underline; }
.fp-content-card__text {
  font-size: 12.5px;
  color: var(--fp-text);
  margin: 0;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fp-content-card__gauges {
  display: flex;
  gap: 6px;
  padding: 10px 0;
  border-top: 1px dashed var(--fp-border);
  border-bottom: 1px dashed var(--fp-border);
  flex-wrap: wrap;
}
.fp-metric-gauge { display: flex; flex-direction: column; align-items: center; gap: 3px; flex: 1; min-width: 52px; }
.fp-metric-gauge__label {
  font-size: 9px;
  color: var(--fp-text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  text-align: center;
  line-height: 1.2;
}

.fp-content-card__counts { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
.fp-content-card__count {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--fp-text);
}
.fp-content-card__count svg { color: var(--fp-text-muted); }

/* ---- Informe imprimible ---- */
.fp-report { max-width: 860px; margin: 0 auto; padding: 32px 24px 60px; }
.fp-report__actions { display: flex; justify-content: flex-end; margin-bottom: 20px; }
.fp-report__header {
  display: flex;
  align-items: center;
  gap: 20px;
  padding-bottom: 20px;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--fp-border);
}
.fp-report__header .fp-logo-dual { height: 40px; }
.fp-report__header-meta h1 { font-size: 20px; margin: 0 0 4px; }
.fp-report__header-meta p { font-size: 13px; color: var(--fp-text-muted); margin: 0; }
.fp-report__section { margin-bottom: 32px; }
.fp-report__section h2 { font-size: 16px; margin: 0 0 16px; }
.fp-report__kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}
.fp-report__kpi {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 16px;
  border: 1px solid var(--fp-border);
  border-radius: var(--fp-radius-md);
}
.fp-report__footer {
  display: flex;
  justify-content: space-between;
  font-size: 11.5px;
  color: var(--fp-text-muted);
  padding-top: 20px;
  margin-top: 20px;
  border-top: 1px solid var(--fp-border);
}

@media print {
  /* Regla obligatoria: nunca convertir la exportación/impresión a fondo blanco.
     El navegador descarta colores de fondo al imprimir salvo que se le pida
     explícitamente conservarlos (print-color-adjust), así que forzamos el modo
     oscuro real de la plataforma en vez de heredar el blanco por defecto del print. */
  * {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    color-adjust: exact !important;
  }
  .no-print { display: none !important; }
  html, body {
    background: var(--fp-bg) !important;
    color: var(--fp-text) !important;
  }
  .fp-report { max-width: 100%; padding: 0; background: var(--fp-bg) !important; }
  .fp-report__kpi, .fp-table th, .fp-table td { border-color: var(--fp-border) !important; }
  .fp-report__kpi,
  .fp-table,
  .fp-table th,
  .fp-table td,
  .fp-content-card,
  .fp-content-card__preview,
  .fp-content-card__preview--placeholder {
    background: var(--fp-surface) !important;
  }
  .fp-content-cards { break-inside: avoid; }
  .fp-content-card { break-inside: avoid; }
}

/* ===== Herramientas de Copy: IA + Emojis (TAREA 4/5/7/8/9, solo admin_general) ===== */
.fp-copy-tools {
  display: flex;
  gap: 8px;
  position: relative;
}
/* Mismo patrón de bug que .fp-service-picker__chips: display:flex explícito le gana al
   [hidden] nativo del navegador (misma especificidad, pero regla de autor vs. la del user-agent),
   así que sin esto ocultar el Copy para Historia no ocultaba también sus herramientas de IA. */
.fp-copy-tools[hidden] { display: none; }

.fp-copy-tool-btn {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid var(--fp-violet);
  background: transparent;
  color: var(--fp-violet);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.15s ease, box-shadow 0.3s ease;
  animation: fpCopyToolGlow 3.2s ease-in-out infinite;
}

.fp-copy-tool-btn--emoji { animation-delay: 1.6s; }

.fp-copy-tool-btn:hover { transform: scale(1.08); }

.fp-copy-tool-btn:disabled { cursor: wait; opacity: 0.6; animation: none; }

.fp-copy-tool-btn--busy { animation: fpCopyToolSpin 0.9s linear infinite; }

@keyframes fpCopyToolGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(var(--fp-violet-rgb), 0); }
  50% { box-shadow: 0 0 10px 1px rgba(var(--fp-violet-rgb), 0.45); }
}

@keyframes fpCopyToolSpin {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.45; }
}

.fp-copy-tools__status {
  min-height: 16px;
  margin: 6px 0 0;
  font-size: 11.5px;
  color: var(--fp-text-muted);
}

.fp-copy-tools__status--error { color: var(--fp-danger); }

.fp-emoji-picker[hidden] { display: none; }

.fp-emoji-picker {
  position: absolute;
  top: 36px;
  right: 0;
  z-index: 20;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 2px;
  padding: 8px;
  background: var(--fp-surface);
  border: 1px solid var(--fp-border);
  border-radius: var(--fp-radius-sm);
  box-shadow: var(--fp-shadow), var(--fp-glow);
  width: 236px;
}

.fp-emoji-picker__item {
  border: none;
  background: transparent;
  font-size: 16px;
  padding: 4px;
  cursor: pointer;
  border-radius: 4px;
}

.fp-emoji-picker__item:hover { background: rgba(var(--fp-violet-rgb), 0.16); }

/* ===== Etiqueta "PUBLICADO" (TAREA 11) — solo cuando Metricool confirmó la publicación real. ===== */
.fp-badge--published {
  background: #16a34a;
  color: #fff;
  border-color: #16a34a;
  font-weight: 700;
  letter-spacing: 0.02em;
  animation: fpPublishedGlow 2.6s ease-in-out infinite;
}

@keyframes fpPublishedGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(22, 163, 74, 0.45); }
  50% { box-shadow: 0 0 12px 2px rgba(22, 163, 74, 0.6); }
}

/* ===== Panel — "centro de monitoreo" (Tanda 32) =====
   Todo escopeado bajo .fp-hub para no afectar .fp-card/.fp-section en el resto del portal,
   que reusan las mismas clases base. El efecto ambiente (scanlines, glow) es sutil a
   propósito — el objetivo es que se sienta "vivo", no que compita con los datos reales. */
.fp-hub {
  position: relative;
}

.fp-hub__scanlines {
  position: absolute;
  inset: -24px 0 0 0;
  height: 420px;
  pointer-events: none;
  z-index: -1;
  opacity: 0;
  background:
    repeating-linear-gradient(0deg, rgba(var(--fp-violet-rgb), 0.5) 0px, transparent 1px, transparent 3px),
    radial-gradient(60% 50% at 20% 0%, rgba(var(--fp-violet-rgb), 0.14), transparent 70%),
    radial-gradient(50% 45% at 85% 10%, rgba(96, 165, 250, 0.10), transparent 70%);
  mask-image: linear-gradient(to bottom, black, transparent);
}

:root[data-theme="dark"] .fp-hub__scanlines,
:root:not([data-theme="light"]) .fp-hub__scanlines {
  opacity: 0.05;
  animation: fpHubScan 9s linear infinite;
}

@keyframes fpHubScan {
  0% { background-position: 0 0, 0 0, 0 0; }
  100% { background-position: 0 40px, 0 0, 0 0; }
}

.fp-hub__title {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.fp-hub__live {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid rgba(var(--fp-violet-rgb), 0.3);
  background: rgba(var(--fp-violet-rgb), 0.08);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--fp-violet);
  white-space: nowrap;
}

.fp-hub__live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--fp-success);
  box-shadow: 0 0 0 3px rgba(47, 224, 168, 0.18);
  animation: fpHubLivePulse 1.8s ease-in-out infinite;
}

@keyframes fpHubLivePulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.55; transform: scale(0.82); }
}

.fp-hub__title-actions {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.fp-hub__cron-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 14px 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(var(--fp-info-rgb), 0.35);
  background: rgba(var(--fp-info-rgb), 0.1);
  color: var(--fp-info);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
  white-space: nowrap;
}

.fp-hub__cron-btn:hover:not(:disabled) {
  background: rgba(var(--fp-info-rgb), 0.18);
  border-color: rgba(var(--fp-info-rgb), 0.55);
}

.fp-hub__cron-btn:active:not(:disabled) { transform: scale(0.97); }

.fp-hub__cron-btn:disabled {
  opacity: 0.75;
  cursor: default;
}

.fp-hub__cron-icon {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}

/* Botón manual para abrir la Planilla de trabajos desde el Panel — spec: mismo lenguaje visual
   que el resto de estos botones de la cabecera, pero sin relleno (solo trazo), para no competir
   con el CTA principal ("Actualizar ahora"). Da una forma de encontrar la planilla a mano si se
   omitió el aviso de las 14:00 y se resolvió lo urgente antes de que vuelva a aparecer solo. */
.fp-hub__print-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 14px 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--fp-border);
  background: transparent;
  color: var(--fp-text-muted);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
  white-space: nowrap;
}
.fp-hub__print-btn:hover { border-color: var(--fp-violet); color: var(--fp-violet); }
.fp-hub__print-btn svg { width: 15px; height: 15px; flex-shrink: 0; }

.fp-hub__cron-btn--running .fp-hub__cron-icon {
  animation: fpCronSpin 1s linear infinite;
}

@keyframes fpCronSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.fp-hub__cron-result {
  margin-top: 10px;
  padding: 10px 14px;
  border-radius: var(--fp-radius-md);
  border: 1px solid var(--fp-border);
  background: var(--fp-surface-2);
  font-size: 12.5px;
  line-height: 1.6;
}

.fp-hub__cron-result__line {
  display: flex;
  align-items: baseline;
  gap: 7px;
}

.fp-hub__cron-result__line + .fp-hub__cron-result__line { margin-top: 3px; }

.fp-hub__cron-result__badge {
  flex-shrink: 0;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.fp-hub__cron-result__badge--ok { color: var(--fp-success); }
.fp-hub__cron-result__badge--warning { color: var(--fp-mustard); }
.fp-hub__cron-result__badge--error { color: var(--fp-danger); }

.fp-hub__kpis { margin-top: 18px; }

.fp-hub-card {
  position: relative;
  overflow: hidden;
}

:root[data-theme="dark"] .fp-hub-card,
:root:not([data-theme="light"]) .fp-hub-card {
  background: linear-gradient(160deg, rgba(var(--fp-violet-rgb), 0.07), var(--fp-surface));
  border-color: rgba(var(--fp-violet-rgb), 0.22);
}

/* Grilla en pares: cada fila junta dos tarjetas elegidas a propósito por tener una altura
   parecida (ver el orden en dashboard.php) — así ninguna fila queda con una diferencia grande
   entre sus dos tarjetas. align-self:start (más abajo) evita que la más chica de cada par se
   estire igual que la más alta y le quede un hueco vacío. La tarjeta que no tiene una pareja de
   tamaño similar (ej. "Estado del pipeline", con varias filas de barras) va sola, a todo el
   ancho, en vez de forzarla a compartir fila con algo mucho más chico. */
.fp-hub-charts {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

@media (max-width: 860px) {
  .fp-hub-charts { grid-template-columns: 1fr; }
}

.fp-hub-chart-card {
  border: 1px solid var(--fp-border);
  border-radius: var(--fp-radius, 12px);
  background: var(--fp-surface);
  padding: 16px 18px 18px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: box-shadow 0.25s ease, border-color 0.25s ease;
  align-self: start;
}

:root[data-theme="dark"] .fp-hub-chart-card,
:root:not([data-theme="light"]) .fp-hub-chart-card {
  background: linear-gradient(165deg, rgba(255, 255, 255, 0.025), var(--fp-surface) 55%);
}

.fp-hub-chart-card__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.fp-hub-chart-card__title {
  font-size: 13px;
  font-weight: 600;
  color: var(--fp-text);
}

.fp-hub-chart-card__value {
  font-size: 22px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.fp-hub-chart-card__sub {
  font-size: 11px;
  color: var(--fp-text-muted);
  margin-bottom: 6px;
}

/* "Publicaciones por plataforma" + "por tipo" — mismo contenedor, uno al lado del otro. */
.fp-hub-chart-card--full { grid-column: 1 / -1; }
.fp-hub-chart-card__split { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; flex: 1; }
.fp-hub-chart-card__split-col { display: flex; flex-direction: column; gap: 4px; min-width: 0; justify-content: center; }
@media (max-width: 640px) {
  .fp-hub-chart-card__split { grid-template-columns: 1fr; gap: 24px; }
}

/* "Actividad del equipo" y el combinado de tortas comparten fila — spec: mismo alto exacto entre
   las dos (no solo "parecido"). Se anula el align-self:start general (que las deja en su alto
   natural) para que estiren igual que el vecino más alto de la fila, y lo que sobre de espacio
   se reparte centrado en el eje Y (contenido) y en el eje X (gráficos angostos, ej. las tortas). */
.fp-hub-chart-card--equal-height {
  align-self: stretch;
  justify-content: center;
}
.fp-hub-chart-card--equal-height .fp-hub-chart-card__split { align-items: center; }

/* Columna derecha de la sección 5 — "Carga de trabajo" + "Próximos por tipo" apiladas, cuya suma
   (incluida esta separación de 16px) tiene que igualar el alto de "Próximas publicaciones". Sin
   align-self propio: hereda el stretch por defecto de la grilla, así iguala al vecino alto de la
   fila; cada tarjeta interna reparte esa altura en partes iguales (flex:1) y centra su contenido. */
.fp-hub-chart-stack {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.fp-hub-chart-stack .fp-hub-chart-card {
  align-self: stretch;
  flex: 1;
  justify-content: center;
}

.fp-count-gauges {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  flex: 1;
}
.fp-count-gauge { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.fp-count-gauge__label { font-size: 11px; color: var(--fp-text-muted); text-align: center; }

.fp-hub-chart-card__legend {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 8px;
}

.fp-hub-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: var(--fp-text-muted);
}

.fp-hub-legend-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}

.fp-hub-chart-card--success .fp-hub-chart-card__value { color: var(--fp-success); }
.fp-hub-chart-card--violet .fp-hub-chart-card__value { color: var(--fp-violet); }
.fp-hub-chart-card--mustard .fp-hub-chart-card__value { color: var(--fp-mustard); }
.fp-hub-chart-card--info .fp-hub-chart-card__value { color: var(--fp-info); }

.fp-hub-chart-card--success:hover { border-color: var(--fp-success); box-shadow: 0 0 26px -14px var(--fp-success); }
.fp-hub-chart-card--violet:hover { border-color: var(--fp-violet); box-shadow: 0 0 26px -14px var(--fp-violet); }
.fp-hub-chart-card--mustard:hover { border-color: var(--fp-mustard); box-shadow: 0 0 26px -14px var(--fp-mustard); }
.fp-hub-chart-card--info:hover { border-color: var(--fp-info); box-shadow: 0 0 26px -14px var(--fp-info); }

.fp-sparkline-empty { font-size: 12.5px; color: var(--fp-text-muted); margin: 18px 0; }

/* Barras horizontales del embudo de pipeline (snapshot categórico, no serie de tiempo). */
.fp-pipeline-bars {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin-top: 4px;
}

.fp-pipeline-bar {
  display: grid;
  grid-template-columns: 84px 1fr 26px;
  align-items: center;
  gap: 8px;
}

.fp-pipeline-bar__label {
  font-size: 10.5px;
  color: var(--fp-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fp-pipeline-bar__track {
  height: 7px;
  border-radius: 999px;
  background: var(--fp-surface-2);
  overflow: hidden;
}

.fp-pipeline-bar__fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  transition: width 0.4s ease;
}

.fp-pipeline-bar__value {
  font-size: 11px;
  font-weight: 600;
  color: var(--fp-text);
  text-align: right;
}

/* ===== Panel — Centro de Control, Fase B =====
   Extiende .fp-hub sin tocar nada de lo anterior: banner de salud operativa (ancho completo,
   arriba de todo), franja de alertas, anillo multi-categoría (donut) para distribución de
   tipo/plataforma, lista de vencidas y mini-agenda. Mismo lenguaje visual restringido de la
   Tanda 32 (glow sutil, sin colores nuevos — reusa --fp-success/--fp-mustard/--fp-danger). */

.fp-hub__health {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 18px 22px;
  border-radius: var(--fp-radius-lg);
  border: 1px solid var(--fp-border);
  background: var(--fp-surface);
  margin-top: 16px;
}

.fp-hub__health-gauge {
  flex-shrink: 0;
}

.fp-hub__health-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.fp-hub__health-title {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--fp-text-muted);
  font-weight: 600;
}

.fp-hub__health-status {
  font-size: 18px;
  font-weight: 700;
}

.fp-hub__health-detail {
  font-size: 12.5px;
  color: var(--fp-text-muted);
}

.fp-hub__alerts-strip {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 16px;
}

.fp-hub-alert {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: var(--fp-radius-sm);
  border: 1px solid var(--fp-border);
  background: var(--fp-surface-2);
  font-size: 13px;
}

.fp-hub-alert__dot {
  width: 8px;
  height: 8px;
  min-width: 8px;
  border-radius: 50%;
}

.fp-hub-alert--critico .fp-hub-alert__dot { background: var(--fp-danger); box-shadow: 0 0 8px var(--fp-danger); }
.fp-hub-alert--atencion .fp-hub-alert__dot { background: var(--fp-mustard); box-shadow: 0 0 8px var(--fp-mustard); }

.fp-hub-alert a { color: var(--fp-violet); text-decoration: none; }
.fp-hub-alert a:hover { text-decoration: underline; }

.fp-hub-donut {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.fp-hub-donut__legend {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.fp-hub-overdue-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.fp-hub-overdue-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border-radius: var(--fp-radius-sm);
  border: 1px solid var(--fp-border);
  background: var(--fp-surface-2);
  font-size: 13px;
  text-decoration: none;
  color: var(--fp-text);
  transition: border-color 0.15s ease;
}

.fp-hub-overdue-item:hover { border-color: var(--fp-danger); }

.fp-hub-overdue-item__delay {
  color: var(--fp-danger);
  font-weight: 600;
  font-size: 12px;
  white-space: nowrap;
}

.fp-hub-agenda {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.fp-hub-agenda-item {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: 13px;
  padding: 6px 0;
  border-bottom: 1px solid var(--fp-border);
}

.fp-hub-agenda-item:last-child { border-bottom: none; }

.fp-hub-agenda-item__time {
  font-weight: 600;
  color: var(--fp-violet);
  min-width: 46px;
}

/* ===== Widget "Reportar un bug o una sugerencia" (Tanda 33) — bug=violeta, sugerencia=verde ===== */
.fp-report-widget {
  border: 1px solid var(--fp-border);
  border-radius: var(--fp-radius, 12px);
  background: var(--fp-surface);
  padding: 18px 20px 20px;
}

.fp-report-widget__tabs {
  display: inline-flex;
  gap: 4px;
  padding: 3px;
  border-radius: 999px;
  background: var(--fp-surface-2);
  margin-bottom: 16px;
}

.fp-report-tab {
  border: none;
  background: transparent;
  padding: 6px 16px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--fp-text-muted);
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.fp-report-tab--bug.is-active { background: rgba(var(--fp-violet-rgb), 0.18); color: var(--fp-violet); }
.fp-report-tab--sugerencia.is-active { background: rgba(47, 224, 168, 0.16); color: var(--fp-success); }

.fp-report-widget__headline {
  font-size: 17px;
  font-weight: 700;
  margin: 0 0 16px;
  min-height: 1.4em;
  display: flex;
  align-items: center;
}

.fp-report-widget__headline--bug {
  color: var(--fp-violet);
  text-shadow: 0 0 16px rgba(var(--fp-violet-rgb), 0.5);
}

.fp-report-widget__headline--sugerencia {
  color: var(--fp-success);
  text-shadow: 0 0 16px rgba(47, 224, 168, 0.5);
}

.fp-report-cursor {
  display: inline-block;
  width: 2px;
  height: 1em;
  margin-left: 2px;
  background: currentColor;
  opacity: 0;
}

.fp-report-cursor--typing {
  opacity: 1;
  animation: fpReportCursorBlink 0.8s steps(1) infinite;
}

@keyframes fpReportCursorBlink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

.fp-report-submit { width: auto; padding: 10px 22px; }

.fp-report-submit--bug {
  background: var(--fp-gradient-cta);
}
.fp-report-submit--bug:hover {
  box-shadow: 0 6px 24px -6px rgba(var(--fp-violet-rgb), 0.5);
}

.fp-report-submit--sugerencia {
  background: linear-gradient(135deg, #1fae82, #2fe0a8);
}
.fp-report-submit--sugerencia:hover {
  box-shadow: 0 6px 24px -6px rgba(47, 224, 168, 0.55);
}

/* ---------- FOCUS Creative Engine (galería) ---------- */

.fp-creative-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
}

.fp-creative-card { padding: 0; overflow: hidden; }

.fp-creative-card__thumb {
  display: block;
  width: 100%;
  background: var(--fp-surface-2);
  overflow: hidden;
}
.fp-creative-card__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fp-creative-card__thumb-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-height: 120px;
  color: var(--fp-text-muted);
  font-size: 12px;
}

.fp-creative-card__body { padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; }

/* ---------- FOCUS Creative Engine (editor) ---------- */

/* ======================================================================
   FOCUS Creative Engine — layout tipo Illustrator/Photoshop (Tanda 65):
   barra superior compacta (solo acciones globales) + riel de herramientas
   de creación a la izquierda + lienzo + panel derecho acoplable con
   pestañas Propiedades/Capas. Reemplaza la barra plana de ~40 botones de
   las tandas anteriores — decisión tomada a partir de feedback directo
   ("la distribución de las herramientas no es intuitiva"), usando como
   referencia la organización estándar de Illustrator/Photoshop (paneles
   acoplables por función, no todo en una sola fila).
   ====================================================================== */

.fpce-root { display: flex; flex-direction: column; gap: 10px; }

.fpce-title-input {
  padding: 8px 10px;
  border-radius: var(--fp-radius-sm);
  border: 1px solid var(--fp-border);
  background: var(--fp-surface-2);
  color: var(--fp-text);
  font-size: 13px;
  min-width: 160px;
  flex: 1 1 180px;
}

.fpce-template-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: var(--fp-text-muted);
  white-space: nowrap;
  cursor: pointer;
}

.fpce-hint { margin: 0; font-size: 11.5px; color: var(--fp-text-muted); }
.fpce-empty-hint { margin: 0; font-size: 12px; color: var(--fp-text-muted); }

/* ---------- Barra superior: solo acciones globales (deshacer, zoom, guardar) ---------- */
.fpce-topbar {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  background: var(--fp-surface);
  border: 1px solid var(--fp-border);
  border-radius: var(--fp-radius-md);
  padding: 8px 12px;
}
/* [hidden] pierde contra reglas de autor que fijan display (display:flex/grid abajo) — sin este
   override puntual por selector, el atributo hidden queda sin efecto y el elemento se ve siempre
   (mismo patrón de bug ya resuelto antes para .fp-toast/.fp-splash/.fp-emoji-picker). */
.fpce-topbar__group[hidden] { display: none; }
.fpce-shapes-flyout[hidden] { display: none; }
.fpce-dock__panel[hidden] { display: none; }
.fpce-topbar__spacer { flex: 1 1 auto; }
.fpce-topbar__divider { width: 1px; align-self: stretch; background: var(--fp-border); margin: 0 4px; }
.fpce-topbar__group { display: flex; align-items: center; gap: 4px; }

.fpce-topbar__group button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border-radius: var(--fp-radius-sm);
  border: 1px solid var(--fp-border);
  background: var(--fp-surface-2);
  color: var(--fp-text);
  font-size: 14.5px;
  cursor: pointer;
}
.fpce-topbar__group button:hover:not(:disabled) { background: var(--fp-surface-3, var(--fp-border)); }
.fpce-topbar__group button:disabled { opacity: 0.4; cursor: default; }
.fpce-topbar__btn--text { width: auto; padding: 0 10px; font-size: 11.5px; white-space: nowrap; }

.fpce-toolbar-btn--active {
  background: var(--fp-violet) !important;
  border-color: var(--fp-violet) !important;
  color: #fff !important;
}

.fpce-save-status { font-size: 12px; color: var(--fp-text-muted); white-space: nowrap; }

.fpce-zoom-label {
  font-size: 11.5px;
  color: var(--fp-text-muted);
  min-width: 36px;
  text-align: center;
  user-select: none;
}

/* ---------- Área de trabajo: riel | lienzo | panel derecho ---------- */
.fpce-workspace {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) 280px;
  gap: 12px;
  align-items: start;
}

.fpce-tool-rail {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  background: var(--fp-surface);
  border: 1px solid var(--fp-border);
  border-radius: var(--fp-radius-md);
  padding: 10px 6px;
  position: sticky;
  top: 12px;
}
.fpce-rail-divider { width: 60%; height: 1px; background: var(--fp-border); margin: 4px 0; }
.fpce-rail-flyout-wrap { position: relative; }

.fpce-rail-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--fp-radius-sm);
  border: 1px solid transparent;
  background: none;
  color: var(--fp-text);
  font-size: 17px;
  cursor: pointer;
}
.fpce-rail-btn:hover { background: var(--fp-surface-2); border-color: var(--fp-border); }
.fpce-rail-btn svg,
.fpce-shapes-flyout button svg { width: 19px; height: 19px; display: block; flex-shrink: 0; }

.fpce-shapes-flyout {
  position: absolute;
  left: calc(100% + 8px);
  top: 0;
  display: grid;
  grid-template-columns: repeat(3, 36px);
  gap: 6px;
  background: var(--fp-surface);
  border: 1px solid var(--fp-border);
  border-radius: var(--fp-radius-md);
  padding: 8px;
  box-shadow: var(--fp-shadow);
  z-index: 30;
}
.fpce-shapes-flyout button {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--fp-radius-sm);
  border: 1px solid var(--fp-border);
  background: var(--fp-surface-2);
  color: var(--fp-text);
  font-size: 15px;
  cursor: pointer;
}
.fpce-shapes-flyout button:hover { background: var(--fp-surface-3, var(--fp-border)); }

.fpce-upload-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 7px 10px;
  border-radius: var(--fp-radius-sm);
  border: 1px solid var(--fp-border);
  background: var(--fp-surface-2);
  color: var(--fp-text);
  font-size: 12.5px;
  cursor: pointer;
  white-space: nowrap;
}
.fpce-upload-btn:hover { background: var(--fp-surface-3, var(--fp-border)); }

.fpce-canvas-wrap {
  background: repeating-conic-gradient(#e5e5e5 0% 25%, #f5f5f5 0% 50%) 50% / 20px 20px;
  border: 1px solid var(--fp-border);
  border-radius: var(--fp-radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  overflow: auto;
  min-height: 400px;
}

#fpceCanvas {
  /* El tamaño CSS real (width/height en px) lo controla el zoom real vía JS (applyZoom()) —
     nunca max-width/max-height, que competirían con el zoom explícito y lo re-cachearían sin
     que el usuario lo pidiera. El zoom nunca toca canvas.width/height (los píxeles reales del
     proyecto), solo el tamaño CSS con el que se muestra. */
  flex-shrink: 0;
  background: #fff;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.25);
  touch-action: none;
}

/* ---------- Panel derecho acoplable: Marca + pestañas Propiedades/Capas ---------- */
.fpce-dock {
  background: var(--fp-surface);
  border: 1px solid var(--fp-border);
  border-radius: var(--fp-radius-md);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: calc(100vh - 200px);
  overflow-y: auto;
}

.fpce-dock__label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--fp-text-muted); }

.fpce-brand-swatches-row { display: flex; align-items: center; gap: 10px; }
.fpce-brand-swatches { display: flex; gap: 8px; }
.fpce-brand-swatches button {
  width: 26px;
  height: 26px;
  border-radius: 7px;
  border: 1px solid var(--fp-border);
  cursor: pointer;
}

.fpce-dock__tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--fp-border); padding-bottom: 8px; }
.fpce-dock__tab {
  flex: 1;
  padding: 7px 8px;
  border-radius: var(--fp-radius-sm);
  border: 1px solid transparent;
  background: none;
  color: var(--fp-text-muted);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
}
.fpce-dock__tab:hover { color: var(--fp-text); }
.fpce-dock__tab--active { background: var(--fp-surface-2); border-color: var(--fp-border); color: var(--fp-text); }

.fpce-dock__panel { display: flex; flex-direction: column; gap: 10px; }

.fpce-layer-actions,
.fpce-align-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--fp-border);
}
.fpce-layer-actions button,
.fpce-align-actions button {
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--fp-radius-sm);
  border: 1px solid var(--fp-border);
  background: var(--fp-surface-2);
  color: var(--fp-text);
  font-size: 13px;
  cursor: pointer;
}
.fpce-layer-actions button:hover,
.fpce-align-actions button:hover { background: var(--fp-surface-3, var(--fp-border)); }
.fpce-align-actions button#fpceDistributeH,
.fpce-align-actions button#fpceDistributeV { width: auto; padding: 0 8px; }

.fpce-layer-list { display: flex; flex-direction: column; gap: 4px; max-height: 420px; overflow-y: auto; }

.fpce-layer-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 6px 8px;
  border-radius: var(--fp-radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  font-size: 12px;
}
.fpce-layer-row:hover { background: var(--fp-surface-2); }
.fpce-layer-row--active { border-color: var(--fp-violet); background: var(--fp-surface-2); }
.fpce-layer-row__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fpce-layer-row__actions { display: flex; gap: 4px; flex-shrink: 0; }
.fpce-layer-row__actions button { background: none; border: none; cursor: pointer; font-size: 12px; padding: 2px; }

.fpce-props-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 8px; min-width: 0; }
.fpce-props-grid label,
#fpceProperties label {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 11px;
  color: var(--fp-text-muted);
  min-width: 0;
}
#fpceProperties input,
#fpceProperties select,
#fpceProperties textarea {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  padding: 6px 6px;
  border-radius: var(--fp-radius-sm);
  border: 1px solid var(--fp-border);
  background: var(--fp-surface-2);
  color: var(--fp-text);
  font-size: 12.5px;
  font-family: inherit;
}
.fpce-checkbox-label {
  flex-direction: row !important;
  align-items: center;
  gap: 6px !important;
}
.fpce-checkbox-label input[type="checkbox"] { width: auto; padding: 0; }
#fpceProperties > label { margin-bottom: 8px; display: flex; }

/* ---------- Chips de colaborador recurrente (ficha de tarea) ---------- */

/* Desplegable que contiene los chips — mismo contenedor que Equipamiento/Responsable(s)
   (fp-icon-select__btn/__list), para que una lista larga de colaboradores frecuentes no rompa la
   estética del formulario mostrando todos los chips sueltos de una. */
.fp-collab-chips-dropdown { position: relative; margin-bottom: 8px; }
.fp-collab-chips-dropdown .fp-icon-select__list { min-width: 260px; max-width: 340px; }
.fp-collab-chips-dropdown .fp-collab-chips { margin-bottom: 0; }

.fp-collab-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }

.fp-collab-chip {
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid var(--fp-border);
  background: var(--fp-surface-2);
  color: var(--fp-text-muted);
  font-size: 12px;
  cursor: pointer;
}
.fp-collab-chip:hover { color: var(--fp-text); border-color: var(--fp-violet); }
.fp-collab-chip--active {
  background: var(--fp-violet);
  border-color: var(--fp-violet);
  color: #fff;
}

/* ---------- Creative Engine: modales de tamaño (nuevo proyecto / cambiar tamaño) ---------- */

.fpce-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.fpce-modal {
  background: var(--fp-surface);
  border: 1px solid var(--fp-border);
  border-radius: var(--fp-radius-md);
  box-shadow: var(--fp-shadow), var(--fp-glow);
  padding: 24px;
  width: 100%;
  max-width: 560px;
  max-height: 90vh;
  overflow-y: auto;
}
.fpce-modal h2 { margin: 0 0 6px; font-size: 18px; }
.fpce-modal h3 { margin: 0 0 8px; font-size: 13px; color: var(--fp-text-muted); }

.fpce-format-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 16px 0; }
.fpce-format-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 12px 8px;
  border-radius: var(--fp-radius-sm);
  border: 2px solid var(--fp-border);
  background: var(--fp-surface-2);
  color: var(--fp-text);
  cursor: pointer;
  text-align: center;
}
.fpce-format-card strong { font-size: 13px; }
.fpce-format-card span { font-size: 11px; color: var(--fp-text-muted); }
.fpce-format-card small { font-size: 10px; color: var(--fp-text-muted); }
.fpce-format-card--active { border-color: var(--fp-violet); background: rgba(var(--fp-violet-rgb), 0.12); }

.fpce-custom-size-row {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.fpce-custom-size-row label {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 11px;
  color: var(--fp-text-muted);
}
.fpce-custom-size-row input[type="number"] {
  padding: 8px 10px;
  border-radius: var(--fp-radius-sm);
  border: 1px solid var(--fp-border);
  background: var(--fp-surface-2);
  color: var(--fp-text);
  font-size: 13px;
  width: 100px;
}
.fpce-custom-size-row button#fpceSizeSwap,
.fpce-custom-size-row button#fpceResizeSwap {
  padding: 8px 10px;
  border-radius: var(--fp-radius-sm);
  border: 1px solid var(--fp-border);
  background: var(--fp-surface-2);
  color: var(--fp-text);
  cursor: pointer;
  align-self: center;
}
.fpce-size-preview {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed var(--fp-border);
  border-radius: 4px;
}
.fpce-size-preview div { background: var(--fp-violet); }
.fpce-size-error { color: var(--fp-danger); font-size: 12.5px; margin: 4px 0 0; }

.fpce-strategy-option {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  font-size: 12.5px;
  color: var(--fp-text);
  padding: 8px;
  border-radius: var(--fp-radius-sm);
  cursor: pointer;
}
.fpce-strategy-option:hover { background: var(--fp-surface-2); }
.fpce-strategy-option input { margin-top: 3px; }

.fpce-modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }

.fpce-layer-row[draggable="true"] { cursor: grab; }
.fpce-layer-row--dragover { border-top: 2px solid var(--fp-violet); }
.fpce-layer-row__name-input {
  flex: 1;
  background: var(--fp-surface-2);
  border: 1px solid var(--fp-violet);
  border-radius: 4px;
  color: var(--fp-text);
  font-size: 12px;
  padding: 2px 4px;
}
.fpce-layer-row__group-badge {
  font-size: 9px;
  color: var(--fp-violet);
  border: 1px solid var(--fp-violet);
  border-radius: 3px;
  padding: 0 3px;
  margin-right: 4px;
}
.fpce-layer-row__ref-badge { color: var(--fp-info); border-color: var(--fp-info); }

/* ---- Importación de referencia + reconstrucción ---- */
.fpce-reference-progress {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 18px 4px;
  font-size: 13px;
  color: var(--fp-text);
}
.fpce-reference-spinner {
  width: 18px;
  height: 18px;
  border: 2px solid rgba(var(--fp-violet-rgb), 0.25);
  border-top-color: var(--fp-violet);
  border-radius: 50%;
  flex-shrink: 0;
  animation: fpCronSpin 0.9s linear infinite;
}
.fpce-reference-progress-bar {
  width: 100%;
  height: 6px;
  border-radius: 999px;
  background: var(--fp-surface-2);
  overflow: hidden;
  margin-bottom: 4px;
}
.fpce-reference-progress-bar__fill {
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: var(--fp-violet);
  transition: width 0.4s ease;
}
.fpce-reference-warnings {
  background: rgba(var(--fp-info-rgb), 0.08);
  border: 1px solid rgba(var(--fp-info-rgb), 0.3);
  border-radius: var(--fp-radius-sm);
  padding: 8px 10px;
  font-size: 12px;
  color: var(--fp-text);
  margin-bottom: 10px;
}
.fpce-reference-layers-list {
  max-height: 280px;
  overflow-y: auto;
  border: 1px solid var(--fp-border);
  border-radius: var(--fp-radius-sm);
  padding: 4px;
}
.fpce-reference-layer-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 7px 8px;
  font-size: 12.5px;
  border-bottom: 1px solid var(--fp-border);
}
.fpce-reference-layer-row:last-child { border-bottom: none; }
.fpce-reference-layer-row__snippet {
  width: 100%;
  color: var(--fp-text-muted);
  font-size: 11.5px;
  font-style: italic;
}
.fpce-reference-note {
  font-size: 11px;
  color: var(--fp-text-muted);
  margin: 10px 2px 0;
}
.fpce-confidence-badge {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 1px 7px;
  border-radius: 999px;
}
.fpce-confidence-badge--alta { color: var(--fp-success); background: var(--fp-success-bg); }
.fpce-confidence-badge--media { color: var(--fp-mustard); background: rgba(166, 121, 10, 0.12); }
.fpce-confidence-badge--baja { color: var(--fp-danger); background: var(--fp-danger-bg); }

@media (max-width: 640px) {
  .fpce-format-cards { grid-template-columns: repeat(2, 1fr); }
}

/* El editor por capas (drag/resize/rotate de precisión) no está pensado para pantallas
   táctiles chicas — en mobile se apila en una sola columna para que sea al menos usable
   (agregar texto/imagen, guardar, adjuntar), pero la edición fina se recomienda en desktop. */
@media (max-width: 860px) {
  .fpce-workspace { grid-template-columns: 1fr; }
  .fpce-tool-rail {
    flex-direction: row;
    justify-content: flex-start;
    overflow-x: auto;
    width: 100%;
    position: static;
  }
  .fpce-rail-divider { width: 1px; height: 60%; margin: 0 4px; }
  .fpce-shapes-flyout { left: 0; top: calc(100% + 8px); }
  .fpce-canvas-wrap { order: -1; max-height: 50vh; }
  .fpce-dock { max-height: none; }
}