/* Fuentes de marca autohospedadas (Fraunces display + Inter cuerpo), CSP-safe. */
/* latin-ext */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 340 680;
  font-display: swap;
  src: url(/fonts/fraunces-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 340 680;
  font-display: swap;
  src: url(/fonts/fraunces-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 360 680;
  font-display: swap;
  src: url(/fonts/inter-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 360 680;
  font-display: swap;
  src: url(/fonts/inter-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* T38 · public/styles.css — panel operativo Zenith.
   Dark sobrio, sin frameworks ni fuentes externas (CSP 'self', SPEC §7.5).
   Badges de estado según la máquina de estados de §4.13. */

:root {
  /* Marca Zenith (zenith-webs.com): morado + teal sobre blanco, premium. */
  --bg: #f6f7fb;            /* página: gris muy claro y frío */
  --bg-raised: #ffffff;     /* tarjetas / sidebar / topbar */
  --bg-hover: #eef1f8;      /* hover / secciones sutiles */
  --border: #e6e9f2;
  --border-strong: #d7dbe8;
  --text: #0b0b18;          /* casi negro azulado */
  --text-muted: #6b6b83;
  --accent: #b845ff;        /* morado de marca */
  --accent-strong: #9a24e8; /* morado oscuro (texto/énfasis sobre blanco) */
  --accent-ink: #ffffff;    /* texto sobre el botón de acento */
  --accent-soft: #f4e9ff;   /* tinte morado claro */
  --teal: #00c9b5;          /* teal secundario */

  --danger: #e0484d;
  --ok: #16995a;
  --warn: #9a6a08;
  --info: #3d63dd;
  --orange: #cf6a2a;
  --violet: #8b3fe0;
  --grey: #8a8aa0;

  --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.05), 0 1px 3px rgba(16, 24, 40, 0.05);
  --shadow-md: 0 8px 24px rgba(24, 20, 60, 0.09);
  --shadow-lg: 0 24px 60px rgba(24, 20, 60, 0.18);

  --radius: 12px;
  --sidebar-w: 224px;

  --sans: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --serif: 'Fraunces', Georgia, "Times New Roman", serif;
}

* { box-sizing: border-box; }

/* El atributo `hidden` debe ganar SIEMPRE, incluso a clases que fijan display
   (p. ej. .auth-form { display:flex }). Sin esto, un form con [hidden] seguiría
   visible porque .auth-form (autor) vence a la regla [hidden] del user-agent. */
[hidden] { display: none !important; }

html, body { margin: 0; padding: 0; }

body {
  background: var(--bg);
  color: var(--text);
  font: 15px/1.55 var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Títulos con la serif de marca (Fraunces) para el toque editorial premium. */
h1 { font-family: var(--serif); font-size: 23px; font-weight: 600; letter-spacing: -0.015em; margin: 0; }
h2 { font-size: 15px; font-weight: 620; letter-spacing: -0.004em; margin: 0 0 10px; }
p { margin: 0; }

a { color: var(--accent-strong); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ---------- layout ---------- */

.layout { min-height: 100vh; }

.sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  width: var(--sidebar-w);
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding: 20px 12px;
  background: var(--bg-raised);
  border-right: 1px solid var(--border);
}

.brand {
  margin: 0;
  padding: 0 10px;
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.brand::after { content: "."; color: var(--accent); }

.nav { display: flex; flex-direction: column; gap: 2px; }

.nav a {
  display: block;
  padding: 8px 10px;
  border-radius: 8px;
  color: var(--text-muted);
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}

.nav a:hover { background: var(--bg-hover); color: var(--text); }

.nav a[aria-current="page"] {
  background: var(--bg-hover);
  color: var(--accent-strong);
}

.content {
  margin-left: var(--sidebar-w);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 24px;
  background: rgba(255, 255, 255, 0.8);
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(8px);
}

.topbar-label { color: var(--text-muted); font-size: 13px; }
.topbar-spacer { flex: 1; }

main#view {
  width: 100%;
  max-width: 1200px;
  padding: 24px;
}

.view-header { margin-bottom: 20px; }
.view-header .sub { margin-top: 4px; color: var(--text-muted); font-size: 13.5px; }

/* ---------- controles ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 7px 14px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: var(--bg-hover);
  color: var(--text);
  font: inherit;
  font-size: 14px;
  font-weight: 550;
  cursor: pointer;
}

.btn { border-color: var(--border); }
.btn:hover { filter: brightness(0.975); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

.btn-primary { background: var(--accent); color: var(--accent-ink); border-color: transparent; box-shadow: 0 1px 2px rgba(154, 36, 232, 0.25); }
.btn-primary:hover { background: var(--accent-strong); filter: none; }
.btn-danger { background: var(--danger); color: #fff; border-color: transparent; }
.btn-ghost { background: transparent; border-color: var(--border); color: var(--text-muted); }
.btn-ghost:hover { color: var(--text); background: var(--bg-hover); filter: none; }
.btn-block { width: 100%; }
.btn-sm { padding: 5px 10px; font-size: 13px; }

input, select, textarea {
  padding: 9px 11px;
  border: 1px solid var(--border-strong);
  border-radius: 9px;
  background: var(--bg-raised);
  color: var(--text);
  font: inherit;
  font-size: 14px;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

input::placeholder, textarea::placeholder { color: var(--text-muted); }

label { font-size: 13.5px; font-weight: 550; color: var(--text-muted); }

/* ---------- cards y tablas ---------- */

.card {
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 20px;
  box-shadow: var(--shadow-sm);
}

.placeholder {
  border-style: dashed;
  color: var(--text-muted);
  text-align: center;
  padding: 48px 20px;
}

.table { width: 100%; border-collapse: collapse; font-size: 14px; }

.table th {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-align: left;
  text-transform: uppercase;
}

.table td { padding: 10px 12px; border-bottom: 1px solid var(--border); }
.table tbody tr:hover { background: var(--bg-hover); }

/* ---------- badges de estado (§4.13) ---------- */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.badge::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

/* gris: en cocina */
.badge--generando { color: var(--grey); background: rgba(174, 182, 197, 0.14); }

/* ámbar: espera acción del operador */
.badge--pendiente_aprobacion { color: var(--warn); background: rgba(246, 196, 83, 0.14); }

/* azul: programado */
.badge--programado { color: var(--info); background: rgba(110, 168, 254, 0.14); }

/* morado: en curso */
.badge--publicando,
.badge--creando,
.badge--activando { color: var(--accent-strong); background: rgba(184, 69, 255, 0.12); }

/* verde: terminado bien */
.badge--publicado,
.badge--aprobado,
.badge--creado,
.badge--activado,
.badge--lista,
.badge--activo { color: var(--ok); background: rgba(52, 201, 142, 0.14); }

/* rojo: roto, pide acción */
.badge--fallido,
.badge--generacion_fallida,
.badge--fallida,
.badge--bloqueado_token { color: var(--danger); background: rgba(240, 85, 107, 0.14); }

/* naranja: a medias */
.badge--publicado_parcial,
.badge--activacion_parcial { color: var(--orange); background: rgba(242, 140, 74, 0.14); }

/* violeta: en revisión de Meta (PENDING_REVIEW / IN_PROCESS) */
.badge--en_revision { color: var(--violet); background: rgba(167, 139, 250, 0.14); }

/* gris apagado: estados muertos */
.badge--rechazado,
.badge--archivada,
.badge--archivado,
.badge--cancelado,
.badge--pausado,
.badge--revocada { color: var(--text-muted); background: rgba(151, 160, 179, 0.10); }

/* estados de conexión Meta */
.badge--activa { color: var(--ok); background: rgba(52, 201, 142, 0.14); }
.badge--permisos_incompletos { color: var(--warn); background: rgba(246, 196, 83, 0.14); }

/* ---------- conexiones Meta ---------- */
.conn-list { display: flex; flex-direction: column; gap: 12px; margin-top: 18px; max-width: 640px; }
.conn-card { display: flex; flex-direction: column; gap: 10px; }
.conn-card__top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.conn-card__meta { color: var(--text-muted); font-size: 13px; display: flex; flex-wrap: wrap; gap: 4px 14px; }
.conn-card__actions { display: flex; gap: 8px; flex-wrap: wrap; }
.conn-warn { color: var(--warn); }
.conn-danger { color: var(--danger); }
.view-actions { margin-top: 16px; }

/* ---------- cuenta ---------- */
.account-card { max-width: 560px; display: flex; flex-direction: column; gap: 12px; }
.account-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.account-row__label { color: var(--text-muted); font-size: 13.5px; width: 130px; flex: none; }
.account-danger { max-width: 560px; margin-top: 16px; border-color: rgba(240, 85, 107, 0.3); }
.account-danger h2 { color: var(--danger); }

/* ---------- toasts ---------- */

#toasts {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 100;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.toast {
  max-width: 360px;
  padding: 10px 14px;
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: 10px;
  box-shadow: var(--shadow-md);
  font-size: 14px;
}

.toast--error { border-left-color: var(--danger); }

/* ---------- modal base ---------- */

.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(20, 16, 45, 0.35);
  backdrop-filter: blur(2px);
}

.modal {
  width: 100%;
  max-width: 520px;
  padding: 22px 24px;
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
}

/* contenido de modal (step-up y confirmaciones) */
.modal h2 { margin: 0; font-size: 17px; }
.modal form { display: flex; flex-direction: column; gap: 10px; }
.modal .modal-desc { margin: 0; color: var(--text-muted); font-size: 13.5px; }
.modal input { width: 100%; }
.modal .form-error { margin: 0; }
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px; }

/* ---------- errores y avisos ---------- */

.view-error { color: var(--danger); }

.form-error {
  margin-top: 14px;
  color: var(--danger);
  font-size: 14px;
}

/* ---------- login ---------- */

body.login-page {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 20px;
}

.login-card {
  width: 100%;
  max-width: 400px;
  padding: 36px 32px;
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: var(--shadow-md);
}

.login-hint { margin-top: 6px; color: var(--text-muted); font-size: 14px; }

.login-card form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 22px;
}

