/* =========================================================
   WIRTZ HUB · MI GESTIÓN
   AGENDA SEMANAL V5

   UBICACIÓN:
   frontend/src/pages/mi-gestion/agenda-semanal/
   agenda-semanal.css

   PARTE 1 DE 2

   DISEÑO:
   - Moderno
   - Compacto
   - Negro real
   - Integrado con Topbar / Sidebar / Rightbar
   - Divisiones visibles
   - Animaciones suaves
   - Sin glow
   - Sin blur
   - Sin sombras pesadas
   ========================================================= */


/* =========================================================
   RESET LOCAL
   ========================================================= */

.agenda-semanal-mount,
.agenda-semanal-mount *,
.agenda-semanal-page,
.agenda-semanal-page *,
.agenda-semanal-modal-backdrop,
.agenda-semanal-modal-backdrop *,
.agenda-semanal-toast,
.agenda-semanal-toast * {
  box-sizing:
    border-box;

  font-family:
    "DM Sans",
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
}


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

.agenda-semanal-page {
  --agenda-bg:
    #ffffff;

  --agenda-surface:
    #ffffff;

  --agenda-surface-soft:
    #f7f7f7;

  --agenda-surface-muted:
    #f1f1f1;

  --agenda-surface-hover:
    #f4f4f4;

  --agenda-surface-active:
    #ededed;

  --agenda-text:
    #111111;

  --agenda-text-soft:
    #3f3f3f;

  --agenda-muted:
    #777777;

  --agenda-muted-soft:
    #9b9b9b;

  --agenda-border:
    rgba(
      0,
      0,
      0,
      0.11
    );

  --agenda-border-soft:
    rgba(
      0,
      0,
      0,
      0.07
    );

  --agenda-border-strong:
    rgba(
      0,
      0,
      0,
      0.18
    );

  --agenda-green:
    #15803d;

  --agenda-green-soft:
    rgba(
      21,
      128,
      61,
      0.08
    );

  --agenda-orange:
    #b46505;

  --agenda-orange-soft:
    rgba(
      180,
      101,
      5,
      0.08
    );

  --agenda-red:
    #c83232;

  --agenda-red-soft:
    rgba(
      200,
      50,
      50,
      0.08
    );

  --agenda-blue:
    #2867c7;

  --agenda-blue-soft:
    rgba(
      40,
      103,
      199,
      0.08
    );

  --agenda-radius-sm:
    6px;

  --agenda-radius:
    8px;

  --agenda-radius-lg:
    10px;

  --agenda-radius-xl:
    12px;

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

  --agenda-transition:
    180ms ease;

  --agenda-ease:
    cubic-bezier(
      0.22,
      1,
      0.36,
      1
    );

  position:
    relative;

  width:
    100%;

  min-width:
    0;

  min-height:
    calc(
      100dvh -
      var(
        --topbar-height,
        50px
      ) -
      48px
    );

  display:
    flex;

  flex-direction:
    column;

  gap:
    8px;

  color:
    var(
      --agenda-text
    );

  background:
    transparent;

  animation:
    agendaPageIn
    220ms
    var(
      --agenda-ease
    )
    both;
}


/* =========================================================
   DARK · NEGRO REAL
   ========================================================= */

html[data-theme="dark"]
.agenda-semanal-page {
  --agenda-bg:
    #080808;

  --agenda-surface:
    #0b0b0b;

  --agenda-surface-soft:
    #111111;

  --agenda-surface-muted:
    #171717;

  --agenda-surface-hover:
    #151515;

  --agenda-surface-active:
    #1b1b1b;

  --agenda-text:
    #f5f5f5;

  --agenda-text-soft:
    #d2d2d2;

  --agenda-muted:
    #8a8a8a;

  --agenda-muted-soft:
    #616161;

  --agenda-border:
    rgba(
      255,
      255,
      255,
      0.10
    );

  --agenda-border-soft:
    rgba(
      255,
      255,
      255,
      0.065
    );

  --agenda-border-strong:
    rgba(
      255,
      255,
      255,
      0.17
    );

  --agenda-green:
    #4ade80;

  --agenda-green-soft:
    rgba(
      74,
      222,
      128,
      0.07
    );

  --agenda-orange:
    #f2b35f;

  --agenda-orange-soft:
    rgba(
      242,
      179,
      95,
      0.07
    );

  --agenda-red:
    #ff8585;

  --agenda-red-soft:
    rgba(
      255,
      133,
      133,
      0.07
    );

  --agenda-blue:
    #78aaf3;

  --agenda-blue-soft:
    rgba(
      120,
      170,
      243,
      0.07
    );
}


/* =========================================================
   APP CONTENT
   ========================================================= */

.app-content:has(
  .agenda-semanal-page
) {
  width:
    100%;

  min-width:
    0;

  padding:
    7px;

  overflow-x:
    hidden;

  overflow-y:
    auto;
}


/* =========================================================
   MOUNT
   ========================================================= */

.agenda-semanal-mount {
  width:
    100%;

  min-width:
    0;
}


/* =========================================================
   ICONOS
   ========================================================= */

.agenda-semanal-page
.icon,
.agenda-semanal-page
svg {
  width:
    15px;

  height:
    15px;

  min-width:
    15px;

  min-height:
    15px;

  stroke-width:
    1.85;
}


/* =========================================================
   HEADER PRINCIPAL
   ========================================================= */

.agenda-semanal-head {
  width:
    100%;

  min-width:
    0;

  min-height:
    64px;

  display:
    grid;

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

  align-items:
    center;

  gap:
    14px;

  padding:
    8px
    10px;

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

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

  background:
    var(
      --agenda-surface
    );

  overflow:
    hidden;

  animation:
    agendaSectionIn
    240ms
    var(
      --agenda-ease
    )
    both;
}


/* =========================================================
   BRAND
   ========================================================= */

.agenda-semanal-head__brand {
  min-width:
    0;

  display:
    flex;

  align-items:
    center;

  gap:
    9px;
}


/* =========================================================
   BRAND ICON
   ========================================================= */

.agenda-semanal-brand__icon {
  width:
    34px;

  height:
    34px;

  min-width:
    34px;

  display:
    inline-grid;

  place-items:
    center;

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

  border-radius:
    7px;

  background:
    var(
      --agenda-text
    );

  color:
    var(
      --agenda-surface
    );

  transition:
    transform
      var(
        --agenda-transition
      )
      var(
        --agenda-ease
      );
}

.agenda-semanal-brand__icon:hover {
  transform:
    rotate(
      -3deg
    )
    scale(
      1.03
    );
}

.agenda-semanal-brand__icon
.icon,
.agenda-semanal-brand__icon
svg {
  width:
    16px;

  height:
    16px;
}


/* =========================================================
   HEADER CONTENT
   ========================================================= */

.agenda-semanal-head__content {
  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  gap:
    2px;
}


/* =========================================================
   EYEBROW
   ========================================================= */

.agenda-semanal-eyebrow {
  color:
    var(
      --agenda-muted
    );

  font-size:
    6.8px;

  font-weight:
    800;

  line-height:
    1;

  letter-spacing:
    0.08em;

  text-transform:
    uppercase;
}


/* =========================================================
   TITLE
   ========================================================= */

.agenda-semanal-head__content
h1 {
  margin:
    0;

  color:
    var(
      --agenda-text
    );

  font-size:
    clamp(
      17px,
      1.5vw,
      21px
    );

  font-weight:
    850;

  line-height:
    1;

  letter-spacing:
    -0.035em;
}


/* =========================================================
   DESCRIPTION
   ========================================================= */

