/* ============================================================================
   Correos La Estrella — panel de envío de correos a clientes
   Hereda el lenguaje visual del panel de pedidos (Inter + Playfair, tarjetas,
   badges) con acento por marca: La Estrella #12213d/#e31e24 · Ollero #1f2a44/#c8102e.
   Mobile-first. Sin dependencias externas: fuentes autohospedadas en assets/fonts/.
   ============================================================================ */

/* ---------- Fuentes autohospedadas (variables, subset latin) ---------- */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/inter-latin.woff2") format("woff2");
}

@font-face {
  font-family: "Playfair Display";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("fonts/playfair-display-latin.woff2") format("woff2");
}

/* ---------- Tokens ---------- */

:root {
  --brand-50:  #eef3fb;
  --brand-100: #d6e2f3;
  --brand-500: #2a4f95;
  --brand-600: #1c3a73;
  --brand-700: #12213d;
  --brand-800: #0d182c;
  --brand-900: #060c19;

  --accent-500: #e31e24;
  --accent-600: #c9171c;

  --terra-100: #f4d8c3;
  --terra-600: #874523;

  --bg: #ffffff;
  --bg-elevated: #ffffff;
  --bg-muted: #f0f3f8;
  --fg: #12162a;
  --fg-muted: rgba(18, 22, 42, 0.7);
  --fg-subtle: rgba(18, 22, 42, 0.5);
  --border: rgba(18, 33, 61, 0.1);
  --border-strong: rgba(18, 33, 61, 0.18);

  --exito-texto: #1e6a40;
  --exito-fondo: #e9f3ea;
  --ambar-texto: #8a5a0a;
  --ambar-fondo: #f7e8cf;

  --header-bg: rgba(7, 8, 11, 0.85);

  --shadow-soft: 0 1px 2px rgba(0, 0, 0, 0.06), 0 8px 24px rgba(0, 0, 0, 0.08);
  --shadow-elevated: 0 4px 8px rgba(0, 0, 0, 0.06), 0 24px 48px rgba(0, 0, 0, 0.18);

  --radius-card: 1.25rem;
  --radius-control: 0.65rem;
  --radius-pill: 999px;
  --ease-standard: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-base: 220ms;

  --font-display: "Playfair Display", Georgia, serif;
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;

  /* Acento de marca (por defecto La Estrella); se redefine en .marca-* */
  --marca-primario: #12213d;
  --marca-acento: #e31e24;
}

