@keyframes pageEnter {
  from {
    opacity:
      0;

    transform:
      translateY(
        14px
      );
  }

  to {
    opacity:
      1;

    transform:
      translateY(
        0
      );
  }
}

@keyframes mailPulse {
  0%,
  100% {
    transform:
      scale(
        1
      );
  }

  50% {
    transform:
      scale(
        1.04
      );
  }
}

@keyframes spinnerRotate {
  to {
    transform:
      rotate(
        360deg
      );
  }
}

@keyframes successIconEnter {
  0% {
    opacity:
      0;

    transform:
      scale(
        0.35
      )
      rotate(
        -20deg
      );
  }

  65% {
    transform:
      scale(
        1.12
      )
      rotate(
        3deg
      );
  }

  100% {
    opacity:
      1;

    transform:
      scale(
        1
      )
      rotate(
        0
      );
  }
}

@keyframes successContentEnter {
  from {
    opacity:
      0;

    transform:
      translateY(
        18px
      );
  }

  to {
    opacity:
      1;

    transform:
      translateY(
        0
      );
  }
}

@keyframes errorShake {
  0%,
  100% {
    transform:
      translateX(
        0
      );
  }

  25% {
    transform:
      translateX(
        -7px
      );
  }

  50% {
    transform:
      translateX(
        7px
      );
  }

  75% {
    transform:
      translateX(
        -4px
      );
  }
}

.mail-workspace {
  position:
    relative;

  width:
    100%;

  max-width:
    1100px;

  margin:
    0 auto;
}

.mail-form--animated {
  animation:
    pageEnter
    450ms
    ease
    both;

  transition:
    opacity
    280ms
    ease,
    transform
    280ms
    ease,
    border-color
    220ms
    ease;
}

.mail-form--animated.is-sending {
  border-color:
    var(
      --primary
    );
}

.mail-form--animated.is-sending
.field {
  opacity:
    0.72;

  pointer-events:
    none;
}

.mail-form--animated.is-success {
  transform:
    scale(
      0.985
    );

  opacity:
    0.7;
}

.mail-form--animated.is-hidden {
  opacity:
    0;

  transform:
    translateY(
      -14px
    )
    scale(
      0.985
    );
}

.mail-form--animated.is-returning {
  animation:
    pageEnter
    500ms
    ease
    both;
}

.mail-form--animated.has-error {
  animation:
    errorShake
    450ms
    ease;
}

