/* =============================================================================
   MÓDULO DE EMAIL  (/emails/enviar · plantillas · historial · configuracion)
   -----------------------------------------------------------------------------
   · em-  Página Emails.razor y sus cuatro paneles: compositor de campañas, editor
          de plantillas con vista previa, historial de envíos y cuenta de correo.
   Colores sólo de tokens; el violeta de acento marca lo que hace la IA, igual que
   en el push masivo.
   ========================================================================== */

.em-page { display: grid; gap: var(--sb-space-4); padding-block: var(--sb-space-2); }

/* ---------------------------------------------------------------- Cabecera */
.em-header { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sb-space-4); }
.em-header__ico {
    width: 52px; height: 52px; flex: 0 0 auto;
    display: grid; place-items: center;
    border-radius: var(--sb-radius-lg);
    background: var(--sb-brand-surface); color: var(--sb-brand);
    font-size: var(--sb-text-xl);
}
.em-header__texto { flex: 1 1 260px; min-width: 0; }
.em-header h1 { margin: 0; font-size: var(--sb-text-2xl); font-weight: var(--sb-weight-bold); color: var(--sb-text-strong); }
.em-header p { margin: var(--sb-space-1) 0 0; color: var(--sb-text-muted); font-size: var(--sb-text-sm); }

.em-tabs, .em-segmento {
    display: inline-flex; flex-wrap: wrap; padding: 3px; gap: 2px;
    background: var(--sb-surface-muted); border-radius: var(--sb-radius-full);
}
.em-tab, .em-segmento__btn {
    display: inline-flex; align-items: center; gap: var(--sb-space-2);
    border: 0; background: transparent; cursor: pointer; white-space: nowrap;
    padding: var(--sb-space-2) var(--sb-space-4); border-radius: var(--sb-radius-full);
    font: inherit; font-size: var(--sb-text-sm); font-weight: var(--sb-weight-semibold); color: var(--sb-text-muted);
}
.em-tab:hover, .em-segmento__btn:hover { color: var(--sb-text); }
.em-tab.is-active, .em-segmento__btn.is-active { background: var(--sb-surface); color: var(--sb-text-strong); box-shadow: var(--sb-shadow-xs); }

.em-aviso {
    display: flex; flex-wrap: wrap; align-items: center; gap: var(--sb-space-3);
    padding: var(--sb-space-3) var(--sb-space-4);
    background: var(--sb-warning-surface); border: 1px solid var(--sb-warning-border); border-radius: var(--sb-radius-lg);
    font-size: var(--sb-text-sm); color: var(--sb-warning-text);
}
.em-aviso span { flex: 1 1 260px; }

/* ------------------------------------------------------------------ Layout */
.em-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sb-space-4); align-items: start; }
.em-layout--config { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
.em-col { display: grid; gap: var(--sb-space-4); min-width: 0; }

.em-card {
    display: grid; gap: var(--sb-space-4); align-content: start; min-width: 0;
    padding: var(--sb-space-5);
    background: var(--sb-surface); border: 1px solid var(--sb-border); border-radius: var(--sb-radius-xl);
}
.em-card--fija { position: sticky; top: calc(var(--sb-header-height) + var(--sb-space-4)); }
.em-card__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sb-space-3); }
.em-card__head h2 {
    margin: 0; display: flex; align-items: center; gap: var(--sb-space-2);
    font-size: var(--sb-text-lg); font-weight: var(--sb-weight-bold); color: var(--sb-text-strong);
}
.em-paso {
    width: 26px; height: 26px; flex: 0 0 auto; display: inline-grid; place-items: center;
    border-radius: var(--sb-radius-full); background: var(--sb-brand); color: var(--sb-text-on-brand);
    font-size: var(--sb-text-sm); font-weight: var(--sb-weight-bold);
}