/* ---------- auth público (signup / verify / reset) ---------- */

/* Reutilizan body.login-page + .login-card. Aquí solo lo específico nuevo. */

.auth-form { display: flex; flex-direction: column; gap: 14px; margin-top: 22px; }

.auth-field { display: flex; flex-direction: column; gap: 6px; }
.login-card input { width: 100%; }

.field-hint { color: var(--text-muted); font-size: 12.5px; }

.auth-links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
  font-size: 13.5px;
}
.auth-links a { color: var(--accent-strong); text-decoration: none; }
.auth-links a:hover { text-decoration: underline; }

/* Banners de resultado (neutros: anti-enumeración) */
.form-notice,
.form-success {
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 8px;
  font-size: 13.5px;
  line-height: 1.5;
}
.form-notice { background: rgba(110, 168, 254, 0.10); border: 1px solid rgba(110, 168, 254, 0.28); }
.form-success { background: rgba(52, 201, 142, 0.10); border: 1px solid rgba(52, 201, 142, 0.30); }

/* Medidor de fuerza de contraseña (solo longitud/variedad; no valida en cliente
   más que como pista — la regla real la impone el backend: ≥10). */
.pw-meter {
  height: 5px;
  margin-top: 8px;
  border-radius: 3px;
  background: var(--border);
  overflow: hidden;
}
.pw-meter__bar { height: 100%; width: 0; border-radius: 3px; transition: width 0.15s, background 0.15s; }
.pw-meter__bar[data-level="1"] { width: 33%; background: var(--danger); }
.pw-meter__bar[data-level="2"] { width: 66%; background: var(--warn); }
.pw-meter__bar[data-level="3"] { width: 100%; background: var(--ok); }

