/* =========================================================
   WIRTZ HUB · COMERCIAL DIGITAL
   EMAIL MARKETING
   PARTE 1 DE 4
   ========================================================= */


/* =========================================================
   VARIABLES
   ========================================================= */

#emailMarketingPage,
.email-marketing-modal-root {
  --em-bg:
    #f4f5f7;

  --em-bg-soft:
    #f8f9fa;

  --em-surface:
    #ffffff;

  --em-surface-soft:
    #f7f8fa;

  --em-surface-strong:
    #f0f1f3;

  --em-surface-hover:
    #f2f3f5;

  --em-text:
    #090909;

  --em-text-soft:
    #242424;

  --em-text-muted:
    #565b62;

  --em-text-faint:
    #777d85;

  --em-border:
    #c7cbd1;

  --em-border-soft:
    #d9dce1;

  --em-border-strong:
    #9fa5ad;

  --em-black:
    #080808;

  --em-black-soft:
    #111111;

  --em-white:
    #ffffff;

  --em-success:
    #166534;

  --em-success-soft:
    #ecf8f0;

  --em-warning:
    #9a6208;

  --em-warning-soft:
    #fff8e8;

  --em-danger:
    #b42318;

  --em-danger-soft:
    #fff1f0;

  --em-info:
    #245ea8;

  --em-info-soft:
    #eef5ff;

  --em-radius-xs:
    6px;

  --em-radius-sm:
    8px;

  --em-radius-md:
    10px;

  --em-radius-lg:
    14px;

  --em-radius-xl:
    18px;

  --em-shadow-xs:
    0 1px 2px
    rgba(
      0,
      0,
      0,
      0.04
    );

  --em-shadow-sm:
    0 8px 22px
    rgba(
      0,
      0,
      0,
      0.055
    );

  --em-shadow-md:
    0 20px 50px
    rgba(
      0,
      0,
      0,
      0.09
    );

  --em-transition-fast:
    120ms ease;

  --em-transition:
    180ms ease;

  --em-font:
    "DM Sans",
    Inter,
    Arial,
    sans-serif;
}


/* =========================================================
   DARK MODE
   ========================================================= */

html[data-theme="dark"]
#emailMarketingPage,
body.dark
#emailMarketingPage,
html[data-theme="dark"]
.email-marketing-modal-root,
body.dark
.email-marketing-modal-root {
  --em-bg:
    #050505;

  --em-bg-soft:
    #090909;

  --em-surface:
    #0b0b0b;

  --em-surface-soft:
    #101010;

  --em-surface-strong:
    #151515;

  --em-surface-hover:
    #171717;

  --em-text:
    #ffffff;

  --em-text-soft:
    #f1f1f1;

  --em-text-muted:
    #b8b8b8;

  --em-text-faint:
    #8a8a8a;

  --em-border:
    #313131;

  --em-border-soft:
    #242424;

  --em-border-strong:
    #4b4b4b;

  --em-black:
    #000000;

  --em-black-soft:
    #080808;

  --em-white:
    #ffffff;

  --em-success:
    #7bd99b;

  --em-success-soft:
    #102117;

  --em-warning:
    #f0bf69;

  --em-warning-soft:
    #211a0d;

  --em-danger:
    #ff837a;

  --em-danger-soft:
    #251110;

  --em-info:
    #83b8ff;

  --em-info-soft:
    #0e1928;

  --em-shadow-xs:
    0 1px 2px
    rgba(
      0,
      0,
      0,
      0.35
    );

  --em-shadow-sm:
    0 10px 26px
    rgba(
      0,
      0,
      0,
      0.36
    );

  --em-shadow-md:
    0 24px 70px
    rgba(
      0,
      0,
      0,
      0.48
    );
}


/* =========================================================
   ROOT
   ========================================================= */

#emailMarketingPage {
  width:
    100%;

  min-width:
    0;

  min-height:
    100%;

  box-sizing:
    border-box;

  color:
    var(
      --em-text
    );

  background:
    var(
      --em-bg
    );

  font-family:
    var(
      --em-font
    );

  font-size:
    14px;

  font-weight:
    600;

  line-height:
    1.45;

  text-rendering:
    optimizeLegibility;

  -webkit-font-smoothing:
    antialiased;
}


#emailMarketingPage *,
#emailMarketingPage *::before,
#emailMarketingPage *::after,
.email-marketing-modal-root *,
.email-marketing-modal-root *::before,
.email-marketing-modal-root *::after {
  box-sizing:
    border-box;
}


/* =========================================================
   APP SHELL
   ========================================================= */

.email-marketing-shell {
  display:
    grid;

  grid-template-columns:
    auto
    minmax(
      0,
      1fr
    )
    auto;

  width:
    100%;

  min-width:
    0;

  min-height:
    100dvh;

  background:
    var(
      --em-bg
    );
}


.email-marketing-shell__sidebar {
  position:
    relative;

  z-index:
    30;

  min-width:
    0;
}


.email-marketing-shell__workspace {
  display:
    flex;

  flex-direction:
    column;

  min-width:
    0;

  min-height:
    100dvh;

  overflow:
    hidden;
}


.email-marketing-shell__topbar {
  position:
    relative;

  z-index:
    25;

  flex:
    0 0 auto;

  min-width:
    0;
}


.email-marketing-shell__main {
  position:
    relative;

  z-index:
    1;

  flex:
    1 1 auto;

  width:
    100%;

  min-width:
    0;

  min-height:
    0;

  overflow-x:
    hidden;

  overflow-y:
    auto;

  background:
    var(
      --em-bg
    );
}


.email-marketing-shell__footer {
  position:
    relative;

  z-index:
    5;

  flex:
    0 0 auto;

  min-width:
    0;
}


.email-marketing-shell__rightbar {
  position:
    relative;

  z-index:
    35;

  min-width:
    0;
}


/* =========================================================
   PAGE
   ========================================================= */

.email-marketing-page {
  display:
    flex;

  flex-direction:
    column;

  gap:
    18px;

  width:
    100%;

  max-width:
    1680px;

  min-width:
    0;

  min-height:
    100%;

  margin:
    0 auto;

  padding:
    24px
    26px
    34px;
}


/* =========================================================
   PAGE HEADER
   ========================================================= */

.email-marketing-page-header {
  display:
    flex;

  align-items:
    flex-start;

  justify-content:
    space-between;

  gap:
    20px;

  width:
    100%;

  padding:
    22px
    24px;

  border:
    1px solid
    var(
      --em-border
    );

  border-radius:
    var(
      --em-radius-lg
    );

  background:
    var(
      --em-surface
    );

  box-shadow:
    var(
      --em-shadow-xs
    );
}


.email-marketing-page-header__heading {
  display:
    flex;

  flex-direction:
    column;

  gap:
    5px;

  min-width:
    0;
}


.email-marketing-page-header__eyebrow {
  color:
    var(
      --em-text-muted
    );

  font-size:
    11px;

  font-weight:
    800;

  letter-spacing:
    0.085em;

  text-transform:
    uppercase;
}


.email-marketing-page-header h1 {
  margin:
    0;

  color:
    var(
      --em-text
    );

  font-size:
    clamp(
      24px,
      2.2vw,
      32px
    );

  font-weight:
    850;

  line-height:
    1.08;

  letter-spacing:
    -0.035em;
}


.email-marketing-page-header p {
  max-width:
    720px;

  margin:
    2px
    0
    0;

  color:
    var(
      --em-text-muted
    );

  font-size:
    13px;

  font-weight:
    600;

  line-height:
    1.5;
}


.email-marketing-page-header__actions {
  display:
    flex;

  align-items:
    center;

  justify-content:
    flex-end;

  flex-wrap:
    wrap;

  gap:
    9px;

  flex:
    0 0 auto;
}


.email-marketing-page-header__campaign {
  display:
    inline-flex;

  align-items:
    center;

  min-height:
    38px;

  padding:
    0
    13px;

  border:
    1px solid
    var(
      --em-border
    );

  border-radius:
    var(
      --em-radius-sm
    );

  color:
    var(
      --em-text-soft
    );

  background:
    var(
      --em-surface-soft
    );

  font-size:
    12px;

  font-weight:
    800;
}


/* =========================================================
   NAVIGATION
   ========================================================= */

.email-marketing-navigation {
  display:
    flex;

  align-items:
    center;

  gap:
    5px;

  width:
    100%;

  min-width:
    0;

  padding:
    6px;

  overflow-x:
    auto;

  border:
    1px solid
    var(
      --em-border
    );

  border-radius:
    var(
      --em-radius-md
    );

  background:
    var(
      --em-surface
    );

  scrollbar-width:
    none;
}


.email-marketing-navigation::-webkit-scrollbar {
  display:
    none;
}


.email-marketing-navigation__item {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    8px;

  min-height:
    38px;

  padding:
    0
    14px;

  border:
    1px solid
    transparent;

  border-radius:
    7px;

  color:
    var(
      --em-text-muted
    );

  background:
    transparent;

  font-family:
    inherit;

  font-size:
    13px;

  font-weight:
    750;

  line-height:
    1;

  white-space:
    nowrap;

  cursor:
    pointer;

  transition:
    background
    var(
      --em-transition-fast
    ),
    color
    var(
      --em-transition-fast
    ),
    border-color
    var(
      --em-transition-fast
    ),
    transform
    var(
      --em-transition-fast
    );
}


.email-marketing-navigation__item:hover {
  color:
    var(
      --em-text
    );

  border-color:
    var(
      --em-border-soft
    );

  background:
    var(
      --em-surface-hover
    );
}


.email-marketing-navigation__item:active {
  transform:
    translateY(
      1px
    );
}


.email-marketing-navigation__item--active {
  color:
    var(
      --em-white
    );

  border-color:
    var(
      --em-black
    );

  background:
    var(
      --em-black
    );
}


html[data-theme="dark"]
.email-marketing-navigation__item--active,
body.dark
.email-marketing-navigation__item--active {
  color:
    #000000;

  border-color:
    #ffffff;

  background:
    #ffffff;
}


/* =========================================================
   BUTTONS
   ========================================================= */

.email-marketing-button {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    7px;

  min-height:
    38px;

  padding:
    0
    14px;

  border:
    1px solid
    transparent;

  border-radius:
    var(
      --em-radius-sm
    );

  font-family:
    inherit;

  font-size:
    12px;

  font-weight:
    800;

  line-height:
    1;

  text-decoration:
    none;

  white-space:
    nowrap;

  cursor:
    pointer;

  user-select:
    none;

  transition:
    background
    var(
      --em-transition-fast
    ),
    color
    var(
      --em-transition-fast
    ),
    border-color
    var(
      --em-transition-fast
    ),
    transform
    var(
      --em-transition-fast
    ),
    opacity
    var(
      --em-transition-fast
    );
}


.email-marketing-button:hover:not(
  :disabled
) {
  transform:
    translateY(
      -1px
    );
}


.email-marketing-button:active:not(
  :disabled
) {
  transform:
    translateY(
      0
    );
}


.email-marketing-button:disabled {
  opacity:
    0.42;

  cursor:
    not-allowed;
}


.email-marketing-button--primary {
  border-color:
    var(
      --em-black
    );

  color:
    var(
      --em-white
    );

  background:
    var(
      --em-black
    );
}


.email-marketing-button--primary:hover:not(
  :disabled
) {
  background:
    var(
      --em-black-soft
    );
}


html[data-theme="dark"]
.email-marketing-button--primary,
body.dark
.email-marketing-button--primary {
  border-color:
    #ffffff;

  color:
    #000000;

  background:
    #ffffff;
}


html[data-theme="dark"]
.email-marketing-button--primary:hover:not(
  :disabled
),
body.dark
.email-marketing-button--primary:hover:not(
  :disabled
) {
  background:
    #e7e7e7;
}


.email-marketing-button--secondary {
  border-color:
    var(
      --em-border-strong
    );

  color:
    var(
      --em-text
    );

  background:
    var(
      --em-surface
    );
}


.email-marketing-button--secondary:hover:not(
  :disabled
) {
  border-color:
    var(
      --em-text-muted
    );

  background:
    var(
      --em-surface-hover
    );
}


.email-marketing-button--danger {
  border-color:
    color-mix(
      in srgb,
      var(
        --em-danger
      )
      45%,
      var(
        --em-border
      )
    );

  color:
    var(
      --em-danger
    );

  background:
    var(
      --em-danger-soft
    );
}


.email-marketing-button--danger:hover:not(
  :disabled
) {
  border-color:
    var(
      --em-danger
    );
}


/* =========================================================
   ICON BUTTON
   ========================================================= */

.email-marketing-icon-button {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  width:
    36px;

  height:
    36px;

  flex:
    0 0 36px;

  padding:
    0;

  border:
    1px solid
    var(
      --em-border
    );

  border-radius:
    var(
      --em-radius-sm
    );

  color:
    var(
      --em-text-soft
    );

  background:
    var(
      --em-surface
    );

  cursor:
    pointer;

  transition:
    background
    var(
      --em-transition-fast
    ),
    color
    var(
      --em-transition-fast
    ),
    border-color
    var(
      --em-transition-fast
    ),
    transform
    var(
      --em-transition-fast
    );
}


.email-marketing-icon-button:hover:not(
  :disabled
) {
  color:
    var(
      --em-text
    );

  border-color:
    var(
      --em-border-strong
    );

  background:
    var(
      --em-surface-hover
    );

  transform:
    translateY(
      -1px
    );
}


.email-marketing-icon-button:disabled {
  opacity:
    0.4;

  cursor:
    not-allowed;
}


