/* marketing.css — kit de interfaz de Emabel Marketing (componentes.js y graficos.js).
   Reusa tokens y clases del molde (styles.css): .chip, .vacio, .grafico-*, .btn-*. Prefijo mk- para lo nuevo. */

:root {
  --azul: #7dd3fc;
  --violeta: #c4b5fd;
  --ambar: #fcd34d;
}

select, input, textarea { font-family: inherit; }

/* ---------- tonos (texto / acento de componentes) ---------- */
.mk-t-acc { --tono: var(--acc-soft); }
.mk-t-verde { --tono: var(--verde); }
.mk-t-azul { --tono: var(--azul); }
.mk-t-violeta { --tono: var(--violeta); }
.mk-t-ambar { --tono: var(--ambar); }
.mk-t-rojo { --tono: var(--rojo); }
.mk-t-gris { --tono: var(--muted); }

/* ---------- cabecera de pantalla ---------- */
.mk-cab { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding: 6px 0 14px; }
.mk-cab h1 { font-size: 1.25rem; margin: 0 0 4px; font-weight: 600; letter-spacing: -.35px; }
.mk-cab p { color: var(--muted); font-size: .8125rem; margin: 0; }
.mk-cab-acc { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* ---------- cargando / vacío / error ---------- */
.mk-cargando { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 46px 20px; color: var(--muted); font-size: .8438rem; }
.mk-spinner { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--border); border-top-color: var(--acc); animation: mk-gira .8s linear infinite; }
@keyframes mk-gira { to { transform: rotate(360deg); } }
.mk-vacio-ic { color: var(--muted2); margin-bottom: 8px; display: flex; justify-content: center; }
.mk-vacio-tt { margin: 0 0 4px; color: var(--text); font-weight: 600; }
.mk-vacio-tx { margin: 0; }
.mk-error .mk-vacio-ic { color: var(--rojo); }

/* ---------- tarjeta y KPI ---------- */
.mk-tarjeta { border: 1px solid var(--border); border-radius: 13px; background: var(--panel2); padding: 16px; min-width: 0; }
.mk-tarjeta-tt { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-size: .6875rem; text-transform: uppercase; letter-spacing: .4px; color: var(--muted2); font-weight: 700; }
.mk-tarjeta-tt svg { color: var(--acc-soft); flex: 0 0 auto; }
.mk-tarjeta-pie { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border-soft); font-size: .75rem; color: var(--muted); }

.mk-kpi { border: 1px solid var(--border); border-radius: 13px; background: var(--panel2); padding: 15px 16px; min-width: 0; }
.mk-kpi-et { font-size: .6875rem; text-transform: uppercase; letter-spacing: .4px; color: var(--muted); font-weight: 700; margin-bottom: 6px; }
.mk-kpi-v { font-size: 1.5rem; font-weight: 700; letter-spacing: -.4px; color: var(--tono, var(--acc-soft)); line-height: 1.15; }
.mk-kpi-sub { font-size: .7188rem; color: var(--muted2); margin-top: 6px; }