/* Contenedor del widget de Turnstile (deja sitio a su iframe ~65px) */
.turnstile-slot { margin-top: 4px; min-height: 65px; }

/* Estado de carga de una página de auth (verify-email al abrir el enlace) */
.auth-status { margin-top: 22px; color: var(--text-muted); font-size: 14px; }

/* ==========================================================================
   Capa común de formularios y layout (compartida por las vistas del dashboard).
   Las clases específicas de cada vista (kpi-*, post-*, calendar-*, angulo-*,
   salud-*, checks-*…) van más abajo, agrupadas por vista.
   ========================================================================== */

.form-section { margin-bottom: 18px; }
.form-section > h2 { margin-bottom: 4px; }

.field { display: flex; flex-direction: column; gap: 6px; }
.field > label { color: var(--text-muted); font-size: 13.5px; font-weight: 550; }
.field input, .field select, .field textarea { width: 100%; }
.field-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.field-note { color: var(--text-muted); font-size: 12.5px; }
.field-error { color: var(--danger); font-size: 12.5px; }

.grid-1 { display: grid; grid-template-columns: 1fr; gap: 14px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 640px) { .grid-2 { grid-template-columns: 1fr; } }

.form-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.row-actions,
.lifecycle-actions { display: flex; flex-wrap: wrap; gap: 8px; }