.email-marketing-icon-button--danger {
  color:
    var(
      --em-danger
    );
}


.email-marketing-icon-button--danger:hover:not(
  :disabled
) {
  border-color:
    var(
      --em-danger
    );

  background:
    var(
      --em-danger-soft
    );
}


/* =========================================================
   METRICS GRID
   ========================================================= */

.email-marketing-metrics-grid {
  display:
    grid;

  grid-template-columns:
    repeat(
      4,
      minmax(
        0,
        1fr
      )
    );

  gap:
    12px;

  width:
    100%;
}


.email-marketing-metric-card {
  display:
    flex;

  align-items:
    center;

  gap:
    13px;

  min-width:
    0;

  min-height:
    104px;

  padding:
    17px;

  border:
    1px solid
    var(
      --em-border
    );

  border-radius:
    var(
      --em-radius-md
    );

  background:
    var(
      --em-surface
    );

  box-shadow:
    var(
      --em-shadow-xs
    );
}


.email-marketing-metric-card__icon {
  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  width:
    42px;

  height:
    42px;

  flex:
    0 0 42px;

  border:
    1px solid
    var(
      --em-border
    );

  border-radius:
    9px;

  color:
    var(
      --em-text
    );

  background:
    var(
      --em-surface-soft
    );
}


.email-marketing-metric-card__content {
  display:
    flex;

  flex-direction:
    column;

  min-width:
    0;
}


.email-marketing-metric-card__content > span {
  color:
    var(
      --em-text-muted
    );

  font-size:
    11px;

  font-weight:
    800;

  letter-spacing:
    0.045em;

  text-transform:
    uppercase;
}


.email-marketing-metric-card__content > strong {
  margin-top:
    2px;

  color:
    var(
      --em-text
    );

  font-size:
    27px;

  font-weight:
    850;

  line-height:
    1.1;

  letter-spacing:
    -0.035em;
}


.email-marketing-metric-card__content > small {
  margin-top:
    3px;

  color:
    var(
      --em-text-muted
    );

  font-size:
    11px;

  font-weight:
    650;
}


/* =========================================================
   HOME GRID
   ========================================================= */

.email-marketing-home-grid {
  display:
    grid;

  grid-template-columns:
    minmax(
      0,
      1.3fr
    )
    minmax(
      320px,
      0.7fr
    );

  gap:
    14px;

  width:
    100%;
}


/* =========================================================
   PANEL
   ========================================================= */

.email-marketing-panel {
  min-width:
    0;

  overflow:
    hidden;

  border:
    1px solid
    var(
      --em-border
    );

  border-radius:
    var(
      --em-radius-lg
    );

  background:
    var(
      --em-surface
    );

  box-shadow:
    var(
      --em-shadow-xs
    );
}


.email-marketing-panel__header {
  display:
    flex;

  align-items:
    flex-start;

  justify-content:
    space-between;

  gap:
    16px;

  padding:
    18px
    20px;

  border-bottom:
    1px solid
    var(
      --em-border
    );
}


.email-marketing-panel__header > div {
  min-width:
    0;
}


.email-marketing-panel__eyebrow {
  display:
    block;

  margin-bottom:
    4px;

  color:
    var(
      --em-text-muted
    );

  font-size:
    10px;

  font-weight:
    850;

  letter-spacing:
    0.08em;

  text-transform:
    uppercase;
}


.email-marketing-panel__header h2 {
  margin:
    0;

  color:
    var(
      --em-text
    );

  font-size:
    18px;

  font-weight:
    850;

  line-height:
    1.2;

  letter-spacing:
    -0.02em;
}


.email-marketing-panel__header p {
  margin:
    4px
    0
    0;

  color:
    var(
      --em-text-muted
    );

  font-size:
    12px;

  font-weight:
    600;
}


.email-marketing-panel__body {
  min-width:
    0;

  padding:
    16px;
}


/* =========================================================
   CAMPAIGN LIST
   ========================================================= */

.email-marketing-campaign-list,
.email-marketing-schedule-list {
  display:
    flex;

  flex-direction:
    column;

  gap:
    8px;
}


.email-marketing-campaign-row {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    14px;

  width:
    100%;

  min-width:
    0;

  padding:
    13px
    14px;

  border:
    1px solid
    var(
      --em-border-soft
    );

  border-radius:
    var(
      --em-radius-sm
    );

  color:
    inherit;

  background:
    var(
      --em-surface-soft
    );

  text-align:
    left;

  cursor:
    pointer;

  transition:
    background
    var(
      --em-transition-fast
    ),
    border-color
    var(
      --em-transition-fast
    ),
    transform
    var(
      --em-transition-fast
    );
}


.email-marketing-campaign-row:hover {
  border-color:
    var(
      --em-border-strong
    );

  background:
    var(
      --em-surface-hover
    );

  transform:
    translateY(
      -1px
    );
}


.email-marketing-campaign-row__main {
  display:
    flex;

  flex-direction:
    column;

  gap:
    2px;

  min-width:
    0;
}