.marca-laestrella { --marca-primario: #12213d; --marca-acento: #e31e24; }
.marca-ollero     { --marca-primario: #1f2a44; --marca-acento: #c8102e; }

/* ---------- Base ---------- */

* { box-sizing: border-box; }

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

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 15px;
  color: var(--fg);
  background: var(--bg);
}

h1, h2 { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.015em; margin: 0; }

a { color: var(--brand-600); }

button { font: inherit; cursor: pointer; }

::selection { background: var(--accent-500); color: #fff; }

:focus-visible { outline: 2px solid var(--accent-500); outline-offset: 3px; border-radius: 6px; }

.texto-suave { color: var(--fg-subtle); }

.nota { color: var(--fg-muted); font-size: 0.88rem; margin: 1.4rem 0 0; }

/* ---------- Login ---------- */

.pagina-login {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 1.5rem 1rem;
  background:
    linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(165deg, var(--brand-900) 0%, var(--brand-700) 55%, var(--brand-800) 100%);
  background-size: 32px 32px, 32px 32px, cover;
}

.login-envoltorio {
  width: min(400px, 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.6rem;
}

.login-logo { width: min(280px, 72%); height: auto; display: block; }

.tarjeta-login {
  width: 100%;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius-card);
  padding: 2rem 2.1rem 2.2rem;
  box-shadow: var(--shadow-elevated);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.tarjeta-login h1 {
  font-family: var(--font-sans);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: center;
  color: rgba(255, 255, 255, 0.92);
  margin-bottom: 0.4rem;
}

.tarjeta-login label {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  margin: 1rem 0 0.3rem;
  color: rgba(255, 255, 255, 0.65);
  text-transform: uppercase;
  letter-spacing: 0.09em;
}

.tarjeta-login input {
  width: 100%;
  padding: 0.68rem 0.8rem;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--radius-control);
  font: inherit;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}

.tarjeta-login input:focus { outline: 2px solid var(--accent-500); outline-offset: 0; border-color: var(--accent-500); }

.tarjeta-login button {
  width: 100%;
  margin-top: 1.5rem;
  padding: 0.8rem;
  min-height: 48px;
  background: linear-gradient(135deg, var(--accent-500), var(--accent-600));
  color: #fff;
  border: 0;
  border-radius: var(--radius-control);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  font-size: 0.85rem;
}

.tarjeta-login button:hover { filter: brightness(1.08); }

.login-volver { text-align: center; margin: 1.2rem 0 0; }
.login-volver a { color: rgba(255, 255, 255, 0.75); }

.alerta {
  background: #fdeceb;
  color: var(--accent-600);
  border: 1px solid #f2c4c2;
  border-radius: var(--radius-control);
  padding: 0.6rem 0.85rem;
  font-size: 0.88rem;
  font-weight: 600;
  margin: 0 0 0.4rem;
}

/* ---------- Cabecera (siempre oscura, como la web corporativa) ---------- */

.cabecera {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem 1rem;
  flex-wrap: wrap;
  background: var(--header-bg);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
  backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding: 0.75rem 1.4rem;
}

.cabecera-logo { display: inline-flex; align-items: center; flex: 0 0 auto; }
.cabecera-logo img { height: 26px; width: auto; display: block; }

.cabecera nav { display: flex; align-items: center; gap: 1.1rem; flex-wrap: wrap; }

.cabecera nav a {
  color: #fff;
  text-decoration: none;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  padding: 0.55rem 0;
  transition: color var(--duration-base) var(--ease-standard);
}

.cabecera nav a:hover, .cabecera nav a.activo { color: var(--accent-500); }

.usuario-actual { color: rgba(255, 255, 255, 0.65); font-size: 0.78rem; }

.form-salir { display: inline-flex; margin: 0; }
button.enlace-salir {
  background: transparent;
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.82rem;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: var(--radius-pill);
  padding: 0.4rem 0.95rem;
}
button.enlace-salir:hover { border-color: var(--accent-500); color: #fff; }

/* ---------- Dock móvil ---------- */

.dock { display: none; }

/* ---------- Contenido y títulos ---------- */

.contenido { padding: 1.2rem 1.4rem 3rem; max-width: 1400px; margin: 0 auto; }
.contenido-estrecho { max-width: 760px; }

.pagina-titulo {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.4rem 1rem;
  flex-wrap: wrap;
  margin: 0.4rem 0 1.1rem;
}
.pagina-titulo h1 { font-size: 1.9rem; color: var(--brand-700); }
.pagina-titulo .acciones { display: flex; gap: 0.5rem; flex-wrap: wrap; }

.sync { font-size: 0.82rem; color: var(--fg-muted); }

.seccion-titulo {
  font-family: var(--font-sans);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-muted);
  margin: 0 0 0.75rem;
  border-bottom: 2px solid var(--border-strong);
  padding-bottom: 0.4rem;
}

.seccion-separada { margin-top: 1.75rem; }

/* ---------- Mensajes flash ---------- */

.flash {
  border-radius: var(--radius-control);
  padding: 0.65rem 0.9rem;
  font-size: 0.9rem;
  font-weight: 600;
  margin: 0 0 1rem;
  border: 1px solid transparent;
  transition: opacity 0.4s var(--ease-standard);
}
.flash-ok    { background: var(--exito-fondo); color: var(--exito-texto); border-color: #c3ddc9; }
.flash-error { background: #fdeceb; color: var(--accent-600); border-color: #f2c4c2; }
.flash-aviso { background: var(--ambar-fondo); color: var(--ambar-texto); border-color: #eccf94; }
.flash-oculto { opacity: 0; }

/* ---------- Tarjetas ---------- */

.tarjeta {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-soft);
  padding: 1.1rem 1.25rem;
}

.tarjeta-alertas { margin-bottom: 1.25rem; border-color: rgba(201, 23, 28, 0.35); }

.tarjetas { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1rem; }

/* Tarjeta de marca (dashboard y remitentes): franja superior con el acento */
.marcas { display: grid; grid-template-columns: 1fr; gap: 1rem; }
.marcas .tarjeta { border-top: 4px solid var(--marca-acento); }

.marca-cabecera { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem 1rem; flex-wrap: wrap; margin-bottom: 0.9rem; }
.marca-cabecera h2 { font-size: 1.35rem; color: var(--marca-primario); }
.marca-email { font-size: 0.82rem; color: var(--fg-muted); }

.marca-datos { display: grid; grid-template-columns: auto 1fr; gap: 0.35rem 1rem; margin: 0.9rem 0 0; font-size: 0.9rem; }
.marca-datos dt { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-muted); padding-top: 0.15rem; }
.marca-datos dd { margin: 0; display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }

.marca-acciones { display: flex; gap: 0.5rem; flex-wrap: wrap; margin: 1.1rem 0 0; }

/* Avisos dentro de tarjetas (dashboard) */
.aviso {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  padding: 0.55rem 0.25rem;
  margin: 0;
  border-top: 1px solid var(--border);
  color: var(--fg);
  text-decoration: none;
  font-size: 0.88rem;
}
.aviso:first-of-type { border-top: none; }
a.aviso:hover { background: var(--bg-muted); }
.aviso-tipo {
  flex-shrink: 0;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent-600);
  border: 1px solid rgba(201, 23, 28, 0.45);
  border-radius: var(--radius-pill);
  padding: 0.1rem 0.5rem;
}

/* ---------- KPIs ---------- */

.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 0.75rem; margin: 0; }
.kpi {
  background: var(--bg-muted);
  border: 1px solid var(--border);
  border-radius: calc(var(--radius-card) - 0.4rem);
  padding: 0.8rem 0.9rem;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.kpi-valor { font-family: var(--font-display); font-size: 1.9rem; font-weight: 700; line-height: 1.1; color: var(--marca-primario); }
.kpi-etiqueta { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-muted); }
.kpi-alerta { border-color: rgba(201, 23, 28, 0.45); }
.kpi-alerta .kpi-valor { color: var(--accent-600); }

/* ---------- Botones ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.55rem 1.1rem;
  min-height: 44px;
  background: var(--bg-elevated);
  color: var(--brand-700);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-control);
  font-weight: 700;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--duration-base) var(--ease-standard), border-color var(--duration-base) var(--ease-standard);
}
.btn:hover { border-color: var(--brand-500); background: var(--brand-50); }
.btn-primario { background: var(--marca-primario); border-color: var(--marca-primario); color: #fff; }
.btn-primario:hover { background: var(--brand-600); border-color: var(--brand-600); }
.btn-acento { background: linear-gradient(135deg, var(--marca-acento), var(--accent-600)); border-color: transparent; color: #fff; }
.btn-acento:hover { filter: brightness(1.08); background: var(--marca-acento); }
.btn-peligro { color: var(--accent-600); border-color: rgba(201, 23, 28, 0.4); }
.btn-peligro:hover { background: rgba(227, 30, 36, 0.08); border-color: var(--accent-600); }
.btn-pequeno { min-height: 34px; padding: 0.3rem 0.8rem; font-size: 0.72rem; border-radius: var(--radius-pill); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* ---------- Formularios ---------- */

.filtros, .formulario {
  display: flex;
  gap: 0.9rem;
  flex-wrap: wrap;
  align-items: flex-end;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-soft);
  padding: 1rem 1.15rem;
}
.tarjeta .formulario { box-shadow: none; border: 0; padding: 0; }