/* -------------------------------------------------------------- Formularios */
.em-form { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sb-space-3); }
.em-campo { display: grid; gap: var(--sb-space-1); align-content: start; min-width: 0; }
.em-campo--medio { grid-column: span 2; }
.em-campo--ancho { grid-column: 1 / -1; }
.em-campo label { font-size: var(--sb-text-sm); font-weight: var(--sb-weight-semibold); color: var(--sb-text); }
.em-campo label small { font-weight: var(--sb-weight-normal); color: var(--sb-text-subtle); }
.em-fila { display: flex; flex-wrap: wrap; gap: var(--sb-space-2); }
.em-fila > .sb-input { flex: 1 1 220px; min-width: 0; }
.em-texto-largo { min-height: 220px; line-height: var(--sb-leading-relaxed); }
.em-codigo { min-height: 320px; font-family: var(--sb-font-mono); font-size: var(--sb-text-xs); line-height: var(--sb-leading-normal); white-space: pre; }
.em-acciones { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--sb-space-2); }
.em-enviar { width: 100%; justify-content: center; min-height: var(--sb-tap-target); font-size: var(--sb-text-base); }

.em-texto, .em-nota { margin: 0; font-size: var(--sb-text-sm); color: var(--sb-text-muted); }
.em-nota { font-size: var(--sb-text-xs); }
.em-sutil { color: var(--sb-text-subtle); font-size: var(--sb-text-xs); }
.em-aviso-texto { color: var(--sb-warning-text); }
.em-error, .em-error-texto { margin: 0; font-size: var(--sb-text-sm); color: var(--sb-danger-text); }
.em-error-texto { display: block; font-size: var(--sb-text-xs); overflow-wrap: anywhere; }

.em-tip {
    display: flex; align-items: flex-start; gap: var(--sb-space-2);
    padding: var(--sb-space-3); border-radius: var(--sb-radius-md);
    background: var(--sb-info-surface); color: var(--sb-info-text); font-size: var(--sb-text-xs); line-height: var(--sb-leading-normal);
}
.em-tip i { margin-top: 2px; }

.em-resultado {
    display: flex; align-items: flex-start; gap: var(--sb-space-2);
    padding: var(--sb-space-3) var(--sb-space-4); border-radius: var(--sb-radius-md);
    border: 1px solid var(--sb-border); font-size: var(--sb-text-sm); overflow-wrap: anywhere;
}
.em-resultado i { margin-top: 3px; }
.em-resultado.success { background: var(--sb-success-surface); border-color: var(--sb-success-border); color: var(--sb-success-text); }
.em-resultado.danger { background: var(--sb-danger-surface); border-color: var(--sb-danger-border); color: var(--sb-danger-text); }

/* ------------------------------------------------------------ Chips y badges */
.em-presets, .em-marcadores__lista { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sb-space-2); }
.em-presets > span, .em-marcadores > span { font-size: var(--sb-text-xs); color: var(--sb-text-muted); }
.em-marcadores { display: grid; gap: var(--sb-space-2); }
.em-chip {
    display: inline-flex; align-items: center; gap: var(--sb-space-1); cursor: pointer;
    padding: var(--sb-space-1) var(--sb-space-3); border-radius: var(--sb-radius-full);
    border: 1px solid var(--sb-border); background: var(--sb-surface-subtle);
    font: inherit; font-size: var(--sb-text-xs); font-weight: var(--sb-weight-semibold); color: var(--sb-text-muted);
}
.em-chip:hover { border-color: var(--sb-brand); color: var(--sb-brand); }
.em-chip--codigo { font-family: var(--sb-font-mono); font-weight: var(--sb-weight-normal); }

.em-badge {
    display: inline-flex; align-items: center; gap: var(--sb-space-1); white-space: nowrap;
    padding: 2px var(--sb-space-2); border-radius: var(--sb-radius-full);
    font-size: var(--sb-text-xs); font-weight: var(--sb-weight-semibold);
    background: var(--sb-surface-muted); color: var(--sb-text-muted);
}
.em-badge.success { background: var(--sb-success-surface); color: var(--sb-success-text); }
.em-badge.warning { background: var(--sb-warning-surface); color: var(--sb-warning-text); }
.em-badge.danger { background: var(--sb-danger-surface); color: var(--sb-danger-text); }
.em-badge.info { background: var(--sb-info-surface); color: var(--sb-info-text); }