.email-marketing-campaign-row__main strong {
  overflow:
    hidden;

  color:
    var(
      --em-text
    );

  font-size:
    13px;

  font-weight:
    800;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


.email-marketing-campaign-row__main span {
  overflow:
    hidden;

  color:
    var(
      --em-text-muted
    );

  font-size:
    11px;

  font-weight:
    600;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


.email-marketing-campaign-row__meta {
  display:
    flex;

  align-items:
    flex-end;

  flex-direction:
    column;

  gap:
    4px;

  flex:
    0 0 auto;
}


.email-marketing-campaign-row__meta small {
  color:
    var(
      --em-text-faint
    );

  font-size:
    10px;

  font-weight:
    650;
}


/* =========================================================
   SCHEDULE ROW
   ========================================================= */

.email-marketing-schedule-row {
  display:
    grid;

  grid-template-columns:
    38px
    minmax(
      0,
      1fr
    )
    auto;

  align-items:
    center;

  gap:
    11px;

  width:
    100%;

  min-width:
    0;

  padding:
    12px
    13px;

  border:
    1px solid
    var(
      --em-border-soft
    );

  border-radius:
    var(
      --em-radius-sm
    );

  color:
    inherit;

  background:
    var(
      --em-surface-soft
    );

  text-align:
    left;

  cursor:
    pointer;

  transition:
    background
    var(
      --em-transition-fast
    ),
    border-color
    var(
      --em-transition-fast
    );
}


.email-marketing-schedule-row:hover {
  border-color:
    var(
      --em-border-strong
    );

  background:
    var(
      --em-surface-hover
    );
}


.email-marketing-schedule-row__icon {
  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  width:
    38px;

  height:
    38px;

  border:
    1px solid
    var(
      --em-border
    );

  border-radius:
    8px;

  background:
    var(
      --em-surface
    );
}


.email-marketing-schedule-row__content {
  display:
    flex;

  flex-direction:
    column;

  min-width:
    0;
}


.email-marketing-schedule-row__content strong {
  overflow:
    hidden;

  color:
    var(
      --em-text
    );

  font-size:
    12px;

  font-weight:
    800;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


.email-marketing-schedule-row__content span,
.email-marketing-schedule-row time {
  color:
    var(
      --em-text-muted
    );

  font-size:
    10px;

  font-weight:
    650;
}


/* =========================================================
   QUICK ACTIONS
   ========================================================= */

.email-marketing-quick-actions {
  display:
    grid;

  grid-template-columns:
    repeat(
      2,
      minmax(
        0,
        1fr
      )
    );

  gap:
    12px;
}


.email-marketing-quick-action {
  display:
    grid;

  grid-template-columns:
    46px
    minmax(
      0,
      1fr
    )
    auto;

  align-items:
    center;

  gap:
    14px;

  min-width:
    0;

  padding:
    18px;

  border:
    1px solid
    var(
      --em-border
    );

  border-radius:
    var(
      --em-radius-md
    );

  background:
    var(
      --em-surface
    );

  box-shadow:
    var(
      --em-shadow-xs
    );
}


.email-marketing-quick-action__icon {
  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  width:
    46px;

  height:
    46px;

  border:
    1px solid
    var(
      --em-border
    );

  border-radius:
    10px;

  background:
    var(
      --em-surface-soft
    );
}


.email-marketing-quick-action > div:nth-child(
  2
) {
  min-width:
    0;
}


.email-marketing-quick-action > div:nth-child(
  2
) > span {
  color:
    var(
      --em-text-muted
    );

  font-size:
    10px;

  font-weight:
    850;

  letter-spacing:
    0.07em;
}


.email-marketing-quick-action h3 {
  margin:
    2px
    0
    3px;

  color:
    var(
      --em-text
    );

  font-size:
    15px;

  font-weight:
    850;
}


.email-marketing-quick-action p {
  margin:
    0;

  color:
    var(
      --em-text-muted
    );

  font-size:
    11px;

  font-weight:
    600;

  line-height:
    1.45;
}


/* =========================================================
   VIEW HEADER
   ========================================================= */

.email-marketing-view-header {
  display:
    flex;

  align-items:
    flex-start;

  justify-content:
    space-between;

  gap:
    14px;

  width:
    100%;

  padding:
    18px
    20px;

  border:
    1px solid
    var(
      --em-border
    );

  border-radius:
    var(
      --em-radius-md
    );

  background:
    var(
      --em-surface
    );
}


.email-marketing-view-header h2 {
  margin:
    0;

  color:
    var(
      --em-text
    );

  font-size:
    20px;

  font-weight:
    850;

  letter-spacing:
    -0.025em;
}


.email-marketing-view-header p {
  margin:
    4px
    0
    0;

  color:
    var(
      --em-text-muted
    );

  font-size:
    12px;

  font-weight:
    600;
}


/* =========================================================
   CAMPAIGN LAYOUT
   ========================================================= */

.email-marketing-campaign-layout {
  display:
    flex;

  flex-direction:
    column;

  gap:
    14px;

  width:
    100%;

  min-width:
    0;
}


/* =========================================================
   CAMPAIGN ACTIONS
   ========================================================= */

.email-marketing-campaign-actions {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    14px;

  width:
    100%;

  padding:
    12px
    14px;

  border:
    1px solid
    var(
      --em-border
    );

  border-radius:
    var(
      --em-radius-md
    );

  background:
    var(
      --em-surface
    );

  box-shadow:
    var(
      --em-shadow-xs
    );
}


.email-marketing-campaign-actions__left,
.email-marketing-campaign-actions__right {
  display:
    flex;

  align-items:
    center;

  flex-wrap:
    wrap;

  gap:
    8px;
}


.email-marketing-campaign-actions__left > span:not(
  .email-marketing-status
) {
  color:
    var(
      --em-text-muted
    );

  font-size:
    11px;

  font-weight:
    700;
}


/* =========================================================
   FORM SECTION
   ========================================================= */

.email-marketing-form-section {
  width:
    100%;

  min-width:
    0;

  padding:
    20px;

  border:
    1px solid
    var(
      --em-border
    );

  border-radius:
    var(
      --em-radius-lg
    );

  background:
    var(
      --em-surface
    );

  box-shadow:
    var(
      --em-shadow-xs
    );
}


.email-marketing-form-section__header {
  display:
    flex;

  align-items:
    flex-start;

  justify-content:
    space-between;

  gap:
    14px;

  margin-bottom:
    17px;

  padding-bottom:
    14px;

  border-bottom:
    1px solid
    var(
      --em-border
    );
}


.email-marketing-form-section__header > div {
  min-width:
    0;
}


.email-marketing-form-section__header > div > span {
  display:
    block;

  margin-bottom:
    3px;

  color:
    var(
      --em-text-muted
    );

  font-size:
    10px;

  font-weight:
    850;

  letter-spacing:
    0.08em;

  text-transform:
    uppercase;
}


.email-marketing-form-section__header h3 {
  margin:
    0;

  color:
    var(
      --em-text
    );

  font-size:
    17px;

  font-weight:
    850;

  letter-spacing:
    -0.02em;
}


.email-marketing-form-section__header p {
  margin:
    4px
    0
    0;

  color:
    var(
      --em-text-muted
    );

  font-size:
    11px;

  font-weight:
    600;

  line-height:
    1.45;
}


/* =========================================================
   FORM GRID
   ========================================================= */

.email-marketing-form-grid {
  display:
    grid;

  grid-template-columns:
    repeat(
      2,
      minmax(
        0,
        1fr
      )
    );

  gap:
    14px;

  width:
    100%;
}


.email-marketing-field--wide {
  grid-column:
    1 /
    -1;
}


/* =========================================================
   FIELD
   ========================================================= */

.email-marketing-field {
  display:
    flex;

  flex-direction:
    column;

  gap:
    6px;

  min-width:
    0;
}


.email-marketing-field > span {
  color:
    var(
      --em-text-soft
    );

  font-size:
    11px;

  font-weight:
    800;
}


.email-marketing-field input,
.email-marketing-field textarea,
.email-marketing-field select,
.email-marketing-select {
  width:
    100%;

  min-width:
    0;

  min-height:
    40px;

  padding:
    9px
    11px;

  border:
    1px solid
    var(
      --em-border-strong
    );

  border-radius:
    var(
      --em-radius-sm
    );

  outline:
    0;

  color:
    var(
      --em-text
    );

  background:
    var(
      --em-surface
    );

  font-family:
    inherit;

  font-size:
    12px;

  font-weight:
    650;

  transition:
    border-color
    var(
      --em-transition-fast
    ),
    background
    var(
      --em-transition-fast
    ),
    box-shadow
    var(
      --em-transition-fast
    );
}


.email-marketing-field textarea {
  min-height:
    86px;

  resize:
    vertical;

  line-height:
    1.5;
}


.email-marketing-field input::placeholder,
.email-marketing-field textarea::placeholder,
.email-marketing-search input::placeholder {
  color:
    var(
      --em-text-faint
    );

  opacity:
    1;
}


.email-marketing-field input:hover,
.email-marketing-field textarea:hover,
.email-marketing-field select:hover,
.email-marketing-select:hover {
  border-color:
    var(
      --em-text-muted
    );
}


.email-marketing-field input:focus,
.email-marketing-field textarea:focus,
.email-marketing-field select:focus,
.email-marketing-select:focus {
  border-color:
    var(
      --em-black
    );

  box-shadow:
    0 0 0 2px
    color-mix(
      in srgb,
      var(
        --em-black
      )
      9%,
      transparent
    );
}


html[data-theme="dark"]
.email-marketing-field input:focus,
html[data-theme="dark"]
.email-marketing-field textarea:focus,
html[data-theme="dark"]
.email-marketing-field select:focus,
html[data-theme="dark"]
.email-marketing-select:focus,
body.dark
.email-marketing-field input:focus,
body.dark
.email-marketing-field textarea:focus,
body.dark
.email-marketing-field select:focus,
body.dark
.email-marketing-select:focus {
  border-color:
    #ffffff;

  box-shadow:
    0 0 0 2px
    rgba(
      255,
      255,
      255,
      0.08
    );
}


/* =========================================================
   CHECK CARDS
   ========================================================= */

.email-marketing-check-card {
  display:
    flex;

  align-items:
    flex-start;

  gap:
    11px;

  min-height:
    82px;

  padding:
    13px;

  border:
    1px solid
    var(
      --em-border
    );

  border-radius:
    var(
      --em-radius-sm
    );

  background:
    var(
      --em-surface-soft
    );

  cursor:
    pointer;

  transition:
    border-color
    var(
      --em-transition-fast
    ),
    background
    var(
      --em-transition-fast
    );
}


.email-marketing-check-card:hover {
  border-color:
    var(
      --em-border-strong
    );

  background:
    var(
      --em-surface-hover
    );
}


.email-marketing-check-card > input {
  width:
    16px;

  height:
    16px;

  flex:
    0 0 16px;

  margin:
    2px
    0
    0;

  accent-color:
    var(
      --em-black
    );

  cursor:
    pointer;
}


html[data-theme="dark"]
.email-marketing-check-card > input,
body.dark
.email-marketing-check-card > input {
  accent-color:
    #ffffff;
}


.email-marketing-check-card > span {
  display:
    grid;

  grid-template-columns:
    20px
    minmax(
      0,
      1fr
    );

  align-items:
    start;

  gap:
    2px
    7px;

  min-width:
    0;
}


.email-marketing-check-card > span > svg {
  grid-column:
    1;

  grid-row:
    1 /
    span 2;

  margin-top:
    1px;

  color:
    var(
      --em-text-muted
    );
}


.email-marketing-check-card strong {
  grid-column:
    2;

  color:
    var(
      --em-text
    );

  font-size:
    12px;

  font-weight:
    800;
}


.email-marketing-check-card small {
  grid-column:
    2;

  color:
    var(
      --em-text-muted
    );

  font-size:
    10px;

  font-weight:
    600;

  line-height:
    1.4;
}


.email-marketing-check-card--disabled {
  opacity:
    0.48;

  cursor:
    not-allowed;
}


/* =========================================================
   STATUS
   ========================================================= */

.email-marketing-status {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  min-height:
    26px;

  padding:
    0
    9px;

  border:
    1px solid
    var(
      --em-border
    );

  border-radius:
    999px;

  color:
    var(
      --em-text-soft
    );

  background:
    var(
      --em-surface-soft
    );

  font-size:
    10px;

  font-weight:
    850;

  line-height:
    1;

  white-space:
    nowrap;
}


.email-marketing-status--borrador,
.email-marketing-status--pendiente {
  color:
    var(
      --em-text-soft
    );

  background:
    var(
      --em-surface-strong
    );
}


.email-marketing-status--preparando,
.email-marketing-status--programada,
.email-marketing-status--en-cola {
  color:
    var(
      --em-info
    );

  border-color:
    color-mix(
      in srgb,
      var(
        --em-info
      )
      35%,
      var(
        --em-border
      )
    );

  background:
    var(
      --em-info-soft
    );
}


.email-marketing-status--enviando,
.email-marketing-status--en-proceso,
.email-marketing-status--procesando {
  color:
    var(
      --em-warning
    );

  border-color:
    color-mix(
      in srgb,
      var(
        --em-warning
      )
      38%,
      var(
        --em-border
      )
    );

  background:
    var(
      --em-warning-soft
    );
}


.email-marketing-status--completada,
.email-marketing-status--enviado {
  color:
    var(
      --em-success
    );

  border-color:
    color-mix(
      in srgb,
      var(
        --em-success
      )
      36%,
      var(
        --em-border
      )
    );

  background:
    var(
      --em-success-soft
    );
}


.email-marketing-status--completada-con-errores,
.email-marketing-status--error,
.email-marketing-status--fallido,
.email-marketing-status--cancelada {
  color:
    var(
      --em-danger
    );

  border-color:
    color-mix(
      in srgb,
      var(
        --em-danger
      )
      35%,
      var(
        --em-border
      )
    );

  background:
    var(
      --em-danger-soft
    );
}


.email-marketing-status--pausada,
.email-marketing-status--omitido,
.email-marketing-status--archivada {
  color:
    var(
      --em-text-muted
    );

  border-color:
    var(
      --em-border
    );

  background:
    var(
      --em-surface-strong
    );
}


/* =========================================================
   TAG
   ========================================================= */

.email-marketing-tag {
  display:
    inline-flex;

  align-items:
    center;

  gap:
    5px;

  min-height:
    24px;

  padding:
    0
    8px;

  border:
    1px solid
    var(
      --em-border
    );

  border-radius:
    999px;

  color:
    var(
      --em-text-soft
    );

  background:
    var(
      --em-surface-soft
    );

  font-size:
    9px;

  font-weight:
    800;

  white-space:
    nowrap;
}


.email-marketing-tag--success {
  color:
    var(
      --em-success
    );

  border-color:
    color-mix(
      in srgb,
      var(
        --em-success
      )
      35%,
      var(
        --em-border
      )
    );

  background:
    var(
      --em-success-soft
    );
}


.email-marketing-tag--warning {
  color:
    var(
      --em-warning
    );

  border-color:
    color-mix(
      in srgb,
      var(
        --em-warning
      )
      35%,
      var(
        --em-border
      )
    );

  background:
    var(
      --em-warning-soft
    );
}


/* =========================================================
   SEARCH
   ========================================================= */

.email-marketing-search {
  display:
    flex;

  align-items:
    center;

  gap:
    8px;

  width:
    100%;

  min-width:
    0;

  min-height:
    40px;

  padding:
    0
    11px;

  border:
    1px solid
    var(
      --em-border-strong
    );

  border-radius:
    var(
      --em-radius-sm
    );

  color:
    var(
      --em-text-muted
    );

  background:
    var(
      --em-surface
    );

  transition:
    border-color
    var(
      --em-transition-fast
    ),
    box-shadow
    var(
      --em-transition-fast
    );
}


.email-marketing-search:focus-within {
  border-color:
    var(
      --em-black
    );

  box-shadow:
    0 0 0 2px
    color-mix(
      in srgb,
      var(
        --em-black
      )
      8%,
      transparent
    );
}


.email-marketing-search input {
  width:
    100%;

  min-width:
    0;

  height:
    38px;

  padding:
    0;

  border:
    0;

  outline:
    0;

  color:
    var(
      --em-text
    );

  background:
    transparent;

  font-family:
    inherit;

  font-size:
    12px;

  font-weight:
    650;
}


/* =========================================================
   SELECT
   ========================================================= */

.email-marketing-select {
  width:
    auto;

  min-width:
    180px;

  cursor:
    pointer;
}


/* =========================================================
   LOADING
   ========================================================= */

.email-marketing-loading {
  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  flex-direction:
    column;

  gap:
    5px;

  width:
    100%;

  min-height:
    180px;

  padding:
    24px;

  color:
    var(
      --em-text-muted
    );

  text-align:
    center;
}


.email-marketing-loading__spinner {
  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  width:
    40px;

  height:
    40px;

  margin-bottom:
    3px;

  border:
    1px solid
    var(
      --em-border
    );

  border-radius:
    50%;

  color:
    var(
      --em-text
    );

  background:
    var(
      --em-surface-soft
    );

  animation:
    emailMarketingSpin
    900ms
    linear
    infinite;
}


.email-marketing-loading strong {
  color:
    var(
      --em-text
    );

  font-size:
    12px;

  font-weight:
    800;
}


.email-marketing-loading span {
  font-size:
    10px;

  font-weight:
    600;
}


@keyframes emailMarketingSpin {
  from {
    transform:
      rotate(
        0deg
      );
  }

  to {
    transform:
      rotate(
        360deg
      );
  }
}


/* =========================================================
   EMPTY
   ========================================================= */

.email-marketing-empty {
  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  flex-direction:
    column;

  gap:
    6px;

  width:
    100%;

  min-height:
    220px;

  padding:
    28px;

  border:
    1px dashed
    var(
      --em-border-strong
    );

  border-radius:
    var(
      --em-radius-md
    );

  color:
    var(
      --em-text-muted
    );

  background:
    var(
      --em-surface-soft
    );

  text-align:
    center;
}


.email-marketing-empty--compact {
  min-height:
    128px;

  padding:
    18px;
}


.email-marketing-empty__icon {
  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  width:
    40px;

  height:
    40px;

  margin-bottom:
    2px;

  border:
    1px solid
    var(
      --em-border
    );

  border-radius:
    9px;

  color:
    var(
      --em-text
    );

  background:
    var(
      --em-surface
    );
}


.email-marketing-empty strong {
  color:
    var(
      --em-text
    );

  font-size:
    12px;

  font-weight:
    800;
}


.email-marketing-empty span {
  max-width:
    440px;

  font-size:
    10px;

  font-weight:
    600;

  line-height:
    1.45;
}


/* =========================================================
   SEGMENTED
   ========================================================= */

.email-marketing-segmented {
  display:
    inline-flex;

  align-items:
    center;

  gap:
    3px;

  padding:
    3px;

  border:
    1px solid
    var(
      --em-border
    );

  border-radius:
    var(
      --em-radius-sm
    );

  background:
    var(
      --em-surface-strong
    );
}


.email-marketing-segmented__button {
  min-height:
    32px;

  padding:
    0
    12px;

  border:
    1px solid
    transparent;

  border-radius:
    6px;

  color:
    var(
      --em-text-muted
    );

  background:
    transparent;

  font-family:
    inherit;

  font-size:
    11px;

  font-weight:
    800;

  cursor:
    pointer;
}


.email-marketing-segmented__button:hover {
  color:
    var(
      --em-text
    );

  background:
    var(
      --em-surface-hover
    );
}


.email-marketing-segmented__button--active {
  color:
    var(
      --em-text
    );

  border-color:
    var(
      --em-border
    );

  background:
    var(
      --em-surface
    );

  box-shadow:
    var(
      --em-shadow-xs
    );
}


/* =========================================================
   CHIP BUTTON
   ========================================================= */

.email-marketing-chip-button {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  min-height:
    30px;

  padding:
    0
    10px;

  border:
    1px solid
    var(
      --em-border
    );

  border-radius:
    999px;

  color:
    var(
      --em-text-soft
    );

  background:
    var(
      --em-surface
    );

  font-family:
    inherit;

  font-size:
    10px;

  font-weight:
    800;

  cursor:
    pointer;

  transition:
    background
    var(
      --em-transition-fast
    ),
    border-color
    var(
      --em-transition-fast
    ),
    color
    var(
      --em-transition-fast
    );
}


.email-marketing-chip-button:hover {
  border-color:
    var(
      --em-border-strong
    );

  background:
    var(
      --em-surface-hover
    );
}


.email-marketing-chip-button--danger {
  color:
    var(
      --em-danger
    );

  border-color:
    color-mix(
      in srgb,
      var(
        --em-danger
      )
      28%,
      var(
        --em-border
      )
    );
}


/* =========================================================
   INLINE FIELD
   ========================================================= */

.email-marketing-inline-field {
  display:
    flex;

  align-items:
    center;

  gap:
    8px;

  width:
    100%;
}


.email-marketing-inline-field input {
  flex:
    1 1 auto;

  min-width:
    0;
}


/* =========================================================
   GENERIC DISABLED
   ========================================================= */

#emailMarketingPage input:disabled,
#emailMarketingPage select:disabled,
#emailMarketingPage textarea:disabled,
.email-marketing-modal-root input:disabled,
.email-marketing-modal-root select:disabled,
.email-marketing-modal-root textarea:disabled {
  opacity:
    0.45;

  cursor:
    not-allowed;
}


/* =========================================================
   SELECTION
   ========================================================= */

#emailMarketingPage ::selection,
.email-marketing-modal-root ::selection {
  color:
    var(
      --em-white
    );

  background:
    var(
      --em-black
    );
}


/* =========================================================
   FIN PARTE 1 DE 4
   ========================================================= *//* =========================================================
   EDITOR GRID
   ========================================================= */

.email-marketing-editor-grid {
  display:
    grid;

  grid-template-columns:
    minmax(
      0,
      1fr
    )
    minmax(
      340px,
      0.9fr
    );

  gap:
    16px;

  width:
    100%;

  min-width:
    0;
}


.email-marketing-editor-textarea {
  width:
    100%;

  min-height:
    360px;

  padding:
    14px;

  border:
    1px solid
    var(
      --em-border-strong
    );

  border-radius:
    var(
      --em-radius-sm
    );

  outline:
    0;

  color:
    var(
      --em-text
    );

  background:
    var(
      --em-surface-soft
    );

  font-family:
    var(
      --em-font
    );

  font-size:
    12px;

  font-weight:
    650;

  line-height:
    1.6;

  resize:
    vertical;
}


.email-marketing-editor-textarea:hover {
  border-color:
    var(
      --em-text-muted
    );
}


.email-marketing-editor-textarea:focus {
  border-color:
    var(
      --em-black
    );

  background:
    var(
      --em-surface
    );

  box-shadow:
    0 0 0 2px
    color-mix(
      in srgb,
      var(
        --em-black
      )
      9%,
      transparent
    );
}


.email-marketing-editor-textarea--code {
  font-family:
    "JetBrains Mono",
    "SFMono-Regular",
    Consolas,
    monospace;

  font-size:
    11px;

  font-weight:
    550;

  tab-size:
    2;
}


/* =========================================================
   PREVIEW
   ========================================================= */

.email-marketing-preview-card {
  display:
    flex;

  flex-direction:
    column;

  min-width:
    0;

  min-height:
    420px;

  overflow:
    hidden;

  border:
    1px solid
    var(
      --em-border
    );

  border-radius:
    var(
      --em-radius-md
    );

  background:
    var(
      --em-surface-soft
    );
}


.email-marketing-preview-card__header {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  min-height:
    46px;

  padding:
    0
    14px;

  border-bottom:
    1px solid
    var(
      --em-border
    );

  color:
    var(
      --em-text-soft
    );

  background:
    var(
      --em-surface
    );

  font-size:
    11px;

  font-weight:
    800;
}


.email-marketing-preview-card__body {
  flex:
    1 1 auto;

  min-height:
    0;

  overflow:
    auto;

  padding:
    16px;
}


.email-marketing-email-preview {
  display:
    flex;

  justify-content:
    center;

  width:
    100%;

  min-height:
    100%;

  padding:
    26px
    14px;

  border:
    1px solid
    var(
      --em-border-soft
    );

  border-radius:
    var(
      --em-radius-sm
    );
}


.email-marketing-email-preview__content {
  width:
    100%;

  margin:
    0 auto;

  overflow-wrap:
    anywhere;

  color:
    #111111;

  background:
    #ffffff;
}


.email-marketing-email-preview__content img {
  max-width:
    100%;

  height:
    auto;
}


/* =========================================================
   VARIABLES
   ========================================================= */

.email-marketing-variables {
  margin-top:
    16px;

  padding:
    14px;

  border:
    1px solid
    var(
      --em-border
    );

  border-radius:
    var(
      --em-radius-sm
    );

  background:
    var(
      --em-surface-soft
    );
}


.email-marketing-variables__header {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    12px;

  margin-bottom:
    10px;
}


.email-marketing-variables__header > div {
  display:
    flex;

  flex-direction:
    column;

  gap:
    2px;
}


.email-marketing-variables__header strong {
  color:
    var(
      --em-text
    );

  font-size:
    12px;

  font-weight:
    850;
}


.email-marketing-variables__header span {
  color:
    var(
      --em-text-muted
    );

  font-size:
    10px;

  font-weight:
    600;
}


.email-marketing-variables__list {
  display:
    flex;

  flex-wrap:
    wrap;

  gap:
    7px;
}


.email-marketing-variable {
  display:
    inline-flex;

  align-items:
    center;

  gap:
    7px;

  min-height:
    34px;

  padding:
    0
    10px;

  border:
    1px solid
    var(
      --em-border
    );

  border-radius:
    var(
      --em-radius-sm
    );

  color:
    var(
      --em-text-soft
    );

  background:
    var(
      --em-surface
    );

  font-family:
    inherit;

  cursor:
    pointer;

  transition:
    background
    var(
      --em-transition-fast
    ),
    border-color
    var(
      --em-transition-fast
    ),
    transform
    var(
      --em-transition-fast
    );
}


.email-marketing-variable:hover {
  border-color:
    var(
      --em-border-strong
    );

  background:
    var(
      --em-surface-hover
    );

  transform:
    translateY(
      -1px
    );
}


.email-marketing-variable span {
  font-size:
    10px;

  font-weight:
    750;
}


.email-marketing-variable code {
  padding:
    2px
    5px;

  border:
    1px solid
    var(
      --em-border-soft
    );

  border-radius:
    5px;

  color:
    var(
      --em-text
    );

  background:
    var(
      --em-surface-strong
    );

  font-family:
    "JetBrains Mono",
    monospace;

  font-size:
    9px;

  font-weight:
    650;
}


/* =========================================================
   FILE ACTIONS
   ========================================================= */

.email-marketing-file-actions {
  display:
    flex;

  align-items:
    center;

  flex-wrap:
    wrap;

  gap:
    8px;

  margin-bottom:
    13px;
}


.email-marketing-file-action {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    7px;

  min-height:
    36px;

  padding:
    0
    12px;

  border:
    1px solid
    var(
      --em-border-strong
    );

  border-radius:
    var(
      --em-radius-sm
    );

  color:
    var(
      --em-text
    );

  background:
    var(
      --em-surface
    );

  font-family:
    inherit;

  font-size:
    11px;

  font-weight:
    800;

  cursor:
    pointer;

  transition:
    background
    var(
      --em-transition-fast
    ),
    border-color
    var(
      --em-transition-fast
    ),
    transform
    var(
      --em-transition-fast
    );
}


.email-marketing-file-action:hover {
  border-color:
    var(
      --em-text-muted
    );

  background:
    var(
      --em-surface-hover
    );

  transform:
    translateY(
      -1px
    );
}


/* =========================================================
   FILE LIST
   ========================================================= */

.email-marketing-files-list {
  display:
    flex;

  flex-direction:
    column;

  gap:
    8px;
}


.email-marketing-file-item {
  display:
    grid;

  grid-template-columns:
    46px
    minmax(
      0,
      1fr
    )
    auto
    auto
    auto;

  align-items:
    center;

  gap:
    10px;

  min-width:
    0;

  padding:
    10px;

  border:
    1px solid
    var(
      --em-border
    );

  border-radius:
    var(
      --em-radius-sm
    );

  background:
    var(
      --em-surface-soft
    );
}


.email-marketing-file-item__icon {
  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  width:
    46px;

  height:
    46px;

  overflow:
    hidden;

  border:
    1px solid
    var(
      --em-border
    );

  border-radius:
    8px;

  color:
    var(
      --em-text
    );

  background:
    var(
      --em-surface
    );
}


.email-marketing-file-item__icon img {
  width:
    100%;

  height:
    100%;

  object-fit:
    cover;
}


.email-marketing-file-item__info {
  display:
    flex;

  flex-direction:
    column;

  gap:
    2px;

  min-width:
    0;
}


.email-marketing-file-item__info strong {
  overflow:
    hidden;

  color:
    var(
      --em-text
    );

  font-size:
    11px;

  font-weight:
    800;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


.email-marketing-file-item__info span {
  color:
    var(
      --em-text-muted
    );

  font-size:
    9px;

  font-weight:
    650;
}


.email-marketing-file-item__usage {
  min-width:
    155px;

  min-height:
    34px;

  padding:
    0
    9px;

  border:
    1px solid
    var(
      --em-border
    );

  border-radius:
    7px;

  outline:
    0;

  color:
    var(
      --em-text
    );

  background:
    var(
      --em-surface
    );

  font-family:
    inherit;

  font-size:
    10px;

  font-weight:
    700;
}


.email-marketing-file-item__tag {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  min-height:
    25px;

  padding:
    0
    8px;

  border:
    1px solid
    var(
      --em-border
    );

  border-radius:
    999px;

  color:
    var(
      --em-text-muted
    );

  background:
    var(
      --em-surface
    );

  font-size:
    9px;

  font-weight:
    800;
}


/* =========================================================
   CONTACT PICKER
   ========================================================= */

.email-marketing-contact-picker__summary {
  display:
    flex;

  align-items:
    center;

  gap:
    6px;

  min-height:
    40px;

  padding:
    0
    12px;

  border:
    1px solid
    var(
      --em-border-strong
    );

  border-radius:
    var(
      --em-radius-sm
    );

  background:
    var(
      --em-surface-soft
    );
}


.email-marketing-contact-picker__summary strong {
  color:
    var(
      --em-text
    );

  font-size:
    17px;

  font-weight:
    900;
}


.email-marketing-contact-picker__summary span {
  color:
    var(
      --em-text-muted
    );

  font-size:
    10px;

  font-weight:
    700;
}


.email-marketing-contact-picker__toolbar {
  display:
    grid;

  grid-template-columns:
    minmax(
      260px,
      1fr
    )
    minmax(
      180px,
      0.38fr
    )
    minmax(
      220px,
      0.46fr
    );

  gap:
    9px;

  margin-bottom:
    11px;
}


.email-marketing-contact-picker__toolbar
.email-marketing-select {
  width:
    100%;

  min-width:
    0;
}


.email-marketing-contact-picker__quick-select {
  display:
    flex;

  align-items:
    center;

  flex-wrap:
    wrap;

  gap:
    6px;

  margin-bottom:
    12px;

  padding:
    10px;

  border:
    1px solid
    var(
      --em-border-soft
    );

  border-radius:
    var(
      --em-radius-sm
    );

  background:
    var(
      --em-surface-soft
    );
}


.email-marketing-contact-picker__quick-select > span {
  margin-right:
    3px;

  color:
    var(
      --em-text-muted
    );

  font-size:
    9px;

  font-weight:
    850;

  letter-spacing:
    0.045em;

  text-transform:
    uppercase;
}


/* =========================================================
   TEMPLATE CONTACT SUMMARY
   ========================================================= */

.email-marketing-template-contact-summary {
  display:
    grid;

  grid-template-columns:
    minmax(
      180px,
      1.4fr
    )
    repeat(
      2,
      minmax(
        130px,
        0.55fr
      )
    )
    auto;

  align-items:
    center;

  gap:
    10px;

  margin-bottom:
    12px;

  padding:
    12px;

  border:
    1px solid
    var(
      --em-border
    );

  border-radius:
    var(
      --em-radius-sm
    );

  background:
    var(
      --em-surface-soft
    );
}


.email-marketing-template-contact-summary > div {
  display:
    flex;

  flex-direction:
    column;

  gap:
    2px;

  min-width:
    0;
}


.email-marketing-template-contact-summary > div > span {
  color:
    var(
      --em-text-muted
    );

  font-size:
    9px;

  font-weight:
    800;

  letter-spacing:
    0.03em;

  text-transform:
    uppercase;
}


.email-marketing-template-contact-summary > div > strong {
  overflow:
    hidden;

  color:
    var(
      --em-text
    );

  font-size:
    13px;

  font-weight:
    850;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


/* =========================================================
   CONTACT LIST
   ========================================================= */

.email-marketing-contact-list {
  display:
    flex;

  flex-direction:
    column;

  gap:
    6px;

  width:
    100%;
}


.email-marketing-contact-row {
  position:
    relative;

  display:
    grid;

  grid-template-columns:
    20px
    40px
    minmax(
      180px,
      1.2fr
    )
    minmax(
      130px,
      0.55fr
    )
    minmax(
      170px,
      auto
    );

  align-items:
    center;

  gap:
    10px;

  min-width:
    0;

  min-height:
    66px;

  padding:
    9px
    11px;

  border:
    1px solid
    var(
      --em-border
    );

  border-radius:
    var(
      --em-radius-sm
    );

  color:
    inherit;

  background:
    var(
      --em-surface
    );

  cursor:
    pointer;

  transition:
    border-color
    var(
      --em-transition-fast
    ),
    background
    var(
      --em-transition-fast
    ),
    transform
    var(
      --em-transition-fast
    );
}


.email-marketing-contact-row:hover {
  border-color:
    var(
      --em-border-strong
    );

  background:
    var(
      --em-surface-soft
    );
}


.email-marketing-contact-row--selected {
  border-color:
    var(
      --em-text
    );

  background:
    var(
      --em-surface-strong
    );
}


.email-marketing-contact-row--received {
  border-color:
    color-mix(
      in srgb,
      var(
        --em-warning
      )
      34%,
      var(
        --em-border
      )
    );
}


.email-marketing-contact-row > input[type="checkbox"] {
  width:
    16px;

  height:
    16px;

  margin:
    0;

  accent-color:
    var(
      --em-black
    );

  cursor:
    pointer;
}


.email-marketing-contact-row > input[type="checkbox"]:disabled {
  opacity:
    0.4;

  cursor:
    not-allowed;
}


.email-marketing-contact-row__avatar {
  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  width:
    40px;

  height:
    40px;

  border:
    1px solid
    var(
      --em-border
    );

  border-radius:
    9px;

  color:
    var(
      --em-text
    );

  background:
    var(
      --em-surface-soft
    );

  font-size:
    11px;

  font-weight:
    900;
}


.email-marketing-contact-row__main {
  display:
    flex;

  flex-direction:
    column;

  gap:
    1px;

  min-width:
    0;
}


.email-marketing-contact-row__main strong {
  overflow:
    hidden;

  color:
    var(
      --em-text
    );

  font-size:
    11px;

  font-weight:
    850;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


.email-marketing-contact-row__main span {
  overflow:
    hidden;

  color:
    var(
      --em-text-soft
    );

  font-size:
    10px;

  font-weight:
    650;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


.email-marketing-contact-row__main small {
  overflow:
    hidden;

  color:
    var(
      --em-text-muted
    );

  font-size:
    9px;

  font-weight:
    600;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


.email-marketing-contact-row__location {
  display:
    flex;

  flex-direction:
    column;

  gap:
    1px;

  min-width:
    0;
}


.email-marketing-contact-row__location span {
  overflow:
    hidden;

  color:
    var(
      --em-text-soft
    );

  font-size:
    10px;

  font-weight:
    750;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


.email-marketing-contact-row__location small {
  overflow:
    hidden;

  color:
    var(
      --em-text-muted
    );

  font-size:
    9px;

  font-weight:
    600;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


.email-marketing-contact-row__badges {
  display:
    flex;

  align-items:
    center;

  justify-content:
    flex-end;

  flex-wrap:
    wrap;

  gap:
    5px;

  min-width:
    0;
}


.email-marketing-contact-row__badges > small {
  color:
    var(
      --em-text-muted
    );

  font-size:
    9px;

  font-weight:
    650;
}


/* =========================================================
   PAGINATION
   ========================================================= */

.email-marketing-pagination {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    14px;

  width:
    100%;

  margin-top:
    12px;

  padding:
    10px
    11px;

  border:
    1px solid
    var(
      --em-border-soft
    );

  border-radius:
    var(
      --em-radius-sm
    );

  background:
    var(
      --em-surface-soft
    );
}


.email-marketing-pagination > div:first-child {
  display:
    flex;

  align-items:
    baseline;

  gap:
    5px;
}


.email-marketing-pagination > div:first-child strong {
  color:
    var(
      --em-text
    );

  font-size:
    12px;

  font-weight:
    850;
}


.email-marketing-pagination > div:first-child span {
  color:
    var(
      --em-text-muted
    );

  font-size:
    10px;

  font-weight:
    650;
}


.email-marketing-pagination__actions {
  display:
    flex;

  align-items:
    center;

  gap:
    7px;
}


.email-marketing-pagination__actions > span {
  min-width:
    48px;

  color:
    var(
      --em-text-soft
    );

  font-size:
    10px;

  font-weight:
    800;

  text-align:
    center;
}


/* =========================================================
   BATCH LIST
   ========================================================= */

.email-marketing-batch-list {
  display:
    grid;

  grid-template-columns:
    repeat(
      2,
      minmax(
        0,
        1fr
      )
    );

  gap:
    10px;
}


.email-marketing-batch-card {
  display:
    flex;

  flex-direction:
    column;

  gap:
    12px;

  min-width:
    0;

  padding:
    14px;

  border:
    1px solid
    var(
      --em-border
    );

  border-radius:
    var(
      --em-radius-md
    );

  background:
    var(
      --em-surface-soft
    );
}


.email-marketing-batch-card__header {
  display:
    flex;

  align-items:
    flex-start;

  justify-content:
    space-between;

  gap:
    12px;
}


.email-marketing-batch-card__header > div {
  display:
    flex;

  flex-direction:
    column;

  min-width:
    0;
}


.email-marketing-batch-card__header > div > span {
  color:
    var(
      --em-text-muted
    );

  font-size:
    9px;

  font-weight:
    850;

  letter-spacing:
    0.06em;
}


.email-marketing-batch-card__header > div > strong {
  overflow:
    hidden;

  margin-top:
    2px;

  color:
    var(
      --em-text
    );

  font-size:
    13px;

  font-weight:
    850;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


.email-marketing-batch-card__metrics {
  display:
    grid;

  grid-template-columns:
    repeat(
      4,
      minmax(
        0,
        1fr
      )
    );

  gap:
    7px;
}


.email-marketing-batch-card__metrics > div {
  display:
    flex;

  flex-direction:
    column;

  gap:
    2px;

  padding:
    9px;

  border:
    1px solid
    var(
      --em-border-soft
    );

  border-radius:
    7px;

  background:
    var(
      --em-surface
    );
}


.email-marketing-batch-card__metrics span {
  color:
    var(
      --em-text-muted
    );

  font-size:
    8px;

  font-weight:
    800;

  letter-spacing:
    0.035em;

  text-transform:
    uppercase;
}


.email-marketing-batch-card__metrics strong {
  color:
    var(
      --em-text
    );

  font-size:
    15px;

  font-weight:
    900;
}


.email-marketing-batch-card__date {
  display:
    flex;

  align-items:
    center;

  gap:
    6px;

  color:
    var(
      --em-text-muted
    );

  font-size:
    10px;

  font-weight:
    700;
}


.email-marketing-batch-card__actions {
  display:
    flex;

  align-items:
    center;

  justify-content:
    flex-end;

  flex-wrap:
    wrap;

  gap:
    6px;

  padding-top:
    10px;

  border-top:
    1px solid
    var(
      --em-border-soft
    );
}


/* =========================================================
   TEMPLATE TOOLBAR
   ========================================================= */

.email-marketing-template-toolbar {
  display:
    grid;

  grid-template-columns:
    minmax(
      240px,
      1fr
    )
    auto;

  gap:
    10px;

  width:
    100%;

  padding:
    12px;

  border:
    1px solid
    var(
      --em-border
    );

  border-radius:
    var(
      --em-radius-md
    );

  background:
    var(
      --em-surface
    );
}


/* =========================================================
   TEMPLATE GRID
   ========================================================= */

.email-marketing-template-grid {
  display:
    grid;

  grid-template-columns:
    repeat(
      3,
      minmax(
        0,
        1fr
      )
    );

  gap:
    12px;

  width:
    100%;
}


.email-marketing-template-card {
  display:
    flex;

  flex-direction:
    column;

  gap:
    11px;

  min-width:
    0;

  padding:
    16px;

  border:
    1px solid
    var(
      --em-border
    );

  border-radius:
    var(
      --em-radius-md
    );

  background:
    var(
      --em-surface
    );

  box-shadow:
    var(
      --em-shadow-xs
    );
}


.email-marketing-template-card__header {
  display:
    flex;

  align-items:
    flex-start;

  justify-content:
    space-between;

  gap:
    10px;
}


.email-marketing-template-card__header > div {
  min-width:
    0;
}


.email-marketing-template-card__header > div > span {
  color:
    var(
      --em-text-muted
    );

  font-size:
    9px;

  font-weight:
    850;

  letter-spacing:
    0.06em;
}


.email-marketing-template-card__header h3 {
  overflow:
    hidden;

  margin:
    3px
    0
    0;

  color:
    var(
      --em-text
    );

  font-size:
    15px;

  font-weight:
    850;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


.email-marketing-template-card > p {
  display:
    -webkit-box;

  min-height:
    37px;

  margin:
    0;

  overflow:
    hidden;

  color:
    var(
      --em-text-muted
    );

  font-size:
    10px;

  font-weight:
    600;

  line-height:
    1.45;

  -webkit-line-clamp:
    2;

  -webkit-box-orient:
    vertical;
}


.email-marketing-template-card__meta {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    8px;

  padding:
    9px
    0;

  border-top:
    1px solid
    var(
      --em-border-soft
    );

  border-bottom:
    1px solid
    var(
      --em-border-soft
    );

  color:
    var(
      --em-text-muted
    );

  font-size:
    9px;

  font-weight:
    650;
}


.email-marketing-template-card__actions {
  display:
    flex;

  align-items:
    center;

  flex-wrap:
    wrap;

  gap:
    6px;
}


/* =========================================================
   TEMPLATE EDITOR
   ========================================================= */

.email-marketing-template-editor {
  display:
    flex;

  flex-direction:
    column;

  gap:
    15px;
}


.email-marketing-template-editor__mode {
  display:
    inline-flex;

  align-self:
    flex-start;

  gap:
    3px;

  padding:
    3px;

  border:
    1px solid
    var(
      --em-border
    );

  border-radius:
    var(
      --em-radius-sm
    );

  background:
    var(
      --em-surface-strong
    );
}


/* =========================================================
   TEMPLATE HISTORY
   ========================================================= */

.email-marketing-template-history {
  display:
    flex;

  flex-direction:
    column;

  gap:
    12px;
}


.email-marketing-template-history__metrics {
  display:
    grid;

  grid-template-columns:
    repeat(
      4,
      minmax(
        0,
        1fr
      )
    );

  gap:
    8px;
}


.email-marketing-template-history__metrics > article {
  display:
    flex;

  flex-direction:
    column;

  gap:
    3px;

  min-width:
    0;

  padding:
    12px;

  border:
    1px solid
    var(
      --em-border
    );

  border-radius:
    var(
      --em-radius-sm
    );

  background:
    var(
      --em-surface-soft
    );
}


.email-marketing-template-history__metrics span {
  color:
    var(
      --em-text-muted
    );

  font-size:
    9px;

  font-weight:
    800;

  letter-spacing:
    0.03em;

  text-transform:
    uppercase;
}


.email-marketing-template-history__metrics strong {
  color:
    var(
      --em-text
    );

  font-size:
    20px;

  font-weight:
    900;

  letter-spacing:
    -0.025em;
}


.email-marketing-template-history__list {
  display:
    flex;

  flex-direction:
    column;

  gap:
    6px;
}


.email-marketing-template-history-row {
  display:
    grid;

  grid-template-columns:
    40px
    minmax(
      0,
      1fr
    )
    auto
    auto;

  align-items:
    center;

  gap:
    10px;

  min-width:
    0;

  padding:
    10px;

  border:
    1px solid
    var(
      --em-border
    );

  border-radius:
    var(
      --em-radius-sm
    );

  background:
    var(
      --em-surface
    );
}


.email-marketing-template-history-row__avatar {
  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  width:
    40px;

  height:
    40px;

  border:
    1px solid
    var(
      --em-border
    );

  border-radius:
    9px;

  background:
    var(
      --em-surface-soft
    );

  font-size:
    10px;

  font-weight:
    900;
}


.email-marketing-template-history-row__main {
  display:
    flex;

  flex-direction:
    column;

  min-width:
    0;
}


.email-marketing-template-history-row__main strong {
  overflow:
    hidden;

  color:
    var(
      --em-text
    );

  font-size:
    11px;

  font-weight:
    850;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


.email-marketing-template-history-row__main span {
  overflow:
    hidden;

  color:
    var(
      --em-text-muted
    );

  font-size:
    9px;

  font-weight:
    600;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


.email-marketing-template-history-row__metrics {
  display:
    flex;

  align-items:
    flex-end;

  flex-direction:
    column;

  gap:
    2px;
}


.email-marketing-template-history-row__metrics span {
  color:
    var(
      --em-text-soft
    );

  font-size:
    10px;

  font-weight:
    750;
}


.email-marketing-template-history-row__metrics small {
  color:
    var(
      --em-text-muted
    );

  font-size:
    8px;

  font-weight:
    600;
}


/* =========================================================
   BATCH EDITOR
   ========================================================= */

.email-marketing-batch-editor {
  display:
    flex;

  flex-direction:
    column;

  gap:
    14px;
}


.email-marketing-batch-editor__suggestions {
  display:
    flex;

  align-items:
    center;

  flex-wrap:
    wrap;

  gap:
    6px;

  padding:
    10px;

  border:
    1px solid
    var(
      --em-border-soft
    );

  border-radius:
    var(
      --em-radius-sm
    );

  background:
    var(
      --em-surface-soft
    );
}


.email-marketing-batch-editor__suggestions > span {
  margin-right:
    3px;

  color:
    var(
      --em-text-muted
    );

  font-size:
    9px;

  font-weight:
    850;

  text-transform:
    uppercase;
}


/* =========================================================
   BATCH DETAIL
   ========================================================= */

.email-marketing-batch-detail {
  display:
    flex;

  flex-direction:
    column;

  gap:
    12px;
}


.email-marketing-batch-detail__assign {
  padding:
    12px;

  border:
    1px solid
    var(
      --em-border
    );

  border-radius:
    var(
      --em-radius-sm
    );

  background:
    var(
      --em-surface-soft
    );
}


/* =========================================================
   LIBRARY GRID
   ========================================================= */

.email-marketing-library-grid {
  display:
    grid;

  grid-template-columns:
    repeat(
      4,
      minmax(
        0,
        1fr
      )
    );

  gap:
    12px;

  width:
    100%;
}


.email-marketing-library-card {
  display:
    flex;

  flex-direction:
    column;

  min-width:
    0;

  overflow:
    hidden;

  border:
    1px solid
    var(
      --em-border
    );

  border-radius:
    var(
      --em-radius-md
    );

  background:
    var(
      --em-surface
    );

  box-shadow:
    var(
      --em-shadow-xs
    );
}


.email-marketing-library-card__preview {
  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  width:
    100%;

  aspect-ratio:
    16 /
    9;

  overflow:
    hidden;

  border-bottom:
    1px solid
    var(
      --em-border
    );

  color:
    var(
      --em-text-muted
    );

  background:
    var(
      --em-surface-soft
    );
}


.email-marketing-library-card__preview img {
  width:
    100%;

  height:
    100%;

  object-fit:
    cover;
}


.email-marketing-library-card__preview > span {
  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  width:
    52px;

  height:
    52px;

  border:
    1px solid
    var(
      --em-border
    );

  border-radius:
    11px;

  background:
    var(
      --em-surface
    );
}


.email-marketing-library-card__body {
  display:
    flex;

  flex-direction:
    column;

  gap:
    4px;

  min-width:
    0;

  padding:
    12px;
}


.email-marketing-library-card__body strong {
  overflow:
    hidden;

  color:
    var(
      --em-text
    );

  font-size:
    11px;

  font-weight:
    850;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


.email-marketing-library-card__body > span {
  color:
    var(
      --em-text-soft
    );

  font-size:
    9px;

  font-weight:
    700;
}


.email-marketing-library-card__body small {
  color:
    var(
      --em-text-muted
    );

  font-size:
    8px;

  font-weight:
    600;
}


/* =========================================================
   HISTORY LIST
   ========================================================= */

.email-marketing-history-list {
  display:
    flex;

  flex-direction:
    column;

  gap:
    7px;
}


.email-marketing-history-row {
  display:
    grid;

  grid-template-columns:
    minmax(
      240px,
      1.35fr
    )
    minmax(
      300px,
      1fr
    )
    auto;

  align-items:
    center;

  gap:
    14px;

  min-width:
    0;

  padding:
    11px
    13px;

  border:
    1px solid
    var(
      --em-border
    );

  border-radius:
    var(
      --em-radius-sm
    );

  background:
    var(
      --em-surface
    );
}


.email-marketing-history-row__main {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    12px;

  min-width:
    0;

  padding:
    0;

  border:
    0;

  color:
    inherit;

  background:
    transparent;

  text-align:
    left;

  cursor:
    pointer;
}


.email-marketing-history-row__main > div {
  display:
    flex;

  flex-direction:
    column;

  min-width:
    0;
}


.email-marketing-history-row__main > div > span {
  color:
    var(
      --em-text-muted
    );

  font-size:
    8px;

  font-weight:
    850;
}


.email-marketing-history-row__main strong {
  overflow:
    hidden;

  color:
    var(
      --em-text
    );

  font-size:
    11px;

  font-weight:
    850;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


.email-marketing-history-row__main small {
  overflow:
    hidden;

  color:
    var(
      --em-text-muted
    );

  font-size:
    9px;

  font-weight:
    600;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


.email-marketing-history-row__metrics {
  display:
    flex;

  align-items:
    center;

  justify-content:
    flex-start;

  flex-wrap:
    wrap;

  gap:
    6px;
}


.email-marketing-history-row__metrics span {
  display:
    inline-flex;

  align-items:
    center;

  min-height:
    25px;

  padding:
    0
    8px;

  border:
    1px solid
    var(
      --em-border-soft
    );

  border-radius:
    999px;

  color:
    var(
      --em-text-muted
    );

  background:
    var(
      --em-surface-soft
    );

  font-size:
    8px;

  font-weight:
    750;
}


.email-marketing-history-row__date {
  color:
    var(
      --em-text-muted
    );

  font-size:
    9px;

  font-weight:
    650;

  white-space:
    nowrap;
}


/* =========================================================
   TOAST
   ========================================================= */

.email-marketing-toast {
  position:
    fixed;

  right:
    20px;

  bottom:
    20px;

  z-index:
    999999;

  display:
    grid;

  grid-template-columns:
    32px
    minmax(
      0,
      1fr
    )
    30px;

  align-items:
    center;

  gap:
    9px;

  width:
    min(
      420px,
      calc(
        100vw -
        28px
      )
    );

  min-height:
    54px;

  padding:
    9px;

  border:
    1px solid
    var(
      --em-border-strong
    );

  border-radius:
    var(
      --em-radius-md
    );

  color:
    var(
      --em-text
    );

  background:
    var(
      --em-surface
    );

  box-shadow:
    var(
      --em-shadow-md
    );

  opacity:
    0;

  transform:
    translateY(
      12px
    );

  pointer-events:
    none;

  transition:
    opacity
    var(
      --em-transition
    ),
    transform
    var(
      --em-transition
    );
}


.email-marketing-toast--visible {
  opacity:
    1;

  transform:
    translateY(
      0
    );

  pointer-events:
    auto;
}


.email-marketing-toast__icon {
  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  width:
    32px;

  height:
    32px;

  border:
    1px solid
    var(
      --em-border
    );

  border-radius:
    8px;

  background:
    var(
      --em-surface-soft
    );
}


.email-marketing-toast__message {
  color:
    var(
      --em-text
    );

  font-size:
    11px;

  font-weight:
    750;

  line-height:
    1.4;
}


.email-marketing-toast__close {
  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  width:
    30px;

  height:
    30px;

  padding:
    0;

  border:
    0;

  border-radius:
    7px;

  color:
    var(
      --em-text-muted
    );

  background:
    transparent;

  cursor:
    pointer;
}


.email-marketing-toast__close:hover {
  color:
    var(
      --em-text
    );

  background:
    var(
      --em-surface-hover
    );
}


.email-marketing-toast--success {
  border-color:
    color-mix(
      in srgb,
      var(
        --em-success
      )
      40%,
      var(
        --em-border
      )
    );
}


.email-marketing-toast--success
.email-marketing-toast__icon {
  color:
    var(
      --em-success
    );

  background:
    var(
      --em-success-soft
    );
}


.email-marketing-toast--warning {
  border-color:
    color-mix(
      in srgb,
      var(
        --em-warning
      )
      40%,
      var(
        --em-border
      )
    );
}


.email-marketing-toast--warning
.email-marketing-toast__icon {
  color:
    var(
      --em-warning
    );

  background:
    var(
      --em-warning-soft
    );
}


.email-marketing-toast--error {
  border-color:
    color-mix(
      in srgb,
      var(
        --em-danger
      )
      40%,
      var(
        --em-border
      )
    );
}


.email-marketing-toast--error
.email-marketing-toast__icon {
  color:
    var(
      --em-danger
    );

  background:
    var(
      --em-danger-soft
    );
}


/* =========================================================
   FIN PARTE 2 DE 4
   ========================================================= *//* =========================================================
   MODAL ROOT
   ========================================================= */

.email-marketing-modal-root {
  position:
    fixed;

  inset:
    0;

  z-index:
    999990;

  display:
    none;

  align-items:
    center;

  justify-content:
    center;

  padding:
    18px;

  pointer-events:
    none;
}


.email-marketing-modal-root--open {
  display:
    flex;

  pointer-events:
    auto;
}


body.email-marketing-modal-open {
  overflow:
    hidden;
}


/* =========================================================
   MODAL BACKDROP
   ========================================================= */

.email-marketing-modal-backdrop {
  position:
    absolute;

  inset:
    0;

  background:
    rgba(
      0,
      0,
      0,
      0.58
    );

  backdrop-filter:
    blur(
      3px
    );
}


/* =========================================================
   MODAL
   ========================================================= */

.email-marketing-modal {
  position:
    relative;

  z-index:
    1;

  display:
    flex;

  flex-direction:
    column;

  width:
    min(
      680px,
      calc(
        100vw -
        32px
      )
    );

  max-height:
    calc(
      100dvh -
      36px
    );

  overflow:
    hidden;

  border:
    1px solid
    var(
      --em-border-strong
    );

  border-radius:
    var(
      --em-radius-lg
    );

  color:
    var(
      --em-text
    );

  background:
    var(
      --em-surface
    );

  box-shadow:
    var(
      --em-shadow-md
    );
}


.email-marketing-modal--medium {
  width:
    min(
      720px,
      calc(
        100vw -
        32px
      )
    );
}


.email-marketing-modal--large {
  width:
    min(
      1180px,
      calc(
        100vw -
        32px
      )
    );
}


.email-marketing-modal__header {
  display:
    flex;

  align-items:
    flex-start;

  justify-content:
    space-between;

  gap:
    14px;

  flex:
    0 0 auto;

  padding:
    16px
    18px;

  border-bottom:
    1px solid
    var(
      --em-border
    );

  background:
    var(
      --em-surface
    );
}


.email-marketing-modal__heading {
  display:
    flex;

  flex-direction:
    column;

  gap:
    3px;

  min-width:
    0;
}


.email-marketing-modal__heading h2 {
  margin:
    0;

  color:
    var(
      --em-text
    );

  font-size:
    17px;

  font-weight:
    900;

  letter-spacing:
    -0.02em;
}


.email-marketing-modal__heading p {
  margin:
    0;

  color:
    var(
      --em-text-muted
    );

  font-size:
    10px;

  font-weight:
    600;
}


.email-marketing-modal__body {
  flex:
    1 1 auto;

  min-height:
    0;

  overflow-x:
    hidden;

  overflow-y:
    auto;

  padding:
    18px;

  background:
    var(
      --em-bg-soft
    );
}


.email-marketing-modal__footer {
  display:
    flex;

  align-items:
    center;

  justify-content:
    flex-end;

  gap:
    8px;

  flex:
    0 0 auto;

  padding:
    12px
    16px;

  border-top:
    1px solid
    var(
      --em-border
    );

  background:
    var(
      --em-surface
    );
}


/* =========================================================
   MODAL SCROLL
   ========================================================= */

.email-marketing-modal__body::-webkit-scrollbar,
.email-marketing-preview-card__body::-webkit-scrollbar,
.email-marketing-shell__main::-webkit-scrollbar {
  width:
    9px;
}


.email-marketing-modal__body::-webkit-scrollbar-track,
.email-marketing-preview-card__body::-webkit-scrollbar-track,
.email-marketing-shell__main::-webkit-scrollbar-track {
  background:
    transparent;
}


.email-marketing-modal__body::-webkit-scrollbar-thumb,
.email-marketing-preview-card__body::-webkit-scrollbar-thumb,
.email-marketing-shell__main::-webkit-scrollbar-thumb {
  border:
    2px solid
    transparent;

  border-radius:
    999px;

  background:
    color-mix(
      in srgb,
      var(
        --em-text-muted
      )
      42%,
      transparent
    );

  background-clip:
    padding-box;
}


/* =========================================================
   MODAL · FORMS
   ========================================================= */

.email-marketing-modal
.email-marketing-field input,
.email-marketing-modal
.email-marketing-field textarea,
.email-marketing-modal
.email-marketing-field select {
  background:
    var(
      --em-surface
    );
}


.email-marketing-modal
.email-marketing-form-section {
  box-shadow:
    none;
}


/* =========================================================
   MODAL · CONTACT ROW
   ========================================================= */

.email-marketing-modal
.email-marketing-contact-row {
  grid-template-columns:
    40px
    minmax(
      0,
      1fr
    )
    auto
    auto;

  cursor:
    default;
}


.email-marketing-modal
.email-marketing-contact-row
> input[type="checkbox"] {
  display:
    none;
}


/* =========================================================
   MODAL · TEMPLATE HISTORY
   ========================================================= */

.email-marketing-modal
.email-marketing-template-toolbar {
  padding:
    0;

  border:
    0;

  background:
    transparent;
}


/* =========================================================
   HISTORY / LIST HOVER
   ========================================================= */

.email-marketing-history-row,
.email-marketing-template-card,
.email-marketing-library-card,
.email-marketing-batch-card,
.email-marketing-file-item,
.email-marketing-template-history-row {
  transition:
    border-color
    var(
      --em-transition-fast
    ),
    background
    var(
      --em-transition-fast
    ),
    transform
    var(
      --em-transition-fast
    );
}


.email-marketing-history-row:hover,
.email-marketing-template-card:hover,
.email-marketing-library-card:hover,
.email-marketing-batch-card:hover,
.email-marketing-template-history-row:hover {
  border-color:
    var(
      --em-border-strong
    );
}


.email-marketing-template-card:hover,
.email-marketing-library-card:hover,
.email-marketing-batch-card:hover {
  transform:
    translateY(
      -1px
    );
}


/* =========================================================
   BATCH DETAIL · CONTACT ROW FIX
   ========================================================= */

.email-marketing-batch-detail
.email-marketing-contact-row {
  grid-template-columns:
    40px
    minmax(
      0,
      1fr
    )
    auto
    36px;

  cursor:
    default;
}


/* =========================================================
   INLINE SVG
   ========================================================= */

#emailMarketingPage svg,
.email-marketing-modal-root svg,
.email-marketing-toast svg {
  display:
    block;

  flex:
    0 0 auto;

  stroke-width:
    2;
}


/* =========================================================
   INPUT AUTOFILL
   ========================================================= */

#emailMarketingPage input:-webkit-autofill,
#emailMarketingPage textarea:-webkit-autofill,
#emailMarketingPage select:-webkit-autofill,
.email-marketing-modal-root input:-webkit-autofill,
.email-marketing-modal-root textarea:-webkit-autofill,
.email-marketing-modal-root select:-webkit-autofill {
  -webkit-text-fill-color:
    var(
      --em-text
    );

  -webkit-box-shadow:
    0 0 0 1000px
    var(
      --em-surface
    )
    inset;

  transition:
    background-color
    99999s
    ease-in-out
    0s;
}


/* =========================================================
   FOCUS VISIBLE
   ========================================================= */

#emailMarketingPage button:focus-visible,
#emailMarketingPage input:focus-visible,
#emailMarketingPage select:focus-visible,
#emailMarketingPage textarea:focus-visible,
.email-marketing-modal-root button:focus-visible,
.email-marketing-modal-root input:focus-visible,
.email-marketing-modal-root select:focus-visible,
.email-marketing-modal-root textarea:focus-visible {
  outline:
    2px solid
    var(
      --em-text
    );

  outline-offset:
    2px;
}


/* =========================================================
   HOVER DISABLED
   ========================================================= */

#emailMarketingPage button:disabled:hover,
.email-marketing-modal-root button:disabled:hover {
  transform:
    none;
}


/* =========================================================
   FORM CONTROLS · APPEARANCE
   ========================================================= */

#emailMarketingPage select,
.email-marketing-modal-root select {
  cursor:
    pointer;
}


#emailMarketingPage input[type="number"],
.email-marketing-modal-root input[type="number"] {
  font-variant-numeric:
    tabular-nums;
}


/* =========================================================
   NATIVE DATETIME
   ========================================================= */

#emailMarketingPage input[type="datetime-local"],
.email-marketing-modal-root input[type="datetime-local"] {
  min-height:
    40px;
}


html[data-theme="dark"]
#emailMarketingPage
input[type="datetime-local"],
html[data-theme="dark"]
.email-marketing-modal-root
input[type="datetime-local"],
body.dark
#emailMarketingPage
input[type="datetime-local"],
body.dark
.email-marketing-modal-root
input[type="datetime-local"] {
  color-scheme:
    dark;
}


/* =========================================================
   TABLE-LIKE ALIGNMENT
   ========================================================= */

.email-marketing-template-contact-summary strong,
.email-marketing-batch-card__metrics strong,
.email-marketing-template-history__metrics strong,
.email-marketing-metric-card__content > strong,
.email-marketing-pagination strong {
  font-variant-numeric:
    tabular-nums;
}


/* =========================================================
   LONG TEXT PROTECTION
   ========================================================= */

.email-marketing-panel,
.email-marketing-form-section,
.email-marketing-template-card,
.email-marketing-batch-card,
.email-marketing-library-card,
.email-marketing-history-row,
.email-marketing-file-item,
.email-marketing-template-history-row {
  overflow-wrap:
    anywhere;
}


/* =========================================================
   DARK · PREVIEW
   ========================================================= */

html[data-theme="dark"]
.email-marketing-preview-card,
body.dark
.email-marketing-preview-card {
  background:
    #090909;
}


html[data-theme="dark"]
.email-marketing-email-preview,
body.dark
.email-marketing-email-preview {
  border-color:
    #2d2d2d;
}


/* =========================================================
   DARK · SELECT OPTIONS
   ========================================================= */

html[data-theme="dark"]
#emailMarketingPage option,
html[data-theme="dark"]
.email-marketing-modal-root option,
body.dark
#emailMarketingPage option,
body.dark
.email-marketing-modal-root option {
  color:
    #ffffff;

  background:
    #101010;
}


/* =========================================================
   DARK · SCROLLBAR
   ========================================================= */

html[data-theme="dark"]
.email-marketing-modal__body,
html[data-theme="dark"]
.email-marketing-preview-card__body,
html[data-theme="dark"]
.email-marketing-shell__main,
body.dark
.email-marketing-modal__body,
body.dark
.email-marketing-preview-card__body,
body.dark
.email-marketing-shell__main {
  scrollbar-color:
    #454545
    transparent;
}


/* =========================================================
   RESPONSIVE · 1500
   ========================================================= */

@media (
  max-width:
    1500px
) {
  .email-marketing-page {
    padding:
      20px
      20px
      30px;
  }


  .email-marketing-template-grid {
    grid-template-columns:
      repeat(
        2,
        minmax(
          0,
          1fr
        )
      );
  }


  .email-marketing-library-grid {
    grid-template-columns:
      repeat(
        3,
        minmax(
          0,
          1fr
        )
      );
  }


  .email-marketing-history-row {
    grid-template-columns:
      minmax(
        220px,
        1.2fr
      )
      minmax(
        240px,
        1fr
      )
      auto;
  }
}


/* =========================================================
   RESPONSIVE · 1280
   ========================================================= */

@media (
  max-width:
    1280px
) {
  .email-marketing-metrics-grid {
    grid-template-columns:
      repeat(
        2,
        minmax(
          0,
          1fr
        )
      );
  }


  .email-marketing-home-grid {
    grid-template-columns:
      1fr;
  }


  .email-marketing-editor-grid {
    grid-template-columns:
      1fr;
  }


  .email-marketing-preview-card {
    min-height:
      360px;
  }


  .email-marketing-contact-picker__toolbar {
    grid-template-columns:
      minmax(
        220px,
        1fr
      )
      minmax(
        180px,
        0.6fr
      );
  }


  .email-marketing-contact-picker__toolbar
  > :nth-child(
    3
  ) {
    grid-column:
      1 /
      -1;
  }


  .email-marketing-template-contact-summary {
    grid-template-columns:
      minmax(
        180px,
        1fr
      )
      repeat(
        2,
        minmax(
          120px,
          0.5fr
        )
      );
  }


  .email-marketing-template-contact-summary
  > .email-marketing-button {
    grid-column:
      1 /
      -1;

    justify-self:
      flex-start;
  }


  .email-marketing-contact-row {
    grid-template-columns:
      20px
      40px
      minmax(
        160px,
        1fr
      )
      minmax(
        110px,
        0.45fr
      );
  }


  .email-marketing-contact-row__badges {
    grid-column:
      3 /
      -1;

    justify-content:
      flex-start;
  }


  .email-marketing-batch-list {
    grid-template-columns:
      1fr;
  }


  .email-marketing-history-row {
    grid-template-columns:
      1fr
      auto;
  }


  .email-marketing-history-row__metrics {
    grid-column:
      1 /
      -1;
  }


  .email-marketing-library-grid {
    grid-template-columns:
      repeat(
        2,
        minmax(
          0,
          1fr
        )
      );
  }
}


/* =========================================================
   RESPONSIVE · 1024
   ========================================================= */

@media (
  max-width:
    1024px
) {
  .email-marketing-page {
    gap:
      14px;

    padding:
      16px
      14px
      26px;
  }


  .email-marketing-page-header {
    flex-direction:
      column;

    padding:
      18px;
  }


  .email-marketing-page-header__actions {
    width:
      100%;

    justify-content:
      flex-start;
  }


  .email-marketing-form-grid {
    grid-template-columns:
      1fr;
  }


  .email-marketing-field--wide {
    grid-column:
      auto;
  }


  .email-marketing-quick-actions {
    grid-template-columns:
      1fr;
  }


  .email-marketing-template-grid {
    grid-template-columns:
      1fr;
  }


  .email-marketing-template-toolbar {
    grid-template-columns:
      1fr;
  }


  .email-marketing-template-toolbar
  .email-marketing-select {
    width:
      100%;
  }


  .email-marketing-template-contact-summary {
    grid-template-columns:
      repeat(
        2,
        minmax(
          0,
          1fr
        )
      );
  }


  .email-marketing-template-contact-summary
  > .email-marketing-button {
    grid-column:
      1 /
      -1;
  }


  .email-marketing-template-history__metrics {
    grid-template-columns:
      repeat(
        2,
        minmax(
          0,
          1fr
        )
      );
  }


  .email-marketing-library-grid {
    grid-template-columns:
      repeat(
        2,
        minmax(
          0,
          1fr
        )
      );
  }


  .email-marketing-file-item {
    grid-template-columns:
      46px
      minmax(
        0,
        1fr
      )
      auto;
  }


  .email-marketing-file-item__usage,
  .email-marketing-file-item__tag {
    grid-column:
      2 /
      -1;

    justify-self:
      flex-start;
  }


  .email-marketing-file-item
  > .email-marketing-icon-button {
    grid-row:
      1;

    grid-column:
      auto;
  }


  .email-marketing-batch-card__metrics {
    grid-template-columns:
      repeat(
        2,
        minmax(
          0,
          1fr
        )
      );
  }
}


/* =========================================================
   FIN PARTE 3 DE 4
   ========================================================= *//* =========================================================
   RESPONSIVE · 860
   ========================================================= */

@media (
  max-width:
    860px
) {
  .email-marketing-page {
    padding:
      14px
      10px
      24px;
  }


  .email-marketing-navigation {
    justify-content:
      flex-start;
  }


  .email-marketing-navigation__item {
    flex:
      0 0 auto;
  }


  .email-marketing-campaign-actions {
    align-items:
      flex-start;

    flex-direction:
      column;
  }


  .email-marketing-campaign-actions__left,
  .email-marketing-campaign-actions__right {
    width:
      100%;
  }


  .email-marketing-campaign-actions__right {
    justify-content:
      flex-start;
  }


  .email-marketing-contact-picker__toolbar {
    grid-template-columns:
      1fr;
  }


  .email-marketing-contact-picker__toolbar
  > :nth-child(
    3
  ) {
    grid-column:
      auto;
  }


  .email-marketing-contact-row {
    grid-template-columns:
      20px
      40px
      minmax(
        0,
        1fr
      );
  }


  .email-marketing-contact-row__location {
    grid-column:
      3;

    margin-top:
      2px;
  }


  .email-marketing-contact-row__badges {
    grid-column:
      3;

    justify-content:
      flex-start;
  }


  .email-marketing-template-history-row {
    grid-template-columns:
      40px
      minmax(
        0,
        1fr
      )
      auto;
  }


  .email-marketing-template-history-row__metrics {
    grid-column:
      2 /
      -1;

    align-items:
      flex-start;
  }


  .email-marketing-template-history-row
  > .email-marketing-tag {
    grid-column:
      2 /
      -1;

    justify-self:
      flex-start;
  }


  .email-marketing-history-row {
    grid-template-columns:
      1fr;
  }


  .email-marketing-history-row__date {
    justify-self:
      flex-start;
  }


  .email-marketing-library-grid {
    grid-template-columns:
      1fr;
  }


  .email-marketing-modal {
    width:
      calc(
        100vw -
        20px
      );

    max-height:
      calc(
        100dvh -
        20px
      );
  }


  .email-marketing-modal--medium,
  .email-marketing-modal--large {
    width:
      calc(
        100vw -
        20px
      );
  }
}


/* =========================================================
   RESPONSIVE · 680
   ========================================================= */

@media (
  max-width:
    680px
) {
  .email-marketing-page-header {
    padding:
      15px;
  }


  .email-marketing-page-header h1 {
    font-size:
      24px;
  }


  .email-marketing-page-header__actions {
    display:
      grid;

    grid-template-columns:
      1fr
      1fr;
  }


  .email-marketing-page-header__actions
  .email-marketing-page-header__campaign {
    grid-column:
      1 /
      -1;

    justify-content:
      center;
  }


  .email-marketing-page-header__actions
  .email-marketing-button {
    width:
      100%;
  }


  .email-marketing-metrics-grid {
    grid-template-columns:
      1fr;
  }


  .email-marketing-metric-card {
    min-height:
      88px;
  }


  .email-marketing-quick-action {
    grid-template-columns:
      42px
      minmax(
        0,
        1fr
      );
  }


  .email-marketing-quick-action
  > .email-marketing-button {
    grid-column:
      1 /
      -1;

    width:
      100%;
  }


  .email-marketing-form-section {
    padding:
      15px;
  }


  .email-marketing-form-section__header {
    flex-direction:
      column;
  }


  .email-marketing-form-section__header
  > .email-marketing-button {
    width:
      100%;
  }


  .email-marketing-template-contact-summary {
    grid-template-columns:
      1fr;
  }


  .email-marketing-template-contact-summary
  > .email-marketing-button {
    grid-column:
      auto;

    width:
      100%;
  }


  .email-marketing-template-history__metrics {
    grid-template-columns:
      1fr
      1fr;
  }


  .email-marketing-batch-card__metrics {
    grid-template-columns:
      1fr
      1fr;
  }


  .email-marketing-file-item {
    grid-template-columns:
      42px
      minmax(
        0,
        1fr
      );
  }


  .email-marketing-file-item__icon {
    width:
      42px;

    height:
      42px;
  }


  .email-marketing-file-item__usage,
  .email-marketing-file-item__tag {
    grid-column:
      1 /
      -1;

    width:
      100%;
  }


  .email-marketing-file-item
  > .email-marketing-icon-button {
    grid-column:
      auto;
  }


  .email-marketing-template-toolbar {
    padding:
      10px;
  }


  .email-marketing-pagination {
    align-items:
      flex-start;

    flex-direction:
      column;
  }


  .email-marketing-pagination__actions {
    width:
      100%;

    justify-content:
      space-between;
  }


  .email-marketing-modal-root {
    padding:
      8px;
  }


  .email-marketing-modal {
    width:
      calc(
        100vw -
        16px
      );

    max-height:
      calc(
        100dvh -
        16px
      );

    border-radius:
      11px;
  }


  .email-marketing-modal__header {
    padding:
      14px;
  }


  .email-marketing-modal__body {
    padding:
      12px;
  }


  .email-marketing-modal__footer {
    flex-wrap:
      wrap;

    padding:
      10px
      12px;
  }


  .email-marketing-modal__footer
  .email-marketing-button {
    flex:
      1 1
      140px;
  }
}


/* =========================================================
   RESPONSIVE · 520
   ========================================================= */

@media (
  max-width:
    520px
) {
  .email-marketing-page {
    gap:
      10px;

    padding:
      10px
      8px
      20px;
  }


  .email-marketing-page-header,
  .email-marketing-view-header,
  .email-marketing-panel,
  .email-marketing-form-section,
  .email-marketing-campaign-actions {
    border-radius:
      9px;
  }


  .email-marketing-page-header__actions {
    grid-template-columns:
      1fr;
  }


  .email-marketing-page-header__actions
  .email-marketing-page-header__campaign {
    grid-column:
      auto;
  }


  .email-marketing-navigation {
    padding:
      5px;
  }


  .email-marketing-navigation__item {
    min-height:
      36px;

    padding:
      0
      11px;

    font-size:
      11px;
  }


  .email-marketing-navigation__item span {
    display:
      none;
  }


  .email-marketing-navigation__item svg {
    width:
      17px;

    height:
      17px;
  }


  .email-marketing-metric-card {
    padding:
      13px;
  }


  .email-marketing-metric-card__content
  > strong {
    font-size:
      23px;
  }


  .email-marketing-panel__header {
    flex-direction:
      column;

    padding:
      15px;
  }


  .email-marketing-panel__header
  .email-marketing-button {
    width:
      100%;
  }


  .email-marketing-panel__body {
    padding:
      10px;
  }


  .email-marketing-campaign-row {
    align-items:
      flex-start;

    flex-direction:
      column;
  }


  .email-marketing-campaign-row__meta {
    align-items:
      flex-start;

    width:
      100%;
  }


  .email-marketing-schedule-row {
    grid-template-columns:
      36px
      minmax(
        0,
        1fr
      );
  }


  .email-marketing-schedule-row time {
    grid-column:
      2;
  }


  .email-marketing-campaign-actions__right
  .email-marketing-button {
    flex:
      1 1
      130px;
  }


  .email-marketing-form-section {
    padding:
      12px;
  }


  .email-marketing-form-section__header {
    margin-bottom:
      13px;

    padding-bottom:
      11px;
  }


  .email-marketing-editor-textarea {
    min-height:
      300px;

    padding:
      11px;
  }


  .email-marketing-preview-card {
    min-height:
      310px;
  }


  .email-marketing-preview-card__body {
    padding:
      10px;
  }


  .email-marketing-email-preview {
    padding:
      16px
      8px;
  }


  .email-marketing-contact-picker__quick-select {
    align-items:
      stretch;
  }


  .email-marketing-contact-picker__quick-select
  > span {
    width:
      100%;

    margin:
      0
      0
      2px;
  }


  .email-marketing-chip-button {
    flex:
      1 1
      auto;
  }


  .email-marketing-contact-row {
    grid-template-columns:
      18px
      36px
      minmax(
        0,
        1fr
      );

    gap:
      8px;

    min-height:
      62px;

    padding:
      8px;
  }


  .email-marketing-contact-row__avatar {
    width:
      36px;

    height:
      36px;

    border-radius:
      8px;
  }


  .email-marketing-contact-row__badges {
    gap:
      4px;
  }


  .email-marketing-tag {
    min-height:
      22px;

    padding:
      0
      7px;

    font-size:
      8px;
  }


  .email-marketing-template-history-row {
    grid-template-columns:
      36px
      minmax(
        0,
        1fr
      );
  }


  .email-marketing-template-history-row__avatar {
    width:
      36px;

    height:
      36px;
  }


  .email-marketing-template-history-row__metrics,
  .email-marketing-template-history-row
  > .email-marketing-tag {
    grid-column:
      2;
  }


  .email-marketing-template-history__metrics {
    grid-template-columns:
      1fr;
  }


  .email-marketing-template-history__metrics
  > article {
    flex-direction:
      row;

    align-items:
      center;

    justify-content:
      space-between;
  }


  .email-marketing-template-history__metrics
  strong {
    font-size:
      17px;
  }


  .email-marketing-batch-card__metrics {
    grid-template-columns:
      1fr;
  }


  .email-marketing-batch-card__metrics
  > div {
    flex-direction:
      row;

    align-items:
      center;

    justify-content:
      space-between;
  }


  .email-marketing-batch-card__actions
  .email-marketing-button {
    flex:
      1 1
      100px;
  }


  .email-marketing-history-row {
    padding:
      10px;
  }


  .email-marketing-history-row__main {
    align-items:
      flex-start;

    flex-direction:
      column;
  }


  .email-marketing-history-row__metrics {
    align-items:
      flex-start;
  }


  .email-marketing-file-actions {
    display:
      grid;

    grid-template-columns:
      1fr
      1fr;
  }


  .email-marketing-file-action {
    width:
      100%;
  }


  .email-marketing-variables__list {
    display:
      grid;

    grid-template-columns:
      1fr;
  }


  .email-marketing-variable {
    justify-content:
      space-between;

    width:
      100%;
  }


  .email-marketing-toast {
    right:
      8px;

    bottom:
      8px;

    width:
      calc(
        100vw -
        16px
      );
  }
}


/* =========================================================
   RESPONSIVE · 380
   ========================================================= */

@media (
  max-width:
    380px
) {
  .email-marketing-page {
    padding:
      8px
      6px
      18px;
  }


  .email-marketing-page-header {
    padding:
      12px;
  }


  .email-marketing-page-header h1 {
    font-size:
      21px;
  }


  .email-marketing-page-header p {
    font-size:
      11px;
  }


  .email-marketing-metric-card__icon {
    width:
      38px;

    height:
      38px;

    flex-basis:
      38px;
  }


  .email-marketing-quick-action {
    padding:
      13px;
  }


  .email-marketing-form-section {
    padding:
      10px;
  }


  .email-marketing-file-actions {
    grid-template-columns:
      1fr;
  }


  .email-marketing-template-history__metrics {
    grid-template-columns:
      1fr;
  }


  .email-marketing-modal-root {
    padding:
      4px;
  }


  .email-marketing-modal {
    width:
      calc(
        100vw -
        8px
      );

    max-height:
      calc(
        100dvh -
        8px
      );

    border-radius:
      8px;
  }
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (
  prefers-reduced-motion:
    reduce
) {
  #emailMarketingPage *,
  #emailMarketingPage *::before,
  #emailMarketingPage *::after,
  .email-marketing-modal-root *,
  .email-marketing-modal-root *::before,
  .email-marketing-modal-root *::after,
  .email-marketing-toast {
    scroll-behavior:
      auto !important;

    animation-duration:
      0.01ms !important;

    animation-iteration-count:
      1 !important;

    transition-duration:
      0.01ms !important;
  }
}


/* =========================================================
   HIGH CONTRAST BORDERS
   ========================================================= */

@media (
  prefers-contrast:
    more
) {
  #emailMarketingPage,
  .email-marketing-modal-root {
    --em-border:
      #8d9299;

    --em-border-soft:
      #aeb2b8;

    --em-border-strong:
      #656a70;
  }


  html[data-theme="dark"]
  #emailMarketingPage,
  html[data-theme="dark"]
  .email-marketing-modal-root,
  body.dark
  #emailMarketingPage,
  body.dark
  .email-marketing-modal-root {
    --em-border:
      #666666;

    --em-border-soft:
      #4c4c4c;

    --em-border-strong:
      #8b8b8b;
  }
}


/* =========================================================
   PRINT
   ========================================================= */

@media print {
  .email-marketing-shell__sidebar,
  .email-marketing-shell__topbar,
  .email-marketing-shell__rightbar,
  .email-marketing-shell__footer,
  .email-marketing-navigation,
  .email-marketing-page-header__actions,
  .email-marketing-campaign-actions,
  .email-marketing-file-actions,
  .email-marketing-template-toolbar,
  .email-marketing-pagination,
  .email-marketing-button,
  .email-marketing-icon-button,
  .email-marketing-toast,
  .email-marketing-modal-root {
    display:
      none !important;
  }


  .email-marketing-shell {
    display:
      block;

    min-height:
      auto;

    background:
      #ffffff;
  }


  .email-marketing-shell__workspace,
  .email-marketing-shell__main {
    display:
      block;

    min-height:
      auto;

    overflow:
      visible;

    background:
      #ffffff;
  }


  .email-marketing-page {
    display:
      block;

    max-width:
      none;

    margin:
      0;

    padding:
      0;

    color:
      #000000;

    background:
      #ffffff;
  }


  .email-marketing-page-header,
  .email-marketing-panel,
  .email-marketing-form-section,
  .email-marketing-template-card,
  .email-marketing-library-card,
  .email-marketing-history-row,
  .email-marketing-batch-card {
    break-inside:
      avoid;

    box-shadow:
      none;
  }
}


/* =========================================================
   MODAL · Z-INDEX ABSOLUTO SOBRE APP
   ========================================================= */

.email-marketing-modal-root--open {
  z-index:
    2147483000;
}


.email-marketing-modal-root--open
.email-marketing-modal-backdrop {
  z-index:
    0;
}


.email-marketing-modal-root--open
.email-marketing-modal {
  z-index:
    1;
}


/* =========================================================
   EVITAR SIDEBAR/TOPBAR SOBRE MODAL
   ========================================================= */

body.email-marketing-modal-open
.sidebar,
body.email-marketing-modal-open
.sidebar-root,
body.email-marketing-modal-open
.topbar,
body.email-marketing-modal-open
.topbar-root,
body.email-marketing-modal-open
.rightbar,
body.email-marketing-modal-open
.rightbar-root,
body.email-marketing-modal-open
footer {
  pointer-events:
    none;
}


/* =========================================================
   FONDO NEGRO REAL · DARK
   ========================================================= */

html[data-theme="dark"]
.email-marketing-shell,
html[data-theme="dark"]
.email-marketing-shell__workspace,
html[data-theme="dark"]
.email-marketing-shell__main,
html[data-theme="dark"]
.email-marketing-page,
body.dark
.email-marketing-shell,
body.dark
.email-marketing-shell__workspace,
body.dark
.email-marketing-shell__main,
body.dark
.email-marketing-page {
  background:
    #050505;
}


/* =========================================================
   DARK · DIVISIONES MÁS FIRMES
   ========================================================= */

html[data-theme="dark"]
.email-marketing-page-header,
html[data-theme="dark"]
.email-marketing-navigation,
html[data-theme="dark"]
.email-marketing-panel,
html[data-theme="dark"]
.email-marketing-view-header,
html[data-theme="dark"]
.email-marketing-form-section,
html[data-theme="dark"]
.email-marketing-campaign-actions,
html[data-theme="dark"]
.email-marketing-template-toolbar,
html[data-theme="dark"]
.email-marketing-template-card,
html[data-theme="dark"]
.email-marketing-library-card,
html[data-theme="dark"]
.email-marketing-history-row,
html[data-theme="dark"]
.email-marketing-batch-card,
body.dark
.email-marketing-page-header,
body.dark
.email-marketing-navigation,
body.dark
.email-marketing-panel,
body.dark
.email-marketing-view-header,
body.dark
.email-marketing-form-section,
body.dark
.email-marketing-campaign-actions,
body.dark
.email-marketing-template-toolbar,
body.dark
.email-marketing-template-card,
body.dark
.email-marketing-library-card,
body.dark
.email-marketing-history-row,
body.dark
.email-marketing-batch-card {
  border-color:
    #393939;
}


/* =========================================================
   DARK · INPUTS FIRMES
   ========================================================= */

html[data-theme="dark"]
.email-marketing-field input,
html[data-theme="dark"]
.email-marketing-field textarea,
html[data-theme="dark"]
.email-marketing-field select,
html[data-theme="dark"]
.email-marketing-select,
html[data-theme="dark"]
.email-marketing-search,
body.dark
.email-marketing-field input,
body.dark
.email-marketing-field textarea,
body.dark
.email-marketing-field select,
body.dark
.email-marketing-select,
body.dark
.email-marketing-search {
  border-color:
    #4a4a4a;

  color:
    #ffffff;

  background:
    #0b0b0b;
}


/* =========================================================
   DARK · TEXTO FIRME
   ========================================================= */

html[data-theme="dark"]
#emailMarketingPage strong,
html[data-theme="dark"]
#emailMarketingPage h1,
html[data-theme="dark"]
#emailMarketingPage h2,
html[data-theme="dark"]
#emailMarketingPage h3,
html[data-theme="dark"]
.email-marketing-modal-root strong,
html[data-theme="dark"]
.email-marketing-modal-root h1,
html[data-theme="dark"]
.email-marketing-modal-root h2,
html[data-theme="dark"]
.email-marketing-modal-root h3,
body.dark
#emailMarketingPage strong,
body.dark
#emailMarketingPage h1,
body.dark
#emailMarketingPage h2,
body.dark
#emailMarketingPage h3,
body.dark
.email-marketing-modal-root strong,
body.dark
.email-marketing-modal-root h1,
body.dark
.email-marketing-modal-root h2,
body.dark
.email-marketing-modal-root h3 {
  color:
    #ffffff;

  font-weight:
    850;
}


/* =========================================================
   SIN SCROLL HORIZONTAL
   ========================================================= */

#emailMarketingPage,
.email-marketing-page,
.email-marketing-shell,
.email-marketing-shell__workspace,
.email-marketing-shell__main,
.email-marketing-campaign-layout,
.email-marketing-form-section,
.email-marketing-panel,
.email-marketing-view-header {
  max-width:
    100%;

  overflow-x:
    hidden;
}


/* =========================================================
   ELEMENTOS FLEX / GRID · MIN WIDTH
   ========================================================= */

.email-marketing-page *,
.email-marketing-modal * {
  min-width:
    0;
}


/* =========================================================
   TOUCH DEVICES
   ========================================================= */

@media (
  hover:
    none
) {
  .email-marketing-button:hover:not(
    :disabled
  ),
  .email-marketing-icon-button:hover:not(
    :disabled
  ),
  .email-marketing-template-card:hover,
  .email-marketing-library-card:hover,
  .email-marketing-batch-card:hover,
  .email-marketing-campaign-row:hover {
    transform:
      none;
  }
}


/* =========================================================
   FIN PARTE 4 DE 4
   ========================================================= */