.formulario-columna { flex-direction: column; align-items: stretch; }

.campo { display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; }
.campo-crece { flex: 1 1 220px; }
.campo-completo { flex: 1 1 100%; }

.campo label, .campo > span {
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--fg-muted);
  text-transform: uppercase;
  letter-spacing: 0.09em;
}

.campo input, .campo select, .campo textarea {
  padding: 0.5rem 0.65rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-control);
  font: inherit;
  min-width: 150px;
  max-width: 100%;
  background: #fff;
  color: var(--fg);
}
.campo textarea { min-height: 120px; resize: vertical; line-height: 1.45; }
.campo input:focus, .campo select:focus, .campo textarea:focus { outline: 2px solid var(--brand-500); border-color: var(--brand-500); }
.campo input[type="checkbox"], .campo input[type="radio"] { min-width: 0; width: 1.1rem; height: 1.1rem; }
.campo-ayuda { font-size: 0.78rem; color: var(--fg-subtle); text-transform: none; letter-spacing: 0; font-weight: 400; }

.campo-acciones { flex-direction: row; align-items: center; gap: 0.8rem; }

.opciones { display: flex; gap: 0.4rem 1rem; flex-wrap: wrap; }
.opciones label { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.9rem; text-transform: none; letter-spacing: 0; font-weight: 500; color: var(--fg); }