/* ---------------------------------------------------------------------- IA */
.em-ia {
    display: grid; gap: var(--sb-space-3); padding: var(--sb-space-4);
    border: 1px solid color-mix(in srgb, var(--sb-accent-violet) 35%, var(--sb-border));
    border-radius: var(--sb-radius-lg);
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--sb-accent-violet) 8%, var(--sb-surface)),
        color-mix(in srgb, var(--sb-accent-sky) 8%, var(--sb-surface)));
}
.em-ia__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sb-space-2); }
.em-ia__head i { color: var(--sb-accent-violet); }
.em-ia__head b { font-size: var(--sb-text-base); color: var(--sb-text-strong); }
.em-ia__head small { flex: 1 1 100%; font-size: var(--sb-text-xs); color: var(--sb-text-muted); }
.em-ia__pie { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sb-space-3); }
.em-tonos { display: inline-flex; flex-wrap: wrap; gap: var(--sb-space-1); }
.em-tono {
    border: 1px solid var(--sb-border); background: var(--sb-surface); cursor: pointer;
    padding: var(--sb-space-1) var(--sb-space-3); border-radius: var(--sb-radius-full);
    font: inherit; font-size: var(--sb-text-xs); font-weight: var(--sb-weight-semibold); color: var(--sb-text-muted);
}
.em-tono.is-active { background: var(--sb-accent-violet); border-color: var(--sb-accent-violet); color: var(--sb-text-on-inverse); }
.em-tono:disabled { opacity: .6; cursor: default; }

/* --------------------------------------------------------------- Plantillas */
.em-plantillas { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--sb-space-3); }
.em-plantilla {
    display: grid; gap: var(--sb-space-2); align-content: start;
    padding: var(--sb-space-4); border: 1px solid var(--sb-border); border-radius: var(--sb-radius-lg); background: var(--sb-surface);
}
.em-plantilla:hover { box-shadow: var(--sb-shadow-sm); }
.em-plantilla__cabecera { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sb-space-2); }
.em-plantilla h3 { margin: 0; font-size: var(--sb-text-base); font-weight: var(--sb-weight-bold); color: var(--sb-text-strong); }
.em-plantilla__asunto, .em-plantilla__desc { margin: 0; font-size: var(--sb-text-sm); color: var(--sb-text-muted); }
.em-plantilla__asunto { color: var(--sb-text); }
.em-plantilla__pie { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sb-space-2); margin-top: var(--sb-space-2); }
.em-plantilla__pie small { font-size: var(--sb-text-xs); color: var(--sb-text-subtle); }
.em-plantilla__acciones { display: inline-flex; align-items: center; gap: var(--sb-space-1); }

.em-ejemplos { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--sb-space-3); }
.em-ejemplo {
    display: grid; gap: var(--sb-space-1); align-content: start; text-align: left; cursor: pointer;
    padding: var(--sb-space-4); border: 1px dashed var(--sb-border-strong); border-radius: var(--sb-radius-lg);
    background: var(--sb-surface-subtle); font: inherit; color: var(--sb-text);
}
.em-ejemplo:hover { border-style: solid; border-color: var(--sb-brand); background: var(--sb-brand-surface); }
.em-ejemplo__ico {
    width: 38px; height: 38px; display: grid; place-items: center; margin-bottom: var(--sb-space-1);
    border-radius: var(--sb-radius-md); background: var(--sb-brand-surface); color: var(--sb-brand);
}
.em-ejemplo b { font-size: var(--sb-text-sm); color: var(--sb-text-strong); }
.em-ejemplo span:not(.em-ejemplo__ico) { font-size: var(--sb-text-xs); color: var(--sb-text-muted); }

.em-modos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sb-space-2); }
.em-modo {
    display: grid; gap: 2px; text-align: left; cursor: pointer;
    padding: var(--sb-space-3) var(--sb-space-4); border: 1px solid var(--sb-border); border-radius: var(--sb-radius-md);
    background: var(--sb-surface); font: inherit; color: var(--sb-text-muted);
}
.em-modo b { font-size: var(--sb-text-sm); color: var(--sb-text-strong); }
.em-modo span { font-size: var(--sb-text-xs); }
.em-modo.is-active { border-color: var(--sb-brand); background: var(--sb-brand-surface); color: var(--sb-brand); }

