.card {
  position:
    relative;

  padding:
    22px;

  overflow:
    hidden;

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

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

  background:
    var(
      --surface
    );

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

.card::before {
  position:
    absolute;

  top:
    -1px;

  left:
    22px;

  width:
    42px;

  height:
    2px;

  background:
    var(
      --primary
    );

  content:
    "";

  opacity:
    0.72;
}

.card:hover {
  border-color:
    var(
      --border-strong
    );
}

.eyebrow {
  display:
    inline-block;

  margin-bottom:
    12px;

  color:
    var(
      --primary
    );

  font-family:
    monospace;

  font-size:
    9px;

  font-weight:
    700;

  letter-spacing:
    0.13em;

  text-transform:
    uppercase;
}

.form-grid {
  display:
    grid;

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

  gap:
    18px;
}

.field {
  display:
    grid;

  gap:
    8px;

  min-width:
    0;
}

.field--full {
  grid-column:
    1 /
    -1;
}

.field > span {
  color:
    var(
      --text
    );

  font-size:
    12px;

  font-weight:
    600;

  letter-spacing:
    0.025em;
}

.field small {
  color:
    var(
      --text-muted
    );

  font-size:
    11px;
}

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

  min-width:
    0;

  min-height:
    44px;

  padding:
    11px
    12px;

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

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

  outline:
    none;

  background:
    var(
      --background-secondary
    );

  color:
    var(
      --text
    );

  caret-color:
    var(
      --primary
    );

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

.field input::placeholder,
.field textarea::placeholder {
  color:
    var(
      --text-muted
    );
}

.field textarea {
  resize:
    vertical;
}

.field input:hover,
.field textarea:hover,
.field select:hover {
  border-color:
    var(
      --border-strong
    );
}

.field input:focus,
.field textarea:focus,
.field select:focus {
  border-color:
    var(
      --primary
    );

  background:
    #0d1011;
}

.field input[type="file"] {
  padding:
    9px;
}

.field input[type="file"]::file-selector-button {
  margin-right:
    12px;

  padding:
    7px
    10px;

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

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

  background:
    var(
      --surface-secondary
    );

  color:
    var(
      --text
    );

  cursor:
    pointer;
}

.form-actions {
  display:
    flex;

  justify-content:
    flex-end;

  margin-top:
    22px;
}

.button {
  display:
    inline-flex;

  min-height:
    42px;

  align-items:
    center;

  justify-content:
    center;

  gap:
    8px;

  padding:
    10px
    15px;

  border:
    1px solid
    transparent;

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

  font-size:
    13px;

  font-weight:
    700;

  letter-spacing:
    0.015em;

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

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

.button--primary {
  border-color:
    var(
      --primary
    );

  background:
    var(
      --primary
    );

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

.button--primary:hover:not(:disabled) {
  border-color:
    var(
      --primary-hover
    );

  background:
    var(
      --primary-hover
    );
}

.button--secondary {
  border-color:
    var(
      --border
    );

  background:
    var(
      --surface-secondary
    );

  color:
    var(
      --text
    );
}

.button--secondary:hover:not(:disabled) {
  border-color:
    var(
      --border-strong
    );

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

.button--full {
  width:
    100%;
}

.icon-button {
  display:
    inline-grid;

  width:
    36px;

  height:
    36px;

  place-items:
    center;

  padding:
    0;

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

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

  background:
    var(
      --background-secondary
    );

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

.filters {
  display:
    grid;

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

  align-items:
    end;

  gap:
    14px;
}

.table-card {
  padding:
    0;

  overflow:
    hidden;
}

.table-card::before {
  left:
    16px;
}

.table-wrapper {
  width:
    100%;

  overflow-x:
    auto;
}

table {
  width:
    100%;

  min-width:
    780px;

  border-collapse:
    collapse;
}

th,
td {
  padding:
    14px
    15px;

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

  text-align:
    left;

  vertical-align:
    middle;
}

th {
  background:
    #0d1011;

  color:
    var(
      --text-muted
    );

  font-family:
    monospace;

  font-size:
    9px;

  font-weight:
    600;

  letter-spacing:
    0.11em;

  text-transform:
    uppercase;
}

td {
  color:
    var(
      --text-secondary
    );

  font-size:
    13px;
}

tbody tr {
  background:
    transparent;

  transition:
    background
    var(
      --transition-fast
    );
}

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

.cell-wrap {
  max-width:
    320px;

  white-space:
    normal;

  word-break:
    break-word;
}

.status {
  display:
    inline-flex;

  align-items:
    center;

  gap:
    6px;

  padding:
    5px
    8px;

  border:
    1px solid
    currentColor;

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

  font-family:
    monospace;

  font-size:
    9px;

  font-weight:
    700;

  letter-spacing:
    0.06em;
}

.status::before {
  width:
    5px;

  height:
    5px;

  border-radius:
    50%;

  background:
    currentColor;

  content:
    "";
}

.status--enviado {
  color:
    var(
      --success
    );
}

.status--error {
  color:
    var(
      --danger
    );
}

.status--pendiente,
.status--enviando {
  color:
    var(
      --warning
    );
}

.pagination {
  display:
    flex;

  align-items:
    center;

  justify-content:
    flex-end;

  gap:
    14px;

  padding:
    15px;

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

  color:
    var(
      --text-secondary
    );

  font-family:
    monospace;

  font-size:
    10px;
}

.toast-container {
  position:
    fixed;

  z-index:
    1000;

  right:
    20px;

  bottom:
    20px;

  display:
    grid;

  gap:
    10px;
}

.toast {
  position:
    relative;

  min-width:
    280px;

  max-width:
    420px;

  padding:
    14px
    16px;

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

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

  background:
    var(
      --surface-raised
    );

  color:
    var(
      --text
    );

  opacity:
    0;

  transform:
    translateY(
      12px
    );

  transition:
    var(
      --transition
    );
}

.toast::before {
  position:
    absolute;

  top:
    -1px;

  bottom:
    -1px;

  left:
    -1px;

  width:
    3px;

  background:
    var(
      --success
    );

  content:
    "";
}

.toast.is-visible {
  opacity:
    1;

  transform:
    translateY(
      0
    );
}

.toast--error {
  color:
    var(
      --danger
    );
}

.toast--error::before {
  background:
    var(
      --danger
    );
}

.modal-overlay {
  position:
    fixed;

  z-index:
    900;

  inset:
    0;

  display:
    grid;

  place-items:
    center;

  padding:
    24px;

  background:
    rgba(
      0,
      0,
      0,
      0.78
    );
}

.modal {
  width:
    min(
      100%,
      760px
    );

  max-height:
    calc(
      100vh -
      48px
    );

  overflow:
    auto;

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

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

  background:
    var(
      --surface
    );
}

.modal__header {
  position:
    sticky;

  z-index:
    2;

  top:
    0;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    18px;

  padding:
    19px
    21px;

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

  background:
    var(
      --surface
    );
}

.modal__header::after {
  position:
    absolute;

  bottom:
    -1px;

  left:
    21px;

  width:
    46px;

  height:
    2px;

  background:
    var(
      --primary
    );

  content:
    "";
}

.modal__header h2 {
  margin:
    0;

  font-size:
    19px;
}

.modal__content {
  padding:
    22px;
}

.detail-grid {
  display:
    grid;

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

  gap:
    18px;
}

.detail-grid > div {
  display:
    grid;

  gap:
    6px;
}

.detail-grid strong {
  color:
    var(
      --text-muted
    );

  font-family:
    monospace;

  font-size:
    9px;

  letter-spacing:
    0.1em;

  text-transform:
    uppercase;
}

.detail-grid span {
  color:
    var(
      --text-secondary
    );
}

.detail-grid__full {
  grid-column:
    1 /
    -1;
}

.detail-grid pre {
  margin:
    0;

  padding:
    14px;

  overflow:
    auto;

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

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

  background:
    var(
      --background-secondary
    );

  color:
    var(
      --text-secondary
    );

  font-family:
    inherit;

  white-space:
    pre-wrap;

  word-break:
    break-word;
}

@media (
  max-width:
    700px
) {
  .form-grid,
  .filters,
  .detail-grid {
    grid-template-columns:
      minmax(
        0,
        1fr
      );
  }

  .field--full,
  .detail-grid__full {
    grid-column:
      auto;
  }

  .filters .button,
  .form-actions .button {
    width:
      100%;
  }

  .form-actions {
    justify-content:
      stretch;
  }

  .toast-container {
    right:
      12px;

    bottom:
      12px;

    left:
      12px;
  }

  .toast {
    min-width:
      0;

    max-width:
      none;
  }

  .modal-overlay {
    align-items:
      end;

    padding:
      10px;
  }

  .modal {
    max-height:
      calc(
        100vh -
        20px
      );
  }
}