/* ---------- Tablas ---------- */

.tabla-envoltorio {
  overflow-x: auto;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-soft);
}

.tabla { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.tabla th {
  text-align: left;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--fg-muted);
  padding: 0.75rem 0.9rem;
  border-bottom: 2px solid var(--border-strong);
  white-space: nowrap;
}
.tabla td { padding: 0.6rem 0.9rem; border-top: 1px solid var(--border); vertical-align: middle; }
.tabla tbody tr:hover td { background: var(--bg-muted); }
.tabla .num { text-align: right; white-space: nowrap; }
.tabla .vacio { text-align: center; color: var(--fg-muted); padding: 2rem; }
.celda-acciones { white-space: nowrap; }
.celda-acciones form { display: inline-flex; margin: 0; }
.tabla small { color: var(--fg-subtle); }

/* ---------- Badges y chips ---------- */

.badge {
  display: inline-block;
  padding: 0.2rem 0.65rem;
  border-radius: var(--radius-pill);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.badge-ok     { background: var(--exito-fondo); color: var(--exito-texto); }
.badge-info   { background: var(--brand-100); color: var(--brand-600); }
.badge-aviso  { background: var(--ambar-fondo); color: var(--ambar-texto); }
.badge-terra  { background: var(--terra-100); color: var(--terra-600); }
.badge-error  { background: #fdeceb; color: var(--accent-600); }
.badge-otro   { background: rgba(18, 33, 61, 0.08); color: var(--fg-muted); }

.chip {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 600;
  border-radius: var(--radius-pill);
  padding: 0.12rem 0.55rem;
  background: var(--bg-muted);
  border: 1px solid var(--border);
  color: var(--fg-muted);
  white-space: nowrap;
}

/* ---------- Barra de progreso ---------- */

.progreso { display: flex; align-items: center; gap: 0.6rem; }
.barra {
  flex: 1;
  height: 9px;
  background: rgba(18, 33, 61, 0.1);
  border-radius: var(--radius-pill);
  overflow: hidden;
}
.barra-relleno {
  display: block;
  height: 100%;
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, var(--accent-600), var(--marca-acento));
  transition: width 0.45s var(--ease-standard);
}
.progreso-texto { font-size: 0.88rem; font-weight: 700; color: var(--brand-600); white-space: nowrap; }

/* ---------- Paginación ---------- */

.paginacion {
  display: flex;
  align-items: center;
  gap: 1rem;
  justify-content: center;
  margin-top: 1.4rem;
  font-size: 0.9rem;
  color: var(--fg-muted);
}
.paginacion a {
  color: var(--brand-700);
  font-weight: 600;
  text-decoration: none;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill);
  padding: 0.45rem 1rem;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  background: var(--bg-elevated);
}
.paginacion a:hover { border-color: var(--brand-500); background: var(--brand-50); }

/* ---------- Vista previa (iframe) ---------- */