/* ------------------------------------------------------------- Vista previa */
.em-preview {
    width: 100%; height: 560px; display: block;
    border: 1px solid var(--sb-border); border-radius: var(--sb-radius-md); background: var(--sb-surface-muted);
}
.em-preview--modal { height: 65vh; }
.em-previa__asunto { margin: 0; display: grid; gap: 2px; }
.em-previa__asunto small { font-size: var(--sb-text-xs); color: var(--sb-text-subtle); text-transform: uppercase; letter-spacing: .04em; }
.em-previa__asunto b { font-size: var(--sb-text-base); color: var(--sb-text-strong); overflow-wrap: anywhere; }

/* ------------------------------------------------------------ Destinatarios */
.em-filtros, .em-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sb-space-2); }
.em-buscar {
    flex: 1 1 220px; min-width: 0;
    display: flex; align-items: center; gap: var(--sb-space-2);
    height: var(--sb-control-height); padding: 0 var(--sb-space-3);
    background: var(--sb-surface); border: 1px solid var(--sb-border); border-radius: var(--sb-radius-md);
    color: var(--sb-text-subtle);
}
.em-buscar:focus-within { border-color: var(--sb-brand); }
.em-buscar input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: inherit; font-size: var(--sb-text-sm); color: var(--sb-text); }
.em-select { flex: 0 1 190px; width: auto; min-width: 0; }

.em-seleccion {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sb-space-2);
    padding-bottom: var(--sb-space-2); border-bottom: 1px solid var(--sb-border-subtle);
}
.em-seleccion__todos { display: inline-flex; align-items: center; gap: var(--sb-space-3); cursor: pointer; padding-left: var(--sb-space-3); font-size: var(--sb-text-sm); color: var(--sb-text); }

.em-lista { max-height: 430px; overflow-y: auto; margin-inline: calc(var(--sb-space-2) * -1); padding-inline: var(--sb-space-2); }
.em-usuario {
    height: 54px; box-sizing: border-box;
    display: flex; align-items: center; gap: var(--sb-space-3); cursor: pointer;
    padding: 0 var(--sb-space-3); border-radius: var(--sb-radius-md); border-bottom: 1px solid var(--sb-border-subtle);
}
.em-usuario:hover { background: var(--sb-surface-subtle); }
.em-usuario.is-selected { background: var(--sb-brand-surface); }
.em-usuario.is-off { cursor: default; opacity: .6; }
.em-usuario__texto { flex: 1; min-width: 0; display: grid; }
.em-usuario__texto b, .em-usuario__texto small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.em-usuario__texto b { font-size: var(--sb-text-sm); font-weight: var(--sb-weight-semibold); color: var(--sb-text-strong); }
.em-usuario__texto small { font-size: var(--sb-text-xs); color: var(--sb-text-subtle); }

/* ---------------------------------------------------------------- Historial */
.em-historial { display: grid; gap: var(--sb-space-4); }
.em-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sb-space-3); }
.em-kpi {
    display: grid; gap: 2px; align-content: start;
    padding: var(--sb-space-3) var(--sb-space-4);
    background: var(--sb-surface); border: 1px solid var(--sb-border); border-radius: var(--sb-radius-lg);
    border-top: 3px solid var(--sb-border-strong);
}
.em-kpi span { font-size: var(--sb-text-xs); font-weight: var(--sb-weight-semibold); color: var(--sb-text-muted); text-transform: uppercase; letter-spacing: .03em; }
.em-kpi b { font-size: var(--sb-text-2xl); font-weight: var(--sb-weight-bold); color: var(--sb-text-strong); line-height: var(--sb-leading-tight); }
.em-kpi small { font-size: var(--sb-text-xs); color: var(--sb-text-subtle); }
.em-kpi.success { border-top-color: var(--sb-success); }
.em-kpi.danger { border-top-color: var(--sb-danger); }
.em-kpi.info { border-top-color: var(--sb-info); }

