/* ── Marketing (parrilla de redes) ───────────────────────────────────────
   Todo acotado bajo #view-marketing. Formularios, botones, pestañas, tiles,
   chips y avisos son los de base.css. Los colores de los temas y de las redes
   son tokens con variante oscura (body.dark); el texto ya dice lo mismo que
   el color (Dani es daltónico), el color es apoyo. */
:root{
  --mkt-ambar:#B0601B;--mkt-petroleo:#1F5D6B;--mkt-violeta:#6A4C9C;--mkt-verde:#3B7536;--mkt-oliva:#7A7F22;--mkt-granate:#8E2F3C;--mkt-gris:#5C686D;
  --mkt-linkedin:#2D5B8C;--mkt-instagram:#A63A6B;
}
body.dark{
  --mkt-ambar:#E0924D;--mkt-petroleo:#5DB0C1;--mkt-violeta:#A88BD8;--mkt-verde:#7DBE76;--mkt-oliva:#BFC45A;--mkt-granate:#E07B88;--mkt-gris:#97A3A7;
  --mkt-linkedin:#7DA9DA;--mkt-instagram:#E07BA8;
}

#view-marketing .mkt-stack{display:flex;flex-direction:column;gap:14px}
/* base.css quita el hueco entre filas al apilar .form-row en móvil (lo pone .form-group); aquí no hay .form-group */
#view-marketing .form-row{row-gap:14px}
#view-marketing .mkt-campo{display:flex;flex-direction:column;gap:6px;min-width:0}
#view-marketing .mkt-campo .form-label{margin:0}
#view-marketing .mkt-fila,#view-marketing .mkt-genbar{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
#view-marketing .mkt-intro{margin:0 0 12px}
#view-marketing .mkt-rotulo{font-size:12px;font-weight:600;color:var(--c-text2);text-transform:uppercase;letter-spacing:.04em}
#view-marketing .mkt-msg{font-size:13px;color:var(--c-text2)}
#view-marketing .mkt-msg.warn{color:var(--c-warning)}
#view-marketing .mkt-nada{padding:10px 0}
#view-marketing .mkt-lnk{padding:0;border:0;background:none;font:inherit;font-weight:600;line-height:1.3;color:var(--c-text);text-align:left;cursor:pointer}
#view-marketing .mkt-lnk:hover{text-decoration:underline;text-underline-offset:3px}

/* La red: insignia con el color de la red + el nombre de la cuenta */
#view-marketing .mkt-cta{display:inline-flex;align-items:center;gap:6px;font-size:13.5px;font-weight:500;white-space:nowrap}
#view-marketing .mkt-sig{padding:1px 5px;border-radius:4px;background:var(--c);color:var(--c-bg);font-size:10.5px;font-weight:700;letter-spacing:.02em}

/* Agenda */
#view-marketing .mkt-semana{display:flex;flex-direction:column}
#view-marketing .mkt-semana-t{margin:0;padding:6px 0;border-bottom:1px solid var(--c-text);font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:.05em}
#view-marketing .mkt-tarde .mkt-semana-t{color:var(--c-warning);border-color:var(--c-warning)}
#view-marketing .mkt-row{display:grid;grid-template-columns:104px 190px minmax(0,1fr) 170px 110px;gap:12px;align-items:center;padding:10px 0;border-bottom:1px solid var(--c-border)}
#view-marketing .mkt-row.tenue{opacity:.6}
#view-marketing .mkt-d{font-size:12.5px;font-weight:600;text-transform:uppercase;font-variant-numeric:tabular-nums}
#view-marketing .mkt-d.hoy{color:var(--c-warning)}
#view-marketing .mkt-q{display:flex;flex-direction:column;align-items:flex-start;gap:4px;min-width:0}
#view-marketing .mkt-q .form-select{max-width:340px}
#view-marketing .mkt-sub{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:13px;color:var(--c-text2)}
#view-marketing .mkt-a{justify-self:end}

/* Ideas */
#view-marketing .mkt-idea{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center;padding:12px 0;border-top:1px solid var(--c-border)}
#view-marketing .mkt-bits{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin-top:6px}