.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 16px; }

.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--bg-hover);
  color: var(--text-muted); font-size: 13px; font-weight: 550;
  cursor: pointer; white-space: nowrap;
}
.chip:hover { color: var(--text); }
.chip[aria-pressed="true"],
.chip.is-active { background: var(--accent); color: var(--accent-ink); border-color: transparent; }
.chip-x { margin-left: 2px; opacity: 0.7; cursor: pointer; }
.chip-x:hover { opacity: 1; }
.filter-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }

.check-inline { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--text); }
.check-inline input { width: auto; }

.counter { color: var(--text-muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.summary { color: var(--text-muted); font-size: 13.5px; }
.wizard-steps { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; color: var(--text-muted); font-size: 13px; }

/* alias: calendario usa la variante BEM btn--ghost */
.btn--ghost { background: transparent; border-color: var(--border); color: var(--text-muted); }
.btn--ghost:hover { color: var(--text); }

/* actividad: celda de detalle expandible en la tabla */
.detail-cell { color: var(--text-muted); font-size: 13px; white-space: pre-wrap; word-break: break-word; }

/* páginas legales (privacidad / eliminación de datos) */
.meta { color: var(--text-muted); font-size: 13px; }

/* ---------- responsive ---------- */

@media (max-width: 900px) {
  .sidebar {
    position: static;
    width: 100%;
    flex-direction: row;
    align-items: center;
    gap: 14px;
    padding: 10px 14px;
    border-right: 0;
    border-bottom: 1px solid var(--border);
    overflow-x: auto;
  }

  .nav { flex-direction: row; }
  .content { margin-left: 0; }
  main#view { padding: 16px; }
}


/* ==========================================================================
   Componentes específicos por vista (kpi/post/calendar/ads/clientes/salud).
   ========================================================================== */

/* ===== vista: home ===== */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
}

.kpi {
  display: flex;
  flex-direction: column;
  gap: 6px;
  color: var(--text);
  text-decoration: none;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.kpi:hover {
  border-color: var(--accent);
  background: var(--bg-hover);
}

.kpi:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.kpi-num {
  font-size: 34px;
  line-height: 1;
  font-weight: 700;
  color: var(--accent-strong);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

.kpi-label {
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 500;
}

.kpi-list {
  list-style: none;
  margin: 0;
  padding: 10px 0 0;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 13px;
}

.kpi-list:empty {
  display: none;
}

.kpi-list li {
  display: flex;
  align-items: center;
  gap: 10px;
}

.kpi-when {
  flex: 0 0 auto;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.kpi-who {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text);
}

@media (max-width: 640px) {
  .kpi-grid {
    grid-template-columns: 1fr;
  }
}

/* ===== vista: cola ===== */
/* ===== Vista Cola — contenedor ===== */
.cola-view {
  display: flex;
  flex-direction: column;
}

/* ===== Formulario "Nueva idea" (.idea-form es también .card) ===== */
.idea-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 640px;
  margin-bottom: 18px;
}
.idea-form > h2 { margin-bottom: 2px; }
.idea-form > .btn { align-self: flex-start; margin-top: 2px; }

.idea-prompt,
.idea-contexto {
  width: 100%;
  resize: vertical;
  line-height: 1.5;
}
.idea-prompt { min-height: 72px; }
.idea-contexto { min-height: 52px; }
.idea-targets { width: 100%; max-width: 280px; }

/* ===== Rejilla de la cola ===== */
.cola-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
  align-items: start;
}
.cola-list > .placeholder,
.cola-list > .sub {
  grid-column: 1 / -1;
}

/* ===== Tarjeta de post (.post-card es también .card) ===== */
.post-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: relative;
}