.em-envios { display: grid; gap: var(--sb-space-3); }
.em-envio {
    display: grid; gap: var(--sb-space-3); padding: var(--sb-space-4);
    background: var(--sb-surface); border: 1px solid var(--sb-border); border-radius: var(--sb-radius-lg);
}
.em-envio.is-open { box-shadow: var(--sb-shadow-sm); }
.em-envio__cabecera { display: flex; align-items: flex-start; gap: var(--sb-space-3); }
.em-envio__ico {
    width: 40px; height: 40px; flex: 0 0 auto; display: grid; place-items: center;
    border-radius: var(--sb-radius-md); background: var(--sb-surface-muted); color: var(--sb-text-muted);
}
.em-envio__ico.success { background: var(--sb-success-surface); color: var(--sb-success-text); }
.em-envio__ico.warning { background: var(--sb-warning-surface); color: var(--sb-warning-text); }
.em-envio__ico.danger { background: var(--sb-danger-surface); color: var(--sb-danger-text); }
.em-envio__ico.info { background: var(--sb-info-surface); color: var(--sb-info-text); }
.em-envio__texto { flex: 1; min-width: 0; }
.em-envio__texto h3 { margin: 0; font-size: var(--sb-text-base); font-weight: var(--sb-weight-bold); color: var(--sb-text-strong); overflow-wrap: anywhere; }
.em-envio__texto p { margin: 2px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--sb-space-2); font-size: var(--sb-text-sm); color: var(--sb-text-muted); }
.em-envio__meta { display: grid; justify-items: end; gap: 2px; flex: 0 0 auto; font-size: var(--sb-text-xs); color: var(--sb-text-subtle); }
.em-envio__meta time { font-weight: var(--sb-weight-semibold); color: var(--sb-text-muted); }
.em-envio__chips { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sb-space-2); }
.em-envio__acciones { margin-left: auto; display: inline-flex; flex-wrap: wrap; gap: var(--sb-space-1); }

.em-tabla-wrap { overflow-x: auto; border: 1px solid var(--sb-border-subtle); border-radius: var(--sb-radius-md); }
.em-tabla { width: 100%; border-collapse: collapse; font-size: var(--sb-text-sm); }
.em-tabla th {
    text-align: left; padding: var(--sb-space-2) var(--sb-space-3); background: var(--sb-surface-subtle);
    font-size: var(--sb-text-xs); font-weight: var(--sb-weight-semibold); color: var(--sb-text-muted); text-transform: uppercase; letter-spacing: .03em;
}
.em-tabla td { padding: var(--sb-space-2) var(--sb-space-3); border-top: 1px solid var(--sb-border-subtle); vertical-align: top; color: var(--sb-text); }
.em-tabla td b { display: block; font-weight: var(--sb-weight-semibold); color: var(--sb-text-strong); }
.em-tabla td small { color: var(--sb-text-subtle); font-size: var(--sb-text-xs); }
.em-tabla__accion { width: 1%; white-space: nowrap; text-align: right; }

/* -------------------------------------------------------------------- Vacío */
.em-vacio {
    display: grid; justify-items: center; gap: var(--sb-space-2); text-align: center;
    padding: var(--sb-space-10) var(--sb-space-4);
    border: 1px dashed var(--sb-border-strong); border-radius: var(--sb-radius-lg);
    color: var(--sb-text-muted); font-size: var(--sb-text-sm);
}
.em-vacio i { font-size: var(--sb-text-2xl); color: var(--sb-text-subtle); }
.em-vacio b { color: var(--sb-text); }

/* -------------------------------------------------------------- Responsive */
@media (max-width: 1100px) {
    .em-layout, .em-layout--config { grid-template-columns: minmax(0, 1fr); }
    .em-card--fija { position: static; }
}
@media (max-width: 640px) {
    .em-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .em-form { grid-template-columns: minmax(0, 1fr); }
    .em-campo--medio { grid-column: 1 / -1; }
    .em-modos { grid-template-columns: minmax(0, 1fr); }
    .em-card { padding: var(--sb-space-4); }
    .em-tabs { width: 100%; }
    .em-tab { flex: 1 1 auto; justify-content: center; }
    .em-preview { height: 420px; }
    .em-envio__meta { display: none; }
    .em-envio__acciones { margin-left: 0; }
}