.previa { width: 100%; min-height: 600px; border: 1px solid var(--border-strong); border-radius: var(--radius-card); background: #fff; }

/* ---------- Responsive ---------- */

@media (min-width: 900px) {
  .marcas { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 640px) {
  .contenido { padding: 0.9rem 0.8rem 2.2rem; }
  .filtros, .formulario { gap: 0.6rem; }
  .campo { flex: 1 1 100%; }
  .campo input, .campo select { min-width: 0; width: 100%; }
  .cabecera { padding: 0.65rem 0.9rem; }
  .cabecera-logo img { height: 22px; }
  .cabecera nav { gap: 0.8rem; }
  .cabecera nav > a { display: none; }
  .pagina-titulo h1 { font-size: 1.65rem; }
  .tarjeta-login { padding: 1.6rem 1.4rem 1.8rem; }
  .marca-datos { grid-template-columns: 1fr; gap: 0.1rem 0; }
  .marca-datos dd { margin-bottom: 0.5rem; }
  .tabla { min-width: 560px; }

  body { padding-bottom: calc(70px + env(safe-area-inset-bottom)); }
  body.pagina-login { padding-bottom: 0; }

  .dock {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 60;
    background: var(--header-bg);
    -webkit-backdrop-filter: saturate(160%) blur(14px);
    backdrop-filter: saturate(160%) blur(14px);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding: 0.35rem 0.3rem calc(0.4rem + env(safe-area-inset-bottom));
  }
  .dock a {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    color: rgba(255, 255, 255, 0.6);
    text-decoration: none;
    font-size: 0.52rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 0.4rem 0 0.25rem;
    border-radius: 0.7rem;
  }
  .dock a svg { width: 22px; height: 22px; }
  .dock a.activo { color: #fff; }
  .dock a.activo svg { color: var(--accent-500); }

  .kpis { display: flex; overflow-x: auto; gap: 0.55rem; padding-bottom: 0.3rem; scrollbar-width: none; }
  .kpis::-webkit-scrollbar { display: none; }
  .kpis .kpi { flex: 0 0 31%; min-width: 105px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* === contactos === */
/* Listado de contactos: chips y tabla en tarjetas en movil. Importacion e informe. Remitentes. */
.celda-chips { max-width: 260px; white-space: normal; }
.celda-chips .chip { margin: 0.1rem 0; }
.lista-invalidos { margin: 0.4rem 0 0; padding-left: 1.2rem; font-size: 0.85rem; max-height: 220px; overflow: auto; }
.lista-invalidos code { color: var(--accent-600); }
.informe-importacion { margin-bottom: 1.25rem; }

.remitente-estado {
  border-radius: var(--radius-control);
  padding: 0.5rem 0.85rem;
  font-size: 0.85rem;
  font-weight: 700;
  margin: 0 0 1rem;
  border: 1px solid transparent;
}
.remitente-estado-ok    { background: var(--exito-fondo); color: var(--exito-texto); border-color: #c3ddc9; }
.remitente-estado-error { background: #fdeceb; color: var(--accent-600); border-color: #f2c4c2; }

.remitente-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0.8rem 1rem; }
.remitente-form .campo-completo { grid-column: 1 / -1; }
.remitente-form .campo input, .remitente-form .campo select { min-width: 0; width: 100%; }
.remitente-form .campo textarea { min-height: 80px; }
.remitente-subtitulo {
  grid-column: 1 / -1;
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--marca-primario);
  margin: 0.6rem 0 -0.2rem;
  border-bottom: 1px solid var(--border);
  padding-bottom: 0.3rem;
}
.remitente-pruebas { display: flex; flex-wrap: wrap; gap: 0.8rem 1.2rem; align-items: center; margin-top: 1.1rem; padding-top: 1rem; border-top: 1px solid var(--border); }
.remitente-pruebas form { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin: 0; }
.remitente-prueba-envio label { font-size: 0.82rem; }
.remitente-prueba-envio input { padding: 0.5rem 0.65rem; border: 1px solid var(--border-strong); border-radius: var(--radius-control); font: inherit; min-width: 200px; }
.remitente-prueba-envio input:focus { outline: 2px solid var(--brand-500); border-color: var(--brand-500); }

@media (max-width: 640px) {
  .tabla-contactos { min-width: 0; }
  .tabla-contactos thead { display: none; }
  .tabla-contactos tr { display: block; padding: 0.7rem 0.9rem; border-top: 1px solid var(--border); }
  .tabla-contactos td { display: flex; gap: 0.6rem; align-items: baseline; padding: 0.18rem 0; border: 0; }
  .tabla-contactos td[data-etiqueta]::before {
    content: attr(data-etiqueta);
    flex: 0 0 72px;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--fg-subtle);
  }
  .tabla-contactos td:empty, .tabla-contactos .celda-chips:not(:has(.chip)) { display: none; }
  .tabla-contactos .celda-acciones { margin-top: 0.5rem; flex-wrap: wrap; gap: 0.4rem; }
  .tabla-contactos tbody tr:hover td { background: transparent; }
  .remitente-pruebas form, .remitente-prueba-envio input { width: 100%; }
}

/* === campanas === */

/* Utilidades */
.visualmente-oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; padding: 0; margin: -1px; }
.texto-error { color: var(--accent-600); }
.abierto { color: var(--exito-texto); font-weight: 700; font-size: 1.1rem; }
.separador { border: 0; border-top: 1px solid var(--border); margin: 1.1rem 0; }
[hidden] { display: none !important; }

/* Pestañas de marca (plantillas) */
.pestanas { display: flex; gap: 0.4rem; margin: 0 0 1rem; border-bottom: 2px solid var(--border-strong); overflow-x: auto; }
.pestana {
  padding: 0.7rem 1.1rem;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  color: var(--fg-muted);
  text-decoration: none;
  font-weight: 700;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  white-space: nowrap;
}
.pestana.activa { color: var(--marca-primario); border-bottom-color: var(--marca-acento); }
.pestana:hover { color: var(--marca-primario); }

/* Editor compartido */
.editor { display: grid; grid-template-columns: 1fr; gap: 1.25rem; width: 100%; }
.editor-campos { display: flex; flex-direction: column; gap: 0.9rem; min-width: 0; }
.editor-campos .campo input, .editor-campos .campo textarea, .editor-campos .campo select { width: 100%; min-width: 0; }
.editor-fila { display: flex; gap: 0.9rem; flex-wrap: wrap; align-items: flex-end; width: 100%; }
.editor-fila .campo { min-width: 0; }
.editor-barra {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  flex-wrap: wrap;
  padding: 0.35rem;
  background: var(--bg-muted);
  border: 1px solid var(--border-strong);
  border-bottom: 0;
  border-radius: var(--radius-control) var(--radius-control) 0 0;
}
.editor-barra button[data-fmt] {
  min-width: 40px;
  min-height: 36px;
  padding: 0 0.6rem;
  background: #fff;
  border: 1px solid var(--border-strong);
  border-radius: 0.45rem;
  color: var(--brand-700);
  font-size: 0.82rem;
  font-weight: 600;
}
.editor-barra button[data-fmt]:hover { border-color: var(--brand-500); background: var(--brand-50); }
.editor-chips { margin-left: auto; display: inline-flex; gap: 0.3rem; }
.editor-chips .chip { cursor: pointer; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; min-height: 30px; }
.editor-chips .chip:hover { border-color: var(--brand-500); color: var(--brand-700); }
.editor-barra + textarea { border-radius: 0 0 var(--radius-control) var(--radius-control); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.86rem; min-height: 220px; }
.editor-previa { min-width: 0; }
.previa-cabecera { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; margin-bottom: 0.6rem; }
.previa-cabecera .seccion-titulo { margin: 0; border: 0; padding: 0; }
.editor-previa .previa { min-height: 520px; height: 70vh; }

/* Wizard de campaña */
.wizard { display: flex; flex-direction: column; gap: 0.9rem; }
.paso {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-soft);
}
.paso > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.95rem 1.15rem;
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--brand-700);
  min-height: 56px;
}
.paso > summary::-webkit-details-marker { display: none; }
.paso > summary::after { content: "\25BE"; margin-left: auto; color: var(--fg-subtle); transition: transform var(--duration-base) var(--ease-standard); }
.paso:not([open]) > summary::after { transform: rotate(-90deg); }
.paso-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--marca-primario);
  color: #fff;
  font-family: var(--font-sans);
  font-size: 0.85rem;
  flex-shrink: 0;
}
.paso-cuerpo { padding: 0.25rem 1.15rem 1.25rem; display: flex; flex-direction: column; gap: 0.9rem; border-top: 1px solid var(--border); }
.paso-cuerpo .campo { width: 100%; }
.paso-cuerpo .campo input:not([type="radio"]):not([type="checkbox"]), .paso-cuerpo .campo select { width: 100%; min-width: 0; }
.recuento-vivo { font-family: var(--font-sans); font-size: 0.82rem; font-weight: 500; color: var(--fg-muted); margin-left: 0.4rem; }
.recuento-vivo strong { color: var(--marca-acento); font-size: 1rem; }