.agenda-semanal-head__content
p {
  max-width:
    680px;

  margin:
    2px
    0
    0;

  overflow:
    hidden;

  color:
    var(
      --agenda-muted
    );

  font-size:
    8px;

  font-weight:
    550;

  line-height:
    1.3;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


/* =========================================================
   HEADER ACTIONS
   ========================================================= */

.agenda-semanal-head__actions {
  min-width:
    0;

  display:
    flex;

  align-items:
    center;

  justify-content:
    flex-end;

  gap:
    5px;

  flex-wrap:
    wrap;
}


/* =========================================================
   USER
   ========================================================= */

.agenda-semanal-user {
  min-height:
    34px;

  display:
    flex;

  align-items:
    center;

  gap:
    6px;

  padding:
    3px
    7px;

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

  border-radius:
    7px;

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


/* =========================================================
   USER ICON
   ========================================================= */

.agenda-semanal-user__icon {
  width:
    25px;

  height:
    25px;

  min-width:
    25px;

  display:
    inline-grid;

  place-items:
    center;

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

  border-radius:
    6px;

  background:
    var(
      --agenda-surface
    );

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

.agenda-semanal-user__icon
.icon,
.agenda-semanal-user__icon
svg {
  width:
    12px;

  height:
    12px;
}


/* =========================================================
   USER COPY
   ========================================================= */

.agenda-semanal-user
div {
  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  gap:
    1px;
}

.agenda-semanal-user
small {
  color:
    var(
      --agenda-muted
    );

  font-size:
    6px;

  font-weight:
    800;

  line-height:
    1;
}

.agenda-semanal-user
strong {
  max-width:
    120px;

  overflow:
    hidden;

  color:
    var(
      --agenda-text
    );

  font-size:
    8px;

  font-weight:
    750;

  line-height:
    1;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


/* =========================================================
   EDIT INDICATOR
   ========================================================= */

.agenda-edit-indicator {
  min-height:
    32px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    5px;

  padding:
    0
    8px;

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

  border-radius:
    7px;

  background:
    transparent;

  color:
    var(
      --agenda-muted
    );

  font-size:
    7.5px;

  font-weight:
    750;

  line-height:
    1;

  white-space:
    nowrap;

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

.agenda-edit-indicator.is-editing {
  border-color:
    color-mix(
      in srgb,
      var(--agenda-green) 30%,
      var(--agenda-border)
    );

  background:
    var(
      --agenda-green-soft
    );

  color:
    var(
      --agenda-green
    );
}


/* =========================================================
   LAST UPDATE
   ========================================================= */

.agenda-last-update {
  min-height:
    32px;

  display:
    inline-flex;

  align-items:
    center;

  gap:
    5px;

  padding:
    0
    4px;

  color:
    var(
      --agenda-muted
    );

  font-size:
    7px;

  font-weight:
    650;

  white-space:
    nowrap;
}


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

.agenda-button {
  min-height:
    32px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    5px;

  padding:
    0
    9px;

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

  border-radius:
    7px;

  outline:
    none;

  background:
    var(
      --agenda-surface
    );

  color:
    var(
      --agenda-text
    );

  font-size:
    8px;

  font-weight:
    750;

  line-height:
    1;

  white-space:
    nowrap;

  cursor:
    pointer;

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

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

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

  transform:
    translateY(
      -1px
    );
}

.agenda-button:active:not(
  :disabled
) {
  transform:
    scale(
      0.96
    );
}

.agenda-button:disabled {
  opacity:
    0.38;

  cursor:
    not-allowed;

  transform:
    none;
}

.agenda-button
.icon,
.agenda-button
svg {
  width:
    12px;

  height:
    12px;
}


/* =========================================================
   PRIMARY BUTTON
   ========================================================= */

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

  background:
    var(
      --agenda-text
    );

  color:
    var(
      --agenda-surface
    );
}

.agenda-button--primary:hover:not(
  :disabled
) {
  background:
    color-mix(
      in srgb,
      var(--agenda-text) 88%,
      transparent
    );

  color:
    var(
      --agenda-surface
    );
}


/* =========================================================
   DANGER BUTTON
   ========================================================= */

.agenda-button--danger {
  border-color:
    var(
      --agenda-red
    );

  background:
    var(
      --agenda-red
    );

  color:
    #ffffff;
}


/* =========================================================
   WEEK SUMMARY
   ========================================================= */

.agenda-week-summary {
  width:
    100%;

  min-width:
    0;

  display:
    grid;

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

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

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

  background:
    var(
      --agenda-surface
    );

  overflow:
    hidden;

  animation:
    agendaSectionIn
    260ms
    var(
      --agenda-ease
    )
    25ms
    both;
}


/* =========================================================
   WEEK STAT
   ========================================================= */

.agenda-week-stat {
  position:
    relative;

  min-width:
    0;

  min-height:
    56px;

  display:
    grid;

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

  align-items:
    center;

  gap:
    7px;

  padding:
    7px
    8px;

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

  background:
    transparent;

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

.agenda-week-stat:last-child {
  border-right:
    0;
}

.agenda-week-stat:hover {
  background:
    var(
      --agenda-surface-hover
    );
}


/* =========================================================
   WEEK STAT ICON
   ========================================================= */

.agenda-week-stat__icon {
  width:
    28px;

  height:
    28px;

  min-width:
    28px;

  display:
    inline-grid;

  place-items:
    center;

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

  border-radius:
    6px;

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

  color:
    var(
      --agenda-text-soft
    );
}

.agenda-week-stat__icon
.icon,
.agenda-week-stat__icon
svg {
  width:
    13px;

  height:
    13px;
}


/* =========================================================
   WEEK STAT COPY
   ========================================================= */

.agenda-week-stat
> div {
  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  gap:
    2px;
}

.agenda-week-stat
small {
  color:
    var(
      --agenda-muted
    );

  font-size:
    6px;

  font-weight:
    800;

  letter-spacing:
    0.06em;

  line-height:
    1;
}

.agenda-week-stat
strong {
  overflow:
    hidden;

  color:
    var(
      --agenda-text
    );

  font-size:
    14px;

  font-weight:
    850;

  line-height:
    1;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}

.agenda-week-stat
> div
> span {
  overflow:
    hidden;

  color:
    var(
      --agenda-muted
    );

  font-size:
    6.8px;

  font-weight:
    550;

  line-height:
    1.1;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


/* =========================================================
   KPI STATES
   ========================================================= */

.agenda-week-stat.is-completed
.agenda-week-stat__icon,
.agenda-week-stat.is-completed
strong {
  color:
    var(
      --agenda-green
    );
}

.agenda-week-stat.is-pending
.agenda-week-stat__icon,
.agenda-week-stat.is-pending
strong {
  color:
    var(
      --agenda-orange
    );
}

.agenda-week-stat.is-progress
.agenda-week-stat__icon,
.agenda-week-stat.is-progress
strong {
  color:
    var(
      --agenda-blue
    );
}


/* =========================================================
   BACKUP KPI
   ========================================================= */

.agenda-week-stat.is-backup
strong {
  font-size:
    9px;
}


/* =========================================================
   KPI PROGRESS
   ========================================================= */

.agenda-week-stat__progress {
  position:
    absolute;

  right:
    8px;

  bottom:
    5px;

  left:
    43px;

  height:
    2px;

  border-radius:
    999px;

  background:
    var(
      --agenda-surface-muted
    );

  overflow:
    hidden;
}

.agenda-week-stat__progress
> span {
  display:
    block;

  height:
    100%;

  border-radius:
    inherit;

  background:
    var(
      --agenda-blue
    );

  transition:
    width
      280ms
      var(
        --agenda-ease
      );
}


/* =========================================================
   WEEK NAV
   ========================================================= */

.agenda-week-nav {
  width:
    100%;

  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

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

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

  background:
    var(
      --agenda-surface
    );

  overflow:
    hidden;

  animation:
    agendaSectionIn
    280ms
    var(
      --agenda-ease
    )
    50ms
    both;
}


/* =========================================================
   WEEK NAV HEADER
   ========================================================= */

.agenda-week-nav__head {
  min-height:
    38px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    10px;

  padding:
    6px
    8px;

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

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

.agenda-week-nav__head
> div {
  display:
    flex;

  align-items:
    baseline;

  gap:
    7px;
}

.agenda-week-nav__head
> div
> span {
  color:
    var(
      --agenda-muted
    );

  font-size:
    6px;

  font-weight:
    800;

  letter-spacing:
    0.07em;
}

.agenda-week-nav__head
> div
> strong {
  color:
    var(
      --agenda-text
    );

  font-size:
    8px;

  font-weight:
    750;
}


/* =========================================================
   WEEK NAV META
   ========================================================= */

.agenda-week-nav__meta {
  display:
    inline-flex;

  align-items:
    center;

  gap:
    4px;

  color:
    var(
      --agenda-muted
    );

  font-size:
    7px;

  font-weight:
    650;
}


/* =========================================================
   TABS
   ========================================================= */

.agenda-semanal-tabs {
  width:
    100%;

  min-width:
    0;

  display:
    grid;

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


/* =========================================================
   TAB
   ========================================================= */

.agenda-tab {
  position:
    relative;

  min-width:
    0;

  min-height:
    48px;

  display:
    grid;

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

  align-items:
    center;

  gap:
    6px;

  padding:
    6px
    7px;

  border:
    0;

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

  outline:
    none;

  background:
    transparent;

  color:
    var(
      --agenda-text
    );

  text-align:
    left;

  cursor:
    pointer;

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

.agenda-tab:last-child {
  border-right:
    0;
}

.agenda-tab:hover {
  background:
    var(
      --agenda-surface-hover
    );
}

.agenda-tab.is-active {
  background:
    var(
      --agenda-surface-active
    );
}


/* =========================================================
   ACTIVE INDICATOR
   ========================================================= */

.agenda-tab.is-active::after {
  content:
    "";

  position:
    absolute;

  right:
    7px;

  bottom:
    0;

  left:
    7px;

  height:
    2px;

  border-radius:
    999px
    999px
    0
    0;

  background:
    var(
      --agenda-text
    );
}


/* =========================================================
   TAB ICON
   ========================================================= */

.agenda-tab__icon {
  width:
    25px;

  height:
    25px;

  min-width:
    25px;

  display:
    inline-grid;

  place-items:
    center;

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

  border-radius:
    6px;

  background:
    var(
      --agenda-surface
    );

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

.agenda-tab.is-active
.agenda-tab__icon {
  border-color:
    var(
      --agenda-border-strong
    );

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

.agenda-tab.is-completed
.agenda-tab__icon {
  color:
    var(
      --agenda-green
    );
}

.agenda-tab__icon
.icon,
.agenda-tab__icon
svg {
  width:
    12px;

  height:
    12px;
}


/* =========================================================
   TAB CONTENT
   ========================================================= */

.agenda-tab__content {
  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  gap:
    3px;
}


/* =========================================================
   TAB TITLE
   ========================================================= */

.agenda-tab__title-row {
  min-width:
    0;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    5px;
}

.agenda-tab__title-row
strong {
  min-width:
    0;

  overflow:
    hidden;

  color:
    var(
      --agenda-text
    );

  font-size:
    8px;

  font-weight:
    800;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}

.agenda-tab__title-row
small {
  color:
    var(
      --agenda-muted
    );

  font-size:
    6px;

  font-weight:
    750;
}

.agenda-tab__short {
  display:
    none;
}


/* =========================================================
   TAB META
   ========================================================= */

.agenda-tab__meta {
  min-width:
    0;

  overflow:
    hidden;

  color:
    var(
      --agenda-muted
    );

  font-size:
    6.3px;

  font-weight:
    550;

  line-height:
    1;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


/* =========================================================
   TAB PROGRESS
   ========================================================= */

.agenda-tab__progress {
  width:
    100%;

  height:
    2px;

  border-radius:
    999px;

  background:
    var(
      --agenda-surface-muted
    );

  overflow:
    hidden;
}

.agenda-tab__progress
span {
  display:
    block;

  height:
    100%;

  border-radius:
    inherit;

  background:
    var(
      --agenda-text
    );

  transition:
    width
      240ms
      var(
        --agenda-ease
      );
}

.agenda-tab.is-completed
.agenda-tab__progress
span {
  background:
    var(
      --agenda-green
    );
}


/* =========================================================
   WORKSPACE
   ========================================================= */

.agenda-semanal-workspace {
  flex:
    1 1 auto;

  width:
    100%;

  min-width:
    0;

  min-height:
    430px;

  display:
    grid;

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

  align-items:
    stretch;

  gap:
    8px;

  animation:
    agendaSectionIn
    300ms
    var(
      --agenda-ease
    )
    75ms
    both;
}


/* =========================================================
   MAIN
   ========================================================= */

.agenda-semanal-main {
  width:
    100%;

  min-width:
    0;

  min-height:
    0;

  display:
    flex;
}


/* =========================================================
   SHEET
   ========================================================= */

.agenda-semanal-sheet {
  flex:
    1 1 auto;

  width:
    100%;

  min-width:
    0;

  min-height:
    430px;

  display:
    grid;

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

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

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

  background:
    var(
      --agenda-surface
    );

  overflow:
    hidden;
}


/* =========================================================
   SHEET HEADER
   ========================================================= */

.agenda-sheet-header {
  min-width:
    0;

  min-height:
    52px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    10px;

  padding:
    7px
    9px;

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

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


/* =========================================================
   SHEET HEADER MAIN
   ========================================================= */

.agenda-sheet-header__main {
  flex:
    1 1 auto;

  min-width:
    0;

  display:
    flex;

  align-items:
    center;

  gap:
    8px;
}


/* =========================================================
   DAY BADGE
   ========================================================= */

.agenda-sheet-header__day {
  min-height:
    30px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    5px;

  flex:
    0 0 auto;

  padding:
    0
    8px;

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

  border-radius:
    6px;

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

  color:
    var(
      --agenda-text
    );

  font-size:
    7.5px;

  font-weight:
    800;
}


/* =========================================================
   SHEET TITLE
   ========================================================= */

.agenda-sheet-header__title {
  flex:
    1 1 auto;

  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  gap:
    2px;
}

.agenda-sheet-header__title
label {
  color:
    var(
      --agenda-muted
    );

  font-size:
    5.8px;

  font-weight:
    800;

  letter-spacing:
    0.07em;
}

.agenda-sheet-header__title
input {
  width:
    100%;

  min-width:
    0;

  height:
    24px;

  padding:
    0;

  border:
    0;

  border-bottom:
    1px solid
    transparent;

  outline:
    none;

  background:
    transparent;

  color:
    var(
      --agenda-text
    );

  font-size:
    13px;

  font-weight:
    850;

  letter-spacing:
    -0.02em;
}

.agenda-sheet-header__title
input:not(
  [readonly]
) {
  border-bottom-color:
    var(
      --agenda-border-strong
    );
}


/* =========================================================
   SHEET HEADER SIDE
   ========================================================= */

.agenda-sheet-header__side {
  flex:
    0 0 auto;

  display:
    flex;

  align-items:
    center;

  justify-content:
    flex-end;

  gap:
    5px;
}


/* =========================================================
   SHEET META
   ========================================================= */

.agenda-sheet-header__meta {
  display:
    inline-flex;

  align-items:
    center;

  gap:
    4px;

  color:
    var(
      --agenda-muted
    );

  font-size:
    6.7px;

  font-weight:
    600;

  white-space:
    nowrap;
}


/* =========================================================
   CONTENT
   ========================================================= */

.agenda-semanal-content {
  width:
    100%;

  min-width:
    0;

  min-height:
    0;

  display:
    flex;

  flex-direction:
    column;

  align-items:
    stretch;

  gap:
    5px;

  padding:
    8px;

  background:
    var(
      --agenda-surface
    );

  overflow-x:
    hidden;

  overflow-y:
    auto;

  scrollbar-width:
    thin;

  scrollbar-color:
    var(
      --agenda-border-strong
    )
    transparent;
}


/* =========================================================
   BLOCK BASE
   ========================================================= */

.agenda-block {
  position:
    relative;

  flex:
    0 0 auto;

  width:
    100%;

  min-width:
    0;

  border:
    1px solid
    transparent;

  border-radius:
    7px;

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

  animation:
    agendaBlockIn
    200ms
    var(
      --agenda-ease
    )
    both;
}


/* =========================================================
   TEXT
   ========================================================= */

.agenda-block--text {
  padding:
    6px
    7px;
}

.agenda-block--text
p {
  margin:
    0;

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

  font-size:
    9px;

  font-weight:
    550;

  line-height:
    1.5;
}


/* =========================================================
   TITLE
   ========================================================= */

.agenda-block--title {
  padding:
    8px
    7px
    4px;
}

.agenda-block--title
h2 {
  margin:
    0;

  color:
    var(
      --agenda-text
    );

  font-size:
    15px;

  font-weight:
    850;

  line-height:
    1.1;

  letter-spacing:
    -0.03em;
}


/* =========================================================
   SUBTITLE
   ========================================================= */

.agenda-block--subtitle {
  padding:
    6px
    7px
    3px;
}

.agenda-block--subtitle
h3 {
  margin:
    0;

  color:
    var(
      --agenda-text
    );

  font-size:
    11px;

  font-weight:
    800;

  line-height:
    1.2;
}


/* =========================================================
   CHECKBOX BLOCK
   ========================================================= */

.agenda-block--checkbox {
  min-height:
    38px;

  display:
    grid;

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

  align-items:
    center;

  gap:
    6px;

  padding:
    6px
    7px;

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

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

.agenda-block--checkbox:hover {
  border-color:
    var(
      --agenda-border
    );

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

  transform:
    translateY(
      -1px
    );
}


/* =========================================================
   CHECKBOX LABEL
   ========================================================= */

.agenda-block--checkbox
> label {
  min-width:
    0;

  display:
    flex;

  align-items:
    center;

  gap:
    7px;

  cursor:
    pointer;
}


/* =========================================================
   CHECKBOX INPUT HIDDEN
   ========================================================= */

.agenda-block--checkbox
> label
input[type="checkbox"],
.agenda-edit-checkbox
input[type="checkbox"] {
  position:
    absolute;

  width:
    1px;

  height:
    1px;

  opacity:
    0;

  pointer-events:
    none;
}


/* =========================================================
   CHECKBOX VISUAL
   ========================================================= */

.agenda-block--checkbox
> label
b,
.agenda-edit-checkbox
b {
  position:
    relative;

  width:
    16px;

  height:
    16px;

  min-width:
    16px;

  display:
    inline-grid;

  place-items:
    center;

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

  border-radius:
    5px;

  background:
    var(
      --agenda-surface
    );

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


/* =========================================================
   CHECKBOX CHECKED
   ========================================================= */

.agenda-block--checkbox
> label
input:checked
+ b,
.agenda-edit-checkbox
input:checked
+ b {
  border-color:
    var(
      --agenda-text
    );

  background:
    var(
      --agenda-text
    );

  transform:
    scale(
      1.02
    );
}

.agenda-block--checkbox
> label
input:checked
+ b::after,
.agenda-edit-checkbox
input:checked
+ b::after {
  content:
    "";

  width:
    6px;

  height:
    3px;

  margin-top:
    -1px;

  border-left:
    2px solid
    var(
      --agenda-surface
    );

  border-bottom:
    2px solid
    var(
      --agenda-surface
    );

  transform:
    rotate(
      -45deg
    );
}


/* =========================================================
   CHECKBOX TEXT
   ========================================================= */

.agenda-block--checkbox
> label
span {
  min-width:
    0;

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

  font-size:
    8.7px;

  font-weight:
    650;

  line-height:
    1.3;
}


/* =========================================================
   COMPLETED
   ========================================================= */

.agenda-block--checkbox.is-completed {
  opacity:
    0.62;
}


/* =========================================================
   REMINDER
   ========================================================= */

.agenda-block__reminder-at {
  display:
    inline-flex;

  align-items:
    center;

  gap:
    4px;

  color:
    var(
      --agenda-blue
    );

  font-size:
    6.5px;

  font-weight:
    750;

  white-space:
    nowrap;
}


/* =========================================================
   COMPLETED AT
   ========================================================= */

.agenda-block__completed-at {
  display:
    inline-flex;

  align-items:
    center;

  gap:
    4px;

  color:
    var(
      --agenda-green
    );

  font-size:
    6.4px;

  font-weight:
    700;

  white-space:
    nowrap;
}


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

.agenda-block--horario {
  min-height:
    34px;

  display:
    grid;

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

  align-items:
    center;

  gap:
    7px;

  padding:
    5px
    7px;

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


/* =========================================================
   TIME
   ========================================================= */

.agenda-block__time {
  display:
    inline-flex;

  align-items:
    center;

  gap:
    4px;

  color:
    var(
      --agenda-muted
    );

  font-size:
    7px;

  font-weight:
    750;
}

.agenda-block__time
time {
  color:
    var(
      --agenda-text
    );

  font-size:
    8px;

  font-weight:
    800;
}


/* =========================================================
   SCHEDULE COPY
   ========================================================= */

.agenda-block--horario
> strong {
  color:
    var(
      --agenda-text-soft
    );

  font-size:
    8.7px;

  font-weight:
    650;

  line-height:
    1.3;
}


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

.agenda-block--list {
  display:
    flex;

  flex-direction:
    column;

  gap:
    5px;

  padding:
    6px
    7px;
}

.agenda-block--list
p {
  margin:
    0;

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

  font-size:
    8.5px;

  font-weight:
    700;
}

.agenda-block--list
ul {
  display:
    flex;

  flex-direction:
    column;

  gap:
    3px;

  margin:
    0;

  padding:
    0
    0
    0
    15px;
}

.agenda-block--list
li {
  color:
    var(
      --agenda-muted
    );

  font-size:
    8.5px;

  line-height:
    1.35;
}


/* =========================================================
   SEPARATOR
   ========================================================= */

.agenda-block--separator {
  min-height:
    15px;

  display:
    flex;

  align-items:
    center;

  padding:
    0
    5px;
}

.agenda-block--separator
> span {
  width:
    100%;

  height:
    1px;

  background:
    var(
      --agenda-border
    );
}


/* =========================================================
   EDITABLE BLOCK
   ========================================================= */

.agenda-block--editable {
  border-color:
    var(
      --agenda-border
    );

  background:
    var(
      --agenda-surface
    );

  cursor:
    text;
}

.agenda-block--editable:hover {
  border-color:
    var(
      --agenda-border-strong
    );
}

.agenda-block--editable.is-selected {
  border-color:
    var(
      --agenda-text
    );

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


/* =========================================================
   BLOCK TYPE
   ========================================================= */

.agenda-block__type {
  position:
    absolute;

  top:
    5px;

  right:
    6px;

  color:
    var(
      --agenda-muted-soft
    );

  font-size:
    5.5px;

  font-weight:
    800;

  letter-spacing:
    0.06em;

  text-transform:
    uppercase;

  pointer-events:
    none;
}


/* =========================================================
   EDITABLE INPUTS
   ========================================================= */

.agenda-block--editable
textarea,
.agenda-block--editable
input[type="text"],
.agenda-block--editable
input[type="time"] {
  width:
    100%;

  min-width:
    0;

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

  border-radius:
    6px;

  outline:
    none;

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

  color:
    var(
      --agenda-text
    );

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

.agenda-block--editable
textarea:focus,
.agenda-block--editable
input[type="text"]:focus,
.agenda-block--editable
input[type="time"]:focus {
  border-color:
    var(
      --agenda-border-strong
    );

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


/* =========================================================
   TEXTAREA
   ========================================================= */

.agenda-block--editable
textarea {
  min-height:
    34px;

  padding:
    7px
    8px;

  resize:
    none;

  overflow:
    hidden;

  font-size:
    8.5px;

  font-weight:
    600;

  line-height:
    1.4;
}


/* =========================================================
   TIME INPUT
   ========================================================= */

.agenda-block--editable
input[type="time"] {
  height:
    34px;

  padding:
    0
    7px;

  font-size:
    8px;

  font-weight:
    750;
}


/* =========================================================
   EDIT CHECKBOX BLOCK
   ========================================================= */

.agenda-block--checkbox.agenda-block--editable {
  grid-template-columns:
    22px
    minmax(
      0,
      1fr
    );

  align-items:
    start;

  min-height:
    62px;

  padding:
    7px;
}


/* =========================================================
   EDIT CHECKBOX
   ========================================================= */

.agenda-edit-checkbox {
  position:
    relative;

  min-height:
    34px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  cursor:
    pointer;
}


/* =========================================================
   TASK EDIT
   ========================================================= */

.agenda-task-edit {
  min-width:
    0;

  display:
    grid;

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

  align-items:
    start;

  gap:
    6px;

  padding-right:
    30px;
}


/* =========================================================
   TASK TIME
   ========================================================= */

.agenda-task-edit__time {
  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  gap:
    3px;
}

.agenda-task-edit__time
> span {
  display:
    inline-flex;

  align-items:
    center;

  gap:
    3px;

  color:
    var(
      --agenda-muted
    );

  font-size:
    5.5px;

  font-weight:
    800;

  text-transform:
    uppercase;
}


/* =========================================================
   EDIT SCHEDULE
   ========================================================= */

.agenda-block--horario.agenda-block--editable {
  grid-template-columns:
    100px
    minmax(
      0,
      1fr
    );

  padding-right:
    40px;
}


/* =========================================================
   EDIT LIST
   ========================================================= */

.agenda-block--list.agenda-block--editable {
  padding-right:
    40px;
}


/* =========================================================
   EDIT TEXT
   ========================================================= */

.agenda-block--text.agenda-block--editable,
.agenda-block--title.agenda-block--editable,
.agenda-block--subtitle.agenda-block--editable {
  padding:
    6px
    40px
    6px
    6px;
}


/* =========================================================
   EDIT SEPARATOR
   ========================================================= */

.agenda-block--separator.agenda-block--editable {
  min-height:
    30px;

  padding:
    0
    40px
    0
    6px;
}


/* =========================================================
   SHEET FOOTER
   ========================================================= */

.agenda-semanal-footer {
  min-height:
    40px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    8px;

  padding:
    6px
    8px;

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

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


/* =========================================================
   FOOTER METRICS
   ========================================================= */

.agenda-semanal-footer__metrics {
  min-width:
    0;

  display:
    flex;

  align-items:
    center;

  gap:
    10px;

  flex-wrap:
    wrap;
}

.agenda-semanal-footer__metrics
> span {
  display:
    inline-flex;

  align-items:
    center;

  gap:
    4px;

  color:
    var(
      --agenda-muted
    );

  font-size:
    6.8px;

  font-weight:
    600;
}

.agenda-semanal-footer__metrics
strong {
  color:
    var(
      --agenda-text
    );

  font-weight:
    800;
}


/* =========================================================
   FOOTER ACTIONS
   ========================================================= */

.agenda-semanal-footer__actions {
  display:
    flex;

  align-items:
    center;

  justify-content:
    flex-end;

  gap:
    5px;
}


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

.agenda-save-status {
  min-height:
    24px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  padding:
    0
    6px;

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

  border-radius:
    6px;

  background:
    var(
      --agenda-surface
    );

  color:
    var(
      --agenda-muted
    );

  font-size:
    6.5px;

  font-weight:
    700;
}

.agenda-save-status.is-dirty {
  border-color:
    color-mix(
      in srgb,
      var(--agenda-orange) 30%,
      var(--agenda-border)
    );

  background:
    var(
      --agenda-orange-soft
    );

  color:
    var(
      --agenda-orange
    );
}

.agenda-save-status.is-saving {
  background:
    var(
      --agenda-blue-soft
    );

  color:
    var(
      --agenda-blue
    );
}

.agenda-save-status.is-saved {
  background:
    var(
      --agenda-green-soft
    );

  color:
    var(
      --agenda-green
    );
}


/* =========================================================
   CONTINÚA EN PARTE 2

   SIGUIENTE:
   - Inspector moderno
   - Editor
   - Estados vacíos
   - Modal
   - Toast
   - Loading
   - Animaciones
   - Dark final
   - Responsive
   - Mobile
   ========================================================= *//* =========================================================
   WIRTZ HUB · MI GESTIÓN
   AGENDA SEMANAL V5

   PARTE 2 DE 2
   ========================================================= */


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

.agenda-empty-state {
  width:
    100%;

  min-height:
    280px;

  display:
    grid;

  place-items:
    center;

  align-content:
    center;

  gap:
    6px;

  padding:
    24px;

  text-align:
    center;
}

.agenda-empty-state__icon {
  width:
    38px;

  height:
    38px;

  display:
    inline-grid;

  place-items:
    center;

  margin-bottom:
    2px;

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

  border-radius:
    8px;

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

  color:
    var(
      --agenda-text
    );

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

.agenda-empty-state:hover
.agenda-empty-state__icon {
  border-color:
    var(
      --agenda-border-strong
    );

  transform:
    translateY(
      -2px
    );
}

.agenda-empty-state__icon
.icon,
.agenda-empty-state__icon
svg {
  width:
    17px;

  height:
    17px;
}

.agenda-empty-state__eyebrow {
  color:
    var(
      --agenda-muted
    );

  font-size:
    6px;

  font-weight:
    800;

  letter-spacing:
    0.08em;

  text-transform:
    uppercase;
}

.agenda-empty-state
> strong {
  color:
    var(
      --agenda-text
    );

  font-size:
    13px;

  font-weight:
    850;

  line-height:
    1.1;

  letter-spacing:
    -0.02em;
}

.agenda-empty-state
> p {
  max-width:
    430px;

  margin:
    0;

  color:
    var(
      --agenda-muted
    );

  font-size:
    8px;

  font-weight:
    550;

  line-height:
    1.4;
}

.agenda-empty-state--error
.agenda-empty-state__icon {
  border-color:
    color-mix(
      in srgb,
      var(--agenda-red) 28%,
      var(--agenda-border)
    );

  background:
    var(
      --agenda-red-soft
    );

  color:
    var(
      --agenda-red
    );
}


/* =========================================================
   INSPECTOR
   ========================================================= */

.agenda-inspector {
  width:
    100%;

  min-width:
    0;

  min-height:
    0;

  display:
    grid;

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

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

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

  background:
    var(
      --agenda-surface
    );

  overflow:
    hidden;
}


/* =========================================================
   INSPECTOR HEADER
   ========================================================= */

.agenda-inspector__head {
  min-height:
    48px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    8px;

  padding:
    6px
    7px;

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

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


/* =========================================================
   INSPECTOR TITLE
   ========================================================= */

.agenda-inspector__title {
  min-width:
    0;

  display:
    flex;

  align-items:
    center;

  gap:
    7px;
}

.agenda-inspector__icon {
  width:
    27px;

  height:
    27px;

  min-width:
    27px;

  display:
    inline-grid;

  place-items:
    center;

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

  border-radius:
    6px;

  background:
    var(
      --agenda-surface
    );

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

.agenda-inspector__icon
.icon,
.agenda-inspector__icon
svg {
  width:
    12px;

  height:
    12px;
}

.agenda-inspector__title
> div {
  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  gap:
    2px;
}

.agenda-inspector__title
span {
  color:
    var(
      --agenda-muted
    );

  font-size:
    5.7px;

  font-weight:
    800;

  letter-spacing:
    0.07em;
}

.agenda-inspector__title
strong {
  min-width:
    0;

  overflow:
    hidden;

  color:
    var(
      --agenda-text
    );

  font-size:
    8.5px;

  font-weight:
    800;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


/* =========================================================
   INSPECTOR CLOSE
   ========================================================= */

.agenda-inspector__close {
  width:
    28px;

  height:
    28px;

  min-width:
    28px;

  display:
    none;

  place-items:
    center;

  padding:
    0;

  border:
    1px solid
    transparent;

  border-radius:
    6px;

  background:
    transparent;

  color:
    var(
      --agenda-muted
    );

  cursor:
    pointer;

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

.agenda-inspector__close:hover {
  border-color:
    var(
      --agenda-border
    );

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

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

.agenda-inspector__close:active {
  transform:
    scale(
      0.92
    );
}


/* =========================================================
   INSPECTOR BODY
   ========================================================= */

.agenda-inspector__body {
  min-height:
    0;

  display:
    flex;

  flex-direction:
    column;

  overflow-x:
    hidden;

  overflow-y:
    auto;

  scrollbar-width:
    thin;

  scrollbar-color:
    var(
      --agenda-border-strong
    )
    transparent;
}


/* =========================================================
   INSPECTOR SECTION
   ========================================================= */

.agenda-inspector-section {
  display:
    flex;

  flex-direction:
    column;

  gap:
    7px;

  padding:
    8px;

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

.agenda-inspector-section:last-child {
  border-bottom:
    0;
}


/* =========================================================
   INSPECTOR SECTION HEADER
   ========================================================= */

.agenda-inspector-section__head {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    7px;
}

.agenda-inspector-section__head
> div {
  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  gap:
    2px;
}

.agenda-inspector-section__head
span {
  color:
    var(
      --agenda-muted
    );

  font-size:
    5.6px;

  font-weight:
    800;

  letter-spacing:
    0.07em;
}

.agenda-inspector-section__head
strong {
  color:
    var(
      --agenda-text
    );

  font-size:
    8px;

  font-weight:
    800;
}

.agenda-inspector-section__head
.icon,
.agenda-inspector-section__head
svg {
  width:
    12px;

  height:
    12px;

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


/* =========================================================
   INSPECTOR METRICS
   ========================================================= */

.agenda-inspector-metrics {
  display:
    grid;

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

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

  border-radius:
    7px;

  overflow:
    hidden;
}

.agenda-inspector-metrics
article {
  min-height:
    46px;

  display:
    flex;

  flex-direction:
    column;

  justify-content:
    center;

  gap:
    3px;

  padding:
    6px
    7px;

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

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

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

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

.agenda-inspector-metrics
article:hover {
  background:
    var(
      --agenda-surface-hover
    );
}

.agenda-inspector-metrics
article:nth-child(
  2n
) {
  border-right:
    0;
}

.agenda-inspector-metrics
article:nth-last-child(
  -n + 2
) {
  border-bottom:
    0;
}

.agenda-inspector-metrics
span {
  color:
    var(
      --agenda-muted
    );

  font-size:
    5.8px;

  font-weight:
    700;
}

.agenda-inspector-metrics
strong {
  color:
    var(
      --agenda-text
    );

  font-size:
    13px;

  font-weight:
    850;
}


/* =========================================================
   INSPECTOR PROGRESS
   ========================================================= */

.agenda-inspector-progress {
  width:
    100%;

  display:
    block;
}

.agenda-inspector-progress
> span {
  display:
    block;

  width:
    100%;

  height:
    2px;

  border-radius:
    999px;

  background:
    var(
      --agenda-surface-muted
    );

  overflow:
    hidden;
}

.agenda-inspector-progress
> span
> span {
  display:
    block;

  width:
    0;

  height:
    100%;

  border-radius:
    inherit;

  background:
    var(
      --agenda-text
    );

  transition:
    width
      250ms
      var(
        --agenda-ease
      );
}


/* =========================================================
   INSPECTOR BODY LOCAL
   ========================================================= */

.agenda-inspector-section__body {
  display:
    flex;

  flex-direction:
    column;

  gap:
    6px;
}


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

.agenda-inspector-field {
  display:
    flex;

  flex-direction:
    column;

  gap:
    4px;
}

.agenda-inspector-field
> span {
  color:
    var(
      --agenda-muted
    );

  font-size:
    6px;

  font-weight:
    750;
}

.agenda-inspector-field
input {
  width:
    100%;

  min-width:
    0;

  height:
    32px;

  padding:
    0
    8px;

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

  border-radius:
    7px;

  outline:
    none;

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

  color:
    var(
      --agenda-text
    );

  font-size:
    8px;

  font-weight:
    650;

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

.agenda-inspector-field
input:not(
  [readonly]
) {
  background:
    var(
      --agenda-surface
    );
}

.agenda-inspector-field
input:not(
  [readonly]
):focus {
  border-color:
    var(
      --agenda-border-strong
    );
}


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

.agenda-backup-status {
  align-self:
    flex-start;

  min-height:
    20px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  padding:
    0
    6px;

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

  border-radius:
    5px;

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

  color:
    var(
      --agenda-muted
    );

  font-size:
    5.8px;

  font-weight:
    750;
}

.agenda-backup-status.is-editing {
  background:
    var(
      --agenda-blue-soft
    );

  color:
    var(
      --agenda-blue
    );
}

.agenda-backup-status.is-assigned {
  background:
    var(
      --agenda-green-soft
    );

  color:
    var(
      --agenda-green
    );
}


/* =========================================================
   INSPECTOR TECH LIST
   ========================================================= */

.agenda-inspector-list {
  display:
    flex;

  flex-direction:
    column;

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

  border-radius:
    7px;

  overflow:
    hidden;
}

.agenda-inspector-list
article {
  min-height:
    30px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    7px;

  padding:
    5px
    6px;

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

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

.agenda-inspector-list
article:hover {
  background:
    var(
      --agenda-surface-hover
    );
}

.agenda-inspector-list
article:last-child {
  border-bottom:
    0;
}

.agenda-inspector-list
span {
  color:
    var(
      --agenda-muted
    );

  font-size:
    6px;

  font-weight:
    650;
}

.agenda-inspector-list
strong {
  max-width:
    145px;

  overflow:
    hidden;

  color:
    var(
      --agenda-text
    );

  font-size:
    6.5px;

  font-weight:
    750;

  text-align:
    right;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


/* =========================================================
   EDITOR GRID
   ========================================================= */

.agenda-editor-grid {
  display:
    grid;

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

  gap:
    4px;
}

.agenda-editor-grid
button {
  min-height:
    30px;

  min-width:
    0;

  display:
    flex;

  align-items:
    center;

  justify-content:
    flex-start;

  gap:
    5px;

  padding:
    0
    6px;

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

  border-radius:
    6px;

  outline:
    none;

  background:
    var(
      --agenda-surface
    );

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

  font-size:
    6.5px;

  font-weight:
    700;

  cursor:
    pointer;

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

.agenda-editor-grid
button:hover {
  border-color:
    var(
      --agenda-border-strong
    );

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

  transform:
    translateY(
      -1px
    );
}


/* =========================================================
   FORMAT ACTIONS
   ========================================================= */

.agenda-format-actions {
  display:
    grid;

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

  gap:
    4px;
}

.agenda-format-actions
button {
  min-height:
    39px;

  display:
    inline-flex;

  flex-direction:
    column;

  align-items:
    center;

  justify-content:
    center;

  gap:
    3px;

  padding:
    4px;

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

  border-radius:
    6px;

  background:
    var(
      --agenda-surface
    );

  color:
    var(
      --agenda-muted
    );

  font-size:
    5.5px;

  font-weight:
    700;

  cursor:
    pointer;

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

.agenda-format-actions
button:hover:not(
  :disabled
) {
  border-color:
    var(
      --agenda-border-strong
    );

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

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

.agenda-format-actions
button.is-active {
  border-color:
    var(
      --agenda-text
    );

  background:
    var(
      --agenda-surface-active
    );

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

.agenda-format-actions
button:disabled {
  opacity:
    0.35;

  cursor:
    not-allowed;
}


/* =========================================================
   BLOCK ACTIONS
   ========================================================= */

.agenda-block-actions {
  display:
    grid;

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

  gap:
    4px;
}

.agenda-block-actions
button {
  min-height:
    28px;

  min-width:
    0;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    4px;

  padding:
    0
    4px;

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

  border-radius:
    6px;

  background:
    var(
      --agenda-surface
    );

  color:
    var(
      --agenda-text
    );

  font-size:
    5.8px;

  font-weight:
    700;

  cursor:
    pointer;

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

.agenda-block-actions
button:hover:not(
  :disabled
) {
  border-color:
    var(
      --agenda-border-strong
    );

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

.agenda-block-actions
button.is-danger {
  color:
    var(
      --agenda-red
    );
}

.agenda-block-actions
button:disabled {
  opacity:
    0.35;

  cursor:
    not-allowed;
}


/* =========================================================
   INSPECTOR FOOTER
   ========================================================= */

.agenda-inspector__footer {
  min-height:
    36px;

  display:
    flex;

  align-items:
    center;

  padding:
    6px
    7px;

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

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


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

.agenda-semanal-loading {
  position:
    absolute;

  inset:
    0;

  z-index:
    30;

  display:
    grid;

  place-items:
    center;

  padding:
    18px;

  background:
    rgba(
      255,
      255,
      255,
      0.86
    );
}

html[data-theme="dark"]
.agenda-semanal-loading {
  background:
    rgba(
      8,
      8,
      8,
      0.88
    );
}

.agenda-semanal-loading[hidden] {
  display:
    none;
}

.agenda-semanal-loading__box {
  min-width:
    210px;

  display:
    flex;

  align-items:
    center;

  gap:
    8px;

  padding:
    9px
    10px;

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

  border-radius:
    8px;

  background:
    var(
      --agenda-surface
    );

  animation:
    agendaLoadingIn
    180ms
    var(
      --agenda-ease
    )
    both;
}

.agenda-semanal-loading__box
> .icon,
.agenda-semanal-loading__box
> svg {
  width:
    16px;

  height:
    16px;
}

.agenda-semanal-loading__box
> div {
  display:
    flex;

  flex-direction:
    column;

  gap:
    2px;
}

.agenda-semanal-loading__box
strong {
  color:
    var(
      --agenda-text
    );

  font-size:
    8px;

  font-weight:
    800;
}

.agenda-semanal-loading__box
span {
  color:
    var(
      --agenda-muted
    );

  font-size:
    6.5px;

  font-weight:
    600;
}


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

.agenda-semanal-modal-backdrop {
  position:
    fixed;

  inset:
    0;

  z-index:
    9999;

  display:
    grid;

  place-items:
    center;

  padding:
    14px;

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

  animation:
    agendaModalBackdropIn
    150ms
    ease
    both;
}


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

.agenda-semanal-modal {
  width:
    min(
      100%,
      440px
    );

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

  display:
    grid;

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

  border:
    1px solid
    #d8d8d8;

  border-radius:
    10px;

  background:
    #ffffff;

  color:
    #111111;

  overflow:
    hidden;

  animation:
    agendaModalIn
    190ms
    var(
      --agenda-ease
    )
    both;
}

html[data-theme="dark"]
.agenda-semanal-modal {
  border-color:
    rgba(
      255,
      255,
      255,
      0.13
    );

  background:
    #0b0b0b;

  color:
    #f5f5f5;
}


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

.agenda-semanal-modal__header {
  min-height:
    54px;

  display:
    flex;

  align-items:
    flex-start;

  justify-content:
    space-between;

  gap:
    10px;

  padding:
    9px
    10px;

  border-bottom:
    1px solid
    #e2e2e2;

  background:
    #ffffff;
}

html[data-theme="dark"]
.agenda-semanal-modal__header {
  border-color:
    rgba(
      255,
      255,
      255,
      0.09
    );

  background:
    #0b0b0b;
}


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

.agenda-semanal-modal__title {
  min-width:
    0;

  display:
    flex;

  align-items:
    flex-start;

  gap:
    8px;
}

.agenda-semanal-modal__icon {
  width:
    31px;

  height:
    31px;

  min-width:
    31px;

  display:
    inline-grid;

  place-items:
    center;

  border:
    1px solid
    #dddddd;

  border-radius:
    7px;

  background:
    #f6f6f6;

  color:
    #111111;
}

html[data-theme="dark"]
.agenda-semanal-modal__icon {
  border-color:
    rgba(
      255,
      255,
      255,
      0.10
    );

  background:
    #111111;

  color:
    #f5f5f5;
}

.agenda-semanal-modal__icon.is-danger {
  border-color:
    rgba(
      200,
      50,
      50,
      0.26
    );

  background:
    rgba(
      200,
      50,
      50,
      0.07
    );

  color:
    #c83232;
}


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

.agenda-semanal-modal__title
> div {
  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  gap:
    2px;
}

.agenda-semanal-modal__title
small {
  color:
    #777777;

  font-size:
    6px;

  font-weight:
    800;

  letter-spacing:
    0.08em;
}

.agenda-semanal-modal__title
h2 {
  margin:
    0;

  color:
    inherit;

  font-size:
    14px;

  font-weight:
    850;

  line-height:
    1.05;

  letter-spacing:
    -0.025em;
}

.agenda-semanal-modal__title
p {
  margin:
    2px
    0
    0;

  color:
    #777777;

  font-size:
    7.5px;

  font-weight:
    550;

  line-height:
    1.35;
}


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

.agenda-semanal-modal__close {
  width:
    28px;

  height:
    28px;

  min-width:
    28px;

  display:
    inline-grid;

  place-items:
    center;

  padding:
    0;

  border:
    1px solid
    transparent;

  border-radius:
    6px;

  background:
    transparent;

  color:
    #777777;

  cursor:
    pointer;

  transition:
    background
      120ms
      ease,
    border-color
      120ms
      ease,
    color
      120ms
      ease;
}

.agenda-semanal-modal__close:hover {
  border-color:
    #d5d5d5;

  background:
    #f3f3f3;

  color:
    #111111;
}

html[data-theme="dark"]
.agenda-semanal-modal__close:hover {
  border-color:
    rgba(
      255,
      255,
      255,
      0.12
    );

  background:
    #151515;

  color:
    #ffffff;
}


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

.agenda-semanal-modal
form {
  display:
    contents;
}


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

.agenda-semanal-modal__body {
  min-height:
    0;

  padding:
    10px;

  overflow-x:
    hidden;

  overflow-y:
    auto;
}


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

.agenda-semanal-field {
  display:
    flex;

  flex-direction:
    column;

  gap:
    5px;
}

.agenda-semanal-field
> span:first-child {
  color:
    #666666;

  font-size:
    7px;

  font-weight:
    750;
}

html[data-theme="dark"]
.agenda-semanal-field
> span:first-child {
  color:
    #9a9a9a;
}


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

.agenda-semanal-field__control {
  width:
    100%;

  height:
    38px;

  display:
    grid;

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

  align-items:
    center;

  gap:
    5px;

  padding:
    0
    8px;

  border:
    1px solid
    #d5d5d5;

  border-radius:
    7px;

  background:
    #ffffff;

  color:
    #777777;

  transition:
    border-color
      120ms
      ease,
    background
      120ms
      ease;
}

.agenda-semanal-field__control:focus-within {
  border-color:
    #111111;
}

html[data-theme="dark"]
.agenda-semanal-field__control {
  border-color:
    rgba(
      255,
      255,
      255,
      0.11
    );

  background:
    #111111;

  color:
    #888888;
}

html[data-theme="dark"]
.agenda-semanal-field__control:focus-within {
  border-color:
    rgba(
      255,
      255,
      255,
      0.20
    );
}


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

.agenda-semanal-field__control
input {
  width:
    100%;

  min-width:
    0;

  height:
    100%;

  padding:
    0;

  border:
    0;

  outline:
    0;

  background:
    transparent;

  color:
    #111111;

  font-size:
    9px;

  font-weight:
    650;
}

html[data-theme="dark"]
.agenda-semanal-field__control
input {
  color:
    #f5f5f5;
}


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

.agenda-semanal-modal__error {
  margin:
    8px
    0
    0;

  padding:
    7px
    8px;

  border:
    1px solid
    rgba(
      200,
      50,
      50,
      0.24
    );

  border-radius:
    6px;

  background:
    rgba(
      200,
      50,
      50,
      0.06
    );

  color:
    #ba2d2d;

  font-size:
    7.5px;

  font-weight:
    650;

  line-height:
    1.35;
}


/* =========================================================
   CONFIRM MESSAGE
   ========================================================= */

.agenda-confirm-message {
  display:
    grid;

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

  align-items:
    start;

  gap:
    7px;

  padding:
    8px;

  border:
    1px solid
    #dedede;

  border-radius:
    7px;

  background:
    #f7f7f7;
}

html[data-theme="dark"]
.agenda-confirm-message {
  border-color:
    rgba(
      255,
      255,
      255,
      0.09
    );

  background:
    #111111;
}

.agenda-confirm-message__icon {
  width:
    28px;

  height:
    28px;

  display:
    inline-grid;

  place-items:
    center;

  border:
    1px solid
    #dddddd;

  border-radius:
    6px;

  background:
    #ffffff;

  color:
    #111111;
}

html[data-theme="dark"]
.agenda-confirm-message__icon {
  border-color:
    rgba(
      255,
      255,
      255,
      0.10
    );

  background:
    #0b0b0b;

  color:
    #f5f5f5;
}

.agenda-confirm-message
p {
  margin:
    0;

  color:
    #555555;

  font-size:
    8px;

  font-weight:
    600;

  line-height:
    1.4;
}

html[data-theme="dark"]
.agenda-confirm-message
p {
  color:
    #bcbcbc;
}


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

.agenda-semanal-modal__footer {
  min-height:
    48px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    flex-end;

  gap:
    5px;

  padding:
    7px
    10px;

  border-top:
    1px solid
    #e2e2e2;

  background:
    #f7f7f7;
}

html[data-theme="dark"]
.agenda-semanal-modal__footer {
  border-color:
    rgba(
      255,
      255,
      255,
      0.09
    );

  background:
    #0f0f0f;
}


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

.agenda-semanal-toast {
  position:
    fixed;

  right:
    14px;

  bottom:
    14px;

  z-index:
    10000;

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

  min-height:
    48px;

  display:
    grid;

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

  align-items:
    center;

  gap:
    7px;

  padding:
    8px;

  border:
    1px solid
    #d8d8d8;

  border-radius:
    8px;

  background:
    #ffffff;

  color:
    #111111;

  opacity:
    0;

  visibility:
    hidden;

  transform:
    translateY(
      8px
    );

  transition:
    opacity
      160ms
      ease,
    transform
      180ms
      var(
        --agenda-ease
      ),
    visibility
      160ms
      ease;
}

html[data-theme="dark"]
.agenda-semanal-toast {
  border-color:
    rgba(
      255,
      255,
      255,
      0.12
    );

  background:
    #0b0b0b;

  color:
    #f5f5f5;
}

.agenda-semanal-toast.is-visible {
  opacity:
    1;

  visibility:
    visible;

  transform:
    translateY(
      0
    );
}


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

.agenda-semanal-toast__icon {
  width:
    30px;

  height:
    30px;

  display:
    inline-grid;

  place-items:
    center;

  border:
    1px solid
    #dddddd;

  border-radius:
    6px;

  background:
    #f6f6f6;

  color:
    #111111;
}

html[data-theme="dark"]
.agenda-semanal-toast__icon {
  border-color:
    rgba(
      255,
      255,
      255,
      0.10
    );

  background:
    #111111;

  color:
    #f5f5f5;
}

.agenda-semanal-toast--success
.agenda-semanal-toast__icon {
  background:
    var(
      --agenda-green-soft
    );

  color:
    var(
      --agenda-green
    );
}

.agenda-semanal-toast--error
.agenda-semanal-toast__icon {
  background:
    var(
      --agenda-red-soft
    );

  color:
    var(
      --agenda-red
    );
}

.agenda-semanal-toast--warning
.agenda-semanal-toast__icon {
  background:
    var(
      --agenda-orange-soft
    );

  color:
    var(
      --agenda-orange
    );
}

.agenda-semanal-toast--info
.agenda-semanal-toast__icon {
  background:
    var(
      --agenda-blue-soft
    );

  color:
    var(
      --agenda-blue
    );
}


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

.agenda-semanal-toast__body {
  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  gap:
    2px;
}

.agenda-semanal-toast__body
strong {
  color:
    inherit;

  font-size:
    8px;

  font-weight:
    800;
}

.agenda-semanal-toast__body
p {
  margin:
    0;

  color:
    #777777;

  font-size:
    6.8px;

  font-weight:
    600;

  line-height:
    1.3;
}

html[data-theme="dark"]
.agenda-semanal-toast__body
p {
  color:
    #999999;
}


/* =========================================================
   EDITING STATE
   ========================================================= */

.agenda-semanal-page.is-editing
.agenda-semanal-sheet {
  border-color:
    var(
      --agenda-border-strong
    );
}

.agenda-semanal-page.is-editing
.agenda-sheet-header {
  background:
    var(
      --agenda-surface-soft
    );
}


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

.agenda-button:focus-visible,
.agenda-tab:focus-visible,
.agenda-editor-grid
button:focus-visible,
.agenda-format-actions
button:focus-visible,
.agenda-block-actions
button:focus-visible,
.agenda-inspector__close:focus-visible,
.agenda-semanal-modal__close:focus-visible {
  outline:
    2px solid
    color-mix(
      in srgb,
      var(--agenda-text) 20%,
      transparent
    );

  outline-offset:
    2px;
}


/* =========================================================
   SCROLLBARS
   ========================================================= */

.agenda-semanal-content::-webkit-scrollbar,
.agenda-inspector__body::-webkit-scrollbar,
.agenda-semanal-modal__body::-webkit-scrollbar {
  width:
    5px;

  height:
    5px;
}

.agenda-semanal-content::-webkit-scrollbar-track,
.agenda-inspector__body::-webkit-scrollbar-track,
.agenda-semanal-modal__body::-webkit-scrollbar-track {
  background:
    transparent;
}

.agenda-semanal-content::-webkit-scrollbar-thumb,
.agenda-inspector__body::-webkit-scrollbar-thumb,
.agenda-semanal-modal__body::-webkit-scrollbar-thumb {
  border-radius:
    999px;

  background:
    var(
      --agenda-border-strong
    );
}


/* =========================================================
   ANIMATIONS
   ========================================================= */

@keyframes agendaPageIn {
  from {
    opacity:
      0;

    transform:
      translateY(
        4px
      );
  }

  to {
    opacity:
      1;

    transform:
      translateY(
        0
      );
  }
}

@keyframes agendaSectionIn {
  from {
    opacity:
      0;

    transform:
      translateY(
        5px
      );
  }

  to {
    opacity:
      1;

    transform:
      translateY(
        0
      );
  }
}

@keyframes agendaBlockIn {
  from {
    opacity:
      0;

    transform:
      translateY(
        4px
      )
      scale(
        0.995
      );
  }

  to {
    opacity:
      1;

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

@keyframes agendaModalBackdropIn {
  from {
    opacity:
      0;
  }

  to {
    opacity:
      1;
  }
}

@keyframes agendaModalIn {
  from {
    opacity:
      0;

    transform:
      translateY(
        6px
      )
      scale(
        0.99
      );
  }

  to {
    opacity:
      1;

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

@keyframes agendaLoadingIn {
  from {
    opacity:
      0;

    transform:
      translateY(
        5px
      );
  }

  to {
    opacity:
      1;

    transform:
      translateY(
        0
      );
  }
}

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

.agenda-spin {
  animation:
    agendaSpin
    750ms
    linear
    infinite;
}


/* =========================================================
   RESPONSIVE · 1350
   ========================================================= */

@media (
  max-width: 1350px
) {
  .agenda-semanal-workspace {
    grid-template-columns:
      minmax(
        0,
        1fr
      )
      265px;
  }

  .agenda-last-update {
    display:
      none;
  }

  .agenda-week-stat
  > div
  > span {
    display:
      none;
  }
}


/* =========================================================
   RESPONSIVE · 1150
   ========================================================= */

@media (
  max-width: 1150px
) {
  .agenda-semanal-head {
    grid-template-columns:
      1fr;
  }

  .agenda-semanal-head__actions {
    justify-content:
      flex-start;
  }

  .agenda-semanal-workspace {
    grid-template-columns:
      1fr;
  }

  .agenda-inspector {
    display:
      none;
  }

  .agenda-inspector.is-open {
    position:
      fixed;

    top:
      calc(
        var(
          --topbar-height,
          50px
        ) +
        8px
      );

    right:
      8px;

    bottom:
      8px;

    z-index:
      9000;

    width:
      min(
        330px,
        calc(
          100vw -
          16px
        )
      );

    display:
      grid;

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

    animation:
      agendaInspectorIn
      220ms
      var(
        --agenda-ease
      )
      both;
  }

  .agenda-inspector.is-open
  .agenda-inspector__body {
    overflow-y:
      auto;
  }

  .agenda-inspector__close {
    display:
      grid;
  }
}

@keyframes agendaInspectorIn {
  from {
    opacity:
      0;

    transform:
      translateX(
        12px
      );
  }

  to {
    opacity:
      1;

    transform:
      translateX(
        0
      );
  }
}


/* =========================================================
   RESPONSIVE · 920
   ========================================================= */

@media (
  max-width: 920px
) {
  .agenda-week-summary {
    grid-template-columns:
      repeat(
        3,
        minmax(
          0,
          1fr
        )
      );
  }

  .agenda-week-stat {
    border-bottom:
      1px solid
      var(
        --agenda-border
      );
  }

  .agenda-week-stat:nth-child(
    3
  ) {
    border-right:
      0;
  }

  .agenda-week-stat:nth-child(
    4
  ),
  .agenda-week-stat:nth-child(
    5
  ) {
    border-bottom:
      0;
  }

  .agenda-semanal-tabs {
    grid-template-columns:
      repeat(
        5,
        minmax(
          110px,
          1fr
        )
      );

    overflow-x:
      auto;
  }

  .agenda-tab {
    min-width:
      110px;
  }
}


/* =========================================================
   RESPONSIVE · 760
   ========================================================= */

@media (
  max-width: 760px
) {
  .app-content:has(
    .agenda-semanal-page
  ) {
    padding:
      5px;
  }

  .agenda-semanal-page {
    min-height:
      auto;

    gap:
      6px;
  }

  .agenda-semanal-head {
    padding:
      8px;
  }

  .agenda-semanal-head__content
  p {
    white-space:
      normal;
  }

  .agenda-semanal-head__actions {
    display:
      grid;

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

    width:
      100%;
  }

  .agenda-semanal-user {
    grid-column:
      1 /
      -1;
  }

  .agenda-button,
  .agenda-edit-indicator {
    width:
      100%;
  }

  .agenda-week-summary {
    grid-template-columns:
      repeat(
        2,
        minmax(
          0,
          1fr
        )
      );
  }

  .agenda-week-stat,
  .agenda-week-stat:nth-child(
    3
  ) {
    border-right:
      1px solid
      var(
        --agenda-border
      );

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

  .agenda-week-stat:nth-child(
    2n
  ) {
    border-right:
      0;
  }

  .agenda-week-stat:nth-child(
    5
  ) {
    grid-column:
      1 /
      -1;

    border-right:
      0;

    border-bottom:
      0;
  }

  .agenda-sheet-header {
    align-items:
      flex-start;

    flex-direction:
      column;
  }

  .agenda-sheet-header__main {
    width:
      100%;
  }

  .agenda-sheet-header__side {
    width:
      100%;

    justify-content:
      space-between;
  }

  .agenda-task-edit {
    grid-template-columns:
      1fr;

    padding-right:
      28px;
  }

  .agenda-task-edit__time {
    width:
      120px;
  }

  .agenda-semanal-footer {
    align-items:
      flex-start;

    flex-direction:
      column;
  }

  .agenda-semanal-footer__actions {
    width:
      100%;

    justify-content:
      space-between;
  }
}


/* =========================================================
   RESPONSIVE · 560
   ========================================================= */

@media (
  max-width: 560px
) {
  .agenda-semanal-head__actions {
    grid-template-columns:
      1fr;
  }

  .agenda-semanal-user {
    grid-column:
      auto;
  }

  .agenda-week-summary {
    grid-template-columns:
      1fr;
  }

  .agenda-week-stat,
  .agenda-week-stat:nth-child(
    2n
  ),
  .agenda-week-stat:nth-child(
    3
  ),
  .agenda-week-stat:nth-child(
    4
  ),
  .agenda-week-stat:nth-child(
    5
  ) {
    grid-column:
      auto;

    border-right:
      0;

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

  .agenda-week-stat:last-child {
    border-bottom:
      0;
  }

  .agenda-semanal-tabs {
    grid-template-columns:
      repeat(
        5,
        90px
      );
  }

  .agenda-tab {
    min-width:
      90px;

    grid-template-columns:
      1fr;

    justify-items:
      center;

    text-align:
      center;
  }

  .agenda-tab__full {
    display:
      none;
  }

  .agenda-tab__short {
    display:
      inline;
  }

  .agenda-tab__title-row {
    justify-content:
      center;
  }

  .agenda-tab__title-row
  small {
    display:
      none;
  }

  .agenda-tab__meta {
    display:
      none;
  }

  .agenda-semanal-sheet {
    min-height:
      390px;
  }

  .agenda-block--checkbox {
    grid-template-columns:
      1fr;

    align-items:
      start;
  }

  .agenda-block__reminder-at,
  .agenda-block__completed-at {
    justify-content:
      flex-start;
  }

  .agenda-block--checkbox.agenda-block--editable {
    grid-template-columns:
      22px
      minmax(
        0,
        1fr
      );
  }

  .agenda-task-edit {
    padding-right:
      0;
  }

  .agenda-block__type {
    position:
      static;

    align-self:
      flex-start;

    margin-top:
      2px;
  }

  .agenda-block--horario,
  .agenda-block--horario.agenda-block--editable {
    grid-template-columns:
      1fr;
  }

  .agenda-block--horario.agenda-block--editable,
  .agenda-block--list.agenda-block--editable,
  .agenda-block--text.agenda-block--editable,
  .agenda-block--title.agenda-block--editable,
  .agenda-block--subtitle.agenda-block--editable,
  .agenda-block--separator.agenda-block--editable {
    padding-right:
      6px;
  }

  .agenda-semanal-footer__metrics {
    display:
      grid;

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

    width:
      100%;
  }

  .agenda-semanal-footer__actions {
    display:
      grid;

    grid-template-columns:
      1fr;

    width:
      100%;
  }

  .agenda-save-status,
  .agenda-semanal-footer__actions
  .agenda-button {
    width:
      100%;

    justify-content:
      center;
  }

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

  .agenda-block-actions {
    grid-template-columns:
      1fr;
  }

  .agenda-inspector.is-open {
    top:
      5px;

    right:
      5px;

    bottom:
      5px;

    width:
      calc(
        100vw -
        10px
      );
  }

  .agenda-semanal-modal-backdrop {
    padding:
      6px;
  }

  .agenda-semanal-modal {
    width:
      100%;

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

  .agenda-semanal-modal__footer {
    display:
      grid;

    grid-template-columns:
      1fr;
  }

  .agenda-semanal-modal__footer
  .agenda-button {
    width:
      100%;
  }

  .agenda-semanal-toast {
    right:
      6px;

    bottom:
      6px;

    width:
      calc(
        100vw -
        12px
      );
  }
}


/* =========================================================
   RESPONSIVE · 390
   ========================================================= */

@media (
  max-width: 390px
) {
  .agenda-semanal-head__brand {
    align-items:
      flex-start;
  }

  .agenda-semanal-brand__icon {
    width:
      31px;

    height:
      31px;

    min-width:
      31px;
  }

  .agenda-semanal-head__content
  h1 {
    font-size:
      16px;
  }

  .agenda-semanal-tabs {
    grid-template-columns:
      repeat(
        5,
        84px
      );
  }

  .agenda-tab {
    min-width:
      84px;
  }
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (
  prefers-reduced-motion:
    reduce
) {
  .agenda-semanal-page,
  .agenda-semanal-page *,
  .agenda-semanal-page *::before,
  .agenda-semanal-page *::after,
  .agenda-semanal-modal-backdrop,
  .agenda-semanal-modal-backdrop *,
  .agenda-semanal-toast {
    animation:
      none !important;

    transition:
      none !important;

    scroll-behavior:
      auto !important;
  }
}


/* =========================================================
   PRINT
   ========================================================= */

@media print {
  .agenda-semanal-head__actions,
  .agenda-week-nav,
  .agenda-inspector,
  .agenda-semanal-footer__actions,
  .agenda-inspector-toggle,
  .agenda-semanal-loading,
  .agenda-semanal-toast,
  .agenda-semanal-modal-backdrop {
    display:
      none !important;
  }

  .agenda-semanal-page {
    display:
      block;

    color:
      #000000;

    background:
      #ffffff;
  }

  .agenda-semanal-head,
  .agenda-week-summary,
  .agenda-semanal-sheet {
    break-inside:
      avoid;

    border-color:
      #cccccc;

    background:
      #ffffff;
  }

  .agenda-semanal-workspace {
    display:
      block;
  }

  .agenda-semanal-content {
    min-height:
      0;

    background:
      #ffffff;
  }
}


/* =========================================================
   FIN · AGENDA SEMANAL V5
   ========================================================= *//* =========================================================
   WIRTZ HUB · AGENDA SEMANAL
   AJUSTE FINAL

   - TIPOGRAFÍA MÁS GRANDE
   - SIN ESPACIO MUERTO HASTA FOOTER
   - MEJOR PROPORCIÓN GENERAL
   - MANTIENE ESTILO MODERNO
   ========================================================= */


/* =========================================================
   PAGE · ALTURA NATURAL
   ========================================================= */

.agenda-semanal-page {
  min-height:
    0 !important;

  height:
    auto !important;

  flex:
    0 0 auto !important;

  gap:
    9px !important;
}


/* =========================================================
   APP CONTENT
   ========================================================= */

.app-content:has(
  .agenda-semanal-page
) {
  flex:
    0 0 auto !important;

  min-height:
    0 !important;

  height:
    auto !important;

  overflow:
    visible !important;
}


/* =========================================================
   WORKSPACE · NO ESTIRAR
   ========================================================= */

.agenda-semanal-workspace {
  flex:
    0 0 auto !important;

  min-height:
    0 !important;

  height:
    auto !important;

  align-items:
    start !important;
}


/* =========================================================
   MAIN
   ========================================================= */

.agenda-semanal-main {
  min-height:
    0 !important;

  height:
    auto !important;

  align-self:
    start !important;
}


/* =========================================================
   SHEET
   ========================================================= */

.agenda-semanal-sheet {
  min-height:
    430px !important;

  height:
    auto !important;

  align-self:
    start !important;
}


/* =========================================================
   CONTENT
   ========================================================= */

.agenda-semanal-content {
  min-height:
    300px !important;

  max-height:
    none !important;

  height:
    auto !important;

  overflow-y:
    visible !important;
}


/* =========================================================
   INSPECTOR
   ========================================================= */

.agenda-inspector {
  min-height:
    430px !important;

  height:
    auto !important;

  align-self:
    start !important;
}

.agenda-inspector__body {
  min-height:
    0 !important;

  max-height:
    none !important;

  overflow-y:
    visible !important;
}


/* =========================================================
   FOOTER DE LA APP
   ========================================================= */

.app-main:has(
  .agenda-semanal-page
)
.app-footer {
  margin-top:
    10px !important;
}


/* =========================================================
   HEADER · TEXTO MÁS GRANDE
   ========================================================= */

.agenda-semanal-head {
  min-height:
    72px !important;

  padding:
    10px
    12px !important;
}

.agenda-semanal-head__content
h1 {
  font-size:
    22px !important;
}

.agenda-semanal-eyebrow {
  font-size:
    8px !important;
}

.agenda-semanal-head__content
p {
  font-size:
    10.5px !important;

  line-height:
    1.4 !important;
}


/* =========================================================
   USUARIO
   ========================================================= */

.agenda-semanal-user
small {
  font-size:
    7.5px !important;
}

.agenda-semanal-user
strong {
  font-size:
    9.5px !important;
}


/* =========================================================
   BOTONES
   ========================================================= */

.agenda-button {
  min-height:
    36px !important;

  padding:
    0
    11px !important;

  font-size:
    9.5px !important;
}

.agenda-button
.icon,
.agenda-button
svg {
  width:
    14px !important;

  height:
    14px !important;
}


/* =========================================================
   INDICADOR EDICIÓN
   ========================================================= */

.agenda-edit-indicator {
  min-height:
    36px !important;

  padding:
    0
    10px !important;

  font-size:
    9px !important;
}


/* =========================================================
   ÚLTIMA ACTUALIZACIÓN
   ========================================================= */

.agenda-last-update {
  font-size:
    8.5px !important;
}


/* =========================================================
   KPIS
   ========================================================= */

.agenda-week-stat {
  min-height:
    68px !important;

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

  gap:
    9px !important;

  padding:
    9px
    10px !important;
}

.agenda-week-stat__icon {
  width:
    34px !important;

  height:
    34px !important;

  min-width:
    34px !important;
}

.agenda-week-stat__icon
.icon,
.agenda-week-stat__icon
svg {
  width:
    15px !important;

  height:
    15px !important;
}

.agenda-week-stat
small {
  font-size:
    7.5px !important;
}

.agenda-week-stat
strong {
  font-size:
    17px !important;
}

.agenda-week-stat
> div
> span {
  font-size:
    8px !important;
}

.agenda-week-stat.is-backup
strong {
  font-size:
    11px !important;
}


/* =========================================================
   NAVEGACIÓN SEMANA
   ========================================================= */

.agenda-week-nav__head {
  min-height:
    44px !important;

  padding:
    7px
    10px !important;
}

.agenda-week-nav__head
> div
> span {
  font-size:
    7.5px !important;
}

.agenda-week-nav__head
> div
> strong {
  font-size:
    9.5px !important;
}

.agenda-week-nav__meta {
  font-size:
    8.5px !important;
}


/* =========================================================
   TABS
   ========================================================= */

.agenda-tab {
  min-height:
    60px !important;

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

  gap:
    8px !important;

  padding:
    8px
    9px !important;
}

.agenda-tab__icon {
  width:
    31px !important;

  height:
    31px !important;

  min-width:
    31px !important;
}

.agenda-tab__icon
.icon,
.agenda-tab__icon
svg {
  width:
    14px !important;

  height:
    14px !important;
}

.agenda-tab__title-row
strong {
  font-size:
    10px !important;
}

.agenda-tab__title-row
small {
  font-size:
    7.5px !important;
}

.agenda-tab__meta {
  font-size:
    7.5px !important;
}


/* =========================================================
   SHEET HEADER
   ========================================================= */

.agenda-sheet-header {
  min-height:
    62px !important;

  padding:
    9px
    11px !important;
}

.agenda-sheet-header__day {
  min-height:
    34px !important;

  padding:
    0
    10px !important;

  font-size:
    9px !important;
}

.agenda-sheet-header__title
label {
  font-size:
    7px !important;
}

.agenda-sheet-header__title
input {
  height:
    28px !important;

  font-size:
    16px !important;
}

.agenda-sheet-header__meta {
  font-size:
    8px !important;
}


/* =========================================================
   BLOQUES
   ========================================================= */

.agenda-block--text
p {
  font-size:
    10.5px !important;

  line-height:
    1.5 !important;
}

.agenda-block--title
h2 {
  font-size:
    18px !important;
}

.agenda-block--subtitle
h3 {
  font-size:
    13px !important;
}

.agenda-block--checkbox {
  min-height:
    44px !important;

  padding:
    8px
    9px !important;
}

.agenda-block--checkbox
> label
span {
  font-size:
    10px !important;
}

.agenda-block--checkbox
> label
b,
.agenda-edit-checkbox
b {
  width:
    18px !important;

  height:
    18px !important;

  min-width:
    18px !important;
}

.agenda-block__reminder-at,
.agenda-block__completed-at {
  font-size:
    8px !important;
}

.agenda-block--horario {
  min-height:
    40px !important;

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

.agenda-block__time {
  font-size:
    8.5px !important;
}

.agenda-block__time
time {
  font-size:
    10px !important;
}

.agenda-block--horario
> strong {
  font-size:
    10px !important;
}

.agenda-block--list
p {
  font-size:
    10px !important;
}

.agenda-block--list
li {
  font-size:
    9.5px !important;
}


/* =========================================================
   EDITABLE INPUTS
   ========================================================= */

.agenda-block--editable
textarea {
  min-height:
    40px !important;

  font-size:
    10px !important;
}

.agenda-block--editable
input[type="time"] {
  height:
    38px !important;

  font-size:
    9.5px !important;
}

.agenda-block__type {
  font-size:
    7px !important;
}


/* =========================================================
   SHEET FOOTER
   ========================================================= */

.agenda-semanal-footer {
  min-height:
    46px !important;

  padding:
    7px
    10px !important;
}

.agenda-semanal-footer__metrics
> span {
  font-size:
    8px !important;
}

.agenda-save-status {
  min-height:
    27px !important;

  font-size:
    7.5px !important;
}


/* =========================================================
   INSPECTOR HEADER
   ========================================================= */

.agenda-inspector__head {
  min-height:
    58px !important;

  padding:
    8px
    9px !important;
}

.agenda-inspector__icon {
  width:
    32px !important;

  height:
    32px !important;

  min-width:
    32px !important;
}

.agenda-inspector__icon
.icon,
.agenda-inspector__icon
svg {
  width:
    14px !important;

  height:
    14px !important;
}

.agenda-inspector__title
span {
  font-size:
    7px !important;
}

.agenda-inspector__title
strong {
  font-size:
    10px !important;
}


/* =========================================================
   INSPECTOR SECTIONS
   ========================================================= */

.agenda-inspector-section {
  gap:
    9px !important;

  padding:
    10px !important;
}

.agenda-inspector-section__head
span {
  font-size:
    7px !important;
}

.agenda-inspector-section__head
strong {
  font-size:
    10px !important;
}


/* =========================================================
   INSPECTOR METRICS
   ========================================================= */

.agenda-inspector-metrics
article {
  min-height:
    58px !important;

  padding:
    8px
    9px !important;
}

.agenda-inspector-metrics
span {
  font-size:
    7px !important;
}

.agenda-inspector-metrics
strong {
  font-size:
    16px !important;
}


/* =========================================================
   INSPECTOR FIELDS
   ========================================================= */

.agenda-inspector-field
> span {
  font-size:
    7.5px !important;
}

.agenda-inspector-field
input {
  height:
    38px !important;

  padding:
    0
    10px !important;

  font-size:
    9.5px !important;
}


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

.agenda-backup-status {
  min-height:
    24px !important;

  padding:
    0
    8px !important;

  font-size:
    7px !important;
}


/* =========================================================
   INFORMACIÓN TÉCNICA
   ========================================================= */

.agenda-inspector-list
article {
  min-height:
    38px !important;

  padding:
    7px
    8px !important;
}

.agenda-inspector-list
span {
  font-size:
    7.5px !important;
}

.agenda-inspector-list
strong {
  font-size:
    8px !important;
}


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

.agenda-editor-grid
button {
  min-height:
    36px !important;

  padding:
    0
    8px !important;

  font-size:
    8px !important;
}

.agenda-format-actions
button {
  min-height:
    46px !important;

  font-size:
    7px !important;
}

.agenda-block-actions
button {
  min-height:
    34px !important;

  font-size:
    7px !important;
}


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

.agenda-empty-state {
  min-height:
    260px !important;
}

.agenda-empty-state__eyebrow {
  font-size:
    7.5px !important;
}

.agenda-empty-state
> strong {
  font-size:
    15px !important;
}

.agenda-empty-state
> p {
  font-size:
    9.5px !important;
}


/* =========================================================
   DIVISIONES MÁS VISIBLES
   ========================================================= */

.agenda-semanal-head,
.agenda-week-summary,
.agenda-week-nav,
.agenda-semanal-sheet,
.agenda-inspector {
  border-color:
    rgba(
      0,
      0,
      0,
      0.15
    ) !important;
}

.agenda-week-stat,
.agenda-tab,
.agenda-sheet-header,
.agenda-semanal-footer,
.agenda-inspector__head,
.agenda-inspector-section,
.agenda-inspector__footer {
  border-color:
    rgba(
      0,
      0,
      0,
      0.12
    ) !important;
}


/* =========================================================
   DARK · DIVISIONES
   ========================================================= */

html[data-theme="dark"]
.agenda-semanal-head,
html[data-theme="dark"]
.agenda-week-summary,
html[data-theme="dark"]
.agenda-week-nav,
html[data-theme="dark"]
.agenda-semanal-sheet,
html[data-theme="dark"]
.agenda-inspector {
  border-color:
    rgba(
      255,
      255,
      255,
      0.13
    ) !important;
}

html[data-theme="dark"]
.agenda-week-stat,
html[data-theme="dark"]
.agenda-tab,
html[data-theme="dark"]
.agenda-sheet-header,
html[data-theme="dark"]
.agenda-semanal-footer,
html[data-theme="dark"]
.agenda-inspector__head,
html[data-theme="dark"]
.agenda-inspector-section,
html[data-theme="dark"]
.agenda-inspector__footer {
  border-color:
    rgba(
      255,
      255,
      255,
      0.10
    ) !important;
}


/* =========================================================
   DESKTOP
   ========================================================= */

@media (
  min-width: 1151px
) {
  .agenda-semanal-workspace {
    grid-template-columns:
      minmax(
        0,
        1fr
      )
      310px !important;
  }
}


/* =========================================================
   TABLET
   ========================================================= */

@media (
  max-width: 1150px
) {
  .agenda-semanal-sheet {
    min-height:
      400px !important;
  }

  .agenda-semanal-content {
    min-height:
      280px !important;
  }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (
  max-width: 760px
) {
  .agenda-semanal-sheet {
    min-height:
      360px !important;
  }

  .agenda-semanal-content {
    min-height:
      250px !important;
  }

  .agenda-tab {
    min-height:
      56px !important;
  }
}/* =========================================================
   WIRTZ HUB · AGENDA SEMANAL
   CORRECCIÓN FINAL

   - FOOTER ABAJO
   - MÁS AIRE ANTES DEL FOOTER
   - TIPOGRAFÍA MÁS GRANDE
   - INSPECTOR MÁS LEGIBLE
   ========================================================= */


/* =========================================================
   PAGE · OCUPAR MÁS ALTO
   ========================================================= */

.agenda-semanal-page {
  min-height:
    calc(
      100dvh -
      var(--topbar-height, 50px) -
      48px
    ) !important;

  flex:
    1 1 auto !important;
}


/* =========================================================
   APP CONTENT
   ========================================================= */

.app-content:has(
  .agenda-semanal-page
) {
  flex:
    1 1 auto !important;

  min-height:
    0 !important;

  display:
    flex !important;

  flex-direction:
    column !important;
}


/* =========================================================
   WORKSPACE · DAR MÁS ALTO
   ========================================================= */

.agenda-semanal-workspace {
  flex:
    1 1 auto !important;

  min-height:
    520px !important;

  align-items:
    stretch !important;
}


/* =========================================================
   MAIN
   ========================================================= */

.agenda-semanal-main {
  min-height:
    520px !important;
}


/* =========================================================
   SHEET
   ========================================================= */

.agenda-semanal-sheet {
  min-height:
    520px !important;

  height:
    100% !important;
}


/* =========================================================
   CONTENT
   ========================================================= */

.agenda-semanal-content {
  min-height:
    380px !important;

  height:
    auto !important;

  overflow-y:
    auto !important;
}


/* =========================================================
   INSPECTOR
   ========================================================= */

.agenda-inspector {
  min-height:
    520px !important;

  height:
    100% !important;
}


/* =========================================================
   INSPECTOR BODY
   ========================================================= */

.agenda-inspector__body {
  overflow-y:
    auto !important;
}


/* =========================================================
   FOOTER APP · ABAJO
   ========================================================= */

.app-main:has(
  .agenda-semanal-page
)
.app-footer {
  margin-top:
    auto !important;
}


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

.agenda-semanal-head__content h1 {
  font-size:
    24px !important;
}

.agenda-semanal-eyebrow {
  font-size:
    9px !important;
}

.agenda-semanal-head__content p {
  font-size:
    11.5px !important;
}


/* =========================================================
   KPIS
   ========================================================= */

.agenda-week-stat small {
  font-size:
    8.5px !important;
}

.agenda-week-stat strong {
  font-size:
    19px !important;
}

.agenda-week-stat > div > span {
  font-size:
    9px !important;
}


/* =========================================================
   WEEK NAV
   ========================================================= */

.agenda-week-nav__head > div > span {
  font-size:
    8.5px !important;
}

.agenda-week-nav__head > div > strong {
  font-size:
    10.5px !important;
}

.agenda-week-nav__meta {
  font-size:
    9px !important;
}


/* =========================================================
   TABS
   ========================================================= */

.agenda-tab__title-row strong {
  font-size:
    11px !important;
}

.agenda-tab__title-row small {
  font-size:
    8px !important;
}

.agenda-tab__meta {
  font-size:
    8px !important;
}


/* =========================================================
   SHEET
   ========================================================= */

.agenda-sheet-header__day {
  font-size:
    10px !important;
}

.agenda-sheet-header__title label {
  font-size:
    8px !important;
}

.agenda-sheet-header__title input {
  font-size:
    17px !important;
}

.agenda-sheet-header__meta {
  font-size:
    9px !important;
}


/* =========================================================
   BLOQUES
   ========================================================= */

.agenda-block--text p {
  font-size:
    11px !important;
}

.agenda-block--title h2 {
  font-size:
    19px !important;
}

.agenda-block--subtitle h3 {
  font-size:
    14px !important;
}

.agenda-block--checkbox > label span {
  font-size:
    11px !important;
}

.agenda-block__reminder-at,
.agenda-block__completed-at {
  font-size:
    8.5px !important;
}

.agenda-block__time {
  font-size:
    9px !important;
}

.agenda-block__time time {
  font-size:
    10.5px !important;
}

.agenda-block--horario > strong {
  font-size:
    10.5px !important;
}

.agenda-block--list p {
  font-size:
    10.5px !important;
}

.agenda-block--list li {
  font-size:
    10px !important;
}


/* =========================================================
   FOOTER INTERNO DE LA AGENDA
   ========================================================= */

.agenda-semanal-footer__metrics > span {
  font-size:
    9px !important;
}

.agenda-save-status {
  font-size:
    8px !important;
}


/* =========================================================
   INSPECTOR · TITULOS
   ========================================================= */

.agenda-inspector__title span {
  font-size:
    8px !important;
}

.agenda-inspector__title strong {
  font-size:
    11px !important;
}

.agenda-inspector-section__head span {
  font-size:
    8px !important;
}

.agenda-inspector-section__head strong {
  font-size:
    11px !important;
}


/* =========================================================
   INSPECTOR METRICS
   ========================================================= */

.agenda-inspector-metrics span {
  font-size:
    8px !important;
}

.agenda-inspector-metrics strong {
  font-size:
    17px !important;
}


/* =========================================================
   INSPECTOR FIELDS
   ========================================================= */

.agenda-inspector-field > span {
  font-size:
    8px !important;
}

.agenda-inspector-field input {
  font-size:
    10px !important;
}


/* =========================================================
   BACKUP
   ========================================================= */

.agenda-backup-status {
  font-size:
    8px !important;
}


/* =========================================================
   INFO TÉCNICA
   ========================================================= */

.agenda-inspector-list span {
  font-size:
    8px !important;
}

.agenda-inspector-list strong {
  font-size:
    9px !important;
}


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

.agenda-editor-grid button {
  font-size:
    9px !important;
}

.agenda-format-actions button {
  font-size:
    8px !important;
}

.agenda-block-actions button {
  font-size:
    8px !important;
}


/* =========================================================
   BOTONES
   ========================================================= */

.agenda-button {
  font-size:
    10px !important;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (
  max-width: 1150px
) {
  .agenda-semanal-workspace,
  .agenda-semanal-main,
  .agenda-semanal-sheet,
  .agenda-inspector {
    min-height:
      440px !important;
  }

  .agenda-semanal-content {
    min-height:
      320px !important;
  }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (
  max-width: 760px
) {
  .agenda-semanal-page {
    min-height:
      auto !important;
  }

  .agenda-semanal-workspace,
  .agenda-semanal-main,
  .agenda-semanal-sheet {
    min-height:
      380px !important;
  }

  .agenda-semanal-content {
    min-height:
      280px !important;
  }
}/* =========================================================
   AGENDA SEMANAL · MÁS RÁPIDA /
   DIVISIONES MARCADAS / TIPOGRAFÍA MÁS FUERTE
   ========================================================= */

.agenda-semanal-page {
  --agenda-border:
    #c7ccd2;

  --agenda-border-soft:
    #d8dde3;

  --agenda-border-strong:
    #9da4ad;

  --agenda-text:
    #0d0f12;

  --agenda-text-soft:
    #343a42;

  --agenda-muted:
    #4b525b;

  --agenda-muted-soft:
    #6c737c;

  --agenda-transition-fast:
    80ms ease;

  --agenda-transition:
    100ms ease;
}

html[data-theme="dark"]
.agenda-semanal-page {
  --agenda-border:
    #343941;

  --agenda-border-soft:
    #2b3037;

  --agenda-border-strong:
    #555c66;

  --agenda-text:
    #ffffff;

  --agenda-text-soft:
    #d7dbe0;

  --agenda-muted:
    #b3b9c1;

  --agenda-muted-soft:
    #8e959e;
}


/* =========================================================
   RENDIMIENTO VISUAL
   ========================================================= */

.agenda-semanal-page,
.agenda-semanal-head,
.agenda-semanal-user,
.agenda-edit-indicator,
.agenda-button,
.agenda-week-summary,
.agenda-week-stat,
.agenda-week-nav,
.agenda-tab,
.agenda-semanal-sheet,
.agenda-block,
.agenda-inspector,
.agenda-inspector-metrics article,
.agenda-inspector-list article,
.agenda-editor-grid button,
.agenda-format-actions button,
.agenda-block-actions button,
.agenda-empty-state__icon,
.agenda-semanal-modal,
.agenda-semanal-modal__close,
.agenda-semanal-field__control,
.agenda-semanal-toast {
  transition: none;
}

.agenda-semanal-page,
.agenda-semanal-head,
.agenda-week-summary,
.agenda-week-nav,
.agenda-semanal-workspace,
.agenda-block,
.agenda-semanal-modal,
.agenda-semanal-loading__box {
  animation: none;
}


/* =========================================================
   TIPOGRAFÍA GENERAL
   ========================================================= */

.agenda-semanal-page {
  font-weight: 600;
}

.agenda-semanal-head__content h1,
.agenda-week-stat strong,
.agenda-tab__title-row strong,
.agenda-sheet-header__title input,
.agenda-block--title h2,
.agenda-block--subtitle h3,
.agenda-empty-state > strong,
.agenda-inspector__title strong,
.agenda-inspector-section__head strong,
.agenda-inspector-metrics strong,
.agenda-semanal-modal__title h2 {
  font-weight: 850;
}

.agenda-semanal-eyebrow,
.agenda-semanal-user small,
.agenda-week-stat small,
.agenda-week-nav__head > div > span,
.agenda-sheet-header__title label,
.agenda-inspector__title span,
.agenda-inspector-section__head span,
.agenda-semanal-modal__title small,
.agenda-semanal-field > span:first-child {
  font-weight: 850;
}

.agenda-semanal-head__content p,
.agenda-week-stat > div > span,
.agenda-tab__meta,
.agenda-block--text p,
.agenda-block--checkbox > label span,
.agenda-block--horario > strong,
.agenda-block--list li,
.agenda-empty-state > p,
.agenda-confirm-message p,
.agenda-semanal-toast__body p {
  font-weight: 650;
}


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

.agenda-semanal-head {
  border-color:
    var(
      --agenda-border-strong
    );

  border-bottom-width:
    2px;
}

.agenda-semanal-brand__icon,
.agenda-semanal-user,
.agenda-semanal-user__icon,
.agenda-edit-indicator {
  border-color:
    var(
      --agenda-border-strong
    );
}


/* =========================================================
   BOTONES
   ========================================================= */

.agenda-button {
  border-color:
    var(
      --agenda-border-strong
    );

  font-weight:
    800;
}


/* =========================================================
   RESUMEN SEMANAL
   ========================================================= */

.agenda-week-summary {
  border-color:
    var(
      --agenda-border-strong
    );
}

.agenda-week-stat {
  border-right:
    1px solid
    var(
      --agenda-border-strong
    );
}

.agenda-week-stat__icon {
  border-color:
    var(
      --agenda-border-strong
    );
}


/* =========================================================
   NAVEGACIÓN SEMANAL
   ========================================================= */

.agenda-week-nav {
  border-color:
    var(
      --agenda-border-strong
    );
}

.agenda-week-nav__head {
  border-bottom:
    2px solid
    var(
      --agenda-border-strong
    );
}

.agenda-tab {
  border-right:
    1px solid
    var(
      --agenda-border-strong
    );
}

.agenda-tab__icon {
  border-color:
    var(
      --agenda-border-strong
    );
}

.agenda-tab.is-active {
  box-shadow:
    inset
    0
    -2px
    0
    var(
      --agenda-text
    );
}


/* =========================================================
   SHEET
   ========================================================= */

.agenda-semanal-sheet {
  border-color:
    var(
      --agenda-border-strong
    );
}

.agenda-sheet-header {
  border-bottom:
    2px solid
    var(
      --agenda-border-strong
    );
}

.agenda-sheet-header__day {
  border-color:
    var(
      --agenda-border-strong
    );
}


/* =========================================================
   BLOQUES
   ========================================================= */

.agenda-block--checkbox,
.agenda-block--editable {
  border-color:
    var(
      --agenda-border-strong
    );
}

.agenda-block--horario {
  border-bottom:
    1px solid
    var(
      --agenda-border-strong
    );
}

.agenda-block--separator > span {
  background:
    var(
      --agenda-border-strong
    );
}

.agenda-block--checkbox > label b,
.agenda-edit-checkbox b {
  border-color:
    var(
      --agenda-border-strong
    );
}

.agenda-block--editable textarea,
.agenda-block--editable input[type="text"],
.agenda-block--editable input[type="time"] {
  border-color:
    var(
      --agenda-border-strong
    );

  font-weight:
    700;
}


/* =========================================================
   FOOTER INTERNO
   ========================================================= */

.agenda-semanal-footer {
  border-top:
    2px solid
    var(
      --agenda-border-strong
    );
}

.agenda-save-status {
  border-color:
    var(
      --agenda-border-strong
    );

  font-weight:
    800;
}


/* =========================================================
   INSPECTOR
   ========================================================= */

.agenda-inspector {
  border-color:
    var(
      --agenda-border-strong
    );
}

.agenda-inspector__head {
  border-bottom:
    2px solid
    var(
      --agenda-border-strong
    );
}

.agenda-inspector__icon {
  border-color:
    var(
      --agenda-border-strong
    );
}

.agenda-inspector-section {
  border-bottom:
    2px solid
    var(
      --agenda-border-strong
    );
}

.agenda-inspector-metrics {
  border-color:
    var(
      --agenda-border-strong
    );
}

.agenda-inspector-metrics article {
  border-right-color:
    var(
      --agenda-border-strong
    );

  border-bottom-color:
    var(
      --agenda-border-strong
    );
}

.agenda-inspector-list {
  border-color:
    var(
      --agenda-border-strong
    );
}

.agenda-inspector-list article {
  border-bottom-color:
    var(
      --agenda-border-strong
    );
}

.agenda-inspector-field input {
  border-color:
    var(
      --agenda-border-strong
    );

  font-weight:
    700;
}

.agenda-backup-status {
  border-color:
    var(
      --agenda-border-strong
    );

  font-weight:
    800;
}

.agenda-editor-grid button,
.agenda-format-actions button,
.agenda-block-actions button {
  border-color:
    var(
      --agenda-border-strong
    );

  font-weight:
    800;
}

.agenda-inspector__footer {
  border-top:
    2px solid
    var(
      --agenda-border-strong
    );
}


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

.agenda-semanal-modal {
  border-color:
    var(
      --agenda-border-strong
    );
}

.agenda-semanal-modal__header {
  border-bottom:
    2px solid
    var(
      --agenda-border-strong
    );
}

.agenda-semanal-modal__footer {
  border-top:
    2px solid
    var(
      --agenda-border-strong
    );
}

.agenda-semanal-modal__icon {
  border-color:
    var(
      --agenda-border-strong
    );
}

.agenda-semanal-field__control {
  border-color:
    var(
      --agenda-border-strong
    );
}

.agenda-semanal-field__control input {
  font-weight:
    700;
}

.agenda-confirm-message {
  border-color:
    var(
      --agenda-border-strong
    );
}

.agenda-confirm-message__icon {
  border-color:
    var(
      --agenda-border-strong
    );
}


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

.agenda-semanal-toast {
  border-color:
    var(
      --agenda-border-strong
    );
}

.agenda-semanal-toast__icon {
  border-color:
    var(
      --agenda-border-strong
    );
}

.agenda-semanal-toast__body strong {
  font-weight:
    850;
}


/* =========================================================
   RESPONSIVE · TABLET
   ========================================================= */

@media (max-width: 920px) {
  .agenda-semanal-page {
    gap: 7px;
  }

  .agenda-semanal-head {
    gap: 10px;
    padding: 10px;
  }

  .agenda-week-summary {
    gap: 0;
  }

  .agenda-week-stat {
    padding: 8px;
  }

  .agenda-semanal-workspace {
    gap: 7px;
  }

  .agenda-semanal-content {
    padding: 7px;
  }
}


/* =========================================================
   RESPONSIVE · MOBILE
   ========================================================= */

@media (max-width: 560px) {
  .app-content:has(
    .agenda-semanal-page
  ) {
    padding: 5px;
    overflow-x: hidden;
  }

  .agenda-semanal-page {
    gap: 6px;
    overflow-x: hidden;
  }

  .agenda-semanal-head {
    gap: 8px;
    padding: 9px;
    border-radius: 10px;
  }

  .agenda-semanal-head__brand {
    gap: 7px;
  }

  .agenda-semanal-brand__icon {
    width: 32px;
    height: 32px;
    min-width: 32px;
  }

  .agenda-semanal-brand__icon .icon,
  .agenda-semanal-brand__icon svg {
    width: 15px;
    height: 15px;
  }

  .agenda-semanal-head__content h1 {
    font-size: 19px !important;
    font-weight: 900;
  }

  .agenda-semanal-eyebrow {
    font-size: 8px !important;
    font-weight: 850;
  }

  .agenda-semanal-head__content p {
    font-size: 10px !important;
    font-weight: 650;
  }

  .agenda-semanal-head__actions {
    gap: 5px;
  }

  .agenda-semanal-user {
    min-height: 34px;
  }

  .agenda-semanal-user small {
    font-size: 7px !important;
    font-weight: 850;
  }

  .agenda-semanal-user strong {
    font-size: 9px !important;
    font-weight: 800;
  }

  .agenda-button {
    min-height: 34px !important;
    padding: 0 9px !important;
    font-size: 9px !important;
    font-weight: 800;
  }

  .agenda-edit-indicator {
    min-height: 34px !important;
    font-size: 8.5px !important;
  }

  .agenda-week-summary {
    grid-template-columns:
      repeat(
        2,
        minmax(
          0,
          1fr
        )
      );
  }

  .agenda-week-stat,
  .agenda-week-stat:nth-child(2n),
  .agenda-week-stat:nth-child(3),
  .agenda-week-stat:nth-child(4),
  .agenda-week-stat:nth-child(5) {
    grid-column: auto;
    min-height: 62px !important;
    border-right:
      1px solid
      var(
        --agenda-border-strong
      );

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

  .agenda-week-stat:nth-child(2n) {
    border-right: 0;
  }

  .agenda-week-stat:last-child {
    grid-column:
      1 /
      -1;

    border-right: 0;
    border-bottom: 0;
  }

  .agenda-week-stat {
    grid-template-columns:
      30px
      minmax(
        0,
        1fr
      ) !important;

    gap: 7px !important;
    padding: 8px !important;
  }

  .agenda-week-stat__icon {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
  }

  .agenda-week-stat small {
    font-size: 7px !important;
    font-weight: 850;
  }

  .agenda-week-stat strong {
    font-size: 16px !important;
    font-weight: 900;
  }

  .agenda-week-stat > div > span {
    font-size: 7.5px !important;
    font-weight: 650;
  }

  .agenda-week-nav__head {
    min-height: 40px !important;
    padding: 6px 8px !important;
    border-bottom:
      2px solid
      var(
        --agenda-border-strong
      );
  }

  .agenda-week-nav__head > div > span {
    font-size: 7px !important;
    font-weight: 850;
  }

  .agenda-week-nav__head > div > strong {
    font-size: 9px !important;
    font-weight: 800;
  }

  .agenda-week-nav__meta {
    font-size: 8px !important;
    font-weight: 700;
  }

  .agenda-semanal-tabs {
    grid-template-columns:
      repeat(
        5,
        minmax(
          0,
          1fr
        )
      ) !important;

    overflow-x: hidden !important;
  }

  .agenda-tab {
    min-width: 0 !important;
    min-height: 52px !important;
    grid-template-columns: 1fr !important;
    gap: 4px !important;
    padding: 6px 3px !important;
    justify-items: center;
    text-align: center;
  }

  .agenda-tab__icon {
    width: 26px !important;
    height: 26px !important;
    min-width: 26px !important;
  }

  .agenda-tab__icon .icon,
  .agenda-tab__icon svg {
    width: 12px !important;
    height: 12px !important;
  }

  .agenda-tab__title-row strong {
    font-size: 8.5px !important;
    font-weight: 850;
  }

  .agenda-tab__short {
    display: inline;
  }

  .agenda-tab__full {
    display: none;
  }

  .agenda-tab__title-row small,
  .agenda-tab__meta {
    display: none;
  }

  .agenda-semanal-sheet {
    min-height: 360px !important;
  }

  .agenda-sheet-header {
    gap: 7px;
    padding: 8px;
    border-bottom:
      2px solid
      var(
        --agenda-border-strong
      );
  }

  .agenda-sheet-header__day {
    min-height: 28px;
    font-size: 7.5px;
  }

  .agenda-sheet-header__title input {
    font-size: 12px;
    font-weight: 850;
  }

  .agenda-semanal-content {
    min-height: 240px !important;
    gap: 5px;
    padding: 6px;
  }

  .agenda-block--text p,
  .agenda-block--checkbox > label span,
  .agenda-block--horario > strong,
  .agenda-block--list p,
  .agenda-block--list li {
    font-size: 9px;
    font-weight: 650;
  }

  .agenda-block--title h2 {
    font-size: 14px;
    font-weight: 900;
  }

  .agenda-block--subtitle h3 {
    font-size: 11px;
    font-weight: 850;
  }

  .agenda-block--checkbox {
    min-height: 38px;
    padding: 6px;
  }

  .agenda-block--checkbox > label b,
  .agenda-edit-checkbox b {
    width: 16px;
    height: 16px;
    min-width: 16px;
  }

  .agenda-semanal-footer {
    gap: 6px;
    padding: 7px;
    border-top:
      2px solid
      var(
        --agenda-border-strong
      );
  }

  .agenda-semanal-footer__metrics > span {
    font-size: 7.5px;
    font-weight: 700;
  }

  .agenda-semanal-footer__metrics strong {
    font-weight: 850;
  }

  .agenda-inspector.is-open {
    top: 5px;
    right: 5px;
    bottom: 5px;
    width:
      calc(
        100vw -
        10px
      );

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

  .agenda-inspector__head {
    border-bottom:
      2px solid
      var(
        --agenda-border-strong
      );
  }

  .agenda-inspector-section {
    padding: 7px;
    border-bottom:
      2px solid
      var(
        --agenda-border-strong
      );
  }

  .agenda-inspector-section__head span {
    font-size: 6px;
    font-weight: 850;
  }

  .agenda-inspector-section__head strong {
    font-size: 8.5px;
    font-weight: 850;
  }

  .agenda-inspector-metrics strong {
    font-size: 12px;
    font-weight: 900;
  }

  .agenda-inspector-metrics span {
    font-weight: 750;
  }

  .agenda-inspector-field > span {
    font-weight: 800;
  }

  .agenda-inspector-field input {
    height: 32px;
    font-size: 8.5px;
    font-weight: 700;
  }

  .agenda-editor-grid button,
  .agenda-format-actions button,
  .agenda-block-actions button {
    font-weight: 800;
  }

  .agenda-semanal-modal-backdrop {
    padding: 6px;
  }

  .agenda-semanal-modal {
    border-color:
      var(
        --agenda-border-strong
      );
  }

  .agenda-semanal-modal__header {
    border-bottom:
      2px solid
      var(
        --agenda-border-strong
      );
  }

  .agenda-semanal-modal__footer {
    border-top:
      2px solid
      var(
        --agenda-border-strong
      );
  }
}