/* Escribir */
#view-marketing .mkt-bar{display:flex;align-items:center;justify-content:space-between;gap:10px}
#view-marketing .mkt-ed{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.3fr);gap:18px;align-items:start}
#view-marketing .mkt-tabs{flex-wrap:wrap;align-self:flex-start}
#view-marketing .mkt-tabs .seg-b{width:auto;padding:0 10px}
#view-marketing .mkt-mas{color:var(--c-text3)}
#view-marketing .mkt-draft{min-height:320px;font-size:15px;line-height:1.6}
#view-marketing .mkt-par{display:grid;grid-template-columns:1fr 1fr;gap:12px}
#view-marketing .mkt-card{display:flex;flex-direction:column;gap:6px;min-width:0;padding:12px;border:1px solid var(--c-border);border-radius:var(--radius);background:var(--c-surface)}
#view-marketing .mkt-card.vis{border-left:3px solid var(--c-warning)}
#view-marketing .mkt-card p{margin:0}
#view-marketing .mkt-vis-t{font-size:18px}
#view-marketing .mkt-chk{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
#view-marketing .mkt-chk li{display:grid;grid-template-columns:10px 1fr;gap:8px;align-items:baseline;font-size:13.5px}
#view-marketing .mkt-dot{width:9px;height:9px;border-radius:50%;background:var(--c-green);align-self:start;margin-top:.4em}
#view-marketing .mkt-chk li.no .mkt-dot{background:var(--c-warning)}
#view-marketing .mkt-acts{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px}
#view-marketing .mkt-acts>div{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
#view-marketing .mkt-sello{display:inline-flex;align-items:center;gap:4px;font-size:13px;color:var(--c-text2)}
#view-marketing .mkt-sello .material-symbols-rounded{font-size:16px;color:var(--c-green)}

/* Cuentas y voz */
#view-marketing .mkt-pasos{margin:0 0 12px;padding-left:20px;display:flex;flex-direction:column;gap:4px;font-size:14px}
#view-marketing .mkt-fijas summary{cursor:pointer;font-size:13.5px;font-weight:600}
#view-marketing .mkt-fijas ul{margin:8px 0 0;padding-left:18px;display:flex;flex-direction:column;gap:3px;font-size:13.5px}
#view-marketing .mkt-cuenta{display:flex;flex-direction:column;gap:14px;border-top:3px solid var(--c)}
#view-marketing .mkt-cuenta.inactiva{opacity:.7}
#view-marketing .mkt-cuenta-h{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px}
#view-marketing .mkt-cuenta-h h3{margin:0}
#view-marketing .mkt-cuenta p{margin:0}
#view-marketing .mkt-meta,#view-marketing .mkt-dias{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;font-size:13.5px}
#view-marketing .mkt-lleva{display:inline-flex;align-items:center;gap:8px;color:var(--c-text2)}
#view-marketing .mkt-dia{display:inline-flex;align-items:center;gap:4px;font-size:13.5px}
#view-marketing .mkt-voz{display:grid;grid-template-columns:1fr 1fr;gap:12px}
#view-marketing .mkt-voz .ancho{grid-column:1/-1}
#view-marketing .mkt-propuesta{background:color-mix(in srgb,var(--c-warning) 8%,var(--c-surface));border-color:var(--c-warning)}

/* Temas */
#view-marketing .mkt-tema{display:grid;grid-template-columns:14px minmax(140px,1fr) minmax(0,2.2fr) 130px auto;gap:10px;align-items:end;padding:10px 0;border-top:1px solid var(--c-border)}
#view-marketing .mkt-sw{width:14px;height:36px;border-radius:3px}
#view-marketing .mkt-tema-fin{display:flex;align-items:center;justify-content:flex-end;gap:10px;height:36px}

@media (max-width:900px){
  #view-marketing .mkt-ed{grid-template-columns:1fr}
  /* Fila apilada: fecha y estado arriba, cuenta y acción debajo, la idea a todo el ancho */
  #view-marketing .mkt-row{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"d e" "c a" "q q";gap:6px 12px}
  #view-marketing .mkt-d{grid-area:d}
  #view-marketing .mkt-d:empty{display:none}
  #view-marketing .mkt-c{grid-area:c}
  #view-marketing .mkt-q{grid-area:q}
  #view-marketing .mkt-e{grid-area:e;justify-self:end}
  #view-marketing .mkt-a{grid-area:a}
  #view-marketing .mkt-q .form-select{max-width:none;width:100%}
}
@media (max-width:640px){
  #view-marketing .mkt-par,#view-marketing .mkt-voz{grid-template-columns:1fr}
  #view-marketing .mkt-tema{grid-template-columns:14px 1fr}
  #view-marketing .mkt-tema>.mkt-campo,#view-marketing .mkt-tema-fin{grid-column:2}
  #view-marketing .mkt-tema-fin{justify-content:flex-start}
  /* 16px: iOS no hace zoom al enfocar */
  #view-marketing .form-input,#view-marketing .form-select,#view-marketing .form-textarea{font-size:16px}
}