/* ---------- chips de estado (tonos de ARQUITECTURA §7) ---------- */
.chip.est-publicada, .chip.est-cumplida { background: #14331f; color: var(--verde); border-color: #86efac4d; }
.chip.est-programada { background: #14232e; color: var(--azul); border-color: #7dd3fc4d; }
.chip.est-aprobada, .chip.est-lista { background: #221c33; color: var(--violeta); border-color: #c4b5fd4d; }
.chip.est-en_curso, .chip.est-pendiente { background: #2c2410; color: var(--ambar); border-color: #fcd34d4d; }
.chip.est-bloqueada, .chip.est-fallida { background: #331414; color: var(--rojo); border-color: #f871714d; }
.chip.est-borrada { background: #241717; color: #b98282; border-color: #b982823d; }
.chip.est-sin_aprobar, .chip.est-borrador, .chip.est-cancelada, .chip.est-retirada, .chip.est-sin_iniciar, .chip.est-desconocido {
  background: #232328; color: var(--muted); border-color: #9a9aa24d;
}

/* ---------- chips de red, vía, tipo, insignias ---------- */
.chip.mk-red { display: inline-flex; align-items: center; gap: 5px; background: #1c1c21; color: var(--text); border-color: var(--border); }
.chip.mk-red svg { flex: 0 0 auto; }
.chip.red-instagram svg { color: #f472b6; }
.chip.red-facebook svg { color: #60a5fa; }
.chip.red-tiktok svg { color: #5eead4; }
.chip.red-youtube svg { color: #f87171; }
.chip.red-linkedin svg { color: #38bdf8; }
.chip.red-google svg { color: #fcd34d; }
.chip.mk-via { background: transparent; color: var(--muted); border-color: var(--border); font-weight: 600; }
.chip.mk-tipo { background: #1c1c21; color: var(--acc-soft); border-color: #fb923c3d; }
.chip.mk-bloqueo { display: inline-flex; align-items: center; gap: 5px; background: #331414; color: var(--rojo); border-color: #f871714d; max-width: 100%; }
.chip.mk-bloqueo span { overflow: hidden; text-overflow: ellipsis; }
.chip.mk-sin-aprob { display: inline-flex; align-items: center; gap: 5px; background: #2c2410; color: var(--ambar); border-color: #fcd34d4d; }

/* ---------- miniatura de pieza ---------- */
.mk-miniatura { position: relative; width: 100%; overflow: hidden; border-radius: 10px; border: 1px solid var(--border); background: #1a1a1f; }
.mk-mini-ph { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; color: var(--muted2); padding: 8px; text-align: center; }
.mk-mini-clave { font-size: .625rem; font-weight: 600; word-break: break-all; line-height: 1.25; }
.mk-mini-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.mk-mini-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; background: transparent; }
.mk-mini-tipo { font-size: .5625rem; font-weight: 600; line-height: 1.25; letter-spacing: .04em; text-transform: uppercase; color: var(--muted2); opacity: .8; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mk-mini-play { position: absolute; left: 8px; bottom: 8px; width: 26px; height: 26px; border-radius: 50%; background: #0c0c0ecc; color: #fff; display: flex; align-items: center; justify-content: center; }
.mk-mini-dur { position: absolute; right: 8px; bottom: 8px; padding: 2px 6px; border-radius: 6px; background: #0c0c0ecc; color: #fff; font-size: .6875rem; font-weight: 600; font-variant-numeric: tabular-nums; }

/* ---------- aprobación (sólida) ---------- */
.mk-aprobacion { margin: 0; padding: 12px 14px; border-radius: 12px; border: 1px solid #86efac4d; border-left: 3px solid var(--tono, var(--verde)); background: #12281a; }
.mk-aprobacion.mk-t-rojo { background: #2a1414; border-color: #f871714d; }
.mk-aprobacion.mk-t-ambar { background: #2a2210; border-color: #fcd34d4d; }
.mk-aprob-cab { display: flex; align-items: center; gap: 8px; font-size: .8125rem; color: var(--tono, var(--verde)); flex-wrap: wrap; }
.mk-aprob-marca { display: inline-flex; width: 22px; height: 22px; border-radius: 50%; align-items: center; justify-content: center; background: color-mix(in srgb, var(--tono, var(--verde)) 18%, transparent); }
.mk-aprob-cita { margin: 8px 0 6px; color: var(--text); font-size: .9rem; line-height: 1.45; overflow-wrap: anywhere; }
.mk-aprob-meta { display: flex; flex-wrap: wrap; gap: 4px 8px; font-size: .7188rem; color: var(--muted); }
.mk-sep { color: var(--muted2); }
.mk-aprobacion.mk-anulada { opacity: .75; background: #1a1a1f; border-color: var(--border); border-left-color: var(--muted2); }
.mk-aprobacion.mk-anulada .mk-aprob-cita, .mk-aprobacion.mk-anulada .mk-aprob-cab strong { text-decoration: line-through; color: var(--muted); }
.mk-aprobacion.mk-t-gris { background: #1a1a1f; border-color: var(--border); }
.mk-aprob-motivo { margin: 8px 0 0; font-size: .75rem; color: var(--ambar); }

/* ---------- reacción (tenue, no es aprobación) ---------- */
.mk-reaccion { padding: 10px 12px; border-radius: 12px; border: 1px dashed var(--border); background: transparent; color: var(--muted); }
.mk-reaccion-rotulo { font-size: .6875rem; text-transform: uppercase; letter-spacing: .3px; color: var(--muted2); font-weight: 700; margin-bottom: 8px; }
.mk-reaccion-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.mk-reaccion-fila { font-size: .8125rem; }
.mk-reaccion-quien { color: var(--text); font-weight: 600; margin-right: 6px; }
.mk-reaccion-txt { color: var(--muted); margin-right: 6px; }
.mk-reaccion-stk { letter-spacing: 2px; }
.mk-reaccion-com { margin: 3px 0 0; color: var(--muted); font-style: italic; overflow-wrap: anywhere; }
.mk-reaccion-al { margin-top: 8px; font-size: .6875rem; color: var(--muted); }

/* ---------- cuota por tipo ---------- */
/* Cuota por tipo (helper cuotaPorTipoHtml, compartido por Inicio y Cuota). */
.cu-tipos { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }
.cu-tipo { border: 1px solid var(--border-soft); border-radius: 12px; background: var(--panel); padding: 14px; min-width: 0; }
.cu-tipo-cab { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.cu-tipo-cab h4 { margin: 0; font-size: .9375rem; font-weight: 600; }
.cu-per { color: var(--muted); font-size: .75rem; margin-right: auto; }
.cu-tipo .mk-grafico-titulo { display: none; }
.cu-fechas { margin: 10px 0 0; font-size: .75rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.cu-nota-inicio { display: flex; align-items: center; gap: 6px; margin: 10px 0 0; font-size: .75rem; color: var(--ambar); }
.cu-nota-inicio svg { flex: 0 0 auto; }

/* ---------- gráficos ---------- */
.mk-grafico-titulo { font-size: .6875rem; text-transform: uppercase; letter-spacing: .4px; color: var(--muted2); font-weight: 700; margin-bottom: 10px; }
.mk-grafico-vacio { text-align: center; color: var(--muted); font-size: .8438rem; }
.mk-grafico-vacio p { margin: 0; padding: 18px 0; }
.mk-sparkline { width: 100%; max-width: 160px; height: 32px; display: block; }

.mk-barra-cuota { min-width: 0; }
.mk-barra-pista { display: flex; height: 14px; border-radius: 8px; overflow: hidden; background: #26262c; }
.mk-barra-vacia .mk-barra-pista { background: repeating-linear-gradient(45deg, #26262c, #26262c 6px, #202025 6px, #202025 12px); }
.mk-seg { display: block; height: 100%; min-width: 2px; }
.mk-seg-acc { background: var(--acc); }
.mk-seg-verde { background: var(--verde); }
.mk-seg-azul { background: var(--azul); }
.mk-seg-violeta { background: var(--violeta); }
.mk-seg-ambar { background: var(--ambar); }
.mk-seg-rojo { background: var(--rojo); }
.mk-seg-gris { background: #4b4b54; }
.mk-barra-leyenda { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: .75rem; color: var(--muted); }
.mk-barra-leyenda strong { color: var(--text); font-variant-numeric: tabular-nums; }
.mk-punto { display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-right: 6px; vertical-align: baseline; }
.mk-barra-nota { margin: 8px 0 0; font-size: .75rem; color: var(--muted2); }
.mk-exceso .mk-barra-nota { color: var(--verde); }

@media (max-width: 720px) {
  .mk-kpi-v { font-size: 1.25rem; }
  .mk-barra-leyenda { gap: 6px 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .mk-spinner { animation: none; }
}