/* Zona de imagen: marco con ratio de feed social */
.post-media {
  position: relative;
  aspect-ratio: 4 / 5;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  background: var(--bg);
}
.post-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.post-media-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  font-size: 13px;
  letter-spacing: 0.01em;
}

/* Fila de badges (estado + copy + acción de copy) */
.post-badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

/* Indicador de carga sutil sobre el punto del badge de estado */
.badge-spinner::before {
  animation: cola-spinner 1.1s ease-in-out infinite;
}
@keyframes cola-spinner {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.25; transform: scale(0.7); }
}

/* Prompt de la idea (solo lectura) — bloque citado y apagado */
.post-prompt {
  margin: 0;
  padding: 10px 12px;
  border-radius: 8px;
  border-left: 2px solid var(--border);
  background: var(--bg);
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
}

/* Editor de copia (caption + hashtags + guardar) */
.post-copy {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.post-copy > .btn { align-self: flex-start; }

.post-caption {
  width: 100%;
  resize: vertical;
  min-height: 76px;
  font-size: 13.5px;
  line-height: 1.5;
}
.post-hashtags {
  width: 100%;
  font-size: 13.5px;
}
.post-caption:disabled,
.post-hashtags:disabled {
  opacity: 0.65;
  cursor: not-allowed;
}

/* Fila de acciones de estado; se oculta cuando no hay ninguna (solo lectura) */
.post-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.post-actions:empty { display: none; }
.post-actions:not(:empty) {
  margin-top: 2px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}

/* ===== Modal de programación ===== */
.slot-input {
  width: 100%;
  font-variant-numeric: tabular-nums;
}

/* ===== Responsive: una columna en móvil ===== */
@media (max-width: 640px) {
  .cola-list { grid-template-columns: 1fr; }
  .idea-form { max-width: none; }
}

/* ===== vista: calendario ===== */
/* ---- Vista Calendario ---- */
.calendar {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Barra superior de controles (bloque elevado tipo card) */
.calendar-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  padding: 12px 14px;
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

/* Navegacion anterior / hoy / siguiente */
.calendar-nav {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* Rotulo del rango (centrado, numeros alineados) */
.calendar-range {
  flex: 1;
  min-width: 160px;
  text-align: center;
  color: var(--text);
  font-size: 15px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* Conmutador semana / mes (activo = aria-pressed en acento) */
.calendar-modes {
  display: inline-flex;
  gap: 6px;
}
.calendar-modes .btn[aria-pressed="true"] {
  background: var(--accent);
  border-color: transparent;
  color: var(--accent-ink);
}

/* Nota de zona horaria del cliente */
.calendar-tz {
  margin: 0;
  color: var(--text-muted);
  font-size: 12.5px;
}

/* Rejillas (las 7 columnas y el gap los fija el JS via CSSOM) */
.calendar-grid {
  align-items: stretch;
}
.calendar-grid--month .calendar-day-num {
  font-size: 13px;
  font-weight: 600;
}
.calendar-grid--month .calendar-slots {
  gap: 4px;
}

/* Cabecera de dias de la semana (vista mes) */
.calendar-dow {
  padding: 2px 4px 6px;
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-align: center;
  text-transform: uppercase;
}

/* Columna-dia (vista semana): tarjeta con borde */
.calendar-day {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 150px;
  padding: 10px;
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.calendar-day-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}

.calendar-day-dow {
  color: var(--text-muted);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.calendar-day-num {
  color: var(--text);
  font-size: 15px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}

/* Lista de posts del dia */
.calendar-slots {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}

/* Chip de post: conserva el color de estado que aporta .badge--* */
button.calendar-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 5px 8px;
  border: 1px solid color-mix(in srgb, currentColor 22%, transparent);
  border-radius: 7px;
  font: inherit;
  font-size: 12px;
  line-height: 1.25;
  text-align: left;
  cursor: pointer;
}
button.calendar-chip::before { flex: none; }
button.calendar-chip:hover { filter: brightness(1.18); }

.calendar-chip-time {
  flex: none;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.calendar-chip-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  font-weight: 500;
  opacity: 0.82;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Enlaces del panel (permalinks del post publicado) */
.calendar-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 2px;
}
.calendar-links a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: var(--bg-hover);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--accent-strong);
  font-size: 13.5px;
  font-weight: 550;
  text-decoration: none;
}
.calendar-links a:hover { border-color: var(--accent); }

/* Fila de acciones del panel */
.calendar-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 12px;
}

/* Contexto de la red pendiente (dentro del boton de accion) */
.calendar-hint {
  margin-left: 6px;
  color: var(--text-muted);
  font-size: 11.5px;
  font-weight: 400;
}

/* Movil: la rejilla de semana colapsa a 1 columna (el JS pone las columnas
   inline, por eso hace falta !important solo aqui). */
@media (max-width: 640px) {
  .calendar-toolbar { gap: 10px; }
  .calendar-range { order: -1; min-width: 100%; }
  .calendar-grid--week { grid-template-columns: 1fr !important; }
}

/* ===== vista: ads ===== */
/* ===== vista ADS ===== */

/* cabecera del batch (detalle): badge + presupuesto + acciones apiladas */
.batch-head { display: flex; flex-direction: column; gap: 14px; }

.batch-head-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 14px;
}
.batch-head-row .field-note { font-variant-numeric: tabular-nums; }