.tarjetas-radio { display: grid; grid-template-columns: 1fr; gap: 0.75rem; }
.tarjeta-radio {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.9rem 1rem;
  border: 2px solid var(--border);
  border-left: 5px solid var(--marca-acento);
  border-radius: calc(var(--radius-card) - 0.4rem);
  cursor: pointer;
  background: var(--bg-muted);
  transition: border-color var(--duration-base) var(--ease-standard), background var(--duration-base) var(--ease-standard);
}
.tarjeta-radio:has(input:checked) { border-color: var(--marca-primario); background: #fff; box-shadow: var(--shadow-soft); }
.tarjeta-radio input { width: 1.15rem; height: 1.15rem; accent-color: var(--marca-acento); flex-shrink: 0; }
.tarjeta-radio-cuerpo { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.tarjeta-radio-cuerpo strong { color: var(--marca-primario); }
.tarjeta-radio-cuerpo small { color: var(--fg-muted); overflow-wrap: anywhere; }

.opciones-columna { flex-direction: column; gap: 0.5rem; }
.opciones-columna label { min-height: 32px; }
.seleccion { display: flex; flex-direction: column; gap: 0.6rem; }
.lista-contactos {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 340px;
  overflow-y: auto;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-control);
  background: #fff;
}
.lista-contactos:empty { display: none; }
.lista-contactos li { border-top: 1px solid var(--border); }
.lista-contactos li:first-child { border-top: 0; }
.lista-contactos label { display: flex; align-items: center; gap: 0.7rem; padding: 0.55rem 0.8rem; min-height: 44px; cursor: pointer; font-size: 0.9rem; }
.lista-contactos label:hover { background: var(--bg-muted); }
.lista-contactos input { width: 1.05rem; height: 1.05rem; flex-shrink: 0; }
.lista-contactos small { color: var(--fg-subtle); }
.lista-contactos .vacio { padding: 0.9rem; color: var(--fg-muted); text-align: center; }

.envio-acciones { display: flex; flex-direction: column; gap: 0.9rem; }
.envio-acciones .btn-acento { min-height: 52px; font-size: 0.85rem; }
.programar { align-items: flex-end; }

/* Seguimiento */
.campana-cabecera { border-top: 4px solid var(--marca-acento); }
.tabla-campanas .marca-punto { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--marca-acento); margin-right: 0.45rem; vertical-align: middle; }
.tabla-campanas .celda-acciones { display: flex; gap: 0.35rem; flex-wrap: wrap; }

@media (min-width: 768px) {
  .tarjetas-radio { grid-template-columns: 1fr 1fr; }
  .envio-acciones { flex-direction: row; align-items: flex-end; flex-wrap: wrap; gap: 1.2rem; }
  .envio-acciones .programar { flex: 0 0 auto; }
  .envio-acciones > .btn:last-child { margin-left: auto; }
}

@media (min-width: 1024px) {
  .editor { grid-template-columns: minmax(0, 1fr) minmax(360px, 480px); align-items: start; }
  .editor-previa { position: sticky; top: 76px; }
}

/* Texto de ayuda dentro de .campo: no heredar el uppercase de las etiquetas */
.campo > span.campo-ayuda, .campo-acciones .campo-ayuda { text-transform: none; letter-spacing: 0; font-weight: 400; font-size: 0.78rem; color: var(--fg-subtle); }