.contact-autocomplete {
  position:
    relative;

  width:
    100%;
}

.contact-autocomplete textarea {
  display:
    block;
}

.contact-autocomplete__dropdown {
  position:
    absolute;

  z-index:
    300;

  top:
    calc(
      100% +
      7px
    );

  right:
    0;

  left:
    0;

  max-height:
    340px;

  overflow-y:
    auto;

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

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

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

.contact-autocomplete__option {
  display:
    grid;

  width:
    100%;

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

  align-items:
    center;

  gap:
    11px;

  padding:
    11px
    12px;

  border:
    0;

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

  background:
    transparent;

  color:
    var(
      --text
    );

  text-align:
    left;

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

.contact-autocomplete__option:last-child {
  border-bottom:
    0;
}

.contact-autocomplete__option:hover {
  background:
    var(
      --primary-muted
    );
}

.contact-autocomplete__avatar,
.contact-cell__avatar {
  display:
    grid;

  width:
    36px;

  height:
    36px;

  place-items:
    center;

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

  background:
    var(
      --surface-secondary
    );

  color:
    var(
      --primary
    );

  font-family:
    monospace;

  font-weight:
    700;
}

.contact-autocomplete__copy {
  display:
    grid;

  min-width:
    0;

  gap:
    1px;
}

.contact-autocomplete__copy strong,
.contact-autocomplete__copy small,
.contact-autocomplete__copy span {
  overflow:
    hidden;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}

.contact-autocomplete__copy strong {
  font-size:
    13px;
}

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

  font-size:
    10px;
}

.contact-autocomplete__copy span {
  color:
    var(
      --text-secondary
    );

  font-size:
    11px;
}

.contact-autocomplete__empty {
  padding:
    16px;

  color:
    var(
      --text-muted
    );

  text-align:
    center;
}

.contacts-filters {
  grid-template-columns:
    minmax(
      220px,
      1fr
    )
    minmax(
      150px,
      190px
    )
    auto
    auto;
}

.contact-cell {
  display:
    flex;

  min-width:
    190px;

  align-items:
    center;

  gap:
    10px;
}

.contact-cell > div {
  display:
    grid;

  gap:
    2px;
}

.contact-cell strong {
  color:
    var(
      --text
    );
}

.contact-cell span {
  color:
    var(
      --text-muted
    );

  font-size:
    11px;
}

.contact-delete-button {
  color:
    var(
      --danger
    );
}

.contact-form {
  display:
    grid;

  gap:
    4px;
}

.calendar-shell {
  max-width:
    1280px;

  margin:
    0 auto;
}

.calendar-header {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    18px;

  margin-bottom:
    22px;

  padding-bottom:
    18px;

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

.calendar-header__label {
  display:
    block;

  margin-bottom:
    5px;

  color:
    var(
      --primary
    );

  font-family:
    monospace;

  font-size:
    9px;

  letter-spacing:
    0.13em;
}

.calendar-header h2 {
  margin:
    0;

  font-size:
    24px;
}

.calendar-header__actions {
  display:
    flex;

  align-items:
    center;

  gap:
    8px;
}

.calendar-weekdays {
  display:
    grid;

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

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

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

.calendar-weekdays span {
  padding:
    9px;

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

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

  color:
    var(
      --text-muted
    );

  font-family:
    monospace;

  font-size:
    9px;

  letter-spacing:
    0.1em;

  text-align:
    center;
}

.calendar-grid {
  display:
    grid;

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

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

.calendar-day {
  position:
    relative;

  display:
    flex;

  min-width:
    0;

  min-height:
    145px;

  flex-direction:
    column;

  align-items:
    stretch;

  padding:
    11px;

  overflow:
    hidden;

  border:
    0;

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

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

  background:
    var(
      --background-secondary
    );

  color:
    var(
      --text
    );

  text-align:
    left;

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

.calendar-day:not(
  .calendar-day--empty
):hover {
  background:
    var(
      --surface-secondary
    );
}

.calendar-day--empty {
  cursor:
    default;

  opacity:
    0.35;
}

.calendar-day.is-today::before {
  position:
    absolute;

  top:
    0;

  right:
    0;

  left:
    0;

  height:
    2px;

  background:
    var(
      --primary
    );

  content:
    "";
}

.calendar-day.has-emails {
  background:
    var(
      --surface
    );
}

.calendar-day__number {
  display:
    grid;

  width:
    30px;

  height:
    30px;

  place-items:
    center;

  border:
    1px solid
    transparent;

  font-family:
    monospace;

  font-size:
    11px;
}

.calendar-day.is-today
.calendar-day__number {
  border-color:
    var(
      --primary
    );

  color:
    var(
      --primary
    );
}

.calendar-day__summary {
  display:
    grid;

  margin-top:
    auto;

  gap:
    0;
}

.calendar-day__summary strong {
  color:
    var(
      --text
    );

  font-family:
    monospace;

  font-size:
    28px;
}

.calendar-day__summary span {
  color:
    var(
      --text-muted
    );

  font-size:
    10px;
}

.calendar-day__indicators {
  display:
    flex;

  flex-wrap:
    wrap;

  gap:
    5px;

  margin-top:
    9px;
}

.calendar-indicator {
  display:
    inline-flex;

  min-width:
    25px;

  justify-content:
    center;

  padding:
    3px
    5px;

  border:
    1px solid
    currentColor;

  font-family:
    monospace;

  font-size:
    9px;
}

.calendar-indicator--success {
  color:
    var(
      --success
    );
}

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

.calendar-indicator--warning {
  color:
    var(
      --warning
    );
}

.calendar-day__empty-label {
  margin-top:
    auto;

  color:
    var(
      --text-muted
    );

  font-family:
    monospace;

  font-size:
    8px;

  letter-spacing:
    0.08em;
}

.calendar-loading {
  grid-column:
    1 /
    -1;

  padding:
    50px;

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

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

  color:
    var(
      --text-muted
    );

  text-align:
    center;
}

.calendar-day-list {
  display:
    grid;

  gap:
    9px;
}

.calendar-email {
  display:
    grid;

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

  align-items:
    center;

  gap:
    12px;

  padding:
    13px;

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

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

.calendar-email__time {
  color:
    var(
      --primary
    );

  font-family:
    monospace;

  font-size:
    12px;
}

.calendar-email__content {
  display:
    grid;

  min-width:
    0;

  gap:
    4px;
}

.calendar-email__heading {
  display:
    flex;

  min-width:
    0;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    10px;
}

.calendar-email__heading strong {
  overflow:
    hidden;

  color:
    var(
      --text
    );

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}

.calendar-email__content > span,
.calendar-email__content > small {
  overflow:
    hidden;

  color:
    var(
      --text-secondary
    );

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}

.calendar-email__content > small {
  color:
    var(
      --text-muted
    );
}

.calendar-day-empty {
  padding:
    35px;

  color:
    var(
      --text-muted
    );

  text-align:
    center;
}

@media (
  max-width:
    900px
) {
  .contacts-filters {
    grid-template-columns:
      minmax(
        0,
        1fr
      )
      minmax(
        140px,
        180px
      );
  }

  .contacts-filters .button {
    width:
      100%;
  }

  .calendar-day {
    min-height:
      115px;

    padding:
      8px;
  }
}

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

  .calendar-shell {
    padding:
      14px;
  }

  .calendar-header {
    align-items:
      flex-start;

    flex-direction:
      column;
  }

  .calendar-header__actions {
    width:
      100%;
  }

  .calendar-header__actions
  .button {
    flex:
      1;
  }

  .calendar-weekdays span {
    padding:
      7px
      2px;

    font-size:
      8px;
  }

  .calendar-day {
    min-height:
      92px;

    padding:
      6px;
  }

  .calendar-day__number {
    width:
      24px;

    height:
      24px;
  }

  .calendar-day__summary strong {
    font-size:
      20px;
  }

  .calendar-day__summary span,
  .calendar-day__empty-label {
    display:
      none;
  }

  .calendar-day__indicators {
    gap:
      2px;
  }

  .calendar-indicator {
    min-width:
      20px;

    padding:
      2px;

    font-size:
      8px;
  }

  .calendar-email {
    grid-template-columns:
      48px
      minmax(
        0,
        1fr
      )
      36px;
  }

  .calendar-email__heading {
    align-items:
      flex-start;

    flex-direction:
      column;
  }
}

@media (
  max-width:
    480px
) {
  .calendar-day {
    min-height:
      76px;
  }

  .calendar-day__summary strong {
    font-size:
      16px;
  }

  .calendar-day__indicators {
    display:
      none;
  }
}

/* =========================================================
   CALENDARIO · CORRECCIÓN DE ANCHO
   ========================================================= */

.calendar-shell {
  width:
    100%;

  max-width:
    none;

  margin:
    0;
}

.calendar-grid,
.calendar-weekdays {
  width:
    100%;
}

.calendar-day {
  min-width:
    0;

  min-height:
    132px;
}

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

  .calendar-shell {
    width:
      100%;
  }
}

@media (
  min-width:
    1200px
) {
  .calendar-day {
    min-height:
      145px;
  }
}

/* =========================================================
   CONTACTOS · CORRECCIÓN RESPONSIVE COMPLETA
   ========================================================= */

@media (
  max-width:
    760px
) {
  body,
  html {
    width:
      100%;

    max-width:
      100%;

    overflow-x:
      hidden
      !important;
  }

  body:has(
    a[href="#/contactos"].is-active
  ) {
    overflow-x:
      hidden
      !important;
  }

  body:has(
    a[href="#/contactos"].is-active
  )
  .app-layout {
    width:
      100%;

    min-width:
      0;

    max-width:
      100%;

    min-height:
      100svh;

    align-items:
      stretch;

    overflow-x:
      hidden;
  }

  body:has(
    a[href="#/contactos"].is-active
  )
  .main-content {
    width:
      100%;

    min-width:
      0;

    max-width:
      100%;

    min-height:
      100svh;

    margin:
      0
      !important;

    padding:
      0
      !important;

    overflow-x:
      hidden
      !important;
  }

  body:has(
    a[href="#/contactos"].is-active
  )
  .sidebar
  +
  .main-content {
    margin-left:
      0
      !important;

    padding-top:
      0
      !important;
  }

  body:has(
    a[href="#/contactos"].is-active
  )
  .app-topbar,
  body:has(
    a[href="#/contactos"].is-active
  )
  .topbar,
  body:has(
    a[href="#/contactos"].is-active
  )
  .page-header {
    position:
      relative;

    top:
      auto;

    left:
      auto;

    right:
      auto;

    width:
      100%;

    min-width:
      0;

    max-width:
      100%;

    min-height:
      0;

    margin:
      0
      !important;

    padding-top:
      14px
      !important;

    overflow:
      hidden;
  }

  body:has(
    a[href="#/contactos"].is-active
  )
  .page-content {
    display:
      grid;

    width:
      100%;

    min-width:
      0;

    max-width:
      100%;

    gap:
      14px;

    margin:
      0
      !important;

    padding:
      14px
      !important;

    overflow-x:
      hidden
      !important;
  }

  body:has(
    a[href="#/contactos"].is-active
  )
  .mobile-topbar-spacer,
  body:has(
    a[href="#/contactos"].is-active
  )
  .topbar-spacer,
  body:has(
    a[href="#/contactos"].is-active
  )
  .sidebar-spacer,
  body:has(
    a[href="#/contactos"].is-active
  )
  [data-topbar-spacer] {
    display:
      none
      !important;

    width:
      0
      !important;

    height:
      0
      !important;

    min-height:
      0
      !important;

    margin:
      0
      !important;

    padding:
      0
      !important;
  }

  body:has(
    a[href="#/contactos"].is-active
  )
  .card,
  body:has(
    a[href="#/contactos"].is-active
  )
  .table-card,
  body:has(
    a[href="#/contactos"].is-active
  )
  .table-wrapper,
  body:has(
    a[href="#/contactos"].is-active
  )
  .contacts-page,
  body:has(
    a[href="#/contactos"].is-active
  )
  .contacts-shell,
  body:has(
    a[href="#/contactos"].is-active
  )
  .contacts-toolbar {
    width:
      100%;

    min-width:
      0;

    max-width:
      100%;

    overflow-x:
      hidden;
  }

  body:has(
    a[href="#/contactos"].is-active
  )
  .filters,
  body:has(
    a[href="#/contactos"].is-active
  )
  form.filters,
  body:has(
    a[href="#/contactos"].is-active
  )
  .contacts-filters {
    display:
      grid;

    width:
      100%;

    min-width:
      0;

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

    gap:
      13px;
  }

  body:has(
    a[href="#/contactos"].is-active
  )
  .filters
  .field,
  body:has(
    a[href="#/contactos"].is-active
  )
  form.filters
  .field,
  body:has(
    a[href="#/contactos"].is-active
  )
  .contacts-filters
  .field {
    width:
      100%;

    min-width:
      0;

    max-width:
      100%;
  }

  body:has(
    a[href="#/contactos"].is-active
  )
  .filters
  input,
  body:has(
    a[href="#/contactos"].is-active
  )
  .filters
  select,
  body:has(
    a[href="#/contactos"].is-active
  )
  .filters
  textarea,
  body:has(
    a[href="#/contactos"].is-active
  )
  .filters
  button,
  body:has(
    a[href="#/contactos"].is-active
  )
  form.filters
  input,
  body:has(
    a[href="#/contactos"].is-active
  )
  form.filters
  select,
  body:has(
    a[href="#/contactos"].is-active
  )
  form.filters
  button {
    width:
      100%;

    min-width:
      0;

    max-width:
      100%;
  }

  body:has(
    a[href="#/contactos"].is-active
  )
  .table-card {
    padding:
      0;

    overflow:
      hidden;

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

  body:has(
    a[href="#/contactos"].is-active
  )
  .table-wrapper {
    width:
      100%;

    max-width:
      100%;

    overflow-x:
      hidden
      !important;
  }

  body:has(
    a[href="#/contactos"].is-active
  )
  table {
    display:
      block;

    width:
      100%;

    min-width:
      0
      !important;

    max-width:
      100%;

    table-layout:
      fixed;
  }

  body:has(
    a[href="#/contactos"].is-active
  )
  table
  thead {
    display:
      none;
  }

  body:has(
    a[href="#/contactos"].is-active
  )
  table
  tbody {
    display:
      grid;

    width:
      100%;

    gap:
      0;
  }

  body:has(
    a[href="#/contactos"].is-active
  )
  table
  tbody
  tr {
    display:
      grid;

    width:
      100%;

    min-width:
      0;

    max-width:
      100%;

    padding:
      14px;

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

    background:
      var(
        --surface
      );
  }

  body:has(
    a[href="#/contactos"].is-active
  )
  table
  tbody
  tr:last-child {
    border-bottom:
      0;
  }

  body:has(
    a[href="#/contactos"].is-active
  )
  table
  tbody
  td {
    display:
      grid;

    width:
      100%;

    min-width:
      0;

    max-width:
      100%;

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

    align-items:
      start;

    gap:
      10px;

    padding:
      10px
      0;

    border:
      0;

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

    overflow:
      hidden;

    text-align:
      left;

    white-space:
      normal;

    overflow-wrap:
      anywhere;

    word-break:
      break-word;
  }

  body:has(
    a[href="#/contactos"].is-active
  )
  table
  tbody
  td:last-child {
    border-bottom:
      0;
  }

  body:has(
    a[href="#/contactos"].is-active
  )
  table
  tbody
  td:nth-child(1)::before {
    content:
      "CONTACTO";
  }

  body:has(
    a[href="#/contactos"].is-active
  )
  table
  tbody
  td:nth-child(2)::before {
    content:
      "EMPRESA";
  }

  body:has(
    a[href="#/contactos"].is-active
  )
  table
  tbody
  td:nth-child(3)::before {
    content:
      "CORREO";
  }

  body:has(
    a[href="#/contactos"].is-active
  )
  table
  tbody
  td:nth-child(4)::before {
    content:
      "TELÉFONO";
  }

  body:has(
    a[href="#/contactos"].is-active
  )
  table
  tbody
  td:nth-child(5)::before {
    content:
      "ESTADO";
  }

  body:has(
    a[href="#/contactos"].is-active
  )
  table
  tbody
  td:nth-child(6)::before {
    content:
      "ACCIONES";
  }

  body:has(
    a[href="#/contactos"].is-active
  )
  table
  tbody
  td::before {
    color:
      var(
        --text-muted
      );

    font-family:
      monospace;

    font-size:
      8px;

    font-weight:
      600;

    letter-spacing:
      0.1em;

    line-height:
      1.5;
  }

  body:has(
    a[href="#/contactos"].is-active
  )
  table
  tbody
  td[colspan] {
    display:
      block;

    padding:
      28px
      14px;

    border:
      0;

    color:
      var(
        --text-muted
      );

    text-align:
      center;
  }

  body:has(
    a[href="#/contactos"].is-active
  )
  table
  tbody
  td[colspan]::before {
    display:
      none;
  }

  body:has(
    a[href="#/contactos"].is-active
  )
  table
  tbody
  td
  > * {
    min-width:
      0;

    max-width:
      100%;
  }

  body:has(
    a[href="#/contactos"].is-active
  )
  table
  tbody
  td
  a,
  body:has(
    a[href="#/contactos"].is-active
  )
  table
  tbody
  td
  span,
  body:has(
    a[href="#/contactos"].is-active
  )
  table
  tbody
  td
  strong,
  body:has(
    a[href="#/contactos"].is-active
  )
  table
  tbody
  td
  div,
  body:has(
    a[href="#/contactos"].is-active
  )
  table
  tbody
  td
  p {
    min-width:
      0;

    max-width:
      100%;

    overflow-wrap:
      anywhere;

    word-break:
      break-word;
  }

  body:has(
    a[href="#/contactos"].is-active
  )
  .table-actions,
  body:has(
    a[href="#/contactos"].is-active
  )
  .contacts-actions {
    display:
      flex;

    width:
      100%;

    min-width:
      0;

    flex-wrap:
      wrap;

    justify-content:
      flex-start;

    gap:
      7px;
  }

  body:has(
    a[href="#/contactos"].is-active
  )
  .pagination {
    display:
      grid;

    width:
      100%;

    min-width:
      0;

    max-width:
      100%;

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

    align-items:
      center;

    gap:
      8px;

    padding:
      12px;

    overflow:
      hidden;
  }

  body:has(
    a[href="#/contactos"].is-active
  )
  .pagination
  button,
  body:has(
    a[href="#/contactos"].is-active
  )
  .pagination
  .button {
    width:
      100%;

    min-width:
      0;

    max-width:
      100%;

    padding-right:
      8px;

    padding-left:
      8px;
  }

  body:has(
    a[href="#/contactos"].is-active
  )
  .pagination
  > span {
    min-width:
      68px;

    color:
      var(
        --text-muted
      );

    font-family:
      monospace;

    font-size:
      8px;

    text-align:
      center;

    white-space:
      nowrap;
  }
}

@media (
  max-width:
    430px
) {
  body:has(
    a[href="#/contactos"].is-active
  )
  .page-content {
    padding:
      10px
      !important;
  }

  body:has(
    a[href="#/contactos"].is-active
  )
  .app-topbar,
  body:has(
    a[href="#/contactos"].is-active
  )
  .topbar,
  body:has(
    a[href="#/contactos"].is-active
  )
  .page-header {
    padding-top:
      10px
      !important;
  }

  body:has(
    a[href="#/contactos"].is-active
  )
  table
  tbody
  td {
    grid-template-columns:
      minmax(
        76px,
        29%
      )
      minmax(
        0,
        1fr
      );

    gap:
      8px;

    font-size:
      12px;
  }

  body:has(
    a[href="#/contactos"].is-active
  )
  .pagination {
    grid-template-columns:
      minmax(
        0,
        1fr
      )
      minmax(
        0,
        1fr
      );
  }

  body:has(
    a[href="#/contactos"].is-active
  )
  .pagination
  > span {
    grid-column:
      1 /
      -1;

    grid-row:
      1;
  }
}