/* lista de ángulos editables (wizard · paso 2) */
.angulos-list { display: flex; flex-direction: column; gap: 12px; }

.angulo-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) auto;
  gap: 10px;
  align-items: start;
}
.angulo-row textarea { resize: vertical; }
@media (max-width: 640px) {
  .angulo-row { grid-template-columns: 1fr; }
  .angulo-row > .btn-ghost { justify-self: end; }
}

/* resumen de ángulos (wizard · paso 3) */
.angulos-summary {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 13.5px;
}
.angulos-summary li {
  color: var(--text-muted);
  padding-left: 10px;
  border-left: 2px solid var(--border);
  line-height: 1.45;
}
.angulos-summary strong { color: var(--text); font-weight: 600; }

/* tarjeta de un ángulo (detalle): panel inset dentro de la sección */
.angulo-card {
  margin-top: 14px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.angulo-card.is-incompleto {
  border-color: rgba(246, 196, 83, 0.38);
  border-left-width: 3px;
  border-left-color: var(--warn);
  background: rgba(246, 196, 83, 0.05);
}

.angulo-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.angulo-card-head h3 { margin: 0; font-size: 15px; font-weight: 600; }

/* assets por formato dentro del ángulo (chips separados por un divisor) */
.assets-box {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

/* paneles con borde del wizard: destino + geo */
.destino-box,
.geo-box {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px 16px;
  margin-bottom: 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.destino-box > h3,
.geo-box > h3 {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* buscador de ciudades (dentro de geo-box) */
.geo-search { display: flex; flex-direction: column; gap: 10px; }

.geo-search-row { display: flex; align-items: center; gap: 8px; }
.geo-search-row input { flex: 1 1 auto; min-width: 0; }

.geo-results {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  max-height: 220px;
  overflow-y: auto;
}
.geo-results .btn { padding: 5px 10px; font-size: 13px; }

.geo-chosen { display: flex; flex-wrap: wrap; gap: 8px; }

/* selector de copy (primary / headline) en la tarjeta de ángulo */
.copy-selector { display: flex; flex-direction: column; gap: 8px; }
.copy-selector textarea { width: 100%; resize: vertical; }
.copy-selector > .btn { align-self: flex-start; }

/* sugerencias de copy: pills densas que rellenan el textarea al pulsar */
.copy-suggestions { display: flex; flex-wrap: wrap; gap: 6px; }
.copy-suggestions .btn { max-width: 100%; padding: 4px 9px; font-size: 12.5px; }

/* ===== vista: clientes ===== */
/* ---- contenedor del formulario de cliente ---- */
.client-form { max-width: 960px; }

/* ---- parrilla: editor de slots día+hora dentro de la card Datos ---- */
.parrilla {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

.parrilla > h3,
.cats-block > h3 {
  margin: 0;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.parrilla-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.parrilla-list:empty { display: none; }

.slot-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.slot-row select { min-width: 92px; }
.slot-row input[type="time"] { font-variant-numeric: tabular-nums; }
.slot-row > button { padding: 7px 11px; }

/* ---- bloque DSA (obligaciones UE) dentro de la card Cuentas Meta ---- */
.dsa-block {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

/* ---- special ad categories: checkboxes + país ISO ---- */
.cats-block {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}
.cats-block > .field { margin-top: 4px; }

/* ---- caja de resultado de verificación ---- */
.checks-box {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 18px;
}

.checks-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 12px;
}
.checks-head h2 { margin: 0; }
.checks-head > span {
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--bg-hover);
  color: var(--text-muted);
  font-size: 12.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.checks-list {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

.check {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
}
.check:last-child { border-bottom: 0; }
.check--warning { background: color-mix(in srgb, var(--warn) 9%, transparent); }
.check--error { background: color-mix(in srgb, var(--danger) 9%, transparent); }

.check-symbol {
  flex: 0 0 auto;
  width: 18px;
  text-align: center;
  font-weight: 700;
  line-height: 1.5;
}
.check--ok .check-symbol { color: var(--ok); }
.check--warning .check-symbol { color: var(--warn); }
.check--error .check-symbol { color: var(--danger); }

.check-name {
  flex: 0 1 auto;
  min-width: 0;
  color: var(--text);
  font-size: 13.5px;
  font-weight: 600;
  word-break: break-word;
}

.check-detail {
  flex: 1 1 220px;
  min-width: 0;
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.5;
}

/* ===== vista: salud ===== */
.salud-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
}

.salud-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.salud-card h2 {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--text-muted);
}

.salud-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.salud-value {
  font-size: 26px;
  font-weight: 700;
  line-height: 1.15;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  word-break: break-word;
}

.salud-jobs {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.salud-jobs li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
  border-top: 1px solid var(--border);
  font-size: 13.5px;
}

.salud-jobs li:first-child {
  border-top: 0;
  padding-top: 0;
}

.salud-jobs li > span:first-child {
  color: var(--text-muted);
}

.salud-jobs li > span:last-child {
  font-weight: 600;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.salud-bad {
  color: var(--danger) !important;
  font-weight: 700 !important;
}

.semaforo {
  flex-shrink: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--grey);
  box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 18%, transparent);
  color: var(--grey);
}

.semaforo--ok {
  background: var(--ok);
  color: var(--ok);
}

.semaforo--warn {
  background: var(--warn);
  color: var(--warn);
}

.semaforo--down {
  background: var(--danger);
  color: var(--danger);
}

@media (max-width: 640px) {
  .salud-grid { grid-template-columns: 1fr; }
}