.mail-form__header {
  display:
    flex;

  align-items:
    center;

  gap:
    14px;

  margin-bottom:
    26px;

  padding-bottom:
    20px;

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

.mail-form__header h2 {
  margin-bottom:
    4px;

  font-size:
    20px;
}

.mail-form__header p {
  margin:
    0;

  color:
    var(
      --text-secondary
    );
}

.mail-form__icon {
  display:
    grid;

  width:
    46px;

  height:
    46px;

  flex:
    0 0
    auto;

  place-items:
    center;

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

  border-radius:
    13px;

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

.mail-form--animated.is-sending
.mail-form__icon {
  animation:
    mailPulse
    1.2s
    ease-in-out
    infinite;
}

.mail-submit {
  min-width:
    170px;
}

.mail-submit__default,
.mail-submit__loading {
  align-items:
    center;

  justify-content:
    center;

  gap:
    8px;
}

.mail-submit__default {
  display:
    inline-flex;
}

.mail-submit__loading {
  display:
    none;
}

.mail-submit.is-loading
.mail-submit__default {
  display:
    none;
}

.mail-submit.is-loading
.mail-submit__loading {
  display:
    inline-flex;
}

.button-spinner {
  width:
    17px;

  height:
    17px;

  border:
    2px solid
    rgba(
      255,
      255,
      255,
      0.42
    );

  border-top-color:
    #ffffff;

  border-radius:
    50%;

  animation:
    spinnerRotate
    700ms
    linear
    infinite;
}

.selected-files {
  display:
    flex;

  flex-wrap:
    wrap;

  gap:
    8px;

  min-height:
    42px;

  align-items:
    center;

  padding:
    10px 12px;

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

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

  color:
    var(
      --text-secondary
    );

  font-size:
    13px;
}

.selected-files.has-files {
  border-style:
    solid;

  color:
    var(
      --text
    );
}

.selected-files span {
  display:
    inline-flex;

  align-items:
    center;

  gap:
    6px;

  padding:
    7px 9px;

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

  border-radius:
    8px;

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

.selected-files svg {
  width:
    15px;

  height:
    15px;
}

.send-result {
  display:
    none;

  min-height:
    520px;

  flex-direction:
    column;

  align-items:
    center;

  justify-content:
    center;

  padding:
    48px 28px;

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

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

  background:
    var(
      --surface
    );

  text-align:
    center;

  opacity:
    0;

  transform:
    translateY(
      18px
    );

  transition:
    opacity
    320ms
    ease,
    transform
    320ms
    ease;
}

.send-result.is-visible {
  opacity:
    1;

  transform:
    translateY(
      0
    );
}

.send-result__icon {
  display:
    grid;

  width:
    82px;

  height:
    82px;

  place-items:
    center;

  margin-bottom:
    22px;

  border:
    2px solid
    var(
      --success
    );

  border-radius:
    50%;

  color:
    var(
      --success
    );

  animation:
    successIconEnter
    650ms
    cubic-bezier(
      0.2,
      0.9,
      0.25,
      1.25
    )
    both;
}

.send-result__icon svg {
  width:
    38px;

  height:
    38px;

  stroke-width:
    2.4;
}

.send-result__eyebrow {
  margin-bottom:
    10px;

  color:
    var(
      --success
    );

  font-size:
    12px;

  font-weight:
    700;

  letter-spacing:
    0.08em;

  text-transform:
    uppercase;

  animation:
    successContentEnter
    450ms
    140ms
    ease
    both;
}

.send-result h2 {
  margin-bottom:
    10px;

  font-size:
    clamp(
      28px,
      4vw,
      42px
    );

  animation:
    successContentEnter
    450ms
    190ms
    ease
    both;
}

.send-result p {
  max-width:
    560px;

  margin-bottom:
    28px;

  color:
    var(
      --text-secondary
    );

  font-size:
    16px;

  line-height:
    1.7;

  animation:
    successContentEnter
    450ms
    240ms
    ease
    both;
}

.send-result__actions {
  display:
    flex;

  flex-wrap:
    wrap;

  justify-content:
    center;

  gap:
    10px;

  animation:
    successContentEnter
    450ms
    290ms
    ease
    both;
}

.table-actions {
  display:
    inline-flex;

  align-items:
    center;

  gap:
    7px;
}

.icon-button {
  transition:
    transform
    160ms
    ease,
    background
    160ms
    ease,
    border-color
    160ms
    ease;
}

.icon-button:hover {
  transform:
    translateY(
      -2px
    );

  border-color:
    var(
      --primary
    );

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

.icon-button--download {
  color:
    var(
      --success
    );
}

.icon-button.is-downloading svg {
  animation:
    spinnerRotate
    700ms
    linear
    infinite;
}

.table-card tbody tr {
  transition:
    background
    160ms
    ease;
}

.table-card tbody tr:hover {
  background:
    var(
      --surface-secondary
    );
}

.card {
  animation:
    pageEnter
    420ms
    ease
    both;
}

@media (
  max-width:
    700px
) {
  .mail-form__header {
    align-items:
      flex-start;
  }

  .send-result {
    min-height:
      430px;

    padding:
      38px 18px;
  }

  .send-result__actions {
    width:
      100%;

    flex-direction:
      column;
  }

  .send-result__actions
  .button {
    width:
      100%;
  }

  .mail-submit {
    width:
      100%;
  }
}

@media (
  prefers-reduced-motion:
    reduce
) {
  *,
  *::before,
  *::after {
    animation-duration:
      0.01ms
      !important;

    animation-iteration-count:
      1
      !important;

    transition-duration:
      0.01ms
      !important;
  }
}

/* =========================================================
   WIRTZ MAIL · DARK INDUSTRIAL OVERRIDES
   ========================================================= */

.mail-workspace {
  max-width:
    1120px;
}

.mail-form__header {
  border-bottom-color:
    var(
      --border
    );
}

.mail-form__header h2 {
  color:
    var(
      --text
    );
}

.mail-form__header p {
  color:
    var(
      --text-secondary
    );
}

.mail-form__icon {
  position:
    relative;

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

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

  background:
    var(
      --surface-secondary
    );

  color:
    var(
      --primary
    );
}

.mail-form__icon::before {
  position:
    absolute;

  top:
    -1px;

  left:
    -1px;

  width:
    8px;

  height:
    8px;

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

  border-left:
    1px solid
    var(
      --primary
    );

  content:
    "";
}

.selected-files {
  border-color:
    var(
      --border
    );

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

  background:
    var(
      --background-secondary
    );

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

.selected-files.has-files {
  border-color:
    var(
      --border-strong
    );

  color:
    var(
      --text-secondary
    );
}

.selected-files span {
  border-color:
    var(
      --border
    );

  border-radius:
    var(
      --radius-xs
    );

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

.send-result {
  min-height:
    520px;

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

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

  background:
    var(
      --surface
    );
}

.send-result__icon {
  position:
    relative;

  border-color:
    var(
      --success
    );

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

  background:
    var(
      --success-muted
    );
}

.send-result__icon::before,
.send-result__icon::after {
  position:
    absolute;

  width:
    10px;

  height:
    10px;

  content:
    "";
}

.send-result__icon::before {
  top:
    -2px;

  left:
    -2px;

  border-top:
    2px solid
    var(
      --success
    );

  border-left:
    2px solid
    var(
      --success
    );
}

.send-result__icon::after {
  right:
    -2px;

  bottom:
    -2px;

  border-right:
    2px solid
    var(
      --success
    );

  border-bottom:
    2px solid
    var(
      --success
    );
}

.send-result__eyebrow {
  font-family:
    monospace;

  font-size:
    9px;

  letter-spacing:
    0.14em;
}

.send-result h2 {
  color:
    var(
      --text
    );
}

.send-result p {
  color:
    var(
      --text-secondary
    );
}

.icon-button--download {
  color:
    var(
      --success
    );
}

.button-spinner {
  border-color:
    rgba(
      8,
      10,
      11,
      0.25
    );

  border-top-color:
    var(
      --primary-text
    );
}

@media (
  max-width:
    700px
) {
  .mail-form--animated {
    padding:
      18px;
  }

  .mail-form__header {
    margin-bottom:
      20px;
  }
}

/* =========================================================
   NUEVO CORREO · USAR TODO EL ANCHO DISPONIBLE
   ========================================================= */

.mail-workspace {
  width:
    100%;

  max-width:
    none;

  margin:
    0;
}

.mail-form {
  width:
    100%;
}

.mail-form.card {
  width:
    100%;

  max-width:
    none;
}

@media (
  min-width:
    901px
) {
  .page-content {
    width:
      100%;
  }

  .mail-workspace {
    width:
      100%;
  }

  .mail-form {
    width:
      100%;
  }
}

@media (
  min-width:
    1200px
) {
  .mail-form.card {
    padding:
      28px
      